🤖 feat: AI-generated workspace creation on first message (#500)

Changes the "New Workspace" modal to instead be inline in the chat form.



https://github.com/user-attachments/assets/a8c36701-5507-4c53-b9c9-4afbda43cbe8

Author: kylecarbs

src/App.tsx

@@ -14,10 +14,13 @@ import { useResumeManager } from "./hooks/useResumeManager";
 import { useUnreadTracking } from "./hooks/useUnreadTracking";
 import { useAutoCompactContinue } from "./hooks/useAutoCompactContinue";
 import { useWorkspaceStoreRaw, useWorkspaceRecency } from "./stores/WorkspaceStore";
+import { FirstMessageInput } from "./components/FirstMessageInput";
 
 import { useStableReference, compareMaps } from "./hooks/useStableReference";
 import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandRegistryContext";
 import type { CommandAction } from "./contexts/CommandRegistryContext";
+import { ModeProvider } from "./contexts/ModeContext";
+import { ThinkingProvider } from "./contexts/ThinkingContext";
 import { CommandPalette } from "./components/CommandPalette";
 import { buildCoreSources, type BuildSourcesParams } from "./utils/commands/sources";
 
@@ -57,6 +60,9 @@ function AppInner() {
   const [workspaceModalLoadError, setWorkspaceModalLoadError] = useState<string | null>(null);
   const workspaceModalProjectRef = useRef<string | null>(null);
 
+  // Track when we're in "new workspace creation" mode (show FirstMessageInput)
+  const [pendingNewWorkspaceProject, setPendingNewWorkspaceProject] = useState<string | null>(null);
+
   // Auto-collapse sidebar on mobile by default
   const isMobile = typeof window !== "undefined" && window.innerWidth <= 768;
   const [sidebarCollapsed, setSidebarCollapsed] = usePersistedState("sidebarCollapsed", isMobile);
@@ -114,9 +120,10 @@ function AppInner() {
         window.history.replaceState(null, "", newHash);
       }
 
-      // Update window title with workspace name
+      // Update window title with workspace name (prefer displayName if available)
+      const metadata = workspaceMetadata.get(selectedWorkspace.workspaceId);
       const workspaceName =
-        workspaceMetadata.get(selectedWorkspace.workspaceId)?.name ?? selectedWorkspace.workspaceId;
+        metadata?.displayName ?? metadata?.name ?? selectedWorkspace.workspaceId;
       const title = `${workspaceName} - ${selectedWorkspace.projectName} - cmux`;
       void window.api.window.setTitle(title);
     } else {
@@ -169,46 +176,15 @@ function AppInner() {
     [removeProject, selectedWorkspace, setSelectedWorkspace]
   );
 
-  const handleAddWorkspace = useCallback(async (projectPath: string) => {
-    const projectName = projectPath.split("/").pop() ?? projectPath.split("\\").pop() ?? "project";
-
-    workspaceModalProjectRef.current = projectPath;
-    setWorkspaceModalProject(projectPath);
-    setWorkspaceModalProjectName(projectName);
-    setWorkspaceModalBranches([]);
-    setWorkspaceModalDefaultTrunk(undefined);
-    setWorkspaceModalLoadError(null);
-    setWorkspaceModalOpen(true);
-
-    try {
-      const branchResult = await window.api.projects.listBranches(projectPath);
-
-      // Guard against race condition: only update state if this is still the active project
-      if (workspaceModalProjectRef.current !== projectPath) {
-        return;
-      }
-
-      const sanitizedBranches = Array.isArray(branchResult?.branches)
-        ? branchResult.branches.filter((branch): branch is string => typeof branch === "string")
-        : [];
-
-      const recommended =
-        typeof branchResult?.recommendedTrunk === "string" &&
-        sanitizedBranches.includes(branchResult.recommendedTrunk)
-          ? branchResult.recommendedTrunk
-          : sanitizedBranches[0];
-
-      setWorkspaceModalBranches(sanitizedBranches);
-      setWorkspaceModalDefaultTrunk(recommended);
-      setWorkspaceModalLoadError(null);
-    } catch (err) {
-      console.error("Failed to load branches for modal:", err);
-      const message = err instanceof Error ? err.message : "Unknown error";
-      setWorkspaceModalLoadError(
-        `Unable to load branches automatically: ${message}. You can still enter the trunk branch manually.`
-      );
-    }
-  }, []);
+  const handleAddWorkspace = useCallback(
+    (projectPath: string) => {
+      // Show FirstMessageInput for this project
+      setPendingNewWorkspaceProject(projectPath);
+      // Clear any selected workspace so FirstMessageInput is shown
+      setSelectedWorkspace(null);
+    },
+    [setSelectedWorkspace]
+  );
 
   // Memoize callbacks to prevent LeftSidebar/ProjectSidebar re-renders
   const handleAddProjectCallback = useCallback(() => {
@@ -646,6 +622,48 @@ function AppInner() {
                   }
                 />
               </ErrorBoundary>
+            ) : pendingNewWorkspaceProject || projects.size === 1 ? (
+              (() => {
+                const projectPath = pendingNewWorkspaceProject ?? Array.from(projects.keys())[0];
+                const projectName =
+                  projectPath.split("/").pop() ?? projectPath.split("\\").pop() ?? "Project";
+                return (
+                  <ModeProvider projectPath={projectPath}>
+                    <ThinkingProvider projectPath={projectPath}>
+                      <FirstMessageInput
+                        projectPath={projectPath}
+                        projectName={projectName}
+                        onWorkspaceCreated={(metadata) => {
+                          // Add to workspace metadata map
+                          setWorkspaceMetadata((prev) => new Map(prev).set(metadata.id, metadata));
+
+                          // Switch to new workspace
+                          handleWorkspaceSwitch({
+                            workspaceId: metadata.id,
+                            projectPath: metadata.projectPath,
+                            projectName: metadata.projectName,
+                            namedWorkspacePath: metadata.namedWorkspacePath,
+                          });
+
+                          // Track telemetry
+                          telemetry.workspaceCreated(metadata.id);
+
+                          // Clear pending state
+                          setPendingNewWorkspaceProject(null);
+                        }}
+                        onCancel={
+                          pendingNewWorkspaceProject
+                            ? () => {
+                                // User cancelled workspace creation - clear pending state
+                                setPendingNewWorkspaceProject(null);
+                              }
+                            : undefined
+                        }
+                      />
+                    </ThinkingProvider>
+                  </ModeProvider>
+                );
+              })()
             ) : (
               <div
                 className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6]"

src/components/ChatInput.tsx

@@ -8,7 +8,6 @@ import React, {
   useMemo,
   useDeferredValue,
 } from "react";
-import { cn } from "@/lib/utils";
 import { CommandSuggestions, COMMAND_SUGGESTION_KEYS } from "./CommandSuggestions";
 import type { Toast } from "./ChatInputToast";
 import { ChatInputToast } from "./ChatInputToast";
@@ -27,14 +26,13 @@ import {
   prepareCompactionMessage,
   type CommandHandlerContext,
 } from "@/utils/chatCommands";
-import { ToggleGroup, type ToggleOption } from "./ToggleGroup";
 import { CUSTOM_EVENTS } from "@/constants/events";
-import type { UIMode } from "@/types/mode";
 import {
   getSlashCommandSuggestions,
   type SlashSuggestion,
 } from "@/utils/slashCommands/suggestions";
 import { TooltipWrapper, Tooltip, HelpIndicator } from "./Tooltip";
+import { ModeSelector } from "./ModeSelector";
 import { matchesKeybind, formatKeybind, KEYBINDS, isEditableElement } from "@/utils/ui/keybinds";
 import { ModelSelector, type ModelSelectorRef } from "./ModelSelector";
 import { useModelLRU } from "@/hooks/useModelLRU";
@@ -88,25 +86,6 @@ export interface ChatInputAPI {
   appendText: (text: string) => void;
 }
 
-const MODE_OPTIONS: Array<ToggleOption<UIMode>> = [
-  { value: "exec", label: "Exec", activeClassName: "bg-exec-mode text-white" },
-  { value: "plan", label: "Plan", activeClassName: "bg-plan-mode text-white" },
-];
-
-const ModeHelpTooltip: React.FC = () => (
-  <TooltipWrapper inline>
-    <HelpIndicator>?</HelpIndicator>
-    <Tooltip className="tooltip" align="center" width="wide">
-      <strong>Exec Mode:</strong> AI edits files and execute commands
-      <br />
-      <br />
-      <strong>Plan Mode:</strong> AI proposes plans but does not edit files
-      <br />
-      <br />
-      Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
-    </Tooltip>
-  </TooltipWrapper>
-);
 export interface ChatInputProps {
   workspaceId: string;
   onMessageSent?: () => void; // Optional callback after successful send
@@ -902,28 +881,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             </div>
           )}
 
-          {/* Mode Switch - full version for wide containers */}
-          <div className="ml-auto flex items-center gap-1.5 [@container(max-width:550px)]:hidden">
-            <div
-              className={cn(
-                "flex gap-0 bg-toggle-bg rounded",
-                "[&>button:first-of-type]:rounded-l [&>button:last-of-type]:rounded-r",
-                mode === "exec" &&
-                  "[&>button:first-of-type]:bg-exec-mode [&>button:first-of-type]:text-white [&>button:first-of-type]:hover:bg-exec-mode-hover",
-                mode === "plan" &&
-                  "[&>button:last-of-type]:bg-plan-mode [&>button:last-of-type]:text-white [&>button:last-of-type]:hover:bg-plan-mode-hover"
-              )}
-            >
-              <ToggleGroup<UIMode> options={MODE_OPTIONS} value={mode} onChange={setMode} />
-            </div>
-            <ModeHelpTooltip />
-          </div>
-
-          {/* Mode Switch - compact version for narrow containers */}
-          <div className="ml-auto hidden items-center gap-1.5 [@container(max-width:550px)]:flex">
-            <ToggleGroup<UIMode> options={MODE_OPTIONS} value={mode} onChange={setMode} compact />
-            <ModeHelpTooltip />
-          </div>
+          <ModeSelector mode={mode} onChange={setMode} className="ml-auto" />
         </div>
       </div>
     </div>