diff --git a/src/api/index.ts b/src/api/index.ts
index bf40b5c2990..e9799644010 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -19,7 +19,7 @@ import { RequestyHandler } from "./providers/requesty"
 import { PearAiHandler } from "./providers/pearai"
 
 export interface SingleCompletionHandler {
-	completePrompt(prompt: string): Promise<string>
+	completePrompt(prompt: string, useCreatorMode?: boolean): Promise<string>
 }
 
 export interface ApiHandler {
diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
index 4f97d3771ad..81d458e2880 100644
--- a/src/core/webview/ClineProvider.ts
+++ b/src/core/webview/ClineProvider.ts
@@ -48,6 +48,7 @@ import { Cline } from "../Cline"
 import { openMention } from "../mentions"
 import { getNonce } from "./getNonce"
 import { getUri } from "./getUri"
+import { PearAiHandler } from "../../api/providers/pearai"
 
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -73,10 +74,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	private latestAnnouncementId = "jan-21-2025-custom-modes" // update to some unique identifier when we add a new announcement
 	configManager: ConfigManager
 	customModesManager: CustomModesManager
+	private proprietaryContext: string[] = []
 
 	constructor(
 		readonly context: vscode.ExtensionContext,
 		private readonly outputChannel: vscode.OutputChannel,
+		public viewType: "pearai.roo.agentChat" | "pearai.roo.creatorOverlayView" = "pearai.roo.agentChat",
 	) {
 		this.outputChannel.appendLine("ClineProvider instantiated")
 		ClineProvider.activeInstances.add(this)
@@ -86,6 +89,8 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			await this.postStateToWebview()
 		})
 
+		this.listenForPearAiMessages()
+
 		// Initialize MCP Hub through the singleton manager
 		McpServerManager.getInstance(this.context, this)
 			.then((hub) => {
@@ -127,6 +132,30 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		McpServerManager.unregisterProvider(this)
 	}
 
+	private async listenForPearAiMessages() {
+		// Getting the pear ai extension instance
+		const pearaiExtension = vscode.extensions.getExtension("pearai.pearai")
+
+		if (!pearaiExtension) {
+			console.log("PearAI Extension not found")
+			return
+		}
+
+		if (!pearaiExtension.isActive) {
+			await pearaiExtension.activate()
+		}
+
+		// Access the API directly from exports
+		if (pearaiExtension.exports) {
+			// TODO: SETUP TYPES FOR THE PEAR AI EXPORT
+			pearaiExtension.exports.pearAPI.creatorMode.onDidRequestExecutePlan((msg: any) => {
+				console.dir(`onDidRequestNewTask triggered with: ${JSON.stringify(msg)}`)
+			})
+		} else {
+			console.log("PearAI API not available in exports")
+		}
+	}
+
 	public static getVisibleInstance(): ClineProvider | undefined {
 		return findLast(Array.from(this.activeInstances), (instance) => instance.view?.visible === true)
 	}
@@ -317,7 +346,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 		this.outputChannel.appendLine("Webview view resolved")
 	}
 
-	public async initClineWithTask(task?: string, images?: string[]) {
+	public async initClineWithTask(task?: string, images?: string[], proprietaryContext?: ("CreatorMode" | string)[]) {
+		this.proprietaryContext = proprietaryContext ?? []
+		// TODO - MUST DO BEFORE MERGE - WE NEED TO HANDLE THE PROPRIETARY CONTEXT
 		await this.clearTask()
 		const {
 			apiConfiguration,
@@ -414,6 +445,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				window.$RefreshReg$ = () => {}
 				window.$RefreshSig$ = () => (type) => type
 				window.__vite_plugin_react_preamble_installed__ = true
+				window.viewType = "${this.viewType}";
 			</script>
 		`
 
@@ -510,6 +542,9 @@ export class ClineProvider implements vscode.WebviewViewProvider {
             <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}'; connect-src ${webview.cspSource} https://stingray-app-gb2an.ondigitalocean.app;">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
+			<script nonce="${nonce}" type="module">
+				window.viewType = "${this.viewType}";
+			</script>
             <title>Roo Code</title>
           </head>
           <body>
@@ -735,6 +770,68 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						// initializing new instance of Cline will make sure that any agentically running promises in old instance don't affect our new task. this essentially creates a fresh slate for the new task
 						await this.initClineWithTask(message.text, message.images)
 						break
+					case "newCreatorModeTask":
+						// TODO: Get back the plan from the AI model
+						// Return the plan to the UI to be edited
+						const { apiConfiguration } = await this.getState()
+						// apiConfiguration.apiModelId
+						// const pearAiModels = usePearAiModels(apiConfiguration)
+						// const pearAI = vscode.extensions.getExtension("pearai.pearai");
+						// if(!pearAI) {
+						// 	console.warn("COULDN'T FIND PEAR AI SUBMODULE");
+						// }
+						// pearAI?.exports
+						// console.log("PEAR AI EXPORTS", pearAI?.exports);
+						const systemPrompt = `
+							Best practices:
+							For any webapp project, ALWAYS adhere to these rules, unless otherwise specified:
+							React with TypeScript for the frontend
+							Tailwind CSS for styling
+							Shadcn/UI components (via Radix UI)
+							Supabase for backend/database
+							React Query for data management
+							React Router for navigation
+							Recharts for data visualization
+							React Hook Form for form handling`
+						const pearAIClass = new PearAiHandler(apiConfiguration)
+						let responseText = ""
+						const messageGenerator = pearAIClass.createMessage(systemPrompt, [
+							{
+								role: "user",
+								content: message.text,
+							},
+						])
+
+						for await (const chunk of messageGenerator) {
+							if (chunk.type === "text") {
+								responseText += chunk.text
+							}
+
+							await this.postMessageToWebview({
+								type: "planCreationStream",
+								text: responseText,
+							})
+						}
+						await this.postMessageToWebview({
+							type: "planCreationSuccess",
+							text: responseText,
+						})
+
+						break
+					case "creatorModePlannedTaskSubmit":
+						// TODO: Trigger the "newTask" flow flow, initialising cline with a task
+						// Go into the planned mode shizz
+						// vscode.commands.executeCommand("workbench.action.enterCreatorMode")
+						await this.postMessageToWebview({
+							type: "invoke",
+							invoke: "setChatBoxMessage",
+							text: message.text,
+						})
+						await this.postMessageToWebview({ type: "invoke", invoke: "primaryButtonClick" })
+
+						await this.initClineWithTask(message.text, message.images)
+						await this.postStateToWebview()
+						break
 					case "apiConfiguration":
 						if (message.apiConfiguration) {
 							await this.updateApiConfiguration(message.apiConfiguration)
@@ -1338,6 +1435,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							try {
 								await this.configManager.saveConfig(message.text, message.apiConfiguration)
 								const listApiConfig = await this.configManager.listConfig()
+
 								await this.updateGlobalState("listApiConfigMeta", listApiConfig)
 							} catch (error) {
 								this.outputChannel.appendLine(
diff --git a/src/extension.ts b/src/extension.ts
index ef8895ee24b..d08d87244c1 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -35,7 +35,7 @@ export function activate(context: vscode.ExtensionContext) {
 		context.globalState.update("allowedCommands", defaultCommands)
 	}
 
-	const sidebarProvider = new ClineProvider(context, outputChannel)
+	const sidebarProvider = new ClineProvider(context, outputChannel, "pearai.roo.agentChat")
 
 	context.subscriptions.push(
 		vscode.window.registerWebviewViewProvider(ClineProvider.sideBarId, sidebarProvider, {
@@ -79,6 +79,12 @@ export function activate(context: vscode.ExtensionContext) {
 		}),
 	)
 
+	const creatorOverlay = new ClineProvider(context, outputChannel, "pearai.roo.creatorOverlayView")
+
+	context.subscriptions.push(
+		vscode.window.registerWebviewViewProvider("pearai.roo.creatorOverlayView", creatorOverlay),
+	)
+
 	// context.subscriptions.push(
 	// 	vscode.commands.registerCommand("roo-cline.mcpButtonClicked", () => {
 	// 		sidebarProvider.postMessageToWebview({ type: "action", action: "mcpButtonClicked" })
@@ -95,7 +101,7 @@ export function activate(context: vscode.ExtensionContext) {
 		outputChannel.appendLine("Opening Roo Code in new tab")
 		// (this example uses webviewProvider activation event which is necessary to deserialize cached webview, but since we use retainContextWhenHidden, we don't need to use that event)
 		// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
-		const tabProvider = new ClineProvider(context, outputChannel)
+		const tabProvider = new ClineProvider(context, outputChannel, "pearai.roo.agentChat")
 		//const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined
 		const lastCol = Math.max(...vscode.window.visibleTextEditors.map((editor) => editor.viewColumn || 0))
 
diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts
index e87edffed16..c5fe43a0c0a 100644
--- a/src/shared/ExtensionMessage.ts
+++ b/src/shared/ExtensionMessage.ts
@@ -45,6 +45,8 @@ export interface ExtensionMessage {
 		| "updateCustomMode"
 		| "deleteCustomMode"
 		| "currentCheckpointUpdated"
+		| "planCreationStream"
+		| "planCreationSuccess"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -194,6 +196,8 @@ export interface ClineSayTool {
 		| "searchFiles"
 		| "switchMode"
 		| "newTask"
+		| "newCreatorModeTask"
+		| "creatorModePlannedTaskSubmit"
 	path?: string
 	diff?: string
 	content?: string
diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts
index 6f24415b624..c41f7705dec 100644
--- a/src/shared/WebviewMessage.ts
+++ b/src/shared/WebviewMessage.ts
@@ -25,6 +25,8 @@ export interface WebviewMessage {
 		| "alwaysAllowExecute"
 		| "webviewDidLaunch"
 		| "newTask"
+		| "newCreatorModeTask"
+		| "creatorModePlannedTaskSubmit"
 		| "askResponse"
 		| "clearTask"
 		| "didShowAnnouncement"
@@ -95,6 +97,8 @@ export interface WebviewMessage {
 		| "openPearAiAuth"
 		| "deleteMcpServer"
 		| "maxOpenTabsContext"
+		| "pearAiHideCreatorLoadingOverlay"
+		| "pearAiCloseCreatorInterface"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse
diff --git a/webview-ui/package-lock.json b/webview-ui/package-lock.json
index 2739ce988f7..434650c5b86 100644
--- a/webview-ui/package-lock.json
+++ b/webview-ui/package-lock.json
@@ -34,6 +34,7 @@
 				"react-dom": "^18.3.1",
 				"react-markdown": "^9.0.3",
 				"react-remark": "^2.1.0",
+				"react-router-dom": "^7.3.0",
 				"react-textarea-autosize": "^8.5.3",
 				"react-use": "^17.5.1",
 				"react-virtuoso": "^4.7.13",
@@ -6674,6 +6675,12 @@
 				"@babel/types": "^7.20.7"
 			}
 		},
+		"node_modules/@types/cookie": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+			"license": "MIT"
+		},
 		"node_modules/@types/debug": {
 			"version": "4.1.12",
 			"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -8661,6 +8668,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/cookie": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+			"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/copy-to-clipboard": {
 			"version": "3.3.3",
 			"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
@@ -16775,6 +16791,46 @@
 				}
 			}
 		},
+		"node_modules/react-router": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.3.0.tgz",
+			"integrity": "sha512-466f2W7HIWaNXTKM5nHTqNxLrHTyXybm7R0eBlVSt0k/u55tTCDO194OIx/NrYD4TS5SXKTNekXfT37kMKUjgw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/cookie": "^0.6.0",
+				"cookie": "^1.0.1",
+				"set-cookie-parser": "^2.6.0",
+				"turbo-stream": "2.4.0"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=18",
+				"react-dom": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/react-router-dom": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.3.0.tgz",
+			"integrity": "sha512-z7Q5FTiHGgQfEurX/FBinkOXhWREJIAB2RiU24lvcBa82PxUpwqvs/PAXb9lJyPjTs2jrl6UkLvCZVGJPeNuuQ==",
+			"license": "MIT",
+			"dependencies": {
+				"react-router": "7.3.0"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=18",
+				"react-dom": ">=18"
+			}
+		},
 		"node_modules/react-style-singleton": {
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -17499,6 +17555,12 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/set-cookie-parser": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+			"license": "MIT"
+		},
 		"node_modules/set-function-length": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -18616,6 +18678,12 @@
 			"dev": true,
 			"license": "0BSD"
 		},
+		"node_modules/turbo-stream": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+			"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+			"license": "ISC"
+		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/webview-ui/package.json b/webview-ui/package.json
index 99bae778e13..aa839f59655 100644
--- a/webview-ui/package.json
+++ b/webview-ui/package.json
@@ -15,15 +15,15 @@
 		"build-storybook": "storybook build"
 	},
 	"dependencies": {
+		"@headlessui/react": "^2.2.0",
 		"@radix-ui/react-alert-dialog": "^1.1.6",
 		"@radix-ui/react-collapsible": "^1.1.3",
 		"@radix-ui/react-dialog": "^1.1.6",
 		"@radix-ui/react-dropdown-menu": "^2.1.5",
 		"@radix-ui/react-icons": "^1.3.2",
 		"@radix-ui/react-popover": "^1.1.6",
-		"@headlessui/react": "^2.2.0",
-		"@radix-ui/react-select": "^2.1.5",
 		"@radix-ui/react-progress": "^1.1.2",
+		"@radix-ui/react-select": "^2.1.5",
 		"@radix-ui/react-separator": "^1.1.2",
 		"@radix-ui/react-slider": "^1.2.3",
 		"@radix-ui/react-slot": "^1.1.2",
@@ -41,6 +41,7 @@
 		"react-dom": "^18.3.1",
 		"react-markdown": "^9.0.3",
 		"react-remark": "^2.1.0",
+		"react-router-dom": "^7.3.0",
 		"react-textarea-autosize": "^8.5.3",
 		"react-use": "^17.5.1",
 		"react-virtuoso": "^4.7.13",
diff --git a/webview-ui/src/creatorOverlay/index.tsx b/webview-ui/src/creatorOverlay/index.tsx
new file mode 100644
index 00000000000..109c9226107
--- /dev/null
+++ b/webview-ui/src/creatorOverlay/index.tsx
@@ -0,0 +1,160 @@
+import { vscode } from "@/utils/vscode"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useEvent } from "react-use"
+import { ExtensionMessage } from "../../../src/shared/ExtensionMessage"
+import { RGBWrapper } from "./rgbBackground"
+import { PlanEditor } from "./planEditor"
+import { InputBox } from "./inputBox"
+
+/**
+ * CreatorOverlay component provides a full-screen overlay with an auto-focusing input field
+ * for capturing user commands or queries.
+ *
+ * - This automatically captures keystrokes and redirects them to the input
+ * - Global keyboard handling: Captures keyboard input even when the textarea isn't focused
+ * - Automatic text area resizing
+ * - Escape key closes the overlay
+ * - Enter submits the request
+ * - Clicking the background closes the overlay
+ */
+export const CreatorOverlay = () => {
+	const [initialMessage, setInitialMessage] = useState("")
+	const [newProjectPlan, setNewProjectPlan] = useState("")
+	const [planCreationDone, setPlanCreationDone] = useState(false)
+	const [isStreaming, setIsStreaming] = useState(false)
+	const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+	const isCapturingRef = useRef(false)
+
+	const close = useCallback(() => {
+		setInitialMessage("")
+		setNewProjectPlan("")
+		setPlanCreationDone(false)
+		setIsStreaming(false)
+		vscode.postMessage({
+			type: "pearAiCloseCreatorInterface",
+		})
+		setInitialMessage("")
+	}, [])
+
+	const forceFocus = useCallback(() => {
+		if (!textareaRef.current) return
+
+		try {
+			textareaRef.current.focus()
+			textareaRef.current.focus({ preventScroll: false })
+			textareaRef.current.scrollIntoView({ behavior: "smooth", block: "center" })
+		} catch (e) {
+			console.error("Focus attempt failed:", e)
+		}
+	}, [])
+
+	useEffect(() => {
+		vscode.postMessage({
+			type: "pearAiHideCreatorLoadingOverlay",
+		})
+
+		forceFocus()
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				close()
+				return
+			}
+
+			if (document.activeElement === textareaRef.current) {
+				return
+			}
+
+			if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+				e.preventDefault()
+				e.stopPropagation()
+
+				forceFocus()
+
+				if (!isCapturingRef.current) {
+					setInitialMessage((prevText) => prevText + e.key)
+					isCapturingRef.current = true
+
+					setTimeout(() => {
+						isCapturingRef.current = false
+					}, 100)
+				}
+			}
+		}
+
+		window.addEventListener("keydown", handleKeyDown, { capture: true })
+
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown, { capture: true })
+		}
+	}, [close, forceFocus])
+
+	const handleRequest = useCallback(() => {
+		if (initialMessage.trim()) {
+			setIsStreaming(true)
+			vscode.postMessage({
+				type: "newCreatorModeTask",
+				text: initialMessage,
+			})
+		}
+	}, [initialMessage])
+
+	const handleMakeIt = useCallback(() => {
+		if (newProjectPlan.trim()) {
+			vscode.postMessage({
+				type: "creatorModePlannedTaskSubmit",
+				text: `INITIAL IDEA: ${initialMessage} -- PLAN: ${newProjectPlan}`,
+			})
+			close()
+		}
+	}, [newProjectPlan, close])
+
+	const onMessage = useCallback((e: MessageEvent) => {
+		const message: ExtensionMessage = e.data
+
+		if (message.type === "planCreationStream" && message.text) {
+			console.log(`STREAMED TEXT: ${message.text}`)
+			setNewProjectPlan(message.text)
+		} else if (message.type === "planCreationSuccess") {
+			setIsStreaming(false)
+			setPlanCreationDone(true)
+		}
+	}, [])
+
+	useEvent("message", onMessage)
+
+	return (
+		<div onClick={close} className="fixed inset-0 flex items-center justify-center bg-white">
+			<div onClick={(e) => e.stopPropagation()} className="justify-center align-middle m-auto w-full max-w-3xl ">
+				<RGBWrapper className="px-4 my-auto w-full">
+					{/* Stage 1: get the input from the user about what to make */}
+					{
+						(!isStreaming && !planCreationDone) && (
+							<InputBox
+								textareaRef={textareaRef}
+								initialMessage={initialMessage}
+								setInitialMessage={setInitialMessage}
+								handleRequest={handleRequest}
+								isDisabled={isStreaming || planCreationDone}
+							/>
+						)
+					}
+					{/* Stage 2: Stream down the plan and display it to the user, let them comment and formulate the plan */}
+					{(isStreaming || planCreationDone) && (
+						<>
+							<div className="my-6 border-t border-gray-200"></div>
+
+							<PlanEditor
+								newProjectPlan={newProjectPlan}
+								setNewProjectPlan={setNewProjectPlan}
+								isStreaming={isStreaming}
+								planCreationDone={planCreationDone}
+								handleMakeIt={handleMakeIt}
+							/>
+						</>
+					)}
+				</RGBWrapper>
+			</div>
+		</div>
+	)
+}
diff --git a/webview-ui/src/creatorOverlay/inputBox.tsx b/webview-ui/src/creatorOverlay/inputBox.tsx
new file mode 100644
index 00000000000..0fb0a2ab344
--- /dev/null
+++ b/webview-ui/src/creatorOverlay/inputBox.tsx
@@ -0,0 +1,89 @@
+import { Button } from "./ui/button"
+import { ArrowTurnDownLeftIcon } from "@heroicons/react/24/outline"
+import { EnterIcon } from "@radix-ui/react-icons"
+import { FileText, Pencil, Sun } from "lucide-react"
+import React, { useCallback, useState } from "react"
+
+interface InputBoxProps {
+	textareaRef: React.RefObject<HTMLTextAreaElement>
+	initialMessage: string
+	setInitialMessage: (value: string) => void
+	handleRequest: () => void
+	isDisabled: boolean
+}
+
+export const InputBox: React.FC<InputBoxProps> = ({
+	textareaRef,
+	initialMessage,
+	setInitialMessage,
+	handleRequest,
+	isDisabled,
+}) => {
+	const [makeAPlan, setMakeAPlan] = useState(false);
+
+	const handleTextareaChange = useCallback(
+		(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+			setInitialMessage(e.target.value)
+
+			const textarea = e.target
+			textarea.style.height = "36px"
+			const scrollHeight = textarea.scrollHeight
+			textarea.style.height = Math.min(scrollHeight, 100) + "px"
+		},
+		[setInitialMessage],
+	)
+
+	const handleTextareaKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+			if (e.key === "Enter" && !e.shiftKey && initialMessage.trim()) {
+				e.preventDefault()
+				handleRequest()
+			}
+		},
+		[handleRequest, initialMessage],
+	)
+
+	return (
+		<div className="flex items-center rounded-md bg-white flex-col">
+			<div className="flex-1 w-full p-2">
+				<textarea
+					ref={textareaRef}
+					value={initialMessage}
+					onChange={handleTextareaChange}
+					onKeyDown={handleTextareaKeyDown}
+					placeholder="What would you like to do?"
+					className="w-full appearance-none bg-transparent text-gray-700 outline-none focus:outline-none resize-none overflow-y-auto rounded-lg max-h-24 leading-normal py-2 px-2 flex items-center border-none"
+					autoFocus={true}
+					tabIndex={1}
+					rows={1}
+					disabled={isDisabled}
+				/>
+			</div>
+			<div className="flex justify-between space-x-2 p-2 w-full">
+				<div className="flex flex-1 gap-2">
+					<Button
+						variant="secondary"
+						size="sm"
+						toggled={makeAPlan}
+						onToggle={(newToggled) => setMakeAPlan(newToggled)}
+					>
+						<FileText />
+						Make a plan
+					</Button>
+					<Button variant="secondary" size="sm">
+						<Pencil className="size-4" />
+						~/pearai/yeet
+					</Button>
+				</div>
+				<Button onClick={handleRequest} disabled={!initialMessage.trim() || isDisabled} tabIndex={3}>
+					<ArrowTurnDownLeftIcon className="size-4" />
+					Start
+				</Button>
+			</div>
+			{/* <div className="bg-black/10 w-full h-px" />
+			<div>
+				TODO: decide where the path should go
+			</div> */}
+		</div>
+	)
+}
diff --git a/webview-ui/src/creatorOverlay/planEditor.tsx b/webview-ui/src/creatorOverlay/planEditor.tsx
new file mode 100644
index 00000000000..d2b85be6a30
--- /dev/null
+++ b/webview-ui/src/creatorOverlay/planEditor.tsx
@@ -0,0 +1,81 @@
+import { Wand2 } from "lucide-react"
+import React, { useCallback, useEffect, useRef } from "react"
+import { PlanningBar } from "./ui/planningBar"
+
+interface PlanEditorProps {
+	newProjectPlan: string
+	setNewProjectPlan: (value: string) => void
+	isStreaming: boolean
+	planCreationDone: boolean
+	handleMakeIt: () => void
+}
+
+export const PlanEditor: React.FC<PlanEditorProps> = ({
+	newProjectPlan,
+	setNewProjectPlan,
+	isStreaming,
+	planCreationDone,
+	handleMakeIt,
+}) => {
+	const planTextareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+	const handlePlanTextareaChange = useCallback(
+		(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+			setNewProjectPlan(e.target.value)
+
+			const textarea = e.target
+			textarea.style.height = "100px"
+			const scrollHeight = textarea.scrollHeight
+			textarea.style.height = Math.min(scrollHeight, 300) + "px"
+		},
+		[setNewProjectPlan],
+	)
+
+	// Auto-resize the plan textarea when content changes
+	useEffect(() => {
+		if (planTextareaRef.current && newProjectPlan) {
+			const textarea = planTextareaRef.current
+			textarea.style.height = "100px"
+			const scrollHeight = textarea.scrollHeight
+			textarea.style.height = Math.min(scrollHeight, 300) + "px"
+		}
+	}, [newProjectPlan])
+
+	// Focus the textarea when plan creation is complete
+	useEffect(() => {
+		if (planCreationDone && !isStreaming && planTextareaRef.current) {
+			setTimeout(() => {
+				planTextareaRef.current?.focus()
+			}, 100)
+		}
+	}, [planCreationDone, isStreaming])
+
+	return (
+		<div className="rounded-lg bg-white p-4">
+			<PlanningBar />
+			<textarea
+				ref={planTextareaRef}
+				value={newProjectPlan}
+				onChange={handlePlanTextareaChange}
+				placeholder="Project plan is generating..."
+				className="w-full appearance-none bg-transparent text-gray-700 outline-none focus:outline-none resize-none overflow-y-auto rounded-lg min-h-24 leading-normal py-2 px-2 flex items-center border border-gray-200"
+				disabled={isStreaming}
+				tabIndex={4}
+				rows={5}
+			/>
+
+			{planCreationDone && (
+				<div className="mt-4 flex justify-end">
+					<button
+						onClick={handleMakeIt}
+						disabled={!newProjectPlan.trim()}
+						className="flex cursor-pointer gap-2 rounded-md bg-indigo-600 px-6 py-2 text-sm font-medium text-white transition-colours duration-200 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+						tabIndex={5}>
+						<Wand2 className="h-4 w-4" />
+						<div className="flex-1">Make it</div>
+					</button>
+				</div>
+			)}
+		</div>
+	)
+}
diff --git a/webview-ui/src/creatorOverlay/rgbBackground.tsx b/webview-ui/src/creatorOverlay/rgbBackground.tsx
new file mode 100644
index 00000000000..07c2c4cc153
--- /dev/null
+++ b/webview-ui/src/creatorOverlay/rgbBackground.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils"
+import React, { FC, ReactNode } from "react"
+
+/**
+ * A simple RGB gradient background wrapper
+ */
+export const RGBWrapper: FC<{ children: ReactNode; className?: string }> = ({ children, className }) => {
+	return (
+		<div className={cn(className, "relative")}>
+			{/* RGB Gradient Background */}
+			<div className="absolute -top-10 -right-10 -bottom-10 -left-10 -z-10 grid grid-cols-2 overflow-hidden rounded-3xl blur-xl opacity-50">
+				<div className="bg-gradient-to-br from-pink-500 to-blue-600"></div>
+				<div className="bg-gradient-to-tr from-blue-600 to-cyan-400"></div>
+			</div>
+
+			{/* Content - removed shadow-lg and p-2 */}
+			{children}
+		</div>
+	)
+}
diff --git a/webview-ui/src/creatorOverlay/ui/button/index.tsx b/webview-ui/src/creatorOverlay/ui/button/index.tsx
new file mode 100644
index 00000000000..7be14df69b0
--- /dev/null
+++ b/webview-ui/src/creatorOverlay/ui/button/index.tsx
@@ -0,0 +1,121 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#a1a1aa] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-[#18181b] text-[#fafafa] shadow hover:bg-[#27272a]",
+        destructive: "bg-[#ef4444] text-[#fafafa] shadow-sm hover:bg-[#dc2626]",
+        outline: "border border-[#e4e4e7] bg-[#ffffff] shadow-sm hover:bg-[#f4f4f5] hover:text-[#18181b]",
+        secondary: "bg-[#f4f4f5] text-[#18181b] hover:bg-[#e4e4e7]",
+        ghost: "hover:bg-[#f4f4f5] hover:text-[#18181b]",
+        link: "text-[#18181b] underline-offset-4 hover:underline",
+      },
+      size: {
+        // default: "h-9 px-4 py-2",
+        default: "h-7 rounded-md px-2 text-md",
+        sm: "h-6 rounded-md px-2 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+      toggled: {
+        true: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        toggled: true,
+        className: " bg-[#3030ad] text-[#0B84FF] hover:bg-[#3a3ad2]"// bg-[#27272a] text-[#fafafa]
+      },
+      {
+        variant: "destructive",
+        toggled: true,
+        className: "bg-[#dc2626] text-[#fafafa]"
+      },
+      {
+        variant: "outline",
+        toggled: true,
+        className: "bg-[#f4f4f5] text-[#18181b] border-[#a1a1aa]"
+      },
+      {
+        variant: "secondary",
+        toggled: true,
+        // className: "bg-[#e4e4e7] text-[#18181b]"
+        className: "bg-[#E3EFFF] text-[#4388F8] hover:bg-[#D1E3FF]",
+      },
+      {
+        variant: "ghost",
+        toggled: true,
+        className: "bg-[#f4f4f5] text-[#18181b]"
+      },
+      {
+        variant: "link",
+        toggled: true,
+        className: "text-[#18181b] underline"
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      toggled: false,
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  onToggle?: (toggled: boolean) => void
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ 
+    className, 
+    variant, 
+    size, 
+    toggled: initialToggled = false,
+    asChild = false, 
+    onToggle,
+    onClick,
+    ...props 
+  }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    const [toggled, setToggled] = React.useState(initialToggled)
+    
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (onToggle) {
+        const newToggled = !toggled
+        setToggled(newToggled)
+        onToggle(newToggled)
+      }
+      
+      onClick?.(event)
+    }
+    
+    return (
+      <Comp
+        className={cn(
+          buttonVariants({ 
+            variant,
+            size,
+            toggled: onToggle ? toggled : initialToggled,
+            className 
+          })
+        )}
+        ref={ref}
+        onClick={onToggle ? handleClick : onClick}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
\ No newline at end of file
diff --git a/webview-ui/src/creatorOverlay/ui/index.css b/webview-ui/src/creatorOverlay/ui/index.css
new file mode 100644
index 00000000000..ec8cba45805
--- /dev/null
+++ b/webview-ui/src/creatorOverlay/ui/index.css
@@ -0,0 +1,112 @@
+/* Defining these in CSS instead of tailwind config to limit potential for upstream conflicts */
+
+/* Base circle styling */
+.circle {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 10px;
+    height: 10px;
+}
+
+/* Static green dot */
+.circle::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: #75daad;
+    border-radius: 50px;
+}
+
+/* Animation-specific styles */
+.animated-circle::before {
+    content: "";
+    position: relative;
+    display: block;
+    width: 250%;
+    height: 250%;
+    box-sizing: border-box;
+    margin-left: -75%;
+    margin-top: -75%;
+    border-radius: 45px;
+    background-color: #75daad;
+    animation: pulse 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+}
+
+.animated-circle::after {
+    animation: circle 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0.33);
+    }
+
+    80%,
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes circle {
+    0% {
+        transform: scale(0.8);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.8);
+    }
+}
+
+.rainbow-minimal-glow {
+    position: relative;
+    background: linear-gradient(to right,
+            rgba(255, 128, 128, 0.8) 0%,
+            rgba(255, 192, 128, 0.8) 14%,
+            rgba(255, 255, 128, 0.8) 28%,
+            rgba(128, 255, 128, 0.8) 42%,
+            rgba(128, 255, 255, 0.8) 56%,
+            rgba(128, 128, 255, 0.8) 70%,
+            rgba(192, 128, 255, 0.8) 84%,
+            rgba(255, 128, 192, 0.8) 100%);
+    background-size: 200% auto;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: rainbow-flow 2s linear infinite;
+    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
+}
+
+@keyframes rainbow-flow {
+    0% {
+      background-position: 0% center;
+    }
+    100% {
+      background-position: 200% center;
+    }
+  }
+
+.rainbow-minimal-glow::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: rgba(255, 255, 255, 0.15);
+    z-index: -1;
+}
+
+.rainbow-minimal-glow::after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: transparent;
+    z-index: -2;
+}
\ No newline at end of file
diff --git a/webview-ui/src/creatorOverlay/ui/planningBar.tsx b/webview-ui/src/creatorOverlay/ui/planningBar.tsx
new file mode 100644
index 00000000000..a8ad51b9c63
--- /dev/null
+++ b/webview-ui/src/creatorOverlay/ui/planningBar.tsx
@@ -0,0 +1,44 @@
+import { CodeBracketIcon, PlayIcon, DocumentTextIcon as OutlineDocumentTextIcon } from "@heroicons/react/24/outline";
+import { Button } from "./button";
+import { DocumentTextIcon as SolidDocumentTextIcon } from "@heroicons/react/24/solid";
+import { FC } from "react";
+
+export type PlanningBarProps = {
+    isGenerating?: boolean;
+}
+
+export const PlanningBar: FC<PlanningBarProps> = ({ isGenerating }) => {
+
+    return (
+        <div className="bg-[#161718] w-full rounded-full flex text-white justify-between min-w-64 h-10 gap-4">
+            <div className="flex-1 flex h-full align-middle ml-5 gap-4">
+                <div className="relative h-full my-auto mr-1">
+                    <div className={`circle ${isGenerating ? "animated-circle" : ""}`} />
+                </div>
+                <div className="my-auto text-sm">Planning</div>
+                <div className="relative my-auto">
+                    <div className={`text-muted-foreground text-sm max-w-64 text-ellipsis truncate ${isGenerating ? "rainbow-minimal-glow" : ""}`}>Make me a facebook clone dsadsadasadsda</div>
+                </div>
+            </div>
+
+            <div className="flex justify-center align-middle mr-2 gap-4">
+                <div className="my-auto">
+                    <Button variant="default" toggled>
+                        <SolidDocumentTextIcon />
+                    </Button>
+                    <Button>
+                        <CodeBracketIcon />
+                    </Button>
+                    <Button>
+                        <PlayIcon />
+                    </Button>
+                </div>
+                <Button size="default" variant="secondary" className="my-auto rounded-lg text-[0.9em]">
+                    Next
+                </Button>
+                {/* <ArrowTurnDownLeftIcon className="size-4" /> */}
+
+            </div>
+        </div>
+    )
+};
\ No newline at end of file
diff --git a/webview-ui/src/index.tsx b/webview-ui/src/index.tsx
index 030a291e977..10076ad212d 100644
--- a/webview-ui/src/index.tsx
+++ b/webview-ui/src/index.tsx
@@ -2,8 +2,8 @@ import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 
 import "./index.css"
-import App from "./App"
 import "../../node_modules/@vscode/codicons/dist/codicon.css"
+import App from "./App"
 
 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
diff --git a/webview-ui/src/stories/creator/Button.stories.tsx b/webview-ui/src/stories/creator/Button.stories.tsx
new file mode 100644
index 00000000000..6ebbb6a5056
--- /dev/null
+++ b/webview-ui/src/stories/creator/Button.stories.tsx
@@ -0,0 +1,206 @@
+import { Button } from "../../creatorOverlay/ui/button"
+import * as React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Mail, Loader2, FileText } from "lucide-react"
+
+const meta: Meta<typeof Button> = {
+	title: "Components/Button",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["default", "destructive", "outline", "secondary", "ghost", "link", "plan"],
+		},
+		size: {
+			control: "select",
+			options: ["default", "sm", "lg", "icon"],
+		},
+		toggled: {
+			control: "boolean",
+		},
+		asChild: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = {
+	args: {
+		children: "Button",
+		variant: "default",
+		size: "default",
+	},
+}
+
+export const Destructive: Story = {
+	args: {
+		children: "Destructive",
+		variant: "destructive",
+	},
+}
+
+export const Outline: Story = {
+	args: {
+		children: "Outline",
+		variant: "outline",
+	},
+}
+
+export const Secondary: Story = {
+	args: {
+		children: "Secondary",
+		variant: "secondary",
+	},
+}
+
+export const Ghost: Story = {
+	args: {
+		children: "Ghost",
+		variant: "ghost",
+	},
+}
+
+export const Link: Story = {
+	args: {
+		children: "Link",
+		variant: "link",
+	},
+}
+
+export const Small: Story = {
+	args: {
+		children: "Small",
+		size: "sm",
+	},
+}
+
+export const Large: Story = {
+	args: {
+		children: "Large",
+		size: "lg",
+	},
+}
+
+export const Icon: Story = {
+	args: {
+		children: <Mail />,
+		size: "icon",
+		"aria-label": "Email",
+	},
+}
+
+export const WithIcon: Story = {
+	args: {
+		children: (
+			<>
+				<Mail />
+				Login with Email
+			</>
+		),
+	},
+}
+
+export const Loading: Story = {
+	args: {
+		children: (
+			<>
+				<Loader2 className="animate-spin" />
+				Please wait
+			</>
+		),
+		disabled: true,
+	},
+}
+
+export const AsChild: Story = {
+	args: {
+		asChild: true,
+		children: <a href="https://example.com">Link as Button</a>,
+	},
+}
+
+export const Disabled: Story = {
+	args: {
+		children: "Disabled",
+		disabled: true,
+	},
+}
+
+export const MakePlan: Story = {
+	args: {
+		children: (
+			<>
+				<FileText className="text-[#4388F8]" />
+				Make a plan
+			</>
+		),
+		variant: "secondary",
+		size: "sm",
+		className: "rounded-full",
+	},
+}
+
+export const ToggledButton: Story = {
+	args: {
+		children: "Toggled Button",
+		toggled: true,
+	},
+}
+
+export const ToggledMakePlan: Story = {
+	args: {
+		children: (
+			<>
+				<FileText className="text-[#4388F8]" />
+				Make a plan
+			</>
+		),
+		variant: "secondary",
+		size: "sm",
+		className: "rounded-full",
+		toggled: true,
+	},
+}
+
+// Create a proper React component for the toggleable button
+const ToggleableButtonExample = () => {
+	const [toggled, setToggled] = React.useState(false)
+	return (
+		<Button onToggle={(newToggled) => setToggled(newToggled)} toggled={toggled}>
+			Toggle me: {toggled ? "On" : "Off"}
+		</Button>
+	)
+}
+
+// Example with the onToggle functionality
+export const ToggleableButton: Story = {
+	render: () => <ToggleableButtonExample />,
+}
+
+export const MakePlanButton = () => {
+	const [toggled, setToggled] = React.useState(false)
+
+	return (
+		<Button
+			variant="secondary"
+			size="sm"
+			className="rounded-full"
+			toggled={toggled}
+			onToggle={(newToggled) => setToggled(newToggled)}>
+			<FileText className="text-[#4388F8]" />
+			Make a plan
+		</Button>
+	)
+}
+
+// Standalone story for the MakePlanButton component
+export const MakePlanComponent: StoryObj<typeof MakePlanButton> = {
+	render: () => <MakePlanButton />,
+}
diff --git a/webview-ui/src/stories/creator/CreatorInputBox.stories.tsx b/webview-ui/src/stories/creator/CreatorInputBox.stories.tsx
new file mode 100644
index 00000000000..591c9837a40
--- /dev/null
+++ b/webview-ui/src/stories/creator/CreatorInputBox.stories.tsx
@@ -0,0 +1,150 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { InputBox } from "../../creatorOverlay/inputBox"
+import { useRef, useState } from "react"
+import { action } from "@storybook/addon-actions"
+
+const meta: Meta<typeof InputBox> = {
+	title: "Components/InputBox",
+	component: InputBox,
+	parameters: {
+		layout: "centered",
+		backgrounds: {
+			default: "light",
+		},
+	},
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div className="w-[800px] border border-gray-200 rounded-lg shadow-md">
+				<Story />
+			</div>
+		),
+	],
+}
+
+export default meta
+type Story = StoryObj<typeof InputBox>
+
+// Wrapper component to handle state
+const InputBoxWithState = ({ initialText = "", isDisabled = false }) => {
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+	const [message, setMessage] = useState(initialText)
+
+	const handleRequest = () => {
+		action("handleRequest")(message)
+		if (!isDisabled) {
+			setMessage("")
+		}
+	}
+
+	return (
+		<InputBox
+			textareaRef={textareaRef}
+			initialMessage={message}
+			setInitialMessage={setMessage}
+			handleRequest={handleRequest}
+			isDisabled={isDisabled}
+		/>
+	)
+}
+
+export const Default: Story = {
+	render: () => <InputBoxWithState />,
+}
+
+export const WithInitialText: Story = {
+	render: () => <InputBoxWithState initialText="Build a website with React and Tailwind" />,
+}
+
+export const Disabled: Story = {
+	render: () => <InputBoxWithState isDisabled={true} />,
+}
+
+export const LongText: Story = {
+	render: () => (
+		<InputBoxWithState initialText="This is an example of a longer message that demonstrates how the textarea expands to accommodate more content. The textarea should resize up to a certain point before enabling scrolling." />
+	),
+}
+
+// Create a proper React component for the interactive story
+const InteractiveExample = () => {
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+	const [message, setMessage] = useState("")
+	const [responses, setResponses] = useState<string[]>([])
+
+	const handleRequest = () => {
+		if (message.trim()) {
+			setResponses([...responses, message])
+			setMessage("")
+
+			// Focus the textarea after submitting
+			setTimeout(() => {
+				if (textareaRef.current) {
+					textareaRef.current.focus()
+				}
+			}, 0)
+		}
+	}
+
+	return (
+		<div className="flex flex-col">
+			{responses.length > 0 && (
+				<div className="p-4 bg-gray-50 max-h-[300px] overflow-y-auto">
+					{responses.map((response, index) => (
+						<div key={index} className="mb-2 p-2 bg-white rounded border border-gray-200">
+							{response}
+						</div>
+					))}
+				</div>
+			)}
+			<InputBox
+				textareaRef={textareaRef}
+				initialMessage={message}
+				setInitialMessage={setMessage}
+				handleRequest={handleRequest}
+				isDisabled={false}
+			/>
+		</div>
+	)
+}
+
+export const Interactive: Story = {
+	render: () => <InteractiveExample />,
+}
+
+// Create a proper React component for the button variations story
+const ButtonVariationsExample = () => {
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+	const [message, setMessage] = useState("")
+	const [planToggled, setPlanToggled] = useState(false)
+
+	const handleRequest = () => {
+		action("handleRequest")(message)
+		setMessage("")
+	}
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="p-4 bg-gray-50">
+				<h3 className="font-medium mb-2">Make a Plan Button Toggle State: {planToggled ? "On" : "Off"}</h3>
+				<button className="bg-gray-200 px-3 py-1 rounded text-sm" onClick={() => setPlanToggled(!planToggled)}>
+					Toggle Plan Button State
+				</button>
+			</div>
+
+			<InputBox
+				textareaRef={textareaRef}
+				initialMessage={message}
+				setInitialMessage={setMessage}
+				handleRequest={handleRequest}
+				isDisabled={false}
+			/>
+		</div>
+	)
+}
+
+// Showcase different button combinations
+export const ButtonVariations: Story = {
+	render: () => <ButtonVariationsExample />,
+}
diff --git a/webview-ui/src/stories/creator/PlanningBar.stories.tsx b/webview-ui/src/stories/creator/PlanningBar.stories.tsx
new file mode 100644
index 00000000000..7f4f6d86071
--- /dev/null
+++ b/webview-ui/src/stories/creator/PlanningBar.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlanningBar } from '../../creatorOverlay/ui/planningBar';
+
+const meta: Meta<typeof PlanningBar> = {
+  title: 'Components/PlanningBar',
+  component: PlanningBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="p-4 border border-gray-200 rounded-lg">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof PlanningBar>;
+
+// Basic story
+export const Default: Story = {
+  render: () => <PlanningBar />
+};
+
+// You can later add more stories as your component evolves
+export const isGenerating: Story = {
+  render: () => <PlanningBar isGenerating/* Add props here as you develop them */ />
+};
\ No newline at end of file
diff --git a/webview-ui/src/vite-env.d.ts b/webview-ui/src/vite-env.d.ts
index 11f02fe2a00..4f06fa52753 100644
--- a/webview-ui/src/vite-env.d.ts
+++ b/webview-ui/src/vite-env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+declare global {
+	interface Window {
+		viewType?: "pearai.roo.agentChat" | "pearai.roo.creatorOverlayView"
+	}
+}
+
+export {}