feat(design): builder shell visual alignment with GlassContainer, micro-borders

adriannoes · adriannoes · commit 253631fa573b · 2026-03-15T19:00:55.000-03:00
diff --git a/src/components/builder/builder-canvas.tsx b/src/components/builder/builder-canvas.tsx
@@ -42,6 +42,7 @@ import { VersionHistoryPanel } from "./version-history-panel"
 import { ExportImportDialog } from "./export-import-dialog"
 import { BuilderCommandPalette } from "./builder-command-palette"
 import { NodeContextMenu, PaneContextMenu } from "./builder-context-menu"
+import { GlassContainer } from "@/components/ui/glass-container"
 import { getHistoryManager } from "@/lib/history-manager"
 import { useToast } from "@/hooks/use-toast"
 import {
@@ -747,127 +748,126 @@ function BuilderCanvasInner() {
       />
 
       <div className="relative flex flex-1 flex-col">
-        <div
-          className="border-border/80 bg-card/90 absolute top-4 right-4 left-4 z-50 flex items-center gap-3 rounded-2xl border px-3 py-2 shadow-sm"
-          data-testid="builder-toolbar"
-        >
-          <div className="flex min-w-0 items-center gap-3">
-            <h1 className="truncate text-sm font-semibold tracking-tight">
-              {workflow?.name || "Untitled Workflow"}
-            </h1>
-            <span className="border-border/80 bg-muted/40 text-muted-foreground rounded-full border px-2 py-0.5 text-[10px] font-medium">
-              v{workflow?.version || 1}
-            </span>
-          </div>
-
-          <div className="border-border/80 bg-background/70 ml-auto flex max-w-full items-center gap-1.5 overflow-x-auto rounded-full border p-1">
-            <ExportImportDialog
-              workflowId={workflowId}
-              onImportSuccess={(newWorkflow) => {
-                mutate("/api/workflows")
-                if (newWorkflow?.id) {
-                  setWorkflowId(newWorkflow.id)
-                  mutate(`/api/workflows/${newWorkflow.id}`)
-                } else {
-                  mutate(`/api/workflows/${workflowId}`)
-                }
-              }}
-            />
-            <div className="bg-border/80 mx-1 h-4 w-px" />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hover:bg-accent h-8 w-8 rounded-full"
-              onClick={handleUndo}
-              disabled={!historyStatus?.canUndo}
-              aria-label="Undo"
-              title="Undo"
-            >
-              <Undo className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hover:bg-accent h-8 w-8 rounded-full"
-              onClick={handleRedo}
-              disabled={!historyStatus?.canRedo}
-              aria-label="Redo"
-              title="Redo"
-            >
-              <Redo className="h-4 w-4" />
-            </Button>
-            <div className="bg-border/80 mx-1 h-4 w-px" />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hover:bg-accent h-8 w-8 rounded-full"
-              onClick={handleAutoLayout}
-              title="Auto Layout"
-              aria-label="Auto Layout"
-            >
-              <ArrowDownUp className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hover:bg-accent h-8 w-8 rounded-full"
-              onClick={handleZoomOut}
-              aria-label="Zoom out"
-              title="Zoom out"
-            >
-              <ZoomOut className="h-4 w-4" />
-            </Button>
-            <span
-              className="text-muted-foreground w-10 text-center text-xs font-medium select-none"
-              aria-live="polite"
-            >
-              {Math.round((viewport?.zoom ?? 1) * 100)}%
-            </span>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hover:bg-accent h-8 w-8 rounded-full"
-              onClick={handleZoomIn}
-              aria-label="Zoom in"
-              title="Zoom in"
-            >
-              <ZoomIn className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hover:bg-accent h-8 w-8 rounded-full"
-              onClick={handleResetView}
-              aria-label="Fit view"
-              title="Fit view"
-            >
-              <Maximize2 className="h-4 w-4" />
-            </Button>
-            <div className="bg-border/80 mx-1 h-4 w-px" />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hover:bg-accent h-8 w-8 rounded-full"
-              onClick={() => setShowVersionHistory(!showVersionHistory)}
-              aria-label="Version history"
-              title="Version history"
-            >
-              <History className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="ml-1 h-8 gap-2 rounded-full border-indigo-500/20 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20"
-              onClick={() => setShowExecutionMonitor(!showExecutionMonitor)}
-            >
-              <Play className="h-3.5 w-3.5" />
-              {showExecutionMonitor ? "Close" : "Run"}
-            </Button>
-            <Button size="sm" className="h-8 gap-2 rounded-full" onClick={handleSaveVersion}>
-              <Save className="h-3.5 w-3.5" />
-              Save
-            </Button>
-          </div>
+        <div className="absolute top-4 right-4 left-4 z-50" data-testid="builder-toolbar">
+          <GlassContainer className="flex items-center gap-3 px-3 py-2 shadow-sm">
+            <div className="flex min-w-0 items-center gap-3">
+              <h1 className="truncate text-sm font-semibold tracking-tight">
+                {workflow?.name || "Untitled Workflow"}
+              </h1>
+              <span className="border-border/80 bg-muted/40 text-muted-foreground rounded-full border px-2 py-0.5 text-[10px] font-medium">
+                v{workflow?.version || 1}
+              </span>
+            </div>
+
+            <div className="border-border/80 bg-background/70 ml-auto flex max-w-full items-center gap-1.5 overflow-x-auto rounded-full border p-1">
+              <ExportImportDialog
+                workflowId={workflowId}
+                onImportSuccess={(newWorkflow) => {
+                  mutate("/api/workflows")
+                  if (newWorkflow?.id) {
+                    setWorkflowId(newWorkflow.id)
+                    mutate(`/api/workflows/${newWorkflow.id}`)
+                  } else {
+                    mutate(`/api/workflows/${workflowId}`)
+                  }
+                }}
+              />
+              <div className="bg-border/80 mx-1 h-4 w-px" />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-accent h-8 w-8 rounded-full"
+                onClick={handleUndo}
+                disabled={!historyStatus?.canUndo}
+                aria-label="Undo"
+                title="Undo"
+              >
+                <Undo className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-accent h-8 w-8 rounded-full"
+                onClick={handleRedo}
+                disabled={!historyStatus?.canRedo}
+                aria-label="Redo"
+                title="Redo"
+              >
+                <Redo className="h-4 w-4" />
+              </Button>
+              <div className="bg-border/80 mx-1 h-4 w-px" />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-accent h-8 w-8 rounded-full"
+                onClick={handleAutoLayout}
+                title="Auto Layout"
+                aria-label="Auto Layout"
+              >
+                <ArrowDownUp className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-accent h-8 w-8 rounded-full"
+                onClick={handleZoomOut}
+                aria-label="Zoom out"
+                title="Zoom out"
+              >
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+              <span
+                className="text-muted-foreground w-10 text-center text-xs font-medium select-none"
+                aria-live="polite"
+              >
+                {Math.round((viewport?.zoom ?? 1) * 100)}%
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-accent h-8 w-8 rounded-full"
+                onClick={handleZoomIn}
+                aria-label="Zoom in"
+                title="Zoom in"
+              >
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-accent h-8 w-8 rounded-full"
+                onClick={handleResetView}
+                aria-label="Fit view"
+                title="Fit view"
+              >
+                <Maximize2 className="h-4 w-4" />
+              </Button>
+              <div className="bg-border/80 mx-1 h-4 w-px" />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-accent h-8 w-8 rounded-full"
+                onClick={() => setShowVersionHistory(!showVersionHistory)}
+                aria-label="Version history"
+                title="Version history"
+              >
+                <History className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="ml-1 h-8 gap-2 rounded-full border-indigo-500/20 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20"
+                onClick={() => setShowExecutionMonitor(!showExecutionMonitor)}
+              >
+                <Play className="h-3.5 w-3.5" />
+                {showExecutionMonitor ? "Close" : "Run"}
+              </Button>
+              <Button size="sm" className="h-8 gap-2 rounded-full" onClick={handleSaveVersion}>
+                <Save className="h-3.5 w-3.5" />
+                Save
+              </Button>
+            </div>
+          </GlassContainer>
         </div>
 
         <div
diff --git a/src/components/builder/builder-command-palette.tsx b/src/components/builder/builder-command-palette.tsx
@@ -65,7 +65,7 @@ export function BuilderCommandPalette({
       onOpenChange={onOpenChange}
       title="Command Palette"
       description="Search for a command to run..."
-      className="border-border/80"
+      className="border-border/80 bg-background/80 backdrop-blur-lg"
     >
       <CommandInput placeholder="Search commands..." />
       <CommandList>
diff --git a/src/components/builder/builder-context-menu.tsx b/src/components/builder/builder-context-menu.tsx
@@ -29,7 +29,7 @@ import {
 } from "lucide-react"
 import type { WorkflowNode } from "@/lib/workflow-types"
 
-const MENU_CONTENT = "border border-border/80 bg-popover text-popover-foreground shadow-none"
+const MENU_CONTENT = "border border-white/10 bg-popover text-popover-foreground shadow-none"
 
 export interface NodeContextMenuProps {
   onDuplicate: () => void
diff --git a/src/components/builder/execution-monitor.tsx b/src/components/builder/execution-monitor.tsx
@@ -7,6 +7,7 @@ import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import type { WorkflowExecution, ExecutionLog } from "@/lib/workflow-types"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { EmptyState } from "@/components/ui/empty-state"
 
 interface ExecutionMonitorProps {
   workflowId: string
@@ -100,7 +101,7 @@ export function ExecutionMonitor({
   if (!isOpen) return null
 
   return (
-    <div className="bg-card border-border fixed inset-y-0 right-0 z-50 flex w-96 flex-col border-l shadow-xl">
+    <div className="bg-card/95 border-border fixed inset-y-0 right-0 z-50 flex w-96 flex-col border-l shadow-xl backdrop-blur-md">
       {/* Header */}
       <div className="border-border flex h-14 items-center justify-between border-b px-4">
         <h2 className="font-semibold">Execution Monitor</h2>
@@ -190,8 +191,12 @@ export function ExecutionMonitor({
       )}
 
       {!execution && !isExecuting && (
-        <div className="text-muted-foreground flex flex-1 items-center justify-center text-sm">
-          Enter a message and click Run to start
+        <div className="flex flex-1 items-center justify-center p-6">
+          <EmptyState
+            icon={Play}
+            title="Ready to run"
+            description="Enter a message above and click Run to start the workflow."
+          />
         </div>
       )}
     </div>
diff --git a/src/components/builder/node-properties-panel.tsx b/src/components/builder/node-properties-panel.tsx
@@ -97,7 +97,7 @@ export function NodePropertiesPanel({
   return (
     <div
       className={cn(
-        "border-border/80 bg-card/80 relative z-40 border-l transition-all duration-300",
+        "border-border/80 bg-card/90 relative z-40 border-l backdrop-blur-md transition-all duration-300",
         isOpen ? "w-80" : "w-0",
       )}
     >
@@ -125,7 +125,7 @@ export function NodePropertiesPanel({
                     <Icon className="text-foreground h-5 w-5" />
                   </div>
                   <div>
-                    <h2 className="text-foreground font-semibold tracking-tight">
+                    <h2 className="text-foreground leading-snug font-semibold tracking-tight">
                       {node.data.label}
                     </h2>
                     <p className="text-muted-foreground/70 mt-0.5 text-[11px] font-medium tracking-widest uppercase">
diff --git a/src/components/builder/node-sidebar.tsx b/src/components/builder/node-sidebar.tsx
@@ -165,7 +165,7 @@ export function NodeSidebar({ isOpen, onToggle, onAddNode }: NodeSidebarProps) {
   return (
     <div
       className={cn(
-        "border-border/80 bg-card/80 relative z-40 border-r transition-all duration-300",
+        "border-border/80 bg-card/90 relative z-40 border-r backdrop-blur-md transition-all duration-300",
         isOpen ? "w-72" : "w-0",
       )}
     >
@@ -191,7 +191,7 @@ export function NodeSidebar({ isOpen, onToggle, onAddNode }: NodeSidebarProps) {
             className="flex h-full flex-col"
           >
             <div className="border-border/80 border-b p-5">
-              <h2 className="mb-4 text-lg font-semibold tracking-tight">Add Nodes</h2>
+              <h2 className="mb-4 text-lg leading-snug font-semibold tracking-tight">Add Nodes</h2>
               <div className="group relative">
                 <Search className="text-muted-foreground group-focus-within:text-primary absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transition-colors" />
                 <Input
diff --git a/src/components/builder/version-history-panel.tsx b/src/components/builder/version-history-panel.tsx
@@ -8,6 +8,7 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { cn } from "@/lib/utils"
 import type { WorkflowVersion } from "@/lib/workflow-types"
 import useSWR from "swr"
+import { EmptyState } from "@/components/ui/empty-state"
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
@@ -63,10 +64,10 @@ export function VersionHistoryPanel({
   if (!isOpen) return null
 
   return (
-    <div className="bg-card border-border fixed inset-y-0 right-0 z-40 flex w-80 flex-col border-l shadow-xl">
+    <div className="bg-card/95 border-border fixed inset-y-0 right-0 z-40 flex w-80 flex-col border-l shadow-xl backdrop-blur-md">
       <div className="border-border flex h-14 items-center justify-between border-b px-4">
         <div className="flex items-center gap-2">
-          <History className="h-4 w-4" />
+          <History className="text-muted-foreground h-4 w-4" />
           <h2 className="font-semibold">Version History</h2>
         </div>
         <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggle}>
@@ -179,9 +180,13 @@ export function VersionHistoryPanel({
           ))}
 
           {(!versions || versions.length === 0) && (
-            <div className="text-muted-foreground py-8 text-center text-sm">
-              No versions yet. Save your first version.
-            </div>
+            <EmptyState
+              icon={History}
+              title="No versions yet"
+              description="Save your first version to track changes."
+              actionLabel="Save Version"
+              onAction={handleCreateVersion}
+            />
           )}
         </div>
       </ScrollArea>

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ export function BuilderCommandPalette({`
`65`	`65`	`onOpenChange={onOpenChange}`
`66`	`66`	`title="Command Palette"`
`67`	`67`	`description="Search for a command to run..."`
`68`		`- className="border-border/80"`
	`68`	`+ className="border-border/80 bg-background/80 backdrop-blur-lg"`
`69`	`69`	`>`
`70`	`70`	`<CommandInput placeholder="Search commands..." />`
`71`	`71`	`<CommandList>`