From f5c9442d8e41c616c34f7c224147cbad909c3340 Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Sun, 16 Aug 2026 17:22:31 -0700
Subject: [PATCH 01/11] =?UTF-8?q?feat(shadcn):=20visual=20refresh=20?=
 =?UTF-8?q?=E2=80=94=20radius,=20elevation,=20ambient=20tint,=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- --radius 0.5rem → 0.75rem (rounder cards/buttons/inputs app-wide)
- Ambient violet/teal brand tint in the window background corners
- Cards: translucent bg + backdrop-blur + shadow-sm elevation
- Badges: pill-shaped (rounded-full)
- Buttons: focus ring offset + violet glow on primary
- Dialogs/popovers/dropdowns/selects: heavier elevation (shadow-2xl/xl)
- Inputs/textareas: stronger focus ring (ring-2)
---
 src/renderer/src/components/ui/badge.tsx      |  2 +-
 src/renderer/src/components/ui/button.tsx     |  4 ++--
 src/renderer/src/components/ui/card.tsx       |  2 +-
 src/renderer/src/components/ui/dialog.tsx     |  2 +-
 .../src/components/ui/dropdown-menu.tsx       |  4 ++--
 src/renderer/src/components/ui/input.tsx      |  2 +-
 src/renderer/src/components/ui/popover.tsx    |  2 +-
 src/renderer/src/components/ui/select.tsx     |  2 +-
 src/renderer/src/components/ui/tabs.tsx       |  2 +-
 src/renderer/src/components/ui/textarea.tsx   |  2 +-
 src/renderer/src/index.css                    | 20 +++++++++++++++++--
 11 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/components/ui/badge.tsx b/src/renderer/src/components/ui/badge.tsx
index 1f90c1cc..cf6dc3de 100644
--- a/src/renderer/src/components/ui/badge.tsx
+++ b/src/renderer/src/components/ui/badge.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils'
 // tone keeps the lighter-violet label the brand already uses on violet tints.
 
 const badgeVariants = cva(
-  'inline-flex items-center gap-0.5 rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide transition-colors focus:outline-none [&_svg]:pointer-events-none [&_svg]:size-2.5',
+  'inline-flex items-center gap-0.5 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide transition-colors focus:outline-none [&_svg]:pointer-events-none [&_svg]:size-2.5',
   {
     variants: {
       variant: {
diff --git a/src/renderer/src/components/ui/button.tsx b/src/renderer/src/components/ui/button.tsx
index e4be341c..dda38099 100644
--- a/src/renderer/src/components/ui/button.tsx
+++ b/src/renderer/src/components/ui/button.tsx
@@ -13,12 +13,12 @@ import { cn } from '@/lib/utils'
 // (`/10` → `/20`), not a solid — depth from the border, per §2.1/§2.2.
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:size-3.5",
+  "inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:size-3.5",
   {
     variants: {
       variant: {
         default:
-          'border border-primary/40 bg-primary/10 font-semibold text-[var(--gt-accent-light)] hover:bg-primary/20',
+          'border border-primary/40 bg-primary/10 font-semibold text-[var(--gt-accent-light)] shadow-sm shadow-primary/20 hover:bg-primary/20',
         destructive:
           'border border-destructive/50 bg-destructive/10 text-destructive hover:bg-destructive/20',
         outline:
diff --git a/src/renderer/src/components/ui/card.tsx b/src/renderer/src/components/ui/card.tsx
index 7b6c6f73..d7996eaf 100644
--- a/src/renderer/src/components/ui/card.tsx
+++ b/src/renderer/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card"
-      className={cn('rounded-lg border border-border text-foreground', className)}
+      className={cn('rounded-lg border border-border bg-background/50 text-foreground shadow-sm backdrop-blur-sm', className)}
       {...props}
     />
   )
diff --git a/src/renderer/src/components/ui/dialog.tsx b/src/renderer/src/components/ui/dialog.tsx
index dc3081ba..3af8b492 100644
--- a/src/renderer/src/components/ui/dialog.tsx
+++ b/src/renderer/src/components/ui/dialog.tsx
@@ -48,7 +48,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-background p-4 shadow-xl duration-200 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 left-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-background p-4 shadow-2xl duration-200 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',
           className,
         )}
         {...props}
diff --git a/src/renderer/src/components/ui/dropdown-menu.tsx b/src/renderer/src/components/ui/dropdown-menu.tsx
index 5a6eab3f..efa999da 100644
--- a/src/renderer/src/components/ui/dropdown-menu.tsx
+++ b/src/renderer/src/components/ui/dropdown-menu.tsx
@@ -27,7 +27,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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',
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-xl 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',
           className,
         )}
         {...props}
@@ -190,7 +190,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-xl 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',
         className,
       )}
       {...props}
diff --git a/src/renderer/src/components/ui/input.tsx b/src/renderer/src/components/ui/input.tsx
index f4901ab0..62831124 100644
--- a/src/renderer/src/components/ui/input.tsx
+++ b/src/renderer/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'flex h-7 w-full rounded-md border border-input bg-[var(--gt-input)] px-2 py-1 text-[12px] text-foreground transition-colors placeholder:text-muted-foreground focus-visible:border-primary/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/40 disabled:cursor-default disabled:opacity-40',
+        'flex h-7 w-full rounded-md border border-input bg-[var(--gt-input)] px-2 py-1 text-[12px] text-foreground transition-colors placeholder:text-muted-foreground focus-visible:border-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default disabled:opacity-40',
         className,
       )}
       {...props}
diff --git a/src/renderer/src/components/ui/popover.tsx b/src/renderer/src/components/ui/popover.tsx
index 1924a983..824440d2 100644
--- a/src/renderer/src/components/ui/popover.tsx
+++ b/src/renderer/src/components/ui/popover.tsx
@@ -25,7 +25,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 w-72 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg outline-none 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',
+          'z-50 w-72 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-xl outline-none 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',
           className,
         )}
         {...props}
diff --git a/src/renderer/src/components/ui/select.tsx b/src/renderer/src/components/ui/select.tsx
index c6cc5cf8..9b05756f 100644
--- a/src/renderer/src/components/ui/select.tsx
+++ b/src/renderer/src/components/ui/select.tsx
@@ -46,7 +46,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg 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',
+          'relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-xl 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',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
diff --git a/src/renderer/src/components/ui/tabs.tsx b/src/renderer/src/components/ui/tabs.tsx
index 1ff7d6f6..24b10fa5 100644
--- a/src/renderer/src/components/ui/tabs.tsx
+++ b/src/renderer/src/components/ui/tabs.tsx
@@ -31,7 +31,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        'inline-flex items-center justify-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 data-[state=active]:border data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-3.5',
+        'inline-flex items-center justify-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 data-[state=active]:border data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:size-3.5',
         className,
       )}
       {...props}
diff --git a/src/renderer/src/components/ui/textarea.tsx b/src/renderer/src/components/ui/textarea.tsx
index 477290d2..28462fd8 100644
--- a/src/renderer/src/components/ui/textarea.tsx
+++ b/src/renderer/src/components/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot="textarea"
       className={cn(
-        'flex min-h-16 w-full rounded-md border border-input bg-[var(--gt-input)] px-2 py-1.5 text-[12px] text-foreground transition-colors placeholder:text-muted-foreground focus-visible:border-primary/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/40 disabled:cursor-default disabled:opacity-40',
+        'flex min-h-16 w-full rounded-md border border-input bg-[var(--gt-input)] px-2 py-1.5 text-[12px] text-foreground transition-colors placeholder:text-muted-foreground focus-visible:border-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default disabled:opacity-40',
         className,
       )}
       {...props}
diff --git a/src/renderer/src/index.css b/src/renderer/src/index.css
index f8678b86..0eb9f66b 100644
--- a/src/renderer/src/index.css
+++ b/src/renderer/src/index.css
@@ -72,7 +72,7 @@
   --border: var(--gt-border);
   --input: var(--gt-border);
   --ring: var(--gt-accent);
-  --radius: 0.5rem;
+  --radius: 0.75rem;
 }
 
 @theme inline {
@@ -110,7 +110,7 @@ body,
 #root {
   height: 100%;
   margin: 0;
-  background: var(--gt-bg);
+  background-color: var(--gt-bg);
   color: var(--gt-text);
   font-family: var(--font-sans);
   font-feature-settings: 'ss03', 'cv05';
@@ -119,6 +119,22 @@ body,
   overflow: hidden;
 }
 
+/* Ambient brand tint — a faint violet/teal wash in the top corners, fixed so it
+   never scrolls. Subtle on purpose (depth, not decoration); it shows through
+   only where surfaces are transparent, i.e. the window background and gaps. */
+#root {
+  background-image: radial-gradient(
+      1100px 700px at 12% -8%,
+      color-mix(in srgb, var(--gt-accent) 8%, transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      900px 600px at 100% 0%,
+      color-mix(in srgb, var(--gt-accent-2) 6%, transparent),
+      transparent 55%
+    );
+}
+
 .tickets-browser {
   container-type: inline-size;
 }

From c4bc58ee5ba3728fe0e0db7381764f7d6b854f0a Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Sun, 16 Aug 2026 17:23:34 -0700
Subject: [PATCH 02/11] feat(shadcn): glassmorphism on the top chrome
 (backdrop-blur)

---
 src/renderer/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 31abfb7e..9849f42d 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1348,7 +1348,7 @@ export default function App() {
         {/* session tab bar (top-level, also the window drag region) */}
         <header
           style={drag}
-          className={`flex h-9 shrink-0 items-center border-b border-[var(--gt-border)] bg-[var(--gt-bg)] pr-2 ${fullscreen ? 'pl-3' : 'pl-[78px]'}`}
+          className={`flex h-9 shrink-0 items-center border-b border-[var(--gt-border)] bg-[var(--gt-bg)]/70 pr-2 backdrop-blur-md ${fullscreen ? 'pl-3' : 'pl-[78px]'}`}
         >
           {/* brand mark — the logo asset is already tightly cropped, so it fills
             the box at scale-1 (no extra zoom) */}

From 12cd95e6ec56d65a7d9aa39537fc76819f72002c Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Sun, 16 Aug 2026 17:39:06 -0700
Subject: [PATCH 03/11] feat(ux): redesign the New-workspace entry screen
 around intent

- Top-level intent tabs: New session | Resume | Scratch | New repo
- Single/Paired-loop toggle kept within New session (gated by loopsOn)
- Shared workspace picker for single + loop; recents/pins above the card
- Migrated to shadcn Button/Input/Textarea/Card/Tabs/Badge + semantic tokens
- Update loops-experiment gate test for the cleaner loopsOn && gating

Preserves all launch logic (spawn options, remote dir browsing, scaffold,
resume filtering, loop config).
---
 src/main/loops-experiment.test.ts           |    6 +-
 src/renderer/src/components/EntryScreen.tsx | 1170 +++++++++----------
 2 files changed, 524 insertions(+), 652 deletions(-)

diff --git a/src/main/loops-experiment.test.ts b/src/main/loops-experiment.test.ts
index 38d4498d..f3216e18 100644
--- a/src/main/loops-experiment.test.ts
+++ b/src/main/loops-experiment.test.ts
@@ -54,8 +54,10 @@ describe('the gate is wired where it matters', () => {
   test('the EntryScreen loop affordance is behind useExperiment', () => {
     const src = read('src/renderer/src/components/EntryScreen.tsx')
     expect(src).toContain("useExperiment('loops')")
-    // The mode toggle must not offer 'loop' when the flag is off.
-    expect(src).toContain("loopsOn ? (['single', 'loop'] as const) : (['single'] as const)")
+    // The mode toggle must not offer 'loop' when the flag is off: the whole
+    // single/loop toggle renders only behind `loopsOn &&`.
+    expect(src).toContain("loopsOn && !lockedCwd && (")
+    expect(src).toContain("['single', 'loop'] as const")
   })
 
   test('the renderer consumes stop and state — every startable loop is stoppable', () => {
diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index d1cf066f..7f9695de 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -36,6 +36,12 @@ import { repoOrientationPendingKey } from '../lib/orientation'
 import { relativeTime } from '../lib/time'
 import { SpawnOptions, type SpawnOptionsValue } from './SpawnOptions'
 import { clampSpawnCount, DEFAULT_SPAWN } from '../lib/spawnOptions'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Badge } from '@/components/ui/badge'
 
 export type Choice = {
   mode: 'new' | 'resume'
@@ -210,6 +216,11 @@ export function EntryScreen({
   // Loops are experimental: with the flag off there is no loop mode at all, and
   // `loops:create` refuses in main regardless of what this screen renders.
   const loopsOn = useExperiment('loops')
+  // Top-level intent: which of the launch actions the user is composing.
+  // 'new' (a session in a workspace), 'resume' (a prior session), 'scratch'
+  // (a throwaway), 'repo' (scaffold a new project). 'loop' is a mode of 'new'.
+  type Intent = 'new' | 'resume' | 'scratch' | 'repo'
+  const [intent, setIntent] = useState<Intent>('new')
   // 'single' → one session (default). 'loop' → two linked role agents.
   const [mode, setMode] = useState<'single' | 'loop'>(initialMode)
   useEffect(() => setMode(initialMode), [initialMode])
@@ -604,212 +615,79 @@ export function EntryScreen({
     }`
 
   return (
-    <div className="h-full w-full overflow-y-auto bg-[var(--gt-bg)]">
-      <div className="mx-auto max-w-[860px] px-8 py-9">
-        <div className="mb-1 flex items-center gap-2.5">
-          <img src={logo} alt="" draggable={false} className="h-9 w-9 rounded-lg" />
-          <h1 className="gt-grad-text text-2xl font-bold tracking-tight">TerMinal</h1>
-          <div className="flex-1" />
+    <div className="h-full w-full overflow-y-auto bg-background">
+      <div className="mx-auto w-full max-w-[860px] px-8 py-8">
+        {/* Header */}
+        <header className="mb-6 flex items-center gap-3">
+          <img src={logo} alt="" draggable={false} className="h-10 w-10 rounded-xl" />
+          <div className="min-w-0 flex-1">
+            <h1 className="gt-grad-text text-[22px] font-bold leading-tight tracking-tight">
+              TerMinal
+            </h1>
+            <p className="mt-0.5 text-[13px] text-muted-foreground">
+              {lockedCwd ? (
+                <>
+                  New session in{' '}
+                  <span className="font-mono text-foreground/80">{tilde(lockedCwd)}</span>
+                </>
+              ) : (
+                'A local-first cockpit for your coding agents.'
+              )}
+            </p>
+          </div>
           {onCancel && (
-            <button
-              onClick={onCancel}
-              className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[12px] text-zinc-500 hover:bg-white/5 hover:text-zinc-300"
-            >
-              <X size={13} strokeWidth={2} />
-              Cancel
-            </button>
+            <Button variant="ghost" size="sm" onClick={onCancel}>
+              <X className="size-3.5" /> Cancel
+            </Button>
           )}
-        </div>
-        <p className="mb-6 text-sm text-zinc-500">
-          {lockedCwd ? (
-            <>
-              New session in <span className="font-mono text-zinc-300">{tilde(lockedCwd)}</span> —
-              pick "Start" for a fresh session
-              {lockedRemote ? '.' : ' or attach to a prior one below.'}
-            </>
-          ) : (
-            <>
-              Pick an engine, attach it to a local or SSH daemon profile, then choose the workspace
-              that Tickets, MRs, Agents, Runs, Files, CI, and Search should read from.
-            </>
-          )}
-        </p>
+        </header>
 
-        {mode === 'single' && (
-          <SpawnOptions
-            value={spawn}
-            onChange={changeSpawn}
-            savedPrompts={savedPrompts}
-            onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
-            onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
-          />
-        )}
+        {/* Intent switcher */}
+        <Tabs value={intent} onValueChange={(v) => setIntent(v as Intent)}>
+          <TabsList className="mb-5 h-9 w-full justify-start rounded-xl px-1">
+            <TabsTrigger value="new" className="gap-1.5">
+              <SquareTerminal className="size-3.5" /> New session
+            </TabsTrigger>
+            <TabsTrigger value="resume" className="gap-1.5">
+              <RefreshCw className="size-3.5" /> Resume
+            </TabsTrigger>
+            {!lockedCwd && (
+              <TabsTrigger value="scratch" className="gap-1.5">
+                <Zap className="size-3.5" /> Scratch
+              </TabsTrigger>
+            )}
+            {!lockedCwd && (
+              <TabsTrigger value="repo" className="gap-1.5">
+                <FolderPlus className="size-3.5" /> New repo
+              </TabsTrigger>
+            )}
+          </TabsList>
 
-        {!lockedCwd && (
-          <div className="mb-5 rounded-2xl border border-[var(--gt-border)] bg-[var(--gt-panel)] px-4 py-3">
-            <div className="flex items-center gap-3">
-              <Zap size={15} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
-              <div className="min-w-0">
-                <div className="text-[12px] font-semibold text-zinc-100">Scratch session</div>
-                <div className="truncate text-[10.5px] text-zinc-600">
-                  Throwaway — spins up in{' '}
-                  <span className="font-mono">~/.config/TerMinal/scratch</span>, no repo attached
-                </div>
-              </div>
-              <div className="ml-auto flex shrink-0 items-center gap-2">
-                {/* The engine mark sits inside the select's box rather than
-                    beside it — a native <select> can't hold an element, so it
-                    is overlaid and the select is padded to clear it. */}
-                <div className="relative shrink-0">
-                  <span className="pointer-events-none absolute inset-y-0 left-2.5 flex items-center">
-                    {scratchEngine === 'local' ? (
-                      <SquareTerminal size={14} strokeWidth={2} className="text-zinc-400" />
+          {/* ── New session / Paired loop ─────────────────────────────── */}
+          <TabsContent value="new" className="space-y-4 pt-4">
+            {loopsOn && !lockedCwd && (
+              <div className="inline-flex items-center gap-1 rounded-xl border border-border bg-muted/40 p-1">
+                {(['single', 'loop'] as const).map((m) => (
+                  <button
+                    key={m}
+                    onClick={() => switchMode(m)}
+                    className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-semibold transition-colors ${
+                      mode === m
+                        ? 'bg-primary/20 text-foreground'
+                        : 'text-muted-foreground hover:text-foreground'
+                    }`}
+                  >
+                    {m === 'single' ? (
+                      <SquareTerminal className="size-3.5" />
                     ) : (
-                      <EngineLogo engine={scratchEngine} size={14} />
+                      <Repeat className="size-3.5" />
                     )}
-                  </span>
-                  <select
-                    value={scratchEngine}
-                    onChange={(e) => setScratchEngine(e.target.value as SessionEngine)}
-                    aria-label="Scratch session engine"
-                    className={`${sel} pl-8`}
-                  >
-                    {engineOptions.map((e) => (
-                      <option key={e} value={e}>
-                        {sessionEngineLabel(e)}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <button
-                  onClick={() => startScratch(scratchEngine)}
-                  className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-[var(--gt-accent)] px-3 py-2 text-[12px] font-semibold text-white hover:opacity-90"
-                >
-                  Start
-                </button>
-              </div>
-            </div>
-            {mode === 'single' && (
-              <div className="mt-3 border-t border-[var(--gt-border)] pt-3">
-                <div
-                  className="flex flex-wrap items-center gap-x-3 gap-y-2"
-                  title="Git-clones your configured template repo (Settings → Projects → templateRepo) into a new folder, then opens a session there. Needs network access."
-                >
-                  <div className="flex shrink-0 items-center gap-3">
-                    <FolderPlus
-                      size={15}
-                      strokeWidth={2}
-                      className="shrink-0 text-[var(--gt-accent-2)]"
-                    />
-                    <div className="min-w-0">
-                      <div className="text-[12px] font-semibold text-zinc-100">Brand-new repo</div>
-                      <div className="truncate text-[10.5px] text-zinc-600">From template</div>
-                    </div>
-                  </div>
-                  <div className="flex min-w-[300px] flex-1 items-center gap-2">
-                    <input
-                      value={projName}
-                      onChange={(e) => {
-                        setProjName(e.target.value)
-                        setScaffoldErr('')
-                      }}
-                      onKeyDown={(e) => e.key === 'Enter' && createProject()}
-                      placeholder="project-name"
-                      spellCheck={false}
-                      className={`${sel} min-w-0 flex-1 font-mono`}
-                    />
-                    <button
-                      onClick={pickParent}
-                      title="Choose parent directory"
-                      className={`${sel} inline-flex max-w-[220px] shrink-0 items-center gap-1.5 hover:border-[var(--gt-accent)]/60`}
-                    >
-                      {location === 'remote' ? (
-                        <Server size={13} strokeWidth={2} />
-                      ) : (
-                        <FolderOpen size={13} strokeWidth={2} />
-                      )}
-                      <span className="truncate">{projectParentLabel}</span>
-                    </button>
-                    <button
-                      onClick={createProject}
-                      disabled={!projName.trim() || scaffoldBusy}
-                      className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-[var(--gt-accent)] px-3 py-2 text-[12px] font-semibold text-white hover:opacity-90 disabled:opacity-40"
-                    >
-                      <Plus size={14} strokeWidth={2.5} />
-                      {scaffoldBusy ? 'Creating…' : 'Create'}
-                    </button>
-                  </div>
-                </div>
-                {/* Ticket-provider choice (local / GitHub / Linear / …) is
-                    deliberately NOT here: the per-repo orientation modal that
-                    auto-opens on first launch of a fresh repo carries the full
-                    picker, so the scaffold row stays a single input + button. */}
-                {scaffoldErr && (
-                  <div className="mt-1 text-[11px] text-[var(--gt-red)]">
-                    {scaffoldErr}
-                    <div className="mt-0.5 text-[10.5px] leading-snug text-zinc-500">
-                      Check your network/VPN and that the template repo (Settings → Projects →
-                      templateRepo) is reachable — a private repo needs your git auth.
-                    </div>
-                  </div>
-                )}
+                    {m === 'single' ? 'Single session' : 'Paired loop'}
+                  </button>
+                ))}
               </div>
             )}
-          </div>
-        )}
 
-        <div className="mb-5 rounded-2xl border border-[var(--gt-border)] bg-[var(--gt-panel)]">
-          <div className="flex items-center justify-between border-b border-[var(--gt-border)] px-4 py-3">
-            <div className="flex min-w-0 items-center gap-3">
-              <FolderOpen
-                size={15}
-                strokeWidth={2}
-                className="shrink-0 text-[var(--gt-accent-2)]"
-              />
-              <div className="min-w-0">
-                <div className="text-[12px] font-semibold text-zinc-100">New workspace session</div>
-                <div className="mt-0.5 truncate text-[10.5px] text-zinc-600">
-                  {daemonLabel} daemon · <span className="font-mono">{selectedWorkspaceLabel}</span>
-                </div>
-              </div>
-            </div>
-            <span className="rounded-md border border-[var(--gt-border)] bg-black/25 px-2 py-1 text-[10px] uppercase tracking-wide text-[var(--gt-accent-2)]">
-              {location === 'remote' ? 'SSH daemon' : 'Local daemon'}
-            </span>
-          </div>
-
-          <div className="space-y-4 p-4">
-            <div
-              className={`gap-1 rounded-xl border border-[var(--gt-border)] bg-black/20 p-1 ${
-                loopsOn ? 'flex' : 'hidden'
-              }`}
-            >
-              {(loopsOn ? (['single', 'loop'] as const) : (['single'] as const)).map((m) => (
-                <button
-                  key={m}
-                  onClick={() => switchMode(m)}
-                  className={`flex flex-1 items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[12px] font-semibold transition-colors ${
-                    mode === m
-                      ? 'bg-[var(--gt-accent)]/20 text-zinc-100'
-                      : 'text-zinc-500 hover:text-zinc-200'
-                  }`}
-                >
-                  {m === 'single' ? (
-                    <SquareTerminal size={13} strokeWidth={2} />
-                  ) : (
-                    <Repeat size={13} strokeWidth={2} />
-                  )}
-                  {m === 'single' ? 'Single session' : 'Paired loop'}
-                </button>
-              ))}
-            </div>
-            {loopsOn && mode === 'loop' && (
-              <div className="text-[10.5px] leading-relaxed text-zinc-600">
-                Two linked agents in one worktree — a <span className="text-zinc-400">worker</span>{' '}
-                writes code, a <span className="text-zinc-400">driver</span> negotiates the contract
-                and grades it. Opened side by side, contract-first.
-              </div>
-            )}
             {!lockedCwd &&
               (() => {
                 const pins = pinnedWorkspaces
@@ -823,7 +701,7 @@ export function EntryScreen({
                     <div
                       key={r}
                       title={r}
-                      className="group inline-flex max-w-[240px] items-center gap-1 rounded-lg border border-[var(--gt-border)] bg-black/20 py-1.5 pl-2.5 pr-1 text-[12px] text-zinc-300 transition-colors hover:border-[var(--gt-accent)]/60"
+                      className="group inline-flex max-w-[240px] items-center gap-1 rounded-lg border border-border bg-muted/30 py-1.5 pl-2.5 pr-1 text-[12px] text-foreground/80 transition-colors hover:border-primary/60"
                     >
                       <button
                         onClick={() =>
@@ -832,17 +710,9 @@ export function EntryScreen({
                         className="inline-flex min-w-0 items-center gap-1.5 text-left"
                       >
                         {isRemotePath(r) ? (
-                          <Server
-                            size={12}
-                            strokeWidth={2}
-                            className="shrink-0 text-[var(--gt-accent-2)]"
-                          />
+                          <Server size={12} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
                         ) : (
-                          <FolderOpen
-                            size={12}
-                            strokeWidth={2}
-                            className="shrink-0 text-zinc-500"
-                          />
+                          <FolderOpen size={12} strokeWidth={2} className="shrink-0 text-muted-foreground" />
                         )}
                         <span className="truncate">{pathLabel(r)}</span>
                       </button>
@@ -853,9 +723,7 @@ export function EntryScreen({
                         }}
                         title={isPinned ? 'Unpin workspace' : 'Pin workspace'}
                         className={`shrink-0 rounded p-0.5 transition-colors ${
-                          isPinned
-                            ? 'text-[var(--gt-accent-2)]'
-                            : 'text-zinc-600 hover:text-zinc-300'
+                          isPinned ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground hover:text-foreground'
                         }`}
                       >
                         <Pin size={12} strokeWidth={2} fill={isPinned ? 'currentColor' : 'none'} />
@@ -867,13 +735,13 @@ export function EntryScreen({
                   <div className="space-y-3">
                     {pins.length > 0 && (
                       <div>
-                        <div className={`${sectionTitle} mb-2`}>Pinned</div>
+                        <div className={sectionTitle + ' mb-2'}>Pinned</div>
                         <div className="flex flex-wrap gap-1.5">{pins.map(chip)}</div>
                       </div>
                     )}
                     {recents.length > 0 && (
                       <div>
-                        <div className={`${sectionTitle} mb-2`}>Recent workspaces</div>
+                        <div className={sectionTitle + ' mb-2'}>Recent workspaces</div>
                         <div className="flex flex-wrap gap-1.5">{recents.map(chip)}</div>
                       </div>
                     )}
@@ -881,196 +749,171 @@ export function EntryScreen({
                 )
               })()}
 
-            {mode === 'single' && (
-              <div>
-                <div className={`${sectionTitle} mb-2`}>1 · Engine</div>
-                <div className="grid grid-cols-3 gap-2">
-                  {engineOptions.map((e) => (
-                    <button
-                      key={e}
-                      onClick={() => selectEngine(e)}
-                      className={pickButton(engine === e)}
-                    >
-                      {e === 'local' ? (
-                        <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
-                      ) : (
-                        <EngineLogo engine={e} size={16} />
-                      )}
-                      <span className="min-w-0 truncate text-[12.5px] font-semibold">
-                        {sessionEngineLabel(e)}
-                      </span>
-                      {e === recentEngine && (
-                        <span className="ml-auto shrink-0 rounded-full border border-[var(--gt-accent)]/40 bg-[var(--gt-accent)]/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[var(--gt-accent-2)]">
-                          Recent
-                        </span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-                {engine === 'openrouter' && (
-                  <div className="mt-3">
-                    <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-zinc-500">
-                      Harness
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0">
+                <CardTitle className="flex items-center gap-2 text-[13px]">
+                  {mode === 'loop' ? (
+                    <Repeat size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" />
+                  ) : (
+                    <FolderOpen size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" />
+                  )}
+                  {mode === 'loop' ? 'Paired loop' : 'New workspace session'}
+                </CardTitle>
+                <Badge variant={location === 'remote' ? 'info' : 'secondary'}>
+                  {location === 'remote' ? 'SSH daemon' : 'Local daemon'}
+                </Badge>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {mode === 'loop' ? (
+                  <>
+                    <div>
+                      <div className={sectionTitle + ' mb-2'}>Goal</div>
+                      <Textarea
+                        value={goal}
+                        onChange={(e) => setGoal(e.target.value)}
+                        placeholder="What should this loop converge on? (the driver turns this into a gradable contract)"
+                        rows={3}
+                      />
                     </div>
-                    <div className="grid grid-cols-2 gap-2">
-                      {(['codex', 'hermes'] as const).map((h) => (
-                        <button
-                          key={h}
-                          onClick={() => setOpenrouterHarness(h)}
-                          className={pickButton(openrouterHarness === h)}
-                        >
-                          <EngineLogo engine={h} size={15} />
-                          <span className="min-w-0 truncate text-[12px] font-semibold">
-                            {h === 'codex' ? 'Codex' : 'Hermes'}
-                          </span>
-                        </button>
-                      ))}
+                    <div>
+                      <div className={sectionTitle + ' mb-2'}>Topology</div>
+                      <div className="grid grid-cols-2 gap-2">
+                        {(
+                          [
+                            ['paired', 'Paired', 'Two live sessions grade each other'],
+                            ['single', 'Single', 'One live generator + an auto-grader per turn'],
+                          ] as const
+                        ).map(([val, label, hint]) => (
+                          <button
+                            key={val}
+                            onClick={() => setLoopTopology(val)}
+                            className={`rounded-lg border px-3 py-2 text-left transition ${
+                              loopTopology === val
+                                ? 'border-primary/60 bg-primary/10'
+                                : 'border-border bg-muted/30 hover:border-border'
+                            }`}
+                          >
+                            <div className="text-[12px] font-medium text-foreground">{label}</div>
+                            <div className="text-[10px] text-muted-foreground">{hint}</div>
+                          </button>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-                {isAiEngine(engine) && (
-                  <div className="mt-3">
-                    <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-zinc-500">
-                      Model
+                    <div>
+                      <div className={sectionTitle + ' mb-2'}>
+                        {loopTopology === 'single' ? 'Generator' : 'Role agents'}
+                      </div>
+                      <div className="flex gap-3">
+                        <RoleCard
+                          label={loopTopology === 'single' ? 'Generator' : 'Worker'}
+                          hint={
+                            loopTopology === 'single'
+                              ? 'Writes code; a fresh grader reviews each turn'
+                              : 'Writes code in the worktree'
+                          }
+                          engine={workerEngine}
+                          model={workerModel}
+                          onEngine={setWorkerEngine}
+                          onModel={setWorkerModel}
+                        />
+                        {loopTopology === 'paired' && (
+                          <RoleCard
+                            label="Driver"
+                            hint="Plans + grades, in the main repo"
+                            engine={driverEngine}
+                            model={driverModel}
+                            onEngine={setDriverEngine}
+                            onModel={setDriverModel}
+                          />
+                        )}
+                      </div>
                     </div>
-                    <div className="max-h-[240px] space-y-3 overflow-y-auto pr-0.5">
-                      <ModelSelect engine={engine} model={model} onChange={setModel} />
-                      {!(engine === 'openrouter' && openrouterHarness === 'hermes') && (
-                        <EffortSelect engine={engine} effort={effort} onChange={setEffort} />
+                  </>
+                ) : (
+                  <>
+                    {/* Engine */}
+                    <div>
+                      <div className={sectionTitle + ' mb-2'}>Engine</div>
+                      <div className="grid grid-cols-3 gap-2">
+                        {engineOptions.map((e) => (
+                          <button key={e} onClick={() => selectEngine(e)} className={pickButton(engine === e)}>
+                            {e === 'local' ? (
+                              <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
+                            ) : (
+                              <EngineLogo engine={e} size={16} />
+                            )}
+                            <span className="min-w-0 truncate text-[12.5px] font-semibold">
+                              {sessionEngineLabel(e)}
+                            </span>
+                            {e === recentEngine && (
+                              <span className="ml-auto shrink-0 rounded-full border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[var(--gt-accent-2)]">
+                                Recent
+                              </span>
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                      {engine === 'openrouter' && (
+                        <div className="mt-3">
+                          <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Harness</div>
+                          <div className="grid grid-cols-2 gap-2">
+                            {(['codex', 'hermes'] as const).map((h) => (
+                              <button key={h} onClick={() => setOpenrouterHarness(h)} className={pickButton(openrouterHarness === h)}>
+                                <EngineLogo engine={h} size={15} />
+                                <span className="min-w-0 truncate text-[12px] font-semibold">
+                                  {h === 'codex' ? 'Codex' : 'Hermes'}
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                      {isAiEngine(engine) && (
+                        <div className="mt-3">
+                          <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Model</div>
+                          <div className="max-h-[240px] space-y-3 overflow-y-auto pr-0.5">
+                            <ModelSelect engine={engine} model={model} onChange={setModel} />
+                            {!(engine === 'openrouter' && openrouterHarness === 'hermes') && (
+                              <EffortSelect engine={engine} effort={effort} onChange={setEffort} />
+                            )}
+                          </div>
+                        </div>
                       )}
                     </div>
-                  </div>
-                )}
-              </div>
-            )}
 
-            {loopsOn && mode === 'loop' && (
-              <>
-                <div>
-                  <div className={`${sectionTitle} mb-2`}>1 · Goal</div>
-                  <textarea
-                    value={goal}
-                    onChange={(e) => setGoal(e.target.value)}
-                    placeholder="What should this loop converge on? (the driver turns this into a gradable contract)"
-                    rows={3}
-                    className="w-full resize-none rounded-lg border border-[var(--gt-border)] bg-black/30 px-3 py-2 text-[12px] text-zinc-100 outline-none placeholder:text-zinc-600 focus:border-[var(--gt-accent)]/60"
-                  />
-                </div>
-                <div>
-                  <div className={`${sectionTitle} mb-2`}>2 · Topology</div>
-                  <div className="flex gap-2">
-                    {(
-                      [
-                        ['paired', 'Paired', 'Two live sessions grade each other'],
-                        ['single', 'Single', 'One live generator + an auto-grader per turn'],
-                      ] as const
-                    ).map(([val, label, hint]) => (
-                      <button
-                        key={val}
-                        onClick={() => setLoopTopology(val)}
-                        className={`flex-1 rounded-lg border px-3 py-2 text-left transition ${
-                          loopTopology === val
-                            ? 'border-[var(--gt-accent)]/60 bg-[var(--gt-accent)]/10'
-                            : 'border-[var(--gt-border)] bg-black/20 hover:border-[var(--gt-border)]'
-                        }`}
-                      >
-                        <div className="text-[12px] font-medium text-zinc-100">{label}</div>
-                        <div className="text-[10px] text-zinc-500">{hint}</div>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-                <div>
-                  <div className={`${sectionTitle} mb-2`}>
-                    3 · {loopTopology === 'single' ? 'Generator' : 'Role agents'}
-                  </div>
-                  <div className="flex gap-3">
-                    <RoleCard
-                      label={loopTopology === 'single' ? 'Generator' : 'Worker'}
-                      hint={
-                        loopTopology === 'single'
-                          ? 'Writes code; a fresh grader reviews each turn'
-                          : 'Writes code in the worktree'
-                      }
-                      engine={workerEngine}
-                      model={workerModel}
-                      onEngine={setWorkerEngine}
-                      onModel={setWorkerModel}
-                    />
-                    {loopTopology === 'paired' && (
-                      <RoleCard
-                        label="Driver"
-                        hint="Plans + grades, in the main repo"
-                        engine={driverEngine}
-                        model={driverModel}
-                        onEngine={setDriverEngine}
-                        onModel={setDriverModel}
-                      />
+                    {/* Daemon profile */}
+                    {!lockedCwd && (
+                      <div>
+                        <div className={sectionTitle + ' mb-2'}>Daemon profile</div>
+                        <div className="grid grid-cols-2 gap-2">
+                          <button onClick={() => switchLocation('local')} className={pickButton(location === 'local')}>
+                            <FolderOpen size={16} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+                            <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">Local</span>
+                          </button>
+                          <button
+                            onClick={() => switchLocation('remote')}
+                            disabled={remoteHosts.length === 0}
+                            className={pickButton(location === 'remote', remoteHosts.length === 0)}
+                          >
+                            <Server size={16} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
+                            <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">Remote SSH</span>
+                          </button>
+                        </div>
+                        {remoteHosts.length === 0 && (
+                          <div className="mt-2 text-[10.5px] text-muted-foreground">
+                            SSH profiles are configured in Settings → SSH Hosts.
+                          </div>
+                        )}
+                      </div>
                     )}
-                  </div>
-                </div>
-              </>
-            )}
-
-            {mode === 'single' && !lockedCwd && (
-              <div>
-                <div className={`${sectionTitle} mb-2`}>2 · Daemon profile</div>
-                <div className="grid grid-cols-2 gap-2">
-                  <button
-                    onClick={() => switchLocation('local')}
-                    className={pickButton(location === 'local')}
-                  >
-                    <FolderOpen size={16} strokeWidth={2} className="shrink-0 text-zinc-400" />
-                    <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
-                      Local
-                    </span>
-                  </button>
-                  <button
-                    onClick={() => switchLocation('remote')}
-                    disabled={remoteHosts.length === 0}
-                    className={pickButton(location === 'remote', remoteHosts.length === 0)}
-                  >
-                    <Server
-                      size={16}
-                      strokeWidth={2}
-                      className="shrink-0 text-[var(--gt-accent-2)]"
-                    />
-                    <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
-                      Remote SSH
-                    </span>
-                  </button>
-                </div>
-                {remoteHosts.length === 0 && (
-                  <div className="mt-2 text-[10.5px] text-zinc-600">
-                    SSH profiles are configured in Settings → SSH Hosts, then tuned under Daemon
-                    profile.
-                  </div>
+                  </>
                 )}
-              </div>
-            )}
 
-            <div>
-              <div className={`${sectionTitle} mb-2`}>{lockedCwd ? '2' : '3'} · Workspace</div>
-              {location === 'remote' && (
-                <div className="space-y-2">
-                  <div className="flex min-w-0 items-center gap-2 text-[11px] text-zinc-500">
-                    <Server
-                      size={13}
-                      strokeWidth={2}
-                      className="shrink-0 text-[var(--gt-accent-2)]"
-                    />
-                    <span className="font-semibold text-zinc-200">Remote daemon</span>
-                    <span className="truncate font-mono">
-                      {remoteHost?.sshTarget || 'No host selected'}
-                    </span>
-                  </div>
-                  {lockedRemote ? (
-                    <div className="flex items-center gap-2 rounded-md border border-[var(--gt-accent)]/40 bg-[var(--gt-accent)]/10 px-2 py-1 text-[11px] text-zinc-300">
-                      <span>{lockedRemote.label || lockedRemote.sshTarget}</span>
-                      <span className="font-mono text-zinc-600">{lockedRemote.sshTarget}</span>
-                    </div>
-                  ) : remoteHosts.length > 0 ? (
-                    <div className="flex flex-wrap gap-1.5">
+                {/* Workspace (shared by single + loop) */}
+                <div>
+                  <div className={sectionTitle + ' mb-2'}>Workspace</div>
+                  {location === 'remote' && (
+                    <div className="mb-2 space-y-2">
                       {remoteHosts.map((h) => (
                         <button
                           key={h.id}
@@ -1082,285 +925,312 @@ export function EntryScreen({
                           }}
                           className={`inline-flex max-w-[260px] items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] ${
                             remoteHostId === h.id
-                              ? 'border-[var(--gt-accent)]/60 bg-[var(--gt-accent)]/20 text-zinc-100'
-                              : 'border-[var(--gt-border)] text-zinc-400 hover:border-[var(--gt-accent)]/50 hover:text-zinc-200'
+                              ? 'border-primary/60 bg-primary/20 text-foreground'
+                              : 'border-border text-foreground/60 hover:border-primary/50 hover:text-foreground'
                           }`}
                         >
                           <Server size={11} strokeWidth={2} className="shrink-0" />
                           <span className="truncate">{h.label || h.sshTarget}</span>
-                          <span className="truncate font-mono text-zinc-600">{h.sshTarget}</span>
-                          <span className="rounded bg-white/5 px-1 text-[9px] uppercase tracking-wide text-zinc-600">
-                            {h.platform}
-                          </span>
                         </button>
                       ))}
                     </div>
-                  ) : null}
+                  )}
+                  {location === 'remote' && (
+                    <div className="rounded-lg border border-border bg-muted/20">
+                      <div className="flex items-center gap-1.5 border-b border-border p-2">
+                        <Input
+                          value={cwd}
+                          onChange={(e) => setCwd(e.target.value)}
+                          onKeyDown={(e) => e.key === 'Enter' && loadRemoteDir(cwd, { select: true })}
+                          placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
+                          className="border-0 bg-transparent font-mono shadow-none focus-visible:ring-0"
+                        />
+                        <button onClick={() => loadRemoteDir('~', { select: true })} title="Remote home" className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground">
+                          <Home size={13} strokeWidth={2} />
+                        </button>
+                        <button
+                          onClick={() => remoteListing?.parent && loadRemoteDir(remoteListing.parent, { select: true })}
+                          disabled={!remoteListing?.parent}
+                          title="Parent folder"
+                          className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground disabled:opacity-35"
+                        >
+                          <ArrowUp size={13} strokeWidth={2} />
+                        </button>
+                        <button
+                          onClick={() => loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })}
+                          title="Refresh"
+                          className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                        >
+                          <RefreshCw size={13} strokeWidth={2} className={remoteListingLoading ? 'animate-spin' : ''} />
+                        </button>
+                        <button
+                          onClick={() => {
+                            const selected = remoteListing?.cwd || cwd
+                            setCwd(selected)
+                            setProjParent(selected)
+                          }}
+                          className="inline-flex items-center gap-1 rounded-md border border-primary/50 bg-primary/10 px-2 py-1.5 text-[11px] text-foreground"
+                        >
+                          <Check size={12} strokeWidth={2.5} /> Use
+                        </button>
+                      </div>
+                      <div className="max-h-44 overflow-y-auto p-1.5">
+                        {remoteListingLoading && !remoteListing ? (
+                          <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-muted-foreground">
+                            <RefreshCw size={12} strokeWidth={2} className="animate-spin" /> Loading folders…
+                          </div>
+                        ) : remoteListingErr ? (
+                          <div className="px-2 py-3 text-[11px] text-destructive">{remoteListingErr}</div>
+                        ) : remoteListing && remoteListing.entries.length === 0 ? (
+                          <div className="px-2 py-3 text-[11px] text-muted-foreground">No child folders.</div>
+                        ) : (
+                          remoteListing?.entries.map((d) => (
+                            <button
+                              key={d.path}
+                              onClick={() => loadRemoteDir(d.path, { select: true })}
+                              className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-foreground/80 hover:bg-muted"
+                            >
+                              <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+                              <span className="truncate">{d.name}</span>
+                            </button>
+                          ))
+                        )}
+                      </div>
+                    </div>
+                  )}
+                  {lockedCwd && location === 'local' && (
+                    <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px] text-foreground/80">
+                      <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+                      <span className="font-semibold text-foreground">Current workspace</span>
+                      <span className="min-w-0 truncate font-mono text-muted-foreground">{tilde(lockedCwd)}</span>
+                    </div>
+                  )}
+                  {!lockedCwd && location === 'local' && (
+                    <div className="flex items-center gap-2">
+                      <Button variant="secondary" size="sm" onClick={browse}>
+                        <FolderOpen size={13} strokeWidth={2} /> Folder
+                      </Button>
+                      <Input value={cwd} onChange={(e) => setCwd(e.target.value)} placeholder="~ (home)" className="flex-1 font-mono" />
+                    </div>
+                  )}
                 </div>
-              )}
-              {location === 'remote' && (
-                <div className="mt-2 rounded-lg border border-[var(--gt-border)] bg-black/20">
-                  <div className="flex items-center gap-1.5 border-b border-[var(--gt-border)] p-2">
-                    <input
-                      value={cwd}
-                      onChange={(e) => setCwd(e.target.value)}
-                      onKeyDown={(e) => e.key === 'Enter' && loadRemoteDir(cwd, { select: true })}
-                      placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
-                      spellCheck={false}
-                      className="min-w-0 flex-1 bg-transparent px-1 font-mono text-[12px] text-zinc-200 outline-none placeholder:text-zinc-700"
+
+                {/* Footer */}
+                {mode === 'single' ? (
+                  <>
+                    <SpawnOptions
+                      value={spawn}
+                      onChange={changeSpawn}
+                      savedPrompts={savedPrompts}
+                      onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
+                      onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
                     />
-                    <button
-                      onClick={() => loadRemoteDir('~', { select: true })}
-                      className="rounded-md border border-[var(--gt-border)] p-1.5 text-zinc-500 hover:border-[var(--gt-accent)]/50 hover:text-zinc-200"
-                      title="Remote home"
-                    >
-                      <Home size={13} strokeWidth={2} />
-                    </button>
-                    <button
-                      onClick={() =>
-                        remoteListing?.parent &&
-                        loadRemoteDir(remoteListing.parent, { select: true })
-                      }
-                      disabled={!remoteListing?.parent}
-                      className="rounded-md border border-[var(--gt-border)] p-1.5 text-zinc-500 hover:border-[var(--gt-accent)]/50 hover:text-zinc-200 disabled:opacity-35"
-                      title="Parent folder"
+                    <div className="flex items-center gap-2 border-t border-border pt-4">
+                      <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Session name (optional)" className="flex-1" />
+                      <Button onClick={() => onChoose(withSpawn(buildChoice()))} disabled={location === 'remote' && !remoteHost}>
+                        <Plus className="size-4" /> New session
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    {loopErr && <div className="text-[11px] text-destructive">{loopErr}</div>}
+                    <Button
+                      onClick={() => void launchLoop()}
+                      disabled={!goal.trim() || !loopRepoRoot || loopBusy}
+                      className="w-full"
+                      size="lg"
                     >
-                      <ArrowUp size={13} strokeWidth={2} />
+                      <Repeat className="size-4" />
+                      {loopBusy ? 'Starting…' : 'Start paired loop'}
+                    </Button>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* ── Resume ─────────────────────────────────────────────────── */}
+          <TabsContent value="resume" className="pt-4">
+            {canResume ? (
+              <>
+                <div className="mb-3 flex items-center gap-2">
+                  <span className="text-[11px] font-bold uppercase tracking-[0.14em] text-muted-foreground">
+                    {engineLabel(engine)} sessions {resumeCountLabel}
+                  </span>
+                  <Button variant="secondary" size="xs" onClick={() => loadEngineSessions(undefined, true)} disabled={isLoadingThisEngine}>
+                    <RefreshCw size={11} strokeWidth={2} className={isLoadingThisEngine ? 'animate-spin' : ''} />
+                    {sessions ? 'Refresh' : 'Load sessions'}
+                  </Button>
+                  {filterDir && (
+                    <button onClick={() => setFilterDir('')} className="text-[11px] text-[var(--gt-accent-2)] hover:underline">
+                      Show all
                     </button>
-                    <button
-                      onClick={() =>
-                        loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })
-                      }
-                      className="rounded-md border border-[var(--gt-border)] p-1.5 text-zinc-500 hover:border-[var(--gt-accent)]/50 hover:text-zinc-200"
-                      title="Refresh"
-                    >
-                      <RefreshCw
-                        size={13}
-                        strokeWidth={2}
-                        className={remoteListingLoading ? 'animate-spin' : ''}
+                  )}
+                  {sessions && (
+                    <label className="relative ml-auto min-w-[180px]">
+                      <Search size={11} strokeWidth={2} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                      <input
+                        value={sessionSearch}
+                        onChange={(e) => setSessionSearch(e.target.value)}
+                        placeholder="Search sessions..."
+                        className="w-full rounded-md border border-border bg-muted/40 py-1 pl-6 pr-2 text-[11px] text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/60"
                       />
-                    </button>
-                    <button
-                      onClick={() => {
-                        const selected = remoteListing?.cwd || cwd
-                        setCwd(selected)
-                        setProjParent(selected)
-                      }}
-                      className="inline-flex items-center gap-1 rounded-md border border-[var(--gt-accent)]/50 bg-[var(--gt-accent)]/10 px-2 py-1.5 text-[11px] text-zinc-100"
-                    >
-                      <Check size={12} strokeWidth={2.5} />
-                      Use
-                    </button>
+                    </label>
+                  )}
+                </div>
+                {!sessions && !isLoadingThisEngine ? (
+                  <button onClick={() => loadEngineSessions()} className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground">
+                    <EngineLogo engine={engine} size={13} /> Load prior {engineLabel(engine)} sessions
+                  </button>
+                ) : isLoadingThisEngine ? (
+                  <div className="flex items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-[12px] text-muted-foreground">
+                    <RefreshCw size={13} strokeWidth={2} className="animate-spin" /> Scanning {engineLabel(engine)} sessions…
                   </div>
-                  <div className="max-h-44 overflow-y-auto p-1.5">
-                    {remoteListingLoading && !remoteListing ? (
-                      <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-zinc-600">
-                        <RefreshCw size={12} strokeWidth={2} className="animate-spin" />
-                        Loading folders…
-                      </div>
-                    ) : remoteListingErr ? (
-                      <div className="px-2 py-3 text-[11px] text-[var(--gt-red)]">
-                        {remoteListingErr}
-                      </div>
-                    ) : remoteListing && remoteListing.entries.length === 0 ? (
-                      <div className="px-2 py-3 text-[11px] text-zinc-600">No child folders.</div>
-                    ) : (
-                      remoteListing?.entries.map((d) => (
-                        <button
-                          key={d.path}
-                          onClick={() => loadRemoteDir(d.path, { select: true })}
-                          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-zinc-300 hover:bg-white/5"
-                        >
-                          <FolderOpen
-                            size={13}
-                            strokeWidth={2}
-                            className="shrink-0 text-zinc-500"
-                          />
-                          <span className="truncate">{d.name}</span>
-                          <span className="ml-auto truncate font-mono text-[10px] text-zinc-700">
-                            {remoteDisplayPath(d.path)}
-                          </span>
-                        </button>
-                      ))
+                ) : shown.length === 0 ? (
+                  <div className="rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
+                    {sessionSearch.trim()
+                      ? 'No sessions match that search.'
+                      : filterDir
+                        ? 'No sessions for this folder — start a new one.'
+                        : `No prior ${engineLabel(engine)} sessions found.`}
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {visibleShown.map((s) => (
+                      <button
+                        key={s.id}
+                        onClick={() => onChoose({ mode: 'resume', engine: s.engine, sessionId: s.id, cwd: s.cwd })}
+                        className="flex w-full items-center gap-3 rounded-xl border border-border bg-card p-3 text-left transition-colors hover:border-primary/60 hover:bg-muted/40"
+                      >
+                        <div className="min-w-0 flex-1">
+                          <div className="truncate text-[13px] text-foreground">
+                            {s.firstUserText || <span className="italic text-muted-foreground">Untitled session</span>}
+                          </div>
+                          <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-muted-foreground">
+                            <EngineLogo engine={s.engine} size={10} />
+                            <span className="font-mono">{tilde(s.cwd) || '~'}</span>
+                            {s.gitBranch && (
+                              <span className="inline-flex items-center gap-0.5 text-muted-foreground/70">
+                                <GitBranch size={11} strokeWidth={2} /> {s.gitBranch}
+                              </span>
+                            )}
+                            <span>· {s.turns} turns</span>
+                          </div>
+                        </div>
+                        <div className="shrink-0 text-right text-[10.5px] text-muted-foreground">
+                          <div>{rel(s.mtime)}</div>
+                          <div className="font-mono text-muted-foreground/70">{s.id.slice(0, 8)}</div>
+                        </div>
+                      </button>
+                    ))}
+                    {hiddenShown > 0 && (
+                      <button
+                        onClick={() => setVisibleSessionCount((n) => n + SESSION_PAGE_SIZE)}
+                        className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 p-3 text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                      >
+                        Load {Math.min(SESSION_PAGE_SIZE, hiddenShown)} more
+                        <span className="text-muted-foreground/70">· {hiddenShown} remaining</span>
+                      </button>
                     )}
                   </div>
-                </div>
-              )}
-              {lockedCwd && location === 'local' && (
-                <div className="flex items-center gap-2 rounded-lg border border-[var(--gt-border)] bg-black/20 px-3 py-2 text-[12px] text-zinc-300">
-                  <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-zinc-500" />
-                  <span className="font-semibold text-zinc-200">Current workspace</span>
-                  <span className="min-w-0 truncate font-mono text-zinc-500">
-                    {tilde(lockedCwd)}
-                  </span>
-                </div>
-              )}
-              {!lockedCwd && location === 'local' && (
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={browse}
-                    className={`${sel} inline-flex shrink-0 items-center gap-1.5 hover:border-[var(--gt-accent)]/60`}
-                  >
-                    <FolderOpen size={13} strokeWidth={2} />
-                    Folder
-                  </button>
-                  <input
-                    value={cwd}
-                    onChange={(e) => setCwd(e.target.value)}
-                    placeholder="~ (home)"
-                    spellCheck={false}
-                    className={`${sel} min-w-0 flex-1 font-mono`}
-                  />
-                </div>
-              )}
-            </div>
-
-            {mode === 'single' ? (
-              <div className="flex items-center gap-2 border-t border-[var(--gt-border)] pt-4">
-                <input
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Session name (optional)"
-                  className={`${sel} min-w-0 flex-1`}
-                />
-                <button
-                  onClick={() => onChoose(withSpawn(buildChoice()))}
-                  disabled={location === 'remote' && !remoteHost}
-                  className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-[var(--gt-accent)] px-4 py-2 text-[12px] font-semibold text-white hover:opacity-90 disabled:opacity-40"
-                >
-                  <Plus size={14} strokeWidth={2.5} />
-                  New session
-                </button>
-              </div>
+                )}
+              </>
             ) : (
-              <div className="border-t border-[var(--gt-border)] pt-4">
-                {loopErr && <div className="mb-2 text-[11px] text-[var(--gt-red)]">{loopErr}</div>}
-                <button
-                  onClick={() => void launchLoop()}
-                  disabled={!goal.trim() || !loopRepoRoot || loopBusy}
-                  title={!loopRepoRoot ? 'Pick a workspace first' : undefined}
-                  className="inline-flex w-full items-center justify-center gap-1.5 rounded-lg bg-[var(--gt-accent)] px-4 py-2 text-[12px] font-semibold text-white hover:opacity-90 disabled:opacity-40"
-                >
-                  <Repeat size={14} strokeWidth={2.5} />
-                  {loopBusy ? 'Starting…' : 'Start paired loop'}
-                </button>
+              <div className="rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
+                {engine === 'openrouter'
+                  ? 'OpenRouter runs are one-shot and not resumable.'
+                  : 'Resume is available for local AI-engine sessions.'}
               </div>
             )}
-          </div>
-        </div>
+          </TabsContent>
 
-        {mode === 'single' && canResume && (
-          <>
-            <div className="mb-2 flex items-center gap-2">
-              <span className="text-[11px] font-bold uppercase tracking-[0.14em] text-zinc-400">
-                Resume {engineLabel(engine)}
-                {filterDir ? ` · ${filterDir.split('/').pop()}` : ''}
-                {resumeCountLabel}
-              </span>
-              <button
-                onClick={() => loadEngineSessions(undefined, true)}
-                disabled={isLoadingThisEngine}
-                className="inline-flex items-center gap-1 rounded-md border border-[var(--gt-border)] px-2 py-0.5 text-[11px] text-[var(--gt-accent-2)] hover:border-[var(--gt-accent)]/50 disabled:opacity-50"
-              >
-                <RefreshCw
-                  size={11}
-                  strokeWidth={2}
-                  className={isLoadingThisEngine ? 'animate-spin' : ''}
+          {/* ── Scratch ────────────────────────────────────────────────── */}
+          <TabsContent value="scratch" className="pt-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-[13px]">
+                  <Zap size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> Scratch session
+                </CardTitle>
+                <p className="text-[11px] text-muted-foreground">
+                  Throwaway — spins up in{' '}
+                  <span className="font-mono">~/.config/TerMinal/scratch</span>, no repo attached.
+                </p>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <div className={sectionTitle + ' mb-2'}>Engine</div>
+                  <div className="grid grid-cols-3 gap-2">
+                    {engineOptions.map((e) => (
+                      <button key={e} onClick={() => setScratchEngine(e)} className={pickButton(scratchEngine === e)}>
+                        {e === 'local' ? (
+                          <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
+                        ) : (
+                          <EngineLogo engine={e} size={16} />
+                        )}
+                        <span className="min-w-0 truncate text-[12.5px] font-semibold">{sessionEngineLabel(e)}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <SpawnOptions
+                  value={spawn}
+                  onChange={changeSpawn}
+                  savedPrompts={savedPrompts}
+                  onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
+                  onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
                 />
-                {sessions ? 'Refresh' : 'Load sessions'}
-              </button>
-              {filterDir && (
-                <button
-                  onClick={() => setFilterDir('')}
-                  className="text-[11px] text-[var(--gt-accent-2)] hover:underline"
-                >
-                  Show all
-                </button>
-              )}
-              {sessions && (
-                <label className="relative ml-auto min-w-[180px]">
-                  <Search
-                    size={11}
-                    strokeWidth={2}
-                    className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-zinc-600"
-                  />
-                  <input
-                    value={sessionSearch}
-                    onChange={(e) => setSessionSearch(e.target.value)}
-                    placeholder="Search sessions..."
-                    className="w-full rounded-md border border-[var(--gt-border)] bg-black/25 py-1 pl-6 pr-2 text-[11px] text-zinc-200 outline-none placeholder:text-zinc-700 focus:border-[var(--gt-accent)]/60"
+                <Button onClick={() => startScratch(scratchEngine)} className="w-full" size="lg">
+                  <Zap className="size-4" /> Start scratch session
+                </Button>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* ── New repo ───────────────────────────────────────────────── */}
+          <TabsContent value="repo" className="pt-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-[13px]">
+                  <FolderPlus size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> New project from template
+                </CardTitle>
+                <p className="text-[11px] text-muted-foreground">
+                  Clones your template repo into a new folder, then opens a session there.
+                </p>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <Input
+                    value={projName}
+                    onChange={(e) => {
+                      setProjName(e.target.value)
+                      setScaffoldErr('')
+                    }}
+                    onKeyDown={(e) => e.key === 'Enter' && createProject()}
+                    placeholder="project-name"
+                    className="flex-1 font-mono"
                   />
-                </label>
-              )}
-            </div>
-            {!sessions && !isLoadingThisEngine ? (
-              <button
-                onClick={() => loadEngineSessions()}
-                className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-[var(--gt-border)] p-6 text-center text-[12px] text-zinc-500 hover:border-[var(--gt-accent)]/50 hover:text-zinc-300"
-              >
-                <EngineLogo engine={engine} size={13} />
-                Load prior {engineLabel(engine)} sessions
-              </button>
-            ) : isLoadingThisEngine ? (
-              <div className="flex items-center justify-center gap-2 rounded-xl border border-dashed border-[var(--gt-border)] p-6 text-[12px] text-zinc-500">
-                <RefreshCw size={13} strokeWidth={2} className="animate-spin" />
-                Scanning {engineLabel(engine)} sessions…
-              </div>
-            ) : shown.length === 0 ? (
-              <div className="rounded-xl border border-dashed border-[var(--gt-border)] p-6 text-center text-[12px] text-zinc-600">
-                {sessionSearch.trim()
-                  ? 'No sessions match that search.'
-                  : filterDir
-                    ? 'No sessions for this folder — start a new one above.'
-                    : `No prior ${engineLabel(engine)} sessions found.`}
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {visibleShown.map((s) => (
-                  <button
-                    key={s.id}
-                    onClick={() =>
-                      onChoose({ mode: 'resume', engine: s.engine, sessionId: s.id, cwd: s.cwd })
-                    }
-                    className="flex w-full items-center gap-3 rounded-xl border border-[var(--gt-border)] bg-[var(--gt-panel)] p-3 text-left hover:border-[var(--gt-accent)]/60 hover:bg-white/5"
-                  >
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate text-[13px] text-zinc-100">
-                        {s.firstUserText || (
-                          <span className="italic text-zinc-500">Untitled session</span>
-                        )}
-                      </div>
-                      <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-zinc-500">
-                        <EngineLogo engine={s.engine} size={10} />
-                        <span className="font-mono">{tilde(s.cwd) || '~'}</span>
-                        {s.gitBranch && (
-                          <span className="inline-flex items-center gap-0.5 text-zinc-600">
-                            <GitBranch size={11} strokeWidth={2} />
-                            {s.gitBranch}
-                          </span>
-                        )}
-                        <span className="text-zinc-600">· {s.turns} turns</span>
-                      </div>
-                    </div>
-                    <div className="shrink-0 text-right text-[10.5px] text-zinc-500">
-                      <div>{rel(s.mtime)}</div>
-                      <div className="font-mono text-zinc-600">{s.id.slice(0, 8)}</div>
+                  <Button variant="secondary" onClick={pickParent} title="Choose parent directory">
+                    {location === 'remote' ? <Server size={13} strokeWidth={2} /> : <FolderOpen size={13} strokeWidth={2} />}
+                    <span className="max-w-[180px] truncate">{projectParentLabel}</span>
+                  </Button>
+                  <Button onClick={createProject} disabled={!projName.trim() || scaffoldBusy}>
+                    <Plus className="size-4" /> {scaffoldBusy ? 'Creating…' : 'Create'}
+                  </Button>
+                </div>
+                {scaffoldErr && (
+                  <div className="text-[11px] text-destructive">
+                    {scaffoldErr}
+                    <div className="mt-0.5 text-[10.5px] leading-snug text-muted-foreground">
+                      Check your network/VPN and that the template repo (Settings → Projects → templateRepo)
+                      is reachable — a private repo needs your git auth.
                     </div>
-                  </button>
-                ))}
-                {hiddenShown > 0 && (
-                  <button
-                    onClick={() => setVisibleSessionCount((n) => n + SESSION_PAGE_SIZE)}
-                    className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-[var(--gt-border)] bg-black/10 p-3 text-[12px] text-zinc-500 hover:border-[var(--gt-accent)]/50 hover:text-zinc-300"
-                  >
-                    Load {Math.min(SESSION_PAGE_SIZE, hiddenShown)} more
-                    <span className="text-zinc-700">· {hiddenShown} remaining</span>
-                  </button>
+                  </div>
                 )}
-              </div>
-            )}
-          </>
-        )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
       </div>
     </div>
   )

From 0f992bdeadfd132fc42fdcc6a071a4ef9713354c Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Sun, 16 Aug 2026 17:55:28 -0700
Subject: [PATCH 04/11] =?UTF-8?q?feat(ux):=20streamline=20the=20entry=20sc?=
 =?UTF-8?q?reen=20=E2=80=94=20self-contained=20tabs,=20tighter=20spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Resume is now self-contained: its own engine picker, no longer coupled to
  the New-session picker or the workspace filter (dropped filterDir; search
  already matches cwd)
- Tightened padding throughout (container, header, tabs, cards, section labels)
- Spawn options are transparent (no card background/border) — a plain collapsible
- Resume list denser (p-2.5, space-y-1.5); smaller header/logo

No behavior change to launch logic (spawn, remote browsing, scaffold, loop).
---
 src/renderer/src/components/EntryScreen.tsx  | 267 +++++++++----------
 src/renderer/src/components/SpawnOptions.tsx |   5 +-
 2 files changed, 130 insertions(+), 142 deletions(-)

diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index 7f9695de..dd0fc41e 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -248,12 +248,17 @@ export function EntryScreen({
   const [visibleSessionCount, setVisibleSessionCount] = useState(SESSION_PAGE_SIZE)
   const [sessionSearch, setSessionSearch] = useState('')
   const [cwd, setCwd] = useState(lockedRemote?.cwd || lockedCwd || '') // new-session target
-  const [filterDir, setFilterDir] = useState(lockedCwd || '') // resume filter ('' = all)
   // Captured once at mount — the tag stays on the restored engine even as the
   // user clicks around; clicks persist for the NEXT open via selectEngine.
   const [recentEngine] = useState<SessionEngine | null>(readLastEngine)
   const [engine, setEngine] = useState<SessionEngine>(recentEngine ?? 'local')
   const [scratchEngine, setScratchEngine] = useState<SessionEngine>('claude')
+  // Resume is self-contained: its own engine, independent of the New-session picker.
+  const [resumeEngine, setResumeEngine] = useState<Engine>(
+    recentEngine && isAiEngine(recentEngine) && recentEngine !== 'openrouter'
+      ? recentEngine
+      : 'claude',
+  )
   const [model, setModel] = useState<string | undefined>(undefined) // '' semantics: undefined = engine default
   const [effort, setEffort] = useState<string | undefined>(undefined) // undefined = engine default
   const [openrouterHarness, setOpenrouterHarness] = useState<'codex' | 'hermes'>('codex')
@@ -388,7 +393,7 @@ export function EntryScreen({
   }
   // A restored recent engine should behave like a click — load its resume list.
   useEffect(() => {
-    if (isAiEngine(engine)) loadEngineSessions(engine)
+    if (isAiEngine(resumeEngine) && resumeEngine !== 'openrouter') loadEngineSessions(resumeEngine)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
@@ -401,8 +406,11 @@ export function EntryScreen({
     }
     setModel(undefined) // model is engine-specific — reset to the new engine's default
     setEffort(undefined) // effort levels are engine-specific too
+  }
+  const selectResumeEngine = (next: Engine) => {
+    setResumeEngine(next)
     setVisibleSessionCount(SESSION_PAGE_SIZE)
-    if (isAiEngine(next)) loadEngineSessions(next)
+    if (next !== 'openrouter') loadEngineSessions(next)
   }
   const switchMode = (next: 'single' | 'loop') => {
     setMode(next)
@@ -412,7 +420,6 @@ export function EntryScreen({
   }
   const switchLocation = (next: 'local' | 'remote') => {
     setLocation(next)
-    setFilterDir('')
     if (lockedCwd) return
     if (next === 'local') {
       setCwd('')
@@ -434,7 +441,7 @@ export function EntryScreen({
 
   useEffect(() => {
     setVisibleSessionCount(SESSION_PAGE_SIZE)
-  }, [engine, filterDir, sessionSearch])
+  }, [resumeEngine, sessionSearch])
 
   // One-click throwaway session: spin up an engine in the app-owned scratch dir
   // (no repo, no folder-picking). For a quick chat you don't want to file away.
@@ -464,7 +471,6 @@ export function EntryScreen({
   // selecting a folder targets the new session there AND filters resume to it
   const selectDir = (path: string) => {
     setCwd(path)
-    setFilterDir(path)
   }
   const browse = async () => {
     const dir = await window.gt.pickDir()
@@ -473,22 +479,17 @@ export function EntryScreen({
 
   // openrouter is one-shot with no resumable local store — hide its resume list.
   // Hermes resumes from its ~/.hermes SQLite store, so it's allowed.
-  const canResume =
-    isAiEngine(engine) && engine !== 'openrouter' && location === 'local' && !lockedRemote
-  const sessions = canResume ? sessionsByEngine[engine] : undefined
+  const canResume = isAiEngine(resumeEngine) && resumeEngine !== 'openrouter' && !lockedRemote
+  const sessions = canResume ? sessionsByEngine[resumeEngine] : undefined
   // Memoized — these scans (6 fields per session) used to re-run on every
   // keystroke AND every unrelated re-render of this large component.
-  const scopedSessionCount = useMemo(
-    () => (sessions ? filterSessionMetas(sessions, { filterDir }).length : 0),
-    [sessions, filterDir],
-  )
   const shown = useMemo(
-    () => (sessions ? filterSessionMetas(sessions, { filterDir, query: sessionSearch }) : []),
-    [sessions, filterDir, sessionSearch],
+    () => (sessions ? filterSessionMetas(sessions, { query: sessionSearch }) : []),
+    [sessions, sessionSearch],
   )
   const visibleShown = shown.slice(0, visibleSessionCount)
   const hiddenShown = Math.max(0, shown.length - visibleShown.length)
-  const isLoadingThisEngine = canResume ? !!loadingSessions[engine] : false
+  const isLoadingThisEngine = canResume ? !!loadingSessions[resumeEngine] : false
   const remoteHost = lockedRemote
     ? {
         id: lockedRemote.hostId,
@@ -578,11 +579,7 @@ export function EntryScreen({
       },
     }
   }
-  const resumeCountLabel = sessions
-    ? ` · showing ${visibleShown.length} of ${shown.length}${
-        scopedSessionCount !== shown.length ? ` (${scopedSessionCount} in scope)` : ''
-      }`
-    : ''
+  const resumeCountLabel = sessions ? ` · ${shown.length}` : ''
   const projectParentLabel =
     location === 'remote'
       ? remoteDisplayPath(projParent || cwd || remoteCwd || '~')
@@ -616,15 +613,15 @@ export function EntryScreen({
 
   return (
     <div className="h-full w-full overflow-y-auto bg-background">
-      <div className="mx-auto w-full max-w-[860px] px-8 py-8">
+      <div className="mx-auto w-full max-w-[820px] px-6 py-5">
         {/* Header */}
-        <header className="mb-6 flex items-center gap-3">
-          <img src={logo} alt="" draggable={false} className="h-10 w-10 rounded-xl" />
+        <header className="mb-4 flex items-center gap-3">
+          <img src={logo} alt="" draggable={false} className="h-9 w-9 rounded-lg" />
           <div className="min-w-0 flex-1">
-            <h1 className="gt-grad-text text-[22px] font-bold leading-tight tracking-tight">
+            <h1 className="gt-grad-text text-[20px] font-bold leading-tight tracking-tight">
               TerMinal
             </h1>
-            <p className="mt-0.5 text-[13px] text-muted-foreground">
+            <p className="text-[12px] text-muted-foreground">
               {lockedCwd ? (
                 <>
                   New session in{' '}
@@ -644,7 +641,7 @@ export function EntryScreen({
 
         {/* Intent switcher */}
         <Tabs value={intent} onValueChange={(v) => setIntent(v as Intent)}>
-          <TabsList className="mb-5 h-9 w-full justify-start rounded-xl px-1">
+          <TabsList className="mb-3 h-9 w-full justify-start rounded-xl px-1">
             <TabsTrigger value="new" className="gap-1.5">
               <SquareTerminal className="size-3.5" /> New session
             </TabsTrigger>
@@ -664,7 +661,7 @@ export function EntryScreen({
           </TabsList>
 
           {/* ── New session / Paired loop ─────────────────────────────── */}
-          <TabsContent value="new" className="space-y-4 pt-4">
+          <TabsContent value="new" className="space-y-3 pt-3">
             {loopsOn && !lockedCwd && (
               <div className="inline-flex items-center gap-1 rounded-xl border border-border bg-muted/40 p-1">
                 {(['single', 'loop'] as const).map((m) => (
@@ -732,16 +729,16 @@ export function EntryScreen({
                   )
                 }
                 return (
-                  <div className="space-y-3">
+                  <div className="space-y-2">
                     {pins.length > 0 && (
                       <div>
-                        <div className={sectionTitle + ' mb-2'}>Pinned</div>
+                        <div className={sectionTitle + ' mb-1.5'}>Pinned</div>
                         <div className="flex flex-wrap gap-1.5">{pins.map(chip)}</div>
                       </div>
                     )}
                     {recents.length > 0 && (
                       <div>
-                        <div className={sectionTitle + ' mb-2'}>Recent workspaces</div>
+                        <div className={sectionTitle + ' mb-1.5'}>Recent workspaces</div>
                         <div className="flex flex-wrap gap-1.5">{recents.map(chip)}</div>
                       </div>
                     )}
@@ -750,7 +747,7 @@ export function EntryScreen({
               })()}
 
             <Card>
-              <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0">
+              <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0 py-3">
                 <CardTitle className="flex items-center gap-2 text-[13px]">
                   {mode === 'loop' ? (
                     <Repeat size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" />
@@ -763,11 +760,11 @@ export function EntryScreen({
                   {location === 'remote' ? 'SSH daemon' : 'Local daemon'}
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-4">
+              <CardContent className="space-y-3 pt-3">
                 {mode === 'loop' ? (
                   <>
                     <div>
-                      <div className={sectionTitle + ' mb-2'}>Goal</div>
+                      <div className={sectionTitle + ' mb-1.5'}>Goal</div>
                       <Textarea
                         value={goal}
                         onChange={(e) => setGoal(e.target.value)}
@@ -776,7 +773,7 @@ export function EntryScreen({
                       />
                     </div>
                     <div>
-                      <div className={sectionTitle + ' mb-2'}>Topology</div>
+                      <div className={sectionTitle + ' mb-1.5'}>Topology</div>
                       <div className="grid grid-cols-2 gap-2">
                         {(
                           [
@@ -800,7 +797,7 @@ export function EntryScreen({
                       </div>
                     </div>
                     <div>
-                      <div className={sectionTitle + ' mb-2'}>
+                      <div className={sectionTitle + ' mb-1.5'}>
                         {loopTopology === 'single' ? 'Generator' : 'Role agents'}
                       </div>
                       <div className="flex gap-3">
@@ -833,7 +830,7 @@ export function EntryScreen({
                   <>
                     {/* Engine */}
                     <div>
-                      <div className={sectionTitle + ' mb-2'}>Engine</div>
+                      <div className={sectionTitle + ' mb-1.5'}>Engine</div>
                       <div className="grid grid-cols-3 gap-2">
                         {engineOptions.map((e) => (
                           <button key={e} onClick={() => selectEngine(e)} className={pickButton(engine === e)}>
@@ -854,7 +851,7 @@ export function EntryScreen({
                         ))}
                       </div>
                       {engine === 'openrouter' && (
-                        <div className="mt-3">
+                        <div className="mt-2.5">
                           <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Harness</div>
                           <div className="grid grid-cols-2 gap-2">
                             {(['codex', 'hermes'] as const).map((h) => (
@@ -869,7 +866,7 @@ export function EntryScreen({
                         </div>
                       )}
                       {isAiEngine(engine) && (
-                        <div className="mt-3">
+                        <div className="mt-2.5">
                           <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Model</div>
                           <div className="max-h-[240px] space-y-3 overflow-y-auto pr-0.5">
                             <ModelSelect engine={engine} model={model} onChange={setModel} />
@@ -884,7 +881,7 @@ export function EntryScreen({
                     {/* Daemon profile */}
                     {!lockedCwd && (
                       <div>
-                        <div className={sectionTitle + ' mb-2'}>Daemon profile</div>
+                        <div className={sectionTitle + ' mb-1.5'}>Daemon profile</div>
                         <div className="grid grid-cols-2 gap-2">
                           <button onClick={() => switchLocation('local')} className={pickButton(location === 'local')}>
                             <FolderOpen size={16} strokeWidth={2} className="shrink-0 text-muted-foreground" />
@@ -911,7 +908,7 @@ export function EntryScreen({
 
                 {/* Workspace (shared by single + loop) */}
                 <div>
-                  <div className={sectionTitle + ' mb-2'}>Workspace</div>
+                  <div className={sectionTitle + ' mb-1.5'}>Workspace</div>
                   {location === 'remote' && (
                     <div className="mb-2 space-y-2">
                       {remoteHosts.map((h) => (
@@ -1025,7 +1022,7 @@ export function EntryScreen({
                       onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
                       onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
                     />
-                    <div className="flex items-center gap-2 border-t border-border pt-4">
+                    <div className="flex items-center gap-2 border-t border-border pt-3">
                       <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Session name (optional)" className="flex-1" />
                       <Button onClick={() => onChoose(withSpawn(buildChoice()))} disabled={location === 'remote' && !remoteHost}>
                         <Plus className="size-4" /> New session
@@ -1050,105 +1047,99 @@ export function EntryScreen({
             </Card>
           </TabsContent>
 
-          {/* ── Resume ─────────────────────────────────────────────────── */}
-          <TabsContent value="resume" className="pt-4">
-            {canResume ? (
-              <>
-                <div className="mb-3 flex items-center gap-2">
-                  <span className="text-[11px] font-bold uppercase tracking-[0.14em] text-muted-foreground">
-                    {engineLabel(engine)} sessions {resumeCountLabel}
-                  </span>
-                  <Button variant="secondary" size="xs" onClick={() => loadEngineSessions(undefined, true)} disabled={isLoadingThisEngine}>
-                    <RefreshCw size={11} strokeWidth={2} className={isLoadingThisEngine ? 'animate-spin' : ''} />
-                    {sessions ? 'Refresh' : 'Load sessions'}
-                  </Button>
-                  {filterDir && (
-                    <button onClick={() => setFilterDir('')} className="text-[11px] text-[var(--gt-accent-2)] hover:underline">
-                      Show all
-                    </button>
-                  )}
-                  {sessions && (
-                    <label className="relative ml-auto min-w-[180px]">
-                      <Search size={11} strokeWidth={2} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-                      <input
-                        value={sessionSearch}
-                        onChange={(e) => setSessionSearch(e.target.value)}
-                        placeholder="Search sessions..."
-                        className="w-full rounded-md border border-border bg-muted/40 py-1 pl-6 pr-2 text-[11px] text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/60"
-                      />
-                    </label>
-                  )}
-                </div>
-                {!sessions && !isLoadingThisEngine ? (
-                  <button onClick={() => loadEngineSessions()} className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground">
-                    <EngineLogo engine={engine} size={13} /> Load prior {engineLabel(engine)} sessions
+          {/* ── Resume (self-contained) ───────────────────────────────── */}
+          <TabsContent value="resume" className="pt-3">
+            <div className="mb-3 flex items-center gap-2">
+              <div className="flex flex-wrap items-center gap-1">
+                {ENGINE_IDS.filter((e) => e !== 'openrouter').map((e) => (
+                  <button
+                    key={e}
+                    onClick={() => selectResumeEngine(e)}
+                    className={`flex items-center gap-1.5 rounded-lg border px-2 py-1 text-[11.5px] font-semibold transition-colors ${
+                      resumeEngine === e
+                        ? 'border-primary/60 bg-primary/15 text-foreground'
+                        : 'border-border text-muted-foreground hover:border-primary/50 hover:text-foreground'
+                    }`}
+                  >
+                    <EngineLogo engine={e} size={12} />
+                    {engineLabel(e)}
                   </button>
-                ) : isLoadingThisEngine ? (
-                  <div className="flex items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-[12px] text-muted-foreground">
-                    <RefreshCw size={13} strokeWidth={2} className="animate-spin" /> Scanning {engineLabel(engine)} sessions…
-                  </div>
-                ) : shown.length === 0 ? (
-                  <div className="rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
-                    {sessionSearch.trim()
-                      ? 'No sessions match that search.'
-                      : filterDir
-                        ? 'No sessions for this folder — start a new one.'
-                        : `No prior ${engineLabel(engine)} sessions found.`}
-                  </div>
-                ) : (
-                  <div className="space-y-2">
-                    {visibleShown.map((s) => (
-                      <button
-                        key={s.id}
-                        onClick={() => onChoose({ mode: 'resume', engine: s.engine, sessionId: s.id, cwd: s.cwd })}
-                        className="flex w-full items-center gap-3 rounded-xl border border-border bg-card p-3 text-left transition-colors hover:border-primary/60 hover:bg-muted/40"
-                      >
-                        <div className="min-w-0 flex-1">
-                          <div className="truncate text-[13px] text-foreground">
-                            {s.firstUserText || <span className="italic text-muted-foreground">Untitled session</span>}
-                          </div>
-                          <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-muted-foreground">
-                            <EngineLogo engine={s.engine} size={10} />
-                            <span className="font-mono">{tilde(s.cwd) || '~'}</span>
-                            {s.gitBranch && (
-                              <span className="inline-flex items-center gap-0.5 text-muted-foreground/70">
-                                <GitBranch size={11} strokeWidth={2} /> {s.gitBranch}
-                              </span>
-                            )}
-                            <span>· {s.turns} turns</span>
-                          </div>
-                        </div>
-                        <div className="shrink-0 text-right text-[10.5px] text-muted-foreground">
-                          <div>{rel(s.mtime)}</div>
-                          <div className="font-mono text-muted-foreground/70">{s.id.slice(0, 8)}</div>
-                        </div>
-                      </button>
-                    ))}
-                    {hiddenShown > 0 && (
-                      <button
-                        onClick={() => setVisibleSessionCount((n) => n + SESSION_PAGE_SIZE)}
-                        className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 p-3 text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground"
-                      >
-                        Load {Math.min(SESSION_PAGE_SIZE, hiddenShown)} more
-                        <span className="text-muted-foreground/70">· {hiddenShown} remaining</span>
-                      </button>
-                    )}
-                  </div>
-                )}
-              </>
-            ) : (
+                ))}
+              </div>
+              <span className="ml-auto shrink-0 text-[10.5px] text-muted-foreground">{resumeCountLabel}</span>
+              <Button variant="secondary" size="xs" onClick={() => loadEngineSessions(resumeEngine, true)} disabled={isLoadingThisEngine}>
+                <RefreshCw size={11} strokeWidth={2} className={isLoadingThisEngine ? 'animate-spin' : ''} />
+                {sessions ? 'Refresh' : 'Load'}
+              </Button>
+            </div>
+            {sessions && (
+              <label className="relative mb-2 block">
+                <Search size={11} strokeWidth={2} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                <input
+                  value={sessionSearch}
+                  onChange={(e) => setSessionSearch(e.target.value)}
+                  placeholder="Search sessions…"
+                  className="w-full rounded-md border border-border bg-muted/40 py-1.5 pl-6 pr-2 text-[11px] text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/60"
+                />
+              </label>
+            )}
+            {!sessions && !isLoadingThisEngine ? (
+              <button onClick={() => loadEngineSessions(resumeEngine)} className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground">
+                <EngineLogo engine={resumeEngine} size={13} /> Load prior {engineLabel(resumeEngine)} sessions
+              </button>
+            ) : isLoadingThisEngine ? (
+              <div className="flex items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-[12px] text-muted-foreground">
+                <RefreshCw size={13} strokeWidth={2} className="animate-spin" /> Scanning {engineLabel(resumeEngine)} sessions…
+              </div>
+            ) : shown.length === 0 ? (
               <div className="rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
-                {engine === 'openrouter'
-                  ? 'OpenRouter runs are one-shot and not resumable.'
-                  : 'Resume is available for local AI-engine sessions.'}
+                {sessionSearch.trim() ? 'No sessions match that search.' : `No prior ${engineLabel(resumeEngine)} sessions found.`}
+              </div>
+            ) : (
+              <div className="space-y-1.5">
+                {visibleShown.map((s) => (
+                  <button
+                    key={s.id}
+                    onClick={() => onChoose({ mode: 'resume', engine: s.engine, sessionId: s.id, cwd: s.cwd })}
+                    className="flex w-full items-center gap-3 rounded-xl border border-border bg-card p-2.5 text-left transition-colors hover:border-primary/60 hover:bg-muted/40"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-[13px] text-foreground">
+                        {s.firstUserText || <span className="italic text-muted-foreground">Untitled session</span>}
+                      </div>
+                      <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-muted-foreground">
+                        <span className="font-mono">{tilde(s.cwd) || '~'}</span>
+                        {s.gitBranch && (
+                          <span className="inline-flex items-center gap-0.5 text-muted-foreground/70">
+                            <GitBranch size={11} strokeWidth={2} /> {s.gitBranch}
+                          </span>
+                        )}
+                        <span>· {s.turns} turns</span>
+                      </div>
+                    </div>
+                    <div className="shrink-0 text-right text-[10.5px] text-muted-foreground">
+                      <div>{rel(s.mtime)}</div>
+                      <div className="font-mono text-muted-foreground/70">{s.id.slice(0, 8)}</div>
+                    </div>
+                  </button>
+                ))}
+                {hiddenShown > 0 && (
+                  <button
+                    onClick={() => setVisibleSessionCount((n) => n + SESSION_PAGE_SIZE)}
+                    className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 p-2.5 text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                  >
+                    Load {Math.min(SESSION_PAGE_SIZE, hiddenShown)} more
+                    <span className="text-muted-foreground/70">· {hiddenShown} remaining</span>
+                  </button>
+                )}
               </div>
             )}
           </TabsContent>
 
           {/* ── Scratch ────────────────────────────────────────────────── */}
-          <TabsContent value="scratch" className="pt-4">
+          <TabsContent value="scratch" className="pt-3">
             <Card>
-              <CardHeader>
+              <CardHeader className="py-3">
                 <CardTitle className="flex items-center gap-2 text-[13px]">
                   <Zap size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> Scratch session
                 </CardTitle>
@@ -1157,9 +1148,9 @@ export function EntryScreen({
                   <span className="font-mono">~/.config/TerMinal/scratch</span>, no repo attached.
                 </p>
               </CardHeader>
-              <CardContent className="space-y-4">
+              <CardContent className="space-y-3 pt-3">
                 <div>
-                  <div className={sectionTitle + ' mb-2'}>Engine</div>
+                  <div className={sectionTitle + ' mb-1.5'}>Engine</div>
                   <div className="grid grid-cols-3 gap-2">
                     {engineOptions.map((e) => (
                       <button key={e} onClick={() => setScratchEngine(e)} className={pickButton(scratchEngine === e)}>
@@ -1188,9 +1179,9 @@ export function EntryScreen({
           </TabsContent>
 
           {/* ── New repo ───────────────────────────────────────────────── */}
-          <TabsContent value="repo" className="pt-4">
+          <TabsContent value="repo" className="pt-3">
             <Card>
-              <CardHeader>
+              <CardHeader className="py-3">
                 <CardTitle className="flex items-center gap-2 text-[13px]">
                   <FolderPlus size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> New project from template
                 </CardTitle>
@@ -1198,7 +1189,7 @@ export function EntryScreen({
                   Clones your template repo into a new folder, then opens a session there.
                 </p>
               </CardHeader>
-              <CardContent className="space-y-4">
+              <CardContent className="space-y-3 pt-3">
                 <div className="flex items-center gap-2">
                   <Input
                     value={projName}
diff --git a/src/renderer/src/components/SpawnOptions.tsx b/src/renderer/src/components/SpawnOptions.tsx
index bf729fd1..8030f7c5 100644
--- a/src/renderer/src/components/SpawnOptions.tsx
+++ b/src/renderer/src/components/SpawnOptions.tsx
@@ -111,10 +111,7 @@ export function SpawnOptions({
   ]
 
   return (
-    <div
-      data-spawn-options
-      className="mb-5 rounded-2xl border border-[var(--gt-border)] bg-[var(--gt-panel)] px-4 py-2.5"
-    >
+    <div data-spawn-options className="mb-2">
       <button
         type="button"
         onClick={() => setOpen((o) => !o)}

From 76ae4f02ac115f6f9819fc82f52455f197d108e2 Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Sun, 16 Aug 2026 18:25:43 -0700
Subject: [PATCH 05/11] =?UTF-8?q?feat(ux):=20new-session=20flow=20as=20a?=
 =?UTF-8?q?=203-step=20wizard=20(Model=20=E2=86=92=20Workspace=20=E2=86=92?=
 =?UTF-8?q?=20Review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Step 1 Model: engine + model/effort/harness
- Step 2 Workspace: local vs remote, then folder / SSH dir browser
- Step 3 Review: summary + optional name + spawn options + launch
- Progress bar + Back/Next; recent/pinned workspaces stay as one-click fast path
- Paired loop keeps its own single card (goal/topology/roles/workspace)

Respects the dependency order (model→engine, host→location, workspace UI→location).
---
 src/renderer/src/components/EntryScreen.tsx | 727 +++++++++++---------
 1 file changed, 411 insertions(+), 316 deletions(-)

diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index dd0fc41e..912770b1 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -7,6 +7,8 @@ import {
   SquareTerminal,
   RefreshCw,
   Server,
+  ArrowLeft,
+  ArrowRight,
   ArrowUp,
   Home,
   Check,
@@ -223,6 +225,8 @@ export function EntryScreen({
   const [intent, setIntent] = useState<Intent>('new')
   // 'single' → one session (default). 'loop' → two linked role agents.
   const [mode, setMode] = useState<'single' | 'loop'>(initialMode)
+  // New-session wizard: Model → Workspace → Review.
+  const [wizardStep, setWizardStep] = useState<1 | 2 | 3>(1)
   useEffect(() => setMode(initialMode), [initialMode])
   // Flipping the flag off while the screen sits in loop mode must not leave a
   // loop form on screen with a launch button main would reject.
@@ -661,9 +665,9 @@ export function EntryScreen({
           </TabsList>
 
           {/* ── New session / Paired loop ─────────────────────────────── */}
-          <TabsContent value="new" className="space-y-3 pt-3">
+          <TabsContent value="new" className="pt-3">
             {loopsOn && !lockedCwd && (
-              <div className="inline-flex items-center gap-1 rounded-xl border border-border bg-muted/40 p-1">
+              <div className="mb-3 inline-flex items-center gap-1 rounded-xl border border-border bg-muted/40 p-1">
                 {(['single', 'loop'] as const).map((m) => (
                   <button
                     key={m}
@@ -685,203 +689,259 @@ export function EntryScreen({
               </div>
             )}
 
-            {!lockedCwd &&
-              (() => {
-                const pins = pinnedWorkspaces
-                const recents = readWorkspaceList('gt.recentWorkspaces')
-                  .filter((r) => !pins.includes(r))
-                  .slice(0, 8)
-                if (!pins.length && !recents.length) return null
-                const chip = (r: string) => {
-                  const isPinned = pins.includes(r)
-                  return (
-                    <div
-                      key={r}
-                      title={r}
-                      className="group inline-flex max-w-[240px] items-center gap-1 rounded-lg border border-border bg-muted/30 py-1.5 pl-2.5 pr-1 text-[12px] text-foreground/80 transition-colors hover:border-primary/60"
-                    >
-                      <button
-                        onClick={() =>
-                          mode === 'loop' ? selectDir(r) : onChoose(withSpawn(choiceFromRecent(r)))
+            {mode === 'loop' ? (
+              /* Paired loop — its own card (goal → topology → roles → workspace) */
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0 py-3">
+                  <CardTitle className="flex items-center gap-2 text-[13px]">
+                    <Repeat size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> Paired loop
+                  </CardTitle>
+                  <Badge variant="secondary">Local</Badge>
+                </CardHeader>
+                <CardContent className="space-y-3 pt-3">
+                  <div>
+                    <div className={sectionTitle + ' mb-1.5'}>Goal</div>
+                    <Textarea
+                      value={goal}
+                      onChange={(e) => setGoal(e.target.value)}
+                      placeholder="What should this loop converge on? (the driver turns this into a gradable contract)"
+                      rows={3}
+                    />
+                  </div>
+                  <div>
+                    <div className={sectionTitle + ' mb-1.5'}>Topology</div>
+                    <div className="grid grid-cols-2 gap-2">
+                      {(
+                        [
+                          ['paired', 'Paired', 'Two live sessions grade each other'],
+                          ['single', 'Single', 'One live generator + an auto-grader per turn'],
+                        ] as const
+                      ).map(([val, label, hint]) => (
+                        <button
+                          key={val}
+                          onClick={() => setLoopTopology(val)}
+                          className={`rounded-lg border px-3 py-2 text-left transition ${
+                            loopTopology === val
+                              ? 'border-primary/60 bg-primary/10'
+                              : 'border-border bg-muted/30 hover:border-border'
+                          }`}
+                        >
+                          <div className="text-[12px] font-medium text-foreground">{label}</div>
+                          <div className="text-[10px] text-muted-foreground">{hint}</div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  <div>
+                    <div className={sectionTitle + ' mb-1.5'}>
+                      {loopTopology === 'single' ? 'Generator' : 'Role agents'}
+                    </div>
+                    <div className="flex gap-3">
+                      <RoleCard
+                        label={loopTopology === 'single' ? 'Generator' : 'Worker'}
+                        hint={
+                          loopTopology === 'single'
+                            ? 'Writes code; a fresh grader reviews each turn'
+                            : 'Writes code in the worktree'
                         }
-                        className="inline-flex min-w-0 items-center gap-1.5 text-left"
-                      >
-                        {isRemotePath(r) ? (
-                          <Server size={12} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
-                        ) : (
-                          <FolderOpen size={12} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                        )}
-                        <span className="truncate">{pathLabel(r)}</span>
-                      </button>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          togglePin(r)
-                        }}
-                        title={isPinned ? 'Unpin workspace' : 'Pin workspace'}
-                        className={`shrink-0 rounded p-0.5 transition-colors ${
-                          isPinned ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground hover:text-foreground'
-                        }`}
-                      >
-                        <Pin size={12} strokeWidth={2} fill={isPinned ? 'currentColor' : 'none'} />
-                      </button>
+                        engine={workerEngine}
+                        model={workerModel}
+                        onEngine={setWorkerEngine}
+                        onModel={setWorkerModel}
+                      />
+                      {loopTopology === 'paired' && (
+                        <RoleCard
+                          label="Driver"
+                          hint="Plans + grades, in the main repo"
+                          engine={driverEngine}
+                          model={driverModel}
+                          onEngine={setDriverEngine}
+                          onModel={setDriverModel}
+                        />
+                      )}
                     </div>
-                  )
-                }
-                return (
-                  <div className="space-y-2">
-                    {pins.length > 0 && (
-                      <div>
-                        <div className={sectionTitle + ' mb-1.5'}>Pinned</div>
-                        <div className="flex flex-wrap gap-1.5">{pins.map(chip)}</div>
+                  </div>
+                  <div>
+                    <div className={sectionTitle + ' mb-1.5'}>Workspace</div>
+                    {lockedCwd && (
+                      <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px] text-foreground/80">
+                        <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+                        <span className="font-semibold text-foreground">Current workspace</span>
+                        <span className="min-w-0 truncate font-mono text-muted-foreground">{tilde(lockedCwd)}</span>
                       </div>
                     )}
-                    {recents.length > 0 && (
-                      <div>
-                        <div className={sectionTitle + ' mb-1.5'}>Recent workspaces</div>
-                        <div className="flex flex-wrap gap-1.5">{recents.map(chip)}</div>
+                    {!lockedCwd && (
+                      <div className="flex items-center gap-2">
+                        <Button variant="secondary" size="sm" onClick={browse}>
+                          <FolderOpen size={13} strokeWidth={2} /> Folder
+                        </Button>
+                        <Input value={cwd} onChange={(e) => setCwd(e.target.value)} placeholder="~ (home)" className="flex-1 font-mono" />
                       </div>
                     )}
                   </div>
-                )
-              })()}
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0 py-3">
-                <CardTitle className="flex items-center gap-2 text-[13px]">
-                  {mode === 'loop' ? (
-                    <Repeat size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" />
-                  ) : (
-                    <FolderOpen size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" />
-                  )}
-                  {mode === 'loop' ? 'Paired loop' : 'New workspace session'}
-                </CardTitle>
-                <Badge variant={location === 'remote' ? 'info' : 'secondary'}>
-                  {location === 'remote' ? 'SSH daemon' : 'Local daemon'}
-                </Badge>
-              </CardHeader>
-              <CardContent className="space-y-3 pt-3">
-                {mode === 'loop' ? (
-                  <>
-                    <div>
-                      <div className={sectionTitle + ' mb-1.5'}>Goal</div>
-                      <Textarea
-                        value={goal}
-                        onChange={(e) => setGoal(e.target.value)}
-                        placeholder="What should this loop converge on? (the driver turns this into a gradable contract)"
-                        rows={3}
-                      />
-                    </div>
-                    <div>
-                      <div className={sectionTitle + ' mb-1.5'}>Topology</div>
-                      <div className="grid grid-cols-2 gap-2">
-                        {(
-                          [
-                            ['paired', 'Paired', 'Two live sessions grade each other'],
-                            ['single', 'Single', 'One live generator + an auto-grader per turn'],
-                          ] as const
-                        ).map(([val, label, hint]) => (
+                  {loopErr && <div className="text-[11px] text-destructive">{loopErr}</div>}
+                  <Button
+                    onClick={() => void launchLoop()}
+                    disabled={!goal.trim() || !loopRepoRoot || loopBusy}
+                    className="w-full"
+                    size="lg"
+                  >
+                    <Repeat className="size-4" />
+                    {loopBusy ? 'Starting…' : 'Start paired loop'}
+                  </Button>
+                </CardContent>
+              </Card>
+            ) : (
+              <>
+                {/* Fast path: recent / pinned workspaces — one click starts */}
+                {!lockedCwd &&
+                  (() => {
+                    const pins = pinnedWorkspaces
+                    const recents = readWorkspaceList('gt.recentWorkspaces')
+                      .filter((r) => !pins.includes(r))
+                      .slice(0, 8)
+                    if (!pins.length && !recents.length) return null
+                    const chip = (r: string) => {
+                      const isPinned = pins.includes(r)
+                      return (
+                        <div
+                          key={r}
+                          title={r}
+                          className="group inline-flex max-w-[240px] items-center gap-1 rounded-lg border border-border bg-muted/30 py-1.5 pl-2.5 pr-1 text-[12px] text-foreground/80 transition-colors hover:border-primary/60"
+                        >
                           <button
-                            key={val}
-                            onClick={() => setLoopTopology(val)}
-                            className={`rounded-lg border px-3 py-2 text-left transition ${
-                              loopTopology === val
-                                ? 'border-primary/60 bg-primary/10'
-                                : 'border-border bg-muted/30 hover:border-border'
+                            onClick={() => onChoose(withSpawn(choiceFromRecent(r)))}
+                            className="inline-flex min-w-0 items-center gap-1.5 text-left"
+                          >
+                            {isRemotePath(r) ? (
+                              <Server size={12} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
+                            ) : (
+                              <FolderOpen size={12} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+                            )}
+                            <span className="truncate">{pathLabel(r)}</span>
+                          </button>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              togglePin(r)
+                            }}
+                            title={isPinned ? 'Unpin workspace' : 'Pin workspace'}
+                            className={`shrink-0 rounded p-0.5 transition-colors ${
+                              isPinned ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground hover:text-foreground'
                             }`}
                           >
-                            <div className="text-[12px] font-medium text-foreground">{label}</div>
-                            <div className="text-[10px] text-muted-foreground">{hint}</div>
+                            <Pin size={12} strokeWidth={2} fill={isPinned ? 'currentColor' : 'none'} />
                           </button>
-                        ))}
-                      </div>
-                    </div>
-                    <div>
-                      <div className={sectionTitle + ' mb-1.5'}>
-                        {loopTopology === 'single' ? 'Generator' : 'Role agents'}
-                      </div>
-                      <div className="flex gap-3">
-                        <RoleCard
-                          label={loopTopology === 'single' ? 'Generator' : 'Worker'}
-                          hint={
-                            loopTopology === 'single'
-                              ? 'Writes code; a fresh grader reviews each turn'
-                              : 'Writes code in the worktree'
-                          }
-                          engine={workerEngine}
-                          model={workerModel}
-                          onEngine={setWorkerEngine}
-                          onModel={setWorkerModel}
-                        />
-                        {loopTopology === 'paired' && (
-                          <RoleCard
-                            label="Driver"
-                            hint="Plans + grades, in the main repo"
-                            engine={driverEngine}
-                            model={driverModel}
-                            onEngine={setDriverEngine}
-                            onModel={setDriverModel}
-                          />
+                        </div>
+                      )
+                    }
+                    return (
+                      <div className="mb-3 space-y-2">
+                        {pins.length > 0 && (
+                          <div>
+                            <div className={sectionTitle + ' mb-1.5'}>Pinned</div>
+                            <div className="flex flex-wrap gap-1.5">{pins.map(chip)}</div>
+                          </div>
+                        )}
+                        {recents.length > 0 && (
+                          <div>
+                            <div className={sectionTitle + ' mb-1.5'}>Recent workspaces</div>
+                            <div className="flex flex-wrap gap-1.5">{recents.map(chip)}</div>
+                          </div>
                         )}
                       </div>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    {/* Engine */}
-                    <div>
-                      <div className={sectionTitle + ' mb-1.5'}>Engine</div>
-                      <div className="grid grid-cols-3 gap-2">
-                        {engineOptions.map((e) => (
-                          <button key={e} onClick={() => selectEngine(e)} className={pickButton(engine === e)}>
-                            {e === 'local' ? (
-                              <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
-                            ) : (
-                              <EngineLogo engine={e} size={16} />
-                            )}
-                            <span className="min-w-0 truncate text-[12.5px] font-semibold">
-                              {sessionEngineLabel(e)}
-                            </span>
-                            {e === recentEngine && (
-                              <span className="ml-auto shrink-0 rounded-full border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[var(--gt-accent-2)]">
-                                Recent
+                    )
+                  })()}
+
+                {/* Wizard */}
+                <div className="mb-2 flex items-center gap-2">
+                  <span className="text-[11px] font-semibold text-foreground">
+                    {['Model', 'Workspace', 'Review'][wizardStep - 1]}
+                  </span>
+                  <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
+                    <div
+                      className="h-1 rounded-full bg-primary transition-all"
+                      style={{ width: `${(wizardStep / 3) * 100}%` }}
+                    />
+                  </div>
+                  <span className="text-[10.5px] tabular-nums text-muted-foreground">
+                    {wizardStep}/3
+                  </span>
+                </div>
+
+                {/* Step 1 · Model */}
+                {wizardStep === 1 && (
+                  <Card>
+                    <CardHeader className="py-3">
+                      <CardTitle className="text-[13px]">Choose your model</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-3 pt-3">
+                      <div>
+                        <div className={sectionTitle + ' mb-1.5'}>Engine</div>
+                        <div className="grid grid-cols-3 gap-2">
+                          {engineOptions.map((e) => (
+                            <button key={e} onClick={() => selectEngine(e)} className={pickButton(engine === e)}>
+                              {e === 'local' ? (
+                                <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
+                              ) : (
+                                <EngineLogo engine={e} size={16} />
+                              )}
+                              <span className="min-w-0 truncate text-[12.5px] font-semibold">
+                                {sessionEngineLabel(e)}
                               </span>
-                            )}
-                          </button>
-                        ))}
-                      </div>
-                      {engine === 'openrouter' && (
-                        <div className="mt-2.5">
-                          <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Harness</div>
-                          <div className="grid grid-cols-2 gap-2">
-                            {(['codex', 'hermes'] as const).map((h) => (
-                              <button key={h} onClick={() => setOpenrouterHarness(h)} className={pickButton(openrouterHarness === h)}>
-                                <EngineLogo engine={h} size={15} />
-                                <span className="min-w-0 truncate text-[12px] font-semibold">
-                                  {h === 'codex' ? 'Codex' : 'Hermes'}
+                              {e === recentEngine && (
+                                <span className="ml-auto shrink-0 rounded-full border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[var(--gt-accent-2)]">
+                                  Recent
                                 </span>
-                              </button>
-                            ))}
-                          </div>
+                              )}
+                            </button>
+                          ))}
                         </div>
-                      )}
-                      {isAiEngine(engine) && (
-                        <div className="mt-2.5">
-                          <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Model</div>
-                          <div className="max-h-[240px] space-y-3 overflow-y-auto pr-0.5">
-                            <ModelSelect engine={engine} model={model} onChange={setModel} />
-                            {!(engine === 'openrouter' && openrouterHarness === 'hermes') && (
-                              <EffortSelect engine={engine} effort={effort} onChange={setEffort} />
-                            )}
+                        {engine === 'openrouter' && (
+                          <div className="mt-2.5">
+                            <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Harness</div>
+                            <div className="grid grid-cols-2 gap-2">
+                              {(['codex', 'hermes'] as const).map((h) => (
+                                <button key={h} onClick={() => setOpenrouterHarness(h)} className={pickButton(openrouterHarness === h)}>
+                                  <EngineLogo engine={h} size={15} />
+                                  <span className="min-w-0 truncate text-[12px] font-semibold">
+                                    {h === 'codex' ? 'Codex' : 'Hermes'}
+                                  </span>
+                                </button>
+                              ))}
+                            </div>
                           </div>
-                        </div>
-                      )}
-                    </div>
+                        )}
+                        {isAiEngine(engine) && (
+                          <div className="mt-2.5">
+                            <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Model</div>
+                            <div className="max-h-[240px] space-y-3 overflow-y-auto pr-0.5">
+                              <ModelSelect engine={engine} model={model} onChange={setModel} />
+                              {!(engine === 'openrouter' && openrouterHarness === 'hermes') && (
+                                <EffortSelect engine={engine} effort={effort} onChange={setEffort} />
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex justify-end">
+                        <Button onClick={() => setWizardStep(2)}>
+                          Next <ArrowRight className="size-4" />
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
 
-                    {/* Daemon profile */}
-                    {!lockedCwd && (
+                {/* Step 2 · Workspace */}
+                {wizardStep === 2 && (
+                  <Card>
+                    <CardHeader className="py-3">
+                      <CardTitle className="text-[13px]">Where should it work?</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-3 pt-3">
                       <div>
-                        <div className={sectionTitle + ' mb-1.5'}>Daemon profile</div>
+                        <div className={sectionTitle + ' mb-1.5'}>Location</div>
                         <div className="grid grid-cols-2 gap-2">
                           <button onClick={() => switchLocation('local')} className={pickButton(location === 'local')}>
                             <FolderOpen size={16} strokeWidth={2} className="shrink-0 text-muted-foreground" />
@@ -902,149 +962,184 @@ export function EntryScreen({
                           </div>
                         )}
                       </div>
-                    )}
-                  </>
-                )}
 
-                {/* Workspace (shared by single + loop) */}
-                <div>
-                  <div className={sectionTitle + ' mb-1.5'}>Workspace</div>
-                  {location === 'remote' && (
-                    <div className="mb-2 space-y-2">
-                      {remoteHosts.map((h) => (
-                        <button
-                          key={h.id}
-                          onClick={() => {
-                            setRemoteHostId(h.id)
-                            const nextCwd = h.defaultCwd || h.daemon.projectsDir || ''
-                            setCwd(nextCwd)
-                            setProjParent(nextCwd)
-                          }}
-                          className={`inline-flex max-w-[260px] items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] ${
-                            remoteHostId === h.id
-                              ? 'border-primary/60 bg-primary/20 text-foreground'
-                              : 'border-border text-foreground/60 hover:border-primary/50 hover:text-foreground'
-                          }`}
-                        >
-                          <Server size={11} strokeWidth={2} className="shrink-0" />
-                          <span className="truncate">{h.label || h.sshTarget}</span>
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                  {location === 'remote' && (
-                    <div className="rounded-lg border border-border bg-muted/20">
-                      <div className="flex items-center gap-1.5 border-b border-border p-2">
-                        <Input
-                          value={cwd}
-                          onChange={(e) => setCwd(e.target.value)}
-                          onKeyDown={(e) => e.key === 'Enter' && loadRemoteDir(cwd, { select: true })}
-                          placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
-                          className="border-0 bg-transparent font-mono shadow-none focus-visible:ring-0"
-                        />
-                        <button onClick={() => loadRemoteDir('~', { select: true })} title="Remote home" className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground">
-                          <Home size={13} strokeWidth={2} />
-                        </button>
-                        <button
-                          onClick={() => remoteListing?.parent && loadRemoteDir(remoteListing.parent, { select: true })}
-                          disabled={!remoteListing?.parent}
-                          title="Parent folder"
-                          className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground disabled:opacity-35"
-                        >
-                          <ArrowUp size={13} strokeWidth={2} />
-                        </button>
-                        <button
-                          onClick={() => loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })}
-                          title="Refresh"
-                          className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
-                        >
-                          <RefreshCw size={13} strokeWidth={2} className={remoteListingLoading ? 'animate-spin' : ''} />
-                        </button>
-                        <button
-                          onClick={() => {
-                            const selected = remoteListing?.cwd || cwd
-                            setCwd(selected)
-                            setProjParent(selected)
-                          }}
-                          className="inline-flex items-center gap-1 rounded-md border border-primary/50 bg-primary/10 px-2 py-1.5 text-[11px] text-foreground"
-                        >
-                          <Check size={12} strokeWidth={2.5} /> Use
-                        </button>
+                      <div>
+                        <div className={sectionTitle + ' mb-1.5'}>Workspace</div>
+                        {location === 'remote' && (
+                          <div className="mb-2 space-y-2">
+                            {remoteHosts.map((h) => (
+                              <button
+                                key={h.id}
+                                onClick={() => {
+                                  setRemoteHostId(h.id)
+                                  const nextCwd = h.defaultCwd || h.daemon.projectsDir || ''
+                                  setCwd(nextCwd)
+                                  setProjParent(nextCwd)
+                                }}
+                                className={`inline-flex max-w-[260px] items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] ${
+                                  remoteHostId === h.id
+                                    ? 'border-primary/60 bg-primary/20 text-foreground'
+                                    : 'border-border text-foreground/60 hover:border-primary/50 hover:text-foreground'
+                                }`}
+                              >
+                                <Server size={11} strokeWidth={2} className="shrink-0" />
+                                <span className="truncate">{h.label || h.sshTarget}</span>
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                        {location === 'remote' && (
+                          <div className="rounded-lg border border-border bg-muted/20">
+                            <div className="flex items-center gap-1.5 border-b border-border p-2">
+                              <Input
+                                value={cwd}
+                                onChange={(e) => setCwd(e.target.value)}
+                                onKeyDown={(e) => e.key === 'Enter' && loadRemoteDir(cwd, { select: true })}
+                                placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
+                                className="border-0 bg-transparent font-mono shadow-none focus-visible:ring-0"
+                              />
+                              <button onClick={() => loadRemoteDir('~', { select: true })} title="Remote home" className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground">
+                                <Home size={13} strokeWidth={2} />
+                              </button>
+                              <button
+                                onClick={() => remoteListing?.parent && loadRemoteDir(remoteListing.parent, { select: true })}
+                                disabled={!remoteListing?.parent}
+                                title="Parent folder"
+                                className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground disabled:opacity-35"
+                              >
+                                <ArrowUp size={13} strokeWidth={2} />
+                              </button>
+                              <button
+                                onClick={() => loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })}
+                                title="Refresh"
+                                className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                              >
+                                <RefreshCw size={13} strokeWidth={2} className={remoteListingLoading ? 'animate-spin' : ''} />
+                              </button>
+                              <button
+                                onClick={() => {
+                                  const selected = remoteListing?.cwd || cwd
+                                  setCwd(selected)
+                                  setProjParent(selected)
+                                }}
+                                className="inline-flex items-center gap-1 rounded-md border border-primary/50 bg-primary/10 px-2 py-1.5 text-[11px] text-foreground"
+                              >
+                                <Check size={12} strokeWidth={2.5} /> Use
+                              </button>
+                            </div>
+                            <div className="max-h-44 overflow-y-auto p-1.5">
+                              {remoteListingLoading && !remoteListing ? (
+                                <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-muted-foreground">
+                                  <RefreshCw size={12} strokeWidth={2} className="animate-spin" /> Loading folders…
+                                </div>
+                              ) : remoteListingErr ? (
+                                <div className="px-2 py-3 text-[11px] text-destructive">{remoteListingErr}</div>
+                              ) : remoteListing && remoteListing.entries.length === 0 ? (
+                                <div className="px-2 py-3 text-[11px] text-muted-foreground">No child folders.</div>
+                              ) : (
+                                remoteListing?.entries.map((d) => (
+                                  <button
+                                    key={d.path}
+                                    onClick={() => loadRemoteDir(d.path, { select: true })}
+                                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-foreground/80 hover:bg-muted"
+                                  >
+                                    <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+                                    <span className="truncate">{d.name}</span>
+                                  </button>
+                                ))
+                              )}
+                            </div>
+                          </div>
+                        )}
+                        {lockedCwd && location === 'local' && (
+                          <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px] text-foreground/80">
+                            <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+                            <span className="font-semibold text-foreground">Current workspace</span>
+                            <span className="min-w-0 truncate font-mono text-muted-foreground">{tilde(lockedCwd)}</span>
+                          </div>
+                        )}
+                        {!lockedCwd && location === 'local' && (
+                          <div className="flex items-center gap-2">
+                            <Button variant="secondary" size="sm" onClick={browse}>
+                              <FolderOpen size={13} strokeWidth={2} /> Folder
+                            </Button>
+                            <Input value={cwd} onChange={(e) => setCwd(e.target.value)} placeholder="~ (home)" className="flex-1 font-mono" />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        <Button variant="ghost" onClick={() => setWizardStep(1)}>
+                          <ArrowLeft className="size-4" /> Back
+                        </Button>
+                        <Button onClick={() => setWizardStep(3)}>
+                          Next <ArrowRight className="size-4" />
+                        </Button>
                       </div>
-                      <div className="max-h-44 overflow-y-auto p-1.5">
-                        {remoteListingLoading && !remoteListing ? (
-                          <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-muted-foreground">
-                            <RefreshCw size={12} strokeWidth={2} className="animate-spin" /> Loading folders…
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Step 3 · Review */}
+                {wizardStep === 3 && (
+                  <Card>
+                    <CardHeader className="py-3">
+                      <CardTitle className="text-[13px]">Ready to launch</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-3 pt-3">
+                      <div className="space-y-1.5 rounded-lg border border-border bg-muted/30 p-3 text-[12px]">
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Engine</span>
+                          <span className="font-medium text-foreground">{sessionEngineLabel(engine)}</span>
+                        </div>
+                        {isAiEngine(engine) && (
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Model</span>
+                            <span className="font-medium text-foreground">{model ?? 'Default'}</span>
                           </div>
-                        ) : remoteListingErr ? (
-                          <div className="px-2 py-3 text-[11px] text-destructive">{remoteListingErr}</div>
-                        ) : remoteListing && remoteListing.entries.length === 0 ? (
-                          <div className="px-2 py-3 text-[11px] text-muted-foreground">No child folders.</div>
-                        ) : (
-                          remoteListing?.entries.map((d) => (
-                            <button
-                              key={d.path}
-                              onClick={() => loadRemoteDir(d.path, { select: true })}
-                              className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-foreground/80 hover:bg-muted"
-                            >
-                              <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                              <span className="truncate">{d.name}</span>
-                            </button>
-                          ))
                         )}
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Location</span>
+                          <span className="font-medium text-foreground">
+                            {location === 'remote' ? 'Remote SSH' : 'Local'}
+                          </span>
+                        </div>
+                        <div className="flex justify-between gap-3">
+                          <span className="shrink-0 text-muted-foreground">Workspace</span>
+                          <span className="truncate font-mono text-foreground">
+                            {location === 'remote'
+                              ? remoteDisplayPath(remoteCwd)
+                              : cwd.trim()
+                                ? tilde(cwd.trim())
+                                : '~'}
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                  )}
-                  {lockedCwd && location === 'local' && (
-                    <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px] text-foreground/80">
-                      <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                      <span className="font-semibold text-foreground">Current workspace</span>
-                      <span className="min-w-0 truncate font-mono text-muted-foreground">{tilde(lockedCwd)}</span>
-                    </div>
-                  )}
-                  {!lockedCwd && location === 'local' && (
-                    <div className="flex items-center gap-2">
-                      <Button variant="secondary" size="sm" onClick={browse}>
-                        <FolderOpen size={13} strokeWidth={2} /> Folder
-                      </Button>
-                      <Input value={cwd} onChange={(e) => setCwd(e.target.value)} placeholder="~ (home)" className="flex-1 font-mono" />
-                    </div>
-                  )}
-                </div>
 
-                {/* Footer */}
-                {mode === 'single' ? (
-                  <>
-                    <SpawnOptions
-                      value={spawn}
-                      onChange={changeSpawn}
-                      savedPrompts={savedPrompts}
-                      onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
-                      onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
-                    />
-                    <div className="flex items-center gap-2 border-t border-border pt-3">
-                      <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Session name (optional)" className="flex-1" />
-                      <Button onClick={() => onChoose(withSpawn(buildChoice()))} disabled={location === 'remote' && !remoteHost}>
-                        <Plus className="size-4" /> New session
-                      </Button>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    {loopErr && <div className="text-[11px] text-destructive">{loopErr}</div>}
-                    <Button
-                      onClick={() => void launchLoop()}
-                      disabled={!goal.trim() || !loopRepoRoot || loopBusy}
-                      className="w-full"
-                      size="lg"
-                    >
-                      <Repeat className="size-4" />
-                      {loopBusy ? 'Starting…' : 'Start paired loop'}
-                    </Button>
-                  </>
+                      <SpawnOptions
+                        value={spawn}
+                        onChange={changeSpawn}
+                        savedPrompts={savedPrompts}
+                        onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
+                        onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
+                      />
+
+                      <div className="flex items-center justify-between gap-2 border-t border-border pt-3">
+                        <Button variant="ghost" onClick={() => setWizardStep(2)}>
+                          <ArrowLeft className="size-4" /> Back
+                        </Button>
+                        <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
+                          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Session name (optional)" className="max-w-[220px]" />
+                          <Button onClick={() => onChoose(withSpawn(buildChoice()))} disabled={location === 'remote' && !remoteHost}>
+                            <Plus className="size-4" /> New session
+                          </Button>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
                 )}
-              </CardContent>
-            </Card>
+              </>
+            )}
           </TabsContent>
 
           {/* ── Resume (self-contained) ───────────────────────────────── */}

From b2422cd770ec1982e05d2852da10d2d05818dcb5 Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Sun, 16 Aug 2026 20:31:07 -0700
Subject: [PATCH 06/11] feat(ux): one linear wizard for the entry screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the four-tab entry screen with a single step form. The intent
(new session / resume / paired loop / scratch / new repo) is now the
first field — a select — and the remaining steps are derived from it, so
every path answers one question per step instead of showing a whole tab
of controls at once.

- Pinned/recent workspace chips SELECT a repo instead of launching a
  session on click. Picking a repo then customizing the model is now
  possible; a remote chip also switches the form to that SSH host.
- Location, host, engine and loop topology are selects rather than
  button grids.
- Only the last step launches, and it summarizes what is about to run.
- Drop `scratchEngine` (scratch now uses the wizard's engine/model) and
  `choiceFromRecent` (superseded by selectWorkspace + buildChoice).

The loops-experiment test pinned the old mode toggle's source text; it
now pins the same property on the intent select — the loop option is
offered only when the flag is on, and an already-picked loop intent
falls back when the flag goes off.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WXyD9HvjP57L5BY9u2iqf8
---
 src/main/loops-experiment.test.ts           |   10 +-
 src/renderer/src/components/EntryScreen.tsx | 1492 +++++++++++--------
 2 files changed, 837 insertions(+), 665 deletions(-)

diff --git a/src/main/loops-experiment.test.ts b/src/main/loops-experiment.test.ts
index f3216e18..129e997b 100644
--- a/src/main/loops-experiment.test.ts
+++ b/src/main/loops-experiment.test.ts
@@ -54,10 +54,12 @@ describe('the gate is wired where it matters', () => {
   test('the EntryScreen loop affordance is behind useExperiment', () => {
     const src = read('src/renderer/src/components/EntryScreen.tsx')
     expect(src).toContain("useExperiment('loops')")
-    // The mode toggle must not offer 'loop' when the flag is off: the whole
-    // single/loop toggle renders only behind `loopsOn &&`.
-    expect(src).toContain("loopsOn && !lockedCwd && (")
-    expect(src).toContain("['single', 'loop'] as const")
+    // The intent select must not offer 'loop' when the flag is off: the option
+    // list filters on loopsOn…
+    expect(src).toContain("i.id !== 'loop' || loopsOn")
+    // …and flipping the flag off mid-session must not strand the screen in a
+    // loop form whose launch button main would refuse.
+    expect(src).toMatch(/if \(!loopsOn\) setIntent\(/)
   })
 
   test('the renderer consumes stop and state — every startable loop is stoppable', () => {
diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index 912770b1..6246bc82 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -42,7 +42,13 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
 
 export type Choice = {
@@ -194,6 +200,44 @@ const readLastEngine = (): SessionEngine | null => {
   }
 }
 
+/** What the user is launching. Picked in step 1 as a select — one wizard, not
+ *  four parallel tabs, so every path answers one question per step. */
+type Intent = 'new' | 'resume' | 'loop' | 'scratch' | 'repo'
+const INTENTS: { id: Intent; label: string; hint: string; icon: typeof SquareTerminal }[] = [
+  {
+    id: 'new',
+    label: 'New session',
+    hint: 'Pick a workspace and start an agent in it.',
+    icon: SquareTerminal,
+  },
+  { id: 'resume', label: 'Resume a session', hint: 'Pick up a prior session.', icon: RefreshCw },
+  {
+    id: 'loop',
+    label: 'Paired loop',
+    hint: 'Two agents grade each other until the goal is met.',
+    icon: Repeat,
+  },
+  { id: 'scratch', label: 'Scratch session', hint: 'Throwaway — no repo attached.', icon: Zap },
+  {
+    id: 'repo',
+    label: 'New repo',
+    hint: 'Scaffold a project from your template, then open it.',
+    icon: FolderPlus,
+  },
+]
+
+type StepId = 'start' | 'workspace' | 'model' | 'project' | 'goal' | 'roles' | 'sessions' | 'review'
+const STEP_TITLE: Record<StepId, string> = {
+  start: 'Start',
+  workspace: 'Workspace',
+  model: 'Model',
+  project: 'Project',
+  goal: 'Goal',
+  roles: 'Agents',
+  sessions: 'Session',
+  review: 'Review',
+}
+
 export function EntryScreen({
   onChoose,
   onCancel,
@@ -218,20 +262,17 @@ export function EntryScreen({
   // Loops are experimental: with the flag off there is no loop mode at all, and
   // `loops:create` refuses in main regardless of what this screen renders.
   const loopsOn = useExperiment('loops')
-  // Top-level intent: which of the launch actions the user is composing.
-  // 'new' (a session in a workspace), 'resume' (a prior session), 'scratch'
-  // (a throwaway), 'repo' (scaffold a new project). 'loop' is a mode of 'new'.
-  type Intent = 'new' | 'resume' | 'scratch' | 'repo'
-  const [intent, setIntent] = useState<Intent>('new')
-  // 'single' → one session (default). 'loop' → two linked role agents.
-  const [mode, setMode] = useState<'single' | 'loop'>(initialMode)
-  // New-session wizard: Model → Workspace → Review.
-  const [wizardStep, setWizardStep] = useState<1 | 2 | 3>(1)
-  useEffect(() => setMode(initialMode), [initialMode])
+  // Top-level intent: which of the launch actions the user is composing. It is
+  // the first field of the wizard (a select), not a tab bar — every intent runs
+  // through the same one-question-per-step form.
+  const [intent, setIntent] = useState<Intent>(initialMode === 'loop' ? 'loop' : 'new')
+  // Index into `steps` (derived from the intent below).
+  const [stepIndex, setStepIndex] = useState(0)
+  useEffect(() => setIntent(initialMode === 'loop' ? 'loop' : 'new'), [initialMode])
   // Flipping the flag off while the screen sits in loop mode must not leave a
   // loop form on screen with a launch button main would reject.
   useEffect(() => {
-    if (!loopsOn) setMode('single')
+    if (!loopsOn) setIntent((i) => (i === 'loop' ? 'new' : i))
   }, [loopsOn])
   // Live-paired loop fields (mode === 'loop').
   const [goal, setGoal] = useState('')
@@ -256,7 +297,6 @@ export function EntryScreen({
   // user clicks around; clicks persist for the NEXT open via selectEngine.
   const [recentEngine] = useState<SessionEngine | null>(readLastEngine)
   const [engine, setEngine] = useState<SessionEngine>(recentEngine ?? 'local')
-  const [scratchEngine, setScratchEngine] = useState<SessionEngine>('claude')
   // Resume is self-contained: its own engine, independent of the New-session picker.
   const [resumeEngine, setResumeEngine] = useState<Engine>(
     recentEngine && isAiEngine(recentEngine) && recentEngine !== 'openrouter'
@@ -283,6 +323,8 @@ export function EntryScreen({
   const [pinnedWorkspaces, setPinnedWorkspaces] = useState<string[]>(() =>
     readWorkspaceList('gt.pinnedWorkspaces'),
   )
+  // Read once: the list must not reshuffle under the user mid-wizard.
+  const [recentWorkspaces] = useState<string[]>(() => readWorkspaceList('gt.recentWorkspaces'))
   // Spawn options apply to every NEW session this screen can start — workspace,
   // scratch, a freshly scaffolded repo, and the recent-workspace chips.
   // Deliberately NOT persisted: every visit (and every spawn within a visit)
@@ -416,11 +458,15 @@ export function EntryScreen({
     setVisibleSessionCount(SESSION_PAGE_SIZE)
     if (next !== 'openrouter') loadEngineSessions(next)
   }
-  const switchMode = (next: 'single' | 'loop') => {
-    setMode(next)
+  const selectIntent = (next: Intent) => {
+    setIntent(next)
     setLoopErr('')
+    setScaffoldErr('')
     // Loops run in a local git worktree — remote daemons aren't supported.
     if (next === 'loop' && location === 'remote') switchLocation('local')
+    if (next === 'resume' && isAiEngine(resumeEngine) && resumeEngine !== 'openrouter') {
+      void loadEngineSessions(resumeEngine)
+    }
   }
   const switchLocation = (next: 'local' | 'remote') => {
     setLocation(next)
@@ -447,11 +493,21 @@ export function EntryScreen({
     setVisibleSessionCount(SESSION_PAGE_SIZE)
   }, [resumeEngine, sessionSearch])
 
-  // One-click throwaway session: spin up an engine in the app-owned scratch dir
+  // Throwaway session: spin up the picked engine in the app-owned scratch dir
   // (no repo, no folder-picking). For a quick chat you don't want to file away.
-  const startScratch = async (e: SessionEngine) => {
+  const startScratch = async () => {
     const dir = await window.gt.scratchDir()
-    onChoose(withSpawn({ mode: 'new', engine: e, cwd: dir, name: 'scratch' }))
+    onChoose(
+      withSpawn({
+        mode: 'new',
+        engine,
+        model: isAiEngine(engine) ? model : undefined,
+        effort: isAiEngine(engine) ? effort : undefined,
+        cwd: dir,
+        name: 'scratch',
+        openrouterHarness: engine === 'openrouter' ? openrouterHarness : undefined,
+      }),
+    )
   }
   const loopRepoRoot = (lockedCwd || cwd).trim()
   const launchLoop = async () => {
@@ -472,13 +528,33 @@ export function EntryScreen({
       setLoopBusy(false)
     }
   }
-  // selecting a folder targets the new session there AND filters resume to it
-  const selectDir = (path: string) => {
-    setCwd(path)
+  /** Point the form at a workspace. Pinned/recent chips SELECT — they never
+   *  launch — so the user can pick a repo and then keep customizing the model.
+   *  A remote (`ssh://host/path`) chip also flips the form to that host. */
+  const selectWorkspace = (path: string) => {
+    if (!isRemotePath(path)) {
+      setLocation('local')
+      setCwd(path)
+      setProjParent('')
+      return
+    }
+    const rest = path.replace(/^ssh:\/\//, '')
+    const slash = rest.indexOf('/')
+    const target = slash >= 0 ? rest.slice(0, slash) : rest
+    const remotePath = slash >= 0 ? '/' + rest.slice(slash + 1).replace(/^\/+/, '') : '~'
+    const host = remoteHosts.find(
+      (h) => h.label === target || h.sshTarget === target || h.id === target,
+    )
+    if (!host) return setCwd(path)
+    setLocation('remote')
+    setRemoteHostId(host.id)
+    setCwd(remotePath)
+    setProjParent(remotePath)
+    if (engine === 'local') setEngine(host.daemon.defaultEngine || 'claude')
   }
   const browse = async () => {
     const dir = await window.gt.pickDir()
-    if (dir) selectDir(dir)
+    if (dir) selectWorkspace(dir)
   }
 
   // openrouter is one-shot with no resumable local store — hide its resume list.
@@ -505,6 +581,12 @@ export function EntryScreen({
       }
     : remoteHosts.find((h) => h.id === remoteHostId) || null
   const remoteCwd = cwd.trim() || remoteHost?.defaultCwd || remoteHost?.daemon?.projectsDir || ''
+  /** The path currently targeted, in the same spelling the chips use — so a
+   *  chip can render as selected. */
+  const selectedWorkspacePath =
+    location === 'remote' && remoteHost
+      ? `ssh://${remoteHost.label || remoteHost.sshTarget}${remoteCwd.startsWith('/') ? '' : '/'}${remoteCwd}`
+      : cwd.trim()
 
   const loadRemoteDir = async (path?: string, opts?: { select?: boolean }) => {
     if (!remoteHost) return
@@ -558,31 +640,6 @@ export function EntryScreen({
       },
     }
   }
-  const choiceFromRecent = (path: string): Choice => {
-    if (!isRemotePath(path)) return { mode: 'new', engine, cwd: path }
-    const rest = path.replace(/^ssh:\/\//, '')
-    const slash = rest.indexOf('/')
-    const target = slash >= 0 ? rest.slice(0, slash) : rest
-    const remotePath = slash >= 0 ? '/' + rest.slice(slash + 1).replace(/^\/+/, '') : '~'
-    const host = remoteHosts.find(
-      (h) => h.label === target || h.sshTarget === target || h.id === target,
-    )
-    if (!host) return { mode: 'new', engine, cwd: path }
-    const resolvedEngine = engine === 'local' ? host.daemon.defaultEngine || 'claude' : engine
-    return {
-      mode: 'new',
-      engine: resolvedEngine,
-      cwd: remotePath,
-      remote: {
-        hostId: host.id,
-        label: host.label || host.sshTarget,
-        sshTarget: host.sshTarget,
-        cwd: remotePath,
-        platform: host.platform,
-        daemon: host.daemon,
-      },
-    }
-  }
   const resumeCountLabel = sessions ? ` · ${shown.length}` : ''
   const projectParentLabel =
     location === 'remote'
@@ -603,8 +660,37 @@ export function EntryScreen({
         ? tilde(cwd.trim())
         : '~'
 
-  const sel =
-    'rounded-lg border border-[var(--gt-border)] bg-black/30 px-3 py-2 text-[12px] text-zinc-200 outline-none focus:border-[var(--gt-accent)]/60'
+  // ── Wizard ───────────────────────────────────────────────────────────────
+  // One question per step. The step list is derived from the intent, so an
+  // intent that needs no workspace (scratch) or no model (resume) never shows
+  // that step at all.
+  const intentOptions = INTENTS.filter(
+    (i) =>
+      (i.id !== 'loop' || loopsOn) &&
+      (!lockedCwd || i.id === 'new' || i.id === 'resume' || i.id === 'loop'),
+  )
+  const steps: StepId[] = useMemo(() => {
+    if (intent === 'resume') return ['start', 'sessions']
+    if (intent === 'scratch') return ['start', 'model', 'review']
+    if (intent === 'repo') return ['start', 'project', 'model', 'review']
+    if (intent === 'loop')
+      return lockedCwd ? ['start', 'goal', 'roles'] : ['start', 'workspace', 'goal', 'roles']
+    return lockedCwd ? ['start', 'model', 'review'] : ['start', 'workspace', 'model', 'review']
+  }, [intent, lockedCwd])
+  const step = steps[Math.min(stepIndex, steps.length - 1)]
+  const stepNumber = steps.indexOf(step) + 1
+  const back = () => setStepIndex((i) => Math.max(0, i - 1))
+  const next = () => setStepIndex((i) => Math.min(steps.length - 1, i + 1))
+  // Changing the intent re-derives the steps; never strand the user past the end.
+  useEffect(() => {
+    setStepIndex((i) => Math.min(i, steps.length - 1))
+  }, [steps.length])
+  // Steps that can't be left until their one question is answered.
+  const nextBlocked =
+    (step === 'project' && !projName.trim()) ||
+    (step === 'goal' && !goal.trim()) ||
+    (step === 'workspace' && intent === 'loop' && !loopRepoRoot)
+
   const sectionTitle = 'text-[10px] font-bold uppercase tracking-[0.16em] text-zinc-500'
   const pickButton = (active: boolean, disabled = false) =>
     `group flex min-h-[44px] items-center gap-3 rounded-xl border px-3 text-left transition-colors ${
@@ -615,11 +701,88 @@ export function EntryScreen({
           : 'border-[var(--gt-border)] bg-black/20 text-zinc-400 hover:border-[var(--gt-accent)]/50 hover:text-zinc-200'
     }`
 
+  const STEP_COPY: Record<StepId, { title: string; hint: string }> = {
+    start: { title: 'What do you want to do?', hint: 'Everything else follows from this.' },
+    workspace: {
+      title: 'Which workspace?',
+      hint: 'Pick a repo — nothing launches until the last step.',
+    },
+    model: { title: 'Which model?', hint: 'Engine first, then the model it runs.' },
+    project: { title: 'Name the new project', hint: 'Cloned from your template repo.' },
+    goal: {
+      title: 'What should the loop converge on?',
+      hint: 'The driver turns this into a gradable contract.',
+    },
+    roles: { title: 'Who runs the loop?', hint: 'Each role gets its own engine and model.' },
+    sessions: {
+      title: 'Pick a session to resume',
+      hint: 'Sessions are listed per engine, newest first.',
+    },
+    review: { title: 'Ready to launch', hint: 'Last look before anything starts.' },
+  }
+  const { title: stepTitle, hint: stepHint } = STEP_COPY[step]
+  const samePath = (a: string, b: string) => a.replace(/\/+$/, '') === b.replace(/\/+$/, '')
+
+  // Pinned + recent workspaces, as SELECTABLE chips (they set the target repo;
+  // the wizard's last step is the only thing that launches).
+  const pins = pinnedWorkspaces
+  const recents = recentWorkspaces.filter((r) => !pins.includes(r)).slice(0, 8)
+  const workspaceChip = (r: string) => {
+    const isPinned = pins.includes(r)
+    const isSelected = !!selectedWorkspacePath && samePath(selectedWorkspacePath, r)
+    return (
+      <div
+        key={r}
+        title={r}
+        className={`group inline-flex max-w-[240px] items-center gap-1 rounded-lg border py-1.5 pl-2.5 pr-1 text-[12px] transition-colors ${
+          isSelected
+            ? 'border-primary/70 bg-primary/15 text-foreground'
+            : 'border-border bg-muted/30 text-foreground/80 hover:border-primary/60'
+        }`}
+      >
+        <button
+          onClick={() => selectWorkspace(r)}
+          className="inline-flex min-w-0 items-center gap-1.5 text-left"
+        >
+          {isSelected ? (
+            <Check size={12} strokeWidth={2.5} className="shrink-0 text-[var(--gt-accent-2)]" />
+          ) : isRemotePath(r) ? (
+            <Server size={12} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
+          ) : (
+            <FolderOpen size={12} strokeWidth={2} className="shrink-0 text-muted-foreground" />
+          )}
+          <span className="truncate">{pathLabel(r)}</span>
+        </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            togglePin(r)
+          }}
+          title={isPinned ? 'Unpin workspace' : 'Pin workspace'}
+          className={`shrink-0 rounded p-0.5 transition-colors ${
+            isPinned ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          <Pin size={12} strokeWidth={2} fill={isPinned ? 'currentColor' : 'none'} />
+        </button>
+      </div>
+    )
+  }
+
+  const summaryRow = (label: string, value: string, mono = false) => (
+    <div className="flex justify-between gap-3">
+      <span className="shrink-0 text-muted-foreground">{label}</span>
+      <span className={`truncate text-foreground ${mono ? 'font-mono' : 'font-medium'}`}>
+        {value}
+      </span>
+    </div>
+  )
+
   return (
     <div className="h-full w-full overflow-y-auto bg-background">
-      <div className="mx-auto w-full max-w-[820px] px-6 py-5">
+      <div className="mx-auto w-full max-w-[720px] px-6 py-6">
         {/* Header */}
-        <header className="mb-4 flex items-center gap-3">
+        <header className="mb-5 flex items-center gap-3">
           <img src={logo} alt="" draggable={false} className="h-9 w-9 rounded-lg" />
           <div className="min-w-0 flex-1">
             <h1 className="gt-grad-text text-[20px] font-bold leading-tight tracking-tight">
@@ -643,622 +806,619 @@ export function EntryScreen({
           )}
         </header>
 
-        {/* Intent switcher */}
-        <Tabs value={intent} onValueChange={(v) => setIntent(v as Intent)}>
-          <TabsList className="mb-3 h-9 w-full justify-start rounded-xl px-1">
-            <TabsTrigger value="new" className="gap-1.5">
-              <SquareTerminal className="size-3.5" /> New session
-            </TabsTrigger>
-            <TabsTrigger value="resume" className="gap-1.5">
-              <RefreshCw className="size-3.5" /> Resume
-            </TabsTrigger>
-            {!lockedCwd && (
-              <TabsTrigger value="scratch" className="gap-1.5">
-                <Zap className="size-3.5" /> Scratch
-              </TabsTrigger>
-            )}
-            {!lockedCwd && (
-              <TabsTrigger value="repo" className="gap-1.5">
-                <FolderPlus className="size-3.5" /> New repo
-              </TabsTrigger>
-            )}
-          </TabsList>
+        {/* Step rail — completed steps are clickable, later ones are not */}
+        <div className="mb-3 flex flex-wrap items-center gap-1.5">
+          {steps.map((s, i) => {
+            const done = i < stepNumber - 1
+            const active = i === stepNumber - 1
+            return (
+              <button
+                key={s}
+                onClick={() => done && setStepIndex(i)}
+                disabled={!done}
+                className={`flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors ${
+                  active
+                    ? 'border-primary/60 bg-primary/15 text-foreground'
+                    : done
+                      ? 'border-border text-muted-foreground hover:border-primary/50 hover:text-foreground'
+                      : 'border-transparent text-muted-foreground/40'
+                }`}
+              >
+                {done ? (
+                  <Check size={11} strokeWidth={2.5} />
+                ) : (
+                  <span className="tabular-nums opacity-60">{i + 1}</span>
+                )}
+                {STEP_TITLE[s]}
+              </button>
+            )
+          })}
+          <span className="ml-auto text-[10.5px] tabular-nums text-muted-foreground">
+            {stepNumber}/{steps.length}
+          </span>
+        </div>
+        <div className="mb-3 h-1 overflow-hidden rounded-full bg-muted">
+          <div
+            className="h-1 rounded-full bg-primary transition-all"
+            style={{ width: `${(stepNumber / steps.length) * 100}%` }}
+          />
+        </div>
 
-          {/* ── New session / Paired loop ─────────────────────────────── */}
-          <TabsContent value="new" className="pt-3">
-            {loopsOn && !lockedCwd && (
-              <div className="mb-3 inline-flex items-center gap-1 rounded-xl border border-border bg-muted/40 p-1">
-                {(['single', 'loop'] as const).map((m) => (
-                  <button
-                    key={m}
-                    onClick={() => switchMode(m)}
-                    className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-semibold transition-colors ${
-                      mode === m
-                        ? 'bg-primary/20 text-foreground'
-                        : 'text-muted-foreground hover:text-foreground'
-                    }`}
-                  >
-                    {m === 'single' ? (
-                      <SquareTerminal className="size-3.5" />
-                    ) : (
-                      <Repeat className="size-3.5" />
-                    )}
-                    {m === 'single' ? 'Single session' : 'Paired loop'}
-                  </button>
-                ))}
+        <Card>
+          <CardHeader className="py-3">
+            <CardTitle className="text-[13px]">{stepTitle}</CardTitle>
+            <p className="text-[11px] text-muted-foreground">{stepHint}</p>
+          </CardHeader>
+          <CardContent className="space-y-3 pt-3">
+            {/* ── Step · Start ─────────────────────────────────────────── */}
+            {step === 'start' && (
+              <div>
+                <div className={sectionTitle + ' mb-1.5'}>Action</div>
+                <Select value={intent} onValueChange={(v) => selectIntent(v as Intent)}>
+                  <SelectTrigger className="h-9 text-[13px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {intentOptions.map(({ id, label, icon: Icon }) => (
+                      <SelectItem key={id} value={id}>
+                        <span className="flex items-center gap-2">
+                          <Icon className="size-3.5" /> {label}
+                        </span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="mt-2 text-[11.5px] text-muted-foreground">
+                  {INTENTS.find((i) => i.id === intent)?.hint}
+                </p>
               </div>
             )}
 
-            {mode === 'loop' ? (
-              /* Paired loop — its own card (goal → topology → roles → workspace) */
-              <Card>
-                <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0 py-3">
-                  <CardTitle className="flex items-center gap-2 text-[13px]">
-                    <Repeat size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> Paired loop
-                  </CardTitle>
-                  <Badge variant="secondary">Local</Badge>
-                </CardHeader>
-                <CardContent className="space-y-3 pt-3">
+            {/* ── Step · Workspace ─────────────────────────────────────── */}
+            {step === 'workspace' && (
+              <>
+                {intent !== 'loop' && (
                   <div>
-                    <div className={sectionTitle + ' mb-1.5'}>Goal</div>
-                    <Textarea
-                      value={goal}
-                      onChange={(e) => setGoal(e.target.value)}
-                      placeholder="What should this loop converge on? (the driver turns this into a gradable contract)"
-                      rows={3}
-                    />
+                    <div className={sectionTitle + ' mb-1.5'}>Location</div>
+                    <Select
+                      value={location}
+                      onValueChange={(v) => switchLocation(v as 'local' | 'remote')}
+                    >
+                      <SelectTrigger className="h-9 text-[13px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="local">
+                          <span className="flex items-center gap-2">
+                            <FolderOpen className="size-3.5" /> Local
+                          </span>
+                        </SelectItem>
+                        <SelectItem value="remote" disabled={remoteHosts.length === 0}>
+                          <span className="flex items-center gap-2">
+                            <Server className="size-3.5" /> Remote SSH
+                          </span>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    {remoteHosts.length === 0 && (
+                      <div className="mt-1.5 text-[10.5px] text-muted-foreground">
+                        SSH profiles are configured in Settings → SSH Hosts.
+                      </div>
+                    )}
                   </div>
+                )}
+
+                {location === 'remote' && remoteHosts.length > 0 && (
                   <div>
-                    <div className={sectionTitle + ' mb-1.5'}>Topology</div>
-                    <div className="grid grid-cols-2 gap-2">
-                      {(
-                        [
-                          ['paired', 'Paired', 'Two live sessions grade each other'],
-                          ['single', 'Single', 'One live generator + an auto-grader per turn'],
-                        ] as const
-                      ).map(([val, label, hint]) => (
-                        <button
-                          key={val}
-                          onClick={() => setLoopTopology(val)}
-                          className={`rounded-lg border px-3 py-2 text-left transition ${
-                            loopTopology === val
-                              ? 'border-primary/60 bg-primary/10'
-                              : 'border-border bg-muted/30 hover:border-border'
-                          }`}
-                        >
-                          <div className="text-[12px] font-medium text-foreground">{label}</div>
-                          <div className="text-[10px] text-muted-foreground">{hint}</div>
-                        </button>
-                      ))}
-                    </div>
+                    <div className={sectionTitle + ' mb-1.5'}>Host</div>
+                    <Select
+                      value={remoteHostId}
+                      onValueChange={(id) => {
+                        setRemoteHostId(id)
+                        const h = remoteHosts.find((x) => x.id === id)
+                        const nextCwd = h?.defaultCwd || h?.daemon.projectsDir || ''
+                        setCwd(nextCwd)
+                        setProjParent(nextCwd)
+                      }}
+                    >
+                      <SelectTrigger className="h-9 text-[13px]">
+                        <SelectValue placeholder="Pick a host" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {remoteHosts.map((h) => (
+                          <SelectItem key={h.id} value={h.id}>
+                            <span className="flex items-center gap-2">
+                              <Server className="size-3.5" /> {h.label || h.sshTarget}
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
-                  <div>
-                    <div className={sectionTitle + ' mb-1.5'}>
-                      {loopTopology === 'single' ? 'Generator' : 'Role agents'}
-                    </div>
-                    <div className="flex gap-3">
-                      <RoleCard
-                        label={loopTopology === 'single' ? 'Generator' : 'Worker'}
-                        hint={
-                          loopTopology === 'single'
-                            ? 'Writes code; a fresh grader reviews each turn'
-                            : 'Writes code in the worktree'
-                        }
-                        engine={workerEngine}
-                        model={workerModel}
-                        onEngine={setWorkerEngine}
-                        onModel={setWorkerModel}
+                )}
+
+                {location === 'remote' ? (
+                  <div className="rounded-lg border border-border bg-muted/20">
+                    <div className="flex items-center gap-1.5 border-b border-border p-2">
+                      <Input
+                        value={cwd}
+                        onChange={(e) => setCwd(e.target.value)}
+                        onKeyDown={(e) => e.key === 'Enter' && loadRemoteDir(cwd, { select: true })}
+                        placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
+                        className="border-0 bg-transparent font-mono shadow-none focus-visible:ring-0"
                       />
-                      {loopTopology === 'paired' && (
-                        <RoleCard
-                          label="Driver"
-                          hint="Plans + grades, in the main repo"
-                          engine={driverEngine}
-                          model={driverModel}
-                          onEngine={setDriverEngine}
-                          onModel={setDriverModel}
+                      <button
+                        onClick={() => loadRemoteDir('~', { select: true })}
+                        title="Remote home"
+                        className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                      >
+                        <Home size={13} strokeWidth={2} />
+                      </button>
+                      <button
+                        onClick={() =>
+                          remoteListing?.parent &&
+                          loadRemoteDir(remoteListing.parent, { select: true })
+                        }
+                        disabled={!remoteListing?.parent}
+                        title="Parent folder"
+                        className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground disabled:opacity-35"
+                      >
+                        <ArrowUp size={13} strokeWidth={2} />
+                      </button>
+                      <button
+                        onClick={() =>
+                          loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })
+                        }
+                        title="Refresh"
+                        className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                      >
+                        <RefreshCw
+                          size={13}
+                          strokeWidth={2}
+                          className={remoteListingLoading ? 'animate-spin' : ''}
                         />
-                      )}
+                      </button>
                     </div>
-                  </div>
-                  <div>
-                    <div className={sectionTitle + ' mb-1.5'}>Workspace</div>
-                    {lockedCwd && (
-                      <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px] text-foreground/80">
-                        <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                        <span className="font-semibold text-foreground">Current workspace</span>
-                        <span className="min-w-0 truncate font-mono text-muted-foreground">{tilde(lockedCwd)}</span>
-                      </div>
-                    )}
-                    {!lockedCwd && (
-                      <div className="flex items-center gap-2">
-                        <Button variant="secondary" size="sm" onClick={browse}>
-                          <FolderOpen size={13} strokeWidth={2} /> Folder
-                        </Button>
-                        <Input value={cwd} onChange={(e) => setCwd(e.target.value)} placeholder="~ (home)" className="flex-1 font-mono" />
-                      </div>
-                    )}
-                  </div>
-                  {loopErr && <div className="text-[11px] text-destructive">{loopErr}</div>}
-                  <Button
-                    onClick={() => void launchLoop()}
-                    disabled={!goal.trim() || !loopRepoRoot || loopBusy}
-                    className="w-full"
-                    size="lg"
-                  >
-                    <Repeat className="size-4" />
-                    {loopBusy ? 'Starting…' : 'Start paired loop'}
-                  </Button>
-                </CardContent>
-              </Card>
-            ) : (
-              <>
-                {/* Fast path: recent / pinned workspaces — one click starts */}
-                {!lockedCwd &&
-                  (() => {
-                    const pins = pinnedWorkspaces
-                    const recents = readWorkspaceList('gt.recentWorkspaces')
-                      .filter((r) => !pins.includes(r))
-                      .slice(0, 8)
-                    if (!pins.length && !recents.length) return null
-                    const chip = (r: string) => {
-                      const isPinned = pins.includes(r)
-                      return (
-                        <div
-                          key={r}
-                          title={r}
-                          className="group inline-flex max-w-[240px] items-center gap-1 rounded-lg border border-border bg-muted/30 py-1.5 pl-2.5 pr-1 text-[12px] text-foreground/80 transition-colors hover:border-primary/60"
-                        >
-                          <button
-                            onClick={() => onChoose(withSpawn(choiceFromRecent(r)))}
-                            className="inline-flex min-w-0 items-center gap-1.5 text-left"
-                          >
-                            {isRemotePath(r) ? (
-                              <Server size={12} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
-                            ) : (
-                              <FolderOpen size={12} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                            )}
-                            <span className="truncate">{pathLabel(r)}</span>
-                          </button>
+                    <div className="max-h-44 overflow-y-auto p-1.5">
+                      {remoteListingLoading && !remoteListing ? (
+                        <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-muted-foreground">
+                          <RefreshCw size={12} strokeWidth={2} className="animate-spin" /> Loading
+                          folders…
+                        </div>
+                      ) : remoteListingErr ? (
+                        <div className="px-2 py-3 text-[11px] text-destructive">
+                          {remoteListingErr}
+                        </div>
+                      ) : remoteListing && remoteListing.entries.length === 0 ? (
+                        <div className="px-2 py-3 text-[11px] text-muted-foreground">
+                          No child folders.
+                        </div>
+                      ) : (
+                        remoteListing?.entries.map((d) => (
                           <button
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              togglePin(r)
-                            }}
-                            title={isPinned ? 'Unpin workspace' : 'Pin workspace'}
-                            className={`shrink-0 rounded p-0.5 transition-colors ${
-                              isPinned ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground hover:text-foreground'
-                            }`}
+                            key={d.path}
+                            onClick={() => loadRemoteDir(d.path, { select: true })}
+                            className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-foreground/80 hover:bg-muted"
                           >
-                            <Pin size={12} strokeWidth={2} fill={isPinned ? 'currentColor' : 'none'} />
+                            <FolderOpen
+                              size={13}
+                              strokeWidth={2}
+                              className="shrink-0 text-muted-foreground"
+                            />
+                            <span className="truncate">{d.name}</span>
                           </button>
-                        </div>
-                      )
-                    }
-                    return (
-                      <div className="mb-3 space-y-2">
+                        ))
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    {(pins.length > 0 || recents.length > 0) && (
+                      <div className="space-y-2">
                         {pins.length > 0 && (
                           <div>
                             <div className={sectionTitle + ' mb-1.5'}>Pinned</div>
-                            <div className="flex flex-wrap gap-1.5">{pins.map(chip)}</div>
+                            <div className="flex flex-wrap gap-1.5">{pins.map(workspaceChip)}</div>
                           </div>
                         )}
                         {recents.length > 0 && (
                           <div>
-                            <div className={sectionTitle + ' mb-1.5'}>Recent workspaces</div>
-                            <div className="flex flex-wrap gap-1.5">{recents.map(chip)}</div>
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })()}
-
-                {/* Wizard */}
-                <div className="mb-2 flex items-center gap-2">
-                  <span className="text-[11px] font-semibold text-foreground">
-                    {['Model', 'Workspace', 'Review'][wizardStep - 1]}
-                  </span>
-                  <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
-                    <div
-                      className="h-1 rounded-full bg-primary transition-all"
-                      style={{ width: `${(wizardStep / 3) * 100}%` }}
-                    />
-                  </div>
-                  <span className="text-[10.5px] tabular-nums text-muted-foreground">
-                    {wizardStep}/3
-                  </span>
-                </div>
-
-                {/* Step 1 · Model */}
-                {wizardStep === 1 && (
-                  <Card>
-                    <CardHeader className="py-3">
-                      <CardTitle className="text-[13px]">Choose your model</CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-3 pt-3">
-                      <div>
-                        <div className={sectionTitle + ' mb-1.5'}>Engine</div>
-                        <div className="grid grid-cols-3 gap-2">
-                          {engineOptions.map((e) => (
-                            <button key={e} onClick={() => selectEngine(e)} className={pickButton(engine === e)}>
-                              {e === 'local' ? (
-                                <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
-                              ) : (
-                                <EngineLogo engine={e} size={16} />
-                              )}
-                              <span className="min-w-0 truncate text-[12.5px] font-semibold">
-                                {sessionEngineLabel(e)}
-                              </span>
-                              {e === recentEngine && (
-                                <span className="ml-auto shrink-0 rounded-full border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[var(--gt-accent-2)]">
-                                  Recent
-                                </span>
-                              )}
-                            </button>
-                          ))}
-                        </div>
-                        {engine === 'openrouter' && (
-                          <div className="mt-2.5">
-                            <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Harness</div>
-                            <div className="grid grid-cols-2 gap-2">
-                              {(['codex', 'hermes'] as const).map((h) => (
-                                <button key={h} onClick={() => setOpenrouterHarness(h)} className={pickButton(openrouterHarness === h)}>
-                                  <EngineLogo engine={h} size={15} />
-                                  <span className="min-w-0 truncate text-[12px] font-semibold">
-                                    {h === 'codex' ? 'Codex' : 'Hermes'}
-                                  </span>
-                                </button>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-                        {isAiEngine(engine) && (
-                          <div className="mt-2.5">
-                            <div className="mb-1.5 text-[10.5px] uppercase tracking-wide text-muted-foreground">Model</div>
-                            <div className="max-h-[240px] space-y-3 overflow-y-auto pr-0.5">
-                              <ModelSelect engine={engine} model={model} onChange={setModel} />
-                              {!(engine === 'openrouter' && openrouterHarness === 'hermes') && (
-                                <EffortSelect engine={engine} effort={effort} onChange={setEffort} />
-                              )}
+                            <div className={sectionTitle + ' mb-1.5'}>Recent</div>
+                            <div className="flex flex-wrap gap-1.5">
+                              {recents.map(workspaceChip)}
                             </div>
                           </div>
                         )}
                       </div>
-                      <div className="flex justify-end">
-                        <Button onClick={() => setWizardStep(2)}>
-                          Next <ArrowRight className="size-4" />
+                    )}
+                    <div>
+                      <div className={sectionTitle + ' mb-1.5'}>Folder</div>
+                      <div className="flex items-center gap-2">
+                        <Button variant="secondary" size="sm" onClick={browse}>
+                          <FolderOpen size={13} strokeWidth={2} /> Browse
                         </Button>
+                        <Input
+                          value={cwd}
+                          onChange={(e) => setCwd(e.target.value)}
+                          placeholder="~ (home)"
+                          className="flex-1 font-mono"
+                        />
                       </div>
-                    </CardContent>
-                  </Card>
+                    </div>
+                  </>
                 )}
 
-                {/* Step 2 · Workspace */}
-                {wizardStep === 2 && (
-                  <Card>
-                    <CardHeader className="py-3">
-                      <CardTitle className="text-[13px]">Where should it work?</CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-3 pt-3">
-                      <div>
-                        <div className={sectionTitle + ' mb-1.5'}>Location</div>
-                        <div className="grid grid-cols-2 gap-2">
-                          <button onClick={() => switchLocation('local')} className={pickButton(location === 'local')}>
-                            <FolderOpen size={16} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                            <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">Local</span>
-                          </button>
-                          <button
-                            onClick={() => switchLocation('remote')}
-                            disabled={remoteHosts.length === 0}
-                            className={pickButton(location === 'remote', remoteHosts.length === 0)}
-                          >
-                            <Server size={16} strokeWidth={2} className="shrink-0 text-[var(--gt-accent-2)]" />
-                            <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">Remote SSH</span>
-                          </button>
-                        </div>
-                        {remoteHosts.length === 0 && (
-                          <div className="mt-2 text-[10.5px] text-muted-foreground">
-                            SSH profiles are configured in Settings → SSH Hosts.
-                          </div>
-                        )}
-                      </div>
-
-                      <div>
-                        <div className={sectionTitle + ' mb-1.5'}>Workspace</div>
-                        {location === 'remote' && (
-                          <div className="mb-2 space-y-2">
-                            {remoteHosts.map((h) => (
-                              <button
-                                key={h.id}
-                                onClick={() => {
-                                  setRemoteHostId(h.id)
-                                  const nextCwd = h.defaultCwd || h.daemon.projectsDir || ''
-                                  setCwd(nextCwd)
-                                  setProjParent(nextCwd)
-                                }}
-                                className={`inline-flex max-w-[260px] items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] ${
-                                  remoteHostId === h.id
-                                    ? 'border-primary/60 bg-primary/20 text-foreground'
-                                    : 'border-border text-foreground/60 hover:border-primary/50 hover:text-foreground'
-                                }`}
-                              >
-                                <Server size={11} strokeWidth={2} className="shrink-0" />
-                                <span className="truncate">{h.label || h.sshTarget}</span>
-                              </button>
-                            ))}
-                          </div>
-                        )}
-                        {location === 'remote' && (
-                          <div className="rounded-lg border border-border bg-muted/20">
-                            <div className="flex items-center gap-1.5 border-b border-border p-2">
-                              <Input
-                                value={cwd}
-                                onChange={(e) => setCwd(e.target.value)}
-                                onKeyDown={(e) => e.key === 'Enter' && loadRemoteDir(cwd, { select: true })}
-                                placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
-                                className="border-0 bg-transparent font-mono shadow-none focus-visible:ring-0"
-                              />
-                              <button onClick={() => loadRemoteDir('~', { select: true })} title="Remote home" className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground">
-                                <Home size={13} strokeWidth={2} />
-                              </button>
-                              <button
-                                onClick={() => remoteListing?.parent && loadRemoteDir(remoteListing.parent, { select: true })}
-                                disabled={!remoteListing?.parent}
-                                title="Parent folder"
-                                className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground disabled:opacity-35"
-                              >
-                                <ArrowUp size={13} strokeWidth={2} />
-                              </button>
-                              <button
-                                onClick={() => loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })}
-                                title="Refresh"
-                                className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
-                              >
-                                <RefreshCw size={13} strokeWidth={2} className={remoteListingLoading ? 'animate-spin' : ''} />
-                              </button>
-                              <button
-                                onClick={() => {
-                                  const selected = remoteListing?.cwd || cwd
-                                  setCwd(selected)
-                                  setProjParent(selected)
-                                }}
-                                className="inline-flex items-center gap-1 rounded-md border border-primary/50 bg-primary/10 px-2 py-1.5 text-[11px] text-foreground"
-                              >
-                                <Check size={12} strokeWidth={2.5} /> Use
-                              </button>
-                            </div>
-                            <div className="max-h-44 overflow-y-auto p-1.5">
-                              {remoteListingLoading && !remoteListing ? (
-                                <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-muted-foreground">
-                                  <RefreshCw size={12} strokeWidth={2} className="animate-spin" /> Loading folders…
-                                </div>
-                              ) : remoteListingErr ? (
-                                <div className="px-2 py-3 text-[11px] text-destructive">{remoteListingErr}</div>
-                              ) : remoteListing && remoteListing.entries.length === 0 ? (
-                                <div className="px-2 py-3 text-[11px] text-muted-foreground">No child folders.</div>
-                              ) : (
-                                remoteListing?.entries.map((d) => (
-                                  <button
-                                    key={d.path}
-                                    onClick={() => loadRemoteDir(d.path, { select: true })}
-                                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-foreground/80 hover:bg-muted"
-                                  >
-                                    <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                                    <span className="truncate">{d.name}</span>
-                                  </button>
-                                ))
-                              )}
-                            </div>
-                          </div>
-                        )}
-                        {lockedCwd && location === 'local' && (
-                          <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px] text-foreground/80">
-                            <FolderOpen size={13} strokeWidth={2} className="shrink-0 text-muted-foreground" />
-                            <span className="font-semibold text-foreground">Current workspace</span>
-                            <span className="min-w-0 truncate font-mono text-muted-foreground">{tilde(lockedCwd)}</span>
-                          </div>
-                        )}
-                        {!lockedCwd && location === 'local' && (
-                          <div className="flex items-center gap-2">
-                            <Button variant="secondary" size="sm" onClick={browse}>
-                              <FolderOpen size={13} strokeWidth={2} /> Folder
-                            </Button>
-                            <Input value={cwd} onChange={(e) => setCwd(e.target.value)} placeholder="~ (home)" className="flex-1 font-mono" />
-                          </div>
-                        )}
-                      </div>
-
-                      <div className="flex items-center justify-between">
-                        <Button variant="ghost" onClick={() => setWizardStep(1)}>
-                          <ArrowLeft className="size-4" /> Back
-                        </Button>
-                        <Button onClick={() => setWizardStep(3)}>
-                          Next <ArrowRight className="size-4" />
-                        </Button>
-                      </div>
-                    </CardContent>
-                  </Card>
+                {/* Remote only — the local path input above already IS the
+                    confirmation, so repeating it there is noise. */}
+                {location === 'remote' && (
+                  <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px]">
+                    <Check
+                      size={13}
+                      strokeWidth={2.5}
+                      className="shrink-0 text-[var(--gt-accent-2)]"
+                    />
+                    <span className="shrink-0 text-muted-foreground">{daemonLabel}</span>
+                    <span className="min-w-0 truncate font-mono text-foreground">
+                      {selectedWorkspaceLabel}
+                    </span>
+                  </div>
                 )}
+              </>
+            )}
 
-                {/* Step 3 · Review */}
-                {wizardStep === 3 && (
-                  <Card>
-                    <CardHeader className="py-3">
-                      <CardTitle className="text-[13px]">Ready to launch</CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-3 pt-3">
-                      <div className="space-y-1.5 rounded-lg border border-border bg-muted/30 p-3 text-[12px]">
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">Engine</span>
-                          <span className="font-medium text-foreground">{sessionEngineLabel(engine)}</span>
-                        </div>
-                        {isAiEngine(engine) && (
-                          <div className="flex justify-between">
-                            <span className="text-muted-foreground">Model</span>
-                            <span className="font-medium text-foreground">{model ?? 'Default'}</span>
-                          </div>
-                        )}
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">Location</span>
-                          <span className="font-medium text-foreground">
-                            {location === 'remote' ? 'Remote SSH' : 'Local'}
+            {/* ── Step · Model ─────────────────────────────────────────── */}
+            {step === 'model' && (
+              <>
+                <div>
+                  <div className={sectionTitle + ' mb-1.5'}>Engine</div>
+                  <Select value={engine} onValueChange={(v) => selectEngine(v as SessionEngine)}>
+                    <SelectTrigger className="h-9 text-[13px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {engineOptions.map((e) => (
+                        <SelectItem key={e} value={e}>
+                          <span className="flex items-center gap-2">
+                            {e === 'local' ? (
+                              <SquareTerminal className="size-3.5" />
+                            ) : (
+                              <EngineLogo engine={e} size={14} />
+                            )}
+                            {sessionEngineLabel(e)}
+                            {e === recentEngine && (
+                              <span className="text-[9.5px] uppercase tracking-wide text-[var(--gt-accent-2)]">
+                                recent
+                              </span>
+                            )}
                           </span>
-                        </div>
-                        <div className="flex justify-between gap-3">
-                          <span className="shrink-0 text-muted-foreground">Workspace</span>
-                          <span className="truncate font-mono text-foreground">
-                            {location === 'remote'
-                              ? remoteDisplayPath(remoteCwd)
-                              : cwd.trim()
-                                ? tilde(cwd.trim())
-                                : '~'}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {engine === 'openrouter' && (
+                  <div>
+                    <div className={sectionTitle + ' mb-1.5'}>Harness</div>
+                    <div className="grid grid-cols-2 gap-2">
+                      {(['codex', 'hermes'] as const).map((h) => (
+                        <button
+                          key={h}
+                          onClick={() => setOpenrouterHarness(h)}
+                          className={pickButton(openrouterHarness === h)}
+                        >
+                          <EngineLogo engine={h} size={15} />
+                          <span className="min-w-0 truncate text-[12px] font-semibold">
+                            {h === 'codex' ? 'Codex' : 'Hermes'}
                           </span>
-                        </div>
-                      </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
 
-                      <SpawnOptions
-                        value={spawn}
-                        onChange={changeSpawn}
-                        savedPrompts={savedPrompts}
-                        onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
-                        onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
-                      />
+                {isAiEngine(engine) ? (
+                  <div className="space-y-3">
+                    <div>
+                      <div className={sectionTitle + ' mb-1.5'}>Model</div>
+                      <ModelSelect engine={engine} model={model} onChange={setModel} />
+                    </div>
+                    {!(engine === 'openrouter' && openrouterHarness === 'hermes') && (
+                      <EffortSelect engine={engine} effort={effort} onChange={setEffort} />
+                    )}
+                  </div>
+                ) : (
+                  <p className="text-[11.5px] text-muted-foreground">
+                    A plain shell — no model, no agent.
+                  </p>
+                )}
+              </>
+            )}
 
-                      <div className="flex items-center justify-between gap-2 border-t border-border pt-3">
-                        <Button variant="ghost" onClick={() => setWizardStep(2)}>
-                          <ArrowLeft className="size-4" /> Back
-                        </Button>
-                        <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
-                          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Session name (optional)" className="max-w-[220px]" />
-                          <Button onClick={() => onChoose(withSpawn(buildChoice()))} disabled={location === 'remote' && !remoteHost}>
-                            <Plus className="size-4" /> New session
-                          </Button>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
+            {/* ── Step · Project (scaffold) ────────────────────────────── */}
+            {step === 'project' && (
+              <>
+                {remoteHosts.length > 0 && (
+                  <div>
+                    <div className={sectionTitle + ' mb-1.5'}>Location</div>
+                    <Select
+                      value={location}
+                      onValueChange={(v) => switchLocation(v as 'local' | 'remote')}
+                    >
+                      <SelectTrigger className="h-9 text-[13px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="local">
+                          <span className="flex items-center gap-2">
+                            <FolderOpen className="size-3.5" /> Local
+                          </span>
+                        </SelectItem>
+                        <SelectItem value="remote">
+                          <span className="flex items-center gap-2">
+                            <Server className="size-3.5" /> Remote SSH
+                          </span>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
                 )}
+                <div>
+                  <div className={sectionTitle + ' mb-1.5'}>Name</div>
+                  <div className="flex items-center gap-2">
+                    <Input
+                      value={projName}
+                      onChange={(e) => {
+                        setProjName(e.target.value)
+                        setScaffoldErr('')
+                      }}
+                      placeholder="project-name"
+                      className="flex-1 font-mono"
+                    />
+                    <Button
+                      variant="secondary"
+                      onClick={pickParent}
+                      title="Choose parent directory"
+                    >
+                      {location === 'remote' ? (
+                        <Server size={13} strokeWidth={2} />
+                      ) : (
+                        <FolderOpen size={13} strokeWidth={2} />
+                      )}
+                      <span className="max-w-[180px] truncate">{projectParentLabel}</span>
+                    </Button>
+                  </div>
+                </div>
               </>
             )}
-          </TabsContent>
 
-          {/* ── Resume (self-contained) ───────────────────────────────── */}
-          <TabsContent value="resume" className="pt-3">
-            <div className="mb-3 flex items-center gap-2">
-              <div className="flex flex-wrap items-center gap-1">
-                {ENGINE_IDS.filter((e) => e !== 'openrouter').map((e) => (
-                  <button
-                    key={e}
-                    onClick={() => selectResumeEngine(e)}
-                    className={`flex items-center gap-1.5 rounded-lg border px-2 py-1 text-[11.5px] font-semibold transition-colors ${
-                      resumeEngine === e
-                        ? 'border-primary/60 bg-primary/15 text-foreground'
-                        : 'border-border text-muted-foreground hover:border-primary/50 hover:text-foreground'
-                    }`}
+            {/* ── Step · Loop goal ─────────────────────────────────────── */}
+            {step === 'goal' && (
+              <>
+                <div>
+                  <div className={sectionTitle + ' mb-1.5'}>Goal</div>
+                  <Textarea
+                    value={goal}
+                    onChange={(e) => setGoal(e.target.value)}
+                    placeholder="What should this loop converge on?"
+                    rows={4}
+                  />
+                </div>
+                <div>
+                  <div className={sectionTitle + ' mb-1.5'}>Topology</div>
+                  <Select
+                    value={loopTopology}
+                    onValueChange={(v) => setLoopTopology(v as 'paired' | 'single')}
                   >
-                    <EngineLogo engine={e} size={12} />
-                    {engineLabel(e)}
-                  </button>
-                ))}
-              </div>
-              <span className="ml-auto shrink-0 text-[10.5px] text-muted-foreground">{resumeCountLabel}</span>
-              <Button variant="secondary" size="xs" onClick={() => loadEngineSessions(resumeEngine, true)} disabled={isLoadingThisEngine}>
-                <RefreshCw size={11} strokeWidth={2} className={isLoadingThisEngine ? 'animate-spin' : ''} />
-                {sessions ? 'Refresh' : 'Load'}
-              </Button>
-            </div>
-            {sessions && (
-              <label className="relative mb-2 block">
-                <Search size={11} strokeWidth={2} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-                <input
-                  value={sessionSearch}
-                  onChange={(e) => setSessionSearch(e.target.value)}
-                  placeholder="Search sessions…"
-                  className="w-full rounded-md border border-border bg-muted/40 py-1.5 pl-6 pr-2 text-[11px] text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/60"
-                />
-              </label>
+                    <SelectTrigger className="h-9 text-[13px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="paired">
+                        Paired — two live sessions grade each other
+                      </SelectItem>
+                      <SelectItem value="single">
+                        Single — one generator + a fresh grader per turn
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </>
             )}
-            {!sessions && !isLoadingThisEngine ? (
-              <button onClick={() => loadEngineSessions(resumeEngine)} className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground">
-                <EngineLogo engine={resumeEngine} size={13} /> Load prior {engineLabel(resumeEngine)} sessions
-              </button>
-            ) : isLoadingThisEngine ? (
-              <div className="flex items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-[12px] text-muted-foreground">
-                <RefreshCw size={13} strokeWidth={2} className="animate-spin" /> Scanning {engineLabel(resumeEngine)} sessions…
-              </div>
-            ) : shown.length === 0 ? (
-              <div className="rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
-                {sessionSearch.trim() ? 'No sessions match that search.' : `No prior ${engineLabel(resumeEngine)} sessions found.`}
-              </div>
-            ) : (
-              <div className="space-y-1.5">
-                {visibleShown.map((s) => (
-                  <button
-                    key={s.id}
-                    onClick={() => onChoose({ mode: 'resume', engine: s.engine, sessionId: s.id, cwd: s.cwd })}
-                    className="flex w-full items-center gap-3 rounded-xl border border-border bg-card p-2.5 text-left transition-colors hover:border-primary/60 hover:bg-muted/40"
+
+            {/* ── Step · Loop roles ────────────────────────────────────── */}
+            {step === 'roles' && (
+              <>
+                <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px]">
+                  <FolderOpen
+                    size={13}
+                    strokeWidth={2}
+                    className="shrink-0 text-muted-foreground"
+                  />
+                  <span className="min-w-0 truncate font-mono text-foreground">
+                    {tilde(loopRepoRoot) || '~'}
+                  </span>
+                  <Badge variant="secondary" className="ml-auto">
+                    Local
+                  </Badge>
+                </div>
+                <div className="flex gap-3">
+                  <RoleCard
+                    label={loopTopology === 'single' ? 'Generator' : 'Worker'}
+                    hint={
+                      loopTopology === 'single'
+                        ? 'Writes code; a fresh grader reviews each turn'
+                        : 'Writes code in the worktree'
+                    }
+                    engine={workerEngine}
+                    model={workerModel}
+                    onEngine={setWorkerEngine}
+                    onModel={setWorkerModel}
+                  />
+                  {loopTopology === 'paired' && (
+                    <RoleCard
+                      label="Driver"
+                      hint="Plans + grades, in the main repo"
+                      engine={driverEngine}
+                      model={driverModel}
+                      onEngine={setDriverEngine}
+                      onModel={setDriverModel}
+                    />
+                  )}
+                </div>
+                {loopErr && <div className="text-[11px] text-destructive">{loopErr}</div>}
+              </>
+            )}
+
+            {/* ── Step · Resume ────────────────────────────────────────── */}
+            {step === 'sessions' && (
+              <>
+                <div className="flex items-center gap-2">
+                  <div className="min-w-0 flex-1">
+                    <Select
+                      value={resumeEngine}
+                      onValueChange={(v) => selectResumeEngine(v as Engine)}
+                    >
+                      <SelectTrigger className="h-9 text-[13px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {ENGINE_IDS.filter((e) => e !== 'openrouter').map((e) => (
+                          <SelectItem key={e} value={e}>
+                            <span className="flex items-center gap-2">
+                              <EngineLogo engine={e} size={14} /> {engineLabel(e)}
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <span className="shrink-0 text-[10.5px] text-muted-foreground">
+                    {resumeCountLabel}
+                  </span>
+                  <Button
+                    variant="secondary"
+                    size="xs"
+                    onClick={() => loadEngineSessions(resumeEngine, true)}
+                    disabled={isLoadingThisEngine}
                   >
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate text-[13px] text-foreground">
-                        {s.firstUserText || <span className="italic text-muted-foreground">Untitled session</span>}
-                      </div>
-                      <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-muted-foreground">
-                        <span className="font-mono">{tilde(s.cwd) || '~'}</span>
-                        {s.gitBranch && (
-                          <span className="inline-flex items-center gap-0.5 text-muted-foreground/70">
-                            <GitBranch size={11} strokeWidth={2} /> {s.gitBranch}
-                          </span>
-                        )}
-                        <span>· {s.turns} turns</span>
-                      </div>
-                    </div>
-                    <div className="shrink-0 text-right text-[10.5px] text-muted-foreground">
-                      <div>{rel(s.mtime)}</div>
-                      <div className="font-mono text-muted-foreground/70">{s.id.slice(0, 8)}</div>
-                    </div>
-                  </button>
-                ))}
-                {hiddenShown > 0 && (
+                    <RefreshCw
+                      size={11}
+                      strokeWidth={2}
+                      className={isLoadingThisEngine ? 'animate-spin' : ''}
+                    />
+                    {sessions ? 'Refresh' : 'Load'}
+                  </Button>
+                </div>
+                {sessions && (
+                  <label className="relative block">
+                    <Search
+                      size={11}
+                      strokeWidth={2}
+                      className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+                    />
+                    <input
+                      value={sessionSearch}
+                      onChange={(e) => setSessionSearch(e.target.value)}
+                      placeholder="Search sessions…"
+                      className="w-full rounded-md border border-border bg-muted/40 py-1.5 pl-6 pr-2 text-[11px] text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/60"
+                    />
+                  </label>
+                )}
+                {!sessions && !isLoadingThisEngine ? (
                   <button
-                    onClick={() => setVisibleSessionCount((n) => n + SESSION_PAGE_SIZE)}
-                    className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 p-2.5 text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                    onClick={() => loadEngineSessions(resumeEngine)}
+                    className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground"
                   >
-                    Load {Math.min(SESSION_PAGE_SIZE, hiddenShown)} more
-                    <span className="text-muted-foreground/70">· {hiddenShown} remaining</span>
+                    <EngineLogo engine={resumeEngine} size={13} /> Load prior{' '}
+                    {engineLabel(resumeEngine)} sessions
                   </button>
-                )}
-              </div>
-            )}
-          </TabsContent>
-
-          {/* ── Scratch ────────────────────────────────────────────────── */}
-          <TabsContent value="scratch" className="pt-3">
-            <Card>
-              <CardHeader className="py-3">
-                <CardTitle className="flex items-center gap-2 text-[13px]">
-                  <Zap size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> Scratch session
-                </CardTitle>
-                <p className="text-[11px] text-muted-foreground">
-                  Throwaway — spins up in{' '}
-                  <span className="font-mono">~/.config/TerMinal/scratch</span>, no repo attached.
-                </p>
-              </CardHeader>
-              <CardContent className="space-y-3 pt-3">
-                <div>
-                  <div className={sectionTitle + ' mb-1.5'}>Engine</div>
-                  <div className="grid grid-cols-3 gap-2">
-                    {engineOptions.map((e) => (
-                      <button key={e} onClick={() => setScratchEngine(e)} className={pickButton(scratchEngine === e)}>
-                        {e === 'local' ? (
-                          <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
-                        ) : (
-                          <EngineLogo engine={e} size={16} />
-                        )}
-                        <span className="min-w-0 truncate text-[12.5px] font-semibold">{sessionEngineLabel(e)}</span>
+                ) : isLoadingThisEngine ? (
+                  <div className="flex items-center justify-center gap-2 rounded-xl border border-dashed border-border p-6 text-[12px] text-muted-foreground">
+                    <RefreshCw size={13} strokeWidth={2} className="animate-spin" /> Scanning{' '}
+                    {engineLabel(resumeEngine)} sessions…
+                  </div>
+                ) : shown.length === 0 ? (
+                  <div className="rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
+                    {sessionSearch.trim()
+                      ? 'No sessions match that search.'
+                      : `No prior ${engineLabel(resumeEngine)} sessions found.`}
+                  </div>
+                ) : (
+                  <div className="space-y-1.5">
+                    {visibleShown.map((s) => (
+                      <button
+                        key={s.id}
+                        onClick={() =>
+                          onChoose({
+                            mode: 'resume',
+                            engine: s.engine,
+                            sessionId: s.id,
+                            cwd: s.cwd,
+                          })
+                        }
+                        className="flex w-full items-center gap-3 rounded-xl border border-border bg-card p-2.5 text-left transition-colors hover:border-primary/60 hover:bg-muted/40"
+                      >
+                        <div className="min-w-0 flex-1">
+                          <div className="truncate text-[13px] text-foreground">
+                            {s.firstUserText || (
+                              <span className="italic text-muted-foreground">Untitled session</span>
+                            )}
+                          </div>
+                          <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-muted-foreground">
+                            <span className="font-mono">{tilde(s.cwd) || '~'}</span>
+                            {s.gitBranch && (
+                              <span className="inline-flex items-center gap-0.5 text-muted-foreground/70">
+                                <GitBranch size={11} strokeWidth={2} /> {s.gitBranch}
+                              </span>
+                            )}
+                            <span>· {s.turns} turns</span>
+                          </div>
+                        </div>
+                        <div className="shrink-0 text-right text-[10.5px] text-muted-foreground">
+                          <div>{rel(s.mtime)}</div>
+                          <div className="font-mono text-muted-foreground/70">
+                            {s.id.slice(0, 8)}
+                          </div>
+                        </div>
                       </button>
                     ))}
+                    {hiddenShown > 0 && (
+                      <button
+                        onClick={() => setVisibleSessionCount((n) => n + SESSION_PAGE_SIZE)}
+                        className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 p-2.5 text-[12px] text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                      >
+                        Load {Math.min(SESSION_PAGE_SIZE, hiddenShown)} more
+                        <span className="text-muted-foreground/70">· {hiddenShown} remaining</span>
+                      </button>
+                    )}
                   </div>
+                )}
+              </>
+            )}
+
+            {/* ── Step · Review ────────────────────────────────────────── */}
+            {step === 'review' && (
+              <>
+                <div className="space-y-1.5 rounded-lg border border-border bg-muted/30 p-3 text-[12px]">
+                  {summaryRow('Engine', sessionEngineLabel(engine))}
+                  {isAiEngine(engine) && summaryRow('Model', model ?? 'Default')}
+                  {isAiEngine(engine) && effort && summaryRow('Effort', effort)}
+                  {intent === 'scratch' ? (
+                    summaryRow('Workspace', 'Scratch dir — no repo', true)
+                  ) : intent === 'repo' ? (
+                    <>
+                      {summaryRow('Project', projName.trim(), true)}
+                      {summaryRow('Parent', projectParentLabel, true)}
+                    </>
+                  ) : (
+                    <>
+                      {location === 'remote' && summaryRow('Host', daemonLabel)}
+                      {summaryRow('Workspace', selectedWorkspaceLabel, true)}
+                    </>
+                  )}
                 </div>
+
                 <SpawnOptions
                   value={spawn}
                   onChange={changeSpawn}
@@ -1266,57 +1426,67 @@ export function EntryScreen({
                   onSaveCustom={(p) => persistPrompts([...savedPrompts, p])}
                   onDeleteCustom={(id) => persistPrompts(savedPrompts.filter((p) => p.id !== id))}
                 />
-                <Button onClick={() => startScratch(scratchEngine)} className="w-full" size="lg">
-                  <Zap className="size-4" /> Start scratch session
-                </Button>
-              </CardContent>
-            </Card>
-          </TabsContent>
 
-          {/* ── New repo ───────────────────────────────────────────────── */}
-          <TabsContent value="repo" className="pt-3">
-            <Card>
-              <CardHeader className="py-3">
-                <CardTitle className="flex items-center gap-2 text-[13px]">
-                  <FolderPlus size={14} strokeWidth={2} className="text-[var(--gt-accent-2)]" /> New project from template
-                </CardTitle>
-                <p className="text-[11px] text-muted-foreground">
-                  Clones your template repo into a new folder, then opens a session there.
-                </p>
-              </CardHeader>
-              <CardContent className="space-y-3 pt-3">
-                <div className="flex items-center gap-2">
-                  <Input
-                    value={projName}
-                    onChange={(e) => {
-                      setProjName(e.target.value)
-                      setScaffoldErr('')
-                    }}
-                    onKeyDown={(e) => e.key === 'Enter' && createProject()}
-                    placeholder="project-name"
-                    className="flex-1 font-mono"
-                  />
-                  <Button variant="secondary" onClick={pickParent} title="Choose parent directory">
-                    {location === 'remote' ? <Server size={13} strokeWidth={2} /> : <FolderOpen size={13} strokeWidth={2} />}
-                    <span className="max-w-[180px] truncate">{projectParentLabel}</span>
-                  </Button>
-                  <Button onClick={createProject} disabled={!projName.trim() || scaffoldBusy}>
-                    <Plus className="size-4" /> {scaffoldBusy ? 'Creating…' : 'Create'}
-                  </Button>
-                </div>
                 {scaffoldErr && (
                   <div className="text-[11px] text-destructive">
                     {scaffoldErr}
                     <div className="mt-0.5 text-[10.5px] leading-snug text-muted-foreground">
-                      Check your network/VPN and that the template repo (Settings → Projects → templateRepo)
-                      is reachable — a private repo needs your git auth.
+                      Check your network/VPN and that the template repo (Settings → Projects →
+                      templateRepo) is reachable — a private repo needs your git auth.
                     </div>
                   </div>
                 )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Footer nav — one primary action, always bottom-right */}
+        <div className="mt-3 flex items-center justify-between gap-2">
+          <Button variant="ghost" onClick={back} disabled={stepIndex === 0}>
+            <ArrowLeft className="size-4" /> Back
+          </Button>
+          <div className="flex min-w-0 items-center justify-end gap-2">
+            {step === 'review' && intent !== 'repo' && (
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Session name (optional)"
+                className="max-w-[200px]"
+              />
+            )}
+            {step === 'review' ? (
+              intent === 'scratch' ? (
+                <Button onClick={() => void startScratch()}>
+                  <Zap className="size-4" /> Start scratch session
+                </Button>
+              ) : intent === 'repo' ? (
+                <Button onClick={createProject} disabled={!projName.trim() || scaffoldBusy}>
+                  <FolderPlus className="size-4" />
+                  {scaffoldBusy ? 'Creating…' : 'Create & open'}
+                </Button>
+              ) : (
+                <Button
+                  onClick={() => onChoose(withSpawn(buildChoice()))}
+                  disabled={location === 'remote' && !remoteHost}
+                >
+                  <Plus className="size-4" /> New session
+                </Button>
+              )
+            ) : step === 'roles' ? (
+              <Button
+                onClick={() => void launchLoop()}
+                disabled={!goal.trim() || !loopRepoRoot || loopBusy}
+              >
+                <Repeat className="size-4" /> {loopBusy ? 'Starting…' : 'Start paired loop'}
+              </Button>
+            ) : step === 'sessions' ? null : (
+              <Button onClick={next} disabled={nextBlocked}>
+                Next <ArrowRight className="size-4" />
+              </Button>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   )

From beea814cbc2b79a2bda4c68e2db83d46913e40d7 Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Mon, 17 Aug 2026 08:37:33 -0700
Subject: [PATCH 07/11] feat(ux): visible options, workspace-scoped resume,
 click-anywhere nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three refinements to the entry wizard:

- Show every option by default instead of hiding it behind a dropdown.
  Intent, location, host, engine and loop topology are now chips/cards.
  Model and reasoning effort stay dropdowns — they are long, single-value
  lists where a menu genuinely beats a grid — via new ModelDropdown /
  EffortDropdown, compact siblings of the existing card pickers in the
  same module so both forms read the same registry.
- Resume is workspace-scoped. It gains the workspace step and filters the
  session list by the selected repo (filterSessionMetas already took a
  filterDir), with a "show every workspace" escape hatch and an empty
  state that names the directory rather than implying no sessions exist.
- The step rail navigates forward as well as back: any step is clickable
  once every earlier step is answered. Steps that fully answer themselves
  in one click — an intent card, a workspace chip, a picked folder — now
  advance optimistically, so the common path never needs Next.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WXyD9HvjP57L5BY9u2iqf8
---
 src/renderer/src/components/EntryScreen.tsx | 418 +++++++++++---------
 src/renderer/src/components/ModelSelect.tsx |  97 +++++
 2 files changed, 339 insertions(+), 176 deletions(-)

diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index 6246bc82..619ac48e 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -31,7 +31,7 @@ import type {
 import { engineLabel, sessionEngineLabel, ENGINE_MODELS, ENGINE_IDS } from '../lib/engines'
 import { useExperiment } from '../lib/useExperiment'
 import { EngineLogo } from './EngineLogo'
-import { EffortSelect, ModelSelect } from './ModelSelect'
+import { EffortDropdown, ModelDropdown } from './ModelSelect'
 import logo from '../assets/logo.png'
 import { filterSessionMetas } from '../lib/sessionSearch'
 import { repoOrientationPendingKey } from '../lib/orientation'
@@ -42,13 +42,6 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
 
 export type Choice = {
@@ -489,10 +482,6 @@ export function EntryScreen({
     }
   }
 
-  useEffect(() => {
-    setVisibleSessionCount(SESSION_PAGE_SIZE)
-  }, [resumeEngine, sessionSearch])
-
   // Throwaway session: spin up the picked engine in the app-owned scratch dir
   // (no repo, no folder-picking). For a quick chat you don't want to file away.
   const startScratch = async () => {
@@ -554,19 +543,30 @@ export function EntryScreen({
   }
   const browse = async () => {
     const dir = await window.gt.pickDir()
-    if (dir) selectWorkspace(dir)
+    if (!dir) return
+    selectWorkspace(dir)
+    // Confirming a folder in the native dialog is as decisive as a chip click.
+    advance()
   }
 
   // openrouter is one-shot with no resumable local store — hide its resume list.
   // Hermes resumes from its ~/.hermes SQLite store, so it's allowed.
   const canResume = isAiEngine(resumeEngine) && resumeEngine !== 'openrouter' && !lockedRemote
   const sessions = canResume ? sessionsByEngine[resumeEngine] : undefined
+  /** The workspace the resume list is scoped to. Empty = every workspace —
+   *  `lockedCwd` pins it, otherwise it's whatever the workspace step selected. */
+  const resumeDir = (lockedCwd || cwd).trim()
   // Memoized — these scans (6 fields per session) used to re-run on every
   // keystroke AND every unrelated re-render of this large component.
   const shown = useMemo(
-    () => (sessions ? filterSessionMetas(sessions, { query: sessionSearch }) : []),
-    [sessions, sessionSearch],
+    () =>
+      sessions ? filterSessionMetas(sessions, { query: sessionSearch, filterDir: resumeDir }) : [],
+    [sessions, sessionSearch, resumeDir],
   )
+  // Any change to what the list is scoped by starts the paging over.
+  useEffect(() => {
+    setVisibleSessionCount(SESSION_PAGE_SIZE)
+  }, [resumeEngine, sessionSearch, resumeDir])
   const visibleShown = shown.slice(0, visibleSessionCount)
   const hiddenShown = Math.max(0, shown.length - visibleShown.length)
   const isLoadingThisEngine = canResume ? !!loadingSessions[resumeEngine] : false
@@ -670,7 +670,10 @@ export function EntryScreen({
       (!lockedCwd || i.id === 'new' || i.id === 'resume' || i.id === 'loop'),
   )
   const steps: StepId[] = useMemo(() => {
-    if (intent === 'resume') return ['start', 'sessions']
+    // Resume gets a workspace step too — the session list is long enough that
+    // "which repo" is the first thing you actually filter by.
+    if (intent === 'resume')
+      return lockedCwd ? ['start', 'sessions'] : ['start', 'workspace', 'sessions']
     if (intent === 'scratch') return ['start', 'model', 'review']
     if (intent === 'repo') return ['start', 'project', 'model', 'review']
     if (intent === 'loop')
@@ -681,15 +684,27 @@ export function EntryScreen({
   const stepNumber = steps.indexOf(step) + 1
   const back = () => setStepIndex((i) => Math.max(0, i - 1))
   const next = () => setStepIndex((i) => Math.min(steps.length - 1, i + 1))
+  /** Optimistic advance: a click that FULLY answers the step moves straight on,
+   *  so the common path needs no Next at all. Reserved for one-click answers
+   *  (the intent cards, a workspace chip, a picked folder) — never for a step
+   *  that still has fields the user may reasonably want to touch, like the
+   *  engine step's engine + model + effort trio. Every step stays reachable
+   *  from the rail, so an over-eager advance costs one click to undo. */
+  const advance = next
   // Changing the intent re-derives the steps; never strand the user past the end.
   useEffect(() => {
     setStepIndex((i) => Math.min(i, steps.length - 1))
   }, [steps.length])
-  // Steps that can't be left until their one question is answered.
-  const nextBlocked =
-    (step === 'project' && !projName.trim()) ||
-    (step === 'goal' && !goal.trim()) ||
-    (step === 'workspace' && intent === 'loop' && !loopRepoRoot)
+  // A step that can't be left until its one question is answered. Everything
+  // up to (and including) the FIRST such step is reachable, so the rail can be
+  // clicked forward as well as back — you don't have to walk through Next.
+  const stepBlocked = (s: StepId) =>
+    (s === 'project' && !projName.trim()) ||
+    (s === 'goal' && !goal.trim()) ||
+    (s === 'workspace' && intent === 'loop' && !loopRepoRoot)
+  const firstBlocked = steps.findIndex(stepBlocked)
+  const maxReachable = firstBlocked === -1 ? steps.length - 1 : firstBlocked
+  const nextBlocked = stepBlocked(step)
 
   const sectionTitle = 'text-[10px] font-bold uppercase tracking-[0.16em] text-zinc-500'
   const pickButton = (active: boolean, disabled = false) =>
@@ -700,6 +715,14 @@ export function EntryScreen({
           ? 'cursor-not-allowed border-[var(--gt-border)] bg-black/10 text-zinc-700'
           : 'border-[var(--gt-border)] bg-black/20 text-zinc-400 hover:border-[var(--gt-accent)]/50 hover:text-zinc-200'
     }`
+  /** Compact inline option — the small-scale sibling of pickButton. Used where
+   *  the whole option set fits on one row (hosts, resume engines). */
+  const chip = (active: boolean) =>
+    `inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-[12px] font-semibold transition-colors ${
+      active
+        ? 'border-primary/70 bg-primary/15 text-foreground'
+        : 'border-border bg-muted/30 text-muted-foreground hover:border-primary/50 hover:text-foreground'
+    }`
 
   const STEP_COPY: Record<StepId, { title: string; hint: string }> = {
     start: { title: 'What do you want to do?', hint: 'Everything else follows from this.' },
@@ -741,7 +764,10 @@ export function EntryScreen({
         }`}
       >
         <button
-          onClick={() => selectWorkspace(r)}
+          onClick={() => {
+            selectWorkspace(r)
+            advance()
+          }}
           className="inline-flex min-w-0 items-center gap-1.5 text-left"
         >
           {isSelected ? (
@@ -806,22 +832,25 @@ export function EntryScreen({
           )}
         </header>
 
-        {/* Step rail — completed steps are clickable, later ones are not */}
+        {/* Step rail — any reachable step is clickable, forward or back. A step
+            is unreachable only when an earlier one is still unanswered. */}
         <div className="mb-3 flex flex-wrap items-center gap-1.5">
           {steps.map((s, i) => {
             const done = i < stepNumber - 1
             const active = i === stepNumber - 1
+            const reachable = i <= maxReachable
             return (
               <button
                 key={s}
-                onClick={() => done && setStepIndex(i)}
-                disabled={!done}
+                onClick={() => reachable && setStepIndex(i)}
+                disabled={!reachable}
+                title={reachable ? undefined : `Finish ${STEP_TITLE[steps[maxReachable]]} first`}
                 className={`flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors ${
                   active
                     ? 'border-primary/60 bg-primary/15 text-foreground'
-                    : done
+                    : reachable
                       ? 'border-border text-muted-foreground hover:border-primary/50 hover:text-foreground'
-                      : 'border-transparent text-muted-foreground/40'
+                      : 'cursor-not-allowed border-transparent text-muted-foreground/40'
                 }`}
               >
                 {done ? (
@@ -852,54 +881,67 @@ export function EntryScreen({
           <CardContent className="space-y-3 pt-3">
             {/* ── Step · Start ─────────────────────────────────────────── */}
             {step === 'start' && (
-              <div>
-                <div className={sectionTitle + ' mb-1.5'}>Action</div>
-                <Select value={intent} onValueChange={(v) => selectIntent(v as Intent)}>
-                  <SelectTrigger className="h-9 text-[13px]">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {intentOptions.map(({ id, label, icon: Icon }) => (
-                      <SelectItem key={id} value={id}>
-                        <span className="flex items-center gap-2">
-                          <Icon className="size-3.5" /> {label}
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <p className="mt-2 text-[11.5px] text-muted-foreground">
-                  {INTENTS.find((i) => i.id === intent)?.hint}
-                </p>
+              <div className="grid grid-cols-2 gap-2">
+                {intentOptions.map(({ id, label, hint, icon: Icon }) => (
+                  <button
+                    key={id}
+                    onClick={() => {
+                      selectIntent(id)
+                      advance()
+                    }}
+                    className={`flex items-start gap-2.5 rounded-xl border p-3 text-left transition-colors ${
+                      intent === id
+                        ? 'border-primary/70 bg-primary/10'
+                        : 'border-border bg-muted/20 hover:border-primary/50'
+                    }`}
+                  >
+                    <Icon
+                      className={`mt-0.5 size-4 shrink-0 ${
+                        intent === id ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground'
+                      }`}
+                    />
+                    <span className="min-w-0">
+                      <span className="block text-[12.5px] font-semibold text-foreground">
+                        {label}
+                      </span>
+                      <span className="block text-[10.5px] leading-snug text-muted-foreground">
+                        {hint}
+                      </span>
+                    </span>
+                  </button>
+                ))}
               </div>
             )}
 
             {/* ── Step · Workspace ─────────────────────────────────────── */}
             {step === 'workspace' && (
               <>
-                {intent !== 'loop' && (
+                {/* Resume reads local transcript stores, so it has no remote
+                    dimension — only "which repo". */}
+                {intent !== 'loop' && intent !== 'resume' && (
                   <div>
                     <div className={sectionTitle + ' mb-1.5'}>Location</div>
-                    <Select
-                      value={location}
-                      onValueChange={(v) => switchLocation(v as 'local' | 'remote')}
-                    >
-                      <SelectTrigger className="h-9 text-[13px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="local">
-                          <span className="flex items-center gap-2">
-                            <FolderOpen className="size-3.5" /> Local
-                          </span>
-                        </SelectItem>
-                        <SelectItem value="remote" disabled={remoteHosts.length === 0}>
-                          <span className="flex items-center gap-2">
-                            <Server className="size-3.5" /> Remote SSH
-                          </span>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <div className="grid grid-cols-2 gap-2">
+                      <button
+                        onClick={() => switchLocation('local')}
+                        className={pickButton(location === 'local')}
+                      >
+                        <FolderOpen size={16} strokeWidth={2} className="shrink-0" />
+                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                          Local
+                        </span>
+                      </button>
+                      <button
+                        onClick={() => switchLocation('remote')}
+                        disabled={remoteHosts.length === 0}
+                        className={pickButton(location === 'remote', remoteHosts.length === 0)}
+                      >
+                        <Server size={16} strokeWidth={2} className="shrink-0" />
+                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                          Remote SSH
+                        </span>
+                      </button>
+                    </div>
                     {remoteHosts.length === 0 && (
                       <div className="mt-1.5 text-[10.5px] text-muted-foreground">
                         SSH profiles are configured in Settings → SSH Hosts.
@@ -911,29 +953,23 @@ export function EntryScreen({
                 {location === 'remote' && remoteHosts.length > 0 && (
                   <div>
                     <div className={sectionTitle + ' mb-1.5'}>Host</div>
-                    <Select
-                      value={remoteHostId}
-                      onValueChange={(id) => {
-                        setRemoteHostId(id)
-                        const h = remoteHosts.find((x) => x.id === id)
-                        const nextCwd = h?.defaultCwd || h?.daemon.projectsDir || ''
-                        setCwd(nextCwd)
-                        setProjParent(nextCwd)
-                      }}
-                    >
-                      <SelectTrigger className="h-9 text-[13px]">
-                        <SelectValue placeholder="Pick a host" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {remoteHosts.map((h) => (
-                          <SelectItem key={h.id} value={h.id}>
-                            <span className="flex items-center gap-2">
-                              <Server className="size-3.5" /> {h.label || h.sshTarget}
-                            </span>
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <div className="flex flex-wrap gap-1.5">
+                      {remoteHosts.map((h) => (
+                        <button
+                          key={h.id}
+                          onClick={() => {
+                            setRemoteHostId(h.id)
+                            const nextCwd = h.defaultCwd || h.daemon.projectsDir || ''
+                            setCwd(nextCwd)
+                            setProjParent(nextCwd)
+                          }}
+                          className={chip(remoteHostId === h.id)}
+                        >
+                          <Server size={12} strokeWidth={2} className="shrink-0" />
+                          <span className="max-w-[180px] truncate">{h.label || h.sshTarget}</span>
+                        </button>
+                      ))}
+                    </div>
                   </div>
                 )}
 
@@ -1040,9 +1076,16 @@ export function EntryScreen({
                         <Input
                           value={cwd}
                           onChange={(e) => setCwd(e.target.value)}
-                          placeholder="~ (home)"
+                          placeholder={intent === 'resume' ? 'Every workspace' : '~ (home)'}
                           className="flex-1 font-mono"
                         />
+                        {/* Resume can legitimately span every repo — a new
+                            session cannot, so the escape hatch is resume-only. */}
+                        {intent === 'resume' && cwd.trim() && (
+                          <Button variant="ghost" size="sm" onClick={() => setCwd('')}>
+                            <X className="size-3.5" /> Clear
+                          </Button>
+                        )}
                       </div>
                     </div>
                   </>
@@ -1071,30 +1114,29 @@ export function EntryScreen({
               <>
                 <div>
                   <div className={sectionTitle + ' mb-1.5'}>Engine</div>
-                  <Select value={engine} onValueChange={(v) => selectEngine(v as SessionEngine)}>
-                    <SelectTrigger className="h-9 text-[13px]">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {engineOptions.map((e) => (
-                        <SelectItem key={e} value={e}>
-                          <span className="flex items-center gap-2">
-                            {e === 'local' ? (
-                              <SquareTerminal className="size-3.5" />
-                            ) : (
-                              <EngineLogo engine={e} size={14} />
-                            )}
-                            {sessionEngineLabel(e)}
-                            {e === recentEngine && (
-                              <span className="text-[9.5px] uppercase tracking-wide text-[var(--gt-accent-2)]">
-                                recent
-                              </span>
-                            )}
+                  <div className="grid grid-cols-3 gap-2">
+                    {engineOptions.map((e) => (
+                      <button
+                        key={e}
+                        onClick={() => selectEngine(e)}
+                        className={pickButton(engine === e)}
+                      >
+                        {e === 'local' ? (
+                          <SquareTerminal size={16} strokeWidth={2} className="shrink-0" />
+                        ) : (
+                          <EngineLogo engine={e} size={16} />
+                        )}
+                        <span className="min-w-0 truncate text-[12.5px] font-semibold">
+                          {sessionEngineLabel(e)}
+                        </span>
+                        {e === recentEngine && (
+                          <span className="ml-auto shrink-0 rounded-full border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[var(--gt-accent-2)]">
+                            Recent
                           </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                        )}
+                      </button>
+                    ))}
+                  </div>
                 </div>
 
                 {engine === 'openrouter' && (
@@ -1118,13 +1160,16 @@ export function EntryScreen({
                 )}
 
                 {isAiEngine(engine) ? (
-                  <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-3">
                     <div>
                       <div className={sectionTitle + ' mb-1.5'}>Model</div>
-                      <ModelSelect engine={engine} model={model} onChange={setModel} />
+                      <ModelDropdown engine={engine} model={model} onChange={setModel} />
                     </div>
                     {!(engine === 'openrouter' && openrouterHarness === 'hermes') && (
-                      <EffortSelect engine={engine} effort={effort} onChange={setEffort} />
+                      <div>
+                        <div className={sectionTitle + ' mb-1.5'}>Reasoning effort</div>
+                        <EffortDropdown engine={engine} effort={effort} onChange={setEffort} />
+                      </div>
                     )}
                   </div>
                 ) : (
@@ -1141,26 +1186,26 @@ export function EntryScreen({
                 {remoteHosts.length > 0 && (
                   <div>
                     <div className={sectionTitle + ' mb-1.5'}>Location</div>
-                    <Select
-                      value={location}
-                      onValueChange={(v) => switchLocation(v as 'local' | 'remote')}
-                    >
-                      <SelectTrigger className="h-9 text-[13px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="local">
-                          <span className="flex items-center gap-2">
-                            <FolderOpen className="size-3.5" /> Local
-                          </span>
-                        </SelectItem>
-                        <SelectItem value="remote">
-                          <span className="flex items-center gap-2">
-                            <Server className="size-3.5" /> Remote SSH
-                          </span>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <div className="grid grid-cols-2 gap-2">
+                      <button
+                        onClick={() => switchLocation('local')}
+                        className={pickButton(location === 'local')}
+                      >
+                        <FolderOpen size={16} strokeWidth={2} className="shrink-0" />
+                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                          Local
+                        </span>
+                      </button>
+                      <button
+                        onClick={() => switchLocation('remote')}
+                        className={pickButton(location === 'remote')}
+                      >
+                        <Server size={16} strokeWidth={2} className="shrink-0" />
+                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                          Remote SSH
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 )}
                 <div>
@@ -1206,22 +1251,29 @@ export function EntryScreen({
                 </div>
                 <div>
                   <div className={sectionTitle + ' mb-1.5'}>Topology</div>
-                  <Select
-                    value={loopTopology}
-                    onValueChange={(v) => setLoopTopology(v as 'paired' | 'single')}
-                  >
-                    <SelectTrigger className="h-9 text-[13px]">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="paired">
-                        Paired — two live sessions grade each other
-                      </SelectItem>
-                      <SelectItem value="single">
-                        Single — one generator + a fresh grader per turn
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
+                  <div className="grid grid-cols-2 gap-2">
+                    {(
+                      [
+                        ['paired', 'Paired', 'Two live sessions grade each other'],
+                        ['single', 'Single', 'One generator + a fresh grader per turn'],
+                      ] as const
+                    ).map(([val, label, hint]) => (
+                      <button
+                        key={val}
+                        onClick={() => setLoopTopology(val)}
+                        className={`rounded-xl border p-3 text-left transition-colors ${
+                          loopTopology === val
+                            ? 'border-primary/70 bg-primary/10'
+                            : 'border-border bg-muted/20 hover:border-primary/50'
+                        }`}
+                      >
+                        <div className="text-[12.5px] font-semibold text-foreground">{label}</div>
+                        <div className="text-[10.5px] leading-snug text-muted-foreground">
+                          {hint}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
                 </div>
               </>
             )}
@@ -1273,32 +1325,44 @@ export function EntryScreen({
             {/* ── Step · Resume ────────────────────────────────────────── */}
             {step === 'sessions' && (
               <>
-                <div className="flex items-center gap-2">
-                  <div className="min-w-0 flex-1">
-                    <Select
-                      value={resumeEngine}
-                      onValueChange={(v) => selectResumeEngine(v as Engine)}
-                    >
-                      <SelectTrigger className="h-9 text-[13px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {ENGINE_IDS.filter((e) => e !== 'openrouter').map((e) => (
-                          <SelectItem key={e} value={e}>
-                            <span className="flex items-center gap-2">
-                              <EngineLogo engine={e} size={14} /> {engineLabel(e)}
-                            </span>
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                <div>
+                  <div className={sectionTitle + ' mb-1.5'}>Engine</div>
+                  <div className="flex flex-wrap gap-1.5">
+                    {ENGINE_IDS.filter((e) => e !== 'openrouter').map((e) => (
+                      <button
+                        key={e}
+                        onClick={() => selectResumeEngine(e)}
+                        className={chip(resumeEngine === e)}
+                      >
+                        <EngineLogo engine={e} size={12} />
+                        {engineLabel(e)}
+                      </button>
+                    ))}
                   </div>
-                  <span className="shrink-0 text-[10.5px] text-muted-foreground">
-                    {resumeCountLabel}
-                  </span>
+                </div>
+                {/* What the list is scoped to — the workspace step's answer. */}
+                <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                  <FolderOpen size={12} strokeWidth={2} className="shrink-0" />
+                  {resumeDir ? (
+                    <>
+                      <span className="min-w-0 truncate font-mono text-foreground/80">
+                        {tilde(resumeDir)}
+                      </span>
+                      <button
+                        onClick={() => setCwd('')}
+                        className="shrink-0 underline-offset-2 hover:text-foreground hover:underline"
+                      >
+                        show every workspace
+                      </button>
+                    </>
+                  ) : (
+                    <span>Every workspace</span>
+                  )}
+                  <span className="ml-auto shrink-0 text-[10.5px]">{resumeCountLabel}</span>
                   <Button
                     variant="secondary"
                     size="xs"
+                    className="shrink-0"
                     onClick={() => loadEngineSessions(resumeEngine, true)}
                     disabled={isLoadingThisEngine}
                   >
@@ -1342,7 +1406,9 @@ export function EntryScreen({
                   <div className="rounded-xl border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
                     {sessionSearch.trim()
                       ? 'No sessions match that search.'
-                      : `No prior ${engineLabel(resumeEngine)} sessions found.`}
+                      : resumeDir
+                        ? `No prior ${engineLabel(resumeEngine)} sessions in ${tilde(resumeDir)}.`
+                        : `No prior ${engineLabel(resumeEngine)} sessions found.`}
                   </div>
                 ) : (
                   <div className="space-y-1.5">
diff --git a/src/renderer/src/components/ModelSelect.tsx b/src/renderer/src/components/ModelSelect.tsx
index 7fb7df5e..c69b63c1 100644
--- a/src/renderer/src/components/ModelSelect.tsx
+++ b/src/renderer/src/components/ModelSelect.tsx
@@ -1,5 +1,102 @@
 import type { Engine } from '../lib/types'
 import { ENGINE_MODELS, engineAllowsCustomModel, engineEffortsOf } from '../lib/engines'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+// The dropdown pair below is the COMPACT form of the two pickers in this file,
+// for surfaces where model + effort are one field each in a longer form (the
+// entry wizard). Same data source, so a newly registered model shows up in both
+// forms at once. `DEFAULT_VALUE` stands in for `undefined` because Radix Select
+// treats an empty string as "no value" and would render the placeholder for a
+// deliberate "use the engine default" choice.
+const DEFAULT_VALUE = '__default__'
+
+/** Model as a dropdown. For engines that take an arbitrary slug (OpenRouter)
+ *  the free-text field stays — a menu can't enumerate every model. */
+export function ModelDropdown({
+  engine,
+  model,
+  onChange,
+}: {
+  engine: Engine
+  model: string | undefined
+  onChange: (model: string | undefined) => void
+}) {
+  const models = ENGINE_MODELS[engine] ?? []
+  const custom = engineAllowsCustomModel(engine)
+  const knownIds = new Set(models.map((m) => m.id))
+  const customActive = custom && !!model && !knownIds.has(model)
+  return (
+    <div className="space-y-2">
+      <Select
+        value={customActive ? DEFAULT_VALUE : (model ?? DEFAULT_VALUE)}
+        onValueChange={(v) => onChange(v === DEFAULT_VALUE ? undefined : v)}
+      >
+        <SelectTrigger className="h-9 text-[13px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={DEFAULT_VALUE}>Default</SelectItem>
+          {models.map((m) => (
+            <SelectItem key={m.id} value={m.id}>
+              {m.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {custom && (
+        <input
+          value={model ?? ''}
+          onChange={(e) => onChange(e.target.value.trim() || undefined)}
+          placeholder="…or any slug from openrouter.ai/models"
+          spellCheck={false}
+          autoComplete="off"
+          className={`w-full rounded-lg border bg-black/30 px-2.5 py-2 font-mono text-[12px] text-zinc-200 outline-none ${
+            customActive ? 'border-[var(--gt-accent)]/70' : 'border-[var(--gt-border)]'
+          } focus:border-[var(--gt-accent)]/60`}
+        />
+      )}
+    </div>
+  )
+}
+
+/** Reasoning effort as a dropdown. Renders nothing for engines without an
+ *  effort control, so callers can always include it. */
+export function EffortDropdown({
+  engine,
+  effort,
+  onChange,
+}: {
+  engine: Engine
+  effort: string | undefined
+  onChange: (effort: string | undefined) => void
+}) {
+  const levels = engineEffortsOf(engine)
+  if (!levels.length) return null
+  return (
+    <Select
+      value={effort ?? DEFAULT_VALUE}
+      onValueChange={(v) => onChange(v === DEFAULT_VALUE ? undefined : v)}
+    >
+      <SelectTrigger className="h-9 text-[13px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={DEFAULT_VALUE}>Default</SelectItem>
+        {levels.map((l) => (
+          <SelectItem key={l} value={l}>
+            {l}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
 
 // A full model-selection surface (its own step/screen), not a cramped dropdown.
 // Renders a "default" card plus each of the engine's models as selectable cards.

From 0d2f4391594d8d1d6e9555d6014264df1ec6cd6b Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Tue, 18 Aug 2026 17:43:21 -0700
Subject: [PATCH 08/11] =?UTF-8?q?feat(ux):=20no=20auto-advance=20=E2=80=94?=
 =?UTF-8?q?=20every=20wizard=20step=20waits=20for=20Next?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting an option on the entry screen no longer jumps to the next
step. Intent cards, workspace chips, and the folder browser now only
SELECT; the explicit Next button is the sole way forward.

The optimistic-advance helper is removed entirely rather than left
unused — no call site remains that wants it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RYiGxmeqKxR4H1NHGmf6vT
---
 src/renderer/src/components/EntryScreen.tsx | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index 619ac48e..6598d87d 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -545,8 +545,6 @@ export function EntryScreen({
     const dir = await window.gt.pickDir()
     if (!dir) return
     selectWorkspace(dir)
-    // Confirming a folder in the native dialog is as decisive as a chip click.
-    advance()
   }
 
   // openrouter is one-shot with no resumable local store — hide its resume list.
@@ -684,13 +682,6 @@ export function EntryScreen({
   const stepNumber = steps.indexOf(step) + 1
   const back = () => setStepIndex((i) => Math.max(0, i - 1))
   const next = () => setStepIndex((i) => Math.min(steps.length - 1, i + 1))
-  /** Optimistic advance: a click that FULLY answers the step moves straight on,
-   *  so the common path needs no Next at all. Reserved for one-click answers
-   *  (the intent cards, a workspace chip, a picked folder) — never for a step
-   *  that still has fields the user may reasonably want to touch, like the
-   *  engine step's engine + model + effort trio. Every step stays reachable
-   *  from the rail, so an over-eager advance costs one click to undo. */
-  const advance = next
   // Changing the intent re-derives the steps; never strand the user past the end.
   useEffect(() => {
     setStepIndex((i) => Math.min(i, steps.length - 1))
@@ -764,10 +755,7 @@ export function EntryScreen({
         }`}
       >
         <button
-          onClick={() => {
-            selectWorkspace(r)
-            advance()
-          }}
+          onClick={() => selectWorkspace(r)}
           className="inline-flex min-w-0 items-center gap-1.5 text-left"
         >
           {isSelected ? (
@@ -885,10 +873,7 @@ export function EntryScreen({
                 {intentOptions.map(({ id, label, hint, icon: Icon }) => (
                   <button
                     key={id}
-                    onClick={() => {
-                      selectIntent(id)
-                      advance()
-                    }}
+                    onClick={() => selectIntent(id)}
                     className={`flex items-start gap-2.5 rounded-xl border p-3 text-left transition-colors ${
                       intent === id
                         ? 'border-primary/70 bg-primary/10'

From f9b0a8a32066e8e5d4ca700c797a100b0572c9d0 Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Tue, 18 Aug 2026 17:49:55 -0700
Subject: [PATCH 09/11] fix(ux): browser handoff walks a chain; right-click
 keeps the selection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two separate flakiness reports, two root causes.

Links: openInApp registered both an 'error' and an 'exit' handler, and a
failed spawn fires BOTH — exiting with a null code, which is != 0. One
failure therefore ran the fallback twice and opened the URL twice. A
settled latch now makes the outcome fire once.

The handoff also resolved to a single app: a configured browser missing
on THIS machine bailed straight to the OS default, so Chrome and Safari
were never tried. resolvedBrowserApps returns the configured app followed
by every installed browser, and openInApp walks it before falling back.

Copy: xterm defaults rightClickSelectsWord ON for macOS, and mousedown
beats contextmenu — right-clicking outside a selection replaced it with
the word under the cursor, so the menu's Copy took the wrong text. Off.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RYiGxmeqKxR4H1NHGmf6vT
---
 src/main/apps.ts                         |  5 +++++
 src/main/ipc/system.ts                   | 25 ++++++++++++++++++------
 src/main/settings.ts                     | 11 ++++++++++-
 src/renderer/src/components/Terminal.tsx |  5 +++++
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/main/apps.ts b/src/main/apps.ts
index fdf06b15..f3eba225 100644
--- a/src/main/apps.ts
+++ b/src/main/apps.ts
@@ -39,3 +39,8 @@ export function detectApps(): { editors: string[]; browsers: string[] } {
  *  Used as the default handoff target before falling back to a hardcoded app. */
 export const firstInstalledEditor = (): string => EDITOR_APPS.find(appInstalled) || ''
 export const firstInstalledBrowser = (): string => BROWSER_APPS.find(appInstalled) || ''
+
+/** Every installed browser, in preference order. The handoff walks this as a
+ *  chain so a configured browser that is missing on THIS machine falls through
+ *  to the next real one instead of straight to the OS default. */
+export const installedBrowsers = (): string[] => BROWSER_APPS.filter(appInstalled)
diff --git a/src/main/ipc/system.ts b/src/main/ipc/system.ts
index 9a40d173..9a506249 100644
--- a/src/main/ipc/system.ts
+++ b/src/main/ipc/system.ts
@@ -23,7 +23,7 @@ import { repoRootOf } from '../repo'
 import { resolveWithinAny } from '../path-guard'
 import { isExternallyOpenableUrl } from '../../shared/url-safety'
 import {
-  resolvedBrowserApp,
+  resolvedBrowserApps,
   resolvedEditorApp,
   resolvedProjectsDir,
   resolvedWorktreesDir,
@@ -116,15 +116,28 @@ export function registerSystemIpc(deps: SystemIpcDeps): void {
   })
   // Hand a target to a configured external app via `open -a <App>` (robust, no
   // PATH/CLI dependency), falling back to the OS default if the app isn't there.
-  function openInApp(appName: string, target: string, fallback: () => void) {
+  // Walks a candidate chain, best app first, and only reaches `fallback` once
+  // every candidate has failed. `error` and `exit` can BOTH fire for a single
+  // failed spawn (a failed spawn exits with a null code, which is != 0), so the
+  // settled latch is what stops one failure opening the target twice.
+  function openInApp(candidates: string | string[], target: string, fallback: () => void) {
+    const [appName, ...rest] = typeof candidates === 'string' ? [candidates] : candidates
+    if (!appName) return fallback()
+    let settled = false
+    const advance = () => {
+      if (settled) return
+      settled = true
+      openInApp(rest, target, fallback)
+    }
     try {
       const p = cpSpawn('open', ['-a', appName, target], { stdio: 'ignore' })
-      p.on('error', fallback)
+      p.on('error', advance)
       p.on('exit', (code) => {
-        if (code !== 0) fallback()
+        if (code === 0) settled = true
+        else advance()
       })
     } catch {
-      fallback()
+      advance()
     }
   }
   // "Open in browser" — the configured browser (default Brave) with its extensions/wallet.
@@ -133,7 +146,7 @@ export function registerSystemIpc(deps: SystemIpcDeps): void {
   // simply a second, unguarded way to reach an OS protocol handler.
   handle('open:in-browser', (_e, url: string) => {
     if (!isExternallyOpenableUrl(url)) return openExternalSafe(url)
-    openInApp(resolvedBrowserApp(), url, () => openExternalSafe(url))
+    openInApp(resolvedBrowserApps(), url, () => openExternalSafe(url))
   })
   // "Open in editor" — the configured editor (default Cursor). Opens a path; defaults
   // to the active session's repo root. Renderer-supplied paths are constrained to
diff --git a/src/main/settings.ts b/src/main/settings.ts
index 19a51ae4..fd69ce8e 100644
--- a/src/main/settings.ts
+++ b/src/main/settings.ts
@@ -4,7 +4,7 @@ import { join, dirname } from 'node:path'
 import { homedir } from 'node:os'
 import { quarantineCorruptFile, readJsonState, withFileLock, writeFileAtomic } from './atomic-write'
 import { configPath } from './config-dir'
-import { firstInstalledEditor, firstInstalledBrowser } from './apps'
+import { firstInstalledEditor, firstInstalledBrowser, installedBrowsers } from './apps'
 import { DEFAULT_BRIDGE_PORT } from './bridge/identity'
 import {
   NOTIFY_CATEGORIES,
@@ -935,3 +935,12 @@ export const resolvedEditorApp = () =>
   readSettings().apps.editor || firstInstalledEditor() || DEFAULT_EDITOR
 export const resolvedBrowserApp = () =>
   readSettings().apps.browser || firstInstalledBrowser() || DEFAULT_BROWSER
+/** The browser handoff's full candidate chain, best first: the configured app,
+ *  then every other installed browser. The configured app leads even when we
+ *  can't see it in /Applications — it may live somewhere we don't scan — but a
+ *  machine that simply doesn't have it now falls through to a browser it DOES
+ *  have instead of bailing to the OS default. */
+export const resolvedBrowserApps = (): string[] => {
+  const chain = [...new Set([readSettings().apps.browser, ...installedBrowsers()].filter(Boolean))]
+  return chain.length ? chain : [DEFAULT_BROWSER]
+}
diff --git a/src/renderer/src/components/Terminal.tsx b/src/renderer/src/components/Terminal.tsx
index 20a77b89..e26d87ef 100644
--- a/src/renderer/src/components/Terminal.tsx
+++ b/src/renderer/src/components/Terminal.tsx
@@ -388,6 +388,11 @@ export function TerminalPane({
       linkHandler: {
         activate: (_e, uri) => void window.gt.openInBrowser(uri),
       },
+      // xterm defaults this ON for macOS: right-clicking OUTSIDE an existing
+      // selection replaces it with the word under the cursor, and mousedown
+      // beats contextmenu — so the menu that opens has already destroyed what
+      // the user meant to copy. Off, a right-click leaves the selection alone.
+      rightClickSelectsWord: false,
       minimumContrastRatio: 4.5,
       scrollback: 10000,
       theme: xtermThemeFromCss(),

From d5c9c292f4fa103870a1489d70cf2b634a9458a1 Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Tue, 18 Aug 2026 17:59:22 -0700
Subject: [PATCH 10/11] feat(ux): ask which workspace before what to do in it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Step 1 mixed two questions. "New session / Resume / Scratch / New repo"
is really WHERE the work happens (existing repo, a fresh scaffold, a
scratch dir) crossed with WHAT to do there (new session, resume, loop),
so the wizard made you commit to an action before you knew the repo —
and it offered Resume for a scratch dir that can never have one.

Split the axes. `target` is asked first and decides which actions even
exist; `action` follows, and only an existing repo shows it. The rest of
the screen still reads one derived `intent`, so steps, summary, and the
launch buttons are unchanged.

The scaffold form folds into the workspace step it belongs to, which
retires the separate Project step.

Covered by tests/ux/entry-wizard.spec.ts against the real app, including
a guard that selecting a target does not advance the step by itself.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RYiGxmeqKxR4H1NHGmf6vT
---
 src/main/loops-experiment.test.ts           |   6 +-
 src/renderer/src/components/EntryScreen.tsx | 619 +++++++++++---------
 tests/ux/entry-wizard.spec.ts               |  53 ++
 3 files changed, 401 insertions(+), 277 deletions(-)
 create mode 100644 tests/ux/entry-wizard.spec.ts

diff --git a/src/main/loops-experiment.test.ts b/src/main/loops-experiment.test.ts
index 129e997b..083f0c64 100644
--- a/src/main/loops-experiment.test.ts
+++ b/src/main/loops-experiment.test.ts
@@ -54,12 +54,12 @@ describe('the gate is wired where it matters', () => {
   test('the EntryScreen loop affordance is behind useExperiment', () => {
     const src = read('src/renderer/src/components/EntryScreen.tsx')
     expect(src).toContain("useExperiment('loops')")
-    // The intent select must not offer 'loop' when the flag is off: the option
+    // The action select must not offer 'loop' when the flag is off: the option
     // list filters on loopsOn…
-    expect(src).toContain("i.id !== 'loop' || loopsOn")
+    expect(src).toContain("a.id !== 'loop' || loopsOn")
     // …and flipping the flag off mid-session must not strand the screen in a
     // loop form whose launch button main would refuse.
-    expect(src).toMatch(/if \(!loopsOn\) setIntent\(/)
+    expect(src).toMatch(/if \(!loopsOn\) setAction\(/)
   })
 
   test('the renderer consumes stop and state — every startable loop is stoppable', () => {
diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index 6598d87d..b88b95f2 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -193,16 +193,33 @@ const readLastEngine = (): SessionEngine | null => {
   }
 }
 
-/** What the user is launching. Picked in step 1 as a select — one wizard, not
- *  four parallel tabs, so every path answers one question per step. */
+/** WHERE the work happens. Answered first, because every other question —
+ *  including whether "resume" is even on the table — depends on it. */
+type Target = 'existing' | 'repo' | 'scratch'
+/** WHAT to do once the workspace is known. Only an existing repo offers all
+ *  three; a fresh scaffold and a scratch dir have nothing to resume into. */
+type Action = 'new' | 'resume' | 'loop'
+/** The two axes collapsed back into the single value the rest of the screen
+ *  (steps, summary, launch) is written against. */
 type Intent = 'new' | 'resume' | 'loop' | 'scratch' | 'repo'
-const INTENTS: { id: Intent; label: string; hint: string; icon: typeof SquareTerminal }[] = [
+
+const TARGETS: { id: Target; label: string; hint: string; icon: typeof SquareTerminal }[] = [
+  {
+    id: 'existing',
+    label: 'Existing repo',
+    hint: 'Work in a repo you already have.',
+    icon: FolderOpen,
+  },
   {
-    id: 'new',
-    label: 'New session',
-    hint: 'Pick a workspace and start an agent in it.',
-    icon: SquareTerminal,
+    id: 'repo',
+    label: 'New repo',
+    hint: 'Scaffold a project from your template.',
+    icon: FolderPlus,
   },
+  { id: 'scratch', label: 'Scratch', hint: 'Throwaway — no repo attached.', icon: Zap },
+]
+const ACTIONS: { id: Action; label: string; hint: string; icon: typeof SquareTerminal }[] = [
+  { id: 'new', label: 'New session', hint: 'Start an agent in this repo.', icon: SquareTerminal },
   { id: 'resume', label: 'Resume a session', hint: 'Pick up a prior session.', icon: RefreshCw },
   {
     id: 'loop',
@@ -210,21 +227,13 @@ const INTENTS: { id: Intent; label: string; hint: string; icon: typeof SquareTer
     hint: 'Two agents grade each other until the goal is met.',
     icon: Repeat,
   },
-  { id: 'scratch', label: 'Scratch session', hint: 'Throwaway — no repo attached.', icon: Zap },
-  {
-    id: 'repo',
-    label: 'New repo',
-    hint: 'Scaffold a project from your template, then open it.',
-    icon: FolderPlus,
-  },
 ]
 
-type StepId = 'start' | 'workspace' | 'model' | 'project' | 'goal' | 'roles' | 'sessions' | 'review'
+type StepId = 'workspace' | 'action' | 'model' | 'goal' | 'roles' | 'sessions' | 'review'
 const STEP_TITLE: Record<StepId, string> = {
-  start: 'Start',
   workspace: 'Workspace',
+  action: 'Action',
   model: 'Model',
-  project: 'Project',
   goal: 'Goal',
   roles: 'Agents',
   sessions: 'Session',
@@ -258,14 +267,23 @@ export function EntryScreen({
   // Top-level intent: which of the launch actions the user is composing. It is
   // the first field of the wizard (a select), not a tab bar — every intent runs
   // through the same one-question-per-step form.
-  const [intent, setIntent] = useState<Intent>(initialMode === 'loop' ? 'loop' : 'new')
+  // Split across the two axes the old single list conflated: `target` is WHERE
+  // (asked first — it decides which actions even exist), `action` is WHAT.
+  const [target, setTarget] = useState<Target>('existing')
+  const [action, setAction] = useState<Action>(initialMode === 'loop' ? 'loop' : 'new')
+  // Everything downstream still reads one value. A non-repo target has no
+  // action of its own — there is nothing to resume or loop over.
+  const intent: Intent = target === 'existing' ? action : target
   // Index into `steps` (derived from the intent below).
   const [stepIndex, setStepIndex] = useState(0)
-  useEffect(() => setIntent(initialMode === 'loop' ? 'loop' : 'new'), [initialMode])
+  useEffect(() => {
+    setTarget('existing')
+    setAction(initialMode === 'loop' ? 'loop' : 'new')
+  }, [initialMode])
   // Flipping the flag off while the screen sits in loop mode must not leave a
   // loop form on screen with a launch button main would reject.
   useEffect(() => {
-    if (!loopsOn) setIntent((i) => (i === 'loop' ? 'new' : i))
+    if (!loopsOn) setAction((a) => (a === 'loop' ? 'new' : a))
   }, [loopsOn])
   // Live-paired loop fields (mode === 'loop').
   const [goal, setGoal] = useState('')
@@ -451,10 +469,16 @@ export function EntryScreen({
     setVisibleSessionCount(SESSION_PAGE_SIZE)
     if (next !== 'openrouter') loadEngineSessions(next)
   }
-  const selectIntent = (next: Intent) => {
-    setIntent(next)
+  const selectTarget = (next: Target) => {
+    setTarget(next)
     setLoopErr('')
     setScaffoldErr('')
+    // Only an existing repo can be resumed into or looped over.
+    if (next !== 'existing') setAction('new')
+  }
+  const selectAction = (next: Action) => {
+    setAction(next)
+    setLoopErr('')
     // Loops run in a local git worktree — remote daemons aren't supported.
     if (next === 'loop' && location === 'remote') switchLocation('local')
     if (next === 'resume' && isAiEngine(resumeEngine) && resumeEngine !== 'openrouter') {
@@ -659,25 +683,29 @@ export function EntryScreen({
         : '~'
 
   // ── Wizard ───────────────────────────────────────────────────────────────
-  // One question per step. The step list is derived from the intent, so an
-  // intent that needs no workspace (scratch) or no model (resume) never shows
-  // that step at all.
-  const intentOptions = INTENTS.filter(
-    (i) =>
-      (i.id !== 'loop' || loopsOn) &&
-      (!lockedCwd || i.id === 'new' || i.id === 'resume' || i.id === 'loop'),
-  )
+  // Workspace FIRST, then what to do in it. The old single "start" list mixed
+  // the two, so you had to commit to "new session" before knowing the repo —
+  // and it offered Resume for a scratch dir that can never have one.
+  // A locked repo answers the workspace question already, so the target picker
+  // (and the scaffold/scratch options it carries) has nothing left to ask.
+  const targetOptions = lockedCwd ? [] : TARGETS
+  const actionOptions = ACTIONS.filter((a) => a.id !== 'loop' || loopsOn)
   const steps: StepId[] = useMemo(() => {
-    // Resume gets a workspace step too — the session list is long enough that
-    // "which repo" is the first thing you actually filter by.
-    if (intent === 'resume')
-      return lockedCwd ? ['start', 'sessions'] : ['start', 'workspace', 'sessions']
-    if (intent === 'scratch') return ['start', 'model', 'review']
-    if (intent === 'repo') return ['start', 'project', 'model', 'review']
-    if (intent === 'loop')
-      return lockedCwd ? ['start', 'goal', 'roles'] : ['start', 'workspace', 'goal', 'roles']
-    return lockedCwd ? ['start', 'model', 'review'] : ['start', 'workspace', 'model', 'review']
-  }, [intent, lockedCwd])
+    const tail: StepId[] =
+      intent === 'resume'
+        ? ['sessions']
+        : intent === 'loop'
+          ? ['goal', 'roles']
+          : ['model', 'review']
+    // A locked repo skips the workspace step; every other path opens on it.
+    // The action step only earns its place when more than one action applies.
+    const head: StepId[] = lockedCwd
+      ? ['action']
+      : target === 'existing'
+        ? ['workspace', 'action']
+        : ['workspace']
+    return [...head, ...tail]
+  }, [intent, target, lockedCwd])
   const step = steps[Math.min(stepIndex, steps.length - 1)]
   const stepNumber = steps.indexOf(step) + 1
   const back = () => setStepIndex((i) => Math.max(0, i - 1))
@@ -690,7 +718,7 @@ export function EntryScreen({
   // up to (and including) the FIRST such step is reachable, so the rail can be
   // clicked forward as well as back — you don't have to walk through Next.
   const stepBlocked = (s: StepId) =>
-    (s === 'project' && !projName.trim()) ||
+    (s === 'workspace' && target === 'repo' && !projName.trim()) ||
     (s === 'goal' && !goal.trim()) ||
     (s === 'workspace' && intent === 'loop' && !loopRepoRoot)
   const firstBlocked = steps.findIndex(stepBlocked)
@@ -706,6 +734,14 @@ export function EntryScreen({
           ? 'cursor-not-allowed border-[var(--gt-border)] bg-black/10 text-zinc-700'
           : 'border-[var(--gt-border)] bg-black/20 text-zinc-400 hover:border-[var(--gt-accent)]/50 hover:text-zinc-200'
     }`
+  /** A big pick-one card: icon, label, hint. Shared by the two axes so the
+   *  workspace targets and the actions read as the same kind of choice. */
+  const optionCard = (active: boolean) =>
+    `flex items-start gap-2.5 rounded-xl border p-3 text-left transition-colors ${
+      active
+        ? 'border-primary/70 bg-primary/10'
+        : 'border-border bg-muted/20 hover:border-primary/50'
+    }`
   /** Compact inline option — the small-scale sibling of pickButton. Used where
    *  the whole option set fits on one row (hosts, resume engines). */
   const chip = (active: boolean) =>
@@ -716,13 +752,12 @@ export function EntryScreen({
     }`
 
   const STEP_COPY: Record<StepId, { title: string; hint: string }> = {
-    start: { title: 'What do you want to do?', hint: 'Everything else follows from this.' },
     workspace: {
       title: 'Which workspace?',
-      hint: 'Pick a repo — nothing launches until the last step.',
+      hint: 'Where the work happens — nothing launches until the last step.',
     },
+    action: { title: 'What do you want to do here?', hint: 'Scoped to the workspace above.' },
     model: { title: 'Which model?', hint: 'Engine first, then the model it runs.' },
-    project: { title: 'Name the new project', hint: 'Cloned from your template repo.' },
     goal: {
       title: 'What should the loop converge on?',
       hint: 'The driver turns this into a gradable contract.',
@@ -867,22 +902,18 @@ export function EntryScreen({
             <p className="text-[11px] text-muted-foreground">{stepHint}</p>
           </CardHeader>
           <CardContent className="space-y-3 pt-3">
-            {/* ── Step · Start ─────────────────────────────────────────── */}
-            {step === 'start' && (
+            {/* ── Step · Action ────────────────────────────────────────── */}
+            {step === 'action' && (
               <div className="grid grid-cols-2 gap-2">
-                {intentOptions.map(({ id, label, hint, icon: Icon }) => (
+                {actionOptions.map(({ id, label, hint, icon: Icon }) => (
                   <button
                     key={id}
-                    onClick={() => selectIntent(id)}
-                    className={`flex items-start gap-2.5 rounded-xl border p-3 text-left transition-colors ${
-                      intent === id
-                        ? 'border-primary/70 bg-primary/10'
-                        : 'border-border bg-muted/20 hover:border-primary/50'
-                    }`}
+                    onClick={() => selectAction(id)}
+                    className={optionCard(action === id)}
                   >
                     <Icon
                       className={`mt-0.5 size-4 shrink-0 ${
-                        intent === id ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground'
+                        action === id ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground'
                       }`}
                     />
                     <span className="min-w-0">
@@ -901,196 +932,293 @@ export function EntryScreen({
             {/* ── Step · Workspace ─────────────────────────────────────── */}
             {step === 'workspace' && (
               <>
-                {/* Resume reads local transcript stores, so it has no remote
-                    dimension — only "which repo". */}
-                {intent !== 'loop' && intent !== 'resume' && (
+                {targetOptions.length > 0 && (
                   <div>
-                    <div className={sectionTitle + ' mb-1.5'}>Location</div>
-                    <div className="grid grid-cols-2 gap-2">
-                      <button
-                        onClick={() => switchLocation('local')}
-                        className={pickButton(location === 'local')}
-                      >
-                        <FolderOpen size={16} strokeWidth={2} className="shrink-0" />
-                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
-                          Local
-                        </span>
-                      </button>
-                      <button
-                        onClick={() => switchLocation('remote')}
-                        disabled={remoteHosts.length === 0}
-                        className={pickButton(location === 'remote', remoteHosts.length === 0)}
-                      >
-                        <Server size={16} strokeWidth={2} className="shrink-0" />
-                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
-                          Remote SSH
-                        </span>
-                      </button>
-                    </div>
-                    {remoteHosts.length === 0 && (
-                      <div className="mt-1.5 text-[10.5px] text-muted-foreground">
-                        SSH profiles are configured in Settings → SSH Hosts.
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {location === 'remote' && remoteHosts.length > 0 && (
-                  <div>
-                    <div className={sectionTitle + ' mb-1.5'}>Host</div>
-                    <div className="flex flex-wrap gap-1.5">
-                      {remoteHosts.map((h) => (
+                    <div className={sectionTitle + ' mb-1.5'}>Target</div>
+                    <div className="grid grid-cols-3 gap-2">
+                      {targetOptions.map(({ id, label, hint, icon: Icon }) => (
                         <button
-                          key={h.id}
-                          onClick={() => {
-                            setRemoteHostId(h.id)
-                            const nextCwd = h.defaultCwd || h.daemon.projectsDir || ''
-                            setCwd(nextCwd)
-                            setProjParent(nextCwd)
-                          }}
-                          className={chip(remoteHostId === h.id)}
+                          key={id}
+                          onClick={() => selectTarget(id)}
+                          className={optionCard(target === id)}
                         >
-                          <Server size={12} strokeWidth={2} className="shrink-0" />
-                          <span className="max-w-[180px] truncate">{h.label || h.sshTarget}</span>
+                          <Icon
+                            className={`mt-0.5 size-4 shrink-0 ${
+                              target === id ? 'text-[var(--gt-accent-2)]' : 'text-muted-foreground'
+                            }`}
+                          />
+                          <span className="min-w-0">
+                            <span className="block text-[12.5px] font-semibold text-foreground">
+                              {label}
+                            </span>
+                            <span className="block text-[10.5px] leading-snug text-muted-foreground">
+                              {hint}
+                            </span>
+                          </span>
                         </button>
                       ))}
                     </div>
                   </div>
                 )}
 
-                {location === 'remote' ? (
-                  <div className="rounded-lg border border-border bg-muted/20">
-                    <div className="flex items-center gap-1.5 border-b border-border p-2">
-                      <Input
-                        value={cwd}
-                        onChange={(e) => setCwd(e.target.value)}
-                        onKeyDown={(e) => e.key === 'Enter' && loadRemoteDir(cwd, { select: true })}
-                        placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
-                        className="border-0 bg-transparent font-mono shadow-none focus-visible:ring-0"
-                      />
-                      <button
-                        onClick={() => loadRemoteDir('~', { select: true })}
-                        title="Remote home"
-                        className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
-                      >
-                        <Home size={13} strokeWidth={2} />
-                      </button>
-                      <button
-                        onClick={() =>
-                          remoteListing?.parent &&
-                          loadRemoteDir(remoteListing.parent, { select: true })
-                        }
-                        disabled={!remoteListing?.parent}
-                        title="Parent folder"
-                        className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground disabled:opacity-35"
-                      >
-                        <ArrowUp size={13} strokeWidth={2} />
-                      </button>
-                      <button
-                        onClick={() =>
-                          loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })
-                        }
-                        title="Refresh"
-                        className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
-                      >
-                        <RefreshCw
-                          size={13}
-                          strokeWidth={2}
-                          className={remoteListingLoading ? 'animate-spin' : ''}
+                {target === 'scratch' && (
+                  <p className="text-[11.5px] text-muted-foreground">
+                    A throwaway session in the app-owned scratch dir. No repo, nothing to file away.
+                  </p>
+                )}
+
+                {target === 'repo' && (
+                  <>
+                    {remoteHosts.length > 0 && (
+                      <div>
+                        <div className={sectionTitle + ' mb-1.5'}>Location</div>
+                        <div className="grid grid-cols-2 gap-2">
+                          <button
+                            onClick={() => switchLocation('local')}
+                            className={pickButton(location === 'local')}
+                          >
+                            <FolderOpen size={16} strokeWidth={2} className="shrink-0" />
+                            <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                              Local
+                            </span>
+                          </button>
+                          <button
+                            onClick={() => switchLocation('remote')}
+                            className={pickButton(location === 'remote')}
+                          >
+                            <Server size={16} strokeWidth={2} className="shrink-0" />
+                            <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                              Remote SSH
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                    <div>
+                      <div className={sectionTitle + ' mb-1.5'}>Name</div>
+                      <div className="flex items-center gap-2">
+                        <Input
+                          value={projName}
+                          onChange={(e) => {
+                            setProjName(e.target.value)
+                            setScaffoldErr('')
+                          }}
+                          placeholder="project-name"
+                          className="flex-1 font-mono"
                         />
-                      </button>
+                        <Button
+                          variant="secondary"
+                          onClick={pickParent}
+                          title="Choose parent directory"
+                        >
+                          {location === 'remote' ? (
+                            <Server size={13} strokeWidth={2} />
+                          ) : (
+                            <FolderOpen size={13} strokeWidth={2} />
+                          )}
+                          <span className="max-w-[180px] truncate">{projectParentLabel}</span>
+                        </Button>
+                      </div>
                     </div>
-                    <div className="max-h-44 overflow-y-auto p-1.5">
-                      {remoteListingLoading && !remoteListing ? (
-                        <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-muted-foreground">
-                          <RefreshCw size={12} strokeWidth={2} className="animate-spin" /> Loading
-                          folders…
-                        </div>
-                      ) : remoteListingErr ? (
-                        <div className="px-2 py-3 text-[11px] text-destructive">
-                          {remoteListingErr}
+                  </>
+                )}
+
+                {target === 'existing' && (
+                  <>
+                    <div>
+                      <div className={sectionTitle + ' mb-1.5'}>Location</div>
+                      <div className="grid grid-cols-2 gap-2">
+                        <button
+                          onClick={() => switchLocation('local')}
+                          className={pickButton(location === 'local')}
+                        >
+                          <FolderOpen size={16} strokeWidth={2} className="shrink-0" />
+                          <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                            Local
+                          </span>
+                        </button>
+                        <button
+                          onClick={() => switchLocation('remote')}
+                          disabled={remoteHosts.length === 0}
+                          className={pickButton(location === 'remote', remoteHosts.length === 0)}
+                        >
+                          <Server size={16} strokeWidth={2} className="shrink-0" />
+                          <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
+                            Remote SSH
+                          </span>
+                        </button>
+                      </div>
+                      {remoteHosts.length === 0 && (
+                        <div className="mt-1.5 text-[10.5px] text-muted-foreground">
+                          SSH profiles are configured in Settings → SSH Hosts.
                         </div>
-                      ) : remoteListing && remoteListing.entries.length === 0 ? (
-                        <div className="px-2 py-3 text-[11px] text-muted-foreground">
-                          No child folders.
+                      )}
+                    </div>
+
+                    {location === 'remote' && remoteHosts.length > 0 && (
+                      <div>
+                        <div className={sectionTitle + ' mb-1.5'}>Host</div>
+                        <div className="flex flex-wrap gap-1.5">
+                          {remoteHosts.map((h) => (
+                            <button
+                              key={h.id}
+                              onClick={() => {
+                                setRemoteHostId(h.id)
+                                const nextCwd = h.defaultCwd || h.daemon.projectsDir || ''
+                                setCwd(nextCwd)
+                                setProjParent(nextCwd)
+                              }}
+                              className={chip(remoteHostId === h.id)}
+                            >
+                              <Server size={12} strokeWidth={2} className="shrink-0" />
+                              <span className="max-w-[180px] truncate">
+                                {h.label || h.sshTarget}
+                              </span>
+                            </button>
+                          ))}
                         </div>
-                      ) : (
-                        remoteListing?.entries.map((d) => (
+                      </div>
+                    )}
+
+                    {location === 'remote' ? (
+                      <div className="rounded-lg border border-border bg-muted/20">
+                        <div className="flex items-center gap-1.5 border-b border-border p-2">
+                          <Input
+                            value={cwd}
+                            onChange={(e) => setCwd(e.target.value)}
+                            onKeyDown={(e) =>
+                              e.key === 'Enter' && loadRemoteDir(cwd, { select: true })
+                            }
+                            placeholder={remoteHost?.defaultCwd || '~ (remote home)'}
+                            className="border-0 bg-transparent font-mono shadow-none focus-visible:ring-0"
+                          />
+                          <button
+                            onClick={() => loadRemoteDir('~', { select: true })}
+                            title="Remote home"
+                            className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                          >
+                            <Home size={13} strokeWidth={2} />
+                          </button>
+                          <button
+                            onClick={() =>
+                              remoteListing?.parent &&
+                              loadRemoteDir(remoteListing.parent, { select: true })
+                            }
+                            disabled={!remoteListing?.parent}
+                            title="Parent folder"
+                            className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground disabled:opacity-35"
+                          >
+                            <ArrowUp size={13} strokeWidth={2} />
+                          </button>
                           <button
-                            key={d.path}
-                            onClick={() => loadRemoteDir(d.path, { select: true })}
-                            className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-foreground/80 hover:bg-muted"
+                            onClick={() =>
+                              loadRemoteDir(cwd || remoteListing?.cwd || '~', { select: true })
+                            }
+                            title="Refresh"
+                            className="rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/50 hover:text-foreground"
                           >
-                            <FolderOpen
+                            <RefreshCw
                               size={13}
                               strokeWidth={2}
-                              className="shrink-0 text-muted-foreground"
+                              className={remoteListingLoading ? 'animate-spin' : ''}
                             />
-                            <span className="truncate">{d.name}</span>
                           </button>
-                        ))
-                      )}
-                    </div>
-                  </div>
-                ) : (
-                  <>
-                    {(pins.length > 0 || recents.length > 0) && (
-                      <div className="space-y-2">
-                        {pins.length > 0 && (
-                          <div>
-                            <div className={sectionTitle + ' mb-1.5'}>Pinned</div>
-                            <div className="flex flex-wrap gap-1.5">{pins.map(workspaceChip)}</div>
-                          </div>
-                        )}
-                        {recents.length > 0 && (
-                          <div>
-                            <div className={sectionTitle + ' mb-1.5'}>Recent</div>
-                            <div className="flex flex-wrap gap-1.5">
-                              {recents.map(workspaceChip)}
+                        </div>
+                        <div className="max-h-44 overflow-y-auto p-1.5">
+                          {remoteListingLoading && !remoteListing ? (
+                            <div className="flex items-center justify-center gap-2 py-6 text-[11px] text-muted-foreground">
+                              <RefreshCw size={12} strokeWidth={2} className="animate-spin" />{' '}
+                              Loading folders…
+                            </div>
+                          ) : remoteListingErr ? (
+                            <div className="px-2 py-3 text-[11px] text-destructive">
+                              {remoteListingErr}
                             </div>
+                          ) : remoteListing && remoteListing.entries.length === 0 ? (
+                            <div className="px-2 py-3 text-[11px] text-muted-foreground">
+                              No child folders.
+                            </div>
+                          ) : (
+                            remoteListing?.entries.map((d) => (
+                              <button
+                                key={d.path}
+                                onClick={() => loadRemoteDir(d.path, { select: true })}
+                                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px] text-foreground/80 hover:bg-muted"
+                              >
+                                <FolderOpen
+                                  size={13}
+                                  strokeWidth={2}
+                                  className="shrink-0 text-muted-foreground"
+                                />
+                                <span className="truncate">{d.name}</span>
+                              </button>
+                            ))
+                          )}
+                        </div>
+                      </div>
+                    ) : (
+                      <>
+                        {(pins.length > 0 || recents.length > 0) && (
+                          <div className="space-y-2">
+                            {pins.length > 0 && (
+                              <div>
+                                <div className={sectionTitle + ' mb-1.5'}>Pinned</div>
+                                <div className="flex flex-wrap gap-1.5">
+                                  {pins.map(workspaceChip)}
+                                </div>
+                              </div>
+                            )}
+                            {recents.length > 0 && (
+                              <div>
+                                <div className={sectionTitle + ' mb-1.5'}>Recent</div>
+                                <div className="flex flex-wrap gap-1.5">
+                                  {recents.map(workspaceChip)}
+                                </div>
+                              </div>
+                            )}
                           </div>
                         )}
-                      </div>
+                        <div>
+                          <div className={sectionTitle + ' mb-1.5'}>Folder</div>
+                          <div className="flex items-center gap-2">
+                            <Button variant="secondary" size="sm" onClick={browse}>
+                              <FolderOpen size={13} strokeWidth={2} /> Browse
+                            </Button>
+                            <Input
+                              value={cwd}
+                              onChange={(e) => setCwd(e.target.value)}
+                              placeholder={intent === 'resume' ? 'Every workspace' : '~ (home)'}
+                              className="flex-1 font-mono"
+                            />
+                            {/* Resume can legitimately span every repo — a new
+                            session cannot, so the escape hatch is resume-only. */}
+                            {intent === 'resume' && cwd.trim() && (
+                              <Button variant="ghost" size="sm" onClick={() => setCwd('')}>
+                                <X className="size-3.5" /> Clear
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      </>
                     )}
-                    <div>
-                      <div className={sectionTitle + ' mb-1.5'}>Folder</div>
-                      <div className="flex items-center gap-2">
-                        <Button variant="secondary" size="sm" onClick={browse}>
-                          <FolderOpen size={13} strokeWidth={2} /> Browse
-                        </Button>
-                        <Input
-                          value={cwd}
-                          onChange={(e) => setCwd(e.target.value)}
-                          placeholder={intent === 'resume' ? 'Every workspace' : '~ (home)'}
-                          className="flex-1 font-mono"
+
+                    {/* Remote only — the local path input above already IS the
+                        confirmation, so repeating it there is noise. */}
+                    {location === 'remote' && (
+                      <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px]">
+                        <Check
+                          size={13}
+                          strokeWidth={2.5}
+                          className="shrink-0 text-[var(--gt-accent-2)]"
                         />
-                        {/* Resume can legitimately span every repo — a new
-                            session cannot, so the escape hatch is resume-only. */}
-                        {intent === 'resume' && cwd.trim() && (
-                          <Button variant="ghost" size="sm" onClick={() => setCwd('')}>
-                            <X className="size-3.5" /> Clear
-                          </Button>
-                        )}
+                        <span className="shrink-0 text-muted-foreground">{daemonLabel}</span>
+                        <span className="min-w-0 truncate font-mono text-foreground">
+                          {selectedWorkspaceLabel}
+                        </span>
                       </div>
-                    </div>
+                    )}
                   </>
                 )}
-
-                {/* Remote only — the local path input above already IS the
-                    confirmation, so repeating it there is noise. */}
-                {location === 'remote' && (
-                  <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-[12px]">
-                    <Check
-                      size={13}
-                      strokeWidth={2.5}
-                      className="shrink-0 text-[var(--gt-accent-2)]"
-                    />
-                    <span className="shrink-0 text-muted-foreground">{daemonLabel}</span>
-                    <span className="min-w-0 truncate font-mono text-foreground">
-                      {selectedWorkspaceLabel}
-                    </span>
-                  </div>
-                )}
               </>
             )}
 
@@ -1165,63 +1293,6 @@ export function EntryScreen({
               </>
             )}
 
-            {/* ── Step · Project (scaffold) ────────────────────────────── */}
-            {step === 'project' && (
-              <>
-                {remoteHosts.length > 0 && (
-                  <div>
-                    <div className={sectionTitle + ' mb-1.5'}>Location</div>
-                    <div className="grid grid-cols-2 gap-2">
-                      <button
-                        onClick={() => switchLocation('local')}
-                        className={pickButton(location === 'local')}
-                      >
-                        <FolderOpen size={16} strokeWidth={2} className="shrink-0" />
-                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
-                          Local
-                        </span>
-                      </button>
-                      <button
-                        onClick={() => switchLocation('remote')}
-                        className={pickButton(location === 'remote')}
-                      >
-                        <Server size={16} strokeWidth={2} className="shrink-0" />
-                        <span className="min-w-0 flex-1 truncate text-[12.5px] font-semibold">
-                          Remote SSH
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                )}
-                <div>
-                  <div className={sectionTitle + ' mb-1.5'}>Name</div>
-                  <div className="flex items-center gap-2">
-                    <Input
-                      value={projName}
-                      onChange={(e) => {
-                        setProjName(e.target.value)
-                        setScaffoldErr('')
-                      }}
-                      placeholder="project-name"
-                      className="flex-1 font-mono"
-                    />
-                    <Button
-                      variant="secondary"
-                      onClick={pickParent}
-                      title="Choose parent directory"
-                    >
-                      {location === 'remote' ? (
-                        <Server size={13} strokeWidth={2} />
-                      ) : (
-                        <FolderOpen size={13} strokeWidth={2} />
-                      )}
-                      <span className="max-w-[180px] truncate">{projectParentLabel}</span>
-                    </Button>
-                  </div>
-                </div>
-              </>
-            )}
-
             {/* ── Step · Loop goal ─────────────────────────────────────── */}
             {step === 'goal' && (
               <>
diff --git a/tests/ux/entry-wizard.spec.ts b/tests/ux/entry-wizard.spec.ts
new file mode 100644
index 00000000..5458c612
--- /dev/null
+++ b/tests/ux/entry-wizard.spec.ts
@@ -0,0 +1,53 @@
+// The entry wizard asks WHERE before WHAT. These pin the properties that
+// ordering exists to guarantee — the workspace is settled before any action is
+// offered, a target that cannot hold a prior session never offers to resume
+// one, and a repo that is already known skips the question entirely — plus the
+// rule that a selection never advances a step on its own.
+
+import { test, expect } from './app'
+import type { Page } from '@playwright/test'
+
+/** The unlocked wizard: no repo chosen yet, so it opens on the workspace. */
+const openWorkspaceWizard = async (page: Page) => {
+  await page.getByRole('banner').getByRole('button', { name: 'workspace' }).click()
+  await expect(page.getByText('Which workspace?')).toBeVisible()
+}
+const next = (page: Page) => page.getByRole('button', { name: /^Next/ }).click()
+
+test('the wizard opens on the workspace question, not on an action', async ({ ux }) => {
+  await openWorkspaceWizard(ux.page)
+  await expect(ux.page.getByRole('button', { name: /^Existing repo/ })).toBeVisible()
+  // "What to do" is a step-2 question and must not be on screen yet.
+  await expect(ux.page.getByText('What do you want to do here?')).toHaveCount(0)
+})
+
+test('selecting a target does not advance the step on its own', async ({ ux }) => {
+  await openWorkspaceWizard(ux.page)
+  await ux.page.getByRole('button', { name: /^Scratch/ }).click()
+  await expect(ux.page.getByText('Which workspace?')).toBeVisible()
+})
+
+test('a scratch target never offers to resume a session it cannot have', async ({ ux }) => {
+  await openWorkspaceWizard(ux.page)
+  await ux.page.getByRole('button', { name: /^Scratch/ }).click()
+  await next(ux.page)
+  // Scratch has no action to choose — it goes straight to the model question.
+  await expect(ux.page.getByText('Which model?')).toBeVisible()
+  await expect(ux.page.getByText('Resume a session')).toHaveCount(0)
+})
+
+test('an existing repo asks what to do only after the workspace is set', async ({ ux }) => {
+  await openWorkspaceWizard(ux.page)
+  await ux.page.getByRole('button', { name: /^Existing repo/ }).click()
+  await next(ux.page)
+  await expect(ux.page.getByText('What do you want to do here?')).toBeVisible()
+  await expect(ux.page.getByRole('button', { name: /^Resume a session/ })).toBeVisible()
+})
+
+test('a repo that is already known skips the workspace question', async ({ ux }) => {
+  // Adding a session inside an open workspace: the repo is settled, so the
+  // wizard opens on the action rather than re-asking where.
+  await ux.page.getByRole('button', { name: /New session/ }).first().click()
+  await expect(ux.page.getByText('What do you want to do here?')).toBeVisible()
+  await expect(ux.page.getByText('Which workspace?')).toHaveCount(0)
+})

From 6709798a4fd5777e1f53eb951a513fb4a6b1992e Mon Sep 17 00:00:00 2001
From: Trevor Miller <trevormil@comcast.net>
Date: Tue, 18 Aug 2026 18:52:40 -0700
Subject: [PATCH 11/11] style(ux): let the resume list recede behind the engine
 choice

The session rows carried card-weight borders and full-strength text, so
a long list shouted over the question the step actually opens on. They
now sit on a darker ground with dimmed text and come back to full
contrast on hover, where the choice is being made.

The engine picker moves from filter-sized chips to the same pick-one
cards the model step uses, so the first question on the step reads as a
question rather than as a filter above a list.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RYiGxmeqKxR4H1NHGmf6vT
---
 src/renderer/src/components/EntryScreen.tsx | 31 ++++++++++++---------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/EntryScreen.tsx b/src/renderer/src/components/EntryScreen.tsx
index b88b95f2..169bf8d6 100644
--- a/src/renderer/src/components/EntryScreen.tsx
+++ b/src/renderer/src/components/EntryScreen.tsx
@@ -1383,15 +1383,20 @@ export function EntryScreen({
               <>
                 <div>
                   <div className={sectionTitle + ' mb-1.5'}>Engine</div>
-                  <div className="flex flex-wrap gap-1.5">
+                  {/* Same control as the model step's engine picker — this is
+                      the question the step opens on, so it gets the same weight
+                      there rather than reading as a filter chip. */}
+                  <div className="grid grid-cols-3 gap-2">
                     {ENGINE_IDS.filter((e) => e !== 'openrouter').map((e) => (
                       <button
                         key={e}
                         onClick={() => selectResumeEngine(e)}
-                        className={chip(resumeEngine === e)}
+                        className={pickButton(resumeEngine === e)}
                       >
-                        <EngineLogo engine={e} size={12} />
-                        {engineLabel(e)}
+                        <EngineLogo engine={e} size={16} />
+                        <span className="min-w-0 truncate text-[12.5px] font-semibold">
+                          {engineLabel(e)}
+                        </span>
                       </button>
                     ))}
                   </div>
@@ -1479,29 +1484,29 @@ export function EntryScreen({
                             cwd: s.cwd,
                           })
                         }
-                        className="flex w-full items-center gap-3 rounded-xl border border-border bg-card p-2.5 text-left transition-colors hover:border-primary/60 hover:bg-muted/40"
+                        className="group flex w-full items-center gap-3 rounded-xl border border-border/40 bg-black/20 p-2.5 text-left transition-colors hover:border-primary/50 hover:bg-muted/30"
                       >
                         <div className="min-w-0 flex-1">
-                          <div className="truncate text-[13px] text-foreground">
+                          <div className="truncate text-[13px] text-foreground/65 transition-colors group-hover:text-foreground">
                             {s.firstUserText || (
-                              <span className="italic text-muted-foreground">Untitled session</span>
+                              <span className="italic text-muted-foreground/60">
+                                Untitled session
+                              </span>
                             )}
                           </div>
-                          <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-muted-foreground">
+                          <div className="mt-0.5 flex items-center gap-2 truncate text-[11px] text-muted-foreground/55">
                             <span className="font-mono">{tilde(s.cwd) || '~'}</span>
                             {s.gitBranch && (
-                              <span className="inline-flex items-center gap-0.5 text-muted-foreground/70">
+                              <span className="inline-flex items-center gap-0.5">
                                 <GitBranch size={11} strokeWidth={2} /> {s.gitBranch}
                               </span>
                             )}
                             <span>· {s.turns} turns</span>
                           </div>
                         </div>
-                        <div className="shrink-0 text-right text-[10.5px] text-muted-foreground">
+                        <div className="shrink-0 text-right text-[10.5px] text-muted-foreground/50">
                           <div>{rel(s.mtime)}</div>
-                          <div className="font-mono text-muted-foreground/70">
-                            {s.id.slice(0, 8)}
-                          </div>
+                          <div className="font-mono">{s.id.slice(0, 8)}</div>
                         </div>
                       </button>
                     ))}