@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/workspace/chat-timeline/ToolCallCard.tsx

@@ -0,0 +1,194 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One tool call in the timeline: the header shell plus, when expanded, either
+ * the family's own panel or the generic Input / Diff / Output body.
+ *
+ * Everything that decides what the card SAYS lives outside this file and is
+ * pure — `toolCardHeader`/`toolCardSubtitle` (naming), `toolSummary` (the
+ * outcome chips), `toolPanelKind` (which panel), `card-helpers` (glyphs). This
+ * file is the wiring, which is what keeps it inside the repo's size ceiling.
+ */
+
+import { useCallback, useMemo } from 'preact/hooks';
+import { memo } from 'preact/compat';
+import { Bell } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { stripAnsiCodes } from '@/shared/lib/code/ansi';
+import { isReminderTag, unwrapXmlEnvelopes } from '@/shared/lib/chat/xml-envelope';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { ToolCardShell } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/ToolCardShell';
+import { ArtifactChip } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/ArtifactChip';
+import { DiffView } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/DiffView';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
+import { ToolDetailsPanel, resolveToolKey } from '@/client/components/workspace/chat-timeline/tool-renderers';
+import { usePluginTimelineRenderer } from '@/client/components/workspace/chat-timeline/tool-renderers/plugin-renderers';
+import { usePluginSlotContext } from '@/client/hooks/workspace/list-slots';
+import { toolPanelKind } from '@/client/components/workspace/chat-timeline/tool-renderers/registry';
+import { PluginIdProvider } from '@kabmo-labs/kabmo-ui';
+import { toolSummary } from '@/shared/lib/chat/tool/summary';
+import { tryParseJson } from '@/shared/lib/code/syntax-highlight';
+import {
+  commandOrInputOf,
+  diffTextOf,
+  evalLanguageIcon,
+  toolIcon,
+} from '@/client/components/workspace/chat-timeline/tool-renderers/shared/card-helpers';
+import {
+  toolCardHeader,
+  toolCardSubtitle,
+} from '@/client/components/workspace/chat-timeline/tool-renderers/shared/card-header';
+
+interface ToolCallCardProps {
+  tool: ToolCallData;
+  isOpen?: boolean;
+  onToggle?: (toolId: string) => void;
+  defaultExpanded?: boolean;
+}
+
+function SectionLabel({ children }: { children: string }) {
+  return (
+    <div className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">
+      {children}
+    </div>
+  );
+}
+
+export const ToolCallCard = memo(function ToolCallCard({ tool, isOpen, onToggle, defaultExpanded = false }: ToolCallCardProps) {
+  const toolKey = resolveToolKey(tool);
+  // A pure classification, not a probe render: the old `hasToolDetailsPanel`
+  // built the panel's VNode and threw it away, once per card per streaming
+  // frame. `toolPanelKind` is a lookup, so this is free.
+  const hasPanel = useMemo(() => toolPanelKind(tool) !== null, [tool]);
+  // A plugin renderer is consulted only for a tool the host has NO panel for,
+  // so a plugin can ship its own agent tool without shadowing `bash` or `read`.
+  const pluginRenderer = usePluginTimelineRenderer(toolKey);
+  const slotContext = usePluginSlotContext();
+  const pluginPanel = hasPanel ? null : pluginRenderer;
+  const hasBody = hasPanel || pluginPanel !== null;
+  const summary = useMemo(() => toolSummary(tool), [tool]);
+  const header = useMemo(() => toolCardHeader(tool, toolKey), [tool, toolKey]);
+  const subtitle = toolCardSubtitle(tool, header);
+
+  const commandOrInput = commandOrInputOf(tool);
+  const outputText = tool.output || (tool.error ? `Error: ${tool.error}` : '');
+  const diffText = diffTextOf(tool);
+
+  const handleToggle = useCallback(() => {
+    onToggle?.(tool.id);
+  }, [onToggle, tool.id]);
+
+  const inputJson = useMemo(
+    () => (!hasBody && commandOrInput ? tryParseJson(commandOrInput) : null),
+    [hasBody, commandOrInput]
+  );
+
+  // A reminder envelope in the result is the runtime interrupting the call, not
+  // its outcome — the header flags it beside the status badge.
+  const isReminder = useMemo(
+    () => unwrapXmlEnvelopes(stripAnsiCodes(outputText)).some((envelope) => isReminderTag(envelope.tag)),
+    [outputText],
+  );
+
+  // The intent chip is deliberately NOT part of this row. It used to be the
+  // first chip, which pushed a real fact out: an `edit` showed
+  // `Preferring dt.files for real files · +43 −16 · +1`, so `line 25` — the
+  // thing the reader wants — sat behind the overflow counter. The row is
+  // `path + facts` now, and the intent stays where it always was for every tool
+  // except eval: nowhere, or inside the body's own panel.
+  //
+  // eval is the exception and shows its intent as the TITLE (`input.title` is
+  // omp's label for the cell), so it carries no facts row at all — a second
+  // line of `js · 1 cell · browser.open` under a title that already names the
+  // action is the duplication this removes.
+  const headerSummary = toolKey === 'eval' ? null : summary;
+
+  const actions = (
+    <>
+      <ArtifactChip tool={tool} />
+      {isReminder && (
+        <span className="inline-flex items-center gap-1 rounded-full bg-error/10 px-2 py-0.5 text-[10px] font-semibold text-error">
+          <Bell size={10} /> Reminder
+        </span>
+      )}
+    </>
+  );
+
+  // The eval card is marked by the language it runs, not a generic code glyph.
+  const icon = tool.icon || (toolKey === 'eval' ? evalLanguageIcon(tool) : null) || toolIcon(toolKey);
+
+  return (
+    <ToolCardShell
+      tool={tool}
+      icon={icon}
+      title={header.title}
+      subtitle={subtitle}
+      summary={headerSummary}
+      actions={actions}
+      isOpen={isOpen}
+      onToggle={onToggle ? handleToggle : undefined}
+      defaultExpanded={defaultExpanded}
+      alwaysExpanded={hasPanel && (toolKey === 'yield' || toolKey === 'goal' || toolKey === 'ask')}
+    >
+      {pluginPanel ? (
+        <PluginIdProvider pluginId={pluginPanel.pluginId}>
+          <pluginPanel.registration.component
+            {...slotContext}
+            toolName={toolKey}
+            args={tool.input}
+            output={outputText}
+          />
+        </PluginIdProvider>
+      ) : (
+        <ToolDetailsPanel tool={tool} />
+      )}
+
+      {!hasBody && commandOrInput && (
+        <div className="space-y-1.5 code-surface">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-1.5">
+              <SectionLabel>Input</SectionLabel>
+              {inputJson?.isValid && (
+                <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] uppercase tracking-wider text-ink/45">
+                  JSON
+                </span>
+              )}
+            </div>
+            <CopyButton
+              text={inputJson?.isValid && inputJson.pretty ? inputJson.pretty : commandOrInput}
+              className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink"
+              onClick={(e) => e.stopPropagation()}
+              label="Copy"
+            />
+          </div>
+          {inputJson?.isValid && inputJson.pretty ? (
+            <JsonCodeBlock
+              jsonString={inputJson.pretty}
+              maxHeightClass="max-h-60"
+              showHeader={false}
+            />
+          ) : (
+            <pre className="overflow-x-auto rounded-lg border border-ink/8 bg-paper px-3 py-2.5 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-ink/80 select-text">
+              {commandOrInput}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {!hasBody && diffText && (
+        <div className="space-y-1.5">
+          <SectionLabel>Diff</SectionLabel>
+          <DiffView text={diffText} path={subtitle} />
+        </div>
+      )}
+
+      {!hasBody && outputText && (
+        <FallbackOutput text={outputText} />
+      )}
+    </ToolCardShell>
+  );
+});

package/src/client/components/workspace/chat-timeline/ToolCallingSection.test.ts

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * A tool card is headed by its OWN intent, so the list reads
+ * `title1 → card1 → title2 → card2`.
+ *
+ * The section used to carry ONE title — the intent of the FIRST call, because
+ * `parseMessageBlocks` keeps only the first `i` field — while every later call's
+ * intent was dropped entirely. With the intent chip also removed from the card
+ * header, a turn with two `bash` calls rendered one label above two identical
+ * cards, and the second call's purpose was unreachable without opening it.
+ *
+ * There is deliberately NO group heading and no bulk Expand/Collapse control:
+ * the heading could only restate what the cards already say (`Tool Executions
+ * (N steps)` counts what is visible, and the first call's sentence belongs to
+ * its own card), and the section renders exactly its cards, nothing above them.
+ *
+ * These pin the ORDER (heading immediately before its card) and that the
+ * section's children are only headings and cards.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { ToolCallingSection } from '@/client/components/workspace/chat-timeline/ToolCallingSection';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider';
+import type { ToolCallData } from '@/shared/types/chat';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+function tool(id: string, intent: string | undefined, title = 'Bash'): ToolCallData {
+  return { id, type: 'bash', name: 'bash', title, intent, status: 'success', output: 'ok' } as ToolCallData;
+}
+
+async function mount(tools: ToolCallData[]) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(
+      h(SessionStateProvider, {
+        sessionId: 'test',
+        children: h(ToolCallingSection, { tools }),
+      }),
+      container,
+    );
+  });
+  return container;
+}
+
+/**
+ * The section's direct children in render order: intent headings and their
+ * cards. A section renders nothing else.
+ */
+function sequence(el: HTMLElement): Array<{ kind: 'heading' | 'card'; text: string }> {
+  const section = el.querySelector('div.mx-3')!;
+  const items = Array.from(section.children).map((child) => {
+    const cls = (child.className || '').toString();
+    if (cls.includes('overflow-hidden rounded-xl')) {
+      const col = child.querySelector('button')!.children[1];
+      return { kind: 'card' as const, text: (col.children[0]?.textContent || '').trim() };
+    }
+    const label = child.querySelector('span');
+    return { kind: 'heading' as const, text: label ? (label.textContent || '').trim() : '' };
+  });
+  return items.filter((item) => item.kind !== 'heading' || item.text);
+}
+
+describe('ToolCallingSection per-card intent heading', () => {
+  test('each card is preceded by its own intent', async () => {
+    const el = await mount([
+      tool('a', 'Finding PWA manifest'),
+      tool('b', 'Searching standalone branches'),
+    ]);
+    expect(sequence(el)).toEqual([
+      { kind: 'heading', text: 'Finding PWA manifest' },
+      { kind: 'card', text: 'Bash' },
+      { kind: 'heading', text: 'Searching standalone branches' },
+      { kind: 'card', text: 'Bash' },
+    ]);
+  });
+
+  test('the section renders only headings and cards, nothing above them', async () => {
+    const el = await mount([tool('a', undefined), tool('b', undefined)]);
+    expect(sequence(el)).toEqual([
+      { kind: 'card', text: 'Bash' },
+      { kind: 'card', text: 'Bash' },
+    ]);
+    // No header row: every direct child is a card.
+    const children = Array.from(el.querySelector('div.mx-3')!.children) as HTMLElement[];
+    expect(children).toHaveLength(2);
+    expect(children.every((child) => child.className.includes('overflow-hidden rounded-xl'))).toBe(true);
+  });
+
+  test('a card without an intent simply has no heading', async () => {
+    const el = await mount([tool('a', 'Has intent'), tool('b', undefined)]);
+    expect(sequence(el)).toEqual([
+      { kind: 'heading', text: 'Has intent' },
+      { kind: 'card', text: 'Bash' },
+      { kind: 'card', text: 'Bash' },
+    ]);
+  });
+
+  test('a long intent heading is clamped to one line with the full text in title', async () => {
+    const long = 'x'.repeat(200);
+    const el = await mount([tool('a', long)]);
+    const heading = el.querySelector('div.mx-3 > div > span') as HTMLElement;
+    expect(heading.textContent).toBe(long);
+    expect(heading.className).toContain('truncate');
+    expect(heading.className).toContain('min-w-0');
+    expect(heading.getAttribute('title')).toBe(long);
+  });
+});
+
+describe('ToolCallingSection heading rule', () => {
+  test('the intent heading rule fills the row, the way a card heading draws it', async () => {
+    const el = await mount([tool('a', 'Finding PWA manifest')]);
+    const row = el.querySelector('div.mx-3 > div') as HTMLElement;
+    const [label, rule] = Array.from(row.children) as HTMLElement[];
+    // The label sizes to its text and the rule takes the remainder, so the line
+    // runs to the panel edge. Two `flex-1` items would split the row 50/50 and
+    // park a short heading's rule in the middle of it.
+    expect(label.className).toContain('truncate');
+    expect(label.className).not.toContain('flex-1');
+    expect(rule.className).toContain('flex-1');
+    expect(rule.className).toContain('h-px');
+    // The old fixed width is gone. Asserted as a WORD, because `min-w-6`
+    // contains `w-6` as a substring and a naive `toContain` would fail on the
+    // guard that keeps the rule from collapsing.
+    expect(rule.className.split(' ')).not.toContain('w-6');
+  });
+
+  test('the rule keeps a minimum width so a long intent cannot collapse it', async () => {
+    const el = await mount([tool('a', 'x'.repeat(400))]);
+    const row = el.querySelector('div.mx-3 > div') as HTMLElement;
+    const rule = row.children[1] as HTMLElement;
+    expect(rule.className).toContain('min-w-6');
+  });
+});

package/src/client/components/workspace/chat-timeline/ToolCallingSection.tsx

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Fragment } from 'preact';
+import { useMemo } from 'preact/hooks';
+import type { AgentActionData, ToolCallData, ToolType } from '@/shared/types';
+import { ToolCallCard } from '@/client/components/workspace/chat-timeline/ToolCallCard';
+import { useToolOpenState } from '@/client/hooks/chat/timeline/tool-open';
+
+interface ToolCallingSectionProps {
+  tools: (ToolCallData | AgentActionData)[];
+  defaultExpanded?: boolean;
+}
+
+function normalizeToolData(action: ToolCallData | AgentActionData, index: number): ToolCallData {
+  if ('id' in action && action.id) {
+    return action as ToolCallData;
+  }
+
+  const rawTitle = action.title || '';
+  const lowerTitle = rawTitle.toLowerCase();
+
+  let type: ToolCallData['type'] = 'terminal';
+  if (lowerTitle.includes('shell') || lowerTitle.includes('command') || lowerTitle.includes('bun') || lowerTitle.includes('git')) {
+    type = 'bash';
+  } else if (lowerTitle.includes('edit') || lowerTitle.includes('write')) {
+    type = 'edit_file';
+  } else if (lowerTitle.includes('read') || lowerTitle.includes('view') || lowerTitle.includes('cat') || lowerTitle.includes('inspect')) {
+    type = 'read_file';
+  } else if (lowerTitle.includes('search') || lowerTitle.includes('find') || lowerTitle.includes('grep')) {
+    type = 'search_fs';
+  }
+
+  const cleanSlug = rawTitle.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() || 'tool';
+  const finalType: ToolType = ('type' in action && action.type) ? action.type : type;
+
+  return {
+    id: `stable-tool-${index}-${cleanSlug}`,
+    type: finalType,
+    title: action.title,
+    duration: action.time,
+    time: action.time,
+    detail: action.detail,
+    target: ('target' in action && action.target) ? action.target : (finalType === 'read_file' || finalType === 'edit_file' || finalType === 'create_file' ? action.detail : undefined),
+    command: action.command || (finalType === 'bash' ? action.detail : undefined),
+    output: action.output,
+    status: action.status || 'success',
+    icon: action.icon,
+    diff: 'diff' in action ? action.diff : undefined,
+    input: 'input' in action ? action.input : undefined
+  };
+}
+
+export function ToolCallingSection({ tools, defaultExpanded = false }: ToolCallingSectionProps) {
+  const normalizedTools = useMemo(() => {
+    return (tools || []).map((t, i) => normalizeToolData(t, i));
+  }, [tools]);
+
+  // Openness is remembered per session, so a reload or a history page-in does
+  // not close the call the reader had opened.
+  const { openMap, toggle } = useToolOpenState(normalizedTools, defaultExpanded);
+
+  if (!normalizedTools || normalizedTools.length === 0) return null;
+
+  return (
+    <div className="mx-3 space-y-1.5">
+      {normalizedTools.map((tool) => {
+        const intent = tool.intent?.trim();
+        return (
+          <Fragment key={tool.id}>
+            {intent && (
+              <div className="flex items-center gap-2 px-1 pt-0.5">
+                {/* Label sizes to its text; the rule takes everything left over,
+                    so the line runs to the panel edge the way `ThinkingSection`
+                    draws it. The label is NOT `flex-1` — two `flex-1` items split
+                    the row 50/50 regardless of content, which parks a short
+                    heading's rule in the middle of the row. `min-w-6` on the rule
+                    keeps it visible when a sentence-length intent has to shrink
+                    (a plain `flex-1` basis of 0 would collapse it to nothing). */}
+                <span
+                  className="min-w-0 truncate text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/35"
+                  title={intent}
+                >
+                  {intent}
+                </span>
+                <span className="h-px min-w-6 flex-1 bg-ink/8" />
+              </div>
+            )}
+            <ToolCallCard
+              tool={tool}
+              isOpen={Boolean(openMap[tool.id])}
+              onToggle={toggle}
+            />
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/UndoConfirmModal.tsx

@@ -0,0 +1,90 @@
+
+import { useEffect } from 'preact/hooks';
+import { Loader2, Undo2 } from 'lucide-preact';
+
+interface UndoConfirmModalProps {
+  /** Preview of the message being undone (truncated by the caller). */
+  content: string;
+  /** Omp rewinds agent context; other session types only trim the timeline. */
+  isOmpSession: boolean;
+  /** True while the rewind request is in flight. */
+  undoing: boolean;
+  /** Why the last attempt failed; the modal stays open when it is set. */
+  error?: string | null;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+/**
+ * Confirmation dialog for the undo button on a user-message footer. Undo
+ * rewinds the session before this turn — the turn and everything after it
+ * leave the timeline and the agent context — so the user should opt in.
+ */
+export function UndoConfirmModal({ content, isOmpSession, undoing, error, onClose, onConfirm }: UndoConfirmModalProps) {
+  useEffect(() => {
+    // No dismissing mid-rewind: the modal resolves itself on success, and an
+    // early close would let the user queue another undo against a stale view.
+    const handler = (e: globalThis.KeyboardEvent) => {
+      if (e.key !== 'Escape' || undoing) return;
+      e.preventDefault();
+      onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose, undoing]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 animate-in fade-in duration-200 p-4"
+      onClick={undoing ? undefined : onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Confirm undo"
+    >
+      <div
+        className="bg-paper border border-ink/20 rounded-xl shadow-xl w-[min(94vw,420px)] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-ink/10">
+          <Undo2 size={16} className="text-ink/70 shrink-0" />
+          <h2 className="text-[13px] font-semibold text-ink">Undo message?</h2>
+        </div>
+        <div className="px-4 py-4 space-y-3">
+          <div className="rounded-lg border border-ink/10 bg-canvas/50 px-3 py-2 text-[12px] text-ink/80 leading-relaxed max-h-28 overflow-y-auto scrollbar-overlay-container">
+            {content || 'Empty message or attachment-only prompt'}
+          </div>
+          <p className="text-[11.5px] leading-relaxed text-ink/60">
+            {isOmpSession
+              ? 'The timeline and agent context rewind to before this message. Its reply and everything after it are removed; the text returns to the composer for editing.'
+              : 'This message and everything after it are removed from the timeline. The text returns to the composer for editing.'}
+          </p>
+          {error && (
+            <p className="rounded-lg border border-error/30 bg-error/10 px-3 py-2 text-[11.5px] leading-relaxed text-error" role="alert">
+              {error}
+            </p>
+          )}
+        </div>
+        <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-ink/10">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={undoing}
+            className="px-3 py-1.5 rounded border border-ink/20 text-ink/70 hover:bg-ink/5 hover:text-ink transition-colors cursor-pointer text-xs disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            autoFocus={!undoing}
+            onClick={onConfirm}
+            disabled={undoing}
+            className="flex items-center gap-2 px-3 py-1.5 rounded bg-ink text-canvas hover:bg-ink/90 transition-colors cursor-pointer text-xs font-medium disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {undoing && <Loader2 size={13} className="animate-spin shrink-0" />}
+            {undoing ? 'Rewinding…' : 'Undo'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/chat-input/AccessDropdown.tsx

@@ -0,0 +1,53 @@
+import { useRef, useState } from 'preact/hooks';
+import { Check, LockKeyhole } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import { APPROVAL_MODES } from '@/shared/lib/omp/config/access-mode';
+import { ACCESS_LEVEL_DESCRIPTIONS, ACCESS_LEVEL_LABELS } from '@/client/components/workspace/chat-timeline/chat-input/access-levels';
+
+export interface AccessDropdownProps {
+  value: ApprovalMode;
+  onSelect: (mode: ApprovalMode) => void;
+}
+
+export function AccessDropdown({ value, onSelect }: AccessDropdownProps) {
+  const [showAccess, setShowAccess] = useState(false);
+  const accessRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(accessRef, () => setShowAccess(false));
+
+  // Selection is owned by ChatInput; this dropdown only reports user choices.
+  const handleSelect = (mode: ApprovalMode) => {
+    onSelect(mode);
+    setShowAccess(false);
+  };
+
+  return (
+    <div className="relative" ref={accessRef}>
+      <button
+        type="button"
+        onClick={() => setShowAccess(!showAccess)}
+        className="flex items-center space-x-1 hover:bg-ink/5 px-2 py-1 rounded transition-colors text-xs text-ink/80"
+      >
+        <LockKeyhole size={12} className="text-ink/60" />
+        <span className="hidden lg:inline">{ACCESS_LEVEL_LABELS[value]}</span>
+      </button>
+      {showAccess && (
+        <div className="absolute bottom-full left-0 mb-1 w-40 bg-paper border border-ink/20 rounded-md shadow-lg z-50 py-1 text-xs">
+          <div className="px-3 py-1 text-[10px] uppercase tracking-wider text-ink/40 font-semibold mb-1">Access Control</div>
+          {APPROVAL_MODES.map(mode => (
+            <button
+              key={mode}
+              type="button"
+              onClick={() => handleSelect(mode)}
+              title={ACCESS_LEVEL_DESCRIPTIONS[mode]}
+              className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center justify-between transition-colors"
+            >
+              <span>{ACCESS_LEVEL_LABELS[mode]}</span>
+              {value === mode && <Check size={12} className="text-ink" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}