@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

package/src/client/components/workspace/context-panel/index.tsx

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { RefreshCw } from 'lucide-preact';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import type { SessionContextTelemetry } from '@/shared/types';
+import { emptyTelemetry } from '@/client/data/context-data';
+import { ContextWindowCard } from '@/client/components/workspace/context-panel/WindowCard';
+import { ContextStatsGrid } from '@/client/components/workspace/context-panel/StatsGrid';
+import { LastMessageCard } from '@/client/components/workspace/context-panel/LastMessageCard';
+import { TokenDistributionBar } from '@/client/components/workspace/context-panel/TokenDistributionBar';
+import { RawMessagesList } from '@/client/components/workspace/context-panel/RawMessagesList';
+import { useRealtimeTopic } from '@/client/hooks/ui/realtime';
+import { sessionTelemetryTopic } from '@/shared/lib/realtime/protocol';
+
+interface ContextPanelProps {
+  className?: string;
+  enabled?: boolean;
+  refreshKey?: number;
+  onClose?: () => void;
+}
+
+export function ContextPanel({
+  className = '',
+  enabled = true,
+  refreshKey = 0
+}: ContextPanelProps) {
+  const [searchParams] = useSearchParams();
+  const sessionId = searchParams.get('sessionId');
+
+  const [telemetry, setTelemetry] = useState<SessionContextTelemetry>(() =>
+    emptyTelemetry(sessionId || 'default', 'Session not started')
+  );
+
+  // Bound to the current session and live until unmount so the auto-refresh
+  // interval below can re-read it without being torn down per render.
+  const cancelledRef = useRef(false);
+  const loadTelemetry = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    const param = sessionId ? `?sessionId=${encodeURIComponent(sessionId)}` : '';
+    fetch(`/api/telemetry/context${param}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!cancelledRef.current && data && data.telemetry) {
+          setTelemetry(data.telemetry);
+        }
+      })
+      .catch((err) => {
+        if (!cancelledRef.current) {
+          console.warn('Failed to fetch context telemetry:', err);
+        }
+      });
+  }, [sessionId]);
+
+  useEffect(() => {
+    cancelledRef.current = false;
+    if (!enabled) return;
+    loadTelemetry();
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, [enabled, refreshKey, loadTelemetry]);
+
+  // Telemetry rides the `session:<id>:telemetry` topic: the server pushes a
+  // fresh snapshot when the turn's usage lands, so neither the poll nor the
+  // file-mutation hook is needed. The HTTP read above stays as the fallback for
+  // MOCK mode and for a session whose topic has no resolver.
+  const topicTelemetry = useRealtimeTopic<SessionContextTelemetry>(
+    sessionId ? sessionTelemetryTopic(sessionId) : null,
+    { enabled },
+  );
+  // A new telemetry snapshot means the transcript grew past the last read —
+  // the server republishes the topic when a tool result lands (and at the run
+  // boundary) — so the paged raw-messages view below re-reads its page too.
+  // The HTTP fallback path above still owns the summary state; this effect
+  // only drives the raw list's refresh key.
+  const [rawRefreshKey, setRawRefreshKey] = useState(0);
+  useEffect(() => {
+    if (topicTelemetry.data) {
+      setTelemetry(topicTelemetry.data);
+      setRawRefreshKey((k) => k + 1);
+    }
+  }, [topicTelemetry.data]);
+
+  if (!enabled) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">No session selected</span>
+      </div>
+    );
+  }
+
+  if (telemetry.messagesCount === 0) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">Session not started</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col h-full bg-paper text-ink overflow-hidden select-none ${className}`}>
+      {/* Top Header with a refresh affordance: the telemetry rides a topic a
+          tool call republishes, and the button spins on that push so the user
+          notices the numbers moved. */}
+      <div className="flex-shrink-0 p-4 border-b border-ink/10 bg-paper">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <h2 className="text-xs font-medium text-ink tracking-tight truncate">
+              {telemetry.sessionTitle}
+            </h2>
+            <div className="text-[11px] text-ink/50 mt-1 truncate font-mono">
+              {telemetry.timestamp}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => { topicTelemetry.refresh(); loadTelemetry(); }}
+            disabled={!enabled}
+            title="Refresh context telemetry"
+            aria-label="Refresh context telemetry"
+            aria-busy={topicTelemetry.refreshing}
+            className="flex-shrink-0 rounded-md border border-ink/15 bg-paper p-1.5 text-ink/80 transition-colors hover:bg-ink/5 disabled:opacity-50"
+          >
+            <RefreshCw size={12} className={topicTelemetry.refreshing ? 'animate-spin text-ink' : ''} />
+          </button>
+        </div>
+      </div>
+
+      {/* Scrollable Context Body */}
+      <div className="flex-1 scrollbar-overlay-container p-4 space-y-4">
+        {/* 1. Context Window Usage Progress Card */}
+        <ContextWindowCard
+          used={telemetry.contextUsed}
+          limit={telemetry.contextLimit}
+          percent={telemetry.contextPercent}
+        />
+
+        {/* 2. Metric Row (Messages, User, Assistant, Cache Hit, Cost + detail) */}
+        <ContextStatsGrid
+          messagesCount={telemetry.messagesCount}
+          userCount={telemetry.userCount}
+          assistantCount={telemetry.assistantCount}
+          costFormatted={telemetry.costFormatted}
+          cacheHitAverage={telemetry.cacheHitAverage}
+          costBreakdown={telemetry.costBreakdown}
+        />
+
+        {/* 3. Last Assistant Message Stats */}
+        <LastMessageCard
+          input={telemetry.lastMessage.input}
+          output={telemetry.lastMessage.output}
+          reasoning={telemetry.lastMessage.reasoning}
+          cacheRead={telemetry.lastMessage.cacheRead}
+          cacheWrite={telemetry.lastMessage.cacheWrite}
+          cacheHitPercent={telemetry.lastMessage.cacheHitPercent}
+        />
+
+        {/* 4. Token Distribution Segmented Bar */}
+        <TokenDistributionBar
+          userPercent={telemetry.distribution.userPercent}
+          assistantPercent={telemetry.distribution.assistantPercent}
+          toolPercent={telemetry.distribution.toolPercent}
+          otherPercent={telemetry.distribution.otherPercent}
+        />
+
+        {/* 5. Raw Messages List (server-side paged) */}
+        <RawMessagesList sessionId={sessionId} refreshKey={refreshKey + rawRefreshKey} />
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/context-panel/pure-helpers.test.ts

@@ -0,0 +1,264 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Small pure tables and derivations that several surfaces read at once, so a
+ * drift here is a UI bug far from the edit:
+ *
+ * - `VIEWPORT_CLASSES` is the only place a device preset becomes CSS; a missing
+ *   or misspelled key renders an unstyled iframe, and the responsive preset is
+ *   the one entry that must NOT carry a border (it is not emulating a device).
+ * - `SORT_OPTIONS` must stay in menu order and in lockstep with the validation
+ *   list the comparator uses, or the menu offers an option sorting ignores.
+ * - `pluginSelectionKey` is `(id, scope)`: the same `name@marketplace` installs
+ *   into both registries, and keying by id alone made the two copies one row.
+ * - `modelLabel` / `hashModel` / `pageWindow` back the raw-message browser: the
+ *   label splits `provider/model`, the hash picks a stable colour, and the
+ *   window condenses a long page list around the current page.
+ * - `getToolInputPath` / `getToolInputAction` read raw tool arguments, which
+ *   omp sends as an object but the MOCK path may send as a JSON string.
+ * - `truncateTailLines` is display-only: it keeps the LAST lines (the newest
+ *   output is the interesting end) and reports how many were dropped.
+ * - `extractLineMeta` resolves the gutter's starting line through an ordered
+ *   heuristic chain — the order is load-bearing, so each rung is pinned.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { VIEWPORT_CLASSES } from '@/client/components/common/viewport';
+import { SORT_LABELS, SORT_OPTIONS } from '@/client/components/common/sort-menu/options';
+import { pluginSelectionKey } from '@/client/components/settings/categories/plugin-settings/selection';
+import {
+  ACCESS_LEVEL_DESCRIPTIONS,
+  ACCESS_LEVEL_LABELS,
+} from '@/client/components/workspace/chat-timeline/chat-input/access-levels';
+import { hashModel, MODEL_COLORS, modelLabel, PAGE_SIZE, pageWindow } from '@/client/components/workspace/context-panel/raw-messages';
+import {
+  getToolInputAction,
+  getToolInputPath,
+} from '@/client/components/workspace/chat-timeline/tool-renderers/shared/tool-input';
+import {
+  MAX_OUTPUT_LINES,
+  truncateTailLines,
+} from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
+import { extractLineMeta } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/read-line-meta';
+import type { PluginItem } from '@/shared/types';
+import type { ToolCallData } from '@/shared/types/chat';
+
+describe('VIEWPORT_CLASSES', () => {
+  test('every preset mode maps to a non-empty class string', () => {
+    expect(Object.keys(VIEWPORT_CLASSES).sort()).toEqual(
+      ['desktop-16-9', 'laptop', 'mobile', 'mobile-lg', 'responsive', 'tablet'].sort(),
+    );
+    for (const [mode, classes] of Object.entries(VIEWPORT_CLASSES)) {
+      expect(classes.trim(), mode).not.toBe('');
+    }
+  });
+
+  test('device presets get a frame; the responsive preset is a bare full-bleed box', () => {
+    expect(VIEWPORT_CLASSES.responsive).toBe('w-full h-full border-0');
+    for (const mode of ['desktop-16-9', 'laptop', 'tablet', 'mobile', 'mobile-lg'] as const) {
+      expect(VIEWPORT_CLASSES[mode], mode).toContain('border');
+      expect(VIEWPORT_CLASSES[mode], mode).toContain('overflow-hidden');
+    }
+  });
+
+  test('the presets carry the device pixel sizes the labels promise', () => {
+    expect(VIEWPORT_CLASSES.laptop).toContain('w-[1024px]');
+    expect(VIEWPORT_CLASSES.tablet).toContain('w-[768px]');
+    expect(VIEWPORT_CLASSES.mobile).toContain('w-[375px]');
+    expect(VIEWPORT_CLASSES['mobile-lg']).toContain('w-[414px]');
+  });
+});
+
+describe('sort menu options', () => {
+  test('menu order is the declared order', () => {
+    expect(SORT_OPTIONS).toEqual(['A-Z', 'Z-A', 'LATEST_SESSION', 'LATEST_ADDED']);
+  });
+
+  test('every option has a label and the time-based ones are title-cased', () => {
+    for (const option of SORT_OPTIONS) {
+      expect(SORT_LABELS[option], option).toBeTruthy();
+    }
+    expect(SORT_LABELS.LATEST_SESSION).toBe('Latest Session');
+    expect(SORT_LABELS.LATEST_ADDED).toBe('Latest Added');
+    expect(SORT_LABELS['A-Z']).toBe('A-Z');
+  });
+});
+
+describe('pluginSelectionKey', () => {
+  const plugin = (id: string, scope: PluginItem['scope']): PluginItem =>
+    ({ id, scope, name: id, packageName: id, version: '1.0.0', kind: 'marketplace', enabled: true, description: '' }) as PluginItem;
+
+  test('the same plugin id in both registries yields two distinct keys', () => {
+    const userKey = pluginSelectionKey(plugin('manifest@local-mkt', 'user'));
+    const projectKey = pluginSelectionKey(plugin('manifest@local-mkt', 'project'));
+    expect(userKey).not.toBe(projectKey);
+    expect(userKey).toBe('manifest@local-mkt::user');
+    expect(projectKey).toBe('manifest@local-mkt::project');
+  });
+
+  test('two different ids in the same scope stay distinct', () => {
+    expect(pluginSelectionKey(plugin('a@mkt', 'user'))).not.toBe(pluginSelectionKey(plugin('b@mkt', 'user')));
+  });
+});
+
+describe('access level labels', () => {
+  test('every approval mode has a label and a description', () => {
+    expect(Object.keys(ACCESS_LEVEL_LABELS).sort()).toEqual(['always-ask', 'write', 'yolo']);
+    for (const mode of Object.keys(ACCESS_LEVEL_LABELS)) {
+      expect(ACCESS_LEVEL_DESCRIPTIONS[mode as keyof typeof ACCESS_LEVEL_LABELS], mode).toBeTruthy();
+    }
+  });
+
+  test('the labels say what the mode actually does', () => {
+    expect(ACCESS_LEVEL_LABELS['always-ask']).toBe('Always ask');
+    expect(ACCESS_LEVEL_LABELS.write).toBe('Minimal');
+    expect(ACCESS_LEVEL_LABELS.yolo).toBe('Full bypass');
+    expect(ACCESS_LEVEL_DESCRIPTIONS.yolo).toContain('without asking');
+  });
+});
+
+describe('raw-message helpers', () => {
+  test('modelLabel splits provider from model, and passes a bare id through', () => {
+    expect(modelLabel('deepseek/deepseek-v4-flash')).toBe('deepseek · deepseek-v4-flash');
+    expect(modelLabel('bare-model')).toBe('bare-model');
+  });
+
+  test('a leading slash is not a provider separator', () => {
+    // `slash > 0` is the guard: an id starting with '/' has no provider part.
+    expect(modelLabel('/leading')).toBe('/leading');
+  });
+
+  test('hashModel is deterministic, non-negative, and indexes a real colour', () => {
+    const first = hashModel('deepseek/deepseek-v4-flash');
+    expect(first).toBe(hashModel('deepseek/deepseek-v4-flash'));
+    expect(first).toBeGreaterThanOrEqual(0);
+    expect(MODEL_COLORS[first % MODEL_COLORS.length]).toBeTruthy();
+    expect(MODEL_COLORS[first % MODEL_COLORS.length]).toMatch(/^bg-/);
+  });
+
+  test('pageWindow lists every page while the count is small', () => {
+    expect(pageWindow(1, 1)).toEqual([1]);
+    expect(pageWindow(4, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  test('pageWindow condenses a long list around the current page', () => {
+    expect(pageWindow(5, 20)).toEqual([1, '…', 4, 5, 6, '…', 20]);
+    // Near the start the window widens instead of leaving a one-page gap.
+    expect(pageWindow(2, 20)).toEqual([1, 2, 3, 4, '…', 20]);
+    // Near the end likewise, mirrored.
+    expect(pageWindow(19, 20)).toEqual([1, '…', 17, 18, 19, 20]);
+  });
+
+  test('pageWindow never emits an out-of-range page', () => {
+    const window = pageWindow(1, 20);
+    for (const entry of window) {
+      if (entry === '…') continue;
+      expect(entry).toBeGreaterThanOrEqual(1);
+      expect(entry).toBeLessThanOrEqual(20);
+    }
+    expect(PAGE_SIZE).toBeGreaterThan(0);
+  });
+});
+
+describe('tool input readers', () => {
+  test('reads path/action out of an object payload', () => {
+    expect(getToolInputPath({ path: 'src/a.ts', action: 'read' })).toBe('src/a.ts');
+    expect(getToolInputAction({ path: 'src/a.ts', action: 'read' })).toBe('read');
+  });
+
+  test('a JSON string payload (the MOCK path) yields undefined, not a throw', () => {
+    expect(getToolInputPath('{"path":"src/a.ts"}')).toBeUndefined();
+    expect(getToolInputAction('{"action":"read"}')).toBeUndefined();
+  });
+
+  test('a wrong-typed or absent field is undefined', () => {
+    expect(getToolInputPath({ path: 42 })).toBeUndefined();
+    expect(getToolInputPath({})).toBeUndefined();
+    expect(getToolInputPath(undefined)).toBeUndefined();
+    expect(getToolInputAction(null as unknown as undefined)).toBeUndefined();
+  });
+});
+
+describe('truncateTailLines', () => {
+  test('empty input is returned untouched with nothing skipped', () => {
+    expect(truncateTailLines('')).toEqual({ text: '', skipped: 0 });
+  });
+
+  test('text at or under the limit is returned verbatim', () => {
+    expect(truncateTailLines('a\nb\nc', 3)).toEqual({ text: 'a\nb\nc', skipped: 0 });
+    expect(truncateTailLines('a\nb\nc', 5)).toEqual({ text: 'a\nb\nc', skipped: 0 });
+  });
+
+  test('over the limit the LAST lines survive and the drop count is reported', () => {
+    expect(truncateTailLines('l1\nl2\nl3\nl4\nl5', 2)).toEqual({ text: 'l4\nl5', skipped: 3 });
+  });
+
+  test('the default limit is the module ceiling', () => {
+    const lines = Array.from({ length: MAX_OUTPUT_LINES + 2 }, (_, i) => `line-${i}`);
+    const result = truncateTailLines(lines.join('\n'));
+    expect(result.skipped).toBe(2);
+    expect(result.text.startsWith('line-2\n')).toBe(true);
+    expect(result.text.endsWith(`line-${MAX_OUTPUT_LINES + 1}`)).toBe(true);
+  });
+
+  test('CRLF input is split on the CRLF boundary, not mid-line', () => {
+    expect(truncateTailLines('a\r\nb\r\nc', 2)).toEqual({ text: 'b\nc', skipped: 1 });
+  });
+});
+
+describe('extractLineMeta precedence', () => {
+  const call = (overrides: Partial<ToolCallData>): ToolCallData =>
+    ({ id: 't1', type: 'read', title: 'read', ...overrides }) as ToolCallData;
+
+  test('an explicit lineNumbers array wins over every later rung', () => {
+    const meta = extractLineMeta(
+      call({ details: { displayContent: { lineNumbers: [10, 11], startLine: 10 }, startLine: 99 }, input: { start_line: 42 } }),
+    );
+    expect(meta).toEqual({ startLine: 10, lineNumbers: [10, 11] });
+  });
+
+  test('an empty lineNumbers array is ignored, falling through to startLine', () => {
+    const meta = extractLineMeta(call({ details: { lineNumbers: [], startLine: 7 } }));
+    expect(meta).toEqual({ startLine: 7 });
+  });
+
+  test('details.startLine must be positive to be used', () => {
+    expect(extractLineMeta(call({ details: { startLine: 0 } }))).toEqual({});
+    expect(extractLineMeta(call({ details: { startLine: -3 } }))).toEqual({});
+  });
+
+  test('start_line and offset are read from details, then from input', () => {
+    expect(extractLineMeta(call({ details: { start_line: 12 } }))).toEqual({ startLine: 12 });
+    expect(extractLineMeta(call({ details: { offset: 5 } }))).toEqual({ startLine: 5 });
+    expect(extractLineMeta(call({ input: { start_line: 33 } }))).toEqual({ startLine: 33 });
+    expect(extractLineMeta(call({ input: { from: '4' } }))).toEqual({ startLine: 4 });
+  });
+
+  test('a numeric string input line is parsed; a non-numeric one is not', () => {
+    expect(extractLineMeta(call({ input: { offset: '  21 ' } }))).toEqual({ startLine: 21 });
+    expect(extractLineMeta(call({ input: { offset: '3a' } }))).toEqual({});
+  });
+
+  test('the truncation shownRange start is a fallback rung', () => {
+    const meta = extractLineMeta(call({ details: { meta: { truncation: { shownRange: { start: 54 } } } } }));
+    expect(meta).toEqual({ startLine: 54 });
+  });
+
+  test('a `path:NN-MM` range in the title supplies the start line', () => {
+    const meta = extractLineMeta(call({ title: 'app/types/chat.ts:55-100' }));
+    expect(meta).toEqual({ startLine: 55 });
+  });
+
+  test('the elision notice inside the content is the last rung', () => {
+    const meta = extractLineMeta(call({ title: 'read' }), undefined, 'text\n[Showing lines 54-103 of 208]\n');
+    expect(meta).toEqual({ startLine: 54 });
+  });
+
+  test('nothing to go on yields an empty meta', () => {
+    expect(extractLineMeta(call({ title: 'read' }))).toEqual({});
+    expect(extractLineMeta(undefined)).toEqual({});
+  });
+});

package/src/client/components/workspace/context-panel/raw-messages.ts

@@ -0,0 +1,54 @@
+export const MODEL_COLORS = [
+  'bg-emerald-500',
+  'bg-sky-500',
+  'bg-amber-500',
+  'bg-violet-500',
+  'bg-rose-500',
+  'bg-teal-500',
+  'bg-indigo-500',
+  'bg-fuchsia-500',
+  'bg-lime-500',
+  'bg-cyan-500',
+  'bg-orange-500',
+  'bg-pink-500',
+  'bg-yellow-500',
+  'bg-purple-500',
+  'bg-red-500',
+  'bg-blue-500',
+  'bg-green-500',
+  'bg-cyan-600',
+  'bg-violet-600',
+  'bg-amber-600',
+];
+
+export const PAGE_SIZE = 20;
+
+export function hashModel(id: string): number {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) | 0;
+  return Math.abs(h);
+}
+
+export function modelLabel(id: string): string {
+  const slash = id.indexOf('/');
+  const provider = slash > 0 ? id.slice(0, slash) : id;
+  const model = slash > 0 ? id.slice(slash + 1) : '';
+  return model ? `${provider} · ${model}` : provider;
+}
+
+/** Condensed page list: 1 … around-current … last, with ellipsis gaps. */
+export function pageWindow(current: number, total: number): (number | '…')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = new Set<number>([1, total, current, current - 1, current + 1]);
+  if (current <= 3) [2, 3, 4].forEach(p => pages.add(p));
+  if (current >= total - 2) [total - 3, total - 2, total - 1].forEach(p => pages.add(p));
+  const sorted = [...pages].filter(p => p >= 1 && p <= total).sort((a, b) => a - b);
+  const out: (number | '…')[] = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (p - prev > 1) out.push('…');
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}

package/src/client/components/workspace/diff-panel/ConflictBanner.tsx

@@ -0,0 +1,85 @@
+import { AlertTriangle } from 'lucide-preact';
+import type { ConflictMarkers } from '@/shared/lib/fs/git-unmerged';
+
+interface ConflictBannerProps {
+  /** The side labels read from the file's own markers. */
+  markers: ConflictMarkers;
+  isBusy: boolean;
+  error?: string | null;
+  onResolve: (side: 'ours' | 'theirs' | '') => void;
+  onDismissError: () => void;
+}
+
+/**
+ * The strip the diff panel shows when the file it is displaying is CONFLICTED.
+ *
+ * `fetchWorkingFileDiff` already returns git's combined diff for such a file
+ * (`diff --cc`, `@@@`) and `parseUnifiedDiff` renders it — measured, the
+ * `<<<<<<<`/`=======`/`>>>>>>>` markers come through as ordinary add/context
+ * rows. What was missing is that the panel did not know it was looking at a
+ * conflict: the toolbar read `M`/`U` through the plain status rules and the only
+ * resolve affordance was in the change list.
+ *
+ * **The two side buttons are labelled from the file's own markers.** `git
+ * checkout --ours` / `--theirs` are inverted during a rebase (measured), so a
+ * button labelled "ours" that runs `--ours` silently takes the other side in
+ * half the conflict states — the labels have to name what the reader sees.
+ */
+export function ConflictBanner({ markers, isBusy, error, onResolve, onDismissError }: ConflictBannerProps) {
+  const oursLabel = markers.ours || 'ours';
+  const theirsLabel = markers.theirs || 'theirs';
+
+  return (
+    <div className="flex-shrink-0 border-b border-warning/30 bg-warning/5">
+      <div className="flex items-center gap-2 px-3 py-1.5 flex-wrap">
+        <AlertTriangle size={13} className="text-warning flex-shrink-0" />
+        <span className="text-[11px] font-medium text-warning">Conflicted file</span>
+
+        <div className="flex items-center gap-1.5 ml-auto flex-wrap">
+          <button
+            type="button"
+            onClick={() => onResolve('ours')}
+            disabled={isBusy}
+            title={`Take ${oursLabel} — \`git checkout --ours\` then stage`}
+            className="px-2 py-0.5 text-[10px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40 max-w-[40%] truncate"
+          >
+            take {oursLabel}
+          </button>
+          <button
+            type="button"
+            onClick={() => onResolve('theirs')}
+            disabled={isBusy}
+            title={`Take ${theirsLabel} — \`git checkout --theirs\` then stage`}
+            className="px-2 py-0.5 text-[10px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40 max-w-[40%] truncate"
+          >
+            take {theirsLabel}
+          </button>
+          <button
+            type="button"
+            onClick={() => onResolve('')}
+            disabled={isBusy}
+            title="Mark resolved — the file was edited by hand, this stages it"
+            className="px-2 py-0.5 text-[10px] font-mono rounded border border-ink/20 hover:bg-ink/5 text-ink/80 hover:text-ink transition-colors cursor-pointer disabled:opacity-40"
+          >
+            mark resolved
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="flex items-center gap-2 px-3 py-1 border-t border-error/25 bg-error/10 text-[10px] text-error">
+          <span className="min-w-0 flex-1 truncate" title={error}>{error}</span>
+          <button
+            type="button"
+            onClick={onDismissError}
+            className="px-1 rounded hover:bg-error/15 cursor-pointer"
+            title="Dismiss"
+            aria-label="Dismiss"
+          >
+            ✕
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}