From 36c206d97723024d229bd4562e57e436744bf4b8 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 28 May 2026 13:51:23 +1000
Subject: [PATCH 1/2] refactor(staged): move "N messages after note" into note
 modal footer

Replace the absolutely-positioned floating chat-info button inside
`.modal-body` with a row at the top of the existing `.next-steps`
footer, alongside note/commit next-step rows. Removes the shadow
and overlay padding hacks; the footer now renders whenever there's
chat info or next steps to show.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../src/lib/features/notes/NoteModal.svelte   | 98 +++++--------------
 1 file changed, 23 insertions(+), 75 deletions(-)

diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte
index c0f9a12c..d6ae9596 100644
--- a/apps/staged/src/lib/features/notes/NoteModal.svelte
+++ b/apps/staged/src/lib/features/notes/NoteModal.svelte
@@ -6,7 +6,7 @@
 -->
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { X, Copy, Check, MessageCircle } from 'lucide-svelte';
+  import { X, Copy, Check } from 'lucide-svelte';
   import { marked } from 'marked';
   import { sanitize } from '../../shared/sanitize';
   import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
@@ -49,7 +49,7 @@
   let assistantMessagesAfterNote = $state(0);
   let chatButtonLabel = $derived(formatChatButtonLabel(assistantMessagesAfterNote));
   let canOpenSession = $derived(Boolean(sessionId && onOpenSession));
-  let showFloatingChatInfo = $derived(canOpenSession && assistantMessagesAfterNote > 0);
+  let showChatInfo = $derived(canOpenSession && assistantMessagesAfterNote > 0);
 
   // Search state
   let searchVisible = $state(false);
@@ -255,12 +255,7 @@
     </header>
     <div class="modal-body">
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <div
-        class:has-floating-chat-info={showFloatingChatInfo}
-        class="modal-content"
-        bind:this={contentEl}
-        onclick={handleExternalLinkClick}
-      >
+      <div class="modal-content" bind:this={contentEl} onclick={handleExternalLinkClick}>
         {#if content.trim()}
           <div class="markdown-content">
             {@html renderMarkdown(content)}
@@ -269,20 +264,18 @@
           <p class="empty-note">This note has no content.</p>
         {/if}
       </div>
-      {#if showFloatingChatInfo}
-        <button
-          class="floating-chat-info"
-          onclick={() => onOpenSession?.(sessionId!)}
-          title="Open chat session"
-        >
-          <MessageCircle size={16} aria-hidden="true" />
-          <span>{chatButtonLabel}</span>
-        </button>
-      {/if}
     </div>
-    {#if nextSteps && onStartSession && (nextSteps.noteStep || nextSteps.commitStep)}
+    {#if showChatInfo || (nextSteps && onStartSession && (nextSteps.noteStep || nextSteps.commitStep))}
       <div class="next-steps">
-        {#if nextSteps.noteStep}
+        {#if showChatInfo}
+          <div class="next-step-row">
+            <span class="next-step-prompt">{chatButtonLabel}</span>
+            <button class="next-step-btn chat-btn" onclick={() => onOpenSession?.(sessionId!)}>
+              View chat
+            </button>
+          </div>
+        {/if}
+        {#if nextSteps && onStartSession && nextSteps.noteStep}
           <div class="next-step-row">
             <span class="next-step-prompt">{nextSteps.noteStep}</span>
             <button
@@ -293,7 +286,7 @@
             </button>
           </div>
         {/if}
-        {#if nextSteps.commitStep}
+        {#if nextSteps && onStartSession && nextSteps.commitStep}
           <div class="next-step-row">
             <span class="next-step-prompt">{nextSteps.commitStep}</span>
             <button
@@ -430,51 +423,6 @@
     min-height: 0;
   }
 
-  .modal-content.has-floating-chat-info {
-    padding-bottom: 96px;
-  }
-
-  .floating-chat-info {
-    position: absolute;
-    left: 50%;
-    bottom: 16px;
-    transform: translateX(-50%);
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    box-sizing: border-box;
-    width: max-content;
-    max-width: calc(100% - 48px);
-    min-height: 44px;
-    padding: 10px 14px;
-    background: var(--bg-chrome);
-    border: 1px solid var(--border-muted);
-    border-radius: 8px;
-    box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-overlay) 40%, transparent);
-    color: var(--text-primary);
-    cursor: pointer;
-    font-size: var(--size-sm);
-    font-weight: 500;
-    transition:
-      background-color 0.1s,
-      border-color 0.1s,
-      color 0.1s;
-  }
-
-  .floating-chat-info:hover {
-    background: var(--bg-hover);
-    border-color: var(--text-muted);
-  }
-
-  .floating-chat-info span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .modal-content::-webkit-scrollbar {
     width: 6px;
   }
@@ -675,6 +623,15 @@
     background: var(--commit-bg-emphasis);
   }
 
+  .next-step-btn.chat-btn {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  .next-step-btn.chat-btn:hover {
+    background: var(--bg-elevated);
+  }
+
   @media (max-width: 700px) {
     .modal {
       width: 100vw;
@@ -703,15 +660,6 @@
       padding: 16px;
     }
 
-    .modal-content.has-floating-chat-info {
-      padding-bottom: 88px;
-    }
-
-    .floating-chat-info {
-      bottom: 12px;
-      max-width: calc(100% - 32px);
-    }
-
     .next-steps {
       padding: 12px;
     }

From 320bc245ba9545544cbca8d224eabf13594218da Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Thu, 28 May 2026 14:10:29 +1000
Subject: [PATCH 2/2] refactor(staged): use centered capsule for chat-info in
 note footer

Render the "N messages after note" entry as a horizontally-centered
capsule button with the MessageCircle icon, sitting above the note
and commit next-step rows. Visually delineates the chat-info shortcut
from the action rows below it.

Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../src/lib/features/notes/NoteModal.svelte   | 50 ++++++++++++++++---
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte
index d6ae9596..1de8f592 100644
--- a/apps/staged/src/lib/features/notes/NoteModal.svelte
+++ b/apps/staged/src/lib/features/notes/NoteModal.svelte
@@ -6,7 +6,7 @@
 -->
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { X, Copy, Check } from 'lucide-svelte';
+  import { X, Copy, Check, MessageCircle } from 'lucide-svelte';
   import { marked } from 'marked';
   import { sanitize } from '../../shared/sanitize';
   import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
@@ -268,10 +268,14 @@
     {#if showChatInfo || (nextSteps && onStartSession && (nextSteps.noteStep || nextSteps.commitStep))}
       <div class="next-steps">
         {#if showChatInfo}
-          <div class="next-step-row">
-            <span class="next-step-prompt">{chatButtonLabel}</span>
-            <button class="next-step-btn chat-btn" onclick={() => onOpenSession?.(sessionId!)}>
-              View chat
+          <div class="chat-info-row">
+            <button
+              class="chat-info-capsule"
+              onclick={() => onOpenSession?.(sessionId!)}
+              title="Open chat session"
+            >
+              <MessageCircle size={16} aria-hidden="true" />
+              <span>{chatButtonLabel}</span>
             </button>
           </div>
         {/if}
@@ -623,13 +627,43 @@
     background: var(--commit-bg-emphasis);
   }
 
-  .next-step-btn.chat-btn {
+  .chat-info-row {
+    display: flex;
+    justify-content: center;
+  }
+
+  .chat-info-capsule {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-sizing: border-box;
+    max-width: 100%;
+    min-height: 36px;
+    padding: 8px 14px;
+    background: var(--bg-chrome);
+    border: 1px solid var(--border-muted);
+    border-radius: 8px;
     color: var(--text-primary);
+    cursor: pointer;
+    font-size: var(--size-sm);
+    font-weight: 500;
+    transition:
+      background-color 0.1s,
+      border-color 0.1s,
+      color 0.1s;
+  }
+
+  .chat-info-capsule:hover {
     background: var(--bg-hover);
+    border-color: var(--text-muted);
   }
 
-  .next-step-btn.chat-btn:hover {
-    background: var(--bg-elevated);
+  .chat-info-capsule span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   @media (max-width: 700px) {