From 3f2813d16f822e8ba9fa42fca499d7e0d91c901e Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 15 Apr 2026 22:35:39 -0400
Subject: [PATCH] feat(chat): Phase D empty-state + overlay context sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Empty-state rethink: replace "Start a conversation." with a richer
landing showing recent conversations (top 5 as resume links) and a
voice-mode entry button. Gated to full variant only; widget/briefing
keep the simple message.

Context sidebar: switch from grid column (4-col layout) to absolute
overlay on the right gutter (3-col layout). The reading column is now
always symmetrically centered regardless of whether the sidebar is
visible — eliminates the leftward shift that occurred when context
notes appeared.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ChatPanel.vue | 167 ++++++++++++++++++++++++--
 1 file changed, 155 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index 7327d85..6ce9ef4 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -182,6 +182,27 @@ function toggleSection(key: SectionKey) {
 
 watch(() => store.currentConversation?.id, () => loadCollapsed(), { immediate: true })
 
+// ── Empty-state (full variant, fresh/empty conversation) ─────────────────────
+const showEmptyState = computed(
+  () =>
+    props.variant === 'full'
+    && !props.briefingMode
+    && !props.projectId
+    && !store.streaming
+    && (store.currentConversation?.messages.length ?? 0) === 0
+)
+
+const recentConversations = computed(() => {
+  const currentId = store.currentConversation?.id
+  return store.conversations
+    .filter((c) => c.id !== currentId && c.message_count > 0)
+    .slice(0, 5)
+})
+
+function startVoiceMode() {
+  window.dispatchEvent(new CustomEvent('voice:ptt-toggle'))
+}
+
 // ── Send ──────────────────────────────────────────────────────────────────────
 const inputBarRef = ref<InstanceType<typeof ChatInputBar> | null>(null)
 
@@ -298,7 +319,7 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
 <template>
   <!-- ═══════════════════════════════ FULL VARIANT ══════════════════════════════ -->
   <template v-if="variant === 'full'">
-    <div class="chat-full" :class="{ 'chat-full--has-sidebar': hasContextSidebar }">
+    <div class="chat-full">
       <!-- Message list -->
       <div ref="messagesEl" class="messages-container">
         <div class="messages-inner">
@@ -336,8 +357,27 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
               </button>
             </div>
           </template>
+          <div v-if="showEmptyState" class="chat-empty-state">
+            <h2 class="empty-greeting">What's on your mind?</h2>
+            <div v-if="recentConversations.length" class="empty-recent">
+              <div class="empty-section-label">Jump back in</div>
+              <router-link
+                v-for="conv in recentConversations"
+                :key="conv.id"
+                :to="`/chat/${conv.id}`"
+                class="empty-recent-item"
+              >
+                <span class="empty-recent-title">{{ conv.title || 'Untitled conversation' }}</span>
+                <span class="empty-recent-count">{{ conv.message_count }} msg</span>
+              </router-link>
+            </div>
+            <button class="empty-voice-btn" @click="startVoiceMode" title="Start in voice mode">
+              <span class="voice-icon">🎤</span>
+              <span>Start in voice mode</span>
+            </button>
+          </div>
           <p
-            v-if="!store.currentConversation?.messages.length && !store.streaming"
+            v-else-if="!store.currentConversation?.messages.length && !store.streaming"
             class="empty-msg"
           >Start a conversation.</p>
         </div>
@@ -476,24 +516,21 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
  * Single grid owns the reading column + context sidebar + input bar so
  * messages and input bar share one centered reading track while the
  * context sidebar spans the full height from header to bottom of view.
- * The sidebar column collapses to 0 when there are no context notes.
+ * Reading column is always centered (3-column grid: 1fr | content | 1fr).
+ * The context sidebar overlays the right gutter so it never shifts layout.
  */
 .chat-full {
-  --chat-sidebar-col: 0px;
+  position: relative;
   flex: 1;
   min-height: 0;
   display: grid;
   grid-template-columns:
     1fr
     minmax(0, var(--chat-reading-width))
-    1fr
-    var(--chat-sidebar-col);
+    1fr;
   grid-template-rows: minmax(0, 1fr) auto;
   overflow: hidden;
 }
-.chat-full--has-sidebar {
-  --chat-sidebar-col: var(--chat-context-sidebar-width);
-}
 
 .messages-container {
   grid-column: 2;
@@ -518,15 +555,19 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
   opacity: 0.35;
 }
 
-/* Context sidebar — spans full height (rows 1 and 2) of the chat grid */
+/* Context sidebar — overlays right gutter, never shifts reading column */
 .context-sidebar {
-  grid-column: 4;
-  grid-row: 1 / -1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--chat-context-sidebar-width);
   border-left: 1px solid var(--color-border);
   padding: 0.75rem 0.5rem;
   overflow-y: auto;
   background: var(--color-bg-secondary);
   font-size: 0.78rem;
+  z-index: 2;
 }
 .context-sidebar-header {
   display: flex;
@@ -672,6 +713,108 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
   color: var(--color-accent-warm, #d4a017);
 }
 
+.chat-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1.5rem;
+  padding: 3rem 1rem 2rem;
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+.empty-greeting {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 1.75rem;
+  color: var(--color-accent-warm, #d4a017);
+  text-align: center;
+  margin: 0;
+}
+
+.empty-section-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+  padding-left: 0.25rem;
+}
+
+.empty-recent {
+  display: flex;
+  flex-direction: column;
+}
+
+.empty-recent-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 0.9rem;
+  border-radius: var(--radius-md, 10px);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.02));
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+}
+
+.empty-recent-item + .empty-recent-item {
+  margin-top: 0.4rem;
+}
+
+.empty-recent-item:hover {
+  border-color: var(--color-primary);
+  background: rgba(99, 102, 241, 0.05);
+  transform: translateX(2px);
+}
+
+.empty-recent-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.empty-recent-count {
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.empty-voice-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  padding: 0.75rem 1.2rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text);
+  font-size: 0.9rem;
+  cursor: pointer;
+  align-self: center;
+  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+
+.empty-voice-btn:hover {
+  border-color: var(--color-primary);
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
+}
+
+.empty-voice-btn .voice-icon {
+  font-size: 1.05rem;
+}
+
 /* ── Widget variant ── */
 .widget-response {
   margin-top: 0.75rem;