Redesign experiment designer workspace and seed Bucknell data

- Overhauled designer UI: virtualized flow, slim action panel, improved
drag - Added Bucknell studies, users, and NAO plugin to seed-dev script
- Enhanced validation panel and inspector UX - Updated wizard-actions
plugin options formatting - Removed Minio from docker-compose for local
dev - Numerous UI and code quality improvements for experiment design

src/components/experiments/designer/layout/BottomStatusBar.tsx

@@ -131,7 +131,7 @@ export function BottomStatusBar({
             title="Validated (hash stable)"
           >
             <CheckCircle2 className="mr-1 h-3 w-3" />
-            Validated
+            <span className="hidden sm:inline">Validated</span>
           </Badge>
         );
       case "drift":
@@ -142,14 +142,14 @@ export function BottomStatusBar({
             title="Drift since last validation"
           >
             <AlertTriangle className="mr-1 h-3 w-3" />
-            Drift
+            <span className="hidden sm:inline">Drift</span>
           </Badge>
         );
       default:
         return (
           <Badge variant="outline" title="Not validated yet">
             <Hash className="mr-1 h-3 w-3" />
-            Unvalidated
+            <span className="hidden sm:inline">Unvalidated</span>
           </Badge>
         );
     }
@@ -162,7 +162,8 @@ export function BottomStatusBar({
         className="border-orange-300 text-orange-600 dark:text-orange-400"
         title="Unsaved changes"
       >
-        ● Unsaved
+        <AlertTriangle className="mr-1 h-3 w-3" />
+        <span className="hidden sm:inline">Unsaved</span>
       </Badge>
     ) : null;
 
@@ -208,7 +209,7 @@ export function BottomStatusBar({
   return (
     <div
       className={cn(
-        "border-border/60 bg-muted/40 backdrop-blur supports-[backdrop-filter]:bg-muted/30",
+        "border-border/60 bg-muted/40 supports-[backdrop-filter]:bg-muted/30 backdrop-blur",
         "flex h-10 w-full flex-shrink-0 items-center gap-3 border-t px-3 text-xs",
         "font-medium",
         className,
@@ -216,7 +217,7 @@ export function BottomStatusBar({
       aria-label="Designer status bar"
     >
       {/* Left Cluster: Validation & Hash */}
-      <div className="flex items-center gap-2">
+      <div className="flex min-w-0 items-center gap-2">
         {validationBadge}
         {unsavedBadge}
         {savingIndicator}
@@ -225,7 +226,7 @@ export function BottomStatusBar({
           className="flex items-center gap-1 font-mono text-[11px]"
           title="Current design hash"
         >
-          <Hash className="h-3 w-3 text-muted-foreground" />
+          <Hash className="text-muted-foreground h-3 w-3" />
           {shortHash}
           {lastPersistedShort && lastPersistedShort !== shortHash && (
             <span
@@ -239,20 +240,22 @@ export function BottomStatusBar({
       </div>
 
       {/* Middle Cluster: Aggregate Counts */}
-      <div className="flex items-center gap-3 text-muted-foreground">
+      <div className="text-muted-foreground flex min-w-0 items-center gap-3 truncate">
         <div
           className="flex items-center gap-1"
           title="Steps in current design"
         >
           <GitBranch className="h-3 w-3" />
-          {steps.length} steps
+          {steps.length}
+          <span className="hidden sm:inline"> steps</span>
         </div>
         <div
           className="flex items-center gap-1"
           title="Total actions across all steps"
         >
           <Sparkles className="h-3 w-3" />
-          {actionCount} actions
+          {actionCount}
+          <span className="hidden sm:inline"> actions</span>
         </div>
         <div
           className="hidden items-center gap-1 sm:flex"
@@ -270,7 +273,7 @@ export function BottomStatusBar({
           {versionStrategy.replace(/_/g, " ")}
         </div>
         <div
-          className="hidden items-center gap-1 text-[10px] font-normal tracking-wide text-muted-foreground/80 md:flex"
+          className="text-muted-foreground/80 hidden items-center gap-1 text-[10px] font-normal tracking-wide md:flex"
           title="Relative time since last save"
         >
           Saved {relSaved}
@@ -289,9 +292,10 @@ export function BottomStatusBar({
           disabled={!hasUnsaved && !pendingSave}
           onClick={handleSave}
           aria-label="Save (s)"
+          title="Save (s)"
         >
           <Save className="mr-1 h-3 w-3" />
-          Save
+          <span className="hidden sm:inline">Save</span>
         </Button>
         <Button
           variant="ghost"
@@ -300,14 +304,12 @@ export function BottomStatusBar({
           onClick={handleValidate}
           disabled={validating}
           aria-label="Validate (v)"
+          title="Validate (v)"
         >
-            <RefreshCw
-              className={cn(
-                "mr-1 h-3 w-3",
-                validating && "animate-spin",
-              )}
-            />
-          Validate
+          <RefreshCw
+            className={cn("mr-1 h-3 w-3", validating && "animate-spin")}
+          />
+          <span className="hidden sm:inline">Validate</span>
         </Button>
         <Button
           variant="ghost"
@@ -316,9 +318,10 @@ export function BottomStatusBar({
           onClick={handleExport}
           disabled={exporting}
           aria-label="Export (e)"
+          title="Export (e)"
         >
           <Download className="mr-1 h-3 w-3" />
-          Export
+          <span className="hidden sm:inline">Export</span>
         </Button>
         <Separator orientation="vertical" className="mx-1 h-4" />
         <Button
@@ -327,9 +330,10 @@ export function BottomStatusBar({
           className="h-7 px-2"
           onClick={handlePalette}
           aria-label="Command Palette (⌘K)"
+          title="Command Palette (⌘K)"
         >
           <Keyboard className="mr-1 h-3 w-3" />
-          Commands
+          <span className="hidden sm:inline">Commands</span>
         </Button>
       </div>
     </div>

src/components/experiments/designer/layout/PanelsContainer.tsx

@@ -115,17 +115,17 @@ export function PanelsContainer({
       if (!raw) return;
       const parsed = JSON.parse(raw) as PersistedLayout;
       if (typeof parsed.left === "number") setLeftWidth(parsed.left);
-      if (typeof parsed.right === "number") setRightWidth(parsed.right);
+      if (typeof parsed.right === "number")
+        setRightWidth(Math.max(parsed.right, minRightWidth));
       if (typeof parsed.leftCollapsed === "boolean") {
         setLeftCollapsed(parsed.leftCollapsed);
       }
-      if (typeof parsed.rightCollapsed === "boolean") {
-        setRightCollapsed(parsed.rightCollapsed);
-      }
+      // Always start with right panel visible to avoid hidden inspector state
+      setRightCollapsed(false);
     } catch {
       /* noop */
     }
-  }, [disablePersistence]);
+  }, [disablePersistence, minRightWidth]);
 
   const persist = useCallback(
     (next?: Partial<PersistedLayout>) => {
@@ -172,7 +172,7 @@ export function PanelsContainer({
         next = Math.max(minRightWidth, Math.min(maxRightWidth, next));
         if (next !== rightWidth) {
           if (frameReq.current) cancelAnimationFrame(frameReq.current);
-            frameReq.current = requestAnimationFrame(() => setRightWidth(next));
+          frameReq.current = requestAnimationFrame(() => setRightWidth(next));
         }
       }
     },
@@ -205,7 +205,14 @@ export function PanelsContainer({
       window.addEventListener("pointermove", onPointerMove);
       window.addEventListener("pointerup", endDrag);
     },
-    [leftWidth, rightWidth, leftCollapsed, rightCollapsed, onPointerMove, endDrag],
+    [
+      leftWidth,
+      rightWidth,
+      leftCollapsed,
+      rightCollapsed,
+      onPointerMove,
+      endDrag,
+    ],
   );
 
   /* ------------------------------------------------------------------------ */
@@ -275,7 +282,7 @@ export function PanelsContainer({
   return (
     <div
       className={cn(
-        "flex h-full w-full select-none overflow-hidden",
+        "flex h-full w-full overflow-hidden select-none",
         className,
       )}
       aria-label="Designer panel layout"
@@ -284,13 +291,15 @@ export function PanelsContainer({
       {hasLeft && (
         <div
           className={cn(
-            "relative flex h-full flex-shrink-0 flex-col border-r bg-background/50 transition-[width] duration-150",
-            leftCollapsed ? "w-0 border-r-0" : "w-[--panel-left-width]",
+            "bg-background/50 relative flex h-full flex-shrink-0 flex-col border-r transition-[width] duration-150",
+            leftCollapsed ? "w-0 border-r-0" : "w-[var(--panel-left-width)]",
           )}
           style={
             leftCollapsed
               ? undefined
-              : ({ ["--panel-left-width" as string]: `${leftWidth}px` } as React.CSSProperties)
+              : ({
+                  ["--panel-left-width" as string]: `${leftWidth}px`,
+                } as React.CSSProperties)
           }
         >
           {!leftCollapsed && (
@@ -303,30 +312,15 @@ export function PanelsContainer({
       {hasLeft && !leftCollapsed && (
         <button
           type="button"
-            aria-label="Resize left panel (Enter to toggle collapse)"
+          aria-label="Resize left panel (Enter to toggle collapse)"
           onPointerDown={(e) => startDrag("left", e)}
+          onDoubleClick={toggleLeft}
           onKeyDown={(e) => handleKeyResize("left", e)}
-          className="hover:bg-accent/40 focus-visible:ring-ring group relative z-10 h-full w-1 cursor-col-resize outline-none focus-visible:ring-2"
-        >
-          <span className="bg-border absolute inset-y-0 left-0 w-px" />
-          <span className="bg-border/0 group-hover:bg-border absolute inset-y-0 right-0 w-px transition-colors" />
-        </button>
+          className="hover:bg-accent/40 focus-visible:ring-ring relative z-10 h-full w-0 cursor-col-resize px-1 outline-none focus-visible:ring-2"
+        />
       )}
 
-      {/* Collapse / Expand Toggle (Left) */}
-      {hasLeft && (
-        <button
-          type="button"
-          aria-label={leftCollapsed ? "Expand left panel" : "Collapse left panel"}
-          onClick={toggleLeft}
-          className={cn(
-            "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-2 z-20 rounded border bg-background/95 px-1.5 py-0.5 text-[10px] font-medium shadow-sm outline-none focus-visible:ring-2",
-            leftCollapsed ? "left-1" : "left-2",
-          )}
-        >
-          {leftCollapsed ? "»" : "«"}
-        </button>
-      )}
+      {/* Left collapse toggle removed to prevent breadcrumb overlap */}
 
       {/* Center (Workspace) */}
       <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
@@ -337,49 +331,50 @@ export function PanelsContainer({
       {hasRight && !rightCollapsed && (
         <button
           type="button"
-            aria-label="Resize right panel (Enter to toggle collapse)"
+          aria-label="Resize right panel (Enter to toggle collapse)"
           onPointerDown={(e) => startDrag("right", e)}
+          onDoubleClick={toggleRight}
           onKeyDown={(e) => handleKeyResize("right", e)}
-          className="hover:bg-accent/40 focus-visible:ring-ring group relative z-10 h-full w-1 cursor-col-resize outline-none focus-visible:ring-2"
-        >
-          <span className="bg-border absolute inset-y-0 right-0 w-px" />
-          <span className="bg-border/0 group-hover:bg-border absolute inset-y-0 left-0 w-px transition-colors" />
-        </button>
+          className="hover:bg-accent/40 focus-visible:ring-ring relative z-10 h-full w-1 cursor-col-resize outline-none focus-visible:ring-2"
+        />
       )}
 
       {/* Right Panel */}
       {hasRight && (
         <div
           className={cn(
-            "relative flex h-full flex-shrink-0 flex-col border-l bg-background/50 transition-[width] duration-150",
-            rightCollapsed ? "w-0 border-l-0" : "w-[--panel-right-width]",
+            "bg-background/50 relative flex h-full flex-shrink-0 flex-col transition-[width] duration-150",
+            rightCollapsed ? "w-0" : "w-[var(--panel-right-width)]",
           )}
           style={
             rightCollapsed
               ? undefined
-              : ({ ["--panel-right-width" as string]: `${rightWidth}px` } as React.CSSProperties)
+              : ({
+                  ["--panel-right-width" as string]: `${rightWidth}px`,
+                } as React.CSSProperties)
           }
         >
           {!rightCollapsed && (
-            <div className="flex-1 overflow-hidden">{right}</div>
+            <div className="min-w-0 flex-1 overflow-hidden">{right}</div>
           )}
         </div>
       )}
 
-      {/* Collapse / Expand Toggle (Right) */}
+      {/* Minimal Right Toggle (top-right), non-intrusive like VSCode */}
       {hasRight && (
         <button
           type="button"
           aria-label={
-            rightCollapsed ? "Expand right panel" : "Collapse right panel"
+            rightCollapsed ? "Expand inspector" : "Collapse inspector"
           }
           onClick={toggleRight}
           className={cn(
-            "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-2 z-20 rounded border bg-background/95 px-1.5 py-0.5 text-[10px] font-medium shadow-sm outline-none focus-visible:ring-2",
-            rightCollapsed ? "right-1" : "right-2",
+            "text-muted-foreground hover:text-foreground absolute top-1 z-20 p-1 text-[10px]",
+            rightCollapsed ? "right-1" : "right-1",
           )}
+          title={rightCollapsed ? "Show inspector" : "Hide inspector"}
         >
-          {rightCollapsed ? "«" : "»"}
+          {rightCollapsed ? "◀" : "▶"}
         </button>
       )}
     </div>