From 00464f518f42ece17b7b9df8a7652cbe8f720f09 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 6 Apr 2026 22:10:51 +0800
Subject: [PATCH] refactor: tighten AI-CAD viewport layout

---
 components/ai-cad/ai-cad-workbench.tsx | 74 ++++++++++++++------------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/components/ai-cad/ai-cad-workbench.tsx b/components/ai-cad/ai-cad-workbench.tsx
index 5b0cacd6e..e3e440bdb 100644
--- a/components/ai-cad/ai-cad-workbench.tsx
+++ b/components/ai-cad/ai-cad-workbench.tsx
@@ -2103,15 +2103,15 @@ function AiCadToolbarGroup({
   return (
     <div
       className={cn(
-        "flex flex-wrap items-center gap-2 border border-[#e6e0d3] bg-white px-2 py-1",
+        "flex flex-wrap items-center gap-1.5 border border-[#e6e0d3] bg-white px-1.5 py-1",
         className
       )}
     >
-      <span className="pl-1 text-[#8a8272] text-[10px] uppercase tracking-[0.18em]">
+      <span className="pl-0.5 text-[#8a8272] text-[10px] uppercase tracking-[0.18em]">
         {label}
       </span>
-      <Separator className="h-5 bg-[#e7e1d4]" orientation="vertical" />
-      <div className="flex flex-wrap items-center gap-1.5">{children}</div>
+      <Separator className="h-4 bg-[#e7e1d4]" orientation="vertical" />
+      <div className="flex flex-wrap items-center gap-1">{children}</div>
     </div>
   );
 }
@@ -3674,23 +3674,23 @@ 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-2">
-              <div className="flex flex-wrap items-center justify-between gap-2">
-                <div className="flex flex-wrap items-center gap-2">
+            <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">
                   <button
-                    className="inline-flex h-8 items-center gap-2 rounded-[9px] border border-[#e2dccf] bg-white px-3 text-[#383329] text-[12px] transition hover:bg-[#faf7ef]"
+                    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"
                   >
-                    <WandSparkles className="h-4 w-4 text-[#31df86]" />
+                    <WandSparkles className="h-3.5 w-3.5 text-[#31df86]" />
                     Start Design
                   </button>
-                  <Badge className="rounded-full border-[#e2dccf] bg-white px-2.5 py-1 text-[#5f594d] text-[11px]">
+                  <Badge className="rounded-full border-[#e2dccf] bg-white px-2 py-0.5 text-[#5f594d] text-[10px]">
                     {activeVersion
                       ? `Focus V${activeVersion.versionNumber}`
                       : "Ready for first pass"}
                   </Badge>
                 </div>
-                <div className="flex flex-wrap items-center gap-3 text-[#7f7768] text-[11px]">
+                <div className="flex flex-wrap items-center gap-2.5 text-[#7f7768] text-[10px]">
                   <span
                     className={cn(
                       "inline-flex items-center gap-1.5",
@@ -3719,11 +3719,11 @@ export function AiCadWorkbench() {
                 </div>
               </div>
 
-              <div className="mt-1.5 flex flex-wrap items-center gap-2">
+              <div className="mt-1 flex flex-wrap items-center gap-1.5">
                 <AiCadToolbarGroup label="Mode">
                   <button
                     className={cn(
-                      "inline-flex h-8 items-center gap-2 rounded-[8px] border px-2.5 text-[12px] transition-all duration-150 ease-out",
+                      "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]"
@@ -3739,7 +3739,7 @@ export function AiCadWorkbench() {
                   </button>
                   <button
                     className={cn(
-                      "inline-flex h-8 items-center gap-2 rounded-[8px] border px-2.5 text-[12px] transition-all duration-150 ease-out",
+                      "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]"
@@ -3758,7 +3758,7 @@ export function AiCadWorkbench() {
                 <AiCadToolbarGroup label="Display">
                   <button
                     className={cn(
-                      "inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out",
+                      "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]"
@@ -3776,7 +3776,7 @@ export function AiCadWorkbench() {
                   </button>
                   <button
                     className={cn(
-                      "inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out",
+                      "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]"
@@ -3794,7 +3794,7 @@ export function AiCadWorkbench() {
                   </button>
                   <button
                     className={cn(
-                      "inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out",
+                      "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]"
@@ -3813,16 +3813,16 @@ export function AiCadWorkbench() {
                 </AiCadToolbarGroup>
 
                 <AiCadToolbarGroup className="lg:ml-auto" label="Session">
-                  <Badge className="rounded-md border-[#ddd7ca] bg-white px-2 py-0.5 text-[#5f594d] text-[11px]">
+                  <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-2 py-0.5 text-[#5f594d] text-[11px]">
+                  <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-2 py-0.5 text-[#5f594d] text-[11px]">
+                    <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
                       V{activeVersion.versionNumber}
                     </Badge>
                   ) : null}
@@ -3833,7 +3833,7 @@ export function AiCadWorkbench() {
             <div className="min-h-0 flex-1 overflow-hidden bg-white">
               <PanelGroup
                 autoSaveId={`ai-cad-panel-layout:${panelDirection}`}
-                className="flex h-full min-h-[720px]"
+                className="flex h-full min-h-0"
                 direction={panelDirection}
               >
                 <Panel
@@ -4889,22 +4889,28 @@ export function AiCadWorkbench() {
                     <div className="flex h-full min-h-0 flex-col bg-white text-[#201c16]">
                       <div
                         className={cn(
-                          "flex items-center justify-between border-[#e6e0d3] border-b px-4 py-3",
-                          !activeVersion && "min-h-12"
+                          "flex min-h-10 items-center justify-between border-[#e6e0d3] border-b px-4 py-2",
+                          !activeVersion && "min-h-10"
                         )}
                       >
-                        <div className="flex items-start justify-between gap-4">
-                          <div>
-                            <div className="flex items-center gap-2 font-medium text-[15px]">
-                              <Orbit className="h-4 w-4 text-[#6f695d]" />
-                              {activeVersion ? "建模画布" : "Canvas"}
-                            </div>
-                            <div className="mt-1 text-[#7f7768] text-[12px]">
-                              {activeVersion
-                                ? "Preview-first canvas for the active model."
-                                : "The center canvas stays focused on the current model."}
-                            </div>
+                        <div className="flex min-w-0 items-center gap-2">
+                          <Orbit className="h-4 w-4 text-[#6f695d]" />
+                          <div className="font-medium text-[15px]">
+                            {activeVersion ? "建模画布" : "Canvas"}
                           </div>
+                          {activeVersion ? null : (
+                            <div className="truncate text-[#8b8375] text-[12px]">
+                              The center canvas stays focused on the current
+                              model.
+                            </div>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          {activeVersion ? (
+                            <div className="text-[#8b8375] text-[11px]">
+                              Preview-first canvas
+                            </div>
+                          ) : null}
                           {activeVersion ? (
                             <Badge className="rounded-md border-[#ddd7ca] bg-white text-[#5f594d]">
                               V{activeVersion.versionNumber}