From 4415ded4d884c6267ba95fbf58ddc5fa7159a99f Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 12 Jun 2026 12:46:23 +1000
Subject: [PATCH 1/4] feat(staged): move repo/subpath label into New Session
 header

Relocate the repo/subpath RepoLabel from the dialog body to the modal
header, placing it to the right of the [New <type>] mode dropdown. The
mode switcher and repo label are now grouped in a .header-left flex
container while the close button stays right-aligned; the repo pill is
slimmed to match the dropdown height and truncates with an ellipsis when
space is tight.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../features/sessions/NewSessionModal.svelte  | 106 ++++++++++--------
 1 file changed, 59 insertions(+), 47 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
index e2044c8d..71e91981 100644
--- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
@@ -419,34 +419,44 @@
   >
     <Dialog.Title class="sr-only">New {currentModeInfo.label} session</Dialog.Title>
     <header class="modal-header">
-      <div class="mode-switcher" bind:this={modeMenuEl}>
-        <button
-          class={`mode-switcher-btn ${currentModeInfo.iconClass}`}
-          onclick={() => (modeMenuOpen = !modeMenuOpen)}
-          type="button"
-        >
-          <currentModeInfo.icon size={14} />
-          <span>{currentModeInfo.label}</span>
-          <ChevronDown size={14} />
-        </button>
-        {#if modeMenuOpen}
-          <div class="mode-menu">
-            {#each allModes as m, i}
-              <button
-                class="mode-menu-item"
-                class:active={m.value === currentMode}
-                type="button"
-                onclick={() => switchMode(m.value)}
-              >
-                <span class="header-icon {m.iconClass}">
-                  <m.icon size={14} />
-                </span>
-                <span>{m.label}</span>
-                {#if viewport.showShortcutHints}
-                  <span class="mode-menu-hint">{modKey}{i + 1}</span>
-                {/if}
-              </button>
-            {/each}
+      <div class="header-left">
+        <div class="mode-switcher" bind:this={modeMenuEl}>
+          <button
+            class={`mode-switcher-btn ${currentModeInfo.iconClass}`}
+            onclick={() => (modeMenuOpen = !modeMenuOpen)}
+            type="button"
+          >
+            <currentModeInfo.icon size={14} />
+            <span>{currentModeInfo.label}</span>
+            <ChevronDown size={14} />
+          </button>
+          {#if modeMenuOpen}
+            <div class="mode-menu">
+              {#each allModes as m, i}
+                <button
+                  class="mode-menu-item"
+                  class:active={m.value === currentMode}
+                  type="button"
+                  onclick={() => switchMode(m.value)}
+                >
+                  <span class="header-icon {m.iconClass}">
+                    <m.icon size={14} />
+                  </span>
+                  <span>{m.label}</span>
+                  {#if viewport.showShortcutHints}
+                    <span class="mode-menu-hint">{modKey}{i + 1}</span>
+                  {/if}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+        {#if repoLabel}
+          <div class="repo-info">
+            <RepoLabel
+              githubRepo={repoLabel.headRepo ?? repoLabel.githubRepo}
+              subpath={repoLabel.subpath}
+            />
           </div>
         {/if}
       </div>
@@ -469,15 +479,6 @@
     </header>
 
     <form class="modal-body" onsubmit={handleSubmit}>
-      {#if repoLabel}
-        <div class="repo-info">
-          <RepoLabel
-            githubRepo={repoLabel.headRepo ?? repoLabel.githubRepo}
-            subpath={repoLabel.subpath}
-          />
-        </div>
-      {/if}
-
       <div class="form-group">
         <HashtagInput
           bind:textareaEl
@@ -542,12 +543,22 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 8px;
     padding: 10px 18px;
     border-bottom: 1px solid var(--border-subtle);
   }
 
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1;
+  }
+
   .mode-switcher {
     position: relative;
+    flex-shrink: 0;
   }
 
   .mode-switcher-btn {
@@ -676,6 +687,17 @@
     flex-shrink: 0;
   }
 
+  .repo-info {
+    min-width: 0;
+    padding: 4px 10px;
+    background: var(--bg-hover);
+    border-radius: 6px;
+    font-size: var(--size-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   /* Body */
   .modal-body {
     padding: 18px;
@@ -686,16 +708,6 @@
     min-height: 0;
   }
 
-  .repo-info {
-    padding: 8px 10px;
-    background: var(--bg-hover);
-    border-radius: 6px;
-    font-size: var(--size-sm);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .form-group {
     display: flex;
     flex-direction: column;

From 372bdfe70a1bec694ba9fca0cec0fa33303ce15b Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 12 Jun 2026 13:10:51 +1000
Subject: [PATCH 2/4] fix(staged): surface attach images in new session footer

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../features/sessions/ImageAttachment.svelte  |  2 +-
 .../features/sessions/NewSessionModal.svelte  | 41 +++++++++++++++----
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
index 0bc263fd..a050de54 100644
--- a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
+++ b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
@@ -182,7 +182,7 @@
   <Button
     variant="outline"
     type="button"
-    class="h-auto gap-1.5 rounded-md border border-dashed border-[var(--border-muted)] bg-transparent px-2.5 py-1.5 text-xs text-[var(--text-faint)] shadow-none hover:border-[var(--border-emphasis)] hover:bg-transparent hover:text-muted-foreground"
+    class="h-8 gap-1.5 rounded-md border border-[var(--border-emphasis)] bg-[var(--bg-hover)] px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-none hover:border-[var(--ui-accent)] hover:bg-[var(--ui-selection)] hover:text-foreground [&_svg]:!size-3.5 [&_svg]:text-[var(--ui-accent)]"
     onclick={openFilePicker}
   >
     <ImagePlus size={14} />
diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
index 71e91981..92a72b60 100644
--- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
@@ -497,16 +497,29 @@
         {/if}
       </div>
 
-      <ImageAttachment
-        branchId={branch.id}
-        projectId={branch.projectId}
-        disabled={starting}
-        {imageIds}
-        {onImageIdsChange}
-      />
+      {#if imageIds.length > 0}
+        <ImageAttachment
+          branchId={branch.id}
+          projectId={branch.projectId}
+          disabled={starting}
+          {imageIds}
+          {onImageIdsChange}
+        />
+      {/if}
 
       <div class="form-actions">
-        <AgentSelector disabled={starting} {remote} dropUp />
+        <div class="form-actions-left">
+          <AgentSelector disabled={starting} {remote} dropUp />
+          {#if imageIds.length === 0}
+            <ImageAttachment
+              branchId={branch.id}
+              projectId={branch.projectId}
+              disabled={starting}
+              {imageIds}
+              {onImageIdsChange}
+            />
+          {/if}
+        </div>
         <div class="form-actions-right">
           <Button
             type="button"
@@ -765,6 +778,13 @@
     margin-top: 4px;
   }
 
+  .form-actions-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
   .form-actions-right {
     display: flex;
     gap: 8px;
@@ -788,6 +808,11 @@
       flex-direction: column;
     }
 
+    .form-actions-left {
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
     .form-actions :global(.selector-btn) {
       min-height: 40px;
       max-width: calc(100vw - 32px);

From b59bce9e76af19b4c022155b5ebea38edfa883b0 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 12 Jun 2026 14:10:38 +1000
Subject: [PATCH 3/4] style(staged): align new session footer controls

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../lib/features/agents/AgentSelector.svelte    | 14 +++++++++++---
 .../features/sessions/ImageAttachment.svelte    |  2 +-
 .../features/sessions/NewSessionModal.svelte    | 17 +++++------------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/staged/src/lib/features/agents/AgentSelector.svelte b/apps/staged/src/lib/features/agents/AgentSelector.svelte
index 08305289..bd87c0e0 100644
--- a/apps/staged/src/lib/features/agents/AgentSelector.svelte
+++ b/apps/staged/src/lib/features/agents/AgentSelector.svelte
@@ -15,15 +15,17 @@
   import AgentIcon from './AgentIcon.svelte';
   import { agentState, REMOTE_AGENTS } from './agent.svelte';
   import { setAiAgent, getPreferredAgent } from '../settings/preferences.svelte';
+  import { cn } from '$lib/components/utils';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 
   interface Props {
     disabled?: boolean;
     remote?: boolean;
     dropUp?: boolean;
+    triggerClass?: string;
   }
 
-  let { disabled = false, remote = false, dropUp = false }: Props = $props();
+  let { disabled = false, remote = false, dropUp = false, triggerClass }: Props = $props();
 
   let agents = $derived(remote ? REMOTE_AGENTS : agentState.providers);
 
@@ -36,7 +38,10 @@
   {#if agents.length > 1}
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
-        class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-[var(--bg-hover)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+        class={cn(
+          'inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-[var(--bg-hover)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40',
+          triggerClass
+        )}
         {disabled}
         title="Select AI agent"
       >
@@ -68,7 +73,10 @@
   {:else}
     <button
       type="button"
-      class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
+      class={cn(
+        'inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40',
+        triggerClass
+      )}
       {disabled}
       title={currentLabel}
     >
diff --git a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
index a050de54..93523d67 100644
--- a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
+++ b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
@@ -182,7 +182,7 @@
   <Button
     variant="outline"
     type="button"
-    class="h-8 gap-1.5 rounded-md border border-[var(--border-emphasis)] bg-[var(--bg-hover)] px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-none hover:border-[var(--ui-accent)] hover:bg-[var(--ui-selection)] hover:text-foreground [&_svg]:!size-3.5 [&_svg]:text-[var(--ui-accent)]"
+    class="gap-1.5 px-4 py-2 text-sm font-medium text-muted-foreground shadow-none hover:text-foreground max-[640px]:h-11 max-[640px]:justify-center"
     onclick={openFilePicker}
   >
     <ImagePlus size={14} />
diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
index 92a72b60..e4d4b5a6 100644
--- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
@@ -90,6 +90,8 @@
   let isCommit = $derived(currentMode === 'commit');
   let isReview = $derived(currentMode === 'review');
   let isNote = $derived(!isCommit && !isReview);
+  const footerControlClass =
+    'h-9 gap-1.5 rounded-md border border-[var(--border-muted)] bg-[var(--bg-primary)] px-4 py-2 text-sm font-medium text-muted-foreground shadow-none transition-colors hover:bg-[var(--bg-hover)] hover:text-foreground max-[640px]:h-11 max-[640px]:justify-center';
 
   function selectPromptContent(el: HTMLElement, selection: 'all' | 'last-line') {
     const sel = window.getSelection();
@@ -492,9 +494,6 @@
           disabled={starting}
           items={hashtagItems}
         />
-        {#if viewport.showShortcutHints}
-          <span class="hint">{willQueue ? '⌘ Enter to queue' : '⌘ Enter to start'}</span>
-        {/if}
       </div>
 
       {#if imageIds.length > 0}
@@ -509,7 +508,7 @@
 
       <div class="form-actions">
         <div class="form-actions-left">
-          <AgentSelector disabled={starting} {remote} dropUp />
+          <AgentSelector disabled={starting} {remote} dropUp triggerClass={footerControlClass} />
           {#if imageIds.length === 0}
             <ImageAttachment
               branchId={branch.id}
@@ -532,8 +531,8 @@
           </Button>
           <Button
             type="submit"
-            variant="outline"
-            class="gap-1.5 px-4 py-2 text-sm font-medium max-[640px]:h-11 max-[640px]:flex-1 max-[640px]:justify-center"
+            variant="default"
+            class="gap-1.5 px-4 py-2 text-sm font-semibold shadow-none hover:bg-[var(--ui-accent-hover)] max-[640px]:h-11 max-[640px]:flex-1 max-[640px]:justify-center"
             disabled={starting || (!isReview && !prompt.trim())}
           >
             {#if starting}
@@ -763,12 +762,6 @@
     border-color: var(--border-emphasis);
   }
 
-  .hint {
-    font-size: var(--size-xs);
-    color: var(--text-faint);
-    text-align: right;
-  }
-
   /* Actions */
   .form-actions {
     display: flex;

From eb9b30d73a9d68e206672f66ac06b8e39fc65102 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 12 Jun 2026 17:06:00 +1000
Subject: [PATCH 4/4] fix(staged): preserve multi-image attachments

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../src/lib/features/sessions/ImageAttachment.svelte      | 8 +++++---
 .../src/lib/features/sessions/NewSessionModal.svelte      | 6 ++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
index 93523d67..40822ca3 100644
--- a/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
+++ b/apps/staged/src/lib/features/sessions/ImageAttachment.svelte
@@ -21,12 +21,14 @@
   import { createImageFromData, getImageData, deleteImage } from '../../commands';
   import type { Image } from '../../types';
 
+  type ImageIdsUpdate = string[] | ((current: string[]) => string[]);
+
   interface Props {
     branchId: string;
     projectId: string;
     disabled?: boolean;
     imageIds: string[];
-    onImageIdsChange: (ids: string[]) => void;
+    onImageIdsChange: (update: ImageIdsUpdate) => void;
   }
 
   let { branchId, projectId, disabled = false, imageIds, onImageIdsChange }: Props = $props();
@@ -86,7 +88,7 @@
         base64,
         true
       );
-      onImageIdsChange([...imageIds, image.id]);
+      onImageIdsChange((current) => [...current, image.id]);
       // Set preview immediately from the local data
       const dataUrl = `data:${file.type};base64,${base64}`;
       previews = new Map(previews);
@@ -110,7 +112,7 @@
   }
 
   function removeImage(imageId: string) {
-    onImageIdsChange(imageIds.filter((id) => id !== imageId));
+    onImageIdsChange((current) => current.filter((id) => id !== imageId));
     previews = new Map(previews);
     previews.delete(imageId);
     deleteImage(imageId).catch((err) => {
diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
index e4d4b5a6..be025b78 100644
--- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
@@ -383,9 +383,11 @@
     }
   }
 
+  type ImageIdsUpdate = string[] | ((current: string[]) => string[]);
+
   // Keep imageIds in sync with ImageAttachment changes
-  function onImageIdsChange(ids: string[]) {
-    imageIds = ids;
+  function onImageIdsChange(update: ImageIdsUpdate) {
+    imageIds = typeof update === 'function' ? update(imageIds) : update;
   }
 
   // Subscribe to the shared drag-drop service so the modal intercepts