From 388940aae33c99327d07e9bf2ea52d1a9091dc2f Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Wed, 26 Aug 2026 12:54:35 +0300
Subject: [PATCH 1/4] feat(chat): redesign chat history pages in admin and app
 (CLEAN-47)

Two-column layout with a slim header and right rail (meta, summary,
navigation mini-map, export), reworked bubbles per the design mockup.
Admin groups tool_call/tool_result pairs client-side and attaches them
as collapsible rows above the assistant reply they belong to. Colors go
through theme tokens so dark mode keeps working.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../chat/components/chat/detail/MetaCard.vue  |  48 ++++
 .../chat/components/chat/detail/NavMap.vue    |  34 +++
 .../chat/components/chat/detail/Provider.vue  | 143 +++++++----
 .../components/chat/detail/SummaryCard.vue    | 106 ++++----
 .../chat/components/chat/message/Bubble.vue   | 107 ++++----
 .../components/chat/message/ToolEvents.vue    |  67 +++++
 admin/slices/chat/utils/transcript.ts         | 118 +++++++++
 app/i18n.sync.json                            |   6 +
 .../chat/components/chat/detail/NavMap.vue    |  34 +++
 .../chat/components/chat/detail/Provider.vue  | 235 ++++++++++--------
 .../chat/components/chat/message/Bubble.vue   | 110 ++++----
 app/slices/chat/i18n/locales/en.json          |  10 +-
 app/slices/chat/i18n/locales/ru.json          |  10 +-
 app/slices/chat/utils/transcript.ts           |  27 ++
 14 files changed, 757 insertions(+), 298 deletions(-)
 create mode 100644 admin/slices/chat/components/chat/detail/MetaCard.vue
 create mode 100644 admin/slices/chat/components/chat/detail/NavMap.vue
 create mode 100644 admin/slices/chat/components/chat/message/ToolEvents.vue
 create mode 100644 admin/slices/chat/utils/transcript.ts
 create mode 100644 app/slices/chat/components/chat/detail/NavMap.vue
 create mode 100644 app/slices/chat/utils/transcript.ts

diff --git a/admin/slices/chat/components/chat/detail/MetaCard.vue b/admin/slices/chat/components/chat/detail/MetaCard.vue
new file mode 100644
index 0000000..0df697b
--- /dev/null
+++ b/admin/slices/chat/components/chat/detail/MetaCard.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { IChatSession } from '#chat/stores/chat';
+
+defineProps<{ session: IChatSession }>();
+const showTools = defineModel<boolean>('showTools', { required: true });
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5 rounded-xl border border-border/70 bg-card px-4 py-3.5">
+    <div class="flex items-center justify-between gap-3 text-[12.5px]">
+      <span class="text-muted-foreground/70">Messages</span>
+      <span class="font-medium">
+        {{ session.messageCount }} · {{ session.userMessageCount }} from user
+      </span>
+    </div>
+    <div class="flex items-center justify-between gap-3 text-[12.5px]">
+      <span class="text-muted-foreground/70">Last activity</span>
+      <span class="font-medium">
+        {{ session.lastMessageAt ? formatDateTime(session.lastMessageAt) : '—' }}
+      </span>
+    </div>
+    <div class="flex items-center justify-between gap-3 text-[12.5px]">
+      <span class="text-muted-foreground/70">Session</span>
+      <span class="truncate font-mono text-[11.5px] text-foreground/80">
+        {{ session.sessionKey }}
+      </span>
+    </div>
+
+    <div class="h-px bg-border/50" />
+
+    <label class="flex cursor-pointer items-center gap-2 text-[12.5px] text-foreground/80">
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="showTools"
+        class="relative h-[18px] w-8 shrink-0 rounded-full transition-colors"
+        :class="showTools ? 'bg-primary' : 'bg-muted-foreground/25'"
+        @click="showTools = !showTools"
+      >
+        <span
+          class="absolute top-0.5 size-3.5 rounded-full bg-white shadow-sm transition-[left]"
+          :class="showTools ? 'left-[15px]' : 'left-0.5'"
+        />
+      </button>
+      Tool events
+    </label>
+  </div>
+</template>
diff --git a/admin/slices/chat/components/chat/detail/NavMap.vue b/admin/slices/chat/components/chat/detail/NavMap.vue
new file mode 100644
index 0000000..ecb84bd
--- /dev/null
+++ b/admin/slices/chat/components/chat/detail/NavMap.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { INavMapItem } from '#chat/utils/transcript';
+
+defineProps<{ items: INavMapItem[] }>();
+defineEmits<{ jump: [id: string] }>();
+</script>
+
+<template>
+  <div
+    v-if="items.length"
+    class="flex flex-col gap-2 rounded-xl border border-border/70 bg-card px-4 pb-2 pt-3.5"
+  >
+    <span
+      class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70"
+    >
+      Navigation
+    </span>
+    <div class="-mx-2 flex max-h-64 flex-col overflow-y-auto">
+      <button
+        v-for="mi in items"
+        :key="mi.id"
+        type="button"
+        class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted/50"
+        @click="$emit('jump', mi.id)"
+      >
+        <span
+          class="size-[7px] shrink-0 rounded-full"
+          :class="mi.isUser ? 'bg-primary' : 'bg-muted-foreground/30'"
+        />
+        <span class="truncate text-xs text-foreground/80">{{ mi.snippet }}</span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/admin/slices/chat/components/chat/detail/Provider.vue b/admin/slices/chat/components/chat/detail/Provider.vue
index 703e6b1..f9ea54e 100644
--- a/admin/slices/chat/components/chat/detail/Provider.vue
+++ b/admin/slices/chat/components/chat/detail/Provider.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { IconArrowLeft } from '@tabler/icons-vue';
+import {
+  groupTranscript,
+  snippet,
+  type INavMapItem,
+} from '#chat/utils/transcript';
 
 const props = defineProps<{ id: string }>();
 const store = useChatStore();
@@ -12,64 +17,110 @@ const { messages, hasMore, loading, showTools, scroller, loadLatest, loadOlder }
   useChatTranscript(props.id);
 const { feedbackByMsg, rate } = useChatFeedback(props.id);
 
+const who = computed(
+  () => session.value?.title || session.value?.externalUserId || '—',
+);
+
+const grouped = computed(() => groupTranscript(messages.value));
+
+const navItems = computed<INavMapItem[]>(() =>
+  messages.value
+    .filter((m) => m.role === 'user' || m.role === 'assistant')
+    .map((m) => ({ id: m.id, isUser: m.role === 'user', snippet: snippet(m.text) }))
+    .filter((mi) => mi.snippet.length > 0),
+);
+
+function onJump(id: string) {
+  scroller.value
+    ?.querySelector(`[data-msg-id="${id}"]`)
+    ?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+}
+
 function onExport(format: 'json' | 'markdown' | 'csv') {
   void store.exportChat(props.id, format);
 }
 </script>
 
 <template>
-  <div class="mx-auto flex max-w-3xl flex-col gap-4">
-    <NuxtLink
-      to="/chats"
-      class="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
-    >
-      <IconArrowLeft class="size-4" /> Chats
-    </NuxtLink>
-
-    <ChatDetailSummaryCard
-      v-if="session"
-      :session="session"
-      @updated="session = $event"
-    />
-
-    <!-- Controls -->
-    <div class="flex items-center justify-between">
-      <label class="flex items-center gap-1.5 text-sm text-muted-foreground">
-        <Checkbox v-model="showTools" /> Show tool events
-      </label>
-      <div class="flex items-center gap-1.5">
-        <span class="text-xs text-muted-foreground">Export</span>
-        <Button size="sm" variant="outline" @click="onExport('json')">JSON</Button>
-        <Button size="sm" variant="outline" @click="onExport('markdown')">MD</Button>
-        <Button size="sm" variant="outline" @click="onExport('csv')">CSV</Button>
-        <Button size="sm" variant="ghost" :disabled="loading" @click="loadLatest">
-          Refresh
-        </Button>
+  <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
+    <!-- Slim header -->
+    <div class="flex items-center gap-3 border-b pb-3">
+      <NuxtLink
+        to="/chats"
+        class="inline-flex shrink-0 items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <IconArrowLeft class="size-4" /> Chats
+      </NuxtLink>
+      <div class="h-[18px] w-px bg-border" />
+      <div class="flex min-w-0 flex-1 items-baseline gap-2">
+        <span class="truncate text-[15px] font-semibold tracking-tight">{{ who }}</span>
+        <Badge v-if="session" variant="secondary" class="capitalize">
+          {{ session.channel }}
+        </Badge>
+        <Badge v-if="session?.archived" variant="outline">archived</Badge>
       </div>
+      <Button size="sm" variant="outline" :disabled="loading" @click="loadLatest">
+        Refresh
+      </Button>
     </div>
 
-    <!-- Transcript -->
-    <div
-      ref="scroller"
-      class="flex max-h-[65vh] flex-col gap-3 overflow-y-auto rounded-md border bg-card p-4"
-    >
-      <div v-if="hasMore" class="flex justify-center">
-        <Button size="sm" variant="outline" :disabled="loading" @click="loadOlder">
-          {{ loading ? 'Loading…' : 'Load older' }}
-        </Button>
-      </div>
+    <div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_300px]">
+      <!-- Feed -->
+      <div
+        ref="scroller"
+        class="flex h-[calc(100vh-10.5rem)] min-h-0 flex-col gap-4 overflow-y-auto pr-1"
+      >
+        <div v-if="hasMore" class="flex justify-center">
+          <Button size="sm" variant="outline" :disabled="loading" @click="loadOlder">
+            {{ loading ? 'Loading…' : 'Load older' }}
+          </Button>
+        </div>
+
+        <div
+          v-if="!messages.length && !loading"
+          class="py-16 text-center text-sm text-muted-foreground"
+        >
+          No messages in this session.
+        </div>
 
-      <div v-if="!messages.length && !loading" class="py-10 text-center text-sm text-muted-foreground">
-        No messages in this session.
+        <template v-for="item in grouped" :key="item.key">
+          <!-- Standalone tool events (no assistant reply after them) -->
+          <div v-if="item.message === null" class="pl-9">
+            <ChatMessageToolEvents :tools="item.tools" class="max-w-[82%]" />
+          </div>
+          <div v-else :data-msg-id="item.message.id" class="scroll-mt-2">
+            <ChatMessageBubble
+              :message="item.message"
+              :tools="item.tools"
+              :rating="feedbackByMsg[item.message.id] ?? null"
+              @rate="(r: 1 | -1) => rate(item.message!.id, r)"
+            />
+          </div>
+        </template>
       </div>
 
-      <ChatMessageBubble
-        v-for="m in messages"
-        :key="m.id"
-        :message="m"
-        :rating="feedbackByMsg[m.id] ?? null"
-        @rate="(r: 1 | -1) => rate(m.id, r)"
-      />
+      <!-- Right rail -->
+      <div
+        class="flex flex-col gap-3.5 lg:max-h-[calc(100vh-10.5rem)] lg:overflow-y-auto"
+      >
+        <ChatDetailMetaCard
+          v-if="session"
+          :session="session"
+          v-model:show-tools="showTools"
+        />
+        <ChatDetailSummaryCard
+          v-if="session"
+          :session="session"
+          @updated="session = $event"
+        />
+        <ChatDetailNavMap :items="navItems" @jump="onJump" />
+        <div class="flex items-center gap-1.5 px-1">
+          <span class="mr-1 text-xs text-muted-foreground">Export</span>
+          <Button size="sm" variant="outline" @click="onExport('json')">JSON</Button>
+          <Button size="sm" variant="outline" @click="onExport('markdown')">MD</Button>
+          <Button size="sm" variant="outline" @click="onExport('csv')">CSV</Button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/admin/slices/chat/components/chat/detail/SummaryCard.vue b/admin/slices/chat/components/chat/detail/SummaryCard.vue
index 3efa7a2..398787d 100644
--- a/admin/slices/chat/components/chat/detail/SummaryCard.vue
+++ b/admin/slices/chat/components/chat/detail/SummaryCard.vue
@@ -28,72 +28,58 @@ const sentimentVariant: Record<string, 'default' | 'secondary' | 'outline' | 'de
   negative: 'destructive',
   mixed: 'secondary',
 };
-
-const who = computed(
-  () => props.session.title || props.session.externalUserId || '—',
-);
 </script>
 
 <template>
-  <div class="rounded-md border bg-card p-4">
-    <div class="flex flex-wrap items-center gap-2">
-      <span class="text-lg font-semibold">{{ who }}</span>
-      <Badge variant="secondary" class="capitalize">{{ session.channel }}</Badge>
-      <Badge v-if="session.archived" variant="outline">archived</Badge>
+  <div class="flex flex-col gap-2 rounded-xl border border-border/70 bg-card px-4 py-3.5">
+    <div class="flex items-center justify-between gap-2">
+      <span
+        class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70"
+      >
+        Summary
+      </span>
+      <button
+        type="button"
+        class="rounded-[7px] bg-muted px-2.5 py-1 text-xs font-medium text-foreground/80 transition-colors hover:bg-muted/70 disabled:opacity-50"
+        :disabled="summarizing"
+        @click="onSummarize"
+      >
+        {{ summarizing ? 'Summarizing…' : session.summary ? 'Re-summarize' : 'Summarize' }}
+      </button>
     </div>
-    <div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-      <span>{{ session.messageCount }} messages · {{ session.userMessageCount }} from user</span>
-      <span>Last activity {{ session.lastMessageAt ? formatDateTime(session.lastMessageAt) : '—' }}</span>
-      <span class="font-mono">{{ session.sessionKey }}</span>
+
+    <div v-if="session.insights" class="flex flex-wrap items-center gap-1.5">
+      <Badge
+        :variant="sentimentVariant[session.insights.sentiment] ?? 'secondary'"
+        class="capitalize"
+      >
+        {{ session.insights.sentiment }}
+      </Badge>
+      <Badge variant="outline" class="capitalize">
+        {{ session.insights.resolved ? 'resolved' : 'unresolved' }}
+      </Badge>
+      <Badge variant="outline" class="capitalize">
+        {{ session.insights.language }}
+      </Badge>
     </div>
-    <!-- LLM summary + insights -->
-    <div class="mt-3 rounded bg-muted/40 p-3">
-      <div class="flex items-center justify-between gap-2">
-        <div class="flex flex-wrap items-center gap-1.5">
-          <span class="text-xs font-medium text-muted-foreground">Summary &amp; insights</span>
-          <!-- sentiment / resolved / language sit by the header, apart from topics -->
-          <template v-if="session.insights">
-            <Badge
-              :variant="sentimentVariant[session.insights.sentiment] ?? 'secondary'"
-              class="capitalize"
-            >
-              {{ session.insights.sentiment }}
-            </Badge>
-            <Badge variant="outline" class="capitalize">
-              {{ session.insights.resolved ? 'resolved' : 'unresolved' }}
-            </Badge>
-            <Badge variant="outline" class="capitalize">
-              {{ session.insights.language }}
-            </Badge>
-          </template>
-        </div>
-        <Button size="sm" variant="outline" :disabled="summarizing" @click="onSummarize">
-          {{ summarizing ? 'Summarizing…' : session.summary ? 'Re-summarize' : 'Summarize' }}
-        </Button>
-      </div>
-      <p v-if="insightError" class="mt-2 text-sm text-destructive">
-        {{ insightError }}
-      </p>
-      <p v-if="session.summary" class="mt-2 text-sm text-muted-foreground">
-        {{ session.summary }}
-      </p>
-      <p v-else class="mt-2 text-sm text-muted-foreground">
-        No summary yet — click Summarize to generate one.
-      </p>
-      <!-- Topic tags only -->
-      <div
-        v-if="session.insights?.topics?.length"
-        class="mt-2 flex flex-wrap items-center gap-1.5"
+
+    <p v-if="insightError" class="text-xs text-destructive">{{ insightError }}</p>
+    <p v-if="session.summary" class="text-[12.5px] leading-relaxed text-muted-foreground">
+      {{ session.summary }}
+    </p>
+    <p v-else class="text-[12.5px] leading-relaxed text-muted-foreground/70">
+      No summary yet — click Summarize to generate one.
+    </p>
+
+    <div v-if="session.insights?.topics?.length" class="flex flex-wrap items-center gap-1.5">
+      <Badge
+        v-for="topic in session.insights.topics"
+        :key="topic"
+        variant="outline"
+        class="capitalize"
       >
-        <Badge
-          v-for="topic in session.insights.topics"
-          :key="topic"
-          variant="outline"
-          class="capitalize"
-        >
-          {{ topic }}
-        </Badge>
-      </div>
+        {{ topic }}
+      </Badge>
     </div>
   </div>
 </template>
diff --git a/admin/slices/chat/components/chat/message/Bubble.vue b/admin/slices/chat/components/chat/message/Bubble.vue
index 1a0ad5e..a140b9e 100644
--- a/admin/slices/chat/components/chat/message/Bubble.vue
+++ b/admin/slices/chat/components/chat/message/Bubble.vue
@@ -1,19 +1,24 @@
 <script setup lang="ts">
 import { renderMarkdown } from '#bridle/utils/markdown';
-import { User, Bot, Wrench, FileText, ThumbsUp, ThumbsDown } from 'lucide-vue-next';
+import { Bot, FileText, ThumbsUp, ThumbsDown } from 'lucide-vue-next';
 import type { IChatMessage } from '#chat/stores/chat';
+import { formatMessageTime, type IToolEvent } from '#chat/utils/transcript';
 
-// Read-only transcript message. Unlike the bridle widget's Message.vue (coupled
-// to live parts / streaming / debug inspect), this renders a single persisted
-// event by role: user/assistant bubbles, a collapsible summary marker for
-// compacted history, and compact tool_call/tool_result blocks for the debug view.
+// Read-only transcript message in the redesigned feed. Tool events arrive
+// pre-grouped (see groupTranscript) and render as collapsible rows attached
+// above the assistant reply they belong to.
 // `rating` is the current user's 👍/👎 on this message (1 | -1 | null).
-const props = defineProps<{ message: IChatMessage; rating?: number | null }>();
+const props = defineProps<{
+  message: IChatMessage;
+  tools?: IToolEvent[];
+  rating?: number | null;
+}>();
 const emit = defineEmits<{ rate: [rating: 1 | -1] }>();
 
 const role = computed(() => props.message.role);
 const isUser = computed(() => role.value === 'user');
 const html = computed(() => renderMarkdown(props.message.text));
+const time = computed(() => formatMessageTime(props.message.ts));
 
 const summaryOpen = ref(false);
 // Compaction stores the archive wrapped in [ARCHIVED CONTEXT …] markers — strip
@@ -25,6 +30,17 @@ const summaryText = computed(() =>
     .trim(),
 );
 
+const copied = ref(false);
+function onCopy() {
+  navigator.clipboard
+    .writeText(props.message.text)
+    .then(() => {
+      copied.value = true;
+      setTimeout(() => (copied.value = false), 1500);
+    })
+    .catch(() => {});
+}
+
 function onMarkdownClick(event: MouseEvent) {
   const btn = (event.target as HTMLElement | null)?.closest<HTMLButtonElement>(
     'button[data-action="copy"]',
@@ -44,8 +60,8 @@ function onMarkdownClick(event: MouseEvent) {
 
 <template>
   <!-- Summary marker: compaction folded older turns into a gist -->
-  <div v-if="role === 'summary'" class="my-2 flex justify-center">
-    <div class="w-full max-w-2xl rounded-md border border-dashed bg-muted/40 px-3 py-2 text-sm">
+  <div v-if="role === 'summary'" class="my-1 flex justify-center">
+    <div class="w-full rounded-xl border border-dashed bg-muted/30 px-3 py-2 text-sm">
       <button
         type="button"
         class="flex w-full items-center gap-2 text-left text-muted-foreground"
@@ -55,18 +71,9 @@ function onMarkdownClick(event: MouseEvent) {
         <span class="font-medium">Earlier in this conversation — summarized</span>
         <span class="ml-auto text-xs">{{ summaryOpen ? 'Hide' : 'Show' }}</span>
       </button>
-      <p v-if="summaryOpen" class="mt-2 whitespace-pre-wrap text-muted-foreground">{{ summaryText }}</p>
-    </div>
-  </div>
-
-  <!-- Tool events (debug view) -->
-  <div v-else-if="role === 'tool_call' || role === 'tool_result'" class="my-1 flex justify-center">
-    <div class="w-full max-w-2xl rounded-md border bg-muted/30 px-3 py-2 font-mono text-xs">
-      <div class="mb-1 flex items-center gap-1.5 text-muted-foreground">
-        <Wrench class="size-3" />
-        <span>{{ role === 'tool_call' ? 'tool call' : 'tool result' }}</span>
-      </div>
-      <pre class="overflow-x-auto whitespace-pre-wrap wrap-break-word">{{ message.text }}</pre>
+      <p v-if="summaryOpen" class="mt-2 whitespace-pre-wrap text-muted-foreground">
+        {{ summaryText }}
+      </p>
     </div>
   </div>
 
@@ -75,41 +82,44 @@ function onMarkdownClick(event: MouseEvent) {
     {{ message.text }}
   </div>
 
-  <!-- User / assistant bubble -->
-  <div
-    v-else
-    :class="cn('flex w-full items-start gap-2', isUser ? 'flex-row-reverse' : 'flex-row')"
-  >
+  <!-- User message: dark bubble on the right, time below -->
+  <div v-else-if="isUser" class="flex flex-col items-end">
     <div
-      :class="
-        cn(
-          'flex size-7 shrink-0 items-center justify-center rounded-full',
-          isUser ? 'bg-primary text-primary-foreground' : 'bg-muted text-foreground',
-        )
-      "
+      class="max-w-[72%] whitespace-pre-wrap wrap-break-word rounded-2xl rounded-br-sm bg-primary px-4 py-2.5 text-sm leading-relaxed text-primary-foreground"
     >
-      <User v-if="isUser" class="size-4" />
-      <Bot v-else class="size-4" />
+      {{ message.text }}
     </div>
+    <span class="mt-1 text-[11px] text-muted-foreground/60">{{ time }}</span>
+  </div>
+
+  <!-- Assistant: avatar chip, attached tool rows, bordered bubble, actions row -->
+  <div v-else class="flex items-start gap-2.5">
     <div
-      :class="
-        cn(
-          'min-w-0 max-w-[80%] rounded-lg px-3 py-2 text-sm',
-          isUser ? 'bg-primary text-primary-foreground' : 'bg-muted',
-        )
-      "
+      class="mt-0.5 flex size-6.5 shrink-0 items-center justify-center rounded-lg border bg-card text-muted-foreground"
     >
-      <p v-if="isUser" class="whitespace-pre-wrap wrap-break-word">{{ message.text }}</p>
-      <div v-else class="prose prose-sm max-w-none dark:prose-invert wrap-break-word" v-html="html" @click="onMarkdownClick" />
+      <Bot class="size-3.5" />
+    </div>
+    <div class="flex min-w-0 max-w-[82%] flex-col gap-1.5">
+      <ChatMessageToolEvents v-if="tools?.length" :tools="tools" />
+
+      <div
+        class="rounded-2xl rounded-tl-sm border border-border/70 bg-card px-4 py-3 text-sm leading-relaxed"
+      >
+        <div
+          class="prose prose-sm max-w-none dark:prose-invert wrap-break-word"
+          v-html="html"
+          @click="onMarkdownClick"
+        />
+      </div>
 
-      <!-- Feedback (assistant only) -->
-      <div v-if="!isUser" class="mt-1.5 flex items-center gap-0.5">
+      <div class="flex items-center gap-2 pl-1">
+        <span class="text-[11px] text-muted-foreground/60">{{ time }}</span>
         <button
           type="button"
           aria-label="Helpful"
           :class="
             cn(
-              'rounded p-1 text-muted-foreground transition-colors hover:text-foreground',
+              'rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-foreground',
               rating === 1 && 'text-green-600',
             )
           "
@@ -122,7 +132,7 @@ function onMarkdownClick(event: MouseEvent) {
           aria-label="Not helpful"
           :class="
             cn(
-              'rounded p-1 text-muted-foreground transition-colors hover:text-foreground',
+              'rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-foreground',
               rating === -1 && 'text-red-600',
             )
           "
@@ -130,6 +140,13 @@ function onMarkdownClick(event: MouseEvent) {
         >
           <ThumbsDown class="size-3.5" />
         </button>
+        <button
+          type="button"
+          class="text-[11px] text-muted-foreground/60 transition-colors hover:text-foreground"
+          @click="onCopy"
+        >
+          {{ copied ? 'Copied' : 'Copy' }}
+        </button>
       </div>
     </div>
   </div>
diff --git a/admin/slices/chat/components/chat/message/ToolEvents.vue b/admin/slices/chat/components/chat/message/ToolEvents.vue
new file mode 100644
index 0000000..a391101
--- /dev/null
+++ b/admin/slices/chat/components/chat/message/ToolEvents.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ChevronRight } from 'lucide-vue-next';
+import { formatDuration, type IToolEvent } from '#chat/utils/transcript';
+
+defineProps<{ tools: IToolEvent[] }>();
+
+const open = ref<Record<string, boolean>>({});
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      v-for="t in tools"
+      :key="t.id"
+      class="overflow-hidden rounded-[10px] border border-border/70 bg-muted/20"
+    >
+      <button
+        type="button"
+        class="flex w-full items-center gap-2 px-2.5 py-1.5 text-left transition-colors hover:bg-muted/40"
+        @click="open[t.id] = !open[t.id]"
+      >
+        <ChevronRight
+          class="size-3 shrink-0 text-muted-foreground/60 transition-transform"
+          :class="open[t.id] && 'rotate-90'"
+        />
+        <span
+          class="rounded-[5px] bg-muted px-1.5 py-px text-[11px] font-medium text-muted-foreground"
+        >
+          tool
+        </span>
+        <span class="font-mono text-xs text-foreground/80">{{ t.name }}</span>
+        <span class="min-w-0 flex-1 truncate text-[11.5px] text-muted-foreground/70">
+          {{ t.args }}
+        </span>
+        <span
+          v-if="t.durationMs !== null"
+          class="shrink-0 text-[11px] text-muted-foreground/60"
+        >
+          {{ formatDuration(t.durationMs) }}
+        </span>
+      </button>
+      <div
+        v-if="open[t.id]"
+        class="flex flex-col gap-1.5 border-t border-border/50 px-3 py-2"
+      >
+        <template v-if="t.args">
+          <div class="text-[10.5px] uppercase tracking-wider text-muted-foreground/60">
+            Request
+          </div>
+          <pre
+            class="max-h-64 overflow-y-auto whitespace-pre-wrap wrap-break-word font-mono text-xs text-foreground/80"
+            >{{ t.args }}</pre
+          >
+        </template>
+        <template v-if="t.result !== null">
+          <div class="text-[10.5px] uppercase tracking-wider text-muted-foreground/60">
+            Result
+          </div>
+          <pre
+            class="max-h-64 overflow-y-auto whitespace-pre-wrap wrap-break-word font-mono text-xs text-foreground/80"
+            >{{ t.result }}</pre
+          >
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/admin/slices/chat/utils/transcript.ts b/admin/slices/chat/utils/transcript.ts
new file mode 100644
index 0000000..38750a4
--- /dev/null
+++ b/admin/slices/chat/utils/transcript.ts
@@ -0,0 +1,118 @@
+import type { IChatMessage } from '#chat/stores/chat';
+
+export interface IToolEvent {
+  id: string;
+  name: string;
+  args: string;
+  result: string | null;
+  durationMs: number | null;
+}
+
+export interface INavMapItem {
+  id: string;
+  isUser: boolean;
+  snippet: string;
+}
+
+export interface ITranscriptItem {
+  key: string;
+  /** null → standalone tool events with no assistant reply after them */
+  message: IChatMessage | null;
+  tools: IToolEvent[];
+}
+
+// Transcript reader renders tool_call as `name({...params})`.
+const CALL_RE = /^([\w.$:-]+)\((.*)\)$/s;
+
+/**
+ * Groups a flat transcript for display: consecutive tool_call/tool_result
+ * events pair up by order and attach to the next assistant reply — mirroring
+ * how the agent produced them. Orphans (tools with no reply after, results
+ * with no call) still surface as standalone items so nothing is hidden.
+ */
+export function groupTranscript(messages: IChatMessage[]): ITranscriptItem[] {
+  const items: ITranscriptItem[] = [];
+  let pending: { evt: IToolEvent; callTs: number; done: boolean }[] = [];
+
+  function flushPending() {
+    if (!pending.length) return;
+    items.push({
+      key: `tools-${pending[0]!.evt.id}`,
+      message: null,
+      tools: pending.map((p) => p.evt),
+    });
+    pending = [];
+  }
+
+  for (const m of messages) {
+    if (m.role === 'tool_call') {
+      const parsed = CALL_RE.exec(m.text.trim());
+      pending.push({
+        evt: {
+          id: m.id,
+          name: parsed?.[1] ?? 'tool',
+          args: parsed?.[2] ?? m.text,
+          result: null,
+          durationMs: null,
+        },
+        callTs: m.ts,
+        done: false,
+      });
+      continue;
+    }
+    if (m.role === 'tool_result') {
+      const open = pending.find((p) => !p.done);
+      if (open) {
+        open.evt.result = m.text;
+        open.evt.durationMs = Math.max(0, m.ts - open.callTs);
+        open.done = true;
+      } else {
+        pending.push({
+          evt: { id: m.id, name: 'tool', args: '', result: m.text, durationMs: null },
+          callTs: m.ts,
+          done: true,
+        });
+      }
+      continue;
+    }
+    if (m.role === 'assistant') {
+      items.push({ key: m.id, message: m, tools: pending.map((p) => p.evt) });
+      pending = [];
+      continue;
+    }
+    // user / summary / system: tools never span across these — flush first
+    flushPending();
+    items.push({ key: m.id, message: m, tools: [] });
+  }
+  flushPending();
+  return items;
+}
+
+export function formatDuration(ms: number | null): string {
+  if (ms === null) return '';
+  if (ms < 10_000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 60_000) return `${Math.round(ms / 1000)}s`;
+  return `${Math.floor(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`;
+}
+
+export function formatMessageTime(ts: number): string {
+  const d = new Date(ts);
+  const time = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const now = new Date();
+  const sameDay =
+    d.getFullYear() === now.getFullYear() &&
+    d.getMonth() === now.getMonth() &&
+    d.getDate() === now.getDate();
+  if (sameDay) return time;
+  return `${d.toLocaleDateString([], { day: 'numeric', month: 'short' })}, ${time}`;
+}
+
+/** One-line plain-text snippet for the navigation mini-map. */
+export function snippet(text: string, max = 64): string {
+  const line =
+    text
+      .split('\n')
+      .map((l) => l.replace(/[#*_`>~-]/g, '').trim())
+      .find((l) => l.length > 0) ?? '';
+  return line.length > max ? `${line.slice(0, max)}…` : line;
+}
diff --git a/app/i18n.sync.json b/app/i18n.sync.json
index 758c4bf..31e0798 100644
--- a/app/i18n.sync.json
+++ b/app/i18n.sync.json
@@ -62,6 +62,8 @@
       "history.sync": "8d261a372fde",
       "history.syncing": "8a046cc90ab0",
       "history.title": "0e7696009337",
+      "message.copied": "8d525e5f158b",
+      "message.copy": "e21f935f11d7",
       "message.helpful": "63c432db3ebb",
       "message.hide": "ac20a57bfde0",
       "message.not_helpful": "3c4ebf31165b",
@@ -74,10 +76,14 @@
       "session.load_older": "2fd15b734915",
       "session.loading": "ba3bbbe10d8b",
       "session.message_count": "ff43d682a3fb",
+      "session.meta_activity": "06475633ed3e",
+      "session.meta_messages": "04d7b4833927",
+      "session.navigation": "3db65f8c2a7d",
       "session.no_messages": "1e56e882e6e4",
       "session.no_summary": "f098ecd68006",
       "session.not_found_hint": "ca81b79f7f6d",
       "session.not_found_title": "d8e4dcef4f3d",
+      "session.refresh": "0e9161011702",
       "session.resolved": "dc676b428599",
       "session.unresolved": "27a888c9d5e6"
     },
diff --git a/app/slices/chat/components/chat/detail/NavMap.vue b/app/slices/chat/components/chat/detail/NavMap.vue
new file mode 100644
index 0000000..6a30c5c
--- /dev/null
+++ b/app/slices/chat/components/chat/detail/NavMap.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { INavMapItem } from '#chat/utils/transcript';
+
+defineProps<{ items: INavMapItem[] }>();
+defineEmits<{ jump: [id: string] }>();
+</script>
+
+<template>
+  <div
+    v-if="items.length"
+    class="flex flex-col gap-2 rounded-xl border border-border/70 bg-card px-4 pb-2 pt-3.5"
+  >
+    <span
+      class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70"
+    >
+      {{ $t('session.navigation') }}
+    </span>
+    <div class="-mx-2 flex max-h-64 flex-col overflow-y-auto">
+      <button
+        v-for="mi in items"
+        :key="mi.id"
+        type="button"
+        class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted/50"
+        @click="$emit('jump', mi.id)"
+      >
+        <span
+          class="size-[7px] shrink-0 rounded-full"
+          :class="mi.isUser ? 'bg-primary' : 'bg-muted-foreground/30'"
+        />
+        <span class="truncate text-xs text-foreground/80">{{ mi.snippet }}</span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/slices/chat/components/chat/detail/Provider.vue b/app/slices/chat/components/chat/detail/Provider.vue
index 6782d20..53e8950 100644
--- a/app/slices/chat/components/chat/detail/Provider.vue
+++ b/app/slices/chat/components/chat/detail/Provider.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ChatExportFormat, IChatMessage } from '#chat/stores/chat';
+import { snippet, type INavMapItem } from '#chat/utils/transcript';
 
 const props = defineProps<{ id: string }>();
 const chatStore = useChatStore();
@@ -89,6 +90,19 @@ function fmt(iso?: string | null): string {
   return iso ? new Date(iso).toLocaleString(locale.value) : '—';
 }
 
+const navItems = computed<INavMapItem[]>(() =>
+  messages.value
+    .filter((m) => m.role === 'user' || m.role === 'assistant')
+    .map((m) => ({ id: m.id, isUser: m.role === 'user', snippet: snippet(m.text) }))
+    .filter((mi) => mi.snippet.length > 0),
+);
+
+function onJump(id: string) {
+  scroller.value
+    ?.querySelector(`[data-msg-id="${id}"]`)
+    ?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+}
+
 const sentimentVariant: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
   positive: 'secondary',
   neutral: 'default',
@@ -98,14 +112,7 @@ const sentimentVariant: Record<string, 'default' | 'secondary' | 'outline' | 'de
 </script>
 
 <template>
-  <div class="mx-auto flex max-w-3xl flex-col gap-4">
-    <NuxtLink
-      to="/chats"
-      class="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
-    >
-      <Icon name="arrow-left" :size="16" /> {{ $t('history.title') }}
-    </NuxtLink>
-
+  <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
     <!-- Not found / not owned -->
     <div
       v-if="!session && !sessionPending"
@@ -118,37 +125,98 @@ const sentimentVariant: Record<string, 'default' | 'secondary' | 'outline' | 'de
     </div>
 
     <template v-else-if="session">
-      <!-- Meta header -->
-      <div class="rounded-md border bg-card p-4">
-        <span class="text-lg font-semibold">
+      <!-- Slim header -->
+      <div class="flex items-center gap-3 border-b pb-3">
+        <NuxtLink
+          to="/chats"
+          class="inline-flex shrink-0 items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <Icon name="arrow-left" :size="16" /> {{ $t('history.title') }}
+        </NuxtLink>
+        <div class="h-[18px] w-px bg-border" />
+        <span class="min-w-0 flex-1 truncate text-[15px] font-semibold tracking-tight">
           {{ heading ?? $t('session.fallback_title') }}
         </span>
+        <button
+          type="button"
+          class="rounded-md border px-3 py-1.5 text-xs font-medium text-muted-foreground transition hover:text-foreground disabled:opacity-50"
+          :disabled="loading"
+          @click="loadLatest"
+        >
+          {{ $t('session.refresh') }}
+        </button>
+      </div>
+
+      <div class="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_300px]">
+        <!-- Feed -->
         <div
-          class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground"
+          ref="scroller"
+          class="flex h-[calc(100vh-14rem)] min-h-0 flex-col gap-4 overflow-y-auto pr-1"
         >
-          <span>
-            {{
-              $t(
-                'session.message_count',
-                { count: session.messageCount },
-                session.messageCount,
-              )
-            }}
-          </span>
-          <span>
-            {{ $t('session.last_activity', { when: fmt(session.lastMessageAt) }) }}
-          </span>
+          <div v-if="hasMore" class="flex justify-center">
+            <button
+              type="button"
+              class="rounded-md border px-3 py-1.5 text-sm text-muted-foreground transition hover:text-foreground disabled:opacity-50"
+              :disabled="loading"
+              @click="loadOlder"
+            >
+              {{ $t(loading ? 'session.loading' : 'session.load_older') }}
+            </button>
+          </div>
+
+          <div
+            v-if="!messages.length && !loading"
+            class="py-16 text-center text-sm text-muted-foreground"
+          >
+            {{ $t('session.no_messages') }}
+          </div>
+
+          <div
+            v-for="m in messages"
+            :key="m.id"
+            :data-msg-id="m.id"
+            class="scroll-mt-2"
+          >
+            <ChatMessageBubble
+              :message="m"
+              :rating="feedbackByMsg[m.id] ?? null"
+              @rate="(r: 1 | -1) => onRate(m.id, r)"
+            />
+          </div>
         </div>
 
-        <!-- LLM gist: summary + insights -->
-        <div class="mt-3 rounded bg-muted/40 p-3">
-        <div class="flex items-center justify-between gap-2">
-          <div class="flex flex-wrap items-center gap-1.5">
-            <span class="text-xs font-medium text-muted-foreground">
+        <!-- Right rail -->
+        <div
+          class="flex flex-col gap-3.5 lg:max-h-[calc(100vh-14rem)] lg:overflow-y-auto"
+        >
+          <!-- Meta card -->
+          <div
+            class="flex flex-col gap-2.5 rounded-xl border border-border/70 bg-card px-4 py-3.5"
+          >
+            <div class="flex items-center justify-between gap-3 text-[12.5px]">
+              <span class="text-muted-foreground/70">
+                {{ $t('session.meta_messages') }}
+              </span>
+              <span class="font-medium">{{ session.messageCount }}</span>
+            </div>
+            <div class="flex items-center justify-between gap-3 text-[12.5px]">
+              <span class="text-muted-foreground/70">
+                {{ $t('session.meta_activity') }}
+              </span>
+              <span class="font-medium">{{ fmt(session.lastMessageAt) }}</span>
+            </div>
+          </div>
+
+          <!-- Summary & insights (read-only) -->
+          <div
+            class="flex flex-col gap-2 rounded-xl border border-border/70 bg-card px-4 py-3.5"
+          >
+            <span
+              class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70"
+            >
               {{ $t('session.insights_title') }}
             </span>
-            <!-- sentiment / resolved / language sit by the header, apart from topics -->
-            <template v-if="session.insights">
+            <div v-if="session.insights" class="flex flex-wrap items-center gap-1.5">
               <Badge
                 :variant="sentimentVariant[session.insights.sentiment] ?? 'secondary'"
                 class="capitalize"
@@ -161,76 +229,49 @@ const sentimentVariant: Record<string, 'default' | 'secondary' | 'outline' | 'de
               <Badge variant="outline" class="capitalize">
                 {{ session.insights.language }}
               </Badge>
-            </template>
+            </div>
+            <p
+              v-if="session.summary"
+              class="text-[12.5px] leading-relaxed text-muted-foreground"
+            >
+              {{ session.summary }}
+            </p>
+            <p v-else class="text-[12.5px] leading-relaxed text-muted-foreground/70">
+              {{ $t('session.no_summary') }}
+            </p>
+            <div
+              v-if="session.insights?.topics?.length"
+              class="flex flex-wrap items-center gap-1.5"
+            >
+              <Badge
+                v-for="topic in session.insights.topics"
+                :key="topic"
+                variant="outline"
+                class="capitalize"
+              >
+                {{ topic }}
+              </Badge>
+            </div>
           </div>
-        </div>
-        <p v-if="session.summary" class="mt-2 text-sm text-muted-foreground">
-          {{ session.summary }}
-        </p>
-        <p v-else class="mt-2 text-sm text-muted-foreground">
-          {{ $t('session.no_summary') }}
-        </p>
-        <!-- Topic tags only -->
-        <div
-          v-if="session.insights?.topics?.length"
-          class="mt-2 flex flex-wrap items-center gap-1.5"
-        >
-          <Badge
-            v-for="topic in session.insights.topics"
-            :key="topic"
-            variant="outline"
-            class="capitalize"
-          >
-            {{ topic }}
-          </Badge>
-        </div>
-      </div>
-      </div>
 
-      <!-- Export controls -->
-      <div class="flex items-center justify-end gap-1.5">
-        <span class="text-xs text-muted-foreground">{{ $t('session.export') }}</span>
-        <button
-          v-for="f in (['json', 'markdown', 'csv'] as ChatExportFormat[])"
-          :key="f"
-          type="button"
-          class="rounded-md border px-2.5 py-1 text-xs font-medium text-muted-foreground transition hover:text-foreground"
-          @click="onExport(f)"
-        >
-          {{ f === 'markdown' ? 'MD' : f.toUpperCase() }}
-        </button>
-      </div>
-
-      <!-- Transcript -->
-      <div
-        ref="scroller"
-        class="flex max-h-[70vh] flex-col gap-3 overflow-y-auto rounded-md border bg-card p-4"
-      >
-        <div v-if="hasMore" class="flex justify-center">
-          <button
-            type="button"
-            class="rounded-md border px-3 py-1.5 text-sm text-muted-foreground transition hover:text-foreground disabled:opacity-50"
-            :disabled="loading"
-            @click="loadOlder"
-          >
-            {{ $t(loading ? 'session.loading' : 'session.load_older') }}
-          </button>
-        </div>
+          <ChatDetailNavMap :items="navItems" @jump="onJump" />
 
-        <div
-          v-if="!messages.length && !loading"
-          class="py-10 text-center text-sm text-muted-foreground"
-        >
-          {{ $t('session.no_messages') }}
+          <!-- Export -->
+          <div class="flex items-center gap-1.5 px-1">
+            <span class="mr-1 text-xs text-muted-foreground">
+              {{ $t('session.export') }}
+            </span>
+            <button
+              v-for="f in (['json', 'markdown', 'csv'] as ChatExportFormat[])"
+              :key="f"
+              type="button"
+              class="rounded-md border px-2.5 py-1 text-xs font-medium text-muted-foreground transition hover:text-foreground"
+              @click="onExport(f)"
+            >
+              {{ f === 'markdown' ? 'MD' : f.toUpperCase() }}
+            </button>
+          </div>
         </div>
-
-        <ChatMessageBubble
-          v-for="m in messages"
-          :key="m.id"
-          :message="m"
-          :rating="feedbackByMsg[m.id] ?? null"
-          @rate="(r: 1 | -1) => onRate(m.id, r)"
-        />
       </div>
     </template>
   </div>
diff --git a/app/slices/chat/components/chat/message/Bubble.vue b/app/slices/chat/components/chat/message/Bubble.vue
index e8d5fbd..9a1eac6 100644
--- a/app/slices/chat/components/chat/message/Bubble.vue
+++ b/app/slices/chat/components/chat/message/Bubble.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { renderMarkdown } from '#bridle/utils/markdown';
 import type { IChatMessage } from '#chat/stores/chat';
+import { formatMessageTime } from '#chat/utils/transcript';
 
 // Read-only transcript message. Renders one persisted event by role: user /
 // assistant bubbles, plus a collapsible marker for `summary` events (where
@@ -9,6 +10,8 @@ import type { IChatMessage } from '#chat/stores/chat';
 const props = defineProps<{ message: IChatMessage; rating?: number | null }>();
 const emit = defineEmits<{ rate: [rating: 1 | -1] }>();
 
+const { locale, t } = useI18n();
+
 const isUser = computed(() => props.message.role === 'user');
 
 // Assistant text may contain markdown; user text stays plain (typed by a human,
@@ -16,6 +19,7 @@ const isUser = computed(() => props.message.role === 'user');
 const html = computed(() =>
   isUser.value ? null : renderMarkdown(props.message.text),
 );
+const time = computed(() => formatMessageTime(props.message.ts, locale.value));
 
 const summaryOpen = ref(false);
 // Compaction wraps the archive in [ARCHIVED CONTEXT …] markers — strip them so
@@ -26,13 +30,24 @@ const summaryText = computed(() =>
     .replace(/\s*\[END ARCHIVED CONTEXT\]\s*$/i, '')
     .trim(),
 );
+
+const copied = ref(false);
+function onCopy() {
+  navigator.clipboard
+    .writeText(props.message.text)
+    .then(() => {
+      copied.value = true;
+      setTimeout(() => (copied.value = false), 1500);
+    })
+    .catch(() => {});
+}
 </script>
 
 <template>
   <!-- Summary marker: compaction folded older turns into a gist -->
   <div v-if="message.role === 'summary'" class="my-1 flex justify-center">
     <div
-      class="w-full max-w-2xl rounded-md border border-dashed bg-muted/40 px-3 py-2 text-sm"
+      class="w-full rounded-xl border border-dashed bg-muted/30 px-3 py-2 text-sm"
     >
       <button
         type="button"
@@ -54,65 +69,68 @@ const summaryText = computed(() =>
     </div>
   </div>
 
-  <!-- User / assistant bubble -->
-  <div
-    v-else
-    class="flex items-start gap-2"
-    :class="isUser ? 'flex-row-reverse' : 'flex-row'"
-  >
+  <!-- User message: dark bubble on the right, time below -->
+  <div v-else-if="isUser" class="flex flex-col items-end">
     <div
-      class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
-      :class="
-        isUser
-          ? 'bg-primary text-primary-foreground'
-          : 'bg-linear-to-br from-primary/25 to-primary/5 text-primary'
-      "
+      class="max-w-[85%] whitespace-pre-wrap wrap-break-word rounded-2xl rounded-br-sm bg-primary px-4 py-2.5 text-sm leading-relaxed text-primary-foreground sm:max-w-[72%]"
     >
-      <Icon :name="isUser ? 'user' : 'bot'" :size="15" />
+      {{ message.text }}
     </div>
+    <span class="mt-1 text-[11px] text-muted-foreground/60">{{ time }}</span>
+  </div>
+
+  <!-- Assistant: avatar chip, bordered bubble, actions row below -->
+  <div v-else class="flex items-start gap-2.5">
     <div
-      class="max-w-[85%] sm:max-w-[75%] wrap-break-word rounded-2xl px-4 py-2.5 text-sm leading-relaxed shadow-sm"
-      :class="
-        isUser
-          ? 'whitespace-pre-wrap rounded-br-md bg-primary text-primary-foreground'
-          : 'chat-md rounded-tl-md bg-muted text-foreground'
-      "
+      class="mt-0.5 flex size-6.5 shrink-0 items-center justify-center rounded-lg border bg-card text-muted-foreground"
     >
-      <template v-if="isUser">{{ message.text }}</template>
-      <template v-else>
+      <Icon name="bot" :size="14" />
+    </div>
+    <div class="flex min-w-0 max-w-[85%] flex-col gap-1.5 sm:max-w-[82%]">
+      <div
+        class="chat-md rounded-2xl rounded-tl-sm border border-border/70 bg-card px-4 py-3 text-sm leading-relaxed"
+      >
         <div v-html="html" />
-        <!-- Was this reply helpful? -->
-        <div class="mt-1.5 flex items-center gap-0.5">
-          <button
-            type="button"
-            :aria-label="$t('message.helpful')"
-            class="rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
-            :class="rating === 1 && 'text-emerald-600'"
-            @click="emit('rate', 1)"
-          >
-            <Icon name="thumbs-up" :size="14" />
-          </button>
-          <button
-            type="button"
-            :aria-label="$t('message.not_helpful')"
-            class="rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
-            :class="rating === -1 && 'text-rose-600'"
-            @click="emit('rate', -1)"
-          >
-            <Icon name="thumbs-down" :size="14" />
-          </button>
-        </div>
-      </template>
+      </div>
+
+      <div class="flex items-center gap-2 pl-1">
+        <span class="text-[11px] text-muted-foreground/60">{{ time }}</span>
+        <button
+          type="button"
+          :aria-label="$t('message.helpful')"
+          class="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-foreground"
+          :class="rating === 1 && 'text-emerald-600'"
+          @click="emit('rate', 1)"
+        >
+          <Icon name="thumbs-up" :size="14" />
+        </button>
+        <button
+          type="button"
+          :aria-label="$t('message.not_helpful')"
+          class="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-foreground"
+          :class="rating === -1 && 'text-rose-600'"
+          @click="emit('rate', -1)"
+        >
+          <Icon name="thumbs-down" :size="14" />
+        </button>
+        <button
+          type="button"
+          class="text-[11px] text-muted-foreground/60 transition-colors hover:text-foreground"
+          @click="onCopy"
+        >
+          {{ t(copied ? 'message.copied' : 'message.copy') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <style>
 /* Markdown inside an assistant bubble (global so v-html children pick it up). */
-.chat-md > *:first-child {
+.chat-md > div > *:first-child {
   margin-top: 0;
 }
-.chat-md > *:last-child {
+.chat-md > div > *:last-child {
   margin-bottom: 0;
 }
 .chat-md p {
diff --git a/app/slices/chat/i18n/locales/en.json b/app/slices/chat/i18n/locales/en.json
index 700b87f..e47f6c4 100644
--- a/app/slices/chat/i18n/locales/en.json
+++ b/app/slices/chat/i18n/locales/en.json
@@ -21,13 +21,19 @@
     "export": "Export",
     "load_older": "Load older",
     "loading": "Loading…",
-    "no_messages": "No messages in this conversation."
+    "no_messages": "No messages in this conversation.",
+    "navigation": "Navigation",
+    "refresh": "Refresh",
+    "meta_messages": "Messages",
+    "meta_activity": "Last activity"
   },
   "message": {
     "summarized": "Earlier in this conversation — summarized",
     "show": "Show",
     "hide": "Hide",
     "helpful": "Helpful",
-    "not_helpful": "Not helpful"
+    "not_helpful": "Not helpful",
+    "copy": "Copy",
+    "copied": "Copied"
   }
 }
diff --git a/app/slices/chat/i18n/locales/ru.json b/app/slices/chat/i18n/locales/ru.json
index 8cf32ba..0d8ecaf 100644
--- a/app/slices/chat/i18n/locales/ru.json
+++ b/app/slices/chat/i18n/locales/ru.json
@@ -21,13 +21,19 @@
     "export": "Экспорт",
     "load_older": "Загрузить ранние",
     "loading": "Загрузка…",
-    "no_messages": "В этой беседе нет сообщений."
+    "no_messages": "В этой беседе нет сообщений.",
+    "navigation": "Навигация",
+    "refresh": "Обновить",
+    "meta_messages": "Сообщений",
+    "meta_activity": "Последняя активность"
   },
   "message": {
     "summarized": "Ранее в этой беседе — сводка",
     "show": "Показать",
     "hide": "Скрыть",
     "helpful": "Полезно",
-    "not_helpful": "Не полезно"
+    "not_helpful": "Не полезно",
+    "copy": "Копировать",
+    "copied": "Скопировано"
   }
 }
diff --git a/app/slices/chat/utils/transcript.ts b/app/slices/chat/utils/transcript.ts
new file mode 100644
index 0000000..b412ca2
--- /dev/null
+++ b/app/slices/chat/utils/transcript.ts
@@ -0,0 +1,27 @@
+export interface INavMapItem {
+  id: string;
+  isUser: boolean;
+  snippet: string;
+}
+
+export function formatMessageTime(ts: number, locale?: string): string {
+  const d = new Date(ts);
+  const time = d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
+  const now = new Date();
+  const sameDay =
+    d.getFullYear() === now.getFullYear() &&
+    d.getMonth() === now.getMonth() &&
+    d.getDate() === now.getDate();
+  if (sameDay) return time;
+  return `${d.toLocaleDateString(locale, { day: 'numeric', month: 'short' })}, ${time}`;
+}
+
+/** One-line plain-text snippet for the navigation mini-map. */
+export function snippet(text: string, max = 64): string {
+  const line =
+    text
+      .split('\n')
+      .map((l) => l.replace(/[#*_`>~-]/g, '').trim())
+      .find((l) => l.length > 0) ?? '';
+  return line.length > max ? `${line.slice(0, max)}…` : line;
+}

From 2d01b1b432dffc801c174a23c6d00a72c1755e7e Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Wed, 26 Aug 2026 13:04:09 +0300
Subject: [PATCH 2/4] fix(chat): let the history detail page span full width

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 admin/slices/chat/components/chat/detail/Provider.vue | 2 +-
 app/slices/chat/components/chat/detail/Provider.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/admin/slices/chat/components/chat/detail/Provider.vue b/admin/slices/chat/components/chat/detail/Provider.vue
index f9ea54e..a6baca1 100644
--- a/admin/slices/chat/components/chat/detail/Provider.vue
+++ b/admin/slices/chat/components/chat/detail/Provider.vue
@@ -42,7 +42,7 @@ function onExport(format: 'json' | 'markdown' | 'csv') {
 </script>
 
 <template>
-  <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
+  <div class="flex w-full flex-col gap-4">
     <!-- Slim header -->
     <div class="flex items-center gap-3 border-b pb-3">
       <NuxtLink
diff --git a/app/slices/chat/components/chat/detail/Provider.vue b/app/slices/chat/components/chat/detail/Provider.vue
index 53e8950..443bd60 100644
--- a/app/slices/chat/components/chat/detail/Provider.vue
+++ b/app/slices/chat/components/chat/detail/Provider.vue
@@ -112,7 +112,7 @@ const sentimentVariant: Record<string, 'default' | 'secondary' | 'outline' | 'de
 </script>
 
 <template>
-  <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
+  <div class="flex w-full flex-col gap-4">
     <!-- Not found / not owned -->
     <div
       v-if="!session && !sessionPending"

From e7c861a03a998af7eabff184bfe45201dde455c3 Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Wed, 26 Aug 2026 13:13:02 +0300
Subject: [PATCH 3/4] chore: bump version to 0.3.36

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 448c7f9..20d8243 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ranch",
-  "version": "0.3.35",
+  "version": "0.3.36",
   "private": true,
   "packageManager": "bun@1.2.12",
   "workspaces": [

From 85a3116310c205a2629b85fb881af9e048be66b1 Mon Sep 17 00:00:00 2001
From: "Maksym Hryzodub [DREAM]" <maksym.hryzodub@dreamvention.com>
Date: Wed, 26 Aug 2026 13:33:08 +0300
Subject: [PATCH 4/4] fix(admin): sanitize paddock evaluation report markdown
 before v-html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The only v-html fed by unsanitized HTML — every other usage already goes
through renderMarkdown (marked + DOMPurify allowlist) or escapes first.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../slices/paddock/components/paddock/evaluation/Provider.vue  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/admin/slices/paddock/components/paddock/evaluation/Provider.vue b/admin/slices/paddock/components/paddock/evaluation/Provider.vue
index 1d51d71..ff13bc8 100644
--- a/admin/slices/paddock/components/paddock/evaluation/Provider.vue
+++ b/admin/slices/paddock/components/paddock/evaluation/Provider.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DOMPurify from 'dompurify';
 import { marked } from 'marked';
 import { toast } from 'vue-sonner';
 import {
@@ -396,7 +397,7 @@ onUnmounted(() => {
 });
 const renderedReportHtml = computed(() => {
   if (!report.value?.md || !markdownRendered.value) return '';
-  return marked.parse(report.value.md, { async: false }) as string;
+  return DOMPurify.sanitize(marked.parse(report.value.md, { async: false }) as string);
 });
 
 // Tick every second to refresh elapsed-time display while running