Add UI and fix build

Author: charlessolar

src/core/prompts/sections/schedulable-rules.ts

@@ -136,13 +136,15 @@ export class SchedulableRulesManager {
 
 					logger.debug(`Loaded rule file: ${file}, interval: ${display}`)
 				} catch (err) {
-					logger.error(`Failed to parse schedulable rule file ${file}:`, err)
+					logger.error(
+						`Failed to parse schedulable rule file ${file}: ${err instanceof Error ? err.message : String(err)}`,
+					)
 				}
 			}
 
 			return rules
 		} catch (err) {
-			logger.error("Failed to load schedulable rules:", err)
+			logger.error(`Failed to load schedulable rules: ${err instanceof Error ? err.message : String(err)}`)
 			return []
 		}
 	}

src/core/webview/ClineProvider.ts

@@ -22,6 +22,7 @@ import { Mode, PromptComponent, defaultModeSlug, ModeConfig } from "../../shared
 import { checkExistKey } from "../../shared/checkExistApiConfig"
 import { EXPERIMENT_IDS, experiments as Experiments, experimentDefault, ExperimentId } from "../../shared/experiments"
 import { TERMINAL_OUTPUT_LIMIT } from "../../shared/terminal"
+import { TelemetrySetting } from "../../shared/TelemetrySetting"
 import { downloadTask } from "../../integrations/misc/export-markdown"
 import { openFile, openImage } from "../../integrations/misc/open-file"
 import { selectImages } from "../../integrations/misc/process-images"
@@ -56,7 +57,7 @@ import { openMention } from "../mentions"
 import { getNonce } from "./getNonce"
 import { getUri } from "./getUri"
 import { telemetryService } from "../../services/telemetry/TelemetryService"
-import { TelemetrySetting } from "../../shared/TelemetrySetting"
+import { SchedulableRulesManager } from "../prompts/sections/schedulable-rules"
 
 /**
  * https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -73,6 +74,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	private clineStack: Cline[] = []
 	private workspaceTracker?: WorkspaceTracker
 	protected mcpHub?: McpHub // Change from private to protected
+	private schedulableRulesManager: SchedulableRulesManager
 	private latestAnnouncementId = "mar-7-2025-3-8" // update to some unique identifier when we add a new announcement
 	private contextProxy: ContextProxy
 	configManager: ConfigManager
@@ -90,6 +92,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		// Register this provider with the telemetry service to enable it to add properties like mode and provider
 		telemetryService.setProvider(this)
 
+		// Initialize SchedulableRulesManager
+		this.schedulableRulesManager = new SchedulableRulesManager()
+		this.outputChannel.appendLine("SchedulableRulesManager initialized")
+
 		this.workspaceTracker = new WorkspaceTracker(this)
 		this.configManager = new ConfigManager(this.context)
 		this.customModesManager = new CustomModesManager(this.context, async () => {
@@ -1963,6 +1969,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				experiments,
 				enableMcpServerCreation,
 				rooIgnoreInstructions,
+				this.schedulableRulesManager,
 			)
 			return systemPrompt
 		}
@@ -2335,6 +2342,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			telemetrySetting,
 			showRooIgnoredFiles,
 		} = await this.getState()
+
+		// Get schedulable rules data
+		// Get schedulable rules data
+		let schedulableRules = await this.schedulableRulesManager.getAllRules(
+			vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) || "",
+		)
 		const telemetryKey = process.env.POSTHOG_API_KEY
 		const machineId = vscode.env.machineId
 
@@ -2353,6 +2366,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			alwaysAllowMcp: alwaysAllowMcp ?? false,
 			alwaysAllowModeSwitch: alwaysAllowModeSwitch ?? false,
 			alwaysAllowSubtasks: alwaysAllowSubtasks ?? false,
+			schedulableRules,
 			uriScheme: vscode.env.uriScheme,
 			currentTaskItem: this.getCurrentCline()?.taskId
 				? (taskHistory || []).find((item: HistoryItem) => item.id === this.getCurrentCline()?.taskId)

src/shared/ExtensionMessage.ts

@@ -54,6 +54,7 @@ export interface ExtensionMessage {
 		| "browserToolEnabled"
 		| "browserConnectionResult"
 		| "remoteBrowserEnabled"
+		| "schedulableRules"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -83,6 +84,12 @@ export interface ExtensionMessage {
 	mcpServers?: McpServer[]
 	commits?: GitCommit[]
 	listApiConfig?: ApiConfigMeta[]
+	schedulableRules?: Array<{
+		fileName: string
+		displayInterval: string
+		nextExecution: number
+		lastExecuted: number
+	}>
 	mode?: Mode
 	customMode?: ModeConfig
 	slug?: string
@@ -150,6 +157,12 @@ export interface ExtensionState {
 	telemetryKey?: string
 	machineId?: string
 	showRooIgnoredFiles: boolean // Whether to show .rooignore'd files in listings
+	schedulableRules?: Array<{
+		fileName: string
+		displayInterval: string
+		nextExecution: number
+		lastExecuted: number
+	}>
 }
 
 export type { ClineMessage, ClineAsk, ClineSay }

webview-ui/src/components/prompts/PromptsView.tsx

@@ -23,6 +23,7 @@ import {
 } from "@/components/ui"
 import { cn } from "@/lib/utils"
 import { useExtensionState } from "../../context/ExtensionStateContext"
+import SchedulableRulesSection from "./SchedulableRulesSection"
 import {
 	Mode,
 	PromptComponent,
@@ -54,8 +55,8 @@ type PromptsViewProps = {
 }
 
 // Helper to get group name regardless of format
-function getGroupName(group: GroupEntry): ToolGroup {
-	return Array.isArray(group) ? group[0] : group
+function getGroupName(group: GroupEntry): string {
+	return Array.isArray(group) ? group[0] : (group as string)
 }
 
 const PromptsView = ({ onDone }: PromptsViewProps) => {
@@ -74,6 +75,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		customModes,
 		enableCustomModeCreation,
 		setEnableCustomModeCreation,
+		schedulableRules,
 	} = useExtensionState()
 
 	// Memoize modes to preserve array order
@@ -949,6 +951,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 				</div>
 
+				{/* Schedulable Rules Section */}
+				{schedulableRules && schedulableRules.length > 0 && (
+					<SchedulableRulesSection rules={schedulableRules} />
+				)}
+
 				<div
 					style={{
 						paddingBottom: "40px",

webview-ui/src/components/prompts/SchedulableRulesSection.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react"
+import { vscode } from "../../utils/vscode"
+
+type SchedulableRule = {
+	fileName: string
+	displayInterval: string
+	nextExecution: number
+}
+
+type SchedulableRulesSectionProps = {
+	rules: SchedulableRule[]
+}
+
+const SchedulableRulesSection: React.FC<SchedulableRulesSectionProps> = ({ rules }) => {
+	const [isExpanded, setIsExpanded] = useState(true)
+
+	const formatTimeRemaining = (ms: number): string => {
+		if (ms <= 0) return "Now"
+
+		const seconds = Math.floor(ms / 1000)
+		const minutes = Math.floor(seconds / 60)
+		const hours = Math.floor(minutes / 60)
+		const days = Math.floor(hours / 24)
+
+		if (days > 0) return `${days}d ${hours % 24}h`
+		if (hours > 0) return `${hours}h ${minutes % 60}m`
+		if (minutes > 0) return `${minutes}m ${seconds % 60}s`
+		return `${seconds}s`
+	}
+
+	if (rules.length === 0) return null
+
+	return (
+		<div className="py-5 border-b border-vscode-input-border">
+			<div className="flex justify-between items-center mb-3">
+				<div onClick={() => setIsExpanded(!isExpanded)} className="cursor-pointer flex items-center">
+					<span className={`codicon codicon-${isExpanded ? "chevron-down" : "chevron-right"} mr-2`}></span>
+					<h3 className="text-vscode-foreground m-0">Schedulable Rules</h3>
+				</div>
+			</div>
+
+			{isExpanded && (
+				<>
+					<div className="text-sm text-vscode-descriptionForeground mb-3">
+						Rules that are automatically applied at specified time intervals. Click a rule to edit it.
+					</div>
+
+					<div className="space-y-2">
+						{rules.map((rule) => (
+							<div
+								key={rule.fileName}
+								className="flex justify-between items-center p-2 hover:bg-vscode-list-hoverBackground rounded cursor-pointer"
+								onClick={() => {
+									vscode.postMessage({
+										type: "openFile",
+										text: `./${rule.fileName}`,
+										values: {
+											create: false,
+										},
+									})
+								}}>
+								<div>
+									<div className="font-medium">{rule.fileName}</div>
+									<div className="text-xs text-vscode-descriptionForeground">
+										Every {rule.displayInterval}
+									</div>
+								</div>
+								<div className="flex items-center">
+									<span className="text-xs bg-vscode-badge-background text-vscode-badge-foreground rounded-full px-2 py-1">
+										Next: {formatTimeRemaining(rule.nextExecution)}
+									</span>
+								</div>
+							</div>
+						))}
+					</div>
+				</>
+			)}
+		</div>
+	)
+}
+
+export default SchedulableRulesSection

webview-ui/src/context/ExtensionStateContext.tsx

@@ -78,6 +78,12 @@ export interface ExtensionStateContextType extends ExtensionState {
 	remoteBrowserEnabled?: boolean
 	setRemoteBrowserEnabled: (value: boolean) => void
 	machineId?: string
+	schedulableRules?: Array<{
+		fileName: string
+		displayInterval: string
+		nextExecution: number
+		lastExecuted: number
+	}>
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -208,6 +214,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					setCurrentCheckpoint(message.text)
 					break
 				}
+				case "schedulableRules": {
+					setState((prevState) => ({ ...prevState, schedulableRules: message.schedulableRules }))
+					break
+				}
 				case "listApiConfig": {
 					setListApiConfigMeta(message.listApiConfig ?? [])
 					break