🤖 feat: show pending workspace states in sidebar

- Add status?: 'creating' field to WorkspaceMetadata for pending workspaces
- Backend emits pending metadata immediately before slow AI title generation
- generatePlaceholderName() creates git-safe placeholder from user's message
- Frontend shows shimmer on workspace name during creation
- Disable selection/remove actions while workspace is being created
- Clear pending state on error by emitting null metadata

This provides immediate visual feedback when creating workspaces instead of
the UI appearing frozen during title generation (2-5s).

Author: ammar-agent

src/browser/components/WorkspaceListItem.tsx

@@ -44,7 +44,8 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
   onToggleUnread: _onToggleUnread,
 }) => {
   // Destructure metadata for convenience
-  const { id: workspaceId, name: workspaceName, namedWorkspacePath } = metadata;
+  const { id: workspaceId, name: workspaceName, namedWorkspacePath, status } = metadata;
+  const isCreating = status === "creating";
   const gitStatus = useGitStatus(workspaceId);
 
   // Get rename context
@@ -100,19 +101,24 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
     <React.Fragment>
       <div
         className={cn(
-          "py-1.5 pl-4 pr-2 cursor-pointer border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-hover [&:hover_button]:opacity-100 flex gap-2",
-          isSelected && "bg-hover border-l-blue-400",
-          isDeleting && "opacity-50 pointer-events-none"
+          "py-1.5 pl-4 pr-2 border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative flex gap-2",
+          isCreating || isDeleting
+            ? "cursor-default opacity-70"
+            : "cursor-pointer hover:bg-hover [&:hover_button]:opacity-100",
+          isSelected && !isCreating && "bg-hover border-l-blue-400",
+          isDeleting && "pointer-events-none"
         )}
-        onClick={() =>
+        onClick={() => {
+          if (isCreating) return; // Disable click while creating
           onSelectWorkspace({
             projectPath,
             projectName,
             namedWorkspacePath,
             workspaceId,
-          })
-        }
+          });
+        }}
         onKeyDown={(e) => {
+          if (isCreating) return; // Disable keyboard while creating
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             onSelectWorkspace({
@@ -124,9 +130,12 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
           }
         }}
         role="button"
-        tabIndex={0}
+        tabIndex={isCreating ? -1 : 0}
         aria-current={isSelected ? "true" : undefined}
-        aria-label={`Select workspace ${displayName}`}
+        aria-label={
+          isCreating ? `Creating workspace ${displayName}` : `Select workspace ${displayName}`
+        }
+        aria-disabled={isCreating}
         data-workspace-path={namedWorkspacePath}
         data-workspace-id={workspaceId}
       >
@@ -147,14 +156,18 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
               />
             ) : (
               <span
-                className="text-foreground -mx-1 min-w-0 flex-1 cursor-pointer truncate rounded-sm px-1 text-left text-[14px] transition-colors duration-200 hover:bg-white/5"
+                className={cn(
+                  "text-foreground -mx-1 min-w-0 flex-1 truncate rounded-sm px-1 text-left text-[14px] transition-colors duration-200",
+                  !isCreating && "cursor-pointer hover:bg-white/5"
+                )}
                 onDoubleClick={(e) => {
+                  if (isCreating) return; // Disable rename while creating
                   e.stopPropagation();
                   startRenaming();
                 }}
-                title="Double-click to rename"
+                title={isCreating ? "Creating workspace..." : "Double-click to rename"}
               >
-                {canInterrupt ? (
+                {canInterrupt || isCreating ? (
                   <Shimmer className="w-full truncate" colorClass="var(--color-foreground)">
                     {displayName}
                   </Shimmer>
@@ -165,41 +178,47 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
             )}
 
             <div className="ml-auto flex items-center gap-1">
-              <GitStatusIndicator
-                gitStatus={gitStatus}
-                workspaceId={workspaceId}
-                tooltipPosition="right"
-                isWorking={canInterrupt}
-              />
+              {!isCreating && (
+                <>
+                  <GitStatusIndicator
+                    gitStatus={gitStatus}
+                    workspaceId={workspaceId}
+                    tooltipPosition="right"
+                    isWorking={canInterrupt}
+                  />
 
-              <TooltipWrapper inline>
-                <button
-                  className="text-muted hover:text-foreground col-start-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base opacity-0 transition-all duration-200 hover:rounded-sm hover:bg-white/10"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    void onRemoveWorkspace(workspaceId, e.currentTarget);
-                  }}
-                  aria-label={`Remove workspace ${displayName}`}
-                  data-workspace-id={workspaceId}
-                >
-                  ×
-                </button>
-                <Tooltip className="tooltip" align="right">
-                  Remove workspace
-                </Tooltip>
-              </TooltipWrapper>
+                  <TooltipWrapper inline>
+                    <button
+                      className="text-muted hover:text-foreground col-start-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base opacity-0 transition-all duration-200 hover:rounded-sm hover:bg-white/10"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        void onRemoveWorkspace(workspaceId, e.currentTarget);
+                      }}
+                      aria-label={`Remove workspace ${displayName}`}
+                      data-workspace-id={workspaceId}
+                    >
+                      ×
+                    </button>
+                    <Tooltip className="tooltip" align="right">
+                      Remove workspace
+                    </Tooltip>
+                  </TooltipWrapper>
+                </>
+              )}
             </div>
           </div>
-          <div className="min-w-0">
-            {isDeleting ? (
-              <div className="text-muted flex min-w-0 items-center gap-1.5 text-xs">
-                <span className="-mt-0.5 shrink-0 text-[10px]">🗑️</span>
-                <span className="min-w-0 truncate">Deleting...</span>
-              </div>
-            ) : (
-              <WorkspaceStatusIndicator workspaceId={workspaceId} />
-            )}
-          </div>
+          {!isCreating && (
+            <div className="min-w-0">
+              {isDeleting ? (
+                <div className="text-muted flex min-w-0 items-center gap-1.5 text-xs">
+                  <span className="-mt-0.5 shrink-0 text-[10px]">🗑️</span>
+                  <span className="min-w-0 truncate">Deleting...</span>
+                </div>
+              ) : (
+                <WorkspaceStatusIndicator workspaceId={workspaceId} />
+              )}
+            </div>
+          )}
         </div>
       </div>
       {renameError && isEditing && (

src/common/types/workspace.ts

@@ -54,6 +54,13 @@ export interface WorkspaceMetadata {
 
   /** Runtime configuration for this workspace (always set, defaults to local on load) */
   runtimeConfig: RuntimeConfig;
+
+  /**
+   * Workspace creation status. When 'creating', the workspace is being set up
+   * (title generation, git operations). Undefined or absent means ready.
+   * Pending workspaces are ephemeral (not persisted to config).
+   */
+  status?: "creating";
 }
 
 /**

src/node/services/agentSession.ts

@@ -8,7 +8,7 @@ import type { AIService } from "@/node/services/aiService";
 import type { HistoryService } from "@/node/services/historyService";
 import type { PartialService } from "@/node/services/partialService";
 import type { InitStateManager } from "@/node/services/initStateManager";
-import type { WorkspaceMetadata } from "@/common/types/workspace";
+import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import { DEFAULT_RUNTIME_CONFIG } from "@/common/constants/workspace";
 import type {
   WorkspaceChatMessage,
@@ -33,7 +33,7 @@ export interface AgentSessionChatEvent {
 
 export interface AgentSessionMetadataEvent {
   workspaceId: string;
-  metadata: WorkspaceMetadata | null;
+  metadata: FrontendWorkspaceMetadata | null;
 }
 
 interface AgentSessionOptions {
@@ -139,7 +139,7 @@ export class AgentSession {
     await this.emitHistoricalEvents(listener);
   }
 
-  emitMetadata(metadata: WorkspaceMetadata | null): void {
+  emitMetadata(metadata: FrontendWorkspaceMetadata | null): void {
     this.assertNotDisposed("emitMetadata");
     this.emitter.emit("metadata-event", {
       workspaceId: this.workspaceId,
@@ -244,11 +244,12 @@ export class AgentSession {
           : PlatformPaths.basename(normalizedWorkspacePath) || "unknown";
     }
 
-    const metadata: WorkspaceMetadata = {
+    const metadata: FrontendWorkspaceMetadata = {
       id: this.workspaceId,
       name: workspaceName,
       projectName: derivedProjectName,
       projectPath: derivedProjectPath,
+      namedWorkspacePath: normalizedWorkspacePath,
       runtimeConfig: DEFAULT_RUNTIME_CONFIG,
     };
 

src/node/services/ipcMain.ts

@@ -26,7 +26,6 @@ import type {
 import { Ok, Err, type Result } from "@/common/types/result";
 import { validateWorkspaceName } from "@/common/utils/validation/workspaceValidation";
 import type {
-  WorkspaceMetadata,
   FrontendWorkspaceMetadata,
   WorkspaceActivitySnapshot,
 } from "@/common/types/workspace";
@@ -107,7 +106,7 @@ async function createWorkspaceWithCollisionRetry(
   throw new Error("Unexpected: workspace creation loop completed without return");
 }
 
-import { generateWorkspaceName } from "./workspaceTitleGenerator";
+import { generateWorkspaceName, generatePlaceholderName } from "./workspaceTitleGenerator";
 /**
  * IpcMain - Manages all IPC handlers and service coordination
  *
@@ -305,15 +304,44 @@ export class IpcMain {
     | { success: true; workspaceId: string; metadata: FrontendWorkspaceMetadata }
     | Result<void, SendMessageError>
   > {
+    // Generate IDs and placeholder upfront for immediate UI feedback
+    const workspaceId = this.config.generateStableId();
+    const placeholderName = generatePlaceholderName(message);
+    const projectName = projectPath.split("/").pop() ?? projectPath.split("\\").pop() ?? "unknown";
+    const createdAt = new Date().toISOString();
+
+    // Prepare runtime config early for pending metadata
+    // Default to worktree runtime for new workspaces
+    let finalRuntimeConfig: RuntimeConfig = options.runtimeConfig ?? {
+      type: "worktree",
+      srcBaseDir: this.config.srcDir,
+    };
+
+    // Create session and emit pending metadata IMMEDIATELY
+    // This allows the sidebar to show the workspace while we do slow operations
+    const session = this.getOrCreateSession(workspaceId);
+    session.emitMetadata({
+      id: workspaceId,
+      name: placeholderName,
+      projectName,
+      projectPath,
+      namedWorkspacePath: "", // Not yet created
+      createdAt,
+      runtimeConfig: finalRuntimeConfig,
+      status: "creating",
+    });
+
     try {
-      // 1. Generate workspace branch name using AI (use same model as message)
+      // 1. Generate workspace branch name using AI (SLOW - but user sees pending state)
       let branchName: string;
       {
         const isErrLike = (v: unknown): v is { type: string } =>
           typeof v === "object" && v !== null && "type" in v;
         const nameResult = await generateWorkspaceName(message, options.model, this.aiService);
         if (!nameResult.success) {
           const err = nameResult.error;
+          // Clear pending state on error
+          session.emitMetadata(null);
           if (isErrLike(err)) {
             return Err(err);
           }
@@ -338,15 +366,7 @@ export class IpcMain {
       const recommendedTrunk =
         options.trunkBranch ?? (await detectDefaultTrunkBranch(projectPath, branches)) ?? "main";
 
-      // 3. Create workspace
-      // Default to worktree runtime for new workspaces
-      let finalRuntimeConfig: RuntimeConfig = options.runtimeConfig ?? {
-        type: "worktree",
-        srcBaseDir: this.config.srcDir,
-      };
-
-      const workspaceId = this.config.generateStableId();
-
+      // 3. Resolve runtime paths
       let runtime;
       try {
         // Handle different runtime types
@@ -376,12 +396,12 @@ export class IpcMain {
         }
       } catch (error) {
         const errorMsg = error instanceof Error ? error.message : String(error);
+        // Clear pending state on error
+        session.emitMetadata(null);
         return Err({ type: "unknown", raw: `Failed to prepare runtime: ${errorMsg}` });
       }
 
-      const session = this.getOrCreateSession(workspaceId);
       this.initStateManager.startInit(workspaceId, projectPath);
-
       const initLogger = this.createInitLogger(workspaceId);
 
       // Create workspace with automatic collision retry
@@ -393,21 +413,20 @@ export class IpcMain {
         );
 
       if (!createResult.success || !createResult.workspacePath) {
+        // Clear pending state on error
+        session.emitMetadata(null);
         return Err({ type: "unknown", raw: createResult.error ?? "Failed to create workspace" });
       }
 
       // Use the final branch name (may have suffix if collision occurred)
       branchName = finalBranchName;
 
-      const projectName =
-        projectPath.split("/").pop() ?? projectPath.split("\\").pop() ?? "unknown";
-
       const metadata = {
         id: workspaceId,
         name: branchName,
         projectName,
         projectPath,
-        createdAt: new Date().toISOString(),
+        createdAt,
       };
 
       await this.config.editConfig((config) => {
@@ -429,9 +448,12 @@ export class IpcMain {
       const allMetadata = await this.config.getAllWorkspaceMetadata();
       const completeMetadata = allMetadata.find((m) => m.id === workspaceId);
       if (!completeMetadata) {
+        // Clear pending state on error
+        session.emitMetadata(null);
         return Err({ type: "unknown", raw: "Failed to retrieve workspace metadata" });
       }
 
+      // Emit final metadata (no status = ready)
       session.emitMetadata(completeMetadata);
 
       void runtime
@@ -460,6 +482,8 @@ export class IpcMain {
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : String(error);
       log.error("Unexpected error in createWorkspaceForFirstMessage:", error);
+      // Clear pending state on error
+      session.emitMetadata(null);
       return Err({ type: "unknown", raw: `Failed to create workspace: ${errorMessage}` });
     }
   }
@@ -1063,11 +1087,12 @@ export class IpcMain {
           }
 
           // Initialize workspace metadata
-          const metadata: WorkspaceMetadata = {
+          const metadata: FrontendWorkspaceMetadata = {
             id: newWorkspaceId,
             name: newName,
             projectName,
             projectPath: foundProjectPath,
+            namedWorkspacePath: runtime.getWorkspacePath(foundProjectPath, newName),
             createdAt: new Date().toISOString(),
             runtimeConfig: DEFAULT_RUNTIME_CONFIG,
           };

src/node/services/workspaceTitleGenerator.ts

@@ -57,3 +57,19 @@ function validateBranchName(name: string): string {
     .replace(/-+/g, "-")
     .substring(0, 50);
 }
+
+/**
+ * Generate a placeholder name from the user's message for immediate display
+ * while the AI generates the real title. This is git-safe and human-readable.
+ */
+export function generatePlaceholderName(message: string): string {
+  // Take first ~40 chars, sanitize for git branch name
+  const truncated = message.slice(0, 40).trim();
+  const sanitized = truncated
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-+/g, "-")
+    .substring(0, 30);
+  return sanitized || "new-workspace";
+}