Add AI input prompt to Roopik welcome page

HumbleBee14 · HumbleBee14 · commit 80eb9091d574 · 2026-01-04T07:57:07.000-05:00
Introduces a modern AI input section on the Roopik welcome page, allowing users to submit prompts directly to the AI agent. Updates include new UI/UX for the input, auto-opening the agent sidebar, and improved focus/unfocus controls for canvas cards. Also refines tool descriptions and adds a custom tab icon for the canvas panel.
diff --git a/extensions/roopik-roo/src/core/prompts/tools/native-tools/roopik.ts b/extensions/roopik-roo/src/core/prompts/tools/native-tools/roopik.ts
@@ -314,7 +314,7 @@ export const project_start: OpenAI.Chat.ChatCompletionTool = {
 			properties: {
 				projectPath: {
 					type: "string",
-					description: "Path to the project directory (absolute or relative to workspace)",
+					description: "Path to the project directory (Use absolute path to workspace)",
 				},
 				port: {
 					type: "number",
@@ -439,7 +439,7 @@ export const component_add: OpenAI.Chat.ChatCompletionTool = {
 				},
 				name: {
 					type: "string",
-					description: "Display name for the component. Inferred from folder if not specified.",
+					description: "Display name for the component. Always try to pass logical short name (one word or max 2-3 words) for the component.",
 				},
 				entryFile: {
 					type: "string",
diff --git a/extensions/roopik-roo/src/core/prompts/tools/roopik/roopik-tools.ts b/extensions/roopik-roo/src/core/prompts/tools/roopik/roopik-tools.ts
@@ -230,7 +230,7 @@ export function getProjectStartDescription(args: ToolArgs): string {
 	return `## project_start
 Description: [Roopik IDE - Projects Only] Start a FULL APPLICATION's dev server and preview in the integrated Browser (NOT used for Canvas components). Use for complete runnable vite based projects with routing/navigation (e.g., todo app with multiple pages). The browser shows the running app at localhost. For ISOLATED UI components/screens, use component_add instead.
 Parameters:
-- projectPath: (required) Path to the project directory (absolute or relative to ${args.cwd})
+- projectPath: (required) Path to the project directory (Use absolute path to workspace)
 - port: (optional) Port to run the dev server on. Default is auto-detected or 5173.
 Usage:
 <project_start>
@@ -297,7 +297,7 @@ Description: [Roopik IDE - Canvas Only] Add an ISOLATED UI component to the Canv
 Parameters:
 - folderPath: (required) The absolute system path to the component folder. Do not use relative paths.(contains the component files)
 - canvasId: (optional) Canvas to add the component to. Uses active canvas if not specified.
-- name: (optional) Display name for the component. Inferred from folder if not specified.
+- name: (optional) Display name for the component.  Always try to pass logical short name (one word or max 2-3 words) for the component.
 - entryFile: (optional) Entry file name (e.g., index.tsx). Auto-detected in IDE if not specified.
 - framework: (optional) Force framework: react, vue, svelte, vanilla. Auto-detected in IDE if not specified.
 Usage:
@@ -439,7 +439,7 @@ These tools integrate with Roopik IDE's browser preview, canvas, and component f
 
 **Component Canvas Workflow:**
 1. \`canvas_create\` or \`canvas_get_active\` - Get/create canvas (first try to get active canvas, if not found create a new one, use your judgment to determine better canvas short generic name)
-2. \`component_add\` - Add component folder to canvas (Once you write a component code, you have to pass the absolute path of the component file to the canvas add tool which shows the live preview of the component in the canvas UI)
+2. \`component_add\` - Add component folder to canvas (Once you write a component code, you have to pass the absolute path of the component file to the canvas add tool which shows the live preview of the component in the canvas UI).
 3. \`component_list\` - See all components on canvas (this will show the list of all components added to the canvas to you if you need to see the list of components added to the canvas or get info about a specific component use \`component_get_info\`)
 4. \`component_rebuild\` - Force rebuild after changes (use this tool if you make changes to the component code and want to rebuild the component)
 5. \`component_remove\` - Remove component (set deleteSourceCode=true to delete files automatically - never use terminal commands to delete files)
diff --git a/extensions/roopik/src/canvasPanel.ts b/extensions/roopik/src/canvasPanel.ts
@@ -189,6 +189,10 @@ export class CanvasPanel implements vscode.Disposable {
 			}
 		);
 
+		// Set custom icon for the tab using VS Code Codicon
+		// Options: palette, paintbrush, layout, window, pencil, beaker
+		panel.iconPath = new vscode.ThemeIcon('pencil');
+
 		return new CanvasPanel(panel, extensionUri, canvasId, canvasName, workspaceRoot, manager);
 	}
 
@@ -492,7 +496,7 @@ export class CanvasPanel implements vscode.Disposable {
 					});
 					break;
 
-				case 'debugLog':
+				case 'debugLog': {
 					// Handle debug logs from webview for tracing
 					const debugPayload = message.payload as { level?: string; message: string };
 					const logLevel = debugPayload?.level || 'info';
@@ -505,8 +509,7 @@ export class CanvasPanel implements vscode.Disposable {
 						this.logger.info(`[WebviewTrace] ${logMsg}`);
 					}
 					break;
-
-				default:
+				}
 					this.logger.warn(`Unknown webview message type: ${message.type}`);
 			}
 		} catch (error) {
diff --git a/extensions/roopik/webview/src/canvasView/components/SandboxCard/SandboxCard.tsx b/extensions/roopik/webview/src/canvasView/components/SandboxCard/SandboxCard.tsx
@@ -898,6 +898,22 @@ export function SandboxCard({
 			</div>
 		</div>
 
+		{/* Focus button - only show when NOT focused and on hover */}
+		{!isFocused && isHovered && (
+			<button
+				className="focus-button"
+				onClick={(e) => {
+					e.stopPropagation();
+					onDoubleClick();
+				}}
+				title="Enter focus mode"
+			>
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+					<path d="M8 3h8M3 8v8M21 8v8M8 21h8M3 8l3 3M21 8l-3 3M3 16l3-3M21 16l-3-3" />
+				</svg>
+			</button>
+		)}
+
 		{/* Unfocus button - only show when focused */}
 		{isFocused && (
 			<button
diff --git a/extensions/roopik/webview/src/canvasView/styles/sandboxCard.css b/extensions/roopik/webview/src/canvasView/styles/sandboxCard.css
@@ -304,6 +304,7 @@
 /* ============================================================
    Unfocus Button (only visible when focused)
    ============================================================ */
+.sandbox-card .focus-button,
 .sandbox-card .unfocus-button {
 	position: absolute;
 	bottom: 20px;
@@ -324,13 +325,21 @@
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
+.sandbox-card .focus-button:hover {
+	background: rgba(40, 40, 45, 0.95);
+	color: rgba(102, 204, 204, 0.9);
+	transform: scale(1.1);
+	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
 .sandbox-card .unfocus-button:hover {
 	background: rgba(40, 40, 45, 0.95);
 	color: rgba(255, 165, 0, 0.9);
 	transform: scale(1.1);
 	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
 }
 
+.sandbox-card .focus-button svg,
 .sandbox-card .unfocus-button svg {
 	flex-shrink: 0;
 }
diff --git a/src/vs/workbench/contrib/roopik/browser/media/welcomeEditor.css b/src/vs/workbench/contrib/roopik/browser/media/welcomeEditor.css
@@ -187,6 +187,174 @@
 	border-color: var(--vscode-button-hoverBackground);
 }
 
+.hero-button.primary:hover {
+	background-color: var(--vscode-button-hoverBackground);
+	border-color: var(--vscode-button-hoverBackground);
+}
+
+/* ============================================================================
+	AI Input Section - Clean Modern Design
+	============================================================================ */
+
+.ai-input-section {
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	margin: 20px 0 36px 0;
+	padding: 0 32px;
+	box-sizing: border-box;
+}
+
+/* Wrapper creates the gradient border effect - always glowing */
+.ai-input-wrapper {
+	position: relative;
+	width: 100%;
+	max-width: 600px;
+	border-radius: 999px;
+	padding: 2px;
+	background: linear-gradient(135deg,
+			#667eea 0%,
+			#764ba2 25%,
+			#f093fb 50%,
+			#4facfe 75%,
+			#667eea 100%);
+	background-size: 300% 300%;
+	animation: gradient-shift 4s ease infinite;
+	box-shadow: 0 0 20px rgba(102, 126, 234, 0.3),
+		0 0 40px rgba(118, 75, 162, 0.15);
+	transition: all 0.3s ease;
+}
+
+.ai-input-wrapper:focus-within {
+	box-shadow: 0 0 25px rgba(102, 126, 234, 0.5),
+		0 0 50px rgba(118, 75, 162, 0.25);
+}
+
+@keyframes gradient-shift {
+
+	0%,
+	100% {
+		background-position: 0% 50%;
+	}
+
+	50% {
+		background-position: 100% 50%;
+	}
+}
+
+/* Main input container - pill shape */
+.ai-input-box {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	padding: 14px 20px;
+	border-radius: 999px;
+	background: var(--vscode-input-background);
+	box-sizing: border-box;
+}
+
+/* Input field - fills all available space */
+.ai-input-field {
+	flex: 1;
+	background: transparent;
+	border: none;
+	outline: none !important;
+	box-shadow: none !important;
+	color: var(--vscode-input-foreground);
+	font-size: 15px;
+	font-weight: 400;
+	padding: 0;
+	line-height: 1.5;
+	min-width: 0;
+}
+
+.ai-input-field::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+	opacity: 0.7;
+}
+
+.ai-input-field:focus {
+	outline: none !important;
+	box-shadow: none !important;
+	border: none !important;
+}
+
+/* Submit button - circular */
+.ai-submit-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background: var(--vscode-button-background);
+	color: var(--vscode-button-foreground);
+	border: none;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	flex-shrink: 0;
+}
+
+.ai-submit-button:hover {
+	background: var(--vscode-button-hoverBackground);
+	transform: scale(1.05);
+}
+
+.ai-submit-button:active {
+	transform: scale(0.95);
+}
+
+.ai-submit-button .codicon {
+	font-size: 16px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.ai-input-section {
+		padding: 0 16px;
+	}
+
+	.ai-input-wrapper {
+		max-width: 100%;
+	}
+
+	.ai-input-box {
+		padding: 12px 16px;
+	}
+
+	.ai-input-field {
+		font-size: 14px;
+	}
+}
+
+.hero-showcase {
+	position: relative;
+	padding: 28px;
+	border-radius: 10px;
+	background: radial-gradient(circle at top, rgba(110, 142, 251, 0.35), transparent 70%), var(--vscode-editor-background);
+	border: 1px dashed var(--vscode-widget-border);
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	min-height: 220px;
+	min-width: 240px;
+	overflow: hidden;
+	box-sizing: border-box;
+}
+
+.hero-showcase::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.03) 75%, transparent 75%, transparent);
+	background-size: 28px 28px;
+	pointer-events: none;
+}
+
+.showcase-label {}
+
+
 .hero-showcase {
 	position: relative;
 	padding: 28px;
@@ -667,8 +835,8 @@ Inline Settings View (replaces modal)
 }
 
 /* ============================================
-   Settings Sections
-   ============================================ */
+	Settings Sections
+	============================================ */
 
 .settings-section {
 	margin-bottom: 28px;
@@ -766,8 +934,8 @@ Toggle Switch
 }
 
 /* ============================================
-   Text Input
-   ============================================ */
+	Text Input
+	============================================ */
 
 .settings-text-input {
 	width: 200px;
diff --git a/src/vs/workbench/contrib/roopik/browser/welcomeEditor.ts b/src/vs/workbench/contrib/roopik/browser/welcomeEditor.ts
