compressed-context 0.0.0-stage → 0.1.0

package/src/tui/panel/cache.tsx

@@ -0,0 +1,203 @@
+import type { Context } from "@opencode/plugin/tui/context"
+import { createMemo, For, Show } from "solid-js"
+
+import type { Messages } from "../../i18n/index.ts"
+import { formatHitRate, type CacheSample } from "../../shared/cache.ts"
+import { formatTokens } from "../../shared/format.ts"
+import type { Settings } from "../../shared/settings.ts"
+import {
+  CHART_HEIGHT,
+  CHART_WIDTH,
+  chartAxis,
+  hitRateColor,
+  renderBrailleChart,
+  xAxisLabels,
+  type ChartCell,
+} from "../chart/cache-chart.ts"
+import { themeHex } from "../chart/color.ts"
+import type { UpdateSettings } from "../types.ts"
+
+/** 输入：一行 chart cell；输出：可直接放进 `<text>` 的 span 序列。 */
+function chartLine(row: readonly ChartCell[]) {
+  return row.map((cell) =>
+    cell.color === "" ? cell.char : <span style={{ fg: cell.color }}>{cell.char}</span>,
+  )
+}
+
+/**
+ * 输入：主题 + 文案 + 设置 + 写入函数 + 缓存样本。
+ * 输出：可折叠的缓存记录区（Braille 折线 + 最近 10 次日志）。
+ * 预期：样本由服务端持久化，这里只负责展示；0% 红 → 100% 绿。
+ */
+export function CacheSection(props: {
+  readonly theme: Context["theme"]
+  readonly copy: Messages
+  readonly settings: Settings
+  readonly updateSettings: UpdateSettings
+  readonly samples: readonly CacheSample[]
+}) {
+  const chartColors = createMemo(() => ({
+    success: themeHex(props.theme.text.feedback.success.base, [34, 197, 94]),
+    warning: themeHex(props.theme.text.feedback.warning.base, [234, 179, 8]),
+    error: themeHex(props.theme.text.feedback.error.base, [239, 68, 68]),
+  }))
+
+  const latestHit = createMemo(() => props.samples.at(-1)?.hitRate)
+  const axis = chartAxis(CHART_HEIGHT)
+  const chartRows = createMemo(() => {
+    if (props.samples.length === 0) return []
+    return renderBrailleChart(
+      props.samples.map((sample) => sample.hitRate),
+      CHART_WIDTH,
+      CHART_HEIGHT,
+      (pct) => hitRateColor(pct, chartColors()),
+      axis.gridRows,
+      themeHex(props.theme.text.muted, [128, 128, 128]),
+    )
+  })
+
+  /** 输入：折叠键；输出：无；预期：翻转后写回 TUI storage。 */
+  const toggleFold = (
+    key: "cacheExpanded" | "cacheChartExpanded" | "cacheLogExpanded",
+  ): void => {
+    void props.updateSettings((draft) => {
+      draft[key] = !draft[key]
+    })
+  }
+
+  return (
+    <Show when={props.settings.showCacheChart || props.settings.showCacheLog}>
+      <box width="100%" flexDirection="column">
+        <box
+          flexDirection="row"
+          height={1}
+          onMouseDown={() => {
+            toggleFold("cacheExpanded")
+          }}
+        >
+          <box flexDirection="row" gap={1}>
+            <text fg={props.theme.text.base}>{props.settings.cacheExpanded ? "▼" : "▶"}</text>
+            <text fg={props.theme.text.base}>
+              <b>{props.copy.cacheTitle}</b>
+            </text>
+            <Show
+              when={latestHit() !== undefined}
+              fallback={<text fg={props.theme.text.muted}>{"(--)"}</text>}
+            >
+              <text fg={hitRateColor(latestHit() ?? 0, chartColors())}>
+                {`(${formatHitRate(latestHit() ?? 0)}%)`}
+              </text>
+            </Show>
+          </box>
+        </box>
+        <Show when={props.settings.cacheExpanded}>
+          <box paddingLeft={2} flexDirection="column" width="100%">
+            <Show when={props.settings.showCacheChart}>
+              <box flexDirection="column" width="100%">
+                <box
+                  flexDirection="row"
+                  height={1}
+                  gap={1}
+                  onMouseDown={() => {
+                    toggleFold("cacheChartExpanded")
+                  }}
+                >
+                  <text fg={props.theme.text.base}>
+                    {props.settings.cacheChartExpanded ? "▼" : "▶"}
+                  </text>
+                  <text fg={props.theme.text.base}>{props.copy.cacheChart}</text>
+                </box>
+                <Show when={props.settings.cacheChartExpanded}>
+                  <Show
+                    when={chartRows().length > 0}
+                    fallback={<text fg={props.theme.text.muted}>{props.copy.noData}</text>}
+                  >
+                    <For each={chartRows()}>
+                      {(row, index) => {
+                        const label = axis.labels.find((item) => item.row === index())?.text ?? "    "
+                        return (
+                          <box flexDirection="row" height={1}>
+                            <text fg={props.theme.text.muted}>{`${label} `}</text>
+                            <text fg={props.theme.text.muted}>{"┤"}</text>
+                            <text>{chartLine(row)}</text>
+                          </box>
+                        )
+                      }}
+                    </For>
+                    <text fg={props.theme.text.muted}>{`  0% └${"─".repeat(CHART_WIDTH)}`}</text>
+                    <text fg={props.theme.text.muted}>
+                      {`${" ".repeat(6)}${xAxisLabels(props.samples.length, CHART_WIDTH)}`}
+                    </text>
+                  </Show>
+                </Show>
+              </box>
+            </Show>
+
+            <Show when={props.settings.showCacheLog}>
+              <box flexDirection="column" width="100%">
+                <box
+                  flexDirection="row"
+                  height={1}
+                  gap={1}
+                  onMouseDown={() => {
+                    toggleFold("cacheLogExpanded")
+                  }}
+                >
+                  <text fg={props.theme.text.base}>
+                    {props.settings.cacheLogExpanded ? "▼" : "▶"}
+                  </text>
+                  <text fg={props.theme.text.base}>{props.copy.cacheLog}</text>
+                </box>
+                <Show when={props.settings.cacheLogExpanded}>
+                  <Show
+                    when={props.samples.length > 0}
+                    fallback={<text fg={props.theme.text.muted}>{props.copy.noData}</text>}
+                  >
+                    <box flexDirection="column" width="100%" paddingLeft={2}>
+                      <box flexDirection="row" gap={1}>
+                        <text width={5} textAlign="left" fg={props.theme.text.muted}>
+                          {props.copy.cacheInput}
+                        </text>
+                        <text width={5} textAlign="left" fg={props.theme.text.muted}>
+                          {props.copy.cacheOutput}
+                        </text>
+                        <text width={5} textAlign="left" fg={props.theme.text.muted}>
+                          {props.copy.cacheCached}
+                        </text>
+                        <text width={7} textAlign="left" fg={props.theme.text.muted}>
+                          {props.copy.cacheHit}
+                        </text>
+                      </box>
+                      <For each={props.samples}>
+                        {(sample) => (
+                          <box flexDirection="row" gap={1}>
+                            <text width={5} textAlign="left" fg={props.theme.text.muted}>
+                              {formatTokens(sample.input)}
+                            </text>
+                            <text width={5} textAlign="left" fg={props.theme.text.muted}>
+                              {formatTokens(sample.output)}
+                            </text>
+                            <text width={5} textAlign="left" fg={props.theme.text.muted}>
+                              {formatTokens(sample.cached)}
+                            </text>
+                            <text
+                              width={7}
+                              textAlign="left"
+                              fg={hitRateColor(sample.hitRate, chartColors())}
+                            >
+                              {`${formatHitRate(sample.hitRate)}%`}
+                            </text>
+                          </box>
+                        )}
+                      </For>
+                    </box>
+                  </Show>
+                </Show>
+              </box>
+            </Show>
+          </box>
+        </Show>
+      </box>
+    </Show>
+  )
+}

package/src/tui/panel/data.ts

@@ -0,0 +1,105 @@
+import type { Context } from "@opencode/plugin/tui/context"
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
+
+import type { SummaryBlock } from "../../shared/blocks.ts"
+import type { CacheSample } from "../../shared/cache.ts"
+import { contextRpc } from "../../shared/rpc.ts"
+import type { Settings } from "../../shared/settings.ts"
+import { parseStats, STATS_KEY, TERMINAL_KEY, type ContextStats } from "../../shared/stats.ts"
+
+/** Panel 需要的服务端数据；全部是响应式 accessor。 */
+export interface PanelData {
+  readonly stats: Accessor<ContextStats | undefined>
+  readonly terminal: Accessor<string | undefined>
+  readonly cache: Accessor<readonly CacheSample[]>
+  readonly blocks: Accessor<readonly SummaryBlock[]>
+}
+
+/**
+ * 输入：TUI 上下文 + sessionID + 设置 accessor。
+ * 输出：统计 / 终止原因 / 缓存历史 / 摘要块。
+ * 预期：挂载时拉取，usage/compaction/idle 时刷新；设置开关变化时重新拉取。
+ */
+export function usePanelData(input: {
+  readonly context: Context
+  readonly sessionID: string
+  readonly settings: Accessor<Settings>
+}): PanelData {
+  const [stats, setStats] = createSignal<ContextStats>()
+  const [terminal, setTerminal] = createSignal<string>()
+  const [cache, setCache] = createSignal<readonly CacheSample[]>([])
+  const [blocks, setBlocks] = createSignal<readonly SummaryBlock[]>([])
+  const rpc = () => contextRpc(input.context.client)
+
+  /** 输入：无；输出：无；预期：从服务端拉取该会话持久化的缓存历史。 */
+  const refreshCache = async (): Promise<void> => {
+    try {
+      const got = await rpc().cacheHistoryGet({ sessionID: input.sessionID })
+      setCache(got.samples)
+    } catch {
+      // server plugin not loaded；保留上一次数据
+    }
+  }
+
+  /** 输入：无；输出：无；预期：从服务端拉取 active 摘要链。 */
+  const refreshBlocks = async (): Promise<void> => {
+    if (!input.settings().showSummaries) return
+    try {
+      const got = await rpc().blocksGet({ sessionID: input.sessionID })
+      setBlocks(got.blocks)
+    } catch {
+      // server plugin not loaded；保留上一次数据
+    }
+  }
+
+  /** 输入：无；输出：无；预期：从服务端重新拉取 session metadata 里的统计。 */
+  const refresh = async (): Promise<void> => {
+    try {
+      const info = await input.context.client.session.get({ sessionID: input.sessionID })
+      setStats(parseStats(info.metadata?.[STATS_KEY]))
+      const rawTerminal = info.metadata?.[TERMINAL_KEY]
+      setTerminal(typeof rawTerminal === "string" ? rawTerminal : undefined)
+    } catch {
+      // 统计缺失不影响主界面，保持上一次的值
+    }
+  }
+
+  // 显示开关变化时重新拉取；首次挂载也会跑一次。
+  createEffect(() => {
+    if (input.settings().showCacheChart || input.settings().showCacheLog) void refreshCache()
+  })
+  createEffect(() => {
+    if (input.settings().showSummaries) void refreshBlocks()
+  })
+
+  createEffect(() => {
+    void refresh()
+  })
+
+  onCleanup(
+    input.context.data.on("session.usage.updated", (event) => {
+      if (event.data.sessionID !== input.sessionID) return
+      void refresh()
+      // 缓存历史由服务端在 usage.updated 时补写；这里同步刷新面板。
+      if (input.settings().showCacheChart || input.settings().showCacheLog) void refreshCache()
+    }),
+  )
+  onCleanup(
+    input.context.data.on("session.compaction.ended", (event) => {
+      if (event.data.sessionID !== input.sessionID) return
+      void refresh()
+      void refreshCache()
+      void refreshBlocks()
+    }),
+  )
+  onCleanup(
+    input.context.data.on("session.idle", (event) => {
+      if (event.data.sessionID !== input.sessionID) return
+      void refresh()
+      void refreshCache()
+      void refreshBlocks()
+    }),
+  )
+
+  return { stats, terminal, cache, blocks }
+}

package/src/tui/panel/index.tsx

@@ -0,0 +1,176 @@
+import type { Context } from "@opencode/plugin/tui/context"
+import { createMemo, For, Show } from "solid-js"
+
+import { resolveMessages } from "../../i18n/index.ts"
+import { formatTokens } from "../../shared/format.ts"
+import { effectiveLimit, localeArgument, type Settings } from "../../shared/settings.ts"
+import { scaleCategories } from "../../shared/stats.ts"
+import { mix, toHex, toRgb, type Rgb } from "../chart/color.ts"
+import type { UpdateSettings } from "../types.ts"
+import { CacheSection } from "./cache.tsx"
+import { usePanelData } from "./data.ts"
+import { SummarySection } from "./summaries.tsx"
+
+/**
+ * 输入：该分类占上下文总量的百分比 + 主题。
+ * 输出：0%-50%-100% 依次绿-黄-红的连续插值。
+ * 预期：每个百分比都有独立颜色；主题色不可解析时回退到内置色。
+ */
+function occupancyColor(pct: number, theme: Context["theme"]): string {
+  const green = toRgb(theme.text.feedback.success.base) ?? ([34, 197, 94] as Rgb)
+  const yellow = toRgb(theme.text.feedback.warning.base) ?? ([234, 179, 8] as Rgb)
+  const red = toRgb(theme.text.feedback.error.base) ?? ([239, 68, 68] as Rgb)
+  const ratio = Math.min(1, Math.max(0, pct / 100))
+  if (ratio <= 0.5) return toHex(mix(green, yellow, ratio * 2))
+  return toHex(mix(yellow, red, (ratio - 0.5) * 2))
+}
+
+/**
+ * 输入：0-100 的百分比。
+ * 输出：OpenTUI 的百分比宽度类型 `${number}%`。
+ * 预期：先转字符串再断言——模板里直接插数字会被 lint 规则拦住，
+ *       而 OpenTUI 只接受 `${number}%` 这种字面量类型。
+ */
+function percentWidth(value: number): `${number}%` {
+  const clamped = Math.min(100, Math.max(0, value))
+  return `${clamped.toString()}%` as `${number}%`
+}
+
+/**
+ * 输入：TUI 上下文 + sessionID + 设置。
+ * 输出：侧栏里的上下文分类面板（可折叠），外加缓存命中与摘要块。
+ * 预期：分类条总量交给内置 Context 区块；缓存历史由服务端持久化，TUI 只读。
+ */
+export function Panel(props: {
+  readonly context: Context
+  readonly sessionID: string
+  readonly settings: Settings
+  readonly updateSettings: UpdateSettings
+}) {
+  const theme = props.context.theme
+  const copy = createMemo(() => resolveMessages(localeArgument(props.settings.locale)))
+  const data = usePanelData({
+    context: props.context,
+    sessionID: props.sessionID,
+    settings: () => props.settings,
+  })
+
+  const session = createMemo(() => props.context.data.session.get(props.sessionID))
+  const messages = createMemo(() => props.context.data.session.message.list(props.sessionID))
+
+  /** 最后一条 assistant；模型上限和 usage 分开取，避免 provider 没给 usage 时连上限都丢。 */
+  const lastAssistant = createMemo(() => {
+    const list = messages()
+    for (let index = list.length - 1; index >= 0; index -= 1) {
+      const message = list[index]
+      if (message?.type === "assistant") return message
+    }
+    return undefined
+  })
+
+  /** 模型原生窗口：从最后一条 assistant 的模型解析。 */
+  const nativeLimit = createMemo(() => {
+    const message = lastAssistant()
+    if (message === undefined) return 0
+    const model = props.context.data.location.model
+      .list(session()?.location)
+      ?.find((item) => item.providerID === message.model.providerID && item.id === message.model.id)
+    return model?.limit.context ?? 0
+  })
+
+  /** 真实 prompt token：只算 input + cache，output/reasoning 不属于本轮输入。 */
+  const realUsed = createMemo(() => {
+    const tokens = lastAssistant()?.tokens
+    if (tokens === undefined) return undefined
+    const used = tokens.input + tokens.cache.read + tokens.cache.write
+    return used > 0 ? used : undefined
+  })
+
+  /** 上下文占用：真实 usage 优先，缺失时才回退到服务端估算。 */
+  const contextTokens = createMemo(() => realUsed() ?? data.stats()?.estimatedTotal ?? 0)
+
+  /** 实际生效的上下文上限：自定义优先，否则模型原生。 */
+  const limit = createMemo(() => effectiveLimit(props.settings, nativeLimit()))
+
+  /** 仅当用户自定义上限时展示百分比（auto 时内置区块已经显示了）。 */
+  const percent = createMemo(() => {
+    const max = limit()
+    if (max === undefined || max <= 0) return undefined
+    return Math.round((contextTokens() / max) * 100)
+  })
+
+  const rows = createMemo(() => {
+    const value = data.stats()
+    if (value === undefined || value.estimatedTotal <= 0) return []
+    return scaleCategories(value, contextTokens()).filter((row) => row.value > 0)
+  })
+
+  const toggleExpanded = (): void => {
+    void props.updateSettings((draft) => {
+      draft.expanded = !draft.expanded
+    })
+  }
+
+  return (
+    <Show when={props.settings.enabled}>
+      <box width="100%" flexDirection="column">
+        <box flexDirection="row" height={1} onMouseDown={toggleExpanded}>
+          <box flexDirection="row" gap={1}>
+            <text fg={theme.text.base}>{props.settings.expanded ? "▼" : "▶"}</text>
+            <text fg={theme.text.base}>
+              <b>{copy().title}</b>
+            </text>
+            <Show when={props.settings.contextLimit !== "auto" && percent() !== undefined}>
+              <text fg={occupancyColor(percent() ?? 0, theme)}>
+                {`(${(percent() ?? 0).toString()}%)`}
+              </text>
+            </Show>
+          </box>
+        </box>
+        <Show when={data.terminal()}>
+          <text fg={theme.text.feedback.error.base} wrapMode="word">
+            {`⚠ ${copy().terminal}`}
+          </text>
+        </Show>
+        <Show when={props.settings.expanded}>
+          <box flexDirection="column" width="100%" paddingLeft={2}>
+            <For each={rows()}>
+              {(row) => (
+                <box flexDirection="row" height={1} gap={1}>
+                  <text fg={theme.text.muted} width={10} flexShrink={0}>
+                    {copy().labels[row.key]}
+                  </text>
+                  <box flexGrow={1} height={1} backgroundColor={theme.background.raised.high}>
+                    <box height={1} width={percentWidth(row.pct)} backgroundColor={occupancyColor(row.pct, theme)} />
+                  </box>
+                  <text fg={theme.text.muted} width={4} flexShrink={0} textAlign="right">
+                    {`${row.pct.toString()}%`}
+                  </text>
+                  <text fg={theme.text.muted} width={7} flexShrink={0} textAlign="right">
+                    {`${copy().approximate}${formatTokens(row.value)}`}
+                  </text>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+
+        <CacheSection
+          theme={theme}
+          copy={copy()}
+          settings={props.settings}
+          updateSettings={props.updateSettings}
+          samples={data.cache()}
+        />
+        <SummarySection
+          context={props.context}
+          theme={theme}
+          copy={copy()}
+          settings={props.settings}
+          updateSettings={props.updateSettings}
+          blocks={data.blocks()}
+        />
+      </box>
+    </Show>
+  )
+}

package/src/tui/panel/summaries.tsx

@@ -0,0 +1,192 @@
+import type { Context } from "@opencode/plugin/tui/context"
+import { SyntaxStyle, type RGBA } from "@opentui/core"
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js"
+
+import type { Messages } from "../../i18n/index.ts"
+import type { SummaryBlock } from "../../shared/blocks.ts"
+import { formatTimestamp, formatTokens } from "../../shared/format.ts"
+import type { Settings } from "../../shared/settings.ts"
+import type { UpdateSettings } from "../types.ts"
+
+/** 输入：摘要等级；输出：对应主题色；T1 蓝、T2 黄、T3 红。 */
+function tierColor(tier: SummaryBlock["tier"], theme: Context["theme"]): RGBA {
+  if (tier === 1) return theme.text.feedback.info.base
+  if (tier === 2) return theme.text.feedback.warning.base
+  return theme.text.feedback.error.base
+}
+
+/** 输入：无；输出：共享的 SyntaxStyle；预期：markdown 渲染器需要它，懒加载避免重复创建。 */
+let sharedSyntaxStyle: SyntaxStyle | undefined
+function getSyntaxStyle(): SyntaxStyle {
+  sharedSyntaxStyle ??= SyntaxStyle.create()
+  return sharedSyntaxStyle
+}
+
+/**
+ * 输入：TUI 上下文 + 主题 + 块。
+ * 输出：占满可用高度的阅读弹窗。
+ * 预期：标题保持 `[T1] b1 : title`；Babel 按纯文本显示，其余交给 markdown 渲染器，esc 关闭。
+ */
+export function SummaryDialog(props: {
+  readonly context: Context
+  readonly theme: Context["theme"]
+  readonly block: SummaryBlock
+}) {
+  const height = createMemo(() => Math.max(8, Math.min(30, props.context.renderer.height - 8)))
+  return (
+    <box paddingLeft={3} paddingRight={3} paddingBottom={1} gap={1}>
+      <box flexDirection="row" justifyContent="space-between" gap={1}>
+        <text fg={props.theme.text.base} wrapMode="word">
+          <b>{`[T${props.block.tier.toString()}] ${props.block.id} : ${props.block.title}`}</b>
+        </text>
+        <text
+          fg={props.theme.text.muted}
+          onMouseUp={() => {
+            props.context.ui.dialog.clear()
+          }}
+        >
+          esc
+        </text>
+      </box>
+      <scrollbox height={height()} scrollY={true} focused={true} width="100%">
+        <Show
+          when={props.block.format === "babel"}
+          fallback={
+            <markdown
+              content={props.block.body}
+              syntaxStyle={getSyntaxStyle()}
+              fg={props.theme.text.base}
+              conceal={true}
+              tableOptions={{ widthMode: "full", style: "columns" }}
+            />
+          }
+        >
+          <text fg={props.theme.text.base} wrapMode="word">
+            {props.block.body}
+          </text>
+        </Show>
+      </scrollbox>
+    </box>
+  )
+}
+
+/**
+ * 输入：主题 + 文案 + 设置 + 写入函数 + 摘要块。
+ * 输出：可折叠的摘要块列表；点击标题打开 markdown 阅读弹窗。
+ * 预期：只展示服务端返回的 active 链；hover 只让箭头动，标题和背景保持稳定。
+ */
+export function SummarySection(props: {
+  readonly context: Context
+  readonly theme: Context["theme"]
+  readonly copy: Messages
+  readonly settings: Settings
+  readonly updateSettings: UpdateSettings
+  readonly blocks: readonly SummaryBlock[]
+}) {
+  const [hovered, setHovered] = createSignal<string | undefined>(undefined)
+  const [frame, setFrame] = createSignal(0)
+
+  // 只有 hover 时跑两帧；鼠标移出或销毁时清理，避免后台定时器。
+  createEffect(() => {
+    if (hovered() === undefined) {
+      setFrame(0)
+      return
+    }
+    const timer = setInterval(() => setFrame((value) => (value + 1) % 2), 180)
+    onCleanup(() => {
+      clearInterval(timer)
+    })
+  })
+
+  /** 输入：无；输出：无；预期：翻转摘要区折叠状态。 */
+  const toggleFold = (): void => {
+    void props.updateSettings((draft) => {
+      draft.summariesExpanded = !draft.summariesExpanded
+    })
+  }
+
+  /** 输入：块；输出：无；预期：打开该块的 markdown 阅读弹窗。 */
+  const openSummary = (block: SummaryBlock): void => {
+    props.context.ui.dialog.show(() => (
+      <SummaryDialog context={props.context} theme={props.theme} block={block} />
+    ))
+    props.context.ui.dialog.set({ size: "large", centered: true })
+  }
+
+  return (
+    <Show when={props.settings.showSummaries}>
+      <box width="100%" flexDirection="column">
+        <box flexDirection="row" height={1} onMouseDown={toggleFold}>
+          <box flexDirection="row" gap={1}>
+            <text fg={props.theme.text.base}>{props.settings.summariesExpanded ? "▼" : "▶"}</text>
+            <text fg={props.theme.text.base}>
+              <b>{props.copy.summariesTitle}</b>
+            </text>
+            <text fg={props.theme.text.muted}>{`(${props.blocks.length.toString()})`}</text>
+          </box>
+        </box>
+        <Show when={props.settings.summariesExpanded}>
+          <Show
+            when={props.blocks.length > 0}
+            fallback={<text fg={props.theme.text.muted}>{props.copy.noData}</text>}
+          >
+            <box paddingLeft={2} flexDirection="column" width="100%">
+              <For each={props.blocks}>
+                {(block) => {
+                  const meta = (): string => {
+                    const parts: string[] = []
+                    if (props.settings.showTimeline) parts.push(formatTimestamp(block.at))
+                    if (block.sourceBlockIds !== undefined && block.sourceBlockIds.length > 0) {
+                      parts.push(`merged ${block.sourceBlockIds.map((id) => `#${id}`).join(" + ")}`)
+                    }
+                    return parts.join("  ")
+                  }
+                  return (
+                    <box flexDirection="column" width="100%">
+                      <box
+                        flexDirection="row"
+                        gap={1}
+                        onMouseOver={() => {
+                          setHovered(block.id)
+                        }}
+                        onMouseOut={() => {
+                          setHovered((current) => (current === block.id ? undefined : current))
+                        }}
+                        onMouseUp={() => {
+                          openSummary(block)
+                        }}
+                      >
+                        <text width={2} fg={tierColor(block.tier, props.theme)}>
+                          {hovered() === block.id ? (frame() === 0 ? "▸ " : " ▸") : "  "}
+                        </text>
+                        <text fg={props.theme.text.base} wrapMode="word" flexGrow={1}>
+                          <span style={{ fg: tierColor(block.tier, props.theme) }}>
+                            <b>{`[T${block.tier.toString()}]`}</b>
+                          </span>
+                          <span style={{ fg: props.theme.text.muted }}>
+                            {` ${block.id} : `}
+                          </span>
+                          <span style={{ fg: props.theme.text.base }}>{block.title}</span>
+                          <Show when={props.settings.showBlockTokens}>
+                            <span style={{ fg: props.theme.text.muted }}>
+                              {`  ≈${formatTokens(block.tokensAfter)}`}
+                            </span>
+                          </Show>
+                        </text>
+                      </box>
+                      <Show when={meta() !== ""}>
+                        <text fg={props.theme.text.muted} wrapMode="word">
+                          {`  ${meta()}`}
+                        </text>
+                      </Show>
+                    </box>
+                  )
+                }}
+              </For>
+            </box>
+          </Show>
+        </Show>
+      </box>
+    </Show>
+  )
+}