From 60524bad0e6a6404a0f7e44aba374afa0411a1c5 Mon Sep 17 00:00:00 2001
From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com>
Date: Fri, 3 Jul 2026 16:00:58 +0800
Subject: [PATCH] fix(web): show toolbar and status bar when no workspace
 selected

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/layout/WorkspaceShell.tsx | 80 +++++++++++---------
 web/src/pages/workspace/WorkspacePage.tsx    | 11 ---
 2 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/web/src/components/layout/WorkspaceShell.tsx b/web/src/components/layout/WorkspaceShell.tsx
index 19792ee..ce41e8b 100644
--- a/web/src/components/layout/WorkspaceShell.tsx
+++ b/web/src/components/layout/WorkspaceShell.tsx
@@ -19,7 +19,7 @@ import {
 } from "@/lib/api/process";
 
 interface WorkspaceShellProps {
-  workspaceId: string;
+  workspaceId: string | null;
 }
 
 export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
@@ -75,7 +75,7 @@ export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
             variant="ghost"
             size="sm"
             className="h-7 px-2 text-xs"
-            onClick={() => start.mutate(workspaceId)}
+            onClick={() => workspaceId && start.mutate(workspaceId)}
             disabled={!workspaceId || statusUnknown || isRunning || start.isPending}
           >
             <Play className="size-4" aria-hidden="true" />
@@ -84,7 +84,7 @@ export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
             variant="ghost"
             size="sm"
             className="h-7 px-2 text-xs"
-            onClick={() => stop.mutate(workspaceId)}
+            onClick={() => workspaceId && stop.mutate(workspaceId)}
             disabled={!workspaceId || statusUnknown || !isRunning || stop.isPending}
           >
             <Square className="size-4" aria-hidden="true" />
@@ -93,7 +93,7 @@ export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
             variant="ghost"
             size="sm"
             className="h-7 px-2 text-xs"
-            onClick={() => restart.mutate(workspaceId)}
+            onClick={() => workspaceId && restart.mutate(workspaceId)}
             disabled={!workspaceId || statusUnknown || !isRunning || restart.isPending}
           >
             <RotateCw
@@ -110,39 +110,49 @@ export function WorkspaceShell({ workspaceId }: WorkspaceShellProps) {
       </header>
 
       {/* Main layout */}
-      <div className="flex min-h-0 flex-1">
-        <PanelGroup direction="horizontal" className="flex-1">
-          {/* Sidebar */}
-          {!sidebarCollapsed && (
-            <>
-              <Panel defaultSize={18} minSize={12} maxSize={30}>
-                <FileExplorerPanel workspaceId={workspaceId} />
-              </Panel>
-              <PanelResizeHandle className="w-1 bg-border transition-colors hover:bg-accent" />
-            </>
-          )}
+      {workspaceId ? (
+        <div className="flex min-h-0 flex-1">
+          <PanelGroup direction="horizontal" className="flex-1">
+            {/* Sidebar */}
+            {!sidebarCollapsed && (
+              <>
+                <Panel defaultSize={18} minSize={12} maxSize={30}>
+                  <FileExplorerPanel workspaceId={workspaceId} />
+                </Panel>
+                <PanelResizeHandle className="w-1 bg-border transition-colors hover:bg-accent" />
+              </>
+            )}
 
-          {/* Main content area */}
-          <Panel>
-            <PanelGroup direction="vertical">
-              {/* Editor */}
-              <Panel>
-                <EditorPanel workspaceId={workspaceId} path={activeFilePath || null} />
-              </Panel>
+            {/* Main content area */}
+            <Panel>
+              <PanelGroup direction="vertical">
+                {/* Editor */}
+                <Panel>
+                  <EditorPanel workspaceId={workspaceId} path={activeFilePath || null} />
+                </Panel>
 
-              {/* Terminal panel */}
-              {terminalVisible && (
-                <>
-                  <PanelResizeHandle className="h-1 bg-border transition-colors hover:bg-accent" />
-                  <Panel defaultSize={30} minSize={10} maxSize={70}>
-                    <TerminalPanel workspaceId={workspaceId} />
-                  </Panel>
-                </>
-              )}
-            </PanelGroup>
-          </Panel>
-        </PanelGroup>
-      </div>
+                {/* Terminal panel */}
+                {terminalVisible && (
+                  <>
+                    <PanelResizeHandle className="h-1 bg-border transition-colors hover:bg-accent" />
+                    <Panel defaultSize={30} minSize={10} maxSize={70}>
+                      <TerminalPanel workspaceId={workspaceId} />
+                    </Panel>
+                  </>
+                )}
+              </PanelGroup>
+            </Panel>
+          </PanelGroup>
+        </div>
+      ) : (
+        <main className="flex min-h-0 flex-1 items-center justify-center bg-background text-foreground">
+          <div className="text-center text-sm text-muted-foreground">
+            <p className="font-medium">No workspace selected</p>
+            <p className="mt-1">Select or create a workspace to get started.</p>
+            <p className="mt-1 text-xs">Use the workspace selector in the toolbar to choose one.</p>
+          </div>
+        </main>
+      )}
 
       {/* Status bar */}
       <StatusBar activeFilePath={activeFilePath} workspaceId={workspaceId} />
diff --git a/web/src/pages/workspace/WorkspacePage.tsx b/web/src/pages/workspace/WorkspacePage.tsx
index a7a03a4..f02fcf9 100644
--- a/web/src/pages/workspace/WorkspacePage.tsx
+++ b/web/src/pages/workspace/WorkspacePage.tsx
@@ -12,16 +12,5 @@ export function WorkspacePage() {
   useWorkspaces();
   useFileList(currentWorkspaceId ?? null, ".");
 
-  if (!currentWorkspaceId) {
-    return (
-      <main className="flex h-full w-full items-center justify-center bg-background text-foreground">
-        <div className="text-center text-sm text-muted-foreground">
-          <p className="font-medium">No workspace selected</p>
-          <p className="mt-1">Select or create a workspace to get started.</p>
-        </div>
-      </main>
-    );
-  }
-
   return <WorkspaceShell workspaceId={currentWorkspaceId} />;
 }