From 593d737e26ea4fab198c62c8f44107a629dca6bf Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 10 Apr 2026 22:10:31 -0400
Subject: [PATCH] feat(briefing): UI polish for agentic briefing messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three visual improvements for the briefing conversation:

1. Intermediate tool-call messages (empty content, briefing_intermediate:
   true) now render as a compact dashed status row with per-tool pills
   showing result counts, instead of an empty assistant bubble followed
   by a stack of ToolCallCards. Click to expand the full cards.

2. Slot badge on non-intermediate briefing messages — "Full Briefing"
   for compilation, "Morning/Midday/Afternoon Update" for slot
   injections. Slot updates get a softer bubble treatment (transparent
   background, muted border, smaller text) so the compilation stays
   visually dominant.

3. Slot separator now triggers on briefing_slot metadata (not the
   compilation-only rss_item_ids), and uses a look-behind so it only
   fires when there's a prior slot message — no separator above the
   first briefing of the day.

New component: BriefingToolStatusRow.vue handles the intermediate
pill row and delegates to ToolCallCard when expanded.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/BriefingToolStatusRow.vue  | 168 ++++++++++++++++++
 frontend/src/components/ChatMessage.vue       |  76 +++++++-
 frontend/src/components/ChatPanel.vue         |  43 ++---
 3 files changed, 264 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/BriefingToolStatusRow.vue

diff --git a/frontend/src/components/BriefingToolStatusRow.vue b/frontend/src/components/BriefingToolStatusRow.vue
new file mode 100644
index 0000000..7ba64c4
--- /dev/null
+++ b/frontend/src/components/BriefingToolStatusRow.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import ToolCallCard from "@/components/ToolCallCard.vue";
+import type { ToolCallRecord } from "@/types/chat";
+
+const props = defineProps<{
+  toolCalls: ToolCallRecord[];
+}>();
+
+const expanded = ref(false);
+
+function shortName(fn: string): string {
+  return fn
+    .replace(/^(list|get|search|fetch)_/, "")
+    .replace(/_/g, " ");
+}
+
+interface Pill {
+  key: string;
+  name: string;
+  count: string | null;
+  state: "ok" | "empty" | "error";
+}
+
+const pills = computed<Pill[]>(() =>
+  props.toolCalls.map((tc, i) => {
+    const ok = tc.result?.success !== false && tc.status !== "error";
+    const data = tc.result?.data as Record<string, unknown> | undefined;
+    let count: string | null = null;
+    let state: Pill["state"] = ok ? "ok" : "error";
+    if (ok && data) {
+      const raw =
+        (typeof data.count === "number" && data.count) ||
+        (typeof data.total === "number" && data.total);
+      if (typeof raw === "number") {
+        count = String(raw);
+        if (raw === 0) state = "empty";
+      }
+    }
+    return {
+      key: `${tc.function}-${i}`,
+      name: shortName(tc.function),
+      count,
+      state,
+    };
+  }),
+);
+
+const errorCount = computed(() => pills.value.filter((p) => p.state === "error").length);
+</script>
+
+<template>
+  <div class="briefing-status" :class="{ expanded }">
+    <button class="briefing-status-toggle" @click="expanded = !expanded">
+      <span class="briefing-status-label">Gathered</span>
+      <span
+        v-for="p in pills"
+        :key="p.key"
+        class="briefing-status-pill"
+        :class="`state-${p.state}`"
+      >
+        {{ p.name }}<span v-if="p.count != null" class="pill-count">{{ p.count }}</span>
+      </span>
+      <span v-if="errorCount" class="briefing-status-errcount">{{ errorCount }} failed</span>
+      <span class="briefing-status-chevron" :class="{ open: expanded }">▶</span>
+    </button>
+    <div v-if="expanded" class="briefing-status-detail">
+      <ToolCallCard
+        v-for="(tc, i) in toolCalls"
+        :key="i"
+        :tool-call="tc"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.briefing-status {
+  margin: 0.25rem 0 0.5rem;
+  max-width: 80%;
+}
+
+.briefing-status-toggle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+  padding: 0.35rem 0.55rem;
+  background: transparent;
+  border: 1px dashed var(--color-border);
+  border-radius: 8px;
+  cursor: pointer;
+  font: inherit;
+  color: var(--color-text-muted);
+  transition: border-color 0.15s, background 0.15s;
+}
+.briefing-status-toggle:hover {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+}
+
+.briefing-status-label {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 0.78rem;
+  color: var(--color-primary);
+  opacity: 0.85;
+  margin-right: 0.15rem;
+}
+
+.briefing-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.08rem 0.45rem;
+  font-size: 0.72rem;
+  line-height: 1.45;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-card);
+  white-space: nowrap;
+}
+.briefing-status-pill.state-empty {
+  opacity: 0.55;
+}
+.briefing-status-pill.state-error {
+  border-color: color-mix(in srgb, var(--color-danger, #ef4444) 60%, var(--color-border));
+  color: var(--color-danger, #ef4444);
+}
+
+.pill-count {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  padding: 0 0.25rem;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-text);
+}
+.state-error .pill-count {
+  background: color-mix(in srgb, var(--color-danger, #ef4444) 18%, transparent);
+}
+
+.briefing-status-errcount {
+  font-size: 0.7rem;
+  color: var(--color-danger, #ef4444);
+  font-weight: 600;
+}
+
+.briefing-status-chevron {
+  margin-left: auto;
+  font-size: 0.65rem;
+  opacity: 0.5;
+  transition: transform 0.15s;
+}
+.briefing-status-chevron.open {
+  transform: rotate(90deg);
+}
+
+.briefing-status-detail {
+  margin-top: 0.4rem;
+  padding-left: 0.55rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+</style>
diff --git a/frontend/src/components/ChatMessage.vue b/frontend/src/components/ChatMessage.vue
index 14dc4d1..ebb6f67 100644
--- a/frontend/src/components/ChatMessage.vue
+++ b/frontend/src/components/ChatMessage.vue
@@ -3,8 +3,16 @@ import { computed } from "vue";
 import { renderMarkdown } from "@/utils/markdown";
 import { useSettingsStore } from "@/stores/settings";
 import ToolCallCard from "@/components/ToolCallCard.vue";
+import BriefingToolStatusRow from "@/components/BriefingToolStatusRow.vue";
 import type { Message } from "@/types/chat";
 
+const SLOT_LABELS: Record<string, string> = {
+  compilation: "Full Briefing",
+  morning: "Morning Update",
+  midday: "Midday Update",
+  afternoon: "Afternoon Update",
+};
+
 const settingsStore = useSettingsStore();
 
 const props = defineProps<{
@@ -41,6 +49,30 @@ function formatMs(ms: number | null | undefined): string {
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
+const metadata = computed(() => (props.message.metadata ?? {}) as Record<string, unknown>);
+
+const isBriefingIntermediate = computed(
+  () => props.message.role === "assistant" && metadata.value.briefing_intermediate === true,
+);
+
+const briefingSlot = computed(() => {
+  const slot = metadata.value.briefing_slot;
+  return typeof slot === "string" ? slot : null;
+});
+
+const slotLabel = computed(() => {
+  const slot = briefingSlot.value;
+  if (!slot) return null;
+  return SLOT_LABELS[slot] ?? slot;
+});
+
+const isSlotUpdate = computed(
+  () =>
+    !isBriefingIntermediate.value &&
+    briefingSlot.value != null &&
+    briefingSlot.value !== "compilation",
+);
+
 const timingParts = computed((): string[] => {
   const t = props.message.timing;
   if (!t) return [];
@@ -57,11 +89,16 @@ const timingParts = computed((): string[] => {
 </script>
 
 <template>
-  <div class="chat-message" :class="`role-${message.role}`">
+  <!-- Briefing intermediate: compact status row, no bubble -->
+  <div v-if="isBriefingIntermediate" class="chat-message role-assistant briefing-intermediate-row">
+    <BriefingToolStatusRow :tool-calls="message.tool_calls ?? []" />
+  </div>
+  <div v-else class="chat-message" :class="[`role-${message.role}`, { 'slot-update': isSlotUpdate }]">
     <div class="message-group">
-      <div class="message-bubble">
+      <div class="message-bubble" :class="{ 'bubble-slot': isSlotUpdate }">
         <div class="message-header">
           <span class="role-label">{{ roleLabel }}</span>
+          <span v-if="slotLabel" class="slot-badge" :class="{ 'slot-badge-update': isSlotUpdate }">{{ slotLabel }}</span>
           <div class="message-actions" v-if="message.role === 'assistant' && !isStreaming">
             <button class="btn-save" @click="emit('saveAsNote', message.id)" title="Save as note">
               Save as Note
@@ -281,4 +318,39 @@ details[open] .thinking-summary::before {
   margin-right: 0.2rem;
   opacity: 0.5;
 }
+
+/* ── Briefing intermediate row (no bubble) ──────────────── */
+.briefing-intermediate-row {
+  margin-bottom: 0.5rem;
+}
+
+/* ── Slot badge (morning/midday/afternoon/full) ─────────── */
+.slot-badge {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  color: var(--color-primary);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+  margin-left: 0.5rem;
+}
+.slot-badge-update {
+  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  color: var(--color-text-muted);
+  border-color: var(--color-border);
+}
+
+/* ── Slot update bubbles: softer treatment than compilation ── */
+.slot-update .message-bubble.bubble-slot {
+  background: transparent;
+  border-left: 2px solid var(--color-border);
+  box-shadow: none;
+}
+.slot-update .message-bubble.bubble-slot .message-content {
+  font-size: 0.88rem;
+  color: var(--color-text-secondary);
+}
 </style>
diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index 59772be..1ecce61 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -289,6 +289,23 @@ async function send(text: string) {
   await onSubmit({ content: text })
 }
 
+// ── Briefing slot separator helper ────────────────────────────────────────────
+function hasEarlierBriefingSlot(index: number): boolean {
+  const msgs = store.currentConversation?.messages ?? []
+  for (let i = 0; i < index; i++) {
+    const m = msgs[i]
+    const meta = m?.metadata as Record<string, unknown> | null | undefined
+    if (
+      m?.role === 'assistant' &&
+      meta?.briefing_slot != null &&
+      !meta?.briefing_intermediate
+    ) {
+      return true
+    }
+  }
+  return false
+}
+
 defineExpose({ focus, prefill, send })
 </script>
 
@@ -303,13 +320,11 @@ defineExpose({ focus, prefill, send })
             v-for="(msg, index) in store.currentConversation?.messages ?? []"
             :key="msg.id"
           >
-            <!-- Briefing slot separator: shown before a 2nd+ briefing slot message -->
+            <!-- Briefing slot separator: before any non-first slot message (skip intermediate tool-call rows) -->
             <div
-              v-if="briefingMode && index > 0 && msg.role === 'assistant' && msg.metadata?.rss_item_ids"
+              v-if="briefingMode && msg.role === 'assistant' && msg.metadata?.briefing_slot && !msg.metadata?.briefing_intermediate && hasEarlierBriefingSlot(index)"
               class="briefing-slot-separator"
-            >
-              <span>New Briefing Update</span>
-            </div>
+            ></div>
             <ChatMessage
               :message="msg"
               @save-as-note="handleSaveAsNote"
@@ -537,24 +552,10 @@ defineExpose({ focus, prefill, send })
 
 /* Briefing slot separator */
 .briefing-slot-separator {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 1.25rem 0 0.5rem;
-  color: var(--color-text-muted, #888);
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  opacity: 0.7;
-}
-.briefing-slot-separator::before,
-.briefing-slot-separator::after {
-  content: '';
-  flex: 1;
   height: 1px;
+  margin: 1.25rem 0 0.75rem;
   background: var(--color-border, #333);
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
 /* Context sidebar */