From e8279ead5212bbbad4f7857c6017286dabafc9aa Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 6 Apr 2026 22:23:19 +0800
Subject: [PATCH] refactor: merge AI-CAD toolbar into single row

---
 components/ai-cad/ai-cad-workbench.tsx | 266 ++++++++++++-------------
 1 file changed, 133 insertions(+), 133 deletions(-)

diff --git a/components/ai-cad/ai-cad-workbench.tsx b/components/ai-cad/ai-cad-workbench.tsx
index b6ffa9445..5ce6c455c 100644
--- a/components/ai-cad/ai-cad-workbench.tsx
+++ b/components/ai-cad/ai-cad-workbench.tsx
@@ -3674,9 +3674,9 @@ export function AiCadWorkbench() {
           </div>
 
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-            <div className="border-[#e6e0d3] border-b bg-white px-3 py-1.5">
-              <div className="flex flex-wrap items-center justify-between gap-1.5">
-                <div className="flex flex-wrap items-center gap-1.5">
+            <div className="border-[#e6e0d3] border-b bg-white px-3 py-1">
+              <div className="flex items-center justify-between gap-2 overflow-x-auto">
+                <div className="flex min-w-0 items-center gap-1.5 whitespace-nowrap">
                   <button
                     className="inline-flex h-7 items-center gap-1.5 rounded-[8px] border border-[#e2dccf] bg-white px-2.5 text-[#383329] text-[12px] transition hover:bg-[#faf7ef]"
                     type="button"
@@ -3689,144 +3689,144 @@ export function AiCadWorkbench() {
                       ? `Focus V${activeVersion.versionNumber}`
                       : "Ready for first pass"}
                   </Badge>
+                  <AiCadToolbarGroup className="shrink-0" label="Mode">
+                    <button
+                      className={cn(
+                        "inline-flex h-7 items-center gap-1.5 rounded-[7px] border px-2 text-[12px] transition-all duration-150 ease-out",
+                        activeResultTab === "preview"
+                          ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
+                          : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
+                      )}
+                      onClick={() => {
+                        resultPanelRef.current?.expand();
+                        setActiveResultTab("preview");
+                      }}
+                      type="button"
+                    >
+                      <Orbit className="h-4 w-4" />
+                      3D Preview
+                    </button>
+                    <button
+                      className={cn(
+                        "inline-flex h-7 items-center gap-1.5 rounded-[7px] border px-2 text-[12px] transition-all duration-150 ease-out",
+                        activeResultTab === "code"
+                          ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
+                          : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
+                      )}
+                      onClick={() => {
+                        resultPanelRef.current?.expand();
+                        setActiveResultTab("code");
+                      }}
+                      type="button"
+                    >
+                      <FileCode2 className="h-4 w-4" />
+                      KCL
+                    </button>
+                  </AiCadToolbarGroup>
+
+                  <AiCadToolbarGroup className="shrink-0" label="Display">
+                    <button
+                      className={cn(
+                        "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
+                        viewerSettings.showGrid
+                          ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
+                          : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
+                      )}
+                      onClick={() =>
+                        setViewerSettings((current) => ({
+                          ...current,
+                          showGrid: !current.showGrid,
+                        }))
+                      }
+                      title="切换网格"
+                      type="button"
+                    >
+                      <Grid3X3 className="h-4 w-4" />
+                    </button>
+                    <button
+                      className={cn(
+                        "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
+                        viewerSettings.autoRotate
+                          ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
+                          : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
+                      )}
+                      onClick={() =>
+                        setViewerSettings((current) => ({
+                          ...current,
+                          autoRotate: !current.autoRotate,
+                        }))
+                      }
+                      title="切换自动旋转"
+                      type="button"
+                    >
+                      <RotateCcw className="h-4 w-4" />
+                    </button>
+                    <button
+                      className={cn(
+                        "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
+                        viewerSettings.wireframe
+                          ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
+                          : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
+                      )}
+                      onClick={() =>
+                        setViewerSettings((current) => ({
+                          ...current,
+                          wireframe: !current.wireframe,
+                        }))
+                      }
+                      title="切换线框模式"
+                      type="button"
+                    >
+                      <Box className="h-4 w-4" />
+                    </button>
+                  </AiCadToolbarGroup>
                 </div>
-                <div className="flex flex-wrap items-center gap-2.5 text-[#7f7768] text-[10px]">
-                  <span
-                    className={cn(
-                      "inline-flex items-center gap-1.5",
-                      workspaceSyncState === "synced"
-                        ? "text-emerald-700"
-                        : "text-[#7f7768]"
-                    )}
-                  >
+
+                <div className="flex shrink-0 items-center gap-2 whitespace-nowrap">
+                  <div className="flex items-center gap-2.5 text-[#7f7768] text-[10px]">
                     <span
                       className={cn(
-                        "h-1.5 w-1.5 rounded-full",
+                        "inline-flex items-center gap-1.5",
                         workspaceSyncState === "synced"
-                          ? "bg-emerald-500"
-                          : "bg-amber-400"
+                          ? "text-emerald-700"
+                          : "text-[#7f7768]"
                       )}
-                    />
-                    {workspaceSyncState === "synced" ? "Synced" : "Syncing"}
-                  </span>
-                  <span>{versions.length} versions</span>
-                  <span>{completedCount} done</span>
-                  <span>
-                    {hasPendingTasks
-                      ? `${pendingTaskCount} task active`
-                      : "Workspace stable"}
-                  </span>
-                </div>
-              </div>
+                    >
+                      <span
+                        className={cn(
+                          "h-1.5 w-1.5 rounded-full",
+                          workspaceSyncState === "synced"
+                            ? "bg-emerald-500"
+                            : "bg-amber-400"
+                        )}
+                      />
+                      {workspaceSyncState === "synced" ? "Synced" : "Syncing"}
+                    </span>
+                    <span>{versions.length} versions</span>
+                    <span>{completedCount} done</span>
+                    <span>
+                      {hasPendingTasks
+                        ? `${pendingTaskCount} task active`
+                        : "Workspace stable"}
+                    </span>
+                  </div>
 
-              <div className="mt-1 flex flex-wrap items-center gap-1.5">
-                <AiCadToolbarGroup label="Mode">
-                  <button
-                    className={cn(
-                      "inline-flex h-7 items-center gap-1.5 rounded-[7px] border px-2 text-[12px] transition-all duration-150 ease-out",
-                      activeResultTab === "preview"
-                        ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
-                        : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
-                    )}
-                    onClick={() => {
-                      resultPanelRef.current?.expand();
-                      setActiveResultTab("preview");
-                    }}
-                    type="button"
-                  >
-                    <Orbit className="h-4 w-4" />
-                    3D Preview
-                  </button>
-                  <button
-                    className={cn(
-                      "inline-flex h-7 items-center gap-1.5 rounded-[7px] border px-2 text-[12px] transition-all duration-150 ease-out",
-                      activeResultTab === "code"
-                        ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
-                        : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
-                    )}
-                    onClick={() => {
-                      resultPanelRef.current?.expand();
-                      setActiveResultTab("code");
-                    }}
-                    type="button"
-                  >
-                    <FileCode2 className="h-4 w-4" />
-                    KCL
-                  </button>
-                </AiCadToolbarGroup>
-
-                <AiCadToolbarGroup label="Display">
-                  <button
-                    className={cn(
-                      "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
-                      viewerSettings.showGrid
-                        ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
-                        : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
-                    )}
-                    onClick={() =>
-                      setViewerSettings((current) => ({
-                        ...current,
-                        showGrid: !current.showGrid,
-                      }))
-                    }
-                    title="切换网格"
-                    type="button"
-                  >
-                    <Grid3X3 className="h-4 w-4" />
-                  </button>
-                  <button
-                    className={cn(
-                      "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
-                      viewerSettings.autoRotate
-                        ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
-                        : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
-                    )}
-                    onClick={() =>
-                      setViewerSettings((current) => ({
-                        ...current,
-                        autoRotate: !current.autoRotate,
-                      }))
-                    }
-                    title="切换自动旋转"
-                    type="button"
-                  >
-                    <RotateCcw className="h-4 w-4" />
-                  </button>
-                  <button
-                    className={cn(
-                      "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
-                      viewerSettings.wireframe
-                        ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
-                        : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
-                    )}
-                    onClick={() =>
-                      setViewerSettings((current) => ({
-                        ...current,
-                        wireframe: !current.wireframe,
-                      }))
-                    }
-                    title="切换线框模式"
-                    type="button"
-                  >
-                    <Box className="h-4 w-4" />
-                  </button>
-                </AiCadToolbarGroup>
-
-                <AiCadToolbarGroup className="lg:ml-auto" label="Session">
-                  <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
-                    {generationProvider === "kittycad-cad"
-                      ? "Zoo CAD"
-                      : "Tripo3D"}
-                  </Badge>
-                  <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
-                    {viewerSettings.envPreset}
-                  </Badge>
-                  {activeVersion ? (
+                  <AiCadToolbarGroup className="shrink-0" label="Session">
                     <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
-                      V{activeVersion.versionNumber}
+                      {generationProvider === "kittycad-cad"
+                        ? "Zoo CAD"
+                        : "Tripo3D"}
                     </Badge>
-                  ) : null}
-                </AiCadToolbarGroup>
+                    <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
+                      {viewerSettings.envPreset}
+                    </Badge>
+                    {activeVersion ? (
+                      <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
+                        V{activeVersion.versionNumber}
+                      </Badge>
+                    ) : null}
+                  </AiCadToolbarGroup>
+                </div>
               </div>
             </div>