Merge branch 'main' into ui-tweaks

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(dir \"C:\\Users\\Ben\\Desktop\\appdev\\git\\automaker\\apps\\app\\public\")"
+    ]
+  }
+}

.gitignore

@@ -12,4 +12,4 @@ dist/
 /.automaker/*
 /.automaker/
 
-/old
+/logs

apps/app/public/automaker.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" role="img" aria-label="Code icon">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#6B5BFF"></stop>
+      <stop offset="100%" stop-color="#2EC7FF"></stop>
+    </linearGradient>
+
+    <filter id="iconShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000000" flood-opacity="0.25"></feDropShadow>
+    </filter>
+  </defs>
+
+  <!-- Rounded square background -->
+  <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg)"></rect>
+
+  <!-- </> icon (slightly reduced overall size) -->
+  <g fill="none" stroke="#FFFFFF" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" filter="url(#iconShadow)">
+    <!-- Left bracket < -->
+    <path d="M92 92 L52 128 L92 164"></path>
+
+    <!-- Slash / -->
+    <path d="M144 72 L116 184"></path>
+
+    <!-- Right bracket > -->
+    <path d="M164 92 L204 128 L164 164"></path>
+  </g>
+</svg>

apps/app/src/app/globals.css

@@ -79,6 +79,19 @@
   --color-running-indicator: var(--running-indicator);
   --color-running-indicator-text: var(--running-indicator-text);
 
+  /* Status colors */
+  --color-status-success: var(--status-success);
+  --color-status-success-bg: var(--status-success-bg);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-bg: var(--status-warning-bg);
+  --color-status-error: var(--status-error);
+  --color-status-error-bg: var(--status-error-bg);
+  --color-status-info: var(--status-info);
+  --color-status-info-bg: var(--status-info-bg);
+  --color-status-backlog: var(--status-backlog);
+  --color-status-in-progress: var(--status-in-progress);
+  --color-status-waiting: var(--status-waiting);
+
   /* Border radius */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -142,6 +155,31 @@
   /* Running indicator - Purple */
   --running-indicator: oklch(0.55 0.25 265);
   --running-indicator-text: oklch(0.6 0.22 265);
+
+  /* Status colors - Light mode */
+  --status-success: oklch(0.55 0.2 140);
+  --status-success-bg: oklch(0.55 0.2 140 / 0.15);
+  --status-warning: oklch(0.7 0.15 70);
+  --status-warning-bg: oklch(0.7 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.22 25);
+  --status-error-bg: oklch(0.55 0.22 25 / 0.15);
+  --status-info: oklch(0.55 0.2 230);
+  --status-info-bg: oklch(0.55 0.2 230 / 0.15);
+  --status-backlog: oklch(0.5 0 0);
+  --status-in-progress: oklch(0.7 0.15 70);
+  --status-waiting: oklch(0.65 0.18 50);
+
+  /* Shadow tokens */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Transition tokens */
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease-out;
 }
 
 /* Apply dark mode immediately based on system preference (before JS runs) */
@@ -215,6 +253,26 @@
     /* Running indicator - Purple */
     --running-indicator: oklch(0.6 0.25 265);
     --running-indicator-text: oklch(0.65 0.22 265);
+
+    /* Status colors - Dark mode */
+    --status-success: oklch(0.65 0.2 140);
+    --status-success-bg: oklch(0.65 0.2 140 / 0.2);
+    --status-warning: oklch(0.75 0.15 70);
+    --status-warning-bg: oklch(0.75 0.15 70 / 0.2);
+    --status-error: oklch(0.65 0.22 25);
+    --status-error-bg: oklch(0.65 0.22 25 / 0.2);
+    --status-info: oklch(0.65 0.2 230);
+    --status-info-bg: oklch(0.65 0.2 230 / 0.2);
+    --status-backlog: oklch(0.6 0 0);
+    --status-in-progress: oklch(0.75 0.15 70);
+    --status-waiting: oklch(0.7 0.18 50);
+
+    /* Shadow tokens - darker for dark mode */
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -344,6 +402,26 @@
   /* Running indicator - Purple */
   --running-indicator: oklch(0.6 0.25 265);
   --running-indicator-text: oklch(0.65 0.22 265);
+
+  /* Status colors - Dark mode */
+  --status-success: oklch(0.65 0.2 140);
+  --status-success-bg: oklch(0.65 0.2 140 / 0.2);
+  --status-warning: oklch(0.75 0.15 70);
+  --status-warning-bg: oklch(0.75 0.15 70 / 0.2);
+  --status-error: oklch(0.65 0.22 25);
+  --status-error-bg: oklch(0.65 0.22 25 / 0.2);
+  --status-info: oklch(0.65 0.2 230);
+  --status-info-bg: oklch(0.65 0.2 230 / 0.2);
+  --status-backlog: oklch(0.6 0 0);
+  --status-in-progress: oklch(0.75 0.15 70);
+  --status-waiting: oklch(0.7 0.18 50);
+
+  /* Shadow tokens - darker for dark mode */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
 .retro {

apps/app/src/components/layout/sidebar.tsx

@@ -146,9 +146,11 @@ function SortableProjectItem({
       ref={setNodeRef}
       style={style}
       className={cn(
-        "flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer text-muted-foreground hover:text-foreground hover:bg-accent",
-        isDragging && "bg-accent shadow-lg",
-        isHighlighted && "bg-brand-500/10 text-foreground"
+        "flex items-center gap-2 px-2.5 py-2 rounded-lg cursor-pointer transition-all duration-200",
+        "text-muted-foreground hover:text-foreground hover:bg-accent/80",
+        isDragging && "bg-accent shadow-lg scale-[1.02]",
+        isHighlighted &&
+          "bg-brand-500/10 text-foreground ring-1 ring-brand-500/20"
       )}
       data-testid={`project-option-${project.id}`}
     >
@@ -156,20 +158,22 @@ function SortableProjectItem({
       <button
         {...attributes}
         {...listeners}
-        className="p-0.5 rounded hover:bg-sidebar-accent/20 cursor-grab active:cursor-grabbing"
+        className="p-0.5 rounded-md hover:bg-accent/50 cursor-grab active:cursor-grabbing transition-colors"
         data-testid={`project-drag-handle-${project.id}`}
         onClick={(e) => e.stopPropagation()}
       >
-        <GripVertical className="h-3.5 w-3.5 text-muted-foreground" />
+        <GripVertical className="h-3.5 w-3.5 text-muted-foreground/60" />
       </button>
 
       {/* Project content - clickable area */}
       <div
-        className="flex items-center gap-2 flex-1 min-w-0"
+        className="flex items-center gap-2.5 flex-1 min-w-0"
         onClick={() => onSelect(project)}
       >
-        <Folder className="h-4 w-4 shrink-0" />
-        <span className="flex-1 truncate text-sm">{project.name}</span>
+        <Folder className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <span className="flex-1 truncate text-sm font-medium">
+          {project.name}
+        </span>
         {currentProjectId === project.id && (
           <Check className="h-4 w-4 text-brand-500 shrink-0" />
         )}
@@ -1167,7 +1171,13 @@ export function Sidebar() {
   return (
     <aside
       className={cn(
-        "flex-shrink-0 border-r border-sidebar-border bg-sidebar backdrop-blur-md flex flex-col z-30 transition-all duration-300 relative",
+        "flex-shrink-0 flex flex-col z-30 relative",
+        // Glass morphism background with gradient
+        "bg-gradient-to-b from-sidebar/95 via-sidebar/85 to-sidebar/90 backdrop-blur-2xl",
+        // Premium border with subtle glow
+        "border-r border-border/60 shadow-[1px_0_20px_-5px_rgba(0,0,0,0.1)]",
+        // Smooth width transition
+        "transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
         sidebarOpen ? "w-16 lg:w-72" : "w-16"
       )}
       data-testid="sidebar"
@@ -1175,22 +1185,40 @@ export function Sidebar() {
       {/* Floating Collapse Toggle Button - Desktop only - At border intersection */}
       <button
         onClick={toggleSidebar}
-        className="hidden lg:flex absolute top-[68px] -right-3 z-9999 group/toggle items-center justify-center w-6 h-6 rounded-full bg-sidebar-accent border border-border text-muted-foreground hover:text-foreground hover:bg-accent hover:border-border transition-all shadow-lg titlebar-no-drag"
+        className={cn(
+          "hidden lg:flex absolute top-[68px] -right-3 z-9999",
+          "group/toggle items-center justify-center w-7 h-7 rounded-full",
+          // Glass morphism button
+          "bg-card/95 backdrop-blur-sm border border-border/80",
+          // Premium shadow with glow on hover
+          "shadow-lg shadow-black/5 hover:shadow-xl hover:shadow-brand-500/10",
+          "text-muted-foreground hover:text-brand-500 hover:bg-accent/80",
+          "hover:border-brand-500/30",
+          "transition-all duration-200 ease-out titlebar-no-drag",
+          "hover:scale-110 active:scale-90"
+        )}
         data-testid="sidebar-collapse-button"
       >
         {sidebarOpen ? (
-          <PanelLeftClose className="w-3.5 h-3.5 pointer-events-none" />
+          <PanelLeftClose className="w-3.5 h-3.5 pointer-events-none transition-transform duration-200" />
         ) : (
-          <PanelLeft className="w-3.5 h-3.5 pointer-events-none" />
+          <PanelLeft className="w-3.5 h-3.5 pointer-events-none transition-transform duration-200" />
         )}
         {/* Tooltip */}
         <div
-          className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover/toggle:opacity-100 transition-opacity whitespace-nowrap z-50 border border-border pointer-events-none"
+          className={cn(
+            "absolute left-full ml-3 px-2.5 py-1.5 rounded-lg",
+            "bg-popover text-popover-foreground text-xs font-medium",
+            "border border-border shadow-lg",
+            "opacity-0 group-hover/toggle:opacity-100 transition-all duration-200",
+            "whitespace-nowrap z-50 pointer-events-none",
+            "translate-x-1 group-hover/toggle:translate-x-0"
+          )}
           data-testid="sidebar-toggle-tooltip"
         >
           {sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}{" "}
           <span
-            className="ml-1 px-1 py-0.5 bg-brand-500/10 border border-brand-500/30 rounded text-[10px] font-mono text-brand-400/70"
+            className="ml-1.5 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground"
             data-testid="sidebar-toggle-shortcut"
           >
             {formatShortcut(shortcuts.toggleSidebar, true)}
@@ -1202,15 +1230,18 @@ export function Sidebar() {
         {/* Logo */}
         <div
           className={cn(
-            "h-20 border-b border-sidebar-border shrink-0 titlebar-drag-region",
-            sidebarOpen
-              ? "pt-8 px-3 lg:px-6 flex items-center justify-between"
-              : "pt-2 pb-2 px-3 flex flex-col items-center justify-center gap-2"
+            "h-20 shrink-0 titlebar-drag-region",
+            // Subtle bottom border with gradient fade
+            "border-b border-border/40",
+            // Background gradient for depth
+            "bg-gradient-to-b from-transparent to-background/5",
+            "flex items-center",
+            sidebarOpen ? "px-3 lg:px-5 justify-start" : "px-3 justify-center"
           )}
         >
           <div
             className={cn(
-              "flex items-center titlebar-no-drag cursor-pointer group",
+              "flex items-center gap-3 titlebar-no-drag cursor-pointer group",
               !sidebarOpen && "flex-col gap-1"
             )}
             onClick={() => setCurrentView("welcome")}
@@ -1218,28 +1249,137 @@ export function Sidebar() {
           >
             {!sidebarOpen ? (
               <div className="relative flex items-center justify-center rounded-lg">
-                <img
-                  src="/logo.png"
-                  alt="Automaker Logo"
-                  className="size-8 group-hover:rotate-12 transition-transform"
-                />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 256 256"
+                  role="img"
+                  aria-label="Automaker Logo"
+                  className="size-8 group-hover:rotate-12 transition-transform duration-300 ease-out"
+                >
+                  <defs>
+                    <linearGradient
+                      id="bg-collapsed"
+                      x1="0"
+                      y1="0"
+                      x2="256"
+                      y2="256"
+                      gradientUnits="userSpaceOnUse"
+                    >
+                      <stop
+                        offset="0%"
+                        style={{ stopColor: "var(--brand-400)" }}
+                      />
+                      <stop
+                        offset="100%"
+                        style={{ stopColor: "var(--brand-600)" }}
+                      />
+                    </linearGradient>
+                    <filter
+                      id="iconShadow-collapsed"
+                      x="-20%"
+                      y="-20%"
+                      width="140%"
+                      height="140%"
+                    >
+                      <feDropShadow
+                        dx="0"
+                        dy="4"
+                        stdDeviation="4"
+                        floodColor="#000000"
+                        floodOpacity="0.25"
+                      />
+                    </filter>
+                  </defs>
+                  <rect
+                    x="16"
+                    y="16"
+                    width="224"
+                    height="224"
+                    rx="56"
+                    fill="url(#bg-collapsed)"
+                  />
+                  <g
+                    fill="none"
+                    stroke="#FFFFFF"
+                    strokeWidth="20"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    filter="url(#iconShadow-collapsed)"
+                  >
+                    <path d="M92 92 L52 128 L92 164" />
+                    <path d="M144 72 L116 184" />
+                    <path d="M164 92 L204 128 L164 164" />
+                  </g>
+                </svg>
               </div>
             ) : (
-              <span
-                className={cn(
-                  "flex items-center font-bold text-sidebar-foreground text-base tracking-tight",
-                  "hidden lg:flex"
-                )}
-              >
-                <img
-                  src="/logo.png"
-                  alt="A"
-                  className="h-[1.8em] w-auto inline-block align-middle group-hover:rotate-12 transition-transform"
-                />
-                <span className="-ml-0.5">
-                  uto<span className="text-brand-500">maker</span>
+              <div className={cn("flex items-center gap-1", "hidden lg:flex")}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 256 256"
+                  role="img"
+                  aria-label="automaker"
+                  className="h-[36.8px] w-[36.8px] group-hover:rotate-12 transition-transform duration-300 ease-out"
+                >
+                  <defs>
+                    <linearGradient
+                      id="bg-expanded"
+                      x1="0"
+                      y1="0"
+                      x2="256"
+                      y2="256"
+                      gradientUnits="userSpaceOnUse"
+                    >
+                      <stop
+                        offset="0%"
+                        style={{ stopColor: "var(--brand-400)" }}
+                      />
+                      <stop
+                        offset="100%"
+                        style={{ stopColor: "var(--brand-600)" }}
+                      />
+                    </linearGradient>
+                    <filter
+                      id="iconShadow-expanded"
+                      x="-20%"
+                      y="-20%"
+                      width="140%"
+                      height="140%"
+                    >
+                      <feDropShadow
+                        dx="0"
+                        dy="4"
+                        stdDeviation="4"
+                        floodColor="#000000"
+                        floodOpacity="0.25"
+                      />
+                    </filter>
+                  </defs>
+                  <rect
+                    x="16"
+                    y="16"
+                    width="224"
+                    height="224"
+                    rx="56"
+                    fill="url(#bg-expanded)"
+                  />
+                  <g
+                    fill="none"
+                    stroke="#FFFFFF"
+                    strokeWidth="20"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    filter="url(#iconShadow-expanded)"
+                  >
+                    <path d="M92 92 L52 128 L92 164" />
+                    <path d="M144 72 L116 184" />
+                    <path d="M164 92 L204 128 L164 164" />
+                  </g>
+                </svg>
+                <span className="font-bold text-foreground text-[1.7rem] tracking-tight leading-none translate-y-[-2px]">
+                  automaker<span className="text-brand-500">.</span>
                 </span>
-              </span>
+              </div>
             )}
           </div>
           {/* Bug Report Button */}
@@ -1250,7 +1390,12 @@ export function Sidebar() {
                 "https://github.com/AutoMaker-Org/automaker/issues"
               );
             }}
-            className="titlebar-no-drag p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 transition-all"
+            className={cn(
+              "titlebar-no-drag p-1.5 rounded-lg absolute right-3",
+              "text-muted-foreground hover:text-foreground hover:bg-accent/80",
+              "transition-all duration-200 ease-out",
+              "hover:scale-105 active:scale-95"
+            )}
             title="Report Bug / Feature Request"
             data-testid="bug-report-link"
           >
@@ -1260,38 +1405,69 @@ export function Sidebar() {
 
         {/* Project Actions - Moved above project selector */}
         {sidebarOpen && (
-          <div className="flex items-center gap-2 titlebar-no-drag px-2 mt-3">
+          <div className="flex items-center gap-2.5 titlebar-no-drag px-3 mt-4">
             <button
               onClick={() => setShowNewProjectModal(true)}
-              className="group flex items-center justify-center flex-1 px-3 py-2.5 rounded-lg relative overflow-hidden transition-all text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border"
+              className={cn(
+                "group flex items-center justify-center flex-1 px-3 py-2.5 rounded-xl",
+                "relative overflow-hidden",
+                "text-muted-foreground hover:text-foreground",
+                // Glass background with gradient on hover
+                "bg-accent/20 hover:bg-gradient-to-br hover:from-brand-500/15 hover:to-brand-600/10",
+                "border border-border/40 hover:border-brand-500/30",
+                // Premium shadow
+                "shadow-sm hover:shadow-md hover:shadow-brand-500/5",
+                "transition-all duration-200 ease-out",
+                "hover:scale-[1.02] active:scale-[0.97]"
+              )}
               title="New Project"
               data-testid="new-project-button"
             >
-              <Plus className="w-4 h-4 shrink-0" />
+              <Plus className="w-4 h-4 shrink-0 transition-transform duration-200 group-hover:rotate-90 group-hover:text-brand-500" />
               <span className="ml-2 text-sm font-medium hidden lg:block whitespace-nowrap">
                 New
               </span>
             </button>
             <button
               onClick={handleOpenFolder}
-              className="group flex items-center justify-center flex-1 px-3 py-2.5 rounded-lg relative overflow-hidden transition-all text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border"
+              className={cn(
+                "group flex items-center justify-center flex-1 px-3 py-2.5 rounded-xl",
+                "relative overflow-hidden",
+                "text-muted-foreground hover:text-foreground",
+                // Glass background
+                "bg-accent/20 hover:bg-accent/40",
+                "border border-border/40 hover:border-border/60",
+                "shadow-sm hover:shadow-md",
+                "transition-all duration-200 ease-out",
+                "hover:scale-[1.02] active:scale-[0.97]"
+              )}
               title={`Open Folder (${shortcuts.openProject})`}
               data-testid="open-project-button"
             >
-              <FolderOpen className="w-4 h-4 shrink-0" />
-              <span className="hidden lg:flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70 ml-2">
+              <FolderOpen className="w-4 h-4 shrink-0 transition-transform duration-200 group-hover:scale-110" />
+              <span className="hidden lg:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md bg-muted/80 text-muted-foreground ml-2">
                 {formatShortcut(shortcuts.openProject, true)}
               </span>
             </button>
             <button
               onClick={() => setShowTrashDialog(true)}
-              className="group flex items-center justify-center px-3 h-[42px] rounded-lg relative overflow-hidden transition-all text-muted-foreground hover:text-primary hover:bg-destructive/10 border border-sidebar-border"
+              className={cn(
+                "group flex items-center justify-center px-3 h-[42px] rounded-xl",
+                "relative overflow-hidden",
+                "text-muted-foreground hover:text-destructive",
+                // Subtle background that turns red on hover
+                "bg-accent/20 hover:bg-destructive/15",
+                "border border-border/40 hover:border-destructive/40",
+                "shadow-sm hover:shadow-md hover:shadow-destructive/10",
+                "transition-all duration-200 ease-out",
+                "hover:scale-[1.02] active:scale-[0.97]"
+              )}
               title="Recycle Bin"
               data-testid="trash-button"
             >
-              <Recycle className="size-4 shrink-0" />
+              <Recycle className="size-4 shrink-0 transition-transform duration-200 group-hover:rotate-12" />
               {trashedProjects.length > 0 && (
-                <span className="absolute -top-[2px] -right-[2px] flex items-center justify-center w-5 h-5 text-[10px] font-medium rounded-full text-brand-500">
+                <span className="absolute -top-1.5 -right-1.5 flex items-center justify-center min-w-4 h-4 px-1 text-[9px] font-bold rounded-full bg-destructive text-destructive-foreground shadow-sm">
                   {trashedProjects.length > 9 ? "9+" : trashedProjects.length}
                 </span>
               )}
@@ -1301,56 +1477,80 @@ export function Sidebar() {
 
         {/* Project Selector with Cycle Buttons */}
         {sidebarOpen && projects.length > 0 && (
-          <div className="px-2 mt-3 flex items-center gap-1.5">
+          <div className="px-3 mt-3 flex items-center gap-2.5">
             <DropdownMenu
               open={isProjectPickerOpen}
               onOpenChange={setIsProjectPickerOpen}
             >
               <DropdownMenuTrigger asChild>
                 <button
-                  className="flex-1 flex items-center justify-between px-3 py-2.5 rounded-lg bg-sidebar-accent/10 border border-sidebar-border hover:bg-sidebar-accent/20 transition-all text-foreground titlebar-no-drag min-w-0"
+                  className={cn(
+                    "flex-1 flex items-center justify-between px-3.5 py-3 rounded-xl",
+                    // Premium glass background
+                    "bg-gradient-to-br from-accent/40 to-accent/20",
+                    "hover:from-accent/50 hover:to-accent/30",
+                    "border border-border/50 hover:border-border/70",
+                    // Subtle inner shadow
+                    "shadow-sm shadow-black/5",
+                    "text-foreground titlebar-no-drag min-w-0",
+                    "transition-all duration-200 ease-out",
+                    "hover:scale-[1.01] active:scale-[0.99]",
+                    isProjectPickerOpen &&
+                      "from-brand-500/10 to-brand-600/5 border-brand-500/30 ring-2 ring-brand-500/20 shadow-lg shadow-brand-500/5"
+                  )}
                   data-testid="project-selector"
                 >
-                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                  <div className="flex items-center gap-2.5 flex-1 min-w-0">
                     <Folder className="h-4 w-4 text-brand-500 shrink-0" />
                     <span className="text-sm font-medium truncate">
                       {currentProject?.name || "Select Project"}
                     </span>
                   </div>
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1.5">
                     <span
-                      className="hidden lg:flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70"
+                      className="hidden lg:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md bg-muted text-muted-foreground"
                       data-testid="project-picker-shortcut"
                     >
                       {formatShortcut(shortcuts.projectPicker, true)}
                     </span>
-                    <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+                    <ChevronDown
+                      className={cn(
+                        "h-4 w-4 text-muted-foreground shrink-0 transition-transform duration-200",
+                        isProjectPickerOpen && "rotate-180"
+                      )}
+                    />
                   </div>
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="w-64 bg-popover border-border p-1"
+                className="w-72 bg-popover/95 backdrop-blur-xl border-border shadow-xl p-1.5"
                 align="start"
                 data-testid="project-picker-dropdown"
               >
                 {/* Search input for type-ahead filtering */}
-                <div className="px-2 pb-2">
+                <div className="px-1 pb-2">
                   <div className="relative">
-                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                     <input
                       ref={projectSearchInputRef}
                       type="text"
                       placeholder="Search projects..."
                       value={projectSearchQuery}
                       onChange={(e) => setProjectSearchQuery(e.target.value)}
-                      className="w-full h-8 pl-7 pr-2 text-sm rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0"
+                      className={cn(
+                        "w-full h-9 pl-8 pr-3 text-sm rounded-lg",
+                        "border border-border bg-background/50",
+                        "text-foreground placeholder:text-muted-foreground",
+                        "focus:outline-none focus:ring-2 focus:ring-brand-500/30 focus:border-brand-500/50",
+                        "transition-all duration-200"
+                      )}
                       data-testid="project-search-input"
                     />
                   </div>
                 </div>
 
                 {filteredProjects.length === 0 ? (
-                  <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+                  <div className="px-2 py-6 text-center text-sm text-muted-foreground">
                     No projects found
                   </div>
                 ) : (
@@ -1363,26 +1563,32 @@ export function Sidebar() {
                       items={filteredProjects.map((p) => p.id)}
                       strategy={verticalListSortingStrategy}
                     >
-                      {filteredProjects.map((project, index) => (
-                        <SortableProjectItem
-                          key={project.id}
-                          project={project}
-                          currentProjectId={currentProject?.id}
-                          isHighlighted={index === selectedProjectIndex}
-                          onSelect={(p) => {
-                            setCurrentProject(p);
-                            setIsProjectPickerOpen(false);
-                          }}
-                        />
-                      ))}
+                      <div className="space-y-0.5 max-h-64 overflow-y-auto">
+                        {filteredProjects.map((project, index) => (
+                          <SortableProjectItem
+                            key={project.id}
+                            project={project}
+                            currentProjectId={currentProject?.id}
+                            isHighlighted={index === selectedProjectIndex}
+                            onSelect={(p) => {
+                              setCurrentProject(p);
+                              setIsProjectPickerOpen(false);
+                            }}
+                          />
+                        ))}
+                      </div>
                     </SortableContext>
                   </DndContext>
                 )}
 
                 {/* Keyboard hint */}
-                <div className="px-2 pt-2 mt-1 border-t border-border">
-                  <p className="text-[10px] text-muted-foreground text-center">
-                    ↑↓ navigate • Enter select • Esc close
+                <div className="px-2 pt-2 mt-1.5 border-t border-border/50">
+                  <p className="text-[10px] text-muted-foreground text-center tracking-wide">
+                    <span className="text-foreground/60">arrow</span> navigate{" "}
+                    <span className="mx-1 text-foreground/30">|</span>{" "}
+                    <span className="text-foreground/60">enter</span> select{" "}
+                    <span className="mx-1 text-foreground/30">|</span>{" "}
+                    <span className="text-foreground/60">esc</span> close
                   </p>
                 </div>
               </DropdownMenuContent>
@@ -1400,14 +1606,24 @@ export function Sidebar() {
               >
                 <DropdownMenuTrigger asChild>
                   <button
-                    className="hidden lg:flex items-center justify-center w-8 h-[42px] rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border transition-all titlebar-no-drag"
+                    className={cn(
+                      "hidden lg:flex items-center justify-center w-[42px] h-[42px] rounded-lg",
+                      "text-muted-foreground hover:text-foreground",
+                      "bg-transparent hover:bg-accent/60",
+                      "border border-border/50 hover:border-border",
+                      "transition-all duration-200 ease-out titlebar-no-drag",
+                      "hover:scale-[1.02] active:scale-[0.98]"
+                    )}
                     title="Project options"
                     data-testid="project-options-menu"
                   >
                     <MoreVertical className="w-4 h-4" />
                   </button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuContent
+                  align="end"
+                  className="w-56 bg-popover/95 backdrop-blur-xl"
+                >
                   {/* Project Theme Submenu */}
                   <DropdownMenuSub>
                     <DropdownMenuSubTrigger data-testid="project-theme-trigger">
@@ -1420,7 +1636,7 @@ export function Sidebar() {
                       )}
                     </DropdownMenuSubTrigger>
                     <DropdownMenuSubContent
-                      className="w-56"
+                      className="w-56 bg-popover/95 backdrop-blur-xl"
                       data-testid="project-theme-menu"
                       onPointerLeave={() => {
                         // Clear preview theme when leaving the dropdown
@@ -1561,7 +1777,7 @@ export function Sidebar() {
         )}
 
         {/* Nav Items - Scrollable */}
-        <nav className="flex-1 overflow-y-auto px-2 mt-4 pb-2">
+        <nav className="flex-1 overflow-y-auto px-3 mt-5 pb-2">
           {!currentProject && sidebarOpen ? (
             // Placeholder when no project is selected (only in expanded state)
             <div className="flex items-center justify-center h-full px-4">
@@ -1577,18 +1793,18 @@ export function Sidebar() {
               <div key={sectionIdx} className={sectionIdx > 0 ? "mt-6" : ""}>
                 {/* Section Label */}
                 {section.label && sidebarOpen && (
-                  <div className="hidden lg:block px-4 mb-2">
-                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                  <div className="hidden lg:block px-3 mb-2">
+                    <span className="text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-widest">
                       {section.label}
                     </span>
                   </div>
                 )}
                 {section.label && !sidebarOpen && (
-                  <div className="h-px bg-sidebar-border mx-2 mb-2"></div>
+                  <div className="h-px bg-border/30 mx-2 mb-3"></div>
                 )}
 
                 {/* Nav Items */}
-                <div className="space-y-1">
+                <div className="space-y-1.5">
                   {section.items.map((item) => {
                     const isActive = isActiveRoute(item.id);
                     const Icon = item.icon;
@@ -1598,29 +1814,43 @@ export function Sidebar() {
                         key={item.id}
                         onClick={() => setCurrentView(item.id as any)}
                         className={cn(
-                          "group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
+                          "group flex items-center w-full px-3 py-2.5 rounded-xl relative overflow-hidden titlebar-no-drag",
+                          "transition-all duration-200 ease-out",
                           isActive
-                            ? "bg-sidebar-accent/50 text-foreground border border-sidebar-border"
-                            : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50",
-                          sidebarOpen ? "justify-start" : "justify-center"
+                            ? [
+                                // Active: Premium gradient with glow
+                                "bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10",
+                                "text-foreground font-medium",
+                                "border border-brand-500/30",
+                                "shadow-md shadow-brand-500/10",
+                              ]
+                            : [
+                                // Inactive: Subtle hover state
+                                "text-muted-foreground hover:text-foreground",
+                                "hover:bg-accent/50",
+                                "border border-transparent hover:border-border/40",
+                                "hover:shadow-sm",
+                              ],
+                          sidebarOpen ? "justify-start" : "justify-center",
+                          "hover:scale-[1.02] active:scale-[0.97]"
                         )}
                         title={!sidebarOpen ? item.label : undefined}
                         data-testid={`nav-${item.id}`}
                       >
                         {isActive && (
-                          <div className="absolute inset-y-0 left-0 w-0.5 bg-brand-500 rounded-l-md"></div>
+                          <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
                         )}
                         <Icon
                           className={cn(
-                            "w-4 h-4 shrink-0 transition-colors",
+                            "w-[18px] h-[18px] shrink-0 transition-all duration-200",
                             isActive
-                              ? "text-brand-500"
-                              : "group-hover:text-brand-400"
+                              ? "text-brand-500 drop-shadow-sm"
+                              : "group-hover:text-brand-400 group-hover:scale-110"
                           )}
                         />
                         <span
                           className={cn(
-                            "ml-2.5 font-medium text-sm flex-1 text-left",
+                            "ml-3 font-medium text-sm flex-1 text-left",
                             sidebarOpen ? "hidden lg:block" : "hidden"
                           )}
                         >
@@ -1629,9 +1859,10 @@ export function Sidebar() {
                         {item.shortcut && sidebarOpen && (
                           <span
                             className={cn(
-                              "hidden lg:flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70",
-                              isActive &&
-                                "bg-brand-500/20 border-brand-500/50 text-brand-400"
+                              "hidden lg:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md transition-all duration-200",
+                              isActive
+                                ? "bg-brand-500/20 text-brand-400"
+                                : "bg-muted text-muted-foreground group-hover:bg-accent"
                             )}
                             data-testid={`shortcut-${item.id}`}
                           >
@@ -1641,10 +1872,22 @@ export function Sidebar() {
                         {/* Tooltip for collapsed state */}
                         {!sidebarOpen && (
                           <span
-                            className="absolute left-full ml-2 px-2 py-1 bg-zinc-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-zinc-700"
+                            className={cn(
+                              "absolute left-full ml-3 px-2.5 py-1.5 rounded-lg",
+                              "bg-popover text-popover-foreground text-xs font-medium",
+                              "border border-border shadow-lg",
+                              "opacity-0 group-hover:opacity-100",
+                              "transition-all duration-200 whitespace-nowrap z-50",
+                              "translate-x-1 group-hover:translate-x-0"
+                            )}
                             data-testid={`sidebar-tooltip-${item.label.toLowerCase()}`}
                           >
                             {item.label}
+                            {item.shortcut && (
+                              <span className="ml-2 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                                {formatShortcut(item.shortcut, true)}
+                              </span>
+                            )}
                           </span>
                         )}
                       </button>
@@ -1658,7 +1901,15 @@ export function Sidebar() {
       </div>
 
       {/* Bottom Section - Running Agents / Bug Report / Settings */}
-      <div className="border-t border-sidebar-border bg-sidebar-accent/10 shrink-0">
+      <div
+        className={cn(
+          "shrink-0",
+          // Top border with gradient fade
+          "border-t border-border/40",
+          // Elevated background for visual separation
+          "bg-gradient-to-t from-background/10 via-sidebar/50 to-transparent"
+        )}
+      >
         {/* Course Promo Badge */}
         <CoursePromoBadge sidebarOpen={sidebarOpen} />
         {/* Wiki Link */}
@@ -1667,36 +1918,57 @@ export function Sidebar() {
             <button
               onClick={() => setCurrentView("wiki")}
               className={cn(
-                "group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
+                "group flex items-center w-full px-3 py-2.5 rounded-xl relative overflow-hidden titlebar-no-drag",
+                "transition-all duration-200 ease-out",
                 isActiveRoute("wiki")
-                  ? "bg-sidebar-accent/50 text-foreground border border-sidebar-border"
-                  : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50",
-                sidebarOpen ? "justify-start" : "justify-center"
+                  ? [
+                      "bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10",
+                      "text-foreground font-medium",
+                      "border border-brand-500/30",
+                      "shadow-md shadow-brand-500/10",
+                    ]
+                  : [
+                      "text-muted-foreground hover:text-foreground",
+                      "hover:bg-accent/50",
+                      "border border-transparent hover:border-border/40",
+                      "hover:shadow-sm",
+                    ],
+                sidebarOpen ? "justify-start" : "justify-center",
+                "hover:scale-[1.02] active:scale-[0.97]"
               )}
               title={!sidebarOpen ? "Wiki" : undefined}
               data-testid="wiki-link"
             >
               {isActiveRoute("wiki") && (
-                <div className="absolute inset-y-0 left-0 w-0.5 bg-brand-500 rounded-l-md"></div>
+                <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
               )}
               <BookOpen
                 className={cn(
-                  "w-4 h-4 shrink-0 transition-colors",
+                  "w-[18px] h-[18px] shrink-0 transition-all duration-200",
                   isActiveRoute("wiki")
-                    ? "text-brand-500"
-                    : "group-hover:text-brand-400"
+                    ? "text-brand-500 drop-shadow-sm"
+                    : "group-hover:text-brand-400 group-hover:scale-110"
                 )}
               />
               <span
                 className={cn(
-                  "ml-2.5 font-medium text-sm flex-1 text-left",
+                  "ml-3 font-medium text-sm flex-1 text-left",
                   sidebarOpen ? "hidden lg:block" : "hidden"
                 )}
               >
                 Wiki
               </span>
               {!sidebarOpen && (
-                <span className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-border">
+                <span
+                  className={cn(
+                    "absolute left-full ml-3 px-2.5 py-1.5 rounded-lg",
+                    "bg-popover text-popover-foreground text-xs font-medium",
+                    "border border-border shadow-lg",
+                    "opacity-0 group-hover:opacity-100",
+                    "transition-all duration-200 whitespace-nowrap z-50",
+                    "translate-x-1 group-hover:translate-x-0"
+                  )}
+                >
                   Wiki
                 </span>
               )}
@@ -1709,31 +1981,48 @@ export function Sidebar() {
             <button
               onClick={() => setCurrentView("running-agents")}
               className={cn(
-                "group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
+                "group flex items-center w-full px-3 py-2.5 rounded-xl relative overflow-hidden titlebar-no-drag",
+                "transition-all duration-200 ease-out",
                 isActiveRoute("running-agents")
-                  ? "bg-sidebar-accent/50 text-foreground border border-sidebar-border"
-                  : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50",
-                sidebarOpen ? "justify-start" : "justify-center"
+                  ? [
+                      "bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10",
+                      "text-foreground font-medium",
+                      "border border-brand-500/30",
+                      "shadow-md shadow-brand-500/10",
+                    ]
+                  : [
+                      "text-muted-foreground hover:text-foreground",
+                      "hover:bg-accent/50",
+                      "border border-transparent hover:border-border/40",
+                      "hover:shadow-sm",
+                    ],
+                sidebarOpen ? "justify-start" : "justify-center",
+                "hover:scale-[1.02] active:scale-[0.97]"
               )}
               title={!sidebarOpen ? "Running Agents" : undefined}
               data-testid="running-agents-link"
             >
               {isActiveRoute("running-agents") && (
-                <div className="absolute inset-y-0 left-0 w-0.5 bg-brand-500 rounded-l-md"></div>
+                <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
               )}
               <div className="relative">
                 <Activity
                   className={cn(
-                    "w-4 h-4 shrink-0 transition-colors",
+                    "w-[18px] h-[18px] shrink-0 transition-all duration-200",
                     isActiveRoute("running-agents")
-                      ? "text-brand-500"
-                      : "group-hover:text-brand-400"
+                      ? "text-brand-500 drop-shadow-sm"
+                      : "group-hover:text-brand-400 group-hover:scale-110"
                   )}
                 />
                 {/* Running agents count badge - shown in collapsed state */}
                 {!sidebarOpen && runningAgentsCount > 0 && (
                   <span
-                    className="absolute -top-1.5 -right-1.5 flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-semibold rounded-full bg-brand-500 text-white"
+                    className={cn(
+                      "absolute -top-1.5 -right-1.5 flex items-center justify-center",
+                      "min-w-4 h-4 px-1 text-[9px] font-bold rounded-full",
+                      "bg-brand-500 text-white shadow-sm",
+                      "animate-in fade-in zoom-in duration-200"
+                    )}
                     data-testid="running-agents-count-collapsed"
                   >
                     {runningAgentsCount > 99 ? "99" : runningAgentsCount}
@@ -1742,7 +2031,7 @@ export function Sidebar() {
               </div>
               <span
                 className={cn(
-                  "ml-2.5 font-medium text-sm flex-1 text-left",
+                  "ml-3 font-medium text-sm flex-1 text-left",
                   sidebarOpen ? "hidden lg:block" : "hidden"
                 )}
               >
@@ -1752,7 +2041,10 @@ export function Sidebar() {
               {sidebarOpen && runningAgentsCount > 0 && (
                 <span
                   className={cn(
-                    "hidden lg:flex items-center justify-center min-w-6 h-6 px-1.5 text-xs font-semibold rounded-full bg-brand-500 text-white",
+                    "hidden lg:flex items-center justify-center",
+                    "min-w-6 h-6 px-1.5 text-xs font-semibold rounded-full",
+                    "bg-brand-500 text-white shadow-sm",
+                    "animate-in fade-in zoom-in duration-200",
                     isActiveRoute("running-agents") && "bg-brand-600"
                   )}
                   data-testid="running-agents-count"
@@ -1761,8 +2053,22 @@ export function Sidebar() {
                 </span>
               )}
               {!sidebarOpen && (
-                <span className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-border">
+                <span
+                  className={cn(
+                    "absolute left-full ml-3 px-2.5 py-1.5 rounded-lg",
+                    "bg-popover text-popover-foreground text-xs font-medium",
+                    "border border-border shadow-lg",
+                    "opacity-0 group-hover:opacity-100",
+                    "transition-all duration-200 whitespace-nowrap z-50",
+                    "translate-x-1 group-hover:translate-x-0"
+                  )}
+                >
                   Running Agents
+                  {runningAgentsCount > 0 && (
+                    <span className="ml-2 px-1.5 py-0.5 bg-brand-500 text-white rounded-full text-[10px] font-semibold">
+                      {runningAgentsCount}
+                    </span>
+                  )}
                 </span>
               )}
             </button>
@@ -1773,29 +2079,41 @@ export function Sidebar() {
           <button
             onClick={() => setCurrentView("settings")}
             className={cn(
-              "group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
+              "group flex items-center w-full px-3 py-2.5 rounded-xl relative overflow-hidden titlebar-no-drag",
+              "transition-all duration-200 ease-out",
               isActiveRoute("settings")
-                ? "bg-sidebar-accent/50 text-foreground border border-sidebar-border"
-                : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50",
-              sidebarOpen ? "justify-start" : "justify-center"
+                ? [
+                    "bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10",
+                    "text-foreground font-medium",
+                    "border border-brand-500/30",
+                    "shadow-md shadow-brand-500/10",
+                  ]
+                : [
+                    "text-muted-foreground hover:text-foreground",
+                    "hover:bg-accent/50",
+                    "border border-transparent hover:border-border/40",
+                    "hover:shadow-sm",
+                  ],
+              sidebarOpen ? "justify-start" : "justify-center",
+              "hover:scale-[1.02] active:scale-[0.97]"
             )}
             title={!sidebarOpen ? "Settings" : undefined}
             data-testid="settings-button"
           >
             {isActiveRoute("settings") && (
-              <div className="absolute inset-y-0 left-0 w-0.5 bg-brand-500 rounded-l-md"></div>
+              <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full shadow-sm shadow-brand-500/50"></div>
             )}
             <Settings
               className={cn(
-                "w-4 h-4 shrink-0 transition-colors",
+                "w-[18px] h-[18px] shrink-0 transition-all duration-200",
                 isActiveRoute("settings")
-                  ? "text-brand-500"
-                  : "group-hover:text-brand-400"
+                  ? "text-brand-500 drop-shadow-sm"
+                  : "group-hover:text-brand-400 group-hover:rotate-90 group-hover:scale-110"
               )}
             />
             <span
               className={cn(
-                "ml-2.5 font-medium text-sm flex-1 text-left",
+                "ml-3 font-medium text-sm flex-1 text-left",
                 sidebarOpen ? "hidden lg:block" : "hidden"
               )}
             >
@@ -1804,9 +2122,10 @@ export function Sidebar() {
             {sidebarOpen && (
               <span
                 className={cn(
-                  "hidden lg:flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70",
-                  isActiveRoute("settings") &&
-                    "bg-brand-500/20 border-brand-500/50 text-brand-400"
+                  "hidden lg:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md transition-all duration-200",
+                  isActiveRoute("settings")
+                    ? "bg-brand-500/20 text-brand-400"
+                    : "bg-muted text-muted-foreground group-hover:bg-accent"
                 )}
                 data-testid="shortcut-settings"
               >
@@ -1814,15 +2133,27 @@ export function Sidebar() {
               </span>
             )}
             {!sidebarOpen && (
-              <span className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-border">
+              <span
+                className={cn(
+                  "absolute left-full ml-3 px-2.5 py-1.5 rounded-lg",
+                  "bg-popover text-popover-foreground text-xs font-medium",
+                  "border border-border shadow-lg",
+                  "opacity-0 group-hover:opacity-100",
+                  "transition-all duration-200 whitespace-nowrap z-50",
+                  "translate-x-1 group-hover:translate-x-0"
+                )}
+              >
                 Settings
+                <span className="ml-2 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                  {formatShortcut(shortcuts.settings, true)}
+                </span>
               </span>
             )}
           </button>
         </div>
       </div>
       <Dialog open={showTrashDialog} onOpenChange={setShowTrashDialog}>
-        <DialogContent className="bg-popover border-border max-w-2xl">
+        <DialogContent className="bg-popover/95 backdrop-blur-xl border-border max-w-2xl">
           <DialogHeader>
             <DialogTitle>Recycle Bin</DialogTitle>
             <DialogDescription className="text-muted-foreground">
@@ -1840,7 +2171,7 @@ export function Sidebar() {
               {trashedProjects.map((project) => (
                 <div
                   key={project.id}
-                  className="flex items-start justify-between gap-3 rounded-md border border-sidebar-border bg-sidebar-accent/20 p-3"
+                  className="flex items-start justify-between gap-3 rounded-lg border border-border bg-card/50 p-4"
                 >
                   <div className="space-y-1 min-w-0">
                     <p className="text-sm font-medium text-foreground truncate">
@@ -1931,7 +2262,7 @@ export function Sidebar() {
           }
         }}
       >
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-2xl bg-popover/95 backdrop-blur-xl">
           <DialogHeader>
             <div className="flex items-center gap-3 mb-2">
               <div className="flex items-center justify-center w-12 h-12 rounded-full bg-brand-500/10 border border-brand-500/20">
@@ -1960,7 +2291,7 @@ export function Sidebar() {
             </div>
 
             {/* Benefits list */}
-            <div className="space-y-3 rounded-lg bg-muted/50 border border-border p-4">
+            <div className="space-y-3 rounded-xl bg-muted/30 border border-border/50 p-4">
               <div className="flex items-start gap-3">
                 <CheckCircle2 className="w-5 h-5 text-brand-500 shrink-0 mt-0.5" />
                 <div>
@@ -2000,9 +2331,9 @@ export function Sidebar() {
             </div>
 
             {/* Info box */}
-            <div className="rounded-lg bg-blue-500/10 border border-blue-500/20 p-3">
-              <p className="text-xs text-blue-400 leading-relaxed">
-                <strong className="text-blue-300">Tip:</strong> You can always
+            <div className="rounded-xl bg-brand-500/5 border border-brand-500/10 p-3">
+              <p className="text-xs text-muted-foreground leading-relaxed">
+                <strong className="text-foreground">Tip:</strong> You can always
                 generate or edit your app_spec.txt later from the Spec Editor in
                 the sidebar.
               </p>

apps/app/src/components/session-manager.tsx

@@ -320,7 +320,7 @@ export function SessionManager({
     activeTab === "active" ? activeSessions : archivedSessions;
 
   return (
-    <Card className="h-full flex flex-col">
+    <Card className="h-full flex flex-col rounded-none">
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between mb-4">
           <CardTitle>Agent Sessions</CardTitle>

apps/app/src/components/ui/badge.tsx

@@ -4,21 +4,42 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 shadow-sm",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/90",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+          "border-transparent bg-destructive text-white hover:bg-destructive/90",
+        outline:
+          "text-foreground border-border bg-background/50 backdrop-blur-sm",
+        // Semantic status variants using CSS variables
+        success:
+          "border-transparent bg-[var(--status-success-bg)] text-[var(--status-success)] border border-[var(--status-success)]/30",
+        warning:
+          "border-transparent bg-[var(--status-warning-bg)] text-[var(--status-warning)] border border-[var(--status-warning)]/30",
+        error:
+          "border-transparent bg-[var(--status-error-bg)] text-[var(--status-error)] border border-[var(--status-error)]/30",
+        info:
+          "border-transparent bg-[var(--status-info-bg)] text-[var(--status-info)] border border-[var(--status-info)]/30",
+        // Muted variants for subtle indication
+        muted:
+          "border-border/50 bg-muted/50 text-muted-foreground",
+        brand:
+          "border-transparent bg-brand-500/15 text-brand-500 border border-brand-500/30",
+      },
+      size: {
+        default: "px-2.5 py-0.5 text-xs",
+        sm: "px-2 py-0.5 text-[10px]",
+        lg: "px-3 py-1 text-sm",
       },
     },
     defaultVariants: {
       variant: "default",
+      size: "default",
     },
   }
 );
@@ -27,9 +48,9 @@ export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
   );
 }
 

apps/app/src/components/ui/button.tsx

@@ -1,24 +1,26 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.98]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md hover:shadow-primary/25",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-sm hover:bg-destructive/90 hover:shadow-md hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary underline-offset-4 hover:underline active:scale-100",
         "animated-outline":
           "relative overflow-hidden rounded-xl hover:bg-transparent shadow-none",
       },
@@ -38,17 +40,32 @@ const buttonVariants = cva(
   }
 );
 
+// Loading spinner component
+function ButtonSpinner({ className }: { className?: string }) {
+  return (
+    <Loader2
+      className={cn("size-4 animate-spin", className)}
+      aria-hidden="true"
+    />
+  );
+}
+
 function Button({
   className,
   variant,
   size,
   asChild = false,
+  loading = false,
+  disabled,
   children,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    loading?: boolean;
   }) {
+  const isDisabled = disabled || loading;
+
   // Special handling for animated-outline variant
   if (variant === "animated-outline" && !asChild) {
     return (
@@ -59,20 +76,22 @@ function Button({
           className
         )}
         data-slot="button"
+        disabled={isDisabled}
         {...props}
       >
-        {/* Animated rotating gradient border */}
-        <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] animated-outline-gradient" />
+        {/* Animated rotating gradient border - smoother animation */}
+        <span className="absolute inset-[-1000%] animate-[spin_3s_linear_infinite] animated-outline-gradient opacity-75 transition-opacity duration-300 group-hover:opacity-100" />
 
         {/* Inner content container */}
         <span
           className={cn(
-            "animated-outline-inner inline-flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] px-4 py-1 text-sm font-medium backdrop-blur-3xl transition-all",
+            "animated-outline-inner inline-flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] px-4 py-1 text-sm font-medium backdrop-blur-3xl transition-all duration-200",
             size === "sm" && "px-3 text-xs gap-1.5",
             size === "lg" && "px-8",
             size === "icon" && "p-0 gap-0"
           )}
         >
+          {loading && <ButtonSpinner />}
           {children}
         </span>
       </button>
@@ -85,8 +104,10 @@ function Button({
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
+      disabled={isDisabled}
       {...props}
     >
+      {loading && <ButtonSpinner />}
       {children}
     </Comp>
   );

apps/app/src/components/ui/card.tsx

@@ -2,12 +2,20 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+interface CardProps extends React.ComponentProps<"div"> {
+  gradient?: boolean;
+}
+
+function Card({ className, gradient = false, ...props }: CardProps) {
   return (
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-white/10 backdrop-blur-sm py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-white/10 backdrop-blur-md py-6",
+        // Premium layered shadow
+        "shadow-[0_1px_2px_rgba(0,0,0,0.05),0_4px_6px_rgba(0,0,0,0.05),0_10px_20px_rgba(0,0,0,0.04)]",
+        // Gradient border option
+        gradient && "relative before:absolute before:inset-0 before:rounded-xl before:p-[1px] before:bg-gradient-to-br before:from-white/20 before:to-transparent before:pointer-events-none before:-z-10",
         className
       )}
       {...props}
@@ -20,7 +28,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       )}
       {...props}
@@ -32,7 +40,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn("leading-none font-semibold tracking-tight", className)}
       {...props}
     />
   );
@@ -42,7 +50,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
       {...props}
     />
   );
@@ -75,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      className={cn("flex items-center gap-3 px-6 [.border-t]:pt-6", className)}
       {...props}
     />
   );

apps/app/src/components/ui/dialog.tsx

@@ -38,7 +38,10 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "duration-200",
         className
       )}
       {...props}
@@ -66,7 +69,17 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 max-h-[calc(100vh-4rem)]",
+          "fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+          "flex flex-col w-full max-w-[calc(100%-2rem)] max-h-[calc(100vh-4rem)]",
+          "bg-card border border-border rounded-xl shadow-2xl",
+          // Premium shadow
+          "shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]",
+          // Animations - smoother with scale
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]",
+          "duration-200",
           compact
             ? "max-w-4xl p-4"
             : !hasCustomMaxWidth
@@ -81,8 +94,13 @@ function DialogContent({
           <DialogPrimitive.Close
             data-slot="dialog-close"
             className={cn(
-              "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute rounded-xs opacity-70 transition-opacity cursor-pointer hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              compact ? "top-2 right-3" : "top-3 right-5"
+              "absolute rounded-lg opacity-60 transition-all duration-200 cursor-pointer",
+              "hover:opacity-100 hover:bg-muted",
+              "focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
+              "disabled:pointer-events-none disabled:cursor-not-allowed",
+              "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+              "p-1.5",
+              compact ? "top-2 right-3" : "top-4 right-4"
             )}
           >
             <XIcon />
@@ -109,7 +127,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-6",
         className
       )}
       {...props}
@@ -124,7 +142,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
       {...props}
     />
   );
@@ -137,7 +155,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
       {...props}
     />
   );

apps/app/src/components/ui/input.tsx

@@ -2,20 +2,64 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
+interface InputProps extends React.ComponentProps<"input"> {
+  startAddon?: React.ReactNode;
+  endAddon?: React.ReactNode;
+}
+
+function Input({ className, type, startAddon, endAddon, ...props }: InputProps) {
+  const hasAddons = startAddon || endAddon;
+
+  const inputElement = (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-input border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground bg-input border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        // Inner shadow for depth
+        "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
+        // Animated focus ring
+        "transition-[color,box-shadow,border-color] duration-200 ease-out",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        // Adjust padding for addons
+        startAddon && "pl-0",
+        endAddon && "pr-0",
+        hasAddons && "border-0 shadow-none focus-visible:ring-0",
         className
       )}
       {...props}
     />
-  )
+  );
+
+  if (!hasAddons) {
+    return inputElement;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center h-9 w-full rounded-md border border-input bg-input shadow-xs",
+        "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
+        "transition-[box-shadow,border-color] duration-200 ease-out",
+        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+        "has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed",
+        "has-[input[aria-invalid]]:ring-destructive/20 has-[input[aria-invalid]]:border-destructive"
+      )}
+    >
+      {startAddon && (
+        <span className="flex items-center justify-center px-3 text-muted-foreground text-sm">
+          {startAddon}
+        </span>
+      )}
+      {inputElement}
+      {endAddon && (
+        <span className="flex items-center justify-center px-3 text-muted-foreground text-sm">
+          {endAddon}
+        </span>
+      )}
+    </div>
+  );
 }
 
 export { Input }

apps/app/src/components/ui/textarea.tsx

@@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
+        "placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
+        // Inner shadow for depth
+        "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
+        // Animated focus ring
+        "transition-[color,box-shadow,border-color] duration-200 ease-out",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className

apps/app/src/components/ui/tooltip.tsx

@@ -14,13 +14,23 @@ const TooltipTrigger = TooltipPrimitive.Trigger
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 6, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 overflow-hidden rounded-lg border border-border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground",
+        // Premium shadow
+        "shadow-lg shadow-black/10",
+        // Faster, snappier animations
+        "animate-in fade-in-0 zoom-in-95 duration-150",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-100",
+        // Slide from edge
+        "data-[side=bottom]:slide-in-from-top-1",
+        "data-[side=left]:slide-in-from-right-1",
+        "data-[side=right]:slide-in-from-left-1",
+        "data-[side=top]:slide-in-from-bottom-1",
         className
       )}
       {...props}

apps/app/src/components/views/agent-view.tsx

@@ -2,7 +2,6 @@
 
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { useAppStore } from "@/store/app-store";
-import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ImageDropZone } from "@/components/ui/image-drop-zone";
@@ -222,11 +221,6 @@ export function AgentView() {
       e.stopPropagation();
       if (isProcessing || !isConnected) return;
 
-      console.log(
-        "[agent-view] Drag enter types:",
-        Array.from(e.dataTransfer.types)
-      );
-
       // Check if dragged items contain files
       if (e.dataTransfer.types.includes("Files")) {
         setIsDragOver(true);
@@ -262,39 +256,21 @@ export function AgentView() {
 
       if (isProcessing || !isConnected) return;
 
-      console.log("[agent-view] Drop event:", {
-        filesCount: e.dataTransfer.files.length,
-        itemsCount: e.dataTransfer.items.length,
-        types: Array.from(e.dataTransfer.types),
-      });
-
       // Check if we have files
       const files = e.dataTransfer.files;
       if (files && files.length > 0) {
-        console.log("[agent-view] Processing files from dataTransfer.files");
         processDroppedFiles(files);
         return;
       }
 
       // Handle file paths (from screenshots or other sources)
-      // This is common on macOS when dragging screenshots
       const items = e.dataTransfer.items;
       if (items && items.length > 0) {
-        console.log("[agent-view] Processing items");
         for (let i = 0; i < items.length; i++) {
           const item = items[i];
-          console.log(`[agent-view] Item ${i}:`, {
-            kind: item.kind,
-            type: item.type,
-          });
           if (item.kind === "file") {
             const file = item.getAsFile();
             if (file) {
-              console.log("[agent-view] Got file from item:", {
-                name: file.name,
-                type: file.type,
-                size: file.size,
-              });
               const dataTransfer = new DataTransfer();
               dataTransfer.items.add(file);
               processDroppedFiles(dataTransfer.files);
@@ -315,10 +291,6 @@ export function AgentView() {
 
         for (let i = 0; i < items.length; i++) {
           const item = items[i];
-          console.log("[agent-view] Paste item:", {
-            kind: item.kind,
-            type: item.type,
-          });
 
           if (item.kind === "file") {
             const file = item.getAsFile();
@@ -330,10 +302,6 @@ export function AgentView() {
         }
 
         if (files.length > 0) {
-          console.log(
-            "[agent-view] Processing pasted image files:",
-            files.length
-          );
           const dataTransfer = new DataTransfer();
           files.forEach((file) => dataTransfer.items.add(file));
           await processDroppedFiles(dataTransfer.files);
@@ -442,13 +410,15 @@ export function AgentView() {
   if (!currentProject) {
     return (
       <div
-        className="flex-1 flex items-center justify-center"
+        className="flex-1 flex items-center justify-center bg-background"
         data-testid="agent-view-no-project"
       >
-        <div className="text-center">
-          <Sparkles className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-          <h2 className="text-xl font-semibold mb-2">No Project Selected</h2>
-          <p className="text-muted-foreground">
+        <div className="text-center max-w-md">
+          <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
+            <Sparkles className="w-8 h-8 text-primary" />
+          </div>
+          <h2 className="text-xl font-semibold mb-3 text-foreground">No Project Selected</h2>
+          <p className="text-muted-foreground leading-relaxed">
             Open or create a project to start working with the AI agent.
           </p>
         </div>
@@ -472,12 +442,12 @@ export function AgentView() {
 
   return (
     <div
-      className="flex-1 flex overflow-hidden content-bg"
+      className="flex-1 flex overflow-hidden bg-background"
       data-testid="agent-view"
     >
       {/* Session Manager Sidebar */}
       {showSessionManager && currentProject && (
-        <div className="w-80 border-r flex-shrink-0">
+        <div className="w-80 border-r border-border flex-shrink-0 bg-card/50">
           <SessionManager
             currentSessionId={currentSessionId}
             onSelectSession={handleSelectSession}
@@ -491,13 +461,13 @@ export function AgentView() {
       {/* Chat Area */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
-          <div className="flex items-center gap-3">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-card/50 backdrop-blur-sm">
+          <div className="flex items-center gap-4">
             <Button
               variant="ghost"
               size="sm"
               onClick={() => setShowSessionManager(!showSessionManager)}
-              className="h-8 w-8 p-0"
+              className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
             >
               {showSessionManager ? (
                 <PanelLeftClose className="w-4 h-4" />
@@ -505,26 +475,28 @@ export function AgentView() {
                 <PanelLeft className="w-4 h-4" />
               )}
             </Button>
-            <Bot className="w-5 h-5 text-primary" />
+            <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
+              <Bot className="w-5 h-5 text-primary" />
+            </div>
             <div>
-              <h1 className="text-xl font-bold">AI Agent</h1>
+              <h1 className="text-lg font-semibold text-foreground">AI Agent</h1>
               <p className="text-sm text-muted-foreground">
                 {currentProject.name}
-                {currentSessionId && !isConnected && " · Connecting..."}
+                {currentSessionId && !isConnected && " - Connecting..."}
               </p>
             </div>
           </div>
 
           {/* Status indicators & actions */}
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
             {currentTool && (
-              <div className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
-                <Wrench className="w-3 h-3" />
-                <span>{currentTool}</span>
+              <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full border border-border">
+                <Wrench className="w-3 h-3 text-primary" />
+                <span className="font-medium">{currentTool}</span>
               </div>
             )}
             {agentError && (
-              <span className="text-xs text-destructive">{agentError}</span>
+              <span className="text-xs text-destructive font-medium">{agentError}</span>
             )}
             {currentSessionId && messages.length > 0 && (
               <Button
@@ -532,8 +504,9 @@ export function AgentView() {
                 size="sm"
                 onClick={handleClearChat}
                 disabled={isProcessing}
+                className="text-muted-foreground hover:text-foreground"
               >
-                <Trash2 className="w-4 h-4 mr-1" />
+                <Trash2 className="w-4 h-4 mr-2" />
                 Clear
               </Button>
             )}
@@ -543,22 +516,25 @@ export function AgentView() {
         {/* Messages */}
         {!currentSessionId ? (
           <div
-            className="flex-1 flex items-center justify-center"
+            className="flex-1 flex items-center justify-center bg-background"
             data-testid="no-session-placeholder"
           >
-            <div className="text-center">
-              <Bot className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
-              <h2 className="text-lg font-semibold mb-2">
+            <div className="text-center max-w-md">
+              <div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mx-auto mb-6">
+                <Bot className="w-8 h-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-lg font-semibold mb-3 text-foreground">
                 No Session Selected
               </h2>
-              <p className="text-sm text-muted-foreground mb-4">
-                Create or select a session to start chatting
+              <p className="text-sm text-muted-foreground mb-6 leading-relaxed">
+                Create or select a session to start chatting with the AI agent
               </p>
               <Button
                 onClick={() => setShowSessionManager(true)}
                 variant="outline"
+                className="gap-2"
               >
-                <PanelLeft className="w-4 h-4 mr-2" />
+                <PanelLeft className="w-4 h-4" />
                 {showSessionManager ? "View" : "Show"} Sessions
               </Button>
             </div>
@@ -566,7 +542,7 @@ export function AgentView() {
         ) : (
           <div
             ref={messagesContainerRef}
-            className="flex-1 overflow-y-auto p-4 space-y-4"
+            className="flex-1 overflow-y-auto px-6 py-6 space-y-6 scroll-smooth"
             data-testid="message-list"
             onScroll={handleScroll}
           >
@@ -574,95 +550,156 @@ export function AgentView() {
               <div
                 key={message.id}
                 className={cn(
-                  "flex gap-3",
-                  message.role === "user" && "flex-row-reverse"
+                  "flex gap-4 max-w-4xl",
+                  message.role === "user" ? "flex-row-reverse ml-auto" : ""
                 )}
               >
+                {/* Avatar */}
                 <div
                   className={cn(
-                    "w-8 h-8 rounded-full flex items-center justify-center shrink-0",
-                    message.role === "assistant" ? "bg-primary/10" : "bg-muted"
+                    "w-9 h-9 rounded-xl flex items-center justify-center shrink-0 shadow-sm",
+                    message.role === "assistant"
+                      ? "bg-primary/10 ring-1 ring-primary/20"
+                      : "bg-muted ring-1 ring-border"
                   )}
                 >
                   {message.role === "assistant" ? (
                     <Bot className="w-4 h-4 text-primary" />
                   ) : (
-                    <User className="w-4 h-4" />
+                    <User className="w-4 h-4 text-muted-foreground" />
                   )}
                 </div>
-                <Card
+
+                {/* Message Bubble */}
+                <div
                   className={cn(
-                    "max-w-[80%] py-0",
+                    "flex-1 max-w-[85%] rounded-2xl px-4 py-3 shadow-sm",
                     message.role === "user"
-                      ? "bg-transparent border border-primary text-foreground"
-                      : "border-l-4 border-primary bg-card"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-card border border-border"
                   )}
                 >
-                  <CardContent className="px-3 py-2">
-                    {message.role === "assistant" ? (
-                      <Markdown className="text-sm text-primary prose-headings:text-primary prose-strong:text-primary prose-code:text-primary">
-                        {message.content}
-                      </Markdown>
-                    ) : (
-                      <p className="text-sm whitespace-pre-wrap">
-                        {message.content}
-                      </p>
-                    )}
-                    <p
-                      className={cn(
-                        "text-xs mt-1",
-                        message.role === "user"
-                          ? "text-muted-foreground"
-                          : "text-primary/70"
-                      )}
-                    >
-                      {new Date(message.timestamp).toLocaleTimeString()}
+                  {message.role === "assistant" ? (
+                    <Markdown className="text-sm text-foreground prose-p:leading-relaxed prose-headings:text-foreground prose-strong:text-foreground prose-code:text-primary prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded">
+                      {message.content}
+                    </Markdown>
+                  ) : (
+                    <p className="text-sm whitespace-pre-wrap leading-relaxed">
+                      {message.content}
                     </p>
-                  </CardContent>
-                </Card>
+                  )}
+                  <p
+                    className={cn(
+                      "text-[11px] mt-2 font-medium",
+                      message.role === "user"
+                        ? "text-primary-foreground/70"
+                        : "text-muted-foreground"
+                    )}
+                  >
+                    {new Date(message.timestamp).toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                </div>
               </div>
             ))}
 
+            {/* Thinking Indicator */}
             {isProcessing && (
-              <div className="flex gap-3">
-                <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+              <div className="flex gap-4 max-w-4xl">
+                <div className="w-9 h-9 rounded-xl bg-primary/10 ring-1 ring-primary/20 flex items-center justify-center shrink-0 shadow-sm">
                   <Bot className="w-4 h-4 text-primary" />
                 </div>
-                <Card className="border-l-4 border-primary bg-card py-0">
-                  <CardContent className="p-3">
-                    <div className="flex items-center gap-2">
-                      <Loader2 className="w-4 h-4 animate-spin text-primary" />
-                      <span className="text-sm text-primary">
-                        Thinking...
-                      </span>
+                <div className="bg-card border border-border rounded-2xl px-4 py-3 shadow-sm">
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-1">
+                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "0ms" }} />
+                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "150ms" }} />
+                      <span className="w-2 h-2 rounded-full bg-primary animate-pulse" style={{ animationDelay: "300ms" }} />
                     </div>
-                  </CardContent>
-                </Card>
+                    <span className="text-sm text-muted-foreground">
+                      Thinking...
+                    </span>
+                  </div>
+                </div>
               </div>
             )}
           </div>
         )}
 
-        {/* Input */}
+        {/* Input Area */}
         {currentSessionId && (
-          <div className="border-t border-border p-4 space-y-3 bg-background">
+          <div className="border-t border-border p-4 bg-card/50 backdrop-blur-sm">
             {/* Image Drop Zone (when visible) */}
             {showImageDropZone && (
               <ImageDropZone
                 onImagesSelected={handleImagesSelected}
                 images={selectedImages}
                 maxFiles={5}
-                className="mb-3"
+                className="mb-4"
                 disabled={isProcessing || !isConnected}
               />
             )}
 
-            {/* Text Input and Controls - with drag and drop support */}
+            {/* Selected Images Preview */}
+            {selectedImages.length > 0 && (
+              <div className="mb-4 space-y-2">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-medium text-foreground">
+                    {selectedImages.length} image
+                    {selectedImages.length > 1 ? "s" : ""} attached
+                  </p>
+                  <button
+                    onClick={() => setSelectedImages([])}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    disabled={isProcessing}
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {selectedImages.map((image) => (
+                    <div
+                      key={image.id}
+                      className="group relative rounded-lg border border-border bg-muted/30 p-2 flex items-center gap-2 hover:border-primary/30 transition-colors"
+                    >
+                      {/* Image thumbnail */}
+                      <div className="w-8 h-8 rounded-md overflow-hidden bg-muted flex-shrink-0">
+                        <img
+                          src={image.data}
+                          alt={image.filename}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                      {/* Image info */}
+                      <div className="min-w-0 flex-1">
+                        <p className="text-xs font-medium text-foreground truncate max-w-24">
+                          {image.filename}
+                        </p>
+                        <p className="text-[10px] text-muted-foreground">
+                          {formatFileSize(image.size)}
+                        </p>
+                      </div>
+                      {/* Remove button */}
+                      <button
+                        onClick={() => removeImage(image.id)}
+                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                        disabled={isProcessing}
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Text Input and Controls */}
             <div
               className={cn(
-                "flex gap-2 transition-all duration-200 rounded-lg",
-                isDragOver &&
-                  "bg-primary/10 ring-2 ring-primary ring-offset-2 ring-offset-background"
+                "flex gap-2 transition-all duration-200 rounded-xl p-1",
+                isDragOver && "bg-primary/5 ring-2 ring-primary/30"
               )}
               onDragEnter={handleDragEnter}
               onDragLeave={handleDragLeave}
@@ -684,21 +721,19 @@ export function AgentView() {
                   disabled={isProcessing || !isConnected}
                   data-testid="agent-input"
                   className={cn(
-                    "bg-input border-border",
-                    selectedImages.length > 0 &&
-                      "border-primary/50 bg-primary/5",
-                    isDragOver &&
-                      "border-primary bg-primary/10"
+                    "h-11 bg-background border-border rounded-xl pl-4 pr-20 text-sm transition-all",
+                    "focus:ring-2 focus:ring-primary/20 focus:border-primary/50",
+                    selectedImages.length > 0 && "border-primary/30",
+                    isDragOver && "border-primary bg-primary/5"
                   )}
                 />
                 {selectedImages.length > 0 && !isDragOver && (
-                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-xs text-primary-foreground bg-primary px-2 py-1 rounded">
-                    {selectedImages.length} image
-                    {selectedImages.length > 1 ? "s" : ""}
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full font-medium">
+                    {selectedImages.length} image{selectedImages.length > 1 ? "s" : ""}
                   </div>
                 )}
                 {isDragOver && (
-                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-xs text-primary-foreground bg-primary px-2 py-1 rounded flex items-center gap-1">
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5 text-xs text-primary font-medium">
                     <Paperclip className="w-3 h-3" />
                     Drop here
                   </div>
@@ -708,13 +743,13 @@ export function AgentView() {
               {/* Image Attachment Button */}
               <Button
                 variant="outline"
-                size="default"
+                size="icon"
                 onClick={toggleImageDropZone}
                 disabled={isProcessing || !isConnected}
                 className={cn(
-                  showImageDropZone &&
-                    "bg-primary/20 text-primary border-primary",
-                  selectedImages.length > 0 && "border-primary"
+                  "h-11 w-11 rounded-xl border-border",
+                  showImageDropZone && "bg-primary/10 text-primary border-primary/30",
+                  selectedImages.length > 0 && "border-primary/30 text-primary"
                 )}
                 title="Attach images"
               >
@@ -729,64 +764,17 @@ export function AgentView() {
                   isProcessing ||
                   !isConnected
                 }
+                className="h-11 px-4 rounded-xl"
                 data-testid="send-message"
               >
                 <Send className="w-4 h-4" />
               </Button>
             </div>
 
-            {/* Selected Images Preview */}
-            {selectedImages.length > 0 && (
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <p className="text-xs font-medium text-foreground">
-                    {selectedImages.length} image
-                    {selectedImages.length > 1 ? "s" : ""} attached
-                  </p>
-                  <button
-                    onClick={() => setSelectedImages([])}
-                    className="text-xs text-muted-foreground hover:text-foreground"
-                    disabled={isProcessing}
-                  >
-                    Clear all
-                  </button>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  {selectedImages.map((image) => (
-                    <div
-                      key={image.id}
-                      className="relative group rounded-md border border-muted bg-muted/50 p-2 flex items-center space-x-2"
-                    >
-                      {/* Image thumbnail */}
-                      <div className="w-8 h-8 rounded overflow-hidden bg-muted flex-shrink-0">
-                        <img
-                          src={image.data}
-                          alt={image.filename}
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-                      {/* Image info */}
-                      <div className="min-w-0 flex-1">
-                        <p className="text-xs font-medium text-foreground truncate">
-                          {image.filename}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatFileSize(image.size)}
-                        </p>
-                      </div>
-                      {/* Remove button */}
-                      <button
-                        onClick={() => removeImage(image.id)}
-                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive hover:text-destructive-foreground text-muted-foreground"
-                        disabled={isProcessing}
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+            {/* Keyboard hint */}
+            <p className="text-[11px] text-muted-foreground mt-2 text-center">
+              Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">Enter</kbd> to send
+            </p>
           </div>
         )}
       </div>

apps/app/src/components/views/board-view.tsx

@@ -112,11 +112,11 @@ import { useWindowState } from "@/hooks/use-window-state";
 
 type ColumnId = Feature["status"];
 
-const COLUMNS: { id: ColumnId; title: string; color: string }[] = [
-  { id: "backlog", title: "Backlog", color: "bg-zinc-500" },
-  { id: "in_progress", title: "In Progress", color: "bg-yellow-500" },
-  { id: "waiting_approval", title: "Waiting Approval", color: "bg-orange-500" },
-  { id: "verified", title: "Verified", color: "bg-green-500" },
+const COLUMNS: { id: ColumnId; title: string; colorClass: string }[] = [
+  { id: "backlog", title: "Backlog", colorClass: "bg-[var(--status-backlog)]" },
+  { id: "in_progress", title: "In Progress", colorClass: "bg-[var(--status-in-progress)]" },
+  { id: "waiting_approval", title: "Waiting Approval", colorClass: "bg-[var(--status-waiting)]" },
+  { id: "verified", title: "Verified", colorClass: "bg-[var(--status-success)]" },
 ];
 
 type ModelOption = {
@@ -2109,7 +2109,7 @@ export function BoardView() {
                 onDragStart={handleDragStart}
                 onDragEnd={handleDragEnd}
               >
-                <div className="flex gap-4 h-full min-w-max">
+                <div className="flex gap-5 h-full min-w-max py-1">
                   {COLUMNS.map((column) => {
                     const columnFeatures = getColumnFeatures(column.id);
                     return (
@@ -2117,7 +2117,7 @@ export function BoardView() {
                         key={column.id}
                         id={column.id}
                         title={column.title}
-                        color={column.color}
+                        colorClass={column.colorClass}
                         count={columnFeatures.length}
                         opacity={backgroundSettings.columnOpacity}
                         showBorder={backgroundSettings.columnBorderEnabled}
@@ -2238,14 +2238,17 @@ export function BoardView() {
                   })}
                 </div>
 
-                <DragOverlay>
+                <DragOverlay dropAnimation={{
+                  duration: 200,
+                  easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+                }}>
                   {activeFeature && (
-                    <Card className="w-72 opacity-90 rotate-3 shadow-xl">
+                    <Card className="w-72 rotate-2 shadow-2xl shadow-black/25 border-primary/50 bg-card/95 backdrop-blur-sm transition-transform">
                       <CardHeader className="p-3">
-                        <CardTitle className="text-sm">
+                        <CardTitle className="text-sm font-medium line-clamp-2">
                           {activeFeature.description}
                         </CardTitle>
-                        <CardDescription className="text-xs">
+                        <CardDescription className="text-xs text-muted-foreground">
                           {activeFeature.category}
                         </CardDescription>
                       </CardHeader>

apps/app/src/components/views/context-view.tsx

@@ -393,6 +393,7 @@ export function ContextView() {
         className="flex-1 flex overflow-hidden"
         onDrop={handleDrop}
         onDragOver={handleDragOver}
+        data-testid="context-drop-zone"
       >
         {/* Left Panel - File List */}
         <div className="w-64 border-r border-border flex flex-col overflow-hidden">

apps/app/src/components/views/kanban-card.tsx

@@ -57,7 +57,6 @@ import {
   ChevronDown,
   ChevronUp,
   Brain,
-  Flag,
   Wand2,
   Archive,
 } from "lucide-react";
@@ -92,33 +91,6 @@ function formatThinkingLevel(level: ThinkingLevel | undefined): string {
   return labels[level];
 }
 
-/**
- * Formats priority for display
- */
-function formatPriority(priority: number | undefined): string | null {
-  if (!priority) return null;
-  const labels: Record<number, string> = {
-    1: "High",
-    2: "Medium",
-    3: "Low",
-  };
-  return labels[priority] || null;
-}
-
-/**
- * Gets priority badge color classes
- */
-function getPriorityBadgeClasses(priority: number | undefined): string {
-  if (priority === 1) {
-    return "bg-red-500/20 border border-red-500/50 text-red-400";
-  } else if (priority === 2) {
-    return "bg-yellow-500/20 border border-yellow-500/50 text-yellow-400";
-  } else if (priority === 3) {
-    return "bg-blue-500/20 border border-blue-500/50 text-blue-400";
-  }
-  return "";
-}
-
 interface KanbanCardProps {
   feature: Feature;
   onEdit: () => void;
@@ -138,17 +110,11 @@ interface KanbanCardProps {
   hasContext?: boolean;
   isCurrentAutoTask?: boolean;
   shortcutKey?: string;
-  /** Context content for extracting progress info */
   contextContent?: string;
-  /** Feature summary from agent completion */
   summary?: string;
-  /** Opacity percentage (0-100) */
   opacity?: number;
-  /** Whether to use glassmorphism (backdrop-blur) effect */
   glassmorphism?: boolean;
-  /** Whether to show card borders */
   cardBorderEnabled?: boolean;
-  /** Card border opacity percentage (0-100) */
   cardBorderOpacity?: number;
 }
 
@@ -186,16 +152,13 @@ export const KanbanCard = memo(function KanbanCard({
   const [currentTime, setCurrentTime] = useState(() => Date.now());
   const { kanbanCardDetailLevel } = useAppStore();
 
-  // Check if feature has worktree
   const hasWorktree = !!feature.branchName;
 
-  // Helper functions to check what should be shown based on detail level
   const showSteps =
     kanbanCardDetailLevel === "standard" ||
     kanbanCardDetailLevel === "detailed";
   const showAgentInfo = kanbanCardDetailLevel === "detailed";
 
-  // Helper to check if "just finished" badge should be shown (within 2 minutes)
   const isJustFinished = useMemo(() => {
     if (
       !feature.justFinishedAt ||
@@ -205,26 +168,23 @@ export const KanbanCard = memo(function KanbanCard({
       return false;
     }
     const finishedTime = new Date(feature.justFinishedAt).getTime();
-    const twoMinutes = 2 * 60 * 1000; // 2 minutes in milliseconds
+    const twoMinutes = 2 * 60 * 1000;
     return currentTime - finishedTime < twoMinutes;
   }, [feature.justFinishedAt, feature.status, feature.error, currentTime]);
 
-  // Update current time periodically to check if badge should be hidden
   useEffect(() => {
     if (!feature.justFinishedAt || feature.status !== "waiting_approval") {
       return;
     }
 
     const finishedTime = new Date(feature.justFinishedAt).getTime();
-    const twoMinutes = 2 * 60 * 1000; // 2 minutes in milliseconds
+    const twoMinutes = 2 * 60 * 1000;
     const timeRemaining = twoMinutes - (currentTime - finishedTime);
 
     if (timeRemaining <= 0) {
-      // Already past 2 minutes
       return;
     }
 
-    // Update time every second to check if 2 minutes have passed
     const interval = setInterval(() => {
       setCurrentTime(Date.now());
     }, 1000);
@@ -232,45 +192,14 @@ export const KanbanCard = memo(function KanbanCard({
     return () => clearInterval(interval);
   }, [feature.justFinishedAt, feature.status, currentTime]);
 
-  // Calculate priority badge position
-  const priorityLabel = formatPriority(feature.priority);
-  const hasPriority = !!priorityLabel;
-
-  // Calculate top position for badges (stacking vertically)
-  const getBadgeTopPosition = (badgeIndex: number) => {
-    return badgeIndex === 0
-      ? "top-2"
-      : badgeIndex === 1
-      ? "top-8"
-      : badgeIndex === 2
-      ? "top-14"
-      : "top-20";
-  };
-
-  // Determine badge positions (must be after isJustFinished is defined)
-  let badgeIndex = 0;
-  const priorityBadgeIndex = hasPriority ? badgeIndex++ : -1;
-  const skipTestsBadgeIndex =
-    feature.skipTests && !feature.error ? badgeIndex++ : -1;
-  const errorBadgeIndex = feature.error ? badgeIndex++ : -1;
-  const justFinishedBadgeIndex = isJustFinished ? badgeIndex++ : -1;
-  const branchBadgeIndex =
-    hasWorktree && !isCurrentAutoTask ? badgeIndex++ : -1;
-
-  // Total number of badges displayed
-  const totalBadgeCount = badgeIndex;
-
-  // Load context file for in_progress, waiting_approval, and verified features
   useEffect(() => {
     const loadContext = async () => {
-      // Use provided context or load from file
       if (contextContent) {
         const info = parseAgentContext(contextContent);
         setAgentInfo(info);
         return;
       }
 
-      // Only load for non-backlog features
       if (feature.status === "backlog") {
         setAgentInfo(null);
         return;
@@ -282,7 +211,6 @@ export const KanbanCard = memo(function KanbanCard({
         const currentProject = (window as any).__currentProject;
         if (!currentProject?.path) return;
 
-        // Use features API to get agent output
         if (api.features) {
           const result = await api.features.getAgentOutput(
             currentProject.path,
@@ -294,7 +222,6 @@ export const KanbanCard = memo(function KanbanCard({
             setAgentInfo(info);
           }
         } else {
-          // Fallback to direct file read for backward compatibility
           const contextPath = `${currentProject.path}/.automaker/features/${feature.id}/agent-output.md`;
           const result = await api.readFile(contextPath);
 
@@ -304,14 +231,12 @@ export const KanbanCard = memo(function KanbanCard({
           }
         }
       } catch {
-        // Context file might not exist
         console.debug("[KanbanCard] No context file for feature:", feature.id);
       }
     };
 
     loadContext();
 
-    // Reload context periodically while feature is running
     if (isCurrentAutoTask) {
       const interval = setInterval(loadContext, 3000);
       return () => clearInterval(interval);
@@ -327,12 +252,6 @@ export const KanbanCard = memo(function KanbanCard({
     onDelete();
   };
 
-  // Dragging logic:
-  // - Backlog items can always be dragged
-  // - skipTests items can be dragged even when in_progress or verified (unless currently running)
-  // - waiting_approval items can always be dragged (to allow manual verification via drag)
-  // - verified items can always be dragged (to allow moving back to waiting_approval or backlog)
-  // - Non-skipTests (TDD) items in progress cannot be dragged (they are running)
   const isDraggable =
     feature.status === "backlog" ||
     feature.status === "waiting_approval" ||
@@ -356,15 +275,11 @@ export const KanbanCard = memo(function KanbanCard({
     opacity: isDragging ? 0.5 : undefined,
   };
 
-  // Calculate border style based on enabled state and opacity
   const borderStyle: React.CSSProperties = { ...style };
   if (!cardBorderEnabled) {
     (borderStyle as Record<string, string>).borderWidth = "0px";
     (borderStyle as Record<string, string>).borderColor = "transparent";
   } else if (cardBorderOpacity !== 100) {
-    // Apply border opacity using color-mix to blend the border color with transparent
-    // The --border variable uses oklch format, so we use color-mix in oklch space
-    // Ensure border width is set (1px is the default Tailwind border width)
     (borderStyle as Record<string, string>).borderWidth = "1px";
     (
       borderStyle as Record<string, string>
@@ -376,28 +291,27 @@ export const KanbanCard = memo(function KanbanCard({
       ref={setNodeRef}
       style={isCurrentAutoTask ? style : borderStyle}
       className={cn(
-        "cursor-grab active:cursor-grabbing transition-all relative kanban-card-content select-none",
-        // Apply border class when border is enabled and opacity is 100%
-        // When opacity is not 100%, we use inline styles for border color
-        // Skip border classes when animated border is active (isCurrentAutoTask)
+        "cursor-grab active:cursor-grabbing relative kanban-card-content select-none",
+        "transition-all duration-200 ease-out",
+        // Premium shadow system
+        "shadow-sm hover:shadow-md hover:shadow-black/10",
+        // Subtle lift on hover
+        "hover:-translate-y-0.5",
         !isCurrentAutoTask &&
           cardBorderEnabled &&
           cardBorderOpacity === 100 &&
-          "border-border",
-        // When border is enabled but opacity is not 100%, we still need border width
+          "border-border/50",
         !isCurrentAutoTask &&
           cardBorderEnabled &&
           cardBorderOpacity !== 100 &&
           "border",
-        // Remove default background when using opacity overlay
         !isDragging && "bg-transparent",
-        // Remove default backdrop-blur-sm from Card component when glassmorphism is disabled
         !glassmorphism && "backdrop-blur-[0px]!",
-        isDragging && "scale-105 shadow-lg",
-        // Error state border (only when not in progress)
+        isDragging && "scale-105 shadow-xl shadow-black/20 rotate-1",
+        // Error state - using CSS variable
         feature.error &&
           !isCurrentAutoTask &&
-          "border-red-500 border-2 shadow-red-500/30 shadow-lg",
+          "border-[var(--status-error)] border-2 shadow-[var(--status-error-bg)] shadow-lg",
         !isDraggable && "cursor-default"
       )}
       data-testid={`kanban-card-${feature.id}`}
@@ -405,7 +319,7 @@ export const KanbanCard = memo(function KanbanCard({
       {...attributes}
       {...(isDraggable ? listeners : {})}
     >
-      {/* Background overlay with opacity - only affects background, not content */}
+      {/* Background overlay with opacity */}
       {!isDragging && (
         <div
           className={cn(
@@ -415,88 +329,85 @@ export const KanbanCard = memo(function KanbanCard({
           style={{ opacity: opacity / 100 }}
         />
       )}
-      {/* Priority badge */}
-      {hasPriority && (
-        <div
-          className={cn(
-            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            getBadgeTopPosition(priorityBadgeIndex),
-            "left-2",
-            getPriorityBadgeClasses(feature.priority)
-          )}
-          data-testid={`priority-badge-${feature.id}`}
-          title={`Priority: ${priorityLabel}`}
-        >
-          <Flag className="w-3 h-3" />
-          <span>{priorityLabel}</span>
-        </div>
-      )}
-      {/* Skip Tests indicator badge */}
+
+      {/* Skip Tests (Manual) indicator badge */}
       {feature.skipTests && !feature.error && (
-        <div
-          className={cn(
-            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            getBadgeTopPosition(skipTestsBadgeIndex),
-            "left-2",
-            "bg-orange-500/20 border border-orange-500/50 text-orange-400"
-          )}
-          data-testid={`skip-tests-badge-${feature.id}`}
-          title="Manual verification required"
-        >
-          <Hand className="w-3 h-3" />
-          <span>Manual</span>
-        </div>
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "absolute px-1.5 py-0.5 text-[10px] font-medium rounded-md flex items-center gap-1 z-10",
+                  "top-2 left-2",
+                  "bg-[var(--status-warning-bg)] border border-[var(--status-warning)]/40 text-[var(--status-warning)]"
+                )}
+                data-testid={`skip-tests-badge-${feature.id}`}
+              >
+                <Hand className="w-3 h-3" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="text-xs">
+              <p>Manual verification required</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
+
       {/* Error indicator badge */}
       {feature.error && (
-        <div
-          className={cn(
-            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            getBadgeTopPosition(errorBadgeIndex),
-            "left-2",
-            "bg-red-500/20 border border-red-500/50 text-red-400"
-          )}
-          data-testid={`error-badge-${feature.id}`}
-          title={feature.error}
-        >
-          <AlertCircle className="w-3 h-3" />
-          <span>Errored</span>
-        </div>
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "absolute px-1.5 py-0.5 text-[10px] font-medium rounded-md flex items-center gap-1 z-10",
+                  "top-2 left-2",
+                  "bg-[var(--status-error-bg)] border border-[var(--status-error)]/40 text-[var(--status-error)]"
+                )}
+                data-testid={`error-badge-${feature.id}`}
+              >
+                <AlertCircle className="w-3 h-3" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="text-xs max-w-[250px]">
+              <p>{feature.error}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
-      {/* Just Finished indicator badge - shows when agent just completed work (for 2 minutes) */}
+
+      {/* Just Finished indicator badge */}
       {isJustFinished && (
         <div
           className={cn(
-            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            getBadgeTopPosition(justFinishedBadgeIndex),
-            "left-2",
-            "bg-green-500/20 border border-green-500/50 text-green-400 animate-pulse"
+            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded-md flex items-center gap-1 z-10",
+            feature.skipTests ? "top-8 left-2" : "top-2 left-2",
+            "bg-[var(--status-success-bg)] border border-[var(--status-success)]/40 text-[var(--status-success)]",
+            "animate-pulse"
           )}
           data-testid={`just-finished-badge-${feature.id}`}
           title="Agent just finished working on this feature"
         >
           <Sparkles className="w-3 h-3" />
-          <span>Fresh Baked</span>
         </div>
       )}
-      {/* Branch badge - show when feature has a worktree */}
+
+      {/* Branch badge */}
       {hasWorktree && !isCurrentAutoTask && (
         <TooltipProvider delayDuration={300}>
           <Tooltip>
             <TooltipTrigger asChild>
               <div
                 className={cn(
-                  "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10 cursor-default",
-                  "bg-purple-500/20 border border-purple-500/50 text-purple-400",
-                  getBadgeTopPosition(branchBadgeIndex),
-                  "left-2"
+                  "absolute px-1.5 py-0.5 text-[10px] font-medium rounded-md flex items-center gap-1 z-10 cursor-default",
+                  "bg-[var(--status-info-bg)] border border-[var(--status-info)]/40 text-[var(--status-info)]",
+                  feature.error || feature.skipTests || isJustFinished
+                    ? "top-8 left-2"
+                    : "top-2 left-2"
                 )}
                 data-testid={`branch-badge-${feature.id}`}
               >
                 <GitBranch className="w-3 h-3 shrink-0" />
-                <span className="truncate max-w-[80px]">
-                  {feature.branchName?.replace("feature/", "")}
-                </span>
               </div>
             </TooltipTrigger>
             <TooltipContent side="bottom" className="max-w-[300px]">
@@ -507,27 +418,26 @@ export const KanbanCard = memo(function KanbanCard({
           </Tooltip>
         </TooltipProvider>
       )}
+
       <CardHeader
         className={cn(
-          "p-3 pb-2 block", // Reset grid layout to block for custom kanban card layout
-          // Add extra top padding when badges are present to prevent text overlap
-          // Calculate padding based on number of badges
-          totalBadgeCount === 1 && "pt-10",
-          totalBadgeCount === 2 && "pt-14",
-          totalBadgeCount === 3 && "pt-20",
-          totalBadgeCount >= 4 && "pt-24"
+          "p-3 pb-2 block",
+          (feature.skipTests || feature.error || isJustFinished) && "pt-10",
+          hasWorktree &&
+            (feature.skipTests || feature.error || isJustFinished) &&
+            "pt-14"
         )}
       >
         {isCurrentAutoTask && (
-          <div className="absolute top-2 right-2 flex items-center justify-center gap-2 bg-running-indicator/20 border border-running-indicator rounded px-2 py-0.5">
-            <Loader2 className="w-4 h-4 text-running-indicator animate-spin" />
-            <span className="text-xs text-running-indicator font-medium">
+          <div className="absolute top-2 right-2 flex items-center justify-center gap-2 bg-[var(--status-in-progress)]/15 border border-[var(--status-in-progress)]/50 rounded-md px-2 py-0.5">
+            <Loader2 className="w-3.5 h-3.5 text-[var(--status-in-progress)] animate-spin" />
+            <span className="text-[10px] text-[var(--status-in-progress)] font-medium">
               {formatModelName(feature.model ?? DEFAULT_MODEL)}
             </span>
             {feature.startedAt && (
               <CountUpTimer
                 startedAt={feature.startedAt}
-                className="text-running-indicator"
+                className="text-[var(--status-in-progress)] text-[10px]"
               />
             )}
           </div>
@@ -614,21 +524,22 @@ export const KanbanCard = memo(function KanbanCard({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-6 w-6 p-0 hover:bg-white/10"
+                  className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
                   onClick={(e) => e.stopPropagation()}
                   onPointerDown={(e) => e.stopPropagation()}
                   data-testid={`menu-${feature.id}`}
                 >
-                  <MoreVertical className="w-4 h-4" />
+                  <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
+              <DropdownMenuContent align="end" className="w-36">
                 <DropdownMenuItem
                   onClick={(e) => {
                     e.stopPropagation();
                     onEdit();
                   }}
                   data-testid={`edit-feature-${feature.id}`}
+                  className="text-xs"
                 >
                   <Edit className="w-3 h-3 mr-2" />
                   Edit
@@ -640,13 +551,14 @@ export const KanbanCard = memo(function KanbanCard({
                       onViewOutput();
                     }}
                     data-testid={`view-logs-${feature.id}`}
+                    className="text-xs"
                   >
                     <FileText className="w-3 h-3 mr-2" />
-                    Logs
+                    View Logs
                   </DropdownMenuItem>
                 )}
                 <DropdownMenuItem
-                  className="text-destructive focus:text-destructive"
+                  className="text-xs text-destructive focus:text-destructive"
                   onClick={(e) => {
                     e.stopPropagation();
                     handleDeleteClick(e as unknown as React.MouseEvent);
@@ -663,22 +575,21 @@ export const KanbanCard = memo(function KanbanCard({
         <div className="flex items-start gap-2">
           {isDraggable && (
             <div
-              className="-ml-2 -mt-1 p-2 touch-none"
+              className="-ml-2 -mt-1 p-2 touch-none opacity-40 hover:opacity-70 transition-opacity"
               data-testid={`drag-handle-${feature.id}`}
             >
-              <GripVertical className="w-4 h-4 text-muted-foreground" />
+              <GripVertical className="w-3.5 h-3.5 text-muted-foreground" />
             </div>
           )}
           <div className="flex-1 min-w-0 overflow-hidden">
             <CardTitle
               className={cn(
-                "text-sm leading-tight break-words hyphens-auto overflow-hidden",
+                "text-sm leading-snug break-words hyphens-auto overflow-hidden font-medium text-foreground/90",
                 !isDescriptionExpanded && "line-clamp-3"
               )}
             >
               {feature.description || feature.summary || feature.id}
             </CardTitle>
-            {/* Show More/Less toggle - only show when description is likely truncated */}
             {(feature.description || feature.summary || "").length > 100 && (
               <button
                 onClick={(e) => {
@@ -686,41 +597,42 @@ export const KanbanCard = memo(function KanbanCard({
                   setIsDescriptionExpanded(!isDescriptionExpanded);
                 }}
                 onPointerDown={(e) => e.stopPropagation()}
-                className="flex items-center gap-0.5 text-[10px] text-muted-foreground hover:text-foreground mt-1 transition-colors"
+                className="flex items-center gap-0.5 text-[10px] text-muted-foreground/70 hover:text-muted-foreground mt-1.5 transition-colors"
                 data-testid={`toggle-description-${feature.id}`}
               >
                 {isDescriptionExpanded ? (
                   <>
                     <ChevronUp className="w-3 h-3" />
-                    <span>Show Less</span>
+                    <span>Less</span>
                   </>
                 ) : (
                   <>
                     <ChevronDown className="w-3 h-3" />
-                    <span>Show More</span>
+                    <span>More</span>
                   </>
                 )}
               </button>
             )}
-            <CardDescription className="text-xs mt-1 truncate">
+            <CardDescription className="text-[11px] mt-1.5 truncate text-muted-foreground/70">
               {feature.category}
             </CardDescription>
           </div>
         </div>
       </CardHeader>
+
       <CardContent className="p-3 pt-0">
-        {/* Steps Preview - Show in Standard and Detailed modes */}
+        {/* Steps Preview */}
         {showSteps && feature.steps && feature.steps.length > 0 && (
-          <div className="mb-3 space-y-1">
+          <div className="mb-3 space-y-1.5">
             {feature.steps.slice(0, 3).map((step, index) => (
               <div
                 key={index}
-                className="flex items-start gap-2 text-xs text-muted-foreground"
+                className="flex items-start gap-2 text-[11px] text-muted-foreground/80"
               >
                 {feature.status === "verified" ? (
-                  <CheckCircle2 className="w-3 h-3 mt-0.5 text-green-500 shrink-0" />
+                  <CheckCircle2 className="w-3 h-3 mt-0.5 text-[var(--status-success)] shrink-0" />
                 ) : (
-                  <Circle className="w-3 h-3 mt-0.5 shrink-0" />
+                  <Circle className="w-3 h-3 mt-0.5 shrink-0 text-muted-foreground/50" />
                 )}
                 <span className="break-words hyphens-auto line-clamp-2 leading-relaxed">
                   {step}
@@ -728,18 +640,18 @@ export const KanbanCard = memo(function KanbanCard({
               </div>
             ))}
             {feature.steps.length > 3 && (
-              <p className="text-xs text-muted-foreground pl-5">
-                +{feature.steps.length - 3} more steps
+              <p className="text-[10px] text-muted-foreground/60 pl-5">
+                +{feature.steps.length - 3} more
               </p>
             )}
           </div>
         )}
 
-        {/* Model/Preset Info for Backlog Cards - Show in Detailed mode */}
+        {/* Model/Preset Info for Backlog Cards */}
         {showAgentInfo && feature.status === "backlog" && (
           <div className="mb-3 space-y-2 overflow-hidden">
-            <div className="flex items-center gap-2 text-xs flex-wrap">
-              <div className="flex items-center gap-1 text-cyan-400">
+            <div className="flex items-center gap-2 text-[11px] flex-wrap">
+              <div className="flex items-center gap-1 text-[var(--status-info)]">
                 <Cpu className="w-3 h-3" />
                 <span className="font-medium">
                   {formatModelName(feature.model ?? DEFAULT_MODEL)}
@@ -757,13 +669,12 @@ export const KanbanCard = memo(function KanbanCard({
           </div>
         )}
 
-        {/* Agent Info Panel - shows for in_progress, waiting_approval, verified */}
-        {/* Detailed mode: Show all agent info */}
+        {/* Agent Info Panel */}
         {showAgentInfo && feature.status !== "backlog" && agentInfo && (
           <div className="mb-3 space-y-2 overflow-hidden">
             {/* Model & Phase */}
-            <div className="flex items-center gap-2 text-xs flex-wrap">
-              <div className="flex items-center gap-1 text-cyan-400">
+            <div className="flex items-center gap-2 text-[11px] flex-wrap">
+              <div className="flex items-center gap-1 text-[var(--status-info)]">
                 <Cpu className="w-3 h-3" />
                 <span className="font-medium">
                   {formatModelName(feature.model ?? DEFAULT_MODEL)}
@@ -772,13 +683,13 @@ export const KanbanCard = memo(function KanbanCard({
               {agentInfo.currentPhase && (
                 <div
                   className={cn(
-                    "px-1.5 py-0.5 rounded text-[10px] font-medium",
+                    "px-1.5 py-0.5 rounded-md text-[10px] font-medium",
                     agentInfo.currentPhase === "planning" &&
-                      "bg-blue-500/20 text-blue-400",
+                      "bg-[var(--status-info-bg)] text-[var(--status-info)]",
                     agentInfo.currentPhase === "action" &&
-                      "bg-amber-500/20 text-amber-400",
+                      "bg-[var(--status-warning-bg)] text-[var(--status-warning)]",
                     agentInfo.currentPhase === "verification" &&
-                      "bg-green-500/20 text-green-400"
+                      "bg-[var(--status-success-bg)] text-[var(--status-success)]"
                   )}
                 >
                   {agentInfo.currentPhase}
@@ -786,10 +697,10 @@ export const KanbanCard = memo(function KanbanCard({
               )}
             </div>
 
-            {/* Task List Progress (if todos found) */}
+            {/* Task List Progress */}
             {agentInfo.todos.length > 0 && (
               <div className="space-y-1">
-                <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
                   <ListTodo className="w-3 h-3" />
                   <span>
                     {
@@ -806,20 +717,21 @@ export const KanbanCard = memo(function KanbanCard({
                       className="flex items-center gap-1.5 text-[10px]"
                     >
                       {todo.status === "completed" ? (
-                        <CheckCircle2 className="w-2.5 h-2.5 text-green-500 shrink-0" />
+                        <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
                       ) : todo.status === "in_progress" ? (
-                        <Loader2 className="w-2.5 h-2.5 text-amber-400 animate-spin shrink-0" />
+                        <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
                       ) : (
-                        <Circle className="w-2.5 h-2.5 text-muted-foreground shrink-0" />
+                        <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
                       )}
                       <span
                         className={cn(
                           "break-words hyphens-auto line-clamp-2 leading-relaxed",
                           todo.status === "completed" &&
-                            "text-muted-foreground line-through",
-                          todo.status === "in_progress" && "text-amber-400",
+                            "text-muted-foreground/60 line-through",
+                          todo.status === "in_progress" &&
+                            "text-[var(--status-warning)]",
                           todo.status === "pending" &&
-                            "text-foreground-secondary"
+                            "text-muted-foreground/80"
                         )}
                       >
                         {todo.content}
@@ -827,7 +739,7 @@ export const KanbanCard = memo(function KanbanCard({
                     </div>
                   ))}
                   {agentInfo.todos.length > 3 && (
-                    <p className="text-[10px] text-muted-foreground pl-4">
+                    <p className="text-[10px] text-muted-foreground/60 pl-4">
                       +{agentInfo.todos.length - 3} more
                     </p>
                   )}
@@ -835,16 +747,16 @@ export const KanbanCard = memo(function KanbanCard({
               </div>
             )}
 
-            {/* Summary for waiting_approval and verified - prioritize feature.summary from UpdateFeatureStatus */}
+            {/* Summary for waiting_approval and verified */}
             {(feature.status === "waiting_approval" ||
               feature.status === "verified") && (
               <>
                 {(feature.summary || summary || agentInfo.summary) && (
-                  <div className="space-y-1 pt-1 border-t border-border-glass overflow-hidden">
+                  <div className="space-y-1.5 pt-2 border-t border-border/30 overflow-hidden">
                     <div className="flex items-center justify-between gap-2">
-                      <div className="flex items-center gap-1 text-[10px] text-green-400 min-w-0">
+                      <div className="flex items-center gap-1 text-[10px] text-[var(--status-success)] min-w-0">
                         <Sparkles className="w-3 h-3 shrink-0" />
-                        <span className="truncate">Summary</span>
+                        <span className="truncate font-medium">Summary</span>
                       </div>
                       <button
                         onClick={(e) => {
@@ -852,31 +764,30 @@ export const KanbanCard = memo(function KanbanCard({
                           setIsSummaryDialogOpen(true);
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
-                        className="p-0.5 rounded hover:bg-accent transition-colors text-muted-foreground hover:text-foreground shrink-0"
+                        className="p-0.5 rounded-md hover:bg-muted/80 transition-colors text-muted-foreground/60 hover:text-muted-foreground shrink-0"
                         title="View full summary"
                         data-testid={`expand-summary-${feature.id}`}
                       >
                         <Expand className="w-3 h-3" />
                       </button>
                     </div>
-                    <p className="text-[10px] text-foreground-secondary line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
+                    <p className="text-[10px] text-muted-foreground/70 line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
                       {feature.summary || summary || agentInfo.summary}
                     </p>
                   </div>
                 )}
-                {/* Show tool count even without summary */}
                 {!feature.summary &&
                   !summary &&
                   !agentInfo.summary &&
                   agentInfo.toolCallCount > 0 && (
-                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground pt-1 border-t border-border-glass">
+                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground/60 pt-2 border-t border-border/30">
                       <span className="flex items-center gap-1">
                         <Wrench className="w-2.5 h-2.5" />
                         {agentInfo.toolCallCount} tool calls
                       </span>
                       {agentInfo.todos.length > 0 && (
                         <span className="flex items-center gap-1">
-                          <CheckCircle2 className="w-2.5 h-2.5 text-green-500" />
+                          <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)]" />
                           {
                             agentInfo.todos.filter(
                               (t) => t.status === "completed"
@@ -893,14 +804,14 @@ export const KanbanCard = memo(function KanbanCard({
         )}
 
         {/* Actions */}
-        <div className="flex gap-2">
+        <div className="flex gap-1.5">
           {isCurrentAutoTask && (
             <>
               {onViewOutput && (
                 <Button
                   variant="default"
                   size="sm"
-                  className="flex-1 h-7 text-xs bg-action-view hover:bg-action-view-hover"
+                  className="flex-1 h-7 text-[11px] bg-[var(--status-info)] hover:bg-[var(--status-info)]/90"
                   onClick={(e) => {
                     e.stopPropagation();
                     onViewOutput();
@@ -912,7 +823,7 @@ export const KanbanCard = memo(function KanbanCard({
                   Logs
                   {shortcutKey && (
                     <span
-                      className="ml-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-primary-foreground/10 border border-primary-foreground/20"
+                      className="ml-1.5 px-1 py-0.5 text-[9px] font-mono rounded bg-white/20"
                       data-testid={`shortcut-key-${feature.id}`}
                     >
                       {shortcutKey}
@@ -924,7 +835,7 @@ export const KanbanCard = memo(function KanbanCard({
                 <Button
                   variant="destructive"
                   size="sm"
-                  className="h-7 text-xs"
+                  className="h-7 text-[11px] px-2"
                   onClick={(e) => {
                     e.stopPropagation();
                     onForceStop();
@@ -932,20 +843,18 @@ export const KanbanCard = memo(function KanbanCard({
                   onPointerDown={(e) => e.stopPropagation()}
                   data-testid={`force-stop-${feature.id}`}
                 >
-                  <StopCircle className="w-3 h-3 mr-1" />
-                  Stop
+                  <StopCircle className="w-3 h-3" />
                 </Button>
               )}
             </>
           )}
           {!isCurrentAutoTask && feature.status === "in_progress" && (
             <>
-              {/* skipTests features show manual verify button */}
               {feature.skipTests && onManualVerify ? (
                 <Button
                   variant="default"
                   size="sm"
-                  className="flex-1 h-7 text-xs bg-primary hover:bg-primary/90"
+                  className="flex-1 h-7 text-[11px]"
                   onClick={(e) => {
                     e.stopPropagation();
                     onManualVerify();
@@ -960,7 +869,7 @@ export const KanbanCard = memo(function KanbanCard({
                 <Button
                   variant="default"
                   size="sm"
-                  className="flex-1 h-7 text-xs bg-action-verify hover:bg-action-verify-hover"
+                  className="flex-1 h-7 text-[11px] bg-[var(--status-success)] hover:bg-[var(--status-success)]/90"
                   onClick={(e) => {
                     e.stopPropagation();
                     onResume();
@@ -975,7 +884,7 @@ export const KanbanCard = memo(function KanbanCard({
                 <Button
                   variant="default"
                   size="sm"
-                  className="flex-1 h-7 text-xs bg-action-verify hover:bg-action-verify-hover"
+                  className="flex-1 h-7 text-[11px] bg-[var(--status-success)] hover:bg-[var(--status-success)]/90"
                   onClick={(e) => {
                     e.stopPropagation();
                     onVerify();
@@ -991,7 +900,7 @@ export const KanbanCard = memo(function KanbanCard({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-7 text-xs"
+                  className="h-7 text-[11px] px-2"
                   onClick={(e) => {
                     e.stopPropagation();
                     onViewOutput();
@@ -999,8 +908,7 @@ export const KanbanCard = memo(function KanbanCard({
                   onPointerDown={(e) => e.stopPropagation()}
                   data-testid={`view-output-inprogress-${feature.id}`}
                 >
-                  <FileText className="w-3 h-3 mr-1" />
-                  Logs
+                  <FileText className="w-3 h-3" />
                 </Button>
               )}
             </>
@@ -1045,7 +953,6 @@ export const KanbanCard = memo(function KanbanCard({
           )}
           {!isCurrentAutoTask && feature.status === "waiting_approval" && (
             <>
-              {/* Revert button - only show when worktree exists (icon only to save space) */}
               {hasWorktree && onRevert && (
                 <TooltipProvider delayDuration={300}>
                   <Tooltip>
@@ -1053,7 +960,7 @@ export const KanbanCard = memo(function KanbanCard({
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-7 w-7 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/20 shrink-0"
+                        className="h-7 w-7 p-0 text-[var(--status-error)] hover:text-[var(--status-error)] hover:bg-[var(--status-error-bg)] shrink-0"
                         onClick={(e) => {
                           e.stopPropagation();
                           setIsRevertDialogOpen(true);
@@ -1064,7 +971,7 @@ export const KanbanCard = memo(function KanbanCard({
                         <Undo2 className="w-3.5 h-3.5" />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent side="top">
+                    <TooltipContent side="top" className="text-xs">
                       <p>Revert changes</p>
                     </TooltipContent>
                   </Tooltip>
@@ -1075,7 +982,7 @@ export const KanbanCard = memo(function KanbanCard({
                 <Button
                   variant="secondary"
                   size="sm"
-                  className="flex-1 h-7 text-xs min-w-0"
+                  className="flex-1 h-7 text-[11px] min-w-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     onFollowUp();
@@ -1087,12 +994,11 @@ export const KanbanCard = memo(function KanbanCard({
                   <span className="truncate">Refine</span>
                 </Button>
               )}
-              {/* Merge button - only show when worktree exists */}
               {hasWorktree && onMerge && (
                 <Button
                   variant="default"
                   size="sm"
-                  className="flex-1 h-7 text-xs bg-purple-600 hover:bg-purple-700 min-w-0"
+                  className="flex-1 h-7 text-[11px] bg-[var(--status-info)] hover:bg-[var(--status-info)]/90 min-w-0"
                   onClick={(e) => {
                     e.stopPropagation();
                     onMerge();
@@ -1105,12 +1011,11 @@ export const KanbanCard = memo(function KanbanCard({
                   <span className="truncate">Merge</span>
                 </Button>
               )}
-              {/* Commit and verify button - show when no worktree */}
               {!hasWorktree && onCommit && (
                 <Button
                   variant="default"
                   size="sm"
-                  className="flex-1 h-7 text-xs"
+                  className="flex-1 h-7 text-[11px]"
                   onClick={(e) => {
                     e.stopPropagation();
                     onCommit();
@@ -1180,7 +1085,7 @@ export const KanbanCard = memo(function KanbanCard({
         >
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              <Sparkles className="w-5 h-5 text-green-400" />
+              <Sparkles className="w-5 h-5 text-[var(--status-success)]" />
               Implementation Summary
             </DialogTitle>
             <DialogDescription
@@ -1196,7 +1101,7 @@ export const KanbanCard = memo(function KanbanCard({
               })()}
             </DialogDescription>
           </DialogHeader>
-          <div className="flex-1 overflow-y-auto p-4 bg-card rounded-lg border border-border">
+          <div className="flex-1 overflow-y-auto p-4 bg-card rounded-lg border border-border/50">
             <Markdown>
               {feature.summary ||
                 summary ||
@@ -1220,7 +1125,7 @@ export const KanbanCard = memo(function KanbanCard({
       <Dialog open={isRevertDialogOpen} onOpenChange={setIsRevertDialogOpen}>
         <DialogContent data-testid="revert-confirmation-dialog">
           <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 text-red-400">
+            <DialogTitle className="flex items-center gap-2 text-[var(--status-error)]">
               <Undo2 className="w-5 h-5" />
               Revert Changes
             </DialogTitle>
@@ -1230,13 +1135,13 @@ export const KanbanCard = memo(function KanbanCard({
               {feature.branchName && (
                 <span className="block mt-2 font-medium">
                   Branch{" "}
-                  <code className="bg-muted px-1 py-0.5 rounded">
+                  <code className="bg-muted px-1.5 py-0.5 rounded text-[11px]">
                     {feature.branchName}
                   </code>{" "}
                   will be deleted.
                 </span>
               )}
-              <span className="block mt-2 text-red-400 font-medium">
+              <span className="block mt-2 text-[var(--status-error)] font-medium">
                 This action cannot be undone.
               </span>
             </DialogDescription>

apps/app/src/components/views/kanban-column.tsx

@@ -8,19 +8,19 @@ import type { ReactNode } from "react";
 interface KanbanColumnProps {
   id: string;
   title: string;
-  color: string;
+  colorClass: string;
   count: number;
   children: ReactNode;
   headerAction?: ReactNode;
-  opacity?: number; // Opacity percentage (0-100) - only affects background
-  showBorder?: boolean; // Whether to show column border
-  hideScrollbar?: boolean; // Whether to hide the column scrollbar
+  opacity?: number;
+  showBorder?: boolean;
+  hideScrollbar?: boolean;
 }
 
 export const KanbanColumn = memo(function KanbanColumn({
   id,
   title,
-  color,
+  colorClass,
   count,
   children,
   headerAction,
@@ -34,45 +34,53 @@ export const KanbanColumn = memo(function KanbanColumn({
     <div
       ref={setNodeRef}
       className={cn(
-        "relative flex flex-col h-full rounded-lg transition-colors w-72",
-        showBorder && "border border-border"
+        "relative flex flex-col h-full rounded-xl transition-all duration-200 w-72",
+        showBorder && "border border-border/60",
+        isOver && "ring-2 ring-primary/30 ring-offset-1 ring-offset-background"
       )}
       data-testid={`kanban-column-${id}`}
     >
-      {/* Background layer with opacity - only this layer is affected by opacity */}
+      {/* Background layer with opacity */}
       <div
         className={cn(
-          "absolute inset-0 rounded-lg backdrop-blur-sm transition-colors",
-          isOver ? "bg-accent" : "bg-card"
+          "absolute inset-0 rounded-xl backdrop-blur-sm transition-colors duration-200",
+          isOver ? "bg-accent/80" : "bg-card/80"
         )}
         style={{ opacity: opacity / 100 }}
       />
 
-      {/* Column Header - positioned above the background */}
+      {/* Column Header */}
       <div
         className={cn(
-          "relative z-10 flex items-center gap-2 p-3",
-          showBorder && "border-b border-border"
+          "relative z-10 flex items-center gap-3 px-3 py-2.5",
+          showBorder && "border-b border-border/40"
         )}
       >
-        <div className={cn("w-3 h-3 rounded-full", color)} />
-        <h3 className="font-medium text-sm flex-1">{title}</h3>
+        <div className={cn("w-2.5 h-2.5 rounded-full shrink-0", colorClass)} />
+        <h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight">{title}</h3>
         {headerAction}
-        <span className="text-xs text-muted-foreground bg-background px-2 py-0.5 rounded-full">
+        <span className="text-xs font-medium text-muted-foreground/80 bg-muted/50 px-2 py-0.5 rounded-md tabular-nums">
           {count}
         </span>
       </div>
 
-      {/* Column Content - positioned above the background */}
+      {/* Column Content */}
       <div
         className={cn(
-          "relative z-10 flex-1 overflow-y-auto p-2 space-y-2",
+          "relative z-10 flex-1 overflow-y-auto p-2 space-y-2.5",
           hideScrollbar &&
-            "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+            "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+          // Smooth scrolling
+          "scroll-smooth"
         )}
       >
         {children}
       </div>
+
+      {/* Drop zone indicator when dragging over */}
+      {isOver && (
+        <div className="absolute inset-0 rounded-xl bg-primary/5 pointer-events-none z-5 border-2 border-dashed border-primary/20" />
+      )}
     </div>
   );
 });

apps/app/src/components/views/settings-view.tsx

@@ -157,47 +157,47 @@ export function SettingsView() {
             {/* Audio Section */}
             <div
               id="audio"
-              className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+              className="rounded-2xl border border-border/50 bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl shadow-sm shadow-black/5 overflow-hidden scroll-mt-6"
             >
-              <div className="p-6 border-b border-border">
-                <div className="flex items-center gap-2 mb-2">
-                  <Volume2 className="w-5 h-5 text-brand-500" />
-                  <h2 className="text-lg font-semibold text-foreground">
+              <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+                    <Volume2 className="w-5 h-5 text-brand-500" />
+                  </div>
+                  <h2 className="text-lg font-semibold text-foreground tracking-tight">
                     Audio
                   </h2>
                 </div>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-muted-foreground/80 ml-12">
                   Configure audio and notification settings.
                 </p>
               </div>
               <div className="p-6 space-y-4">
                 {/* Mute Done Sound Setting */}
-                <div className="space-y-3">
-                  <div className="flex items-start space-x-3">
-                    <Checkbox
-                      id="mute-done-sound"
-                      checked={muteDoneSound}
-                      onCheckedChange={(checked) =>
-                        setMuteDoneSound(checked === true)
-                      }
-                      className="mt-0.5"
-                      data-testid="mute-done-sound-checkbox"
-                    />
-                    <div className="space-y-1">
-                      <Label
-                        htmlFor="mute-done-sound"
-                        className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-                      >
-                        <VolumeX className="w-4 h-4 text-brand-500" />
-                        Mute notification sound when agents complete
-                      </Label>
-                      <p className="text-xs text-muted-foreground">
-                        When enabled, disables the &quot;ding&quot; sound that
-                        plays when an agent completes a feature. The feature
-                        will still move to the completed column, but without
-                        audio notification.
-                      </p>
-                    </div>
+                <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+                  <Checkbox
+                    id="mute-done-sound"
+                    checked={muteDoneSound}
+                    onCheckedChange={(checked) =>
+                      setMuteDoneSound(checked === true)
+                    }
+                    className="mt-1"
+                    data-testid="mute-done-sound-checkbox"
+                  />
+                  <div className="space-y-1.5">
+                    <Label
+                      htmlFor="mute-done-sound"
+                      className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+                    >
+                      <VolumeX className="w-4 h-4 text-brand-500" />
+                      Mute notification sound when agents complete
+                    </Label>
+                    <p className="text-xs text-muted-foreground/80 leading-relaxed">
+                      When enabled, disables the &quot;ding&quot; sound that
+                      plays when an agent completes a feature. The feature
+                      will still move to the completed column, but without
+                      audio notification.
+                    </p>
                   </div>
                 </div>
               </div>

apps/app/src/components/views/settings-view/api-keys/api-keys-section.tsx

@@ -7,6 +7,7 @@ import { buildProviderConfigs } from "@/config/api-providers";
 import { AuthenticationStatusDisplay } from "./authentication-status-display";
 import { SecurityNotice } from "./security-notice";
 import { useApiKeyManagement } from "./hooks/use-api-key-management";
+import { cn } from "@/lib/utils";
 
 export function ApiKeysSection() {
   const { apiKeys } = useAppStore();
@@ -20,16 +21,22 @@ export function ApiKeysSection() {
   return (
     <div
       id="api-keys"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
     >
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center gap-2 mb-2">
-          <Key className="w-5 h-5 text-brand-500" />
-          <h2 className="text-lg font-semibold text-foreground">API Keys</h2>
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Key className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">API Keys</h2>
         </div>
-        <p className="text-sm text-muted-foreground">
-          Configure your AI provider API keys. Keys are stored locally in your
-          browser.
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure your AI provider API keys. Keys are stored locally in your browser.
         </p>
       </div>
       <div className="p-6 space-y-6">
@@ -53,7 +60,15 @@ export function ApiKeysSection() {
           <Button
             onClick={handleSave}
             data-testid="save-settings"
-            className="min-w-[120px] bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
+            className={cn(
+              "min-w-[140px] h-10",
+              "bg-gradient-to-r from-brand-500 to-brand-600",
+              "hover:from-brand-600 hover:to-brand-600",
+              "text-white font-medium border-0",
+              "shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25",
+              "transition-all duration-200 ease-out",
+              "hover:scale-[1.02] active:scale-[0.98]"
+            )}
           >
             {saved ? (
               <>

apps/app/src/components/views/settings-view/appearance/appearance-section.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Palette } from "lucide-react";
 import { themeOptions } from "@/config/theme-options";
+import { cn } from "@/lib/utils";
 import type { Theme, Project } from "../shared/types";
 
 interface AppearanceSectionProps {
@@ -18,39 +19,65 @@ export function AppearanceSection({
   return (
     <div
       id="appearance"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
     >
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center gap-2 mb-2">
-          <Palette className="w-5 h-5 text-brand-500" />
-          <h2 className="text-lg font-semibold text-foreground">Appearance</h2>
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Palette className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Appearance</h2>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Customize the look and feel of your application.
         </p>
       </div>
       <div className="p-6 space-y-4">
-        <div className="space-y-3">
-          <Label className="text-foreground">
+        <div className="space-y-4">
+          <Label className="text-foreground font-medium">
             Theme{" "}
-            {currentProject ? `(for ${currentProject.name})` : "(Global)"}
+            <span className="text-muted-foreground font-normal">
+              {currentProject ? `(for ${currentProject.name})` : "(Global)"}
+            </span>
           </Label>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
             {themeOptions.map(({ value, label, Icon, testId }) => {
               const isActive = effectiveTheme === value;
               return (
-                <Button
+                <button
                   key={value}
-                  variant={isActive ? "secondary" : "outline"}
                   onClick={() => onThemeChange(value)}
-                  className={`flex items-center justify-center gap-2 px-3 py-3 h-auto ${
-                    isActive ? "border-brand-500 ring-1 ring-brand-500/50" : ""
-                  }`}
+                  className={cn(
+                    "group flex items-center justify-center gap-2.5 px-4 py-3.5 rounded-xl",
+                    "text-sm font-medium transition-all duration-200 ease-out",
+                    isActive
+                      ? [
+                          "bg-gradient-to-br from-brand-500/15 to-brand-600/10",
+                          "border-2 border-brand-500/40",
+                          "text-foreground",
+                          "shadow-md shadow-brand-500/10",
+                        ]
+                      : [
+                          "bg-accent/30 hover:bg-accent/50",
+                          "border border-border/50 hover:border-border",
+                          "text-muted-foreground hover:text-foreground",
+                          "hover:shadow-sm",
+                        ],
+                    "hover:scale-[1.02] active:scale-[0.98]"
+                  )}
                   data-testid={testId}
                 >
-                  <Icon className="w-4 h-4" />
-                  <span className="font-medium text-sm">{label}</span>
-                </Button>
+                  <Icon className={cn(
+                    "w-4 h-4 transition-all duration-200",
+                    isActive ? "text-brand-500" : "group-hover:text-brand-400"
+                  )} />
+                  <span>{label}</span>
+                </button>
               );
             })}
           </div>

apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx

@@ -5,6 +5,7 @@ import {
   AlertCircle,
   RefreshCw,
 } from "lucide-react";
+import { cn } from "@/lib/utils";
 import type { CliStatus } from "../shared/types";
 
 interface CliStatusProps {
@@ -23,13 +24,20 @@ export function ClaudeCliStatus({
   return (
     <div
       id="claude"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
     >
-      <div className="p-6 border-b border-border">
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
         <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <Terminal className="w-5 h-5 text-brand-500" />
-            <h2 className="text-lg font-semibold text-foreground">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Terminal className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
               Claude Code CLI
             </h2>
           </div>
@@ -40,13 +48,18 @@ export function ClaudeCliStatus({
             disabled={isChecking}
             data-testid="refresh-claude-cli"
             title="Refresh Claude CLI detection"
+            className={cn(
+              "h-9 w-9 rounded-lg",
+              "hover:bg-accent/50 hover:scale-105",
+              "transition-all duration-200"
+            )}
           >
             <RefreshCw
-              className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
+              className={cn("w-4 h-4", isChecking && "animate-spin")}
             />
           </Button>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Claude Code CLI provides better performance for long-running tasks,
           especially with ultrathink.
         </p>
@@ -54,13 +67,15 @@ export function ClaudeCliStatus({
       <div className="p-6 space-y-4">
         {status.success && status.status === "installed" ? (
           <div className="space-y-3">
-            <div className="flex items-center gap-2 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
-              <CheckCircle2 className="w-5 h-5 text-green-500 shrink-0" />
-              <div className="flex-1">
-                <p className="text-sm font-medium text-green-400">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">
                   Claude Code CLI Installed
                 </p>
-                <div className="text-xs text-green-400/80 mt-1 space-y-1">
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
                   {status.method && (
                     <p>
                       Method: <span className="font-mono">{status.method}</span>
@@ -68,71 +83,65 @@ export function ClaudeCliStatus({
                   )}
                   {status.version && (
                     <p>
-                      Version:{" "}
-                      <span className="font-mono">{status.version}</span>
+                      Version: <span className="font-mono">{status.version}</span>
                     </p>
                   )}
                   {status.path && (
                     <p className="truncate" title={status.path}>
-                      Path:{" "}
-                      <span className="font-mono text-[10px]">
-                        {status.path}
-                      </span>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
                     </p>
                   )}
                 </div>
               </div>
             </div>
             {status.recommendation && (
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-muted-foreground/70 ml-1">
                 {status.recommendation}
               </p>
             )}
           </div>
         ) : (
-          <div className="space-y-3">
-            <div className="flex items-start gap-3 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
-              <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
               <div className="flex-1">
-                <p className="text-sm font-medium text-yellow-400">
+                <p className="text-sm font-medium text-amber-400">
                   Claude Code CLI Not Detected
                 </p>
-                <p className="text-xs text-yellow-400/80 mt-1">
+                <p className="text-xs text-amber-400/70 mt-1">
                   {status.recommendation ||
                     "Consider installing Claude Code CLI for optimal performance with ultrathink."}
                 </p>
               </div>
             </div>
             {status.installCommands && (
-              <div className="space-y-2">
-                <p className="text-xs font-medium text-foreground-secondary">
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">
                   Installation Commands:
                 </p>
-                <div className="space-y-1">
+                <div className="space-y-2">
                   {status.installCommands.npm && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">npm:</p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">npm</p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
                         {status.installCommands.npm}
                       </code>
                     </div>
                   )}
                   {status.installCommands.macos && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">
-                        macOS/Linux:
-                      </p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">macOS/Linux</p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
                         {status.installCommands.macos}
                       </code>
                     </div>
                   )}
                   {status.installCommands.windows && (
-                    <div className="p-2 rounded bg-background border border-border-glass">
-                      <p className="text-xs text-muted-foreground mb-1">
-                        Windows (PowerShell):
-                      </p>
-                      <code className="text-xs text-foreground-secondary font-mono break-all">
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">Windows (PowerShell)</p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
                         {status.installCommands.windows}
                       </code>
                     </div>

apps/app/src/components/views/settings-view/components/settings-header.tsx

@@ -1,4 +1,5 @@
 import { Settings } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface SettingsHeaderProps {
   title?: string;
@@ -10,15 +11,24 @@ export function SettingsHeader({
   description = "Configure your API keys and preferences",
 }: SettingsHeaderProps) {
   return (
-    <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+    <div className={cn(
+      "shrink-0",
+      "border-b border-border/50",
+      "bg-gradient-to-r from-card/90 via-card/70 to-card/80 backdrop-blur-xl"
+    )}>
       <div className="px-8 py-6">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
-            <Settings className="w-5 h-5 text-primary-foreground" />
+        <div className="flex items-center gap-4">
+          <div className={cn(
+            "w-12 h-12 rounded-2xl flex items-center justify-center",
+            "bg-gradient-to-br from-brand-500 to-brand-600",
+            "shadow-lg shadow-brand-500/25",
+            "ring-1 ring-white/10"
+          )}>
+            <Settings className="w-6 h-6 text-white" />
           </div>
           <div>
-            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
-            <p className="text-sm text-muted-foreground">{description}</p>
+            <h1 className="text-2xl font-bold text-foreground tracking-tight">{title}</h1>
+            <p className="text-sm text-muted-foreground/80 mt-0.5">{description}</p>
           </div>
         </div>
       </div>

apps/app/src/components/views/settings-view/components/settings-navigation.tsx

@@ -16,8 +16,12 @@ export function SettingsNavigation({
   onNavigate,
 }: SettingsNavigationProps) {
   return (
-    <nav className="hidden lg:block w-48 shrink-0 border-r border-border bg-card/50 backdrop-blur-sm">
-      <div className="sticky top-0 p-4 space-y-1">
+    <nav className={cn(
+      "hidden lg:block w-52 shrink-0",
+      "border-r border-border/50",
+      "bg-gradient-to-b from-card/80 via-card/60 to-card/40 backdrop-blur-xl"
+    )}>
+      <div className="sticky top-0 p-4 space-y-1.5">
         {navItems
           .filter((item) => item.id !== "danger" || currentProject)
           .map((item) => {
@@ -28,16 +32,32 @@ export function SettingsNavigation({
                 key={item.id}
                 onClick={() => onNavigate(item.id)}
                 className={cn(
-                  "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all text-left",
+                  "group w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ease-out text-left relative overflow-hidden",
                   isActive
-                    ? "bg-brand-500/10 text-brand-500 border border-brand-500/20"
-                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                    ? [
+                        "bg-gradient-to-r from-brand-500/15 via-brand-500/10 to-brand-600/5",
+                        "text-foreground",
+                        "border border-brand-500/25",
+                        "shadow-sm shadow-brand-500/5",
+                      ]
+                    : [
+                        "text-muted-foreground hover:text-foreground",
+                        "hover:bg-accent/50",
+                        "border border-transparent hover:border-border/40",
+                      ],
+                  "hover:scale-[1.01] active:scale-[0.98]"
                 )}
               >
+                {/* Active indicator bar */}
+                {isActive && (
+                  <div className="absolute inset-y-0 left-0 w-0.5 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full" />
+                )}
                 <Icon
                   className={cn(
-                    "w-4 h-4 shrink-0",
-                    isActive ? "text-brand-500" : ""
+                    "w-4 h-4 shrink-0 transition-all duration-200",
+                    isActive
+                      ? "text-brand-500"
+                      : "group-hover:text-brand-400 group-hover:scale-110"
                   )}
                 />
                 <span className="truncate">{item.label}</span>

apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
-import { Trash2, Folder } from "lucide-react";
+import { Trash2, Folder, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
 import type { Project } from "../shared/types";
 
 interface DangerZoneSectionProps {
@@ -16,28 +17,35 @@ export function DangerZoneSection({
   return (
     <div
       id="danger"
-      className="rounded-xl border border-destructive/30 bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-destructive/30",
+        "bg-gradient-to-br from-destructive/5 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-destructive/5"
+      )}
     >
-      <div className="p-6 border-b border-destructive/30">
-        <div className="flex items-center gap-2 mb-2">
-          <Trash2 className="w-5 h-5 text-destructive" />
-          <h2 className="text-lg font-semibold text-foreground">Danger Zone</h2>
+      <div className="p-6 border-b border-destructive/20 bg-gradient-to-r from-destructive/5 via-transparent to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-destructive/20 to-destructive/10 flex items-center justify-center border border-destructive/20">
+            <AlertTriangle className="w-5 h-5 text-destructive" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Danger Zone</h2>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Permanently remove this project from Automaker.
         </p>
       </div>
       <div className="p-6">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3 min-w-0">
-            <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+        <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-destructive/5 border border-destructive/10">
+          <div className="flex items-center gap-3.5 min-w-0">
+            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/15 to-brand-600/10 border border-brand-500/20 flex items-center justify-center shrink-0">
               <Folder className="w-5 h-5 text-brand-500" />
             </div>
             <div className="min-w-0">
               <p className="font-medium text-foreground truncate">
                 {project.name}
               </p>
-              <p className="text-xs text-muted-foreground truncate">
+              <p className="text-xs text-muted-foreground/70 truncate mt-0.5">
                 {project.path}
               </p>
             </div>
@@ -46,6 +54,12 @@ export function DangerZoneSection({
             variant="destructive"
             onClick={onDeleteClick}
             data-testid="delete-project-button"
+            className={cn(
+              "shrink-0",
+              "shadow-md shadow-destructive/20 hover:shadow-lg hover:shadow-destructive/25",
+              "transition-all duration-200 ease-out",
+              "hover:scale-[1.02] active:scale-[0.98]"
+            )}
           >
             <Trash2 className="w-4 h-4 mr-2" />
             Delete Project

apps/app/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx

@@ -1,6 +1,7 @@
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { FlaskConical, Settings2, TestTube, GitBranch } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface FeatureDefaultsSectionProps {
   showProfilesOnly: boolean;
@@ -22,111 +23,112 @@ export function FeatureDefaultsSection({
   return (
     <div
       id="defaults"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
     >
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center gap-2 mb-2">
-          <FlaskConical className="w-5 h-5 text-brand-500" />
-          <h2 className="text-lg font-semibold text-foreground">
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <FlaskConical className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
             Feature Defaults
           </h2>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Configure default settings for new features.
         </p>
       </div>
-      <div className="p-6 space-y-4">
+      <div className="p-6 space-y-5">
         {/* Profiles Only Setting */}
-        <div className="space-y-3">
-          <div className="flex items-start space-x-3">
-            <Checkbox
-              id="show-profiles-only"
-              checked={showProfilesOnly}
-              onCheckedChange={(checked) =>
-                onShowProfilesOnlyChange(checked === true)
-              }
-              className="mt-0.5"
-              data-testid="show-profiles-only-checkbox"
-            />
-            <div className="space-y-1">
-              <Label
-                htmlFor="show-profiles-only"
-                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-              >
-                <Settings2 className="w-4 h-4 text-brand-500" />
-                Show profiles only by default
-              </Label>
-              <p className="text-xs text-muted-foreground">
-                When enabled, the Add Feature dialog will show only AI profiles
-                and hide advanced model tweaking options (Claude SDK, thinking
-                levels). This creates a cleaner, less
-                overwhelming UI. You can always disable this to access advanced
-                settings.
-              </p>
-            </div>
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="show-profiles-only"
+            checked={showProfilesOnly}
+            onCheckedChange={(checked) =>
+              onShowProfilesOnlyChange(checked === true)
+            }
+            className="mt-1"
+            data-testid="show-profiles-only-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="show-profiles-only"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <Settings2 className="w-4 h-4 text-brand-500" />
+              Show profiles only by default
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, the Add Feature dialog will show only AI profiles
+              and hide advanced model tweaking options. This creates a cleaner, less
+              overwhelming UI.
+            </p>
           </div>
         </div>
 
         {/* Separator */}
-        <div className="border-t border-border" />
+        <div className="border-t border-border/30" />
 
         {/* Automated Testing Setting */}
-        <div className="space-y-3">
-          <div className="flex items-start space-x-3">
-            <Checkbox
-              id="default-skip-tests"
-              checked={!defaultSkipTests}
-              onCheckedChange={(checked) =>
-                onDefaultSkipTestsChange(checked !== true)
-              }
-              className="mt-0.5"
-              data-testid="default-skip-tests-checkbox"
-            />
-            <div className="space-y-1">
-              <Label
-                htmlFor="default-skip-tests"
-                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-              >
-                <TestTube className="w-4 h-4 text-brand-500" />
-                Enable automated testing by default
-              </Label>
-              <p className="text-xs text-muted-foreground">
-                When enabled, new features will use TDD (test-driven
-                development) with automated tests. When disabled, features will
-                require manual verification. You can still override this for
-                individual features.
-              </p>
-            </div>
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="default-skip-tests"
+            checked={!defaultSkipTests}
+            onCheckedChange={(checked) =>
+              onDefaultSkipTestsChange(checked !== true)
+            }
+            className="mt-1"
+            data-testid="default-skip-tests-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="default-skip-tests"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <TestTube className="w-4 h-4 text-brand-500" />
+              Enable automated testing by default
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, new features will use TDD with automated tests. When disabled, features will
+              require manual verification.
+            </p>
           </div>
         </div>
 
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
         {/* Worktree Isolation Setting */}
-        <div className="space-y-3 pt-2 border-t border-border">
-          <div className="flex items-start space-x-3">
-            <Checkbox
-              id="use-worktrees"
-              checked={useWorktrees}
-              onCheckedChange={(checked) =>
-                onUseWorktreesChange(checked === true)
-              }
-              className="mt-0.5"
-              data-testid="use-worktrees-checkbox"
-            />
-            <div className="space-y-1">
-              <Label
-                htmlFor="use-worktrees"
-                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
-              >
-                <GitBranch className="w-4 h-4 text-brand-500" />
-                Enable Git Worktree Isolation (experimental)
-              </Label>
-              <p className="text-xs text-muted-foreground">
-                Creates isolated git branches for each feature. When disabled,
-                agents work directly in the main project directory. This feature
-                is experimental and may require additional setup like branch
-                selection and merge configuration.
-              </p>
-            </div>
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="use-worktrees"
+            checked={useWorktrees}
+            onCheckedChange={(checked) =>
+              onUseWorktreesChange(checked === true)
+            }
+            className="mt-1"
+            data-testid="use-worktrees-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="use-worktrees"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <GitBranch className="w-4 h-4 text-brand-500" />
+              Enable Git Worktree Isolation
+              <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-amber-500/15 text-amber-500 border border-amber-500/20 font-medium">
+                experimental
+              </span>
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Creates isolated git branches for each feature. When disabled,
+              agents work directly in the main project directory.
+            </p>
           </div>
         </div>
       </div>

apps/app/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Settings2, Keyboard } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface KeyboardShortcutsSectionProps {
   onOpenKeyboardMap: () => void;
@@ -11,43 +12,58 @@ export function KeyboardShortcutsSection({
   return (
     <div
       id="keyboard"
-      className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden scroll-mt-6"
+      className={cn(
+        "rounded-2xl overflow-hidden scroll-mt-6",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
     >
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center gap-2 mb-2">
-          <Settings2 className="w-5 h-5 text-brand-500" />
-          <h2 className="text-lg font-semibold text-foreground">
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Settings2 className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
             Keyboard Shortcuts
           </h2>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/80 ml-12">
           Customize keyboard shortcuts for navigation and actions using the
           visual keyboard map.
         </p>
       </div>
       <div className="p-6">
         {/* Centered message directing to keyboard map */}
-        <div className="flex flex-col items-center justify-center py-16 text-center space-y-4">
+        <div className="flex flex-col items-center justify-center py-12 text-center space-y-5">
           <div className="relative">
-            <Keyboard className="w-16 h-16 text-brand-500/30" />
-            <div className="absolute inset-0 bg-brand-500/10 blur-xl rounded-full" />
+            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-brand-500/10 to-brand-600/5 flex items-center justify-center border border-brand-500/20">
+              <Keyboard className="w-10 h-10 text-brand-500/60" />
+            </div>
+            <div className="absolute inset-0 bg-brand-500/10 blur-2xl rounded-full -z-10" />
           </div>
           <div className="space-y-2 max-w-md">
             <h3 className="text-lg font-semibold text-foreground">
               Use the Visual Keyboard Map
             </h3>
-            <p className="text-sm text-muted-foreground">
-              Click the &quot;View Keyboard Map&quot; button above to customize
-              your keyboard shortcuts. The visual interface shows all available
-              keys and lets you easily edit shortcuts with single-modifier
-              restrictions.
+            <p className="text-sm text-muted-foreground/80">
+              Click the button below to customize your keyboard shortcuts. The visual
+              interface shows all available keys and lets you easily edit shortcuts.
             </p>
           </div>
           <Button
             variant="default"
             size="lg"
             onClick={onOpenKeyboardMap}
-            className="gap-2 mt-4"
+            className={cn(
+              "gap-2.5 mt-2 h-11 px-6",
+              "bg-gradient-to-r from-brand-500 to-brand-600",
+              "hover:from-brand-600 hover:to-brand-600",
+              "text-white font-medium border-0",
+              "shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25",
+              "transition-all duration-200 ease-out",
+              "hover:scale-[1.02] active:scale-[0.98]"
+            )}
           >
             <Keyboard className="w-5 h-5" />
             Open Keyboard Map

apps/app/src/components/views/welcome-view.tsx

@@ -530,17 +530,17 @@ export function WelcomeView() {
   return (
     <div className="flex-1 flex flex-col content-bg" data-testid="welcome-view">
       {/* Header Section */}
-      <div className="flex-shrink-0 border-b border-border bg-glass backdrop-blur-md">
+      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
         <div className="px-8 py-6">
-          <div className="flex items-center gap-3 mb-2">
-            <div className="w-10 h-10 rounded-xl flex items-center justify-center">
-              <img src="/logo.png" alt="Automaker Logo" className="w-10 h-10" />
+          <div className="flex items-center gap-4 animate-in fade-in slide-in-from-top-2 duration-500">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 border border-brand-500/20 flex items-center justify-center shadow-lg shadow-brand-500/10">
+              <img src="/logo.png" alt="Automaker Logo" className="w-8 h-8" />
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-foreground">
+              <h1 className="text-2xl font-bold text-foreground tracking-tight">
                 Welcome to Automaker
               </h1>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-muted-foreground mt-0.5">
                 Your autonomous AI development studio
               </p>
             </div>
@@ -550,24 +550,25 @@ export function WelcomeView() {
 
       {/* Content Area */}
       <div className="flex-1 overflow-y-auto p-8">
-        <div className="max-w-6xl mx-auto">
+        <div className="max-w-5xl mx-auto">
           {/* Quick Actions */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
+            {/* New Project Card */}
             <div
-              className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-border-glass transition-all duration-200"
+              className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 transition-all duration-300 hover:-translate-y-1"
               data-testid="new-project-card"
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/5 to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-brand-500/5 via-transparent to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
               <div className="relative p-6 h-full flex flex-col">
                 <div className="flex items-start gap-4 flex-1">
-                  <div className="w-12 h-12 rounded-lg bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
+                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/25 flex items-center justify-center group-hover:scale-105 group-hover:shadow-brand-500/40 transition-all duration-300 shrink-0">
                     <Plus className="w-6 h-6 text-white" />
                   </div>
-                  <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-foreground mb-1">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-foreground mb-1.5">
                       New Project
                     </h3>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-muted-foreground leading-relaxed">
                       Create a new project from scratch with AI-powered
                       development
                     </p>
@@ -576,7 +577,7 @@ export function WelcomeView() {
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      className="w-full mt-4 bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
+                      className="w-full mt-5 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20 hover:shadow-brand-500/30 transition-all"
                       data-testid="create-new-project"
                     >
                       <Plus className="w-4 h-4 mr-2" />
@@ -604,29 +605,30 @@ export function WelcomeView() {
               </div>
             </div>
 
+            {/* Open Project Card */}
             <div
-              className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-border-glass transition-all duration-200 cursor-pointer"
+              className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-blue-500/30 hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-1"
               onClick={handleOpenProject}
               data-testid="open-project-card"
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/5 via-transparent to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
               <div className="relative p-6 h-full flex flex-col">
                 <div className="flex items-start gap-4 flex-1">
-                  <div className="w-12 h-12 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
-                    <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-foreground transition-colors" />
+                  <div className="w-12 h-12 rounded-xl bg-muted border border-border flex items-center justify-center group-hover:bg-blue-500/10 group-hover:border-blue-500/30 group-hover:scale-105 transition-all duration-300 shrink-0">
+                    <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-blue-500 transition-colors duration-300" />
                   </div>
-                  <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-foreground mb-1">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-foreground mb-1.5">
                       Open Project
                     </h3>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-muted-foreground leading-relaxed">
                       Open an existing project folder to continue working
                     </p>
                   </div>
                 </div>
                 <Button
                   variant="secondary"
-                  className="w-full mt-4 bg-secondary hover:bg-secondary/80 text-foreground border border-border hover:border-border-glass"
+                  className="w-full mt-5 bg-secondary/80 hover:bg-secondary text-foreground border border-border hover:border-blue-500/30 transition-all"
                   data-testid="open-existing-project"
                 >
                   <FolderOpen className="w-4 h-4 mr-2" />
@@ -638,36 +640,39 @@ export function WelcomeView() {
 
           {/* Recent Projects */}
           {recentProjects.length > 0 && (
-            <div>
-              <div className="flex items-center gap-2 mb-4">
-                <Clock className="w-5 h-5 text-muted-foreground" />
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">
+              <div className="flex items-center gap-2.5 mb-5">
+                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center">
+                  <Clock className="w-4 h-4 text-muted-foreground" />
+                </div>
                 <h2 className="text-lg font-semibold text-foreground">
                   Recent Projects
                 </h2>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {recentProjects.map((project) => (
+                {recentProjects.map((project, index) => (
                   <div
                     key={project.id}
-                    className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-brand-500/50 transition-all duration-200 cursor-pointer"
+                    className="group relative rounded-xl border border-border bg-card/60 backdrop-blur-sm hover:bg-card hover:border-brand-500/40 hover:shadow-lg hover:shadow-brand-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-0.5"
                     onClick={() => handleRecentProjectClick(project)}
                     data-testid={`recent-project-${project.id}`}
+                    style={{ animationDelay: `${index * 50}ms` }}
                   >
-                    <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all"></div>
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all duration-300" />
                     <div className="relative p-4">
                       <div className="flex items-start gap-3">
-                        <div className="w-10 h-10 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:border-brand-500/50 transition-colors">
-                          <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors" />
+                        <div className="w-10 h-10 rounded-lg bg-muted/80 border border-border flex items-center justify-center group-hover:bg-brand-500/10 group-hover:border-brand-500/30 transition-all duration-300 shrink-0">
+                          <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors duration-300" />
                         </div>
                         <div className="flex-1 min-w-0">
-                          <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors">
+                          <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors duration-300">
                             {project.name}
                           </p>
-                          <p className="text-xs text-muted-foreground/70 truncate mt-0.5">
+                          <p className="text-xs text-muted-foreground/70 truncate mt-1">
                             {project.path}
                           </p>
                           {project.lastOpened && (
-                            <p className="text-xs text-muted-foreground mt-1">
+                            <p className="text-xs text-muted-foreground mt-1.5">
                               {new Date(
                                 project.lastOpened
                               ).toLocaleDateString()}
@@ -684,14 +689,14 @@ export function WelcomeView() {
 
           {/* Empty State for No Projects */}
           {recentProjects.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-12 text-center">
-              <div className="w-16 h-16 rounded-2xl bg-muted border border-border flex items-center justify-center mb-4">
-                <Sparkles className="w-8 h-8 text-muted-foreground" />
+            <div className="flex flex-col items-center justify-center py-16 text-center animate-in fade-in duration-500 delay-200">
+              <div className="w-20 h-20 rounded-2xl bg-muted/50 border border-border flex items-center justify-center mb-5">
+                <Sparkles className="w-10 h-10 text-muted-foreground/50" />
               </div>
-              <h3 className="text-lg font-semibold text-foreground mb-2">
+              <h3 className="text-xl font-semibold text-foreground mb-2">
                 No projects yet
               </h3>
-              <p className="text-sm text-zinc-400 max-w-md">
+              <p className="text-sm text-muted-foreground max-w-md leading-relaxed">
                 Get started by creating a new project or opening an existing one
               </p>
             </div>
@@ -712,35 +717,37 @@ export function WelcomeView() {
       {/* Project Initialization Dialog */}
       <Dialog open={showInitDialog} onOpenChange={setShowInitDialog}>
         <DialogContent
-          className="bg-card border-border"
+          className="bg-card border-border shadow-xl"
           data-testid="project-init-dialog"
         >
           <DialogHeader>
-            <DialogTitle className="text-foreground flex items-center gap-2">
-              <Sparkles className="w-5 h-5 text-brand-500" />
+            <DialogTitle className="text-foreground flex items-center gap-2.5">
+              <div className="w-8 h-8 rounded-lg bg-brand-500/10 flex items-center justify-center">
+                <Sparkles className="w-4 h-4 text-brand-500" />
+              </div>
               {initStatus?.isNewProject
                 ? "Project Initialized"
                 : "Project Updated"}
             </DialogTitle>
-            <DialogDescription className="text-muted-foreground">
+            <DialogDescription className="text-muted-foreground mt-1">
               {initStatus?.isNewProject
                 ? `Created .automaker directory structure for ${initStatus?.projectName}`
                 : `Updated missing files in .automaker for ${initStatus?.projectName}`}
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
-            <div className="space-y-2">
+            <div className="space-y-3">
               <p className="text-sm text-foreground font-medium">
                 Created files:
               </p>
-              <ul className="space-y-1.5">
+              <ul className="space-y-2">
                 {initStatus?.createdFiles.map((file) => (
                   <li
                     key={file}
-                    className="flex items-center gap-2 text-sm text-muted-foreground"
+                    className="flex items-center gap-2.5 text-sm text-muted-foreground"
                   >
-                    <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
-                    <code className="text-xs bg-muted px-2 py-0.5 rounded">
+                    <div className="w-2 h-2 rounded-full bg-green-500" />
+                    <code className="text-xs bg-muted px-2.5 py-1 rounded-md font-mono">
                       {file}
                     </code>
                   </li>
@@ -749,18 +756,18 @@ export function WelcomeView() {
             </div>
 
             {initStatus?.isNewProject && (
-              <div className="mt-4 p-3 rounded-lg bg-muted/50 border border-border-glass">
+              <div className="mt-5 p-4 rounded-xl bg-muted/50 border border-border">
                 {isAnalyzing ? (
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
                     <Loader2 className="w-4 h-4 text-brand-500 animate-spin" />
-                    <p className="text-sm text-brand-400">
+                    <p className="text-sm text-brand-500">
                       AI agent is analyzing your project structure...
                     </p>
                   </div>
                 ) : (
-                  <p className="text-sm text-muted-foreground">
-                    <span className="text-brand-400">Tip:</span> Edit the{" "}
-                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    <span className="text-brand-500 font-medium">Tip:</span> Edit the{" "}
+                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
                       app_spec.txt
                     </code>{" "}
                     file to describe your project. The AI agent will use this to
@@ -773,7 +780,7 @@ export function WelcomeView() {
           <DialogFooter>
             <Button
               onClick={() => setShowInitDialog(false)}
-              className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
+              className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20"
               data-testid="close-init-dialog"
             >
               Get Started
@@ -795,8 +802,8 @@ export function WelcomeView() {
           className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
           data-testid="project-opening-overlay"
         >
-          <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-card border border-border">
-            <Loader2 className="w-8 h-8 text-brand-500 animate-spin" />
+          <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-card border border-border shadow-2xl">
+            <Loader2 className="w-10 h-10 text-brand-500 animate-spin" />
             <p className="text-foreground font-medium">
               Initializing project...
             </p>

apps/app/tests/context-view.spec.ts

@@ -0,0 +1,688 @@
+import { test, expect } from "@playwright/test";
+import * as fs from "fs";
+import * as path from "path";
+import {
+  resetContextDirectory,
+  createContextFileOnDisk,
+  contextFileExistsOnDisk,
+  setupProjectWithFixture,
+  getFixturePath,
+  navigateToContext,
+  waitForFileContentToLoad,
+  switchToEditMode,
+  waitForContextFile,
+  selectContextFile,
+  simulateFileDrop,
+  setContextEditorContent,
+  getContextEditorContent,
+  clickElement,
+  fillInput,
+  getByTestId,
+  waitForNetworkIdle,
+} from "./utils";
+
+const WORKSPACE_ROOT = path.resolve(process.cwd(), "../..");
+const TEST_IMAGE_SRC = path.join(WORKSPACE_ROOT, "apps/app/public/logo.png");
+
+// Configure all tests to run serially to prevent interference with shared context directory
+test.describe.configure({ mode: "serial" });
+
+// ============================================================================
+// Test Suite 1: Context View - File Management
+// ============================================================================
+test.describe("Context View - File Management", () => {
+
+  test.beforeEach(async () => {
+    resetContextDirectory();
+  });
+
+  test.afterEach(async () => {
+    resetContextDirectory();
+  });
+
+  test("should create a new MD context file", async ({ page }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Click Add File button
+    await clickElement(page, "add-context-file");
+    await page.waitForSelector('[data-testid="add-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    // Select text type (should be default)
+    await clickElement(page, "add-text-type");
+
+    // Enter filename
+    await fillInput(page, "new-file-name", "test-context.md");
+
+    // Enter content
+    const testContent = "# Test Context\n\nThis is test content";
+    await fillInput(page, "new-file-content", testContent);
+
+    // Click confirm
+    await clickElement(page, "confirm-add-file");
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="add-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Wait for file list to refresh (file should appear)
+    await waitForContextFile(page, "test-context.md", 10000);
+
+    // Verify file appears in list
+    const fileButton = await getByTestId(page, "context-file-test-context.md");
+    await expect(fileButton).toBeVisible();
+
+    // Click on the file and wait for it to be selected
+    await selectContextFile(page, "test-context.md");
+
+    // Wait for content to load
+    await waitForFileContentToLoad(page);
+
+    // Switch to edit mode if in preview mode (markdown files default to preview)
+    await switchToEditMode(page);
+
+    // Wait for editor to be visible
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    // Verify content in editor
+    const editorContent = await getContextEditorContent(page);
+    expect(editorContent).toBe(testContent);
+  });
+
+  test("should edit an existing MD context file", async ({ page }) => {
+    // Create a test file on disk first
+    const originalContent = "# Original Content\n\nThis will be edited.";
+    createContextFileOnDisk("edit-test.md", originalContent);
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Click on the existing file and wait for it to be selected
+    await selectContextFile(page, "edit-test.md");
+
+    // Wait for file content to load
+    await waitForFileContentToLoad(page);
+
+    // Switch to edit mode (markdown files open in preview mode by default)
+    await switchToEditMode(page);
+
+    // Wait for editor
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    // Modify content
+    const newContent = "# Modified Content\n\nThis has been edited.";
+    await setContextEditorContent(page, newContent);
+
+    // Click save
+    await clickElement(page, "save-context-file");
+
+    // Wait for save to complete
+    await page.waitForFunction(
+      () =>
+        document
+          .querySelector('[data-testid="save-context-file"]')
+          ?.textContent?.includes("Saved"),
+      { timeout: 5000 }
+    );
+
+    // Reload page
+    await page.reload();
+    await waitForNetworkIdle(page);
+
+    // Navigate back to context view
+    await navigateToContext(page);
+
+    // Wait for file to appear after reload and select it
+    await selectContextFile(page, "edit-test.md");
+
+    // Wait for content to load
+    await waitForFileContentToLoad(page);
+
+    // Switch to edit mode (markdown files open in preview mode)
+    await switchToEditMode(page);
+
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    // Verify content persisted
+    const persistedContent = await getContextEditorContent(page);
+    expect(persistedContent).toBe(newContent);
+  });
+
+  test("should remove an MD context file", async ({ page }) => {
+    // Create a test file on disk first
+    createContextFileOnDisk("delete-test.md", "# Delete Me");
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Click on the file to select it
+    const fileButton = await getByTestId(page, "context-file-delete-test.md");
+    await fileButton.waitFor({ state: "visible", timeout: 5000 });
+    await fileButton.click();
+
+    // Click delete button
+    await clickElement(page, "delete-context-file");
+
+    // Wait for delete dialog
+    await page.waitForSelector('[data-testid="delete-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    // Confirm deletion
+    await clickElement(page, "confirm-delete-file");
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="delete-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify file is removed from list
+    const deletedFile = await getByTestId(page, "context-file-delete-test.md");
+    await expect(deletedFile).not.toBeVisible();
+
+    // Verify file is removed from disk
+    expect(contextFileExistsOnDisk("delete-test.md")).toBe(false);
+  });
+
+  test("should upload an image context file", async ({ page }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Click Add File button
+    await clickElement(page, "add-context-file");
+    await page.waitForSelector('[data-testid="add-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    // Select image type
+    await clickElement(page, "add-image-type");
+
+    // Enter filename
+    await fillInput(page, "new-file-name", "test-image.png");
+
+    // Upload image using file input
+    await page.setInputFiles(
+      '[data-testid="image-upload-input"]',
+      TEST_IMAGE_SRC
+    );
+
+    // Wait for image preview to appear (indicates upload success)
+    const addDialog = await getByTestId(page, "add-context-dialog");
+    await addDialog.locator("img").waitFor({ state: "visible" });
+
+    // Click confirm
+    await clickElement(page, "confirm-add-file");
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="add-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify file appears in list
+    const fileButton = await getByTestId(page, "context-file-test-image.png");
+    await expect(fileButton).toBeVisible();
+
+    // Click on the image to view it
+    await fileButton.click();
+
+    // Verify image preview is displayed
+    await page.waitForSelector('[data-testid="image-preview"]', {
+      timeout: 5000,
+    });
+    const imagePreview = await getByTestId(page, "image-preview");
+    await expect(imagePreview).toBeVisible();
+  });
+
+  test("should remove an image context file", async ({ page }) => {
+    // Create a test image file on disk as base64 data URL (matching app's storage format)
+    const imageContent = fs.readFileSync(TEST_IMAGE_SRC);
+    const base64DataUrl = `data:image/png;base64,${imageContent.toString("base64")}`;
+    const contextPath = path.join(getFixturePath(), ".automaker/context");
+    fs.writeFileSync(path.join(contextPath, "delete-image.png"), base64DataUrl);
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Wait for the image file and select it
+    await selectContextFile(page, "delete-image.png");
+
+    // Wait for file content (image preview) to load
+    await waitForFileContentToLoad(page);
+
+    // Click delete button
+    await clickElement(page, "delete-context-file");
+
+    // Wait for delete dialog
+    await page.waitForSelector('[data-testid="delete-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    // Confirm deletion
+    await clickElement(page, "confirm-delete-file");
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="delete-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify file is removed from list
+    const deletedImageFile = await getByTestId(page, "context-file-delete-image.png");
+    await expect(deletedImageFile).not.toBeVisible();
+  });
+
+  test("should toggle markdown preview mode", async ({ page }) => {
+    // Create a markdown file with content
+    const mdContent =
+      "# Heading\n\n**Bold text** and *italic text*\n\n- List item 1\n- List item 2";
+    createContextFileOnDisk("preview-test.md", mdContent);
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Click on the markdown file
+    const fileButton = await getByTestId(page, "context-file-preview-test.md");
+    await fileButton.waitFor({ state: "visible", timeout: 5000 });
+    await fileButton.click();
+
+    // Wait for content to load (markdown files open in preview mode by default)
+    await waitForFileContentToLoad(page);
+
+    // Check if preview button is visible (indicates it's a markdown file)
+    const previewToggle = await getByTestId(page, "toggle-preview-mode");
+    await expect(previewToggle).toBeVisible();
+
+    // Markdown files always open in preview mode by default (see context-view.tsx:163)
+    // Verify we're in preview mode
+    const markdownPreview = await getByTestId(page, "markdown-preview");
+    await expect(markdownPreview).toBeVisible();
+
+    // Click to switch to edit mode
+    await previewToggle.click();
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    // Verify editor is shown
+    const editor = await getByTestId(page, "context-editor");
+    await expect(editor).toBeVisible();
+    await expect(markdownPreview).not.toBeVisible();
+
+    // Click to switch back to preview mode
+    await previewToggle.click();
+    await page.waitForSelector('[data-testid="markdown-preview"]', {
+      timeout: 5000,
+    });
+
+    // Verify preview is shown
+    await expect(markdownPreview).toBeVisible();
+  });
+});
+
+// ============================================================================
+// Test Suite 2: Context View - Drag and Drop
+// ============================================================================
+test.describe("Context View - Drag and Drop", () => {
+  test.beforeEach(async () => {
+    resetContextDirectory();
+  });
+
+  test.afterEach(async () => {
+    resetContextDirectory();
+  });
+
+  test("should handle drag and drop of MD file onto textarea in add dialog", async ({
+    page,
+  }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Open add file dialog
+    await clickElement(page, "add-context-file");
+    await page.waitForSelector('[data-testid="add-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    // Ensure text type is selected
+    await clickElement(page, "add-text-type");
+
+    // Simulate drag and drop of a .md file onto the textarea
+    const droppedContent = "# Dropped Content\n\nThis was dragged and dropped.";
+    await simulateFileDrop(
+      page,
+      '[data-testid="new-file-content"]',
+      "dropped-file.md",
+      droppedContent
+    );
+
+    // Wait for content to be populated in textarea
+    const textarea = await getByTestId(page, "new-file-content");
+    await textarea.waitFor({ state: "visible" });
+    await expect(textarea).toHaveValue(droppedContent);
+
+    // Verify content is populated in textarea
+    const textareaContent = await textarea.inputValue();
+    expect(textareaContent).toBe(droppedContent);
+
+    // Verify filename is auto-filled
+    const filenameValue = await page
+      .locator('[data-testid="new-file-name"]')
+      .inputValue();
+    expect(filenameValue).toBe("dropped-file.md");
+
+    // Confirm and create the file
+    await clickElement(page, "confirm-add-file");
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="add-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify file was created
+    const droppedFile = await getByTestId(page, "context-file-dropped-file.md");
+    await expect(droppedFile).toBeVisible();
+  });
+
+  test("should handle drag and drop of file onto main view", async ({
+    page,
+  }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Wait for the context view to be fully loaded
+    await page.waitForSelector('[data-testid="context-file-list"]', {
+      timeout: 5000,
+    });
+
+    // Simulate drag and drop onto the drop zone
+    const droppedContent = "This is a text file dropped onto the main view.";
+    await simulateFileDrop(
+      page,
+      '[data-testid="context-drop-zone"]',
+      "main-drop.txt",
+      droppedContent
+    );
+
+    // Wait for file to appear in the list (drag-drop triggers file creation)
+    await waitForContextFile(page, "main-drop.txt", 15000);
+
+    // Verify file appears in the file list
+    const fileButton = await getByTestId(page, "context-file-main-drop.txt");
+    await expect(fileButton).toBeVisible();
+
+    // Select file and verify content
+    await fileButton.click();
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    const editorContent = await getContextEditorContent(page);
+    expect(editorContent).toBe(droppedContent);
+  });
+});
+
+// ============================================================================
+// Test Suite 3: Context View - Edge Cases
+// ============================================================================
+test.describe("Context View - Edge Cases", () => {
+  test.beforeEach(async () => {
+    resetContextDirectory();
+  });
+
+  test.afterEach(async () => {
+    resetContextDirectory();
+  });
+
+  test("should handle duplicate filename (overwrite behavior)", async ({
+    page,
+  }) => {
+    // Create an existing file
+    createContextFileOnDisk("test.md", "# Original Content");
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Verify the original file exists
+    const originalFile = await getByTestId(page, "context-file-test.md");
+    await expect(originalFile).toBeVisible();
+
+    // Try to create another file with the same name
+    await clickElement(page, "add-context-file");
+    await page.waitForSelector('[data-testid="add-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    await clickElement(page, "add-text-type");
+    await fillInput(page, "new-file-name", "test.md");
+    await fillInput(page, "new-file-content", "# New Content - Overwritten");
+
+    await clickElement(page, "confirm-add-file");
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="add-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // File should still exist (was overwritten)
+    await expect(originalFile).toBeVisible();
+
+    // Select the file and verify the new content
+    await originalFile.click();
+
+    // Wait for content to load
+    await waitForFileContentToLoad(page);
+
+    // Switch to edit mode (markdown files open in preview mode)
+    await switchToEditMode(page);
+
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    const editorContent = await getContextEditorContent(page);
+    expect(editorContent).toBe("# New Content - Overwritten");
+  });
+
+  test("should handle special characters in filename", async ({ page }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Test file with parentheses
+    await clickElement(page, "add-context-file");
+    await page.waitForSelector('[data-testid="add-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    await clickElement(page, "add-text-type");
+    await fillInput(page, "new-file-name", "context (1).md");
+    await fillInput(page, "new-file-content", "Content with parentheses in filename");
+
+    await clickElement(page, "confirm-add-file");
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="add-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify file is created - use CSS escape for special characters
+    const fileWithParens = await getByTestId(page, "context-file-context (1).md");
+    await expect(fileWithParens).toBeVisible();
+
+    // Test file with hyphens and underscores
+    await clickElement(page, "add-context-file");
+    await page.waitForSelector('[data-testid="add-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    await clickElement(page, "add-text-type");
+    await fillInput(page, "new-file-name", "test-file_v2.md");
+    await fillInput(page, "new-file-content", "Content with hyphens and underscores");
+
+    await clickElement(page, "confirm-add-file");
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="add-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify file is created
+    const fileWithHyphens = await getByTestId(page, "context-file-test-file_v2.md");
+    await expect(fileWithHyphens).toBeVisible();
+
+    // Verify both files are accessible
+    await fileWithHyphens.click();
+
+    // Wait for content to load
+    await waitForFileContentToLoad(page);
+
+    // Switch to edit mode (markdown files open in preview mode)
+    await switchToEditMode(page);
+
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    const content = await getContextEditorContent(page);
+    expect(content).toBe("Content with hyphens and underscores");
+  });
+
+  test("should handle empty content", async ({ page }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Create file with empty content
+    await clickElement(page, "add-context-file");
+    await page.waitForSelector('[data-testid="add-context-dialog"]', {
+      timeout: 5000,
+    });
+
+    await clickElement(page, "add-text-type");
+    await fillInput(page, "new-file-name", "empty-file.md");
+    // Don't fill any content - leave it empty
+
+    await clickElement(page, "confirm-add-file");
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="add-context-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify file is created
+    const emptyFile = await getByTestId(page, "context-file-empty-file.md");
+    await expect(emptyFile).toBeVisible();
+
+    // Select file and verify editor shows empty content
+    await emptyFile.click();
+
+    // Wait for content to load
+    await waitForFileContentToLoad(page);
+
+    // Switch to edit mode (markdown files open in preview mode)
+    await switchToEditMode(page);
+
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    const editorContent = await getContextEditorContent(page);
+    expect(editorContent).toBe("");
+
+    // Verify save works with empty content
+    // The save button should be disabled when there are no changes
+    // Let's add some content first, then clear it and save
+    await setContextEditorContent(page, "temporary");
+    await setContextEditorContent(page, "");
+
+    // Save should work
+    await clickElement(page, "save-context-file");
+    await page.waitForFunction(
+      () =>
+        document
+          .querySelector('[data-testid="save-context-file"]')
+          ?.textContent?.includes("Saved"),
+      { timeout: 5000 }
+    );
+  });
+
+  test("should verify persistence across page refresh", async ({ page }) => {
+    // Create a file directly on disk to ensure it persists across refreshes
+    const testContent = "# Persistence Test\n\nThis content should persist.";
+    createContextFileOnDisk("persist-test.md", testContent);
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+
+    await navigateToContext(page);
+
+    // Verify file exists before refresh
+    await waitForContextFile(page, "persist-test.md", 10000);
+
+    // Refresh the page
+    await page.reload();
+    await waitForNetworkIdle(page);
+
+    // Navigate back to context view
+    await navigateToContext(page);
+
+    // Select the file after refresh (uses robust clicking mechanism)
+    await selectContextFile(page, "persist-test.md");
+
+    // Wait for file content to load
+    await waitForFileContentToLoad(page);
+
+    // Switch to edit mode (markdown files open in preview mode)
+    await switchToEditMode(page);
+
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+
+    const persistedContent = await getContextEditorContent(page);
+    expect(persistedContent).toBe(testContent);
+  });
+});

apps/app/tests/spec-editor-persistence.spec.ts

@@ -1,157 +1,18 @@
-import { test, expect, Page } from "@playwright/test";
-import * as fs from "fs";
-import * as path from "path";
-
-// Resolve the workspace root - handle both running from apps/app and from root
-function getWorkspaceRoot(): string {
-  const cwd = process.cwd();
-  if (cwd.includes("apps/app")) {
-    return path.resolve(cwd, "../..");
-  }
-  return cwd;
-}
-
-const WORKSPACE_ROOT = getWorkspaceRoot();
-const FIXTURE_PATH = path.join(WORKSPACE_ROOT, "test/fixtures/projectA");
-const SPEC_FILE_PATH = path.join(FIXTURE_PATH, ".automaker/app_spec.txt");
-
-// Original spec content for resetting between tests
-const ORIGINAL_SPEC_CONTENT = `<app_spec>
-  <name>Test Project A</name>
-  <description>A test fixture project for Playwright testing</description>
-  <tech_stack>
-    <item>TypeScript</item>
-    <item>React</item>
-  </tech_stack>
-</app_spec>
-`;
-
-/**
- * Reset the fixture's app_spec.txt to original content
- */
-function resetFixtureSpec() {
-  const dir = path.dirname(SPEC_FILE_PATH);
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-  fs.writeFileSync(SPEC_FILE_PATH, ORIGINAL_SPEC_CONTENT);
-}
-
-/**
- * Set up localStorage with a project pointing to our test fixture
- * Note: In CI, setup wizard is also skipped via NEXT_PUBLIC_SKIP_SETUP env var
- */
-async function setupProjectWithFixture(page: Page, projectPath: string) {
-  await page.addInitScript((path: string) => {
-    const mockProject = {
-      id: "test-project-fixture",
-      name: "projectA",
-      path: path,
-      lastOpened: new Date().toISOString(),
-    };
-
-    const mockState = {
-      state: {
-        projects: [mockProject],
-        currentProject: mockProject,
-        currentView: "board",
-        theme: "dark",
-        sidebarOpen: true,
-        apiKeys: { anthropic: "", google: "" },
-        chatSessions: [],
-        chatHistoryOpen: false,
-        maxConcurrency: 3,
-      },
-      version: 0,
-    };
-
-    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
-
-    // Also mark setup as complete (fallback for when NEXT_PUBLIC_SKIP_SETUP isn't set)
-    const setupState = {
-      state: {
-        isFirstRun: false,
-        setupComplete: true,
-        currentStep: "complete",
-        skipClaudeSetup: false,
-      },
-      version: 0,
-    };
-    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
-  }, projectPath);
-}
-
-/**
- * Navigate to spec editor via sidebar
- */
-async function navigateToSpecEditor(page: Page) {
-  // Click on the Spec Editor nav item in the sidebar
-  const specNavButton = page.locator('[data-testid="nav-spec"]');
-  await specNavButton.waitFor({ state: "visible", timeout: 10000 });
-  await specNavButton.click();
-
-  // Wait for the spec view to be visible
-  await page.waitForSelector('[data-testid="spec-view"]', { timeout: 10000 });
-}
-
-/**
- * Get the CodeMirror editor content
- */
-async function getEditorContent(page: Page): Promise<string> {
-  // CodeMirror uses a contenteditable div with class .cm-content
-  const content = await page
-    .locator('[data-testid="spec-editor"] .cm-content')
-    .textContent();
-  return content || "";
-}
-
-/**
- * Set the CodeMirror editor content by selecting all and typing
- */
-async function setEditorContent(page: Page, content: string) {
-  // Click on the editor to focus it
-  const editor = page.locator('[data-testid="spec-editor"] .cm-content');
-  await editor.click();
-
-  // Wait for focus
-  await page.waitForTimeout(200);
-
-  // Select all content (Cmd+A on Mac, Ctrl+A on others)
-  const isMac = process.platform === "darwin";
-  await page.keyboard.press(isMac ? "Meta+a" : "Control+a");
-
-  // Wait for selection
-  await page.waitForTimeout(100);
-
-  // Delete the selected content first
-  await page.keyboard.press("Backspace");
-
-  // Wait for deletion
-  await page.waitForTimeout(100);
-
-  // Type the new content
-  await page.keyboard.type(content, { delay: 10 });
-
-  // Wait for typing to complete
-  await page.waitForTimeout(200);
-}
-
-/**
- * Click the save button
- */
-async function clickSaveButton(page: Page) {
-  const saveButton = page.locator('[data-testid="save-spec"]');
-  await saveButton.click();
-
-  // Wait for the button text to change to "Saved" indicating save is complete
-  await page.waitForFunction(
-    () => {
-      const btn = document.querySelector('[data-testid="save-spec"]');
-      return btn?.textContent?.includes("Saved");
-    },
-    { timeout: 5000 }
-  );
-}
+import { test, expect } from "@playwright/test";
+import {
+  resetFixtureSpec,
+  setupProjectWithFixture,
+  getFixturePath,
+  navigateToSpecEditor,
+  getEditorContent,
+  setEditorContent,
+  clickSaveButton,
+  getByTestId,
+  clickElement,
+  fillInput,
+  waitForNetworkIdle,
+  waitForElement,
+} from "./utils";
 
 test.describe("Spec Editor Persistence", () => {
   test.beforeEach(async () => {
@@ -168,31 +29,29 @@ test.describe("Spec Editor Persistence", () => {
     page,
   }) => {
     // Use the resolved fixture path
-    const fixturePath = FIXTURE_PATH;
+    const fixturePath = getFixturePath();
 
     // Step 1: Set up the project in localStorage pointing to our fixture
     await setupProjectWithFixture(page, fixturePath);
 
     // Step 2: Navigate to the app
     await page.goto("/");
-    await page.waitForLoadState("networkidle");
+    await waitForNetworkIdle(page);
 
     // Step 3: Verify we're on the dashboard with the project loaded
     // The sidebar should show the project selector
-    const sidebar = page.locator('[data-testid="sidebar"]');
+    const sidebar = await getByTestId(page, "sidebar");
     await sidebar.waitFor({ state: "visible", timeout: 10000 });
 
     // Step 4: Click on the Spec Editor in the sidebar
     await navigateToSpecEditor(page);
 
     // Step 5: Wait for the spec editor to load
-    const specEditor = page.locator('[data-testid="spec-editor"]');
+    const specEditor = await getByTestId(page, "spec-editor");
     await specEditor.waitFor({ state: "visible", timeout: 10000 });
 
     // Step 6: Wait for CodeMirror to initialize (it has a .cm-content element)
-    await page.waitForSelector('[data-testid="spec-editor"] .cm-content', {
-      timeout: 10000,
-    });
+    await specEditor.locator(".cm-content").waitFor({ state: "visible", timeout: 10000 });
 
     // Small delay to ensure editor is fully initialized
     await page.waitForTimeout(500);
@@ -205,19 +64,18 @@ test.describe("Spec Editor Persistence", () => {
 
     // Step 9: Refresh the page
     await page.reload();
-    await page.waitForLoadState("networkidle");
+    await waitForNetworkIdle(page);
 
     // Step 10: Navigate back to the spec editor
     // After reload, we need to wait for the app to initialize
-    await page.waitForSelector('[data-testid="sidebar"]', { timeout: 10000 });
+    await waitForElement(page, "sidebar", { timeout: 10000 });
 
     // Navigate to spec editor again
     await navigateToSpecEditor(page);
 
     // Wait for CodeMirror to be ready
-    await page.waitForSelector('[data-testid="spec-editor"] .cm-content', {
-      timeout: 10000,
-    });
+    const specEditorAfterReload = await getByTestId(page, "spec-editor");
+    await specEditorAfterReload.locator(".cm-content").waitFor({ state: "visible", timeout: 10000 });
 
     // Small delay to ensure editor content is loaded
     await page.waitForTimeout(500);
@@ -269,16 +127,14 @@ test.describe("Spec Editor Persistence", () => {
 
     // Navigate to the app
     await page.goto("/");
-    await page.waitForLoadState("networkidle");
+    await waitForNetworkIdle(page);
 
     // Wait for the sidebar to be visible
-    const sidebar = page.locator('[data-testid="sidebar"]');
+    const sidebar = await getByTestId(page, "sidebar");
     await sidebar.waitFor({ state: "visible", timeout: 10000 });
 
     // Click the Open Project button
-    const openProjectButton = page.locator(
-      '[data-testid="open-project-button"]'
-    );
+    const openProjectButton = await getByTestId(page, "open-project-button");
 
     // Check if the button is visible (it might not be in collapsed sidebar)
     const isButtonVisible = await openProjectButton
@@ -286,7 +142,7 @@ test.describe("Spec Editor Persistence", () => {
       .catch(() => false);
 
     if (isButtonVisible) {
-      await openProjectButton.click();
+      await clickElement(page, "open-project-button");
 
       // The file browser dialog should open
       // Note: In web mode, this might use the FileBrowserDialog component
@@ -341,7 +197,7 @@ test.describe("Spec Editor - Full Open Project Flow", () => {
   }) => {
     // Navigate to app first
     await page.goto("/");
-    await page.waitForLoadState("networkidle");
+    await waitForNetworkIdle(page);
 
     // Set up localStorage state (without a current project, but mark setup complete)
     // Using evaluate instead of addInitScript so it only runs once
@@ -378,17 +234,15 @@ test.describe("Spec Editor - Full Open Project Flow", () => {
 
     // Reload to apply the localStorage state
     await page.reload();
-    await page.waitForLoadState("networkidle");
+    await waitForNetworkIdle(page);
 
     // Wait for sidebar
-    await page.waitForSelector('[data-testid="sidebar"]', { timeout: 10000 });
+    await waitForElement(page, "sidebar", { timeout: 10000 });
 
     // Click the Open Project button
-    const openProjectButton = page.locator(
-      '[data-testid="open-project-button"]'
-    );
+    const openProjectButton = await getByTestId(page, "open-project-button");
     await openProjectButton.waitFor({ state: "visible", timeout: 10000 });
-    await openProjectButton.click();
+    await clickElement(page, "open-project-button");
 
     // Wait for the file browser dialog to open
     const dialogTitle = page.locator('text="Select Project Directory"');
@@ -401,15 +255,14 @@ test.describe("Spec Editor - Full Open Project Flow", () => {
     );
 
     // Use the path input to directly navigate to the fixture directory
-    const pathInput = page.locator('[data-testid="path-input"]');
+    const pathInput = await getByTestId(page, "path-input");
     await pathInput.waitFor({ state: "visible", timeout: 5000 });
 
     // Clear the input and type the full path to the fixture
-    await pathInput.fill(FIXTURE_PATH);
+    await fillInput(page, "path-input", getFixturePath());
 
     // Click the Go button to navigate to the path
-    const goButton = page.locator('[data-testid="go-to-path-button"]');
-    await goButton.click();
+    await clickElement(page, "go-to-path-button");
 
     // Wait for loading to complete
     await page.waitForFunction(
@@ -435,15 +288,14 @@ test.describe("Spec Editor - Full Open Project Flow", () => {
     await page.waitForTimeout(500);
 
     // Navigate to spec editor
-    const specNav = page.locator('[data-testid="nav-spec"]');
+    const specNav = await getByTestId(page, "nav-spec");
     await specNav.waitFor({ state: "visible", timeout: 10000 });
-    await specNav.click();
+    await clickElement(page, "nav-spec");
 
     // Wait for spec view with the editor (not the empty state)
-    await page.waitForSelector('[data-testid="spec-view"]', { timeout: 10000 });
-    await page.waitForSelector('[data-testid="spec-editor"] .cm-content', {
-      timeout: 10000,
-    });
+    await waitForElement(page, "spec-view", { timeout: 10000 });
+    const specEditorForOpenFlow = await getByTestId(page, "spec-editor");
+    await specEditorForOpenFlow.locator(".cm-content").waitFor({ state: "visible", timeout: 10000 });
     await page.waitForTimeout(500);
 
     // Edit the content
@@ -454,15 +306,14 @@ test.describe("Spec Editor - Full Open Project Flow", () => {
 
     // Refresh and verify persistence
     await page.reload();
-    await page.waitForLoadState("networkidle");
+    await waitForNetworkIdle(page);
 
     // Navigate back to spec editor
     await specNav.waitFor({ state: "visible", timeout: 10000 });
-    await specNav.click();
+    await clickElement(page, "nav-spec");
 
-    await page.waitForSelector('[data-testid="spec-editor"] .cm-content', {
-      timeout: 10000,
-    });
+    const specEditorAfterRefresh = await getByTestId(page, "spec-editor");
+    await specEditorAfterRefresh.locator(".cm-content").waitFor({ state: "visible", timeout: 10000 });
     await page.waitForTimeout(500);
 
     // Verify the content persisted

apps/app/tests/utils/components/autocomplete.ts

@@ -0,0 +1,59 @@
+import { Page, Locator } from "@playwright/test";
+import { waitForElement, waitForElementHidden } from "../core/waiting";
+
+/**
+ * Check if the category autocomplete dropdown is visible
+ */
+export async function isCategoryAutocompleteListVisible(
+  page: Page
+): Promise<boolean> {
+  const list = page.locator('[data-testid="category-autocomplete-list"]');
+  return await list.isVisible();
+}
+
+/**
+ * Wait for the category autocomplete dropdown to be visible
+ */
+export async function waitForCategoryAutocompleteList(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, "category-autocomplete-list", options);
+}
+
+/**
+ * Wait for the category autocomplete dropdown to be hidden
+ */
+export async function waitForCategoryAutocompleteListHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, "category-autocomplete-list", options);
+}
+
+/**
+ * Click a category option in the autocomplete dropdown
+ */
+export async function clickCategoryOption(
+  page: Page,
+  categoryName: string
+): Promise<void> {
+  const optionTestId = `category-option-${categoryName
+    .toLowerCase()
+    .replace(/\s+/g, "-")}`;
+  const option = page.locator(`[data-testid="${optionTestId}"]`);
+  await option.click();
+}
+
+/**
+ * Get a category option element by name
+ */
+export async function getCategoryOption(
+  page: Page,
+  categoryName: string
+): Promise<Locator> {
+  const optionTestId = `category-option-${categoryName
+    .toLowerCase()
+    .replace(/\s+/g, "-")}`;
+  return page.locator(`[data-testid="${optionTestId}"]`);
+}

apps/app/tests/utils/components/dialogs.ts

@@ -0,0 +1,200 @@
+import { Page, Locator } from "@playwright/test";
+import { clickElement } from "../core/interactions";
+import { waitForElement, waitForElementHidden } from "../core/waiting";
+
+/**
+ * Check if the add feature dialog is visible
+ */
+export async function isAddFeatureDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="add-feature-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the add context file dialog is visible
+ */
+export async function isAddContextDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="add-context-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the edit feature dialog is visible
+ */
+export async function isEditFeatureDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="edit-feature-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for the edit feature dialog to be visible
+ */
+export async function waitForEditFeatureDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, "edit-feature-dialog", options);
+}
+
+/**
+ * Get the edit feature description input/textarea element
+ */
+export async function getEditFeatureDescriptionInput(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="edit-feature-description"]');
+}
+
+/**
+ * Check if the edit feature description field is a textarea
+ */
+export async function isEditFeatureDescriptionTextarea(
+  page: Page
+): Promise<boolean> {
+  const element = page.locator('[data-testid="edit-feature-description"]');
+  const tagName = await element.evaluate((el) => el.tagName.toLowerCase());
+  return tagName === "textarea";
+}
+
+/**
+ * Open the edit dialog for a specific feature
+ */
+export async function openEditFeatureDialog(
+  page: Page,
+  featureId: string
+): Promise<void> {
+  await clickElement(page, `edit-feature-${featureId}`);
+  await waitForEditFeatureDialog(page);
+}
+
+/**
+ * Fill the edit feature description field
+ */
+export async function fillEditFeatureDescription(
+  page: Page,
+  value: string
+): Promise<void> {
+  const input = await getEditFeatureDescriptionInput(page);
+  await input.fill(value);
+}
+
+/**
+ * Click the confirm edit feature button
+ */
+export async function confirmEditFeature(page: Page): Promise<void> {
+  await clickElement(page, "confirm-edit-feature");
+}
+
+/**
+ * Get the delete confirmation dialog
+ */
+export async function getDeleteConfirmationDialog(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="delete-confirmation-dialog"]');
+}
+
+/**
+ * Check if the delete confirmation dialog is visible
+ */
+export async function isDeleteConfirmationDialogVisible(
+  page: Page
+): Promise<boolean> {
+  const dialog = page.locator('[data-testid="delete-confirmation-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for the delete confirmation dialog to appear
+ */
+export async function waitForDeleteConfirmationDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, "delete-confirmation-dialog", options);
+}
+
+/**
+ * Wait for the delete confirmation dialog to be hidden
+ */
+export async function waitForDeleteConfirmationDialogHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, "delete-confirmation-dialog", options);
+}
+
+/**
+ * Click the confirm delete button in the delete confirmation dialog
+ */
+export async function clickConfirmDeleteButton(page: Page): Promise<void> {
+  await clickElement(page, "confirm-delete-button");
+}
+
+/**
+ * Click the cancel delete button in the delete confirmation dialog
+ */
+export async function clickCancelDeleteButton(page: Page): Promise<void> {
+  await clickElement(page, "cancel-delete-button");
+}
+
+/**
+ * Check if the follow-up dialog is visible
+ */
+export async function isFollowUpDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="follow-up-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for the follow-up dialog to be visible
+ */
+export async function waitForFollowUpDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, "follow-up-dialog", options);
+}
+
+/**
+ * Wait for the follow-up dialog to be hidden
+ */
+export async function waitForFollowUpDialogHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, "follow-up-dialog", options);
+}
+
+/**
+ * Click the confirm follow-up button in the follow-up dialog
+ */
+export async function clickConfirmFollowUp(page: Page): Promise<void> {
+  await clickElement(page, "confirm-follow-up");
+}
+
+/**
+ * Check if the project initialization dialog is visible
+ */
+export async function isProjectInitDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="project-init-dialog"]');
+  return await dialog.isVisible();
+}
+
+/**
+ * Wait for the project initialization dialog to appear
+ */
+export async function waitForProjectInitDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, "project-init-dialog", options);
+}
+
+/**
+ * Close the project initialization dialog
+ */
+export async function closeProjectInitDialog(page: Page): Promise<void> {
+  const closeButton = page.locator('[data-testid="close-init-dialog"]');
+  await closeButton.click();
+}

apps/app/tests/utils/components/modals.ts

@@ -0,0 +1,104 @@
+import { Page, Locator } from "@playwright/test";
+import { waitForElement, waitForElementHidden } from "../core/waiting";
+
+/**
+ * Check if the agent output modal is visible
+ */
+export async function isAgentOutputModalVisible(page: Page): Promise<boolean> {
+  const modal = page.locator('[data-testid="agent-output-modal"]');
+  return await modal.isVisible();
+}
+
+/**
+ * Wait for the agent output modal to be visible
+ */
+export async function waitForAgentOutputModal(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, "agent-output-modal", options);
+}
+
+/**
+ * Wait for the agent output modal to be hidden
+ */
+export async function waitForAgentOutputModalHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, "agent-output-modal", options);
+}
+
+/**
+ * Get the modal title/description text to verify which feature's output is being shown
+ */
+export async function getAgentOutputModalDescription(
+  page: Page
+): Promise<string | null> {
+  const modal = page.locator('[data-testid="agent-output-modal"]');
+  const description = modal
+    .locator('[id="radix-\\:r.+\\:-description"]')
+    .first();
+  return await description.textContent().catch(() => null);
+}
+
+/**
+ * Check the dialog description content in the agent output modal
+ */
+export async function getOutputModalDescription(
+  page: Page
+): Promise<string | null> {
+  const modalDescription = page.locator(
+    '[data-testid="agent-output-modal"] [data-slot="dialog-description"]'
+  );
+  return await modalDescription.textContent().catch(() => null);
+}
+
+/**
+ * Get the agent output modal description element
+ */
+export async function getAgentOutputModalDescriptionElement(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="agent-output-description"]');
+}
+
+/**
+ * Check if the agent output modal description is scrollable
+ */
+export async function isAgentOutputDescriptionScrollable(
+  page: Page
+): Promise<boolean> {
+  const description = page.locator('[data-testid="agent-output-description"]');
+  const scrollInfo = await description.evaluate((el) => {
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      isScrollable: el.scrollHeight > el.clientHeight,
+    };
+  });
+  return scrollInfo.isScrollable;
+}
+
+/**
+ * Get scroll dimensions of the agent output modal description
+ */
+export async function getAgentOutputDescriptionScrollDimensions(
+  page: Page
+): Promise<{
+  scrollHeight: number;
+  clientHeight: number;
+  maxHeight: string;
+  overflowY: string;
+}> {
+  const description = page.locator('[data-testid="agent-output-description"]');
+  return await description.evaluate((el) => {
+    const style = window.getComputedStyle(el);
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      maxHeight: style.maxHeight,
+      overflowY: style.overflowY,
+    };
+  });
+}

apps/app/tests/utils/components/toasts.ts

@@ -0,0 +1,75 @@
+import { Page, Locator } from "@playwright/test";
+import { waitForElement } from "../core/waiting";
+
+/**
+ * Wait for a toast notification with specific text to appear
+ */
+export async function waitForToast(
+  page: Page,
+  text: string,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  const toast = page.locator(`[data-sonner-toast]:has-text("${text}")`).first();
+  await toast.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: "visible",
+  });
+  return toast;
+}
+
+/**
+ * Wait for an error toast to appear with specific text
+ */
+export async function waitForErrorToast(
+  page: Page,
+  titleText?: string,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  // Sonner toasts use data-sonner-toast and data-type="error" for error toasts
+  const toastSelector = titleText
+    ? `[data-sonner-toast][data-type="error"]:has-text("${titleText}")`
+    : '[data-sonner-toast][data-type="error"]';
+
+  const toast = page.locator(toastSelector).first();
+  await toast.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: "visible",
+  });
+  return toast;
+}
+
+/**
+ * Check if an error toast is visible
+ */
+export async function isErrorToastVisible(
+  page: Page,
+  titleText?: string
+): Promise<boolean> {
+  const toastSelector = titleText
+    ? `[data-sonner-toast][data-type="error"]:has-text("${titleText}")`
+    : '[data-sonner-toast][data-type="error"]';
+
+  const toast = page.locator(toastSelector).first();
+  return await toast.isVisible();
+}
+
+/**
+ * Wait for a success toast to appear with specific text
+ */
+export async function waitForSuccessToast(
+  page: Page,
+  titleText?: string,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  // Sonner toasts use data-sonner-toast and data-type="success" for success toasts
+  const toastSelector = titleText
+    ? `[data-sonner-toast][data-type="success"]:has-text("${titleText}")`
+    : '[data-sonner-toast][data-type="success"]';
+
+  const toast = page.locator(toastSelector).first();
+  await toast.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: "visible",
+  });
+  return toast;
+}

apps/app/tests/utils/core/elements.ts

@@ -0,0 +1,40 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get an element by its data-testid attribute
+ */
+export async function getByTestId(
+  page: Page,
+  testId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="${testId}"]`);
+}
+
+/**
+ * Get a button by its text content
+ */
+export async function getButtonByText(
+  page: Page,
+  text: string
+): Promise<Locator> {
+  return page.locator(`button:has-text("${text}")`);
+}
+
+/**
+ * Get the category autocomplete input element
+ */
+export async function getCategoryAutocompleteInput(
+  page: Page,
+  testId: string = "feature-category-input"
+): Promise<Locator> {
+  return page.locator(`[data-testid="${testId}"]`);
+}
+
+/**
+ * Get the category autocomplete dropdown list
+ */
+export async function getCategoryAutocompleteList(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="category-autocomplete-list"]');
+}

apps/app/tests/utils/core/interactions.ts

@@ -0,0 +1,63 @@
+import { Page } from "@playwright/test";
+import { getByTestId, getButtonByText } from "./elements";
+
+/**
+ * Click an element by its data-testid attribute
+ */
+export async function clickElement(page: Page, testId: string): Promise<void> {
+  const element = await getByTestId(page, testId);
+  await element.click();
+}
+
+/**
+ * Click a button by its text content
+ */
+export async function clickButtonByText(
+  page: Page,
+  text: string
+): Promise<void> {
+  const button = await getButtonByText(page, text);
+  await button.click();
+}
+
+/**
+ * Fill an input field by its data-testid attribute
+ */
+export async function fillInput(
+  page: Page,
+  testId: string,
+  value: string
+): Promise<void> {
+  const input = await getByTestId(page, testId);
+  await input.fill(value);
+}
+
+/**
+ * Press a keyboard shortcut key
+ */
+export async function pressShortcut(page: Page, key: string): Promise<void> {
+  await page.keyboard.press(key);
+}
+
+/**
+ * Press a number key (0-9) on the keyboard
+ */
+export async function pressNumberKey(page: Page, num: number): Promise<void> {
+  await page.keyboard.press(num.toString());
+}
+
+/**
+ * Focus on an input element to test that shortcuts don't fire when typing
+ */
+export async function focusOnInput(page: Page, testId: string): Promise<void> {
+  const input = page.locator(`[data-testid="${testId}"]`);
+  await input.focus();
+}
+
+/**
+ * Close any open dialog by pressing Escape
+ */
+export async function closeDialogWithEscape(page: Page): Promise<void> {
+  await page.keyboard.press("Escape");
+  await page.waitForTimeout(100); // Give dialog time to close
+}

apps/app/tests/utils/core/waiting.ts

@@ -0,0 +1,40 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Wait for the page to reach network idle state
+ * This is commonly used after navigation or page reload to ensure all network requests have completed
+ */
+export async function waitForNetworkIdle(page: Page): Promise<void> {
+  await page.waitForLoadState("networkidle");
+}
+
+/**
+ * Wait for an element with a specific data-testid to appear
+ */
+export async function waitForElement(
+  page: Page,
+  testId: string,
+  options?: { timeout?: number; state?: "attached" | "visible" | "hidden" }
+): Promise<Locator> {
+  const element = page.locator(`[data-testid="${testId}"]`);
+  await element.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: options?.state ?? "visible",
+  });
+  return element;
+}
+
+/**
+ * Wait for an element with a specific data-testid to be hidden
+ */
+export async function waitForElementHidden(
+  page: Page,
+  testId: string,
+  options?: { timeout?: number }
+): Promise<void> {
+  const element = page.locator(`[data-testid="${testId}"]`);
+  await element.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: "hidden",
+  });
+}

apps/app/tests/utils/features/kanban.ts

@@ -0,0 +1,34 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Perform a drag and drop operation that works with @dnd-kit
+ * This uses explicit mouse movements with pointer events
+ */
+export async function dragAndDropWithDndKit(
+  page: Page,
+  sourceLocator: Locator,
+  targetLocator: Locator
+): Promise<void> {
+  const sourceBox = await sourceLocator.boundingBox();
+  const targetBox = await targetLocator.boundingBox();
+
+  if (!sourceBox || !targetBox) {
+    throw new Error("Could not find source or target element bounds");
+  }
+
+  // Start drag from the center of the source element
+  const startX = sourceBox.x + sourceBox.width / 2;
+  const startY = sourceBox.y + sourceBox.height / 2;
+
+  // End drag at the center of the target element
+  const endX = targetBox.x + targetBox.width / 2;
+  const endY = targetBox.y + targetBox.height / 2;
+
+  // Perform the drag and drop with pointer events
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.waitForTimeout(150); // Give dnd-kit time to recognize the drag
+  await page.mouse.move(endX, endY, { steps: 15 });
+  await page.waitForTimeout(100); // Allow time for drop detection
+  await page.mouse.up();
+}

apps/app/tests/utils/features/skip-tests.ts

@@ -0,0 +1,114 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get the skip tests checkbox element in the add feature dialog
+ */
+export async function getSkipTestsCheckbox(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="skip-tests-checkbox"]');
+}
+
+/**
+ * Toggle the skip tests checkbox in the add feature dialog
+ */
+export async function toggleSkipTestsCheckbox(page: Page): Promise<void> {
+  const checkbox = page.locator('[data-testid="skip-tests-checkbox"]');
+  await checkbox.click();
+}
+
+/**
+ * Check if the skip tests checkbox is checked in the add feature dialog
+ */
+export async function isSkipTestsChecked(page: Page): Promise<boolean> {
+  const checkbox = page.locator('[data-testid="skip-tests-checkbox"]');
+  const state = await checkbox.getAttribute("data-state");
+  return state === "checked";
+}
+
+/**
+ * Get the edit skip tests checkbox element in the edit feature dialog
+ */
+export async function getEditSkipTestsCheckbox(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="edit-skip-tests-checkbox"]');
+}
+
+/**
+ * Toggle the skip tests checkbox in the edit feature dialog
+ */
+export async function toggleEditSkipTestsCheckbox(page: Page): Promise<void> {
+  const checkbox = page.locator('[data-testid="edit-skip-tests-checkbox"]');
+  await checkbox.click();
+}
+
+/**
+ * Check if the skip tests checkbox is checked in the edit feature dialog
+ */
+export async function isEditSkipTestsChecked(page: Page): Promise<boolean> {
+  const checkbox = page.locator('[data-testid="edit-skip-tests-checkbox"]');
+  const state = await checkbox.getAttribute("data-state");
+  return state === "checked";
+}
+
+/**
+ * Check if the skip tests badge is visible on a kanban card
+ */
+export async function isSkipTestsBadgeVisible(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const badge = page.locator(`[data-testid="skip-tests-badge-${featureId}"]`);
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Get the skip tests badge element for a kanban card
+ */
+export async function getSkipTestsBadge(
+  page: Page,
+  featureId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="skip-tests-badge-${featureId}"]`);
+}
+
+/**
+ * Click the manual verify button for a skipTests feature
+ */
+export async function clickManualVerify(
+  page: Page,
+  featureId: string
+): Promise<void> {
+  const button = page.locator(`[data-testid="manual-verify-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the manual verify button is visible for a feature
+ */
+export async function isManualVerifyButtonVisible(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const button = page.locator(`[data-testid="manual-verify-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}
+
+/**
+ * Click the move back button for a verified skipTests feature
+ */
+export async function clickMoveBack(
+  page: Page,
+  featureId: string
+): Promise<void> {
+  const button = page.locator(`[data-testid="move-back-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the move back button is visible for a feature
+ */
+export async function isMoveBackButtonVisible(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const button = page.locator(`[data-testid="move-back-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}

apps/app/tests/utils/features/timers.ts

@@ -0,0 +1,36 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get the count up timer element for a specific feature card
+ */
+export async function getTimerForFeature(
+  page: Page,
+  featureId: string
+): Promise<Locator> {
+  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+  return card.locator('[data-testid="count-up-timer"]');
+}
+
+/**
+ * Get the timer display text for a specific feature card
+ */
+export async function getTimerDisplayForFeature(
+  page: Page,
+  featureId: string
+): Promise<string | null> {
+  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+  const timerDisplay = card.locator('[data-testid="timer-display"]');
+  return await timerDisplay.textContent();
+}
+
+/**
+ * Check if a timer is visible for a specific feature
+ */
+export async function isTimerVisibleForFeature(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+  const timer = card.locator('[data-testid="count-up-timer"]');
+  return await timer.isVisible().catch(() => false);
+}

apps/app/tests/utils/features/waiting-approval.ts

@@ -0,0 +1,82 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get the follow-up button for a waiting_approval feature
+ */
+export async function getFollowUpButton(
+  page: Page,
+  featureId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="follow-up-${featureId}"]`);
+}
+
+/**
+ * Click the follow-up button for a waiting_approval feature
+ */
+export async function clickFollowUpButton(
+  page: Page,
+  featureId: string
+): Promise<void> {
+  const button = page.locator(`[data-testid="follow-up-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the follow-up button is visible for a feature
+ */
+export async function isFollowUpButtonVisible(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const button = page.locator(`[data-testid="follow-up-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}
+
+/**
+ * Get the commit button for a waiting_approval feature
+ */
+export async function getCommitButton(
+  page: Page,
+  featureId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="commit-${featureId}"]`);
+}
+
+/**
+ * Click the commit button for a waiting_approval feature
+ */
+export async function clickCommitButton(
+  page: Page,
+  featureId: string
+): Promise<void> {
+  const button = page.locator(`[data-testid="commit-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the commit button is visible for a feature
+ */
+export async function isCommitButtonVisible(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const button = page.locator(`[data-testid="commit-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}
+
+/**
+ * Get the waiting_approval kanban column
+ */
+export async function getWaitingApprovalColumn(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="kanban-column-waiting_approval"]');
+}
+
+/**
+ * Check if the waiting_approval column is visible
+ */
+export async function isWaitingApprovalColumnVisible(
+  page: Page
+): Promise<boolean> {
+  const column = page.locator('[data-testid="kanban-column-waiting_approval"]');
+  return await column.isVisible().catch(() => false);
+}

apps/app/tests/utils/files/drag-drop.ts

@@ -0,0 +1,38 @@
+import { Page } from "@playwright/test";
+
+/**
+ * Simulate drag and drop of a file onto an element
+ */
+export async function simulateFileDrop(
+  page: Page,
+  targetSelector: string,
+  fileName: string,
+  fileContent: string,
+  mimeType: string = "text/plain"
+): Promise<void> {
+  await page.evaluate(
+    ({ selector, content, name, mime }) => {
+      const target = document.querySelector(selector);
+      if (!target) throw new Error(`Element not found: ${selector}`);
+
+      const file = new File([content], name, { type: mime });
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+
+      // Dispatch drag events
+      target.dispatchEvent(
+        new DragEvent("dragover", {
+          dataTransfer,
+          bubbles: true,
+        })
+      );
+      target.dispatchEvent(
+        new DragEvent("drop", {
+          dataTransfer,
+          bubbles: true,
+        })
+      );
+    },
+    { selector: targetSelector, content: fileContent, name: fileName, mime: mimeType }
+  );
+}

apps/app/tests/utils/helpers/concurrency.ts

@@ -0,0 +1,50 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get the concurrency slider container
+ */
+export async function getConcurrencySliderContainer(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="concurrency-slider-container"]');
+}
+
+/**
+ * Get the concurrency slider
+ */
+export async function getConcurrencySlider(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="concurrency-slider"]');
+}
+
+/**
+ * Get the displayed concurrency value
+ */
+export async function getConcurrencyValue(page: Page): Promise<string | null> {
+  const valueElement = page.locator('[data-testid="concurrency-value"]');
+  return await valueElement.textContent();
+}
+
+/**
+ * Change the concurrency slider value by clicking on the slider track
+ */
+export async function setConcurrencyValue(
+  page: Page,
+  targetValue: number,
+  min: number = 1,
+  max: number = 10
+): Promise<void> {
+  const slider = page.locator('[data-testid="concurrency-slider"]');
+  const sliderBounds = await slider.boundingBox();
+
+  if (!sliderBounds) {
+    throw new Error("Concurrency slider not found or not visible");
+  }
+
+  // Calculate position for target value
+  const percentage = (targetValue - min) / (max - min);
+  const targetX = sliderBounds.x + sliderBounds.width * percentage;
+  const centerY = sliderBounds.y + sliderBounds.height / 2;
+
+  // Click at the target position to set the value
+  await page.mouse.click(targetX, centerY);
+}

apps/app/tests/utils/helpers/log-viewer.ts

@@ -0,0 +1,137 @@
+import { Page, Locator } from "@playwright/test";
+import { clickElement } from "../core/interactions";
+
+/**
+ * Get the log viewer header element (contains type counts and expand/collapse buttons)
+ */
+export async function getLogViewerHeader(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-viewer-header"]');
+}
+
+/**
+ * Check if the log viewer header is visible
+ */
+export async function isLogViewerHeaderVisible(page: Page): Promise<boolean> {
+  const header = page.locator('[data-testid="log-viewer-header"]');
+  return await header.isVisible().catch(() => false);
+}
+
+/**
+ * Get the log entries container element
+ */
+export async function getLogEntriesContainer(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-entries-container"]');
+}
+
+/**
+ * Get a log entry by its type
+ */
+export async function getLogEntryByType(
+  page: Page,
+  type: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="log-entry-${type}"]`).first();
+}
+
+/**
+ * Get all log entries of a specific type
+ */
+export async function getAllLogEntriesByType(
+  page: Page,
+  type: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="log-entry-${type}"]`);
+}
+
+/**
+ * Count log entries of a specific type
+ */
+export async function countLogEntriesByType(
+  page: Page,
+  type: string
+): Promise<number> {
+  const entries = page.locator(`[data-testid="log-entry-${type}"]`);
+  return await entries.count();
+}
+
+/**
+ * Get the log type count badge by type
+ */
+export async function getLogTypeCountBadge(
+  page: Page,
+  type: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="log-type-count-${type}"]`);
+}
+
+/**
+ * Check if a log type count badge is visible
+ */
+export async function isLogTypeCountBadgeVisible(
+  page: Page,
+  type: string
+): Promise<boolean> {
+  const badge = page.locator(`[data-testid="log-type-count-${type}"]`);
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Click the expand all button in the log viewer
+ */
+export async function clickLogExpandAll(page: Page): Promise<void> {
+  await clickElement(page, "log-expand-all");
+}
+
+/**
+ * Click the collapse all button in the log viewer
+ */
+export async function clickLogCollapseAll(page: Page): Promise<void> {
+  await clickElement(page, "log-collapse-all");
+}
+
+/**
+ * Get a log entry badge element
+ */
+export async function getLogEntryBadge(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-entry-badge"]').first();
+}
+
+/**
+ * Check if any log entry badge is visible
+ */
+export async function isLogEntryBadgeVisible(page: Page): Promise<boolean> {
+  const badge = page.locator('[data-testid="log-entry-badge"]').first();
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Get the view mode toggle button (parsed/raw)
+ */
+export async function getViewModeButton(
+  page: Page,
+  mode: "parsed" | "raw"
+): Promise<Locator> {
+  return page.locator(`[data-testid="view-mode-${mode}"]`);
+}
+
+/**
+ * Click a view mode toggle button
+ */
+export async function clickViewModeButton(
+  page: Page,
+  mode: "parsed" | "raw"
+): Promise<void> {
+  await clickElement(page, `view-mode-${mode}`);
+}
+
+/**
+ * Check if a view mode button is active (selected)
+ */
+export async function isViewModeActive(
+  page: Page,
+  mode: "parsed" | "raw"
+): Promise<boolean> {
+  const button = page.locator(`[data-testid="view-mode-${mode}"]`);
+  const classes = await button.getAttribute("class");
+  return classes?.includes("text-purple-300") ?? false;
+}

apps/app/tests/utils/helpers/scroll.ts

@@ -0,0 +1,58 @@
+import { Locator } from "@playwright/test";
+
+/**
+ * Check if an element is scrollable (has scrollable content)
+ */
+export async function isElementScrollable(locator: Locator): Promise<boolean> {
+  const scrollInfo = await locator.evaluate((el) => {
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      isScrollable: el.scrollHeight > el.clientHeight,
+    };
+  });
+  return scrollInfo.isScrollable;
+}
+
+/**
+ * Scroll an element to the bottom
+ */
+export async function scrollToBottom(locator: Locator): Promise<void> {
+  await locator.evaluate((el) => {
+    el.scrollTop = el.scrollHeight;
+  });
+}
+
+/**
+ * Get the scroll position of an element
+ */
+export async function getScrollPosition(
+  locator: Locator
+): Promise<{ scrollTop: number; scrollHeight: number; clientHeight: number }> {
+  return await locator.evaluate((el) => ({
+    scrollTop: el.scrollTop,
+    scrollHeight: el.scrollHeight,
+    clientHeight: el.clientHeight,
+  }));
+}
+
+/**
+ * Check if an element is visible within a scrollable container
+ */
+export async function isElementVisibleInScrollContainer(
+  element: Locator,
+  container: Locator
+): Promise<boolean> {
+  const elementBox = await element.boundingBox();
+  const containerBox = await container.boundingBox();
+
+  if (!elementBox || !containerBox) {
+    return false;
+  }
+
+  // Check if element is within the visible area of the container
+  return (
+    elementBox.y >= containerBox.y &&
+    elementBox.y + elementBox.height <= containerBox.y + containerBox.height
+  );
+}

apps/app/tests/utils/index.ts

@@ -0,0 +1,41 @@
+// Re-export all utilities from their respective modules
+
+// Core utilities
+export * from "./core/elements";
+export * from "./core/interactions";
+export * from "./core/waiting";
+
+// Project utilities
+export * from "./project/setup";
+export * from "./project/fixtures";
+
+// Navigation utilities
+export * from "./navigation/views";
+
+// View-specific utilities
+export * from "./views/board";
+export * from "./views/context";
+export * from "./views/spec-editor";
+export * from "./views/agent";
+export * from "./views/settings";
+export * from "./views/setup";
+
+// Component utilities
+export * from "./components/dialogs";
+export * from "./components/toasts";
+export * from "./components/modals";
+export * from "./components/autocomplete";
+
+// Feature utilities
+export * from "./features/kanban";
+export * from "./features/timers";
+export * from "./features/skip-tests";
+export * from "./features/waiting-approval";
+
+// Helper utilities
+export * from "./helpers/scroll";
+export * from "./helpers/log-viewer";
+export * from "./helpers/concurrency";
+
+// File utilities
+export * from "./files/drag-drop";

apps/app/tests/utils/navigation/views.ts

@@ -0,0 +1,159 @@
+import { Page } from "@playwright/test";
+import { clickElement } from "../core/interactions";
+import { waitForElement } from "../core/waiting";
+
+/**
+ * Navigate to the board/kanban view
+ */
+export async function navigateToBoard(page: Page): Promise<void> {
+  await page.goto("/");
+
+  // Wait for the page to load
+  await page.waitForLoadState("networkidle");
+
+  // Check if we're on the board view already
+  const boardView = page.locator('[data-testid="board-view"]');
+  const isOnBoard = await boardView.isVisible().catch(() => false);
+
+  if (!isOnBoard) {
+    // Try to click on a recent project first (from welcome screen)
+    const recentProject = page.locator('p:has-text("Test Project")').first();
+    if (await recentProject.isVisible().catch(() => false)) {
+      await recentProject.click();
+      await page.waitForTimeout(200);
+    }
+
+    // Then click on Kanban Board nav button to ensure we're on the board
+    const kanbanNav = page.locator('[data-testid="nav-board"]');
+    if (await kanbanNav.isVisible().catch(() => false)) {
+      await kanbanNav.click();
+    }
+  }
+
+  // Wait for the board view to be visible
+  await waitForElement(page, "board-view", { timeout: 10000 });
+}
+
+/**
+ * Navigate to the context view
+ */
+export async function navigateToContext(page: Page): Promise<void> {
+  await page.goto("/");
+
+  // Wait for the page to load
+  await page.waitForLoadState("networkidle");
+
+  // Click on the Context nav button
+  const contextNav = page.locator('[data-testid="nav-context"]');
+  if (await contextNav.isVisible().catch(() => false)) {
+    await contextNav.click();
+  }
+
+  // Wait for the context view to be visible
+  await waitForElement(page, "context-view", { timeout: 10000 });
+}
+
+/**
+ * Navigate to the spec view
+ */
+export async function navigateToSpec(page: Page): Promise<void> {
+  await page.goto("/");
+
+  // Wait for the page to load
+  await page.waitForLoadState("networkidle");
+
+  // Click on the Spec nav button
+  const specNav = page.locator('[data-testid="nav-spec"]');
+  if (await specNav.isVisible().catch(() => false)) {
+    await specNav.click();
+  }
+
+  // Wait for the spec view to be visible
+  await waitForElement(page, "spec-view", { timeout: 10000 });
+}
+
+/**
+ * Navigate to the agent view
+ */
+export async function navigateToAgent(page: Page): Promise<void> {
+  await page.goto("/");
+
+  // Wait for the page to load
+  await page.waitForLoadState("networkidle");
+
+  // Click on the Agent nav button
+  const agentNav = page.locator('[data-testid="nav-agent"]');
+  if (await agentNav.isVisible().catch(() => false)) {
+    await agentNav.click();
+  }
+
+  // Wait for the agent view to be visible
+  await waitForElement(page, "agent-view", { timeout: 10000 });
+}
+
+/**
+ * Navigate to the settings view
+ */
+export async function navigateToSettings(page: Page): Promise<void> {
+  await page.goto("/");
+
+  // Wait for the page to load
+  await page.waitForLoadState("networkidle");
+
+  // Click on the Settings button in the sidebar
+  const settingsButton = page.locator('[data-testid="settings-button"]');
+  if (await settingsButton.isVisible().catch(() => false)) {
+    await settingsButton.click();
+  }
+
+  // Wait for the settings view to be visible
+  await waitForElement(page, "settings-view", { timeout: 10000 });
+}
+
+/**
+ * Navigate to the setup view directly
+ * Note: This function uses setupFirstRun from project/setup to avoid circular dependency
+ */
+export async function navigateToSetup(page: Page): Promise<void> {
+  // Dynamic import to avoid circular dependency
+  const { setupFirstRun } = await import("../project/setup");
+  await setupFirstRun(page);
+  await page.goto("/");
+  await page.waitForLoadState("networkidle");
+  await waitForElement(page, "setup-view", { timeout: 10000 });
+}
+
+/**
+ * Navigate to the welcome view (clear project selection)
+ */
+export async function navigateToWelcome(page: Page): Promise<void> {
+  await page.goto("/");
+  await page.waitForLoadState("networkidle");
+  await waitForElement(page, "welcome-view", { timeout: 10000 });
+}
+
+/**
+ * Navigate to a specific view using the sidebar navigation
+ */
+export async function navigateToView(
+  page: Page,
+  viewId: string
+): Promise<void> {
+  const navSelector =
+    viewId === "settings" ? "settings-button" : `nav-${viewId}`;
+  await clickElement(page, navSelector);
+  await page.waitForTimeout(100);
+}
+
+/**
+ * Get the current view from the URL or store (checks which view is active)
+ */
+export async function getCurrentView(page: Page): Promise<string | null> {
+  // Get the current view from zustand store via localStorage
+  const storage = await page.evaluate(() => {
+    const item = localStorage.getItem("automaker-storage");
+    return item ? JSON.parse(item) : null;
+  });
+
+  return storage?.state?.currentView || null;
+}

apps/app/tests/utils/project/fixtures.ts

@@ -0,0 +1,121 @@
+import { Page } from "@playwright/test";
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Resolve the workspace root - handle both running from apps/app and from root
+ */
+export function getWorkspaceRoot(): string {
+  const cwd = process.cwd();
+  if (cwd.includes("apps/app")) {
+    return path.resolve(cwd, "../..");
+  }
+  return cwd;
+}
+
+const WORKSPACE_ROOT = getWorkspaceRoot();
+const FIXTURE_PATH = path.join(WORKSPACE_ROOT, "test/fixtures/projectA");
+const SPEC_FILE_PATH = path.join(FIXTURE_PATH, ".automaker/app_spec.txt");
+const CONTEXT_PATH = path.join(FIXTURE_PATH, ".automaker/context");
+
+// Original spec content for resetting between tests
+const ORIGINAL_SPEC_CONTENT = `<app_spec>
+  <name>Test Project A</name>
+  <description>A test fixture project for Playwright testing</description>
+  <tech_stack>
+    <item>TypeScript</item>
+    <item>React</item>
+  </tech_stack>
+</app_spec>
+`;
+
+/**
+ * Reset the fixture's app_spec.txt to original content
+ */
+export function resetFixtureSpec(): void {
+  const dir = path.dirname(SPEC_FILE_PATH);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+  fs.writeFileSync(SPEC_FILE_PATH, ORIGINAL_SPEC_CONTENT);
+}
+
+/**
+ * Reset the context directory to empty state
+ */
+export function resetContextDirectory(): void {
+  if (fs.existsSync(CONTEXT_PATH)) {
+    fs.rmSync(CONTEXT_PATH, { recursive: true });
+  }
+  fs.mkdirSync(CONTEXT_PATH, { recursive: true });
+}
+
+/**
+ * Create a context file directly on disk (for test setup)
+ */
+export function createContextFileOnDisk(filename: string, content: string): void {
+  const filePath = path.join(CONTEXT_PATH, filename);
+  fs.writeFileSync(filePath, content);
+}
+
+/**
+ * Check if a context file exists on disk
+ */
+export function contextFileExistsOnDisk(filename: string): boolean {
+  const filePath = path.join(CONTEXT_PATH, filename);
+  return fs.existsSync(filePath);
+}
+
+/**
+ * Set up localStorage with a project pointing to our test fixture
+ * Note: In CI, setup wizard is also skipped via NEXT_PUBLIC_SKIP_SETUP env var
+ */
+export async function setupProjectWithFixture(
+  page: Page,
+  projectPath: string = FIXTURE_PATH
+): Promise<void> {
+  await page.addInitScript((pathArg: string) => {
+    const mockProject = {
+      id: "test-project-fixture",
+      name: "projectA",
+      path: pathArg,
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        currentView: "board",
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+
+    // Also mark setup as complete (fallback for when NEXT_PUBLIC_SKIP_SETUP isn't set)
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: "complete",
+        skipClaudeSetup: false,
+      },
+      version: 0,
+    };
+    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
+  }, projectPath);
+}
+
+/**
+ * Get the fixture path
+ */
+export function getFixturePath(): string {
+  return FIXTURE_PATH;
+}

apps/app/tests/utils/project/setup.ts

@@ -0,0 +1,635 @@
+import { Page } from "@playwright/test";
+
+/**
+ * Set up a mock project in localStorage to bypass the welcome screen
+ * This simulates having opened a project before
+ */
+export async function setupMockProject(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+  });
+}
+
+/**
+ * Set up a mock project with custom concurrency value
+ */
+export async function setupMockProjectWithConcurrency(
+  page: Page,
+  concurrency: number
+): Promise<void> {
+  await page.addInitScript((maxConcurrency: number) => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: maxConcurrency,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+  }, concurrency);
+}
+
+/**
+ * Set up a mock project with specific running tasks to simulate concurrency limit
+ */
+export async function setupMockProjectAtConcurrencyLimit(
+  page: Page,
+  maxConcurrency: number = 1,
+  runningTasks: string[] = ["running-task-1"]
+): Promise<void> {
+  await page.addInitScript(
+    ({
+      maxConcurrency,
+      runningTasks,
+    }: {
+      maxConcurrency: number;
+      runningTasks: string[];
+    }) => {
+      const mockProject = {
+        id: "test-project-1",
+        name: "Test Project",
+        path: "/mock/test-project",
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: "dark",
+          sidebarOpen: true,
+          apiKeys: { anthropic: "", google: "" },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: maxConcurrency,
+          isAutoModeRunning: false,
+          runningAutoTasks: runningTasks,
+          autoModeActivityLog: [],
+        },
+        version: 0,
+      };
+
+      localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+    },
+    { maxConcurrency, runningTasks }
+  );
+}
+
+/**
+ * Set up a mock project with features in different states
+ */
+export async function setupMockProjectWithFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: "backlog" | "in_progress" | "verified";
+      steps?: string[];
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript((opts: typeof options) => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockFeatures = opts?.features || [];
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+        isAutoModeRunning: false,
+        runningAutoTasks: opts?.runningTasks ?? [],
+        autoModeActivityLog: [],
+        features: mockFeatures,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+
+    // Also store features in a global variable that the mock electron API can use
+    // This is needed because the board-view loads features from the file system
+    (window as any).__mockFeatures = mockFeatures;
+  }, options);
+}
+
+/**
+ * Set up a mock project with a feature context file
+ * This simulates an agent having created context for a feature
+ */
+export async function setupMockProjectWithContextFile(
+  page: Page,
+  featureId: string,
+  contextContent: string = "# Agent Context\n\nPrevious implementation work..."
+): Promise<void> {
+  await page.addInitScript(
+    ({
+      featureId,
+      contextContent,
+    }: {
+      featureId: string;
+      contextContent: string;
+    }) => {
+      const mockProject = {
+        id: "test-project-1",
+        name: "Test Project",
+        path: "/mock/test-project",
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: "dark",
+          sidebarOpen: true,
+          apiKeys: { anthropic: "", google: "" },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: 0,
+      };
+
+      localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+
+      // Set up mock file system with a context file for the feature
+      // This will be used by the mock electron API
+      // Now uses features/{id}/agent-output.md path
+      (window as any).__mockContextFile = {
+        featureId,
+        path: `/mock/test-project/.automaker/features/${featureId}/agent-output.md`,
+        content: contextContent,
+      };
+    },
+    { featureId, contextContent }
+  );
+}
+
+/**
+ * Set up a mock project with features that have startedAt timestamps
+ */
+export async function setupMockProjectWithInProgressFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: "backlog" | "in_progress" | "verified";
+      steps?: string[];
+      startedAt?: string;
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript((opts: typeof options) => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockFeatures = opts?.features || [];
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+        isAutoModeRunning: false,
+        runningAutoTasks: opts?.runningTasks ?? [],
+        autoModeActivityLog: [],
+        features: mockFeatures,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+
+    // Also store features in a global variable that the mock electron API can use
+    // This is needed because the board-view loads features from the file system
+    (window as any).__mockFeatures = mockFeatures;
+  }, options);
+}
+
+/**
+ * Set up a mock project with a specific current view for route persistence testing
+ */
+export async function setupMockProjectWithView(
+  page: Page,
+  view: string
+): Promise<void> {
+  await page.addInitScript((currentView: string) => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        currentView: currentView,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+  }, view);
+}
+
+/**
+ * Set up an empty localStorage (no projects) to show welcome screen
+ */
+export async function setupEmptyLocalStorage(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const mockState = {
+      state: {
+        projects: [],
+        currentProject: null,
+        currentView: "welcome",
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: 0,
+    };
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+  });
+}
+
+/**
+ * Set up mock projects in localStorage but with no current project (for recent projects list)
+ */
+export async function setupMockProjectsWithoutCurrent(
+  page: Page
+): Promise<void> {
+  await page.addInitScript(() => {
+    const mockProjects = [
+      {
+        id: "test-project-1",
+        name: "Test Project 1",
+        path: "/mock/test-project-1",
+        lastOpened: new Date().toISOString(),
+      },
+      {
+        id: "test-project-2",
+        name: "Test Project 2",
+        path: "/mock/test-project-2",
+        lastOpened: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
+      },
+    ];
+
+    const mockState = {
+      state: {
+        projects: mockProjects,
+        currentProject: null,
+        currentView: "welcome",
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+  });
+}
+
+/**
+ * Set up a mock project with features that have skipTests enabled
+ */
+export async function setupMockProjectWithSkipTestsFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: "backlog" | "in_progress" | "verified";
+      steps?: string[];
+      startedAt?: string;
+      skipTests?: boolean;
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript((opts: typeof options) => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockFeatures = opts?.features || [];
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+        isAutoModeRunning: false,
+        runningAutoTasks: opts?.runningTasks ?? [],
+        autoModeActivityLog: [],
+        features: mockFeatures,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+  }, options);
+}
+
+/**
+ * Set up a mock state with multiple projects
+ */
+export async function setupMockMultipleProjects(
+  page: Page,
+  projectCount: number = 3
+): Promise<void> {
+  await page.addInitScript((count: number) => {
+    const mockProjects = [];
+    for (let i = 0; i < count; i++) {
+      mockProjects.push({
+        id: `test-project-${i + 1}`,
+        name: `Test Project ${i + 1}`,
+        path: `/mock/test-project-${i + 1}`,
+        lastOpened: new Date(Date.now() - i * 86400000).toISOString(),
+      });
+    }
+
+    const mockState = {
+      state: {
+        projects: mockProjects,
+        currentProject: mockProjects[0],
+        currentView: "board",
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+  }, projectCount);
+}
+
+/**
+ * Set up a mock project with agent output content in the context file
+ */
+export async function setupMockProjectWithAgentOutput(
+  page: Page,
+  featureId: string,
+  outputContent: string
+): Promise<void> {
+  await page.addInitScript(
+    ({
+      featureId,
+      outputContent,
+    }: {
+      featureId: string;
+      outputContent: string;
+    }) => {
+      const mockProject = {
+        id: "test-project-1",
+        name: "Test Project",
+        path: "/mock/test-project",
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: "dark",
+          sidebarOpen: true,
+          apiKeys: { anthropic: "", google: "" },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: 0,
+      };
+
+      localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+
+      // Set up mock file system with output content for the feature
+      // Now uses features/{id}/agent-output.md path
+      (window as any).__mockContextFile = {
+        featureId,
+        path: `/mock/test-project/.automaker/features/${featureId}/agent-output.md`,
+        content: outputContent,
+      };
+    },
+    { featureId, outputContent }
+  );
+}
+
+/**
+ * Set up a mock project with features that include waiting_approval status
+ */
+export async function setupMockProjectWithWaitingApprovalFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: "backlog" | "in_progress" | "waiting_approval" | "verified";
+      steps?: string[];
+      startedAt?: string;
+      skipTests?: boolean;
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript((opts: typeof options) => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockFeatures = opts?.features || [];
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+        isAutoModeRunning: false,
+        runningAutoTasks: opts?.runningTasks ?? [],
+        autoModeActivityLog: [],
+        features: mockFeatures,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+
+    // Also store features in a global variable that the mock electron API can use
+    (window as any).__mockFeatures = mockFeatures;
+  }, options);
+}
+
+/**
+ * Set up the app store to show setup view (simulate first run)
+ */
+export async function setupFirstRun(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    // Clear any existing setup state to simulate first run
+    localStorage.removeItem("automaker-setup");
+    localStorage.removeItem("automaker-storage");
+
+    // Set up the setup store state for first run
+    const setupState = {
+      state: {
+        isFirstRun: true,
+        setupComplete: false,
+        currentStep: "welcome",
+        claudeCliStatus: null,
+        claudeAuthStatus: null,
+        claudeInstallProgress: {
+          isInstalling: false,
+          currentStep: "",
+          progress: 0,
+          output: [],
+        },
+        skipClaudeSetup: false,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
+
+    // Also set up app store to show setup view
+    const appState = {
+      state: {
+        projects: [],
+        currentProject: null,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+        isAutoModeRunning: false,
+        runningAutoTasks: [],
+        autoModeActivityLog: [],
+        currentView: "setup",
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(appState));
+  });
+}
+
+/**
+ * Set up the app to skip the setup wizard (setup already complete)
+ */
+export async function setupComplete(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    // Mark setup as complete
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: "complete",
+        skipClaudeSetup: false,
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
+  });
+}

apps/app/tests/utils/views/agent.ts

@@ -0,0 +1,98 @@
+import { Page, Locator } from "@playwright/test";
+import { waitForElement } from "../core/waiting";
+
+/**
+ * Get the session list element
+ */
+export async function getSessionList(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="session-list"]');
+}
+
+/**
+ * Get the new session button
+ */
+export async function getNewSessionButton(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="new-session-button"]');
+}
+
+/**
+ * Click the new session button
+ */
+export async function clickNewSessionButton(page: Page): Promise<void> {
+  const button = await getNewSessionButton(page);
+  await button.click();
+}
+
+/**
+ * Get a session item by its ID
+ */
+export async function getSessionItem(
+  page: Page,
+  sessionId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="session-item-${sessionId}"]`);
+}
+
+/**
+ * Click the archive button for a session
+ */
+export async function clickArchiveSession(
+  page: Page,
+  sessionId: string
+): Promise<void> {
+  const button = page.locator(`[data-testid="archive-session-${sessionId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the no session placeholder is visible
+ */
+export async function isNoSessionPlaceholderVisible(
+  page: Page
+): Promise<boolean> {
+  const placeholder = page.locator('[data-testid="no-session-placeholder"]');
+  return await placeholder.isVisible();
+}
+
+/**
+ * Wait for the no session placeholder to be visible
+ */
+export async function waitForNoSessionPlaceholder(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, "no-session-placeholder", options);
+}
+
+/**
+ * Check if the message list is visible (indicates a session is selected)
+ */
+export async function isMessageListVisible(page: Page): Promise<boolean> {
+  const messageList = page.locator('[data-testid="message-list"]');
+  return await messageList.isVisible();
+}
+
+/**
+ * Count the number of session items in the session list
+ */
+export async function countSessionItems(page: Page): Promise<number> {
+  const sessionList = page.locator(
+    '[data-testid="session-list"] [data-testid^="session-item-"]'
+  );
+  return await sessionList.count();
+}
+
+/**
+ * Wait for a new session to be created (by checking if a session item appears)
+ */
+export async function waitForNewSession(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  // Wait for any session item to appear
+  const sessionItem = page.locator('[data-testid^="session-item-"]').first();
+  await sessionItem.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: "visible",
+  });
+}

apps/app/tests/utils/views/board.ts

@@ -0,0 +1,112 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get a kanban card by feature ID
+ */
+export async function getKanbanCard(
+  page: Page,
+  featureId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="kanban-card-${featureId}"]`);
+}
+
+/**
+ * Get a kanban column by its ID
+ */
+export async function getKanbanColumn(
+  page: Page,
+  columnId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="kanban-column-${columnId}"]`);
+}
+
+/**
+ * Get the width of a kanban column
+ */
+export async function getKanbanColumnWidth(
+  page: Page,
+  columnId: string
+): Promise<number> {
+  const column = page.locator(`[data-testid="kanban-column-${columnId}"]`);
+  const box = await column.boundingBox();
+  return box?.width ?? 0;
+}
+
+/**
+ * Check if a kanban column has CSS columns (masonry) layout
+ */
+export async function hasKanbanColumnMasonryLayout(
+  page: Page,
+  columnId: string
+): Promise<boolean> {
+  const column = page.locator(`[data-testid="kanban-column-${columnId}"]`);
+  const contentDiv = column.locator("> div").nth(1); // Second child is the content area
+
+  const columnCount = await contentDiv.evaluate((el) => {
+    const style = window.getComputedStyle(el);
+    return style.columnCount;
+  });
+
+  return columnCount === "2";
+}
+
+/**
+ * Drag a kanban card from one column to another
+ */
+export async function dragKanbanCard(
+  page: Page,
+  featureId: string,
+  targetColumnId: string
+): Promise<void> {
+  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+  const dragHandle = page.locator(`[data-testid="drag-handle-${featureId}"]`);
+  const targetColumn = page.locator(
+    `[data-testid="kanban-column-${targetColumnId}"]`
+  );
+
+  // Perform drag and drop
+  await dragHandle.dragTo(targetColumn);
+}
+
+/**
+ * Click the view output button on a kanban card
+ */
+export async function clickViewOutput(
+  page: Page,
+  featureId: string
+): Promise<void> {
+  // Try the running version first, then the in-progress version
+  const runningBtn = page.locator(`[data-testid="view-output-${featureId}"]`);
+  const inProgressBtn = page.locator(
+    `[data-testid="view-output-inprogress-${featureId}"]`
+  );
+
+  if (await runningBtn.isVisible()) {
+    await runningBtn.click();
+  } else if (await inProgressBtn.isVisible()) {
+    await inProgressBtn.click();
+  } else {
+    throw new Error(`View output button not found for feature ${featureId}`);
+  }
+}
+
+/**
+ * Check if the drag handle is visible for a specific feature card
+ */
+export async function isDragHandleVisibleForFeature(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const dragHandle = page.locator(`[data-testid="drag-handle-${featureId}"]`);
+  return await dragHandle.isVisible().catch(() => false);
+}
+
+/**
+ * Get the drag handle element for a specific feature card
+ */
+export async function getDragHandleForFeature(
+  page: Page,
+  featureId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="drag-handle-${featureId}"]`);
+}

apps/app/tests/utils/views/context.ts

@@ -0,0 +1,185 @@
+import { Page, Locator } from "@playwright/test";
+import { clickElement, fillInput } from "../core/interactions";
+import { waitForElement, waitForElementHidden } from "../core/waiting";
+import { getByTestId } from "../core/elements";
+import { expect } from "@playwright/test";
+
+/**
+ * Get the context file list element
+ */
+export async function getContextFileList(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="context-file-list"]');
+}
+
+/**
+ * Click on a context file in the list
+ */
+export async function clickContextFile(
+  page: Page,
+  fileName: string
+): Promise<void> {
+  const fileButton = page.locator(`[data-testid="context-file-${fileName}"]`);
+  await fileButton.click();
+}
+
+/**
+ * Get the context editor element
+ */
+export async function getContextEditor(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="context-editor"]');
+}
+
+/**
+ * Get the context editor content
+ */
+export async function getContextEditorContent(page: Page): Promise<string> {
+  const editor = await getByTestId(page, "context-editor");
+  return await editor.inputValue();
+}
+
+/**
+ * Set the context editor content
+ */
+export async function setContextEditorContent(
+  page: Page,
+  content: string
+): Promise<void> {
+  const editor = await getByTestId(page, "context-editor");
+  await editor.fill(content);
+}
+
+/**
+ * Open the add context file dialog
+ */
+export async function openAddContextFileDialog(page: Page): Promise<void> {
+  await clickElement(page, "add-context-file");
+  await waitForElement(page, "add-context-dialog");
+}
+
+/**
+ * Create a text context file via the UI
+ */
+export async function createContextFile(
+  page: Page,
+  filename: string,
+  content: string
+): Promise<void> {
+  await openAddContextFileDialog(page);
+  await clickElement(page, "add-text-type");
+  await fillInput(page, "new-file-name", filename);
+  await fillInput(page, "new-file-content", content);
+  await clickElement(page, "confirm-add-file");
+  await waitForElementHidden(page, "add-context-dialog");
+}
+
+/**
+ * Create an image context file via the UI
+ */
+export async function createContextImage(
+  page: Page,
+  filename: string,
+  imagePath: string
+): Promise<void> {
+  await openAddContextFileDialog(page);
+  await clickElement(page, "add-image-type");
+  await fillInput(page, "new-file-name", filename);
+  await page.setInputFiles('[data-testid="image-upload-input"]', imagePath);
+  await clickElement(page, "confirm-add-file");
+  await waitForElementHidden(page, "add-context-dialog");
+}
+
+/**
+ * Delete a context file via the UI (must be selected first)
+ */
+export async function deleteSelectedContextFile(page: Page): Promise<void> {
+  await clickElement(page, "delete-context-file");
+  await waitForElement(page, "delete-context-dialog");
+  await clickElement(page, "confirm-delete-file");
+  await waitForElementHidden(page, "delete-context-dialog");
+}
+
+/**
+ * Save the current context file
+ */
+export async function saveContextFile(page: Page): Promise<void> {
+  await clickElement(page, "save-context-file");
+  // Wait for save to complete (button shows "Saved")
+  await page.waitForFunction(
+    () =>
+      document
+        .querySelector('[data-testid="save-context-file"]')
+        ?.textContent?.includes("Saved"),
+    { timeout: 5000 }
+  );
+}
+
+/**
+ * Toggle markdown preview mode
+ */
+export async function toggleContextPreviewMode(page: Page): Promise<void> {
+  await clickElement(page, "toggle-preview-mode");
+}
+
+/**
+ * Wait for a specific file to appear in the context file list
+ */
+export async function waitForContextFile(
+  page: Page,
+  filename: string,
+  timeout: number = 10000
+): Promise<void> {
+  const locator = await getByTestId(page, `context-file-${filename}`);
+  await locator.waitFor({ state: "visible", timeout });
+}
+
+/**
+ * Click a file in the list and wait for it to be selected (toolbar visible)
+ * Uses JavaScript click to ensure React event handler fires
+ */
+export async function selectContextFile(
+  page: Page,
+  filename: string,
+  timeout: number = 10000
+): Promise<void> {
+  const fileButton = await getByTestId(page, `context-file-${filename}`);
+  await fileButton.waitFor({ state: "visible", timeout });
+
+  // Use JavaScript click to ensure React onClick handler fires
+  await fileButton.evaluate((el) => (el as HTMLButtonElement).click());
+
+  // Wait for the file to be selected (toolbar with delete button becomes visible)
+  const deleteButton = await getByTestId(page, "delete-context-file");
+  await expect(deleteButton).toBeVisible({
+    timeout,
+  });
+}
+
+/**
+ * Wait for file content panel to load (either editor, preview, or image)
+ */
+export async function waitForFileContentToLoad(page: Page): Promise<void> {
+  // Wait for either the editor, preview, or image to appear
+  await page.waitForSelector(
+    '[data-testid="context-editor"], [data-testid="markdown-preview"], [data-testid="image-preview"]',
+    { timeout: 10000 }
+  );
+}
+
+/**
+ * Switch from preview mode to edit mode for markdown files
+ * Markdown files open in preview mode by default, this helper switches to edit mode
+ */
+export async function switchToEditMode(page: Page): Promise<void> {
+  // First wait for content to load
+  await waitForFileContentToLoad(page);
+
+  const markdownPreview = await getByTestId(page, "markdown-preview");
+  const isPreview = await markdownPreview.isVisible().catch(() => false);
+
+  if (isPreview) {
+    await clickElement(page, "toggle-preview-mode");
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+  }
+}

apps/app/tests/utils/views/settings.ts

@@ -0,0 +1,8 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get the settings view scrollable content area
+ */
+export async function getSettingsContentArea(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="settings-view"] .overflow-y-auto');
+}

apps/app/tests/utils/views/setup.ts

@@ -0,0 +1,75 @@
+import { Page, Locator } from "@playwright/test";
+import { getByTestId } from "../core/elements";
+import { waitForElement } from "../core/waiting";
+import { setupFirstRun } from "../project/setup";
+
+/**
+ * Wait for setup view to be visible
+ */
+export async function waitForSetupView(page: Page): Promise<Locator> {
+  return waitForElement(page, "setup-view", { timeout: 10000 });
+}
+
+/**
+ * Click "Get Started" button on setup welcome step
+ */
+export async function clickSetupGetStarted(page: Page): Promise<void> {
+  const button = await getByTestId(page, "setup-start-button");
+  await button.click();
+}
+
+/**
+ * Click continue on Claude setup step
+ */
+export async function clickClaudeContinue(page: Page): Promise<void> {
+  const button = await getByTestId(page, "claude-next-button");
+  await button.click();
+}
+
+/**
+ * Click finish on setup complete step
+ */
+export async function clickSetupFinish(page: Page): Promise<void> {
+  const button = await getByTestId(page, "setup-finish-button");
+  await button.click();
+}
+
+/**
+ * Enter Anthropic API key in setup
+ */
+export async function enterAnthropicApiKey(
+  page: Page,
+  apiKey: string
+): Promise<void> {
+  // Click "Use Anthropic API Key Instead" button
+  const useApiKeyButton = await getByTestId(page, "use-api-key-button");
+  await useApiKeyButton.click();
+
+  // Enter the API key
+  const input = await getByTestId(page, "anthropic-api-key-input");
+  await input.fill(apiKey);
+
+  // Click save button
+  const saveButton = await getByTestId(page, "save-anthropic-key-button");
+  await saveButton.click();
+}
+
+/**
+ * Enter OpenAI API key in setup
+ */
+export async function enterOpenAIApiKey(
+  page: Page,
+  apiKey: string
+): Promise<void> {
+  // Click "Enter OpenAI API Key" button
+  const useApiKeyButton = await getByTestId(page, "use-openai-key-button");
+  await useApiKeyButton.click();
+
+  // Enter the API key
+  const input = await getByTestId(page, "openai-api-key-input");
+  await input.fill(apiKey);
+
+  // Click save button
+  const saveButton = await getByTestId(page, "save-openai-key-button");
+  await saveButton.click();
+}

apps/app/tests/utils/views/spec-editor.ts

@@ -0,0 +1,118 @@
+import { Page, Locator } from "@playwright/test";
+import { clickElement } from "../core/interactions";
+import { navigateToSpec } from "../navigation/views";
+
+/**
+ * Get the spec editor element
+ */
+export async function getSpecEditor(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="spec-editor"]');
+}
+
+/**
+ * Get the spec editor content
+ */
+export async function getSpecEditorContent(page: Page): Promise<string> {
+  const editor = await getSpecEditor(page);
+  return await editor.inputValue();
+}
+
+/**
+ * Set the spec editor content
+ */
+export async function setSpecEditorContent(
+  page: Page,
+  content: string
+): Promise<void> {
+  const editor = await getSpecEditor(page);
+  await editor.fill(content);
+}
+
+/**
+ * Click the save spec button
+ */
+export async function clickSaveSpec(page: Page): Promise<void> {
+  await clickElement(page, "save-spec");
+}
+
+/**
+ * Click the reload spec button
+ */
+export async function clickReloadSpec(page: Page): Promise<void> {
+  await clickElement(page, "reload-spec");
+}
+
+/**
+ * Check if the spec view path display shows the correct .automaker path
+ */
+export async function getDisplayedSpecPath(page: Page): Promise<string | null> {
+  const specView = page.locator('[data-testid="spec-view"]');
+  const pathElement = specView.locator("p.text-muted-foreground").first();
+  return await pathElement.textContent();
+}
+
+/**
+ * Navigate to the spec editor view
+ */
+export async function navigateToSpecEditor(page: Page): Promise<void> {
+  await navigateToSpec(page);
+}
+
+/**
+ * Get the CodeMirror editor content
+ */
+export async function getEditorContent(page: Page): Promise<string> {
+  // CodeMirror uses a contenteditable div with class .cm-content
+  const content = await page
+    .locator('[data-testid="spec-editor"] .cm-content')
+    .textContent();
+  return content || "";
+}
+
+/**
+ * Set the CodeMirror editor content by selecting all and typing
+ */
+export async function setEditorContent(page: Page, content: string): Promise<void> {
+  // Click on the editor to focus it
+  const editor = page.locator('[data-testid="spec-editor"] .cm-content');
+  await editor.click();
+
+  // Wait for focus
+  await page.waitForTimeout(200);
+
+  // Select all content (Cmd+A on Mac, Ctrl+A on others)
+  const isMac = process.platform === "darwin";
+  await page.keyboard.press(isMac ? "Meta+a" : "Control+a");
+
+  // Wait for selection
+  await page.waitForTimeout(100);
+
+  // Delete the selected content first
+  await page.keyboard.press("Backspace");
+
+  // Wait for deletion
+  await page.waitForTimeout(100);
+
+  // Type the new content
+  await page.keyboard.type(content, { delay: 10 });
+
+  // Wait for typing to complete
+  await page.waitForTimeout(200);
+}
+
+/**
+ * Click the save button
+ */
+export async function clickSaveButton(page: Page): Promise<void> {
+  const saveButton = page.locator('[data-testid="save-spec"]');
+  await saveButton.click();
+
+  // Wait for the button text to change to "Saved" indicating save is complete
+  await page.waitForFunction(
+    () => {
+      const btn = document.querySelector('[data-testid="save-spec"]');
+      return btn?.textContent?.includes("Saved");
+    },
+    { timeout: 5000 }
+  );
+}

logs/server.log

@@ -0,0 +1,42 @@
+
+> automaker@1.0.0 dev:server
+> npm run dev --workspace=apps/server
+
+
+> @automaker/server@0.1.0 dev
+> tsx watch src/index.ts
+
+[dotenv@17.2.3] injecting env (1) from .env -- tip: ⚙️  override existing env vars with { override: true }
+[Server] ✓ CLAUDE_CODE_OAUTH_TOKEN detected (subscription auth)
+
+╔═══════════════════════════════════════════════════════╗
+║           Automaker Backend Server                    ║
+╠═══════════════════════════════════════════════════════╣
+║  HTTP API:    http://localhost:3008                  ║
+║  WebSocket:   ws://localhost:3008/api/events         ║
+║  Terminal:    ws://localhost:3008/api/terminal/ws    ║
+║  Health:      http://localhost:3008/api/health       ║
+║  Terminal:    enabled                              ║
+╚═══════════════════════════════════════════════════════╝
+
+[Server] Agent service initialized
+[WebSocket] Client connected
+12:52:41 AM [tsx] change in ./src\index.ts Rerunning...
+c12:52:41 AM [tsx] unlink in ./src\services\auto-mode-service.ts Restarting...
+c[dotenv@17.2.3] injecting env (1) from .env -- tip: 🔐 encrypt with Dotenvx: https://dotenvx.com
+[Server] ✓ CLAUDE_CODE_OAUTH_TOKEN detected (subscription auth)
+
+╔═══════════════════════════════════════════════════════╗
+║           Automaker Backend Server                    ║
+╠═══════════════════════════════════════════════════════╣
+║  HTTP API:    http://localhost:3008                 ║
+║  WebSocket:   ws://localhost:3008/api/events        ║
+║  Terminal:    ws://localhost:3008/api/terminal/ws   ║
+║  Health:      http://localhost:3008/api/health      ║
+║  Terminal:    enabled                              ║
+╚═══════════════════════════════════════════════════════╝
+
+[Server] Agent service initialized
+[WebSocket] Client connected
+[WebSocket] Client disconnected
+^C^C