@dimina-kit/inspect 0.3.0 → 0.4.0-dev.20260716153350

package/src/appdata-panel-view.tsx

@@ -0,0 +1,165 @@
+// The pure AppData panel view: per-page bridge tabs over cumulative setData
+// state, each component path rendered as a collapsible JSON tree. Pure
+// presentation — bridge selection and data feeds live in the connected
+// container (or the host, when it renders this view directly).
+import React from 'react'
+import * as jsonViewModule from '@uiw/react-json-view'
+import type { AppDataSnapshot } from './appdata-accumulator.js'
+
+// The package ships CJS-flavoured type declarations (no `"type": "module"`),
+// so what `default` types as depends on the consumer's moduleResolution:
+// under NodeNext it is the whole module.exports object with the component on
+// `.default`; under Bundler (and in vite/vitest at runtime) it IS the
+// component (a forwardRef exotic object, so a typeof-function probe can't
+// tell the shapes apart; the interop namespace is the only shape carrying a
+// `default` key). The conditional type and the `in` probe resolve the
+// component under BOTH semantics — this package typechecks under NodeNext
+// and is also typechecked from source by Bundler-resolution consumers.
+type ModuleDefault = (typeof jsonViewModule)['default']
+type JsonViewComponent = ModuleDefault extends { default: infer C } ? C : ModuleDefault
+const moduleDefault: JsonViewComponent | { default: JsonViewComponent } = jsonViewModule.default
+// A type predicate (not a bare `in` check): plain `in` narrowing intersects
+// `Record<'default', unknown>` onto the component branch, degrading the
+// conditional's type to unknown.
+function isInteropNamespace(
+  m: JsonViewComponent | { default: JsonViewComponent },
+): m is { default: JsonViewComponent } {
+  return 'default' in m
+}
+const JsonView: JsonViewComponent
+  = isInteropNamespace(moduleDefault) ? moduleDefault.default : moduleDefault
+
+/** The view's full input state: a snapshot plus which bridge tab is active. */
+export interface AppDataPanelState {
+  bridges: AppDataSnapshot['bridges']
+  activeBridgeId: string | null
+  entries: AppDataSnapshot['entries']
+}
+
+function bridgeLabel(bridge: { id: string; pagePath: string | null }): string {
+  return bridge.pagePath ?? bridge.id
+}
+
+// Map the json-view CSS vars onto the panel's existing design tokens so the
+// component blends with both dark and light themes. CSS variables defined
+// here cascade to the json-view's internal vars (--w-rjv-*) via inline style.
+const JSON_VIEW_STYLE: React.CSSProperties = {
+  '--w-rjv-font-family': 'var(--font-family-mono)',
+  '--w-rjv-background-color': 'transparent',
+  '--w-rjv-color': 'var(--color-code-blue)',
+  '--w-rjv-key-string': 'var(--color-code-blue)',
+  '--w-rjv-line-color': 'var(--color-border-subtle)',
+  '--w-rjv-arrow-color': 'var(--color-text-secondary)',
+  '--w-rjv-info-color': 'var(--color-code-label)',
+  '--w-rjv-curlybraces-color': 'var(--color-text-secondary)',
+  '--w-rjv-brackets-color': 'var(--color-text-secondary)',
+  '--w-rjv-quotes-color': 'var(--color-code-orange)',
+  '--w-rjv-quotes-string-color': 'var(--color-code-orange)',
+  '--w-rjv-type-string-color': 'var(--color-code-orange)',
+  '--w-rjv-type-int-color': 'var(--color-code-number)',
+  '--w-rjv-type-float-color': 'var(--color-code-number)',
+  '--w-rjv-type-bigint-color': 'var(--color-code-number)',
+  '--w-rjv-type-boolean-color': 'var(--color-code-keyword)',
+  '--w-rjv-type-null-color': 'var(--color-code-keyword)',
+  '--w-rjv-type-nan-color': 'var(--color-code-keyword)',
+  '--w-rjv-type-undefined-color': 'var(--color-code-keyword)',
+  '--w-rjv-type-date-color': 'var(--color-code-label)',
+  '--w-rjv-type-url-color': 'var(--color-code-blue)',
+  fontSize: 12,
+  padding: '6px 8px',
+  wordBreak: 'break-all',
+  whiteSpace: 'pre-wrap',
+} as React.CSSProperties
+
+export interface AppDataPanelProps {
+  state: AppDataPanelState
+  onSelectBridge: (id: string) => void
+  /** Whether the mini-program's runtime session is `running` — distinguishes "小程序未运行" from a true empty-data vacuum below. Defaults to true so callers that don't track runtime status keep the plain empty-data text. */
+  isRuntimeRunning?: boolean
+}
+
+export function AppDataPanel({
+  state,
+  onSelectBridge,
+  isRuntimeRunning = true,
+}: AppDataPanelProps) {
+  const { bridges, activeBridgeId, entries } = state
+  return (
+    <div className="flex flex-col overflow-hidden flex-1" data-testid="appdata-panel">
+      {bridges.length > 1 && (
+        <div className="flex gap-1 px-2 py-1 border-b border-border-subtle shrink-0 overflow-x-auto bg-bg-panel">
+          {bridges.map((b) => {
+            const isActive = b.id === activeBridgeId
+            return (
+              <button
+                key={b.id}
+                onClick={() => onSelectBridge(b.id)}
+                title={b.id}
+                className={
+                  'shrink-0 px-2 py-0.5 text-[11px] rounded border transition-colors '
+                  + (isActive
+                    ? 'border-accent text-accent bg-surface-3'
+                    : 'border-border-subtle text-text-dim hover:border-accent hover:text-accent')
+                }
+              >
+                {bridgeLabel(b)}
+              </button>
+            )
+          })}
+        </div>
+      )}
+      {bridges.length === 0 ? (
+        <div className="text-[12px] text-text-dim text-center px-4 py-6">
+          {isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行'}
+        </div>
+      ) : (
+        // A bridge with zero entries still gets its keepalive container (with
+        // the per-bridge empty text) so live pushes land in a mounted tab.
+        // Keepalive: render every bridge's entries; hide non-active ones via
+        // `display: none` so the JsonView instances stay mounted and preserve
+        // their expand/collapse state across tab switches.
+        <div className="flex-1 overflow-hidden relative">
+          {bridges.map((b) => {
+            const isActive = b.id === activeBridgeId
+            const bridgeEntries = entries[b.id] ?? {}
+            const keys = Object.keys(bridgeEntries)
+            return (
+              <div
+                key={b.id}
+                data-bridge-id={b.id}
+                className="absolute inset-0 flex flex-col gap-2 p-2 overflow-y-auto"
+                style={{ display: isActive ? 'flex' : 'none' }}
+              >
+                {keys.length === 0 ? (
+                  <div className="text-[12px] text-text-dim text-center px-4 py-6">
+                    暂无页面数据（仅显示 Page 级 data）
+                  </div>
+                ) : (
+                  keys.map((comp) => (
+                    <div
+                      key={`${b.id}::${comp}`}
+                      className="border border-border-subtle rounded overflow-hidden shrink-0"
+                    >
+                      <div className="bg-surface-3 px-2 py-0.5 text-[11px] text-code-label truncate">
+                        {comp}
+                      </div>
+                      <JsonView
+                        value={(bridgeEntries[comp] ?? {}) as object}
+                        collapsed={1}
+                        displayDataTypes={false}
+                        displayObjectSize={false}
+                        enableClipboard={false}
+                        indentWidth={12}
+                        style={JSON_VIEW_STYLE}
+                      />
+                    </div>
+                  ))
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/appdata-source.ts

@@ -0,0 +1,18 @@
+// The host-transport contract behind the AppData panel: the panel's data
+// wiring (seed, live full-snapshot pushes, visibility gating) is written ONCE
+// against this interface (see ConnectedAppDataPanel); each host only
+// implements how the operations travel — Electron IPC channels, a same-origin
+// Worker-message tap feeding an AppDataAccumulator, or anything else.
+import type { AppDataSnapshot } from './appdata-accumulator.js'
+
+export interface AppDataPanelSource {
+  /** Fetch the current cumulative snapshot (seed on panel activation). */
+  getSnapshot(): Promise<AppDataSnapshot>
+  /** Live pushes — each push carries the FULL cumulative snapshot, not a
+   * delta (merging setData patches is the producer-side accumulator's job);
+   * returns an unsubscribe function. */
+  subscribe(onSnapshot: (snapshot: AppDataSnapshot) => void): () => void
+  /** Visibility gate: hosts whose feed costs something (listeners, walks)
+   * only keep it armed while some panel is visible. */
+  setActive(on: boolean): void
+}

package/src/compile-panel-view-logs.test.tsx

@@ -0,0 +1,269 @@
+/**
+ * CompilePanel `logs` prop contract (dmcc 日志链路). Additive to the base
+ * compile-panel suite — its `{ events, onClear }` assertions are untouched.
+ *
+ * Pinned contract:
+ *  - `CompilePanel` carries an OPTIONAL `logs?: CompileLogEntry[]` prop
+ *    (`{ at: number; stream: 'stdout' | 'stderr'; text: string }`,
+ *    oldest-first like `events`). Optional + default empty, so a render
+ *    without `logs` keeps its exact behaviour (incl. the 暂无编译 empty state).
+ *  - Log lines render as part of ONE timeline merged with events by `at`
+ *    (oldest first, matching the event row order). Merging is a VIEW
+ *    concern — feed state stays with the owner.
+ *  - Log rows are identifiable: `[data-compile-log]` carrying
+ *    `data-stream="stdout" | "stderr"` (the styling hook that makes stderr
+ *    lines distinguishable), the line text, and an HH:MM:SS timestamp like
+ *    event rows.
+ *  - The `[data-compile-current]` badge stays EVENT-driven: a newer log line
+ *    must not hijack the latest-status badge.
+ *  - Logs alone (no events) suppress the 暂无编译 empty state.
+ */
+import { describe, it, expect, vi } from 'vitest'
+import type { ComponentType } from 'react'
+import { render } from '@testing-library/react'
+
+interface CompileEvent {
+  at: number
+  status: string
+  message: string
+  hotReload?: boolean
+  /** Shared monotonic arrival counter across events AND logs. */
+  seq?: number
+}
+
+interface CompileLogEntry {
+  at: number
+  stream: 'stdout' | 'stderr'
+  text: string
+  /** Shared monotonic arrival counter across events AND logs. */
+  seq?: number
+}
+
+interface CompilePanelProps {
+  events: CompileEvent[]
+  logs?: CompileLogEntry[]
+  onClear: () => void
+}
+
+async function loadCompilePanel(): Promise<ComponentType<CompilePanelProps>> {
+  const mod = (await import('./compile-panel-view.js')) as {
+    CompilePanel?: ComponentType<CompilePanelProps>
+  }
+  expect(
+    mod.CompilePanel,
+    'compile-panel-view.tsx must have a named export `CompilePanel`',
+  ).toBeTruthy()
+  return mod.CompilePanel!
+}
+
+/** Local-time timestamp helper — HH:MM:SS assertions stay timezone-proof. */
+function at(h: number, m: number, s: number): number {
+  return new Date(2026, 5, 12, h, m, s).getTime()
+}
+
+async function renderPanel(
+  events: CompileEvent[],
+  logs: CompileLogEntry[],
+  onClear = vi.fn(),
+) {
+  const CompilePanel = await loadCompilePanel()
+  const utils = render(<CompilePanel events={events} logs={logs} onClear={onClear} />)
+  return { ...utils, onClear }
+}
+
+function logRowsOf(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('[data-compile-log]'))
+}
+
+function timelineTextsOf(container: HTMLElement): string[] {
+  // DOM order across BOTH row kinds = the rendered timeline order.
+  return Array.from(
+    container.querySelectorAll<HTMLElement>('[data-compile-row], [data-compile-log]'),
+  ).map((el) => el.textContent ?? '')
+}
+
+describe('CompilePanel: logs prop（dmcc 日志链路）', () => {
+  it('renders log lines as [data-compile-log] rows with the line text', async () => {
+    const { container } = await renderPanel(
+      [],
+      [
+        { at: at(9, 0, 0), stream: 'stdout', text: '✔ 收集配置信息' },
+        { at: at(9, 0, 1), stream: 'stdout', text: '✔ 输出编译产物' },
+      ],
+    )
+
+    const rows = logRowsOf(container)
+    expect(
+      rows,
+      'each log entry must render a [data-compile-log] row — the assertable marker that distinguishes log lines from event rows',
+    ).toHaveLength(2)
+    const texts = rows.map((r) => r.textContent ?? '')
+    expect(texts.some((t) => t.includes('✔ 收集配置信息'))).toBe(true)
+    expect(texts.some((t) => t.includes('✔ 输出编译产物'))).toBe(true)
+  })
+
+  it('tags every log row with data-stream so stderr lines are distinguishable', async () => {
+    const { container } = await renderPanel(
+      [],
+      [
+        { at: at(9, 1, 0), stream: 'stdout', text: '✔ 编译页面逻辑' },
+        {
+          at: at(9, 1, 5),
+          stream: 'stderr',
+          text: '[logic] esbuild 转换失败 /tmp/p/pages/index/index.js: Transform failed with 1 error:',
+        },
+      ],
+    )
+
+    const rows = logRowsOf(container)
+    expect(rows).toHaveLength(2)
+    const byText = (needle: string) =>
+      rows.find((r) => (r.textContent ?? '').includes(needle))
+    expect(
+      byText('✔ 编译页面逻辑')!.getAttribute('data-stream'),
+      'stdout lines must carry data-stream="stdout"',
+    ).toBe('stdout')
+    expect(
+      byText('esbuild 转换失败')!.getAttribute('data-stream'),
+      'stderr lines must carry data-stream="stderr" — the styling hook for error-ish lines',
+    ).toBe('stderr')
+  })
+
+  it('merges events and logs into ONE timeline ordered by `at`, oldest first', async () => {
+    const { container } = await renderPanel(
+      [
+        { at: at(10, 0, 0), status: 'compiling', message: '事件一' },
+        { at: at(10, 0, 4), status: 'ready', message: '事件二' },
+      ],
+      [
+        { at: at(10, 0, 2), stream: 'stdout', text: '日志一' },
+        { at: at(10, 0, 6), stream: 'stdout', text: '日志二' },
+      ],
+    )
+
+    const texts = timelineTextsOf(container)
+    expect(
+      texts,
+      'events ([data-compile-row]) and logs ([data-compile-log]) must interleave in one timeline',
+    ).toHaveLength(4)
+    const indexOf = (needle: string) => texts.findIndex((t) => t.includes(needle))
+    expect(indexOf('事件一')).toBe(0)
+    expect(indexOf('日志一')).toBe(1)
+    expect(indexOf('事件二')).toBe(2)
+    expect(indexOf('日志二')).toBe(3)
+  })
+
+  it('shows an HH:MM:SS timestamp on log rows (same format as event rows)', async () => {
+    const { container } = await renderPanel(
+      [],
+      [{ at: at(11, 5, 9), stream: 'stdout', text: '✔ 输出编译产物' }],
+    )
+
+    const row = logRowsOf(container)[0]!
+    expect(row.textContent).toMatch(/11:05:09/)
+  })
+
+  it('keeps the [data-compile-current] badge EVENT-driven even when a log line is newer', async () => {
+    const { container } = await renderPanel(
+      [{ at: at(12, 0, 0), status: 'ready', message: '编译完成（最新事件）' }],
+      [{ at: at(12, 0, 30), stream: 'stderr', text: '[compat] Unsupported wx API: wx.switchTab (/pages/tabbar-me/tabbar-me.js:7)' }],
+    )
+
+    const badge = container.querySelector<HTMLElement>('[data-compile-current]')
+    expect(badge, 'the current-status badge must still render').not.toBeNull()
+    expect(
+      badge!.getAttribute('data-status'),
+      'the badge reflects the latest EVENT — log chatter must not hijack the compile status',
+    ).toBe('ready')
+    expect(badge!.textContent).toContain('编译完成（最新事件）')
+  })
+
+  it('suppresses the 暂无编译 empty state when there are logs but no events', async () => {
+    const { container } = await renderPanel(
+      [],
+      [{ at: at(13, 0, 0), stream: 'stdout', text: '✔ 收集配置信息' }],
+    )
+
+    expect(
+      container.textContent,
+      'a non-empty log means the panel has content — the empty-state copy must not show',
+    ).not.toMatch(/暂无编译/)
+    expect(logRowsOf(container)).toHaveLength(1)
+  })
+
+  it('still shows the empty state when both events and logs are empty', async () => {
+    const { container } = await renderPanel([], [])
+    expect(container.textContent).toMatch(/暂无编译/)
+    expect(logRowsOf(container)).toHaveLength(0)
+    expect(container.querySelectorAll('[data-compile-row]')).toHaveLength(0)
+  })
+})
+
+/**
+ * `at` is a Date.now() millisecond stamp, so a
+ * status event and the log lines of the same compile routinely COLLIDE on the
+ * same `at`. The current merge pushes ALL events first, then ALL logs, then
+ * stable-sorts by `at` — so within a same-`at` tie, events always rank above
+ * logs no matter which actually arrived first. The pin: ties keep ARRIVAL
+ * order (the suggested carrier is a shared monotonic `seq` across both
+ * stores; any equivalent arrival marker works — only the rendered order is
+ * pinned). Across different `at` values the oldest-first order is untouched.
+ */
+describe('CompilePanel: same-at ties keep arrival order, not type priority', () => {
+  const T = at(14, 30, 0)
+
+  it('a log line that ARRIVED before a same-at event renders above it', async () => {
+    const { container } = await renderPanel(
+      // Arrival: log first (seq 0), event second (seq 1) — same `at`.
+      [{ at: T, seq: 1, status: 'ready', message: '编译完成' }],
+      [{ at: T, seq: 0, stream: 'stdout', text: '✔ 输出编译产物' }],
+    )
+
+    const texts = timelineTextsOf(container)
+    expect(texts).toHaveLength(2)
+    const logIndex = texts.findIndex((t) => t.includes('✔ 输出编译产物'))
+    const eventIndex = texts.findIndex((t) => t.includes('编译完成'))
+    expect(logIndex).toBeGreaterThanOrEqual(0)
+    expect(eventIndex).toBeGreaterThanOrEqual(0)
+    expect(
+      logIndex,
+      'same-at tie: the timeline must keep ARRIVAL order — the type-grouped concat + stable sort pins events '
+      + 'above logs regardless of which actually came first, so the ready event renders above the very log '
+      + 'lines that preceded it',
+    ).toBeLessThan(eventIndex)
+  })
+
+  it('an event that ARRIVED before a same-at log line renders above it (arrival order, not log priority)', async () => {
+    const { container } = await renderPanel(
+      // Arrival: event first (seq 0), log second (seq 1) — same `at`.
+      [{ at: T, seq: 0, status: 'compiling', message: '正在编译...' }],
+      [{ at: T, seq: 1, stream: 'stdout', text: '✔ 收集配置信息' }],
+    )
+
+    const texts = timelineTextsOf(container)
+    expect(texts).toHaveLength(2)
+    const eventIndex = texts.findIndex((t) => t.includes('正在编译'))
+    const logIndex = texts.findIndex((t) => t.includes('✔ 收集配置信息'))
+    expect(
+      eventIndex,
+      'the fix must be ARRIVAL order, not a blanket "logs before events" inversion — an event that arrived '
+      + 'first stays above its same-at followers',
+    ).toBeLessThan(logIndex)
+  })
+
+  it('different `at` values keep the existing oldest-first order regardless of seq', async () => {
+    const { container } = await renderPanel(
+      [{ at: at(14, 30, 5), seq: 0, status: 'ready', message: '编译完成' }],
+      [{ at: at(14, 30, 1), seq: 1, stream: 'stdout', text: '✔ 收集配置信息' }],
+    )
+
+    const texts = timelineTextsOf(container)
+    const eventIndex = texts.findIndex((t) => t.includes('编译完成'))
+    const logIndex = texts.findIndex((t) => t.includes('✔ 收集配置信息'))
+    expect(
+      logIndex,
+      'the arrival tie-break must only apply WITHIN a same-at tie — across different `at` values the timeline '
+      + 'stays oldest-first (the earlier log at 14:30:01 renders above the later event at 14:30:05)',
+    ).toBeLessThan(eventIndex)
+  })
+})

package/src/compile-panel-view.test.tsx

@@ -0,0 +1,194 @@
+/**
+ * 编译信息 tab — CompilePanel component contract.
+ *
+ * Target file: `compile-panel-view.tsx`, named export `CompilePanel`,
+ * props `{ events: CompileEvent[]; onClear: () => void }` where `events` is
+ * the host's chronological (oldest-first) compile-event log.
+ *
+ * Pinned contract:
+ *  - Empty state: no events → copy matching /暂无编译/, no rows.
+ *  - Current-status badge: `[data-compile-current]` reflects the LATEST
+ *    event — `data-status` attribute = its status, text contains its message.
+ *  - History list: rows are `[data-compile-row]`, rendered OLDEST FIRST
+ *    (chronological, matching the input array — the panel is a console-style
+ *    log that auto-scrolls to the newest row at the bottom), each carrying
+ *    `data-status` (the styling hook that makes error rows distinguishable)
+ *    and an HH:MM:SS timestamp.
+ *  - hotReload events render a recognizable 热更新 chip; plain events don't.
+ *  - A ready event immediately preceded by a compiling event shows the
+ *    elapsed time in `[data-compile-duration]` (e.g. 2.2s); unpaired ready
+ *    events (first event, or previous event isn't compiling) show none.
+ *  - The 清空 button calls `onClear`.
+ *
+ * The module is loaded via a dynamic import so a missing named export fails
+ * with an explicit assertion message instead of an import-time throw.
+ */
+import { describe, it, expect, vi } from 'vitest'
+import type { ComponentType } from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+/** Structural duplicate of the `CompileEvent` export from compile-types. */
+interface CompileEvent {
+  at: number
+  status: string
+  message: string
+  hotReload?: boolean
+}
+
+interface CompilePanelProps {
+  events: CompileEvent[]
+  onClear: () => void
+}
+
+async function loadCompilePanel(): Promise<ComponentType<CompilePanelProps>> {
+  const mod = (await import('./compile-panel-view.js')) as {
+    CompilePanel?: ComponentType<CompilePanelProps>
+  }
+  expect(
+    mod.CompilePanel,
+    'compile-panel-view.tsx must have a named export `CompilePanel`',
+  ).toBeTruthy()
+  return mod.CompilePanel!
+}
+
+/** Local-time timestamp helper — HH:MM:SS assertions stay timezone-proof. */
+function at(h: number, m: number, s: number): number {
+  return new Date(2026, 5, 12, h, m, s).getTime()
+}
+
+async function renderPanel(events: CompileEvent[], onClear = vi.fn()) {
+  const CompilePanel = await loadCompilePanel()
+  const utils = render(<CompilePanel events={events} onClear={onClear} />)
+  return { ...utils, onClear }
+}
+
+function rowsOf(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('[data-compile-row]'))
+}
+
+describe('CompilePanel (编译 tab body)', () => {
+  it('renders an empty state (暂无编译…) and no rows when there are no events', async () => {
+    const { container } = await renderPanel([])
+    expect(
+      container.textContent,
+      'with no events the panel must show an empty-state copy instead of a blank area',
+    ).toMatch(/暂无编译/)
+    expect(rowsOf(container)).toHaveLength(0)
+  })
+
+  it('shows a current-status badge for the LATEST event (status attribute + message text)', async () => {
+    const { container } = await renderPanel([
+      { at: at(9, 0, 0), status: 'compiling', message: '正在编译...' },
+      { at: at(9, 0, 2), status: 'ready', message: '编译完成（最新）' },
+    ])
+
+    const badge = container.querySelector<HTMLElement>('[data-compile-current]')
+    expect(
+      badge,
+      'the panel header must carry a [data-compile-current] badge reflecting the most recent event',
+    ).not.toBeNull()
+    expect(
+      badge!.getAttribute('data-status'),
+      'the badge must expose the latest status via data-status (the assertable styling hook)',
+    ).toBe('ready')
+    expect(badge!.textContent).toContain('编译完成（最新）')
+  })
+
+  it('lists history OLDEST FIRST with an HH:MM:SS timestamp and the message on each row', async () => {
+    const { container } = await renderPanel([
+      { at: at(9, 5, 7), status: 'compiling', message: '第一条' },
+      { at: at(9, 5, 9), status: 'ready', message: '第二条' },
+    ])
+
+    const rows = rowsOf(container)
+    expect(rows).toHaveLength(2)
+    expect(
+      rows[0]!.textContent,
+      'rows must be chronological: the oldest event is the first row',
+    ).toContain('第一条')
+    expect(rows[0]!.textContent).toMatch(/09:05:07/)
+    expect(rows[1]!.textContent).toContain('第二条')
+    expect(rows[1]!.textContent).toMatch(/09:05:09/)
+  })
+
+  it('marks error rows distinguishably via data-status="error"', async () => {
+    const { container } = await renderPanel([
+      { at: at(10, 0, 0), status: 'ready', message: '编译完成' },
+      { at: at(10, 0, 5), status: 'error', message: '编译失败: syntax error' },
+    ])
+
+    const rows = rowsOf(container)
+    expect(rows).toHaveLength(2)
+    // Oldest first → the error event is the last row.
+    expect(
+      rows[1]!.getAttribute('data-status'),
+      'error rows must carry data-status="error" so they can be styled (and asserted) distinctly',
+    ).toBe('error')
+    expect(rows[0]!.getAttribute('data-status')).toBe('ready')
+  })
+
+  it('renders a 已重启 chip on hotReload events only', async () => {
+    const { container } = await renderPanel([
+      { at: at(11, 0, 0), status: 'ready', message: '普通编译完成' },
+      { at: at(11, 0, 5), status: 'ready', message: '编译完成，已重启', hotReload: true },
+    ])
+
+    const rows = rowsOf(container)
+    expect(rows).toHaveLength(2)
+    // Oldest first → the hotReload event is the last row.
+    expect(
+      rows[1]!.textContent,
+      'a hotReload event must carry a recognizable 已重启 marker',
+    ).toMatch(/已重启/)
+    expect(
+      rows[0]!.textContent,
+      'plain events must NOT carry the 已重启 marker',
+    ).not.toMatch(/已重启/)
+  })
+
+  it('shows the elapsed time on a ready event paired with the immediately preceding compiling event', async () => {
+    const t0 = at(12, 0, 0)
+    const { container } = await renderPanel([
+      { at: t0, status: 'compiling', message: '正在编译...' },
+      { at: t0 + 2200, status: 'ready', message: '编译完成' },
+    ])
+
+    const rows = rowsOf(container)
+    // Oldest first → the paired ready event is the last row.
+    const duration = rows[1]!.querySelector<HTMLElement>('[data-compile-duration]')
+    expect(
+      duration,
+      'a ready row paired with the previous compiling row must show the elapsed time in [data-compile-duration]',
+    ).not.toBeNull()
+    expect(duration!.textContent).toMatch(/2\.2\s*s/)
+  })
+
+  it('shows NO duration when the ready event cannot be paired with a preceding compiling event', async () => {
+    // Case 1: ready is the very first event (nothing to pair with).
+    const first = await renderPanel([
+      { at: at(13, 0, 0), status: 'ready', message: '编译完成' },
+    ])
+    expect(first.container.querySelector('[data-compile-duration]')).toBeNull()
+    first.unmount()
+
+    // Case 2: the immediately previous event is not compiling.
+    const second = await renderPanel([
+      { at: at(13, 1, 0), status: 'compiling', message: '正在编译...' },
+      { at: at(13, 1, 2), status: 'error', message: '编译失败' },
+      { at: at(13, 1, 9), status: 'ready', message: '编译完成' },
+    ])
+    expect(
+      second.container.querySelector('[data-compile-duration]'),
+      'pairing is strictly with the IMMEDIATELY preceding event — an intervening error breaks the pair',
+    ).toBeNull()
+  })
+
+  it('the 清空 button calls onClear', async () => {
+    const { getByRole, onClear } = await renderPanel([
+      { at: at(14, 0, 0), status: 'ready', message: '编译完成' },
+    ])
+
+    fireEvent.click(getByRole('button', { name: '清空' }))
+    expect(onClear).toHaveBeenCalledTimes(1)
+  })
+})