Fix Select on chat fail / redesign chat window / add storybook components

.changeset/quiet-boxes-smoke.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": minor
+---
+
+Redesign chat window, update start screen, fix chat disabling, add Storybook stories.

package.json

@@ -77,7 +77,7 @@
 			{
 				"command": "roo-cline.mcpButtonClicked",
 				"title": "MCP Servers",
-				"icon": "$(server)"
+				"icon": "$(extensions)"
 			},
 			{
 				"command": "roo-cline.promptsButtonClicked",

src/core/webview/__tests__/ClineProvider.test.ts

@@ -8,6 +8,7 @@ import { ExtensionMessage, ExtensionState } from "../../../shared/ExtensionMessa
 import { setSoundEnabled } from "../../../utils/sound"
 import { defaultModeSlug } from "../../../shared/modes"
 import { experimentDefault } from "../../../shared/experiments"
+import { defaultExtensionState } from "../../../shared/ExtensionMessage"
 
 // Mock setup must come before imports
 jest.mock("../../prompts/sections/custom-instructions")
@@ -352,35 +353,10 @@ describe("ClineProvider", () => {
 		await provider.resolveWebviewView(mockWebviewView)
 
 		const mockState: ExtensionState = {
-			version: "1.0.0",
-			preferredLanguage: "English",
-			clineMessages: [],
-			taskHistory: [],
-			shouldShowAnnouncement: false,
+			...defaultExtensionState,
 			apiConfiguration: {
 				apiProvider: "openrouter",
 			},
-			customInstructions: undefined,
-			alwaysAllowReadOnly: false,
-			alwaysAllowWrite: false,
-			alwaysAllowExecute: false,
-			alwaysAllowBrowser: false,
-			alwaysAllowMcp: false,
-			uriScheme: "vscode",
-			soundEnabled: false,
-			diffEnabled: false,
-			enableCheckpoints: false,
-			writeDelayMs: 1000,
-			browserViewportSize: "900x600",
-			fuzzyMatchThreshold: 1.0,
-			mcpEnabled: true,
-			enableMcpServerCreation: false,
-			requestDelaySeconds: 5,
-			rateLimitSeconds: 0,
-			mode: defaultModeSlug,
-			customModes: [],
-			experiments: experimentDefault,
-			maxOpenTabsContext: 20,
 		}
 
 		const message: ExtensionMessage = {

src/shared/ExtensionMessage.ts

@@ -6,7 +6,7 @@ import { McpServer } from "./mcp"
 import { GitCommit } from "../utils/git"
 import { Mode, CustomModePrompts, ModeConfig } from "./modes"
 import { CustomSupportPrompts } from "./support-prompt"
-import { ExperimentId } from "./experiments"
+import { ExperimentId, experimentDefault } from "./experiments"
 
 export interface LanguageModelChatSelector {
 	vendor?: string
@@ -86,6 +86,11 @@ export interface ApiConfigMeta {
 }
 
 export interface ExtensionState {
+	glamaModels?: Record<string, ModelInfo>
+	requestyModels?: Record<string, ModelInfo>
+	openRouterModels?: Record<string, ModelInfo>
+	unboundModels?: Record<string, ModelInfo>
+	openAiModels?: string[]
 	version: string
 	clineMessages: ClineMessage[]
 	taskHistory: HistoryItem[]
@@ -240,3 +245,42 @@ export interface ClineApiReqInfo {
 }
 
 export type ClineApiReqCancelReason = "streaming_failed" | "user_cancelled"
+
+export const defaultExtensionState: ExtensionState = {
+	version: "1.0.0",
+	clineMessages: [],
+	taskHistory: [],
+	shouldShowAnnouncement: false,
+	allowedCommands: [],
+	soundEnabled: false,
+	soundVolume: 0.5,
+	diffEnabled: false,
+	enableCheckpoints: true,
+	fuzzyMatchThreshold: 1.0,
+	preferredLanguage: "English",
+	writeDelayMs: 1000,
+	browserViewportSize: "900x600",
+	screenshotQuality: 75,
+	terminalOutputLineLimit: 500,
+	mcpEnabled: true,
+	enableMcpServerCreation: true,
+	alwaysApproveResubmit: false,
+	requestDelaySeconds: 5,
+	rateLimitSeconds: 0,
+	currentApiConfigName: "default",
+	listApiConfigMeta: [],
+	mode: "code",
+	customModePrompts: {},
+	customSupportPrompts: {},
+	experiments: experimentDefault,
+	enhancementApiConfigId: "",
+	autoApprovalEnabled: false,
+	customModes: [],
+	maxOpenTabsContext: 20,
+	cwd: "",
+	glamaModels: {},
+	requestyModels: {},
+	openRouterModels: {},
+	unboundModels: {},
+	openAiModels: [],
+}

webview-ui/.storybook/main.ts

@@ -2,10 +2,23 @@ import type { StorybookConfig } from "@storybook/react-vite"
 
 const config: StorybookConfig = {
 	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-	addons: ["@storybook/addon-essentials", "storybook-dark-mode"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+		"storybook-dark-mode",
+		"storybook-vscode-component/register",
+	],
 	framework: {
 		name: "@storybook/react-vite",
 		options: {},
 	},
+	docs: {
+		autodocs: "tag",
+	},
+	core: {
+		builder: "@storybook/builder-vite",
+	},
 }
+
 export default config

webview-ui/.storybook/preview-context.tsx

@@ -0,0 +1,113 @@
+import { ExtensionStateContextType, ExtensionStateContext } from "../src/context/ExtensionStateContext"
+import { defaultExtensionState } from "../../src/shared/ExtensionMessage"
+import { McpServer } from "../../src/shared/mcp"
+import { ApiConfiguration, ModelInfo } from "../../src/shared/api"
+import { HistoryItem } from "../../src/shared/HistoryItem" // Import HistoryItem
+import { useContext } from "react"
+
+// Mock ModelInfo
+const mockModelInfo: ModelInfo = {
+	contextWindow: 2048,
+	supportsImages: true,
+	supportsPromptCache: true,
+	reasoningEffort: "low",
+}
+
+// Mock API configuration
+const mockApiConfig: ApiConfiguration = {
+	apiModelId: "mock-model",
+	glamaModelInfo: mockModelInfo,
+}
+
+// Mock MCP server
+const mockMcpServer: McpServer = {
+	name: "mock-server",
+	tools: [],
+	resources: [],
+	resourceTemplates: [],
+	disabled: false,
+	config: "?",
+	status: "disconnected",
+}
+
+// Mock task history item (Corrected to match HistoryItem type)
+const mockTaskHistoryItem: HistoryItem = {
+	id: "mock-task-id",
+	ts: Date.now(),
+	task: "Sample task",
+	tokensIn: 100,
+	tokensOut: 200,
+	totalCost: 0.5,
+}
+
+// Mock file paths and opened tabs (more realistic mock data)
+const mockFilePaths: string[] = [
+	"/Roo-Code/src/components/chat/ChatTextArea.tsx",
+	"/Roo-Code/src/components/common/CodeBlock.tsx",
+	"/Roo-Code/webview-ui/.storybook/preview-context.tsx",
+]
+const mockOpenedTabs: Array<{ label: string; isActive: boolean; path?: string }> = [
+	{ label: "ChatTextArea.tsx", isActive: true, path: "/Roo-Code/src/components/chat/ChatTextArea.tsx" },
+	{ label: "CodeBlock.tsx", isActive: false, path: "/Roo-Code/src/components/common/CodeBlock.tsx" },
+]
+
+const defaultContext: ExtensionStateContextType = {
+	...defaultExtensionState,
+	// Override specific properties for testing
+	theme: {},
+	didHydrateState: true,
+	showWelcome: false,
+	apiConfiguration: mockApiConfig,
+	mcpServers: [mockMcpServer],
+	taskHistory: [mockTaskHistoryItem],
+	filePaths: mockFilePaths,
+	openedTabs: mockOpenedTabs,
+	// Add setter functions
+	setApiConfiguration: () => {},
+	setCustomInstructions: () => {},
+	setAlwaysAllowReadOnly: () => {},
+	setAlwaysAllowWrite: () => {},
+	setAlwaysAllowExecute: () => {},
+	setAlwaysAllowBrowser: () => {},
+	setAlwaysAllowMcp: () => {},
+	setAlwaysAllowModeSwitch: () => {},
+	setShowAnnouncement: () => {},
+	setAllowedCommands: () => {},
+	setSoundEnabled: () => {},
+	setSoundVolume: () => {},
+	setDiffEnabled: () => {},
+	setCheckpointsEnabled: () => {},
+	setBrowserViewportSize: () => {},
+	setFuzzyMatchThreshold: () => {},
+	setPreferredLanguage: () => {},
+	setWriteDelayMs: () => {},
+	setScreenshotQuality: () => {},
+	setTerminalOutputLineLimit: () => {},
+	setMcpEnabled: () => {},
+	setEnableMcpServerCreation: () => {},
+	setAlwaysApproveResubmit: () => {},
+	setRequestDelaySeconds: () => {},
+	setRateLimitSeconds: () => {},
+	setCurrentApiConfigName: () => {},
+	setListApiConfigMeta: () => {},
+	setMode: () => {},
+	setCustomModePrompts: () => {},
+	setCustomSupportPrompts: () => {},
+	setEnhancementApiConfigId: () => {},
+	setExperimentEnabled: () => {},
+	setAutoApprovalEnabled: () => {},
+	setCustomModes: () => {},
+	setMaxOpenTabsContext: () => {},
+}
+
+export const PreviewExtensionStateContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	console.log("PreviewExtensionStateContextProvider is rendering!") // Re-add console log
+	console.log("Context Value:", defaultContext) // Log context value
+	return <ExtensionStateContext.Provider value={defaultContext}>{children}</ExtensionStateContext.Provider>
+}
+
+export const usePreviewExtensionState = () => {
+	const context = useContext(ExtensionStateContext)
+	console.log("useExtensionState Hook Context:", context) // Log context in hook
+	return context
+}

webview-ui/.storybook/preview.css

@@ -0,0 +1,110 @@
+/* VS Code theme variables */
+:root {
+	/* Base theme */
+	--vscode-foreground: #d1d5da;
+	--vscode-editor-background: #24292e;
+	--vscode-editor-foreground: #e1e4e8;
+
+	/* Input elements */
+	--vscode-input-background: #2f363d;
+	--vscode-input-foreground: #e1e4e8;
+	--vscode-input-border: #1b1f23;
+	--vscode-focusBorder: #005cc5;
+
+	/* Buttons */
+	--vscode-button-background: #176f2c;
+	--vscode-button-foreground: #dcffe4;
+	--vscode-button-hoverBackground: #1177bb;
+	--vscode-button-secondaryBackground: #444d56;
+	--vscode-button-secondaryForeground: #ffffff;
+
+	/* Dropdowns and Lists */
+	--vscode-dropdown-background: #2f363d;
+	--vscode-dropdown-foreground: #e1e4e8;
+	--vscode-dropdown-border: #1b1f23;
+	--vscode-list-hoverBackground: #282e34;
+	--vscode-list-hoverForeground: #e1e4e8;
+	--vscode-list-focusBackground: #044289;
+
+	/* Badges and Notifications */
+	--vscode-badge-background: #044289;
+	--vscode-badge-foreground: #c8e1ff;
+	--vscode-notifications-background: #2f363d;
+	--vscode-notifications-foreground: #e1e4e8;
+	--vscode-notifications-border: #1b1f23;
+
+	/* Editor elements */
+	--vscode-editorGroup-border: #444444;
+	--vscode-diffEditor-insertedTextBackground: #37373d;
+	--vscode-diffEditor-removedTextBackground: #3c1f1f;
+	--vscode-textCodeBlock-background: #1e1e1e;
+	--vscode-textSeparator-foreground: #424242;
+	--vscode-textPreformat-foreground: #d7ba7d;
+	--vscode-textLink-foreground: #3794ff;
+
+	/* Status indicators */
+	--vscode-errorForeground: #f97583;
+	--vscode-descriptionForeground: #959da5;
+	--vscode-charts-green: #89d185;
+	--vscode-titleBar-inactiveForeground: #cccccc99;
+
+	/* Menu (from shadcn/ui) */
+	--vscode-menu-background: #2f363d;
+	--vscode-menu-foreground: #e1e4e8;
+	--vscode-disabledForeground: #cccccc;
+
+	/* Typography */
+	--vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	--vscode-font-size: 13px;
+	--vscode-editor-font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono",
+		"DejaVu Sans Mono", "Courier New", monospace;
+	--vscode-editor-font-size: 12px;
+	--vscode-editor-line-height: 18px;
+}
+
+/* Dark theme */
+.dark {
+	color-scheme: dark;
+	background-color: var(--vscode-editor-background);
+	color: var(--vscode-editor-foreground);
+}
+
+/* Light theme */
+.light {
+	color-scheme: light;
+	background-color: #ffffff;
+	color: #000000;
+}
+
+/* Global styles */
+body {
+	margin: 0;
+	padding: 0;
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
+	line-height: 1.4;
+}
+
+/* Mermaid diagram styles */
+.mermaid {
+	background: var(--vscode-editor-background);
+}
+
+/* VS Code scrollbar styles */
+::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #424242;
+	border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #686868;
+}