feat(briefing): UI polish for agentic briefing messages

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>

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>