diff --git a/webclient/src/components/messages/AssistantMessage.vue b/webclient/src/components/messages/AssistantMessage.vue
index 2d3c89c..ab02c3c 100644
--- a/webclient/src/components/messages/AssistantMessage.vue
+++ b/webclient/src/components/messages/AssistantMessage.vue
@@ -10,24 +10,34 @@
     />
 
     <!-- Tool / plan cards -->
-    <template v-for="(item, i) in msg.tools" :key="i">
-      <ThinkingCard v-if="item.kind === 'turn_thinking'" :msg="item" />
-      <ContentCard
-        v-else-if="item.kind === 'tool' && item.name === 'content_publish'"
-        :tool="item"
-        :default-open="contentToolKey(msg, i) === latestContentToolKey"
-        :collapse-token="latestContentToolKey"
-      />
-      <details v-else-if="item.kind === 'plan'" class="plan-card">
-        <summary>
-          <i class="ph ph-map-trifold"></i>
-          Plan
-          <i class="ph ph-caret-down plan-chevron"></i>
-        </summary>
-        <div class="plan-body" v-html="renderMarkdown(item.text)" />
-      </details>
-      <ToolCard v-else :tool="item" />
-    </template>
+    <TransitionGroup name="tool-fade" tag="div">
+      <div v-for="entry in displayItems" :key="entry.key" class="tool-fade-item">
+        <div v-if="entry.type === 'summary'" class="tool-cards-summary">
+          <span class="eyebrow">{{ entry.total }} tools</span>
+          <GnIconButton
+            size="sm"
+            :icon="showAllTools ? 'ph ph-caret-up' : 'ph ph-caret-down'"
+            @click="showAllTools = !showAllTools"
+          />
+        </div>
+        <ThinkingCard v-else-if="entry.item.kind === 'turn_thinking'" :msg="entry.item" />
+        <ContentCard
+          v-else-if="entry.item.kind === 'tool' && entry.item.name === 'content_publish'"
+          :tool="entry.item"
+          :default-open="contentToolKey(msg, entry.i) === latestContentToolKey"
+          :collapse-token="latestContentToolKey"
+        />
+        <details v-else-if="entry.item.kind === 'plan'" class="plan-card">
+          <summary>
+            <i class="ph ph-map-trifold"></i>
+            Plan
+            <i class="ph ph-caret-down plan-chevron"></i>
+          </summary>
+          <div class="plan-body" v-html="renderMarkdown(entry.item.text)" />
+        </details>
+        <ToolCard v-else :tool="entry.item" />
+      </div>
+    </TransitionGroup>
 
     <!-- Text response -->
     <div
@@ -94,6 +104,7 @@
 import ThinkingCard from './ThinkingCard.vue'
 import ToolCard from './ToolCard.vue'
 import ContentCard from './ContentCard.vue'
+import { GnIconButton } from 'gnexus-ui-kit/vue'
 import { renderMarkdown, attachCopyButtons, attachImageLightbox } from '@/composables/useMarkdown.js'
 import { useTimeLabel } from '@/composables/useTime.js'
 import { useCopy } from '@/composables/useCopy.js'
@@ -103,6 +114,7 @@
 
 const contentEl = ref(null)
 const chat = useChatStore()
+const showAllTools = ref(false)
 
 const renderedText = computed(() => renderMarkdown(props.msg.text))
 const tsRef = computed(() => props.msg.done ? props.msg.time : null)
@@ -183,6 +195,38 @@
   return tool.name
 }
 
+function isCountableTool(item) {
+  return item.kind === 'tool' && item.name !== 'content_publish'
+}
+
+const displayItems = computed(() => {
+  const items = props.msg.tools || []
+  const toolOnly = items
+    .map((item, i) => ({ item, i }))
+    .filter(({ item }) => isCountableTool(item))
+
+  if (toolOnly.length === 0 || toolOnly.length < 4) {
+    return items.map((item, i) => ({ type: 'item', item, i, key: i }))
+  }
+
+  const showAll = showAllTools.value
+  const visibleSet = new Set(
+    showAll
+      ? toolOnly.map(({ i }) => i)
+      : toolOnly.slice(-3).map(({ i }) => i)
+  )
+
+  const result = []
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (isCountableTool(item) && !visibleSet.has(i)) continue
+    result.push({ type: 'item', item, i, key: i })
+  }
+
+  result.push({ type: 'summary', total: toolOnly.length, key: 'summary-end' })
+  return result
+})
+
 // Attach copy buttons after render — only when message is done to avoid
 // repeated DOM queries on every streaming delta.
 watch(
diff --git a/webclient/src/components/messages/SubagentStep.vue b/webclient/src/components/messages/SubagentStep.vue
index 0ee2138..20a3761 100644
--- a/webclient/src/components/messages/SubagentStep.vue
+++ b/webclient/src/components/messages/SubagentStep.vue
@@ -1,12 +1,11 @@
 <template>
   <details
     ref="detailsEl"
-    class="tool-card"
+    class="subagent-step"
     :class="{
       'is-success': !tool.pending && tool.success,
       'is-error': !tool.pending && !tool.success
     }"
-    style="font-size: 12px;"
   >
     <summary>
       <span class="tool-status-icon">
@@ -19,11 +18,18 @@
       <i class="ph ph-caret-down tool-chevron"></i>
     </summary>
     <div class="tool-card-body">
-      <div v-if="tool.args" class="tool-section">
-        <pre class="tool-code">{{ formatJson(tool.args) }}</pre>
-      </div>
-      <div v-if="tool.result != null" class="tool-section">
-        <pre class="tool-code">{{ formatResult(tool.result) }}</pre>
+      <details v-if="tool.args" class="tool-args">
+        <summary>
+          <span class="tool-section-label">Arguments</span>
+          <i class="ph ph-caret-down tool-chevron"></i>
+        </summary>
+        <div class="tool-section">
+          <pre class="tool-code" v-html="renderArgs(tool.args)"></pre>
+        </div>
+      </details>
+      <div v-if="tool.result != null" class="tool-section tool-result-section">
+        <div class="tool-section-label">Result</div>
+        <div class="tool-result" v-html="renderResult(tool.result)"></div>
       </div>
     </div>
   </details>
@@ -31,6 +37,23 @@
 
 <script setup>
 import { ref, watch } from 'vue'
+import { renderMarkdown } from '@/composables/useMarkdown.js'
+
+function looksLikeMarkdown(str) {
+  if (typeof str !== 'string') return false
+  const mdPatterns = [
+    /#{1,6} /,           // headings
+    /\*\*|__/,            // bold
+    /`[^`]+`/,            // inline code
+    /```/,                // code block
+    /^\s*[-*+]\s/m,      // list
+    /^\s*\d+\.\s/m,       // ordered list
+    /\[[^\]]+\]\([^)]+\)/, // link
+    /\|.*\|/,             // table
+    /^\s*>\s/m,           // blockquote
+  ]
+  return mdPatterns.some(re => re.test(str))
+}
 
 const props = defineProps({ tool: { type: Object, required: true } })
 
@@ -49,15 +72,76 @@
   { immediate: true }
 )
 
-function formatJson(val) {
-  if (typeof val === 'string') {
-    try { return JSON.stringify(JSON.parse(val), null, 2) } catch { return val }
-  }
-  return JSON.stringify(val, null, 2)
+function renderArgs(val) {
+  return formatCompactJson(val)
 }
 
-function formatResult(val) {
-  if (typeof val === 'string') return val
-  return JSON.stringify(val, null, 2)
+function renderResult(val) {
+  if (typeof val === 'string') {
+    try {
+      const parsed = JSON.parse(val)
+      return formatCompactJson(parsed)
+    } catch { /* not JSON */ }
+
+    if (looksLikeMarkdown(val)) {
+      return renderMarkdown(val)
+    }
+
+    return escapeHtml(val)
+      .split('\n')
+      .map((line, i) => `<div class="result-line">${line || '&nbsp;'}</div>`)
+      .join('')
+  }
+  return formatCompactJson(val)
+}
+
+function formatCompactJson(val) {
+  if (typeof val === 'string') {
+    try { val = JSON.parse(val) } catch { return escapeHtml(val) }
+  }
+  if (val === null || typeof val !== 'object') return escapeHtml(String(val))
+  if (Array.isArray(val)) {
+    if (val.length === 0) return '<span class="json-empty">[]</span>'
+    const items = val.map((item, i) =>
+      `<div class="json-item">
+        <span class="json-key">${i}</span>
+        <span class="json-sep">:</span>
+        <span class="json-value">${formatCompactValue(item)}</span>
+      </div>`
+    ).join('')
+    return `<div class="json-array">${items}</div>`
+  }
+  const entries = Object.entries(val)
+  if (entries.length === 0) return '<span class="json-empty">{}</span>'
+  const items = entries.map(([k, v]) =>
+    `<div class="json-item">
+      <span class="json-key">${escapeHtml(k)}</span>
+      <span class="json-sep">:</span>
+      <span class="json-value">${formatCompactValue(v)}</span>
+    </div>`
+  ).join('')
+  return `<div class="json-object">${items}</div>`
+}
+
+function formatCompactValue(v) {
+  if (v === null) return '<span class="json-null">null</span>'
+  if (typeof v === 'boolean') return `<span class="json-bool">${v}</span>`
+  if (typeof v === 'number') return `<span class="json-number">${v}</span>`
+  if (typeof v === 'string') {
+    const max = 200
+    const s = escapeHtml(v)
+    if (s.length <= max) return `<span class="json-string">${s}</span>`
+    return `<span class="json-string">${s.slice(0, max)}…</span>`
+  }
+  if (Array.isArray(v)) return `<span class="json-array">[${v.length} items]</span>`
+  return `<span class="json-object">{${Object.keys(v).length} keys}</span>`
+}
+
+function escapeHtml(str) {
+  if (typeof str !== 'string') return String(str ?? '')
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
 }
 </script>
diff --git a/webclient/src/components/messages/ToolCard.vue b/webclient/src/components/messages/ToolCard.vue
index 25bc810..275c1f4 100644
--- a/webclient/src/components/messages/ToolCard.vue
+++ b/webclient/src/components/messages/ToolCard.vue
@@ -13,7 +13,6 @@
         <i v-else-if="tool.success" class="ph ph-check-circle"></i>
         <i v-else class="ph ph-x-circle"></i>
       </span>
-      <span class="tool-emoji">{{ toolIcon }}</span>
       <span class="tool-name">{{ tool.name }}</span>
       <span v-if="tool.pending" class="tool-running-time">{{ elapsedLabel }}</span>
       <i class="ph ph-caret-down tool-chevron"></i>
@@ -24,13 +23,18 @@
         <span class="spinner"></span>
         <span>{{ runningLabel }}</span>
       </div>
-      <div v-if="tool.args" class="tool-section">
-        <div class="tool-section-label">Arguments</div>
-        <pre class="tool-code">{{ formatJson(tool.args) }}</pre>
-      </div>
-      <div v-if="tool.result != null" class="tool-section">
+      <details v-if="tool.args" class="tool-args">
+        <summary>
+          <span class="tool-section-label">Arguments</span>
+          <i class="ph ph-caret-down tool-chevron"></i>
+        </summary>
+        <div class="tool-section">
+          <pre class="tool-code" v-html="renderArgs(tool.args)"></pre>
+        </div>
+      </details>
+      <div v-if="tool.result != null" class="tool-section tool-result-section">
         <div class="tool-section-label">Result</div>
-        <pre class="tool-code">{{ formatResult(tool.result) }}</pre>
+        <div class="tool-result" v-html="renderResult(tool.result)"></div>
       </div>
       <!-- Subagent planning indicator (while subagent is in planning phase) -->
       <div v-if="tool.planningLabel != null" class="subagent-planning-indicator">
@@ -61,6 +65,22 @@
 import ThinkingCard from './ThinkingCard.vue'
 import { renderMarkdown } from '@/composables/useMarkdown.js'
 
+function looksLikeMarkdown(str) {
+  if (typeof str !== 'string') return false
+  const mdPatterns = [
+    /#{1,6} /,           // headings
+    /\*\*|__/,            // bold
+    /`[^`]+`/,            // inline code
+    /```/,                // code block
+    /^\s*[-*+]\s/m,      // list
+    /^\s*\d+\.\s/m,       // ordered list
+    /\[[^\]]+\]\([^)]+\)/, // link
+    /\|.*\|/,             // table
+    /^\s*>\s/m,           // blockquote
+  ]
+  return mdPatterns.some(re => re.test(str))
+}
+
 const props = defineProps({ tool: { type: Object, required: true } })
 
 const detailsEl = ref(null)
@@ -93,20 +113,6 @@
 
 onBeforeUnmount(stopTimer)
 
-const TOOL_ICONS = {
-  web_search: '🔍',
-  web_fetch: '🌐',
-  filesystem: '📁',
-  read_file: '📄',
-  write_file: '📝',
-  code_exec: '⚙️',
-  terminal: '💻',
-  ssh_exec: '🖥️',
-  spawn_agent: '🤖',
-  switch_profile: '🔄',
-}
-
-const toolIcon = computed(() => TOOL_ICONS[props.tool.name] ?? '🔧')
 const runningLabel = computed(() => {
   if (props.tool.name === 'filesystem' && props.tool.args?.action) {
     return `Running filesystem ${props.tool.args.action}...`
@@ -131,15 +137,77 @@
   timer = null
 }
 
-function formatJson(val) {
-  if (typeof val === 'string') {
-    try { return JSON.stringify(JSON.parse(val), null, 2) } catch { return val }
-  }
-  return JSON.stringify(val, null, 2)
+function renderArgs(val) {
+  return formatCompactJson(val)
 }
 
-function formatResult(val) {
-  if (typeof val === 'string') return val
-  return JSON.stringify(val, null, 2)
+function renderResult(val) {
+  if (typeof val === 'string') {
+    // Try JSON first
+    try {
+      const parsed = JSON.parse(val)
+      return formatCompactJson(parsed)
+    } catch { /* not JSON */ }
+
+    if (looksLikeMarkdown(val)) {
+      return renderMarkdown(val)
+    }
+
+    return escapeHtml(val)
+      .split('\n')
+      .map((line, i) => `<div class="result-line">${line || '&nbsp;'}</div>`)
+      .join('')
+  }
+  return formatCompactJson(val)
+}
+
+function formatCompactJson(val) {
+  if (typeof val === 'string') {
+    try { val = JSON.parse(val) } catch { return escapeHtml(val) }
+  }
+  if (val === null || typeof val !== 'object') return escapeHtml(String(val))
+  if (Array.isArray(val)) {
+    if (val.length === 0) return '<span class="json-empty">[]</span>'
+    const items = val.map((item, i) =>
+      `<div class="json-item">
+        <span class="json-key">${i}</span>
+        <span class="json-sep">:</span>
+        <span class="json-value">${formatCompactValue(item)}</span>
+      </div>`
+    ).join('')
+    return `<div class="json-array">${items}</div>`
+  }
+  const entries = Object.entries(val)
+  if (entries.length === 0) return '<span class="json-empty">{}</span>'
+  const items = entries.map(([k, v]) =>
+    `<div class="json-item">
+      <span class="json-key">${escapeHtml(k)}</span>
+      <span class="json-sep">:</span>
+      <span class="json-value">${formatCompactValue(v)}</span>
+    </div>`
+  ).join('')
+  return `<div class="json-object">${items}</div>`
+}
+
+function formatCompactValue(v) {
+  if (v === null) return '<span class="json-null">null</span>'
+  if (typeof v === 'boolean') return `<span class="json-bool">${v}</span>`
+  if (typeof v === 'number') return `<span class="json-number">${v}</span>`
+  if (typeof v === 'string') {
+    const max = 200
+    const s = escapeHtml(v)
+    if (s.length <= max) return `<span class="json-string">${s}</span>`
+    return `<span class="json-string">${s.slice(0, max)}…</span>`
+  }
+  if (Array.isArray(v)) return `<span class="json-array">[${v.length} items]</span>`
+  return `<span class="json-object">{${Object.keys(v).length} keys}</span>`
+}
+
+function escapeHtml(str) {
+  if (typeof str !== 'string') return String(str ?? '')
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
 }
 </script>
diff --git a/webclient/src/styles/app.scss b/webclient/src/styles/app.scss
index ac0fbc8..2cc96d5 100644
--- a/webclient/src/styles/app.scss
+++ b/webclient/src/styles/app.scss
@@ -802,17 +802,15 @@
 
 // ─── Thinking card ─────────────────────────────────────────────────────────
 .thinking-card {
-  margin-bottom: $space-sm;
-
   summary {
     list-style: none;
     display: flex;
     align-items: center;
     gap: $space-sm;
-    padding: $space-sm $space-md;
+    padding: $space-xs $space-md;
     cursor: pointer;
     color: $color-text-dark;
-    font-size: 13px;
+    font-size: 12px;
     font-style: italic;
     background: $surface-panel-muted;
     border: $border-width-base $border-style-base $border-color-muted;
@@ -840,46 +838,47 @@
   }
 
   .thinking-body {
-    padding: $space-md;
-    font-size: 13px;
+    padding: $space-sm $space-md;
+    font-size: 12px;
     font-style: italic;
     color: $color-text-medium;
-    line-height: 1.6;
+    line-height: 1.5;
     background: $surface-panel-muted;
     border: $border-width-base $border-style-base $border-color-muted;
     border-top: none;
     white-space: pre-wrap;
+    word-break: break-word;
   }
 }
 
 // ─── Plan card ─────────────────────────────────────────────────────────────
 .plan-card {
-  border: $border-width-base $border-style-base $color-info;
+  border: $border-width-base $border-style-base $color-secondary;
   border-left-width: $border-width-accent;
-  border-left-color: $color-info;
+  border-left-color: $color-secondary;
   overflow: hidden;
-  font-size: 13px;
-  margin-bottom: $space-sm;
+  font-size: 12px;
+  margin-bottom: 8px;
 
   summary {
     list-style: none;
     display: flex;
     align-items: center;
     gap: $space-sm;
-    padding: $space-sm $space-md;
+    padding: $space-xs $space-md;
     cursor: pointer;
-    background: rgba($color-info, 0.08);
-    color: $color-info;
-    font-size: 13px;
+    background: rgba($color-secondary, 0.08);
+    color: $color-secondary;
+    font-size: 12px;
     user-select: none;
 
     &::-webkit-details-marker { display: none; }
-    &:hover { background: rgba($color-info, 0.14); }
+    &:hover { background: rgba($color-secondary, 0.14); }
 
     .plan-chevron {
       margin-left: auto;
       font-size: $icon-size-sm;
-      color: rgba($color-info, 0.6);
+      color: rgba($color-secondary, 0.6);
       transition: transform $motion-fast $motion-ease;
       flex-shrink: 0;
     }
@@ -890,12 +889,12 @@
   }
 
   .plan-body {
-    padding: $space-md;
-    font-size: 13px;
+    padding: $space-sm $space-md;
+    font-size: 12px;
     color: $color-text-medium;
-    line-height: 1.6;
-    background: rgba($color-info, 0.04);
-    border-top: $border-width-base $border-style-base rgba($color-info, 0.3);
+    line-height: 1.5;
+    background: rgba($color-secondary, 0.04);
+    border-top: $border-width-base $border-style-base rgba($color-secondary, 0.3);
 
     p { margin: 0 0 $space-sm; &:last-child { margin-bottom: 0; } }
     ul, ol { padding-left: $space-lg; margin-bottom: $space-sm; }
@@ -908,7 +907,7 @@
 .tool-card {
   border: $border-width-base $border-style-base $border-color-muted;
   border-left-width: $border-width-accent;
-  margin-bottom: $space-sm;
+  margin-bottom: 8px;
   border-left-color: $color-secondary;
   overflow: hidden;
   font-size: 13px;
@@ -916,12 +915,12 @@
   &.is-success { border-left-color: $color-success; }
   &.is-error   { border-left-color: $color-error; }
 
-  summary {
+  > summary {
     list-style: none;
     display: flex;
     align-items: center;
     gap: $space-sm;
-    padding: $space-sm $space-md;
+    padding: $space-xs $space-md;
     cursor: pointer;
     background: $surface-panel-muted;
     color: $color-text-medium;
@@ -929,6 +928,17 @@
 
     &::-webkit-details-marker { display: none; }
     &:hover { background: $surface-panel-strong; }
+
+    .tool-chevron {
+      font-size: $icon-size-sm;
+      color: $color-text-dark;
+      flex-shrink: 0;
+      transition: transform $motion-fast $motion-ease;
+    }
+  }
+
+  &[open] > summary .tool-chevron {
+    transform: rotate(180deg);
   }
 
   .tool-name {
@@ -957,23 +967,6 @@
     font-size: $icon-size-sm;
     flex-shrink: 0;
   }
-
-  .tool-emoji {
-    font-size: $icon-size-sm;
-    line-height: 1;
-    flex-shrink: 0;
-  }
-
-  .tool-chevron {
-    font-size: $icon-size-sm;
-    color: $color-text-dark;
-    flex-shrink: 0;
-    transition: transform $motion-fast $motion-ease;
-  }
-
-  &[open] .tool-chevron {
-    transform: rotate(180deg);
-  }
 }
 
 .tool-card-body {
@@ -1013,11 +1006,162 @@
   font-size: 12px;
   color: $color-text-medium;
   white-space: pre-wrap;
-  word-break: break-all;
-  max-height: 200px;
-  overflow-y: auto;
+  word-break: break-word;
 }
 
+.tool-args {
+  summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: $space-sm;
+    padding: $space-xs $space-md;
+    cursor: pointer;
+    user-select: none;
+    font-size: 12px;
+    color: $color-text-medium;
+    background: $surface-panel-muted;
+
+    &::-webkit-details-marker { display: none; }
+    &:hover { background: $surface-panel-strong; }
+
+    .tool-chevron {
+      margin-left: auto;
+      font-size: $icon-size-sm;
+      color: $color-text-dark;
+      transition: transform $motion-fast $motion-ease;
+    }
+  }
+
+  &[open] > summary .tool-chevron {
+    transform: rotate(180deg);
+  }
+}
+
+.tool-cards-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-sm;
+  padding: $space-xs 0;
+}
+
+.tool-fade-item {
+  transition: none;
+}
+
+.tool-fade-enter-active,
+.tool-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.tool-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.tool-fade-leave-to {
+  opacity: 0;
+}
+
+// Smooth <details> expand/collapse (modern browsers)
+@supports (interpolate-size: allow-keywords) {
+  details {
+    interpolate-size: allow-keywords;
+  }
+
+  details::details-content {
+    block-size: 0;
+    overflow: clip;
+    transition: block-size 0.25s ease, content-visibility 0.25s ease;
+    transition-behavior: allow-discrete;
+  }
+
+  details[open]::details-content {
+    block-size: auto;
+  }
+}
+
+.tool-result {
+  font-size: 12px;
+  line-height: 1.5;
+  color: $color-text-medium;
+
+  // Markdown content inside tool results uses normal font
+  h1, h2, h3, h4 { color: $color-text-light; margin: $space-sm 0; }
+  p { margin: $space-xs 0; }
+  ul, ol { padding-left: $space-lg; margin: $space-xs 0; }
+  li { margin-bottom: 2px; }
+  blockquote {
+    padding-left: $space-sm;
+    border-left: 2px solid $color-secondary;
+    color: $color-text-medium;
+    margin: $space-xs 0;
+  }
+  code {
+    font-family: "IBM Plex Mono", monospace;
+    background: $surface-panel-strong;
+    padding: 1px 4px;
+    color: $color-cyan;
+    font-size: 11px;
+  }
+  pre {
+    margin: $space-xs 0;
+    background: $surface-panel;
+    border: $border-width-base $border-style-base $border-color-muted;
+    overflow: hidden;
+    code {
+      display: block;
+      padding: $space-sm;
+      overflow-x: auto;
+    }
+  }
+}
+
+.result-line {
+  font-family: "IBM Plex Mono", monospace;
+  padding: 1px 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.json-object,
+.json-array {
+  font-family: "IBM Plex Mono", monospace;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: $space-xs 0;
+}
+
+.json-item {
+  display: flex;
+  align-items: baseline;
+  gap: $space-xs;
+  padding: 1px 0;
+}
+
+.json-key {
+  color: $color-text-light;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.json-sep {
+  color: $color-text-dark;
+}
+
+.json-value {
+  color: $color-text-medium;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.json-string { color: $color-success; }
+.json-number { color: $color-warning; }
+.json-bool   { color: $color-primary; }
+.json-null   { color: $color-text-dark; font-style: italic; }
+.json-empty  { color: $color-text-dark; font-style: italic; }
+
 // ─── Subagent steps ────────────────────────────────────────────────────────
 .subagent-steps {
   display: flex;
@@ -1038,6 +1182,71 @@
   background: $surface-panel-muted;
 }
 
+.subagent-step {
+  border: $border-width-base $border-style-base $border-color-muted;
+  border-left-width: $border-width-accent;
+  border-left-color: $color-secondary;
+  overflow: hidden;
+  margin-bottom: 8px;
+  font-size: 12px;
+
+  &.is-success { border-left-color: $color-success; }
+  &.is-error   { border-left-color: $color-error; }
+
+  summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: $space-sm;
+    padding: $space-xs $space-md;
+    cursor: pointer;
+    background: $surface-panel-muted;
+    color: $color-text-medium;
+    user-select: none;
+
+    &::-webkit-details-marker { display: none; }
+    &:hover { background: $surface-panel-strong; }
+  }
+
+  .tool-name {
+    flex: 1;
+    font-family: "IBM Plex Mono", monospace;
+    font-size: 12px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tool-running-time {
+    font-family: "IBM Plex Mono", monospace;
+    font-size: 11px;
+    color: $color-text-dark;
+    white-space: nowrap;
+  }
+
+  .tool-status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $icon-size-sm;
+    height: $icon-size-sm;
+    font-size: $icon-size-sm;
+    flex-shrink: 0;
+  }
+
+  .tool-chevron {
+    font-size: $icon-size-sm;
+    color: $color-text-dark;
+    flex-shrink: 0;
+    transition: transform $motion-fast $motion-ease;
+  }
+
+  &[open] > summary .tool-chevron {
+    transform: rotate(180deg);
+  }
+}
+
 // ─── Summary / compression notice ──────────────────────────────────────────
 .summary-card {
   border: $border-width-base $border-style-base $color-info;
@@ -1108,7 +1317,7 @@
 // ─── Input bar ─────────────────────────────────────────────────────────────
 .input-bar {
   flex-shrink: 0;
-  padding: $space-sm $space-md $space-md;
+  padding: 8px 15px;
   background: $surface-page;
   border-top: $border-width-base $border-style-base $border-color-muted;
 }
@@ -1137,6 +1346,9 @@
   flex-wrap: wrap;
   gap: $space-xs;
   margin-bottom: $space-xs;
+  max-width: 920px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .file-preview-image {
@@ -1463,7 +1675,7 @@
 }
 
 // Tool card chevron should still rotate (opt-in)
-.tool-card[open] .tool-chevron,
-.thinking-card[open] .tool-chevron {
+.tool-card[open] > summary .tool-chevron,
+.thinking-card[open] > summary .tool-chevron {
   transform: rotate(180deg) !important;
 }