ompchamber 0.3.0

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

@@ -0,0 +1,291 @@
+import { useCallback, useMemo } from 'preact/hooks';
+import { memo } from 'preact/compat';
+import { Boxes, Brain, BrainCircuit, Camera, Check, Code2, Cpu, FileCode, FileText, GitPullRequest, Globe, HelpCircle, ListTodo, Search, Server, Shield, Terminal, Wrench } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { CopyButton } from '@/client/components/common/CopyButton';
+import { ToolCardShell } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/ToolCardShell';
+import { DiffView } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/DiffView';
+import { ToolDetailsPanel, hasToolDetailsPanel, resolveTargetFile, resolveToolKey } from '@/client/components/workspace/chat-timeline/tool-renderers';
+import { toTitleCase } from '@/shared/lib/chat/title-case';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+import { tryParseJson } from '@/shared/lib/code/syntax-highlight';
+import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
+import { getTodoSummary } from '@/shared/lib/chat/todo-parser';
+
+interface ToolCallCardProps {
+  tool: ToolCallData;
+  isOpen?: boolean;
+  onToggle?: (toolId: string) => void;
+  defaultExpanded?: boolean;
+}
+
+function getToolIcon(key: string) {
+  switch (key) {
+    case 'bash':
+    case 'terminal':
+      return <Terminal size={14} />;
+    case 'edit':
+    case 'write':
+    case 'edit_file':
+    case 'create_file':
+    case 'ast_edit':
+      return <FileCode size={14} />;
+    case 'read':
+    case 'read_file':
+    case 'view_file':
+      return <FileText size={14} />;
+    case 'glob':
+    case 'grep':
+    case 'search_fs':
+    case 'ast_grep':
+      return <Search size={14} />;
+    case 'web_search':
+      return <Globe size={14} />;
+    case 'todo':
+    case 'task':
+      return <ListTodo size={14} />;
+    case 'eval':
+      return <Code2 size={14} />;
+    case 'lsp':
+      return <Cpu size={14} />;
+    case 'resolve':
+    case 'reject':
+      return <Check size={14} />;
+    case 'hub':
+      return <Server size={14} />;
+    case 'ask':
+      return <HelpCircle size={14} />;
+    case 'think':
+      return <BrainCircuit size={14} />;
+    case 'security_scan':
+      return <Shield size={14} />;
+    case 'checkpoint':
+    case 'rewind':
+      return <Camera size={14} />;
+    case 'github':
+      return <GitPullRequest size={14} />;
+    case 'memory_edit':
+    case 'retain':
+    case 'recall':
+    case 'reflect':
+    case 'learn':
+      return <Brain size={14} />;
+    default:
+      if (key.startsWith('mcp__')) return <Boxes size={14} />;
+      return <Wrench size={14} />;
+  }
+}
+
+function commandOrInputOf(tool: ToolCallData): string {
+  if (tool.command) return tool.command;
+  if (typeof tool.input === 'string') return tool.input;
+  if (tool.input && typeof tool.input === 'object') return JSON.stringify(tool.input, null, 2);
+  if (tool.target || tool.detail) return tool.target || tool.detail || '';
+  return '';
+}
+
+/** Inner `xd://mcp__<tool>` (or `mcp__<tool>` name) carried by an MCP call.
+ *  Returns the bare MCP tool name, e.g. `codegraph_explore`. */
+function mcpToolNameOf(tool: ToolCallData): string | undefined {
+  const inputObj = typeof tool.input === 'object' && tool.input !== null ? (tool.input as Record<string, any>) : undefined;
+  const path = typeof inputObj?.path === 'string' ? inputObj.path : tool.target || '';
+  const raw = path.startsWith('xd://') ? path.slice(5) : typeof tool.name === 'string' && tool.name.startsWith('mcp__') ? tool.name : '';
+  const name = raw.split(/[/?#]/)[0].trim();
+  return name.startsWith('mcp__') ? name.slice(5) : undefined;
+}
+
+/** Human subject for an MCP call: the intent line wins, else first meaningful
+ *  argument (query/pattern/path/…), else nothing. */
+function mcpSubjectOf(tool: ToolCallData, inputObj: Record<string, any> | undefined): string | undefined {
+  if (tool.intent) return tool.intent;
+  const content = typeof inputObj?.content === 'string' ? inputObj.content : '';
+  const parsed = content ? tryParseJson(content) : { isValid: false, data: undefined };
+  const data = parsed.isValid ? (parsed.data as Record<string, any>) : inputObj;
+  if (data && typeof data === 'object') {
+    const first = ['query', 'q', 'pattern', 'pat', 'name', 'sql', 'path', 'symbol', 'url', 'command'].find((k) => typeof data[k] === 'string' && data[k]);
+    if (first) return data[first];
+  }
+  return undefined;
+}
+
+function diffTextOf(tool: ToolCallData): string | undefined {
+  if (tool.diff?.diffText) return tool.diff.diffText;
+  const details = tool.details;
+  if (details && typeof details === 'object') {
+    if (typeof details.patch === 'string') return details.patch;
+    if (typeof details.diff === 'string') return details.diff;
+  }
+  return undefined;
+}
+
+interface XdevDetails {
+  args?: { action?: string; file?: string; paths?: string[] };
+}
+
+/** `details.xdev` of an oh-my-pi virtual device call, if present. */
+function xdevOf(tool: ToolCallData): XdevDetails | undefined {
+  const xdev = tool.details?.xdev;
+  return xdev && typeof xdev === 'object' ? (xdev as XdevDetails) : undefined;
+}
+
+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);
+  // hasToolDetailsPanel invokes the renderer once as a plain probe — cache it per tool identity
+  // so the probe does not re-run on every timeline re-render.
+  const hasPanel = useMemo(() => hasToolDetailsPanel(tool), [tool]);
+  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(
+    () => (!hasPanel && commandOrInput ? tryParseJson(commandOrInput) : null),
+    [hasPanel, commandOrInput]
+  );
+
+  // Clean title & subtitle extraction
+  let displayTitle = '';
+  let displaySubtitle: string | undefined;
+
+  if (toolKey === 'lsp') {
+    displayTitle = 'LSP';
+    const xdev = xdevOf(tool);
+    if (xdev?.args?.action) {
+      displaySubtitle = `${xdev.args.action}${xdev.args.file ? ` · ${xdev.args.file}` : ''}`;
+    }
+  } else if (toolKey === 'ast_edit') {
+    displayTitle = 'AST Edit';
+    const xdev = xdevOf(tool);
+    if (xdev?.args?.paths?.[0]) {
+      displaySubtitle = xdev.args.paths[0];
+    }
+  } else if (toolKey === 'resolve') {
+    displayTitle = 'Resolve Proposal';
+  } else if (toolKey === 'reject') {
+    displayTitle = 'Reject Proposal';
+  } else if (toolKey === 'yield') {
+    displayTitle = tool.status === 'error' ? 'Yield' : outputText ? `Yield - ${outputText}` : 'Yield';
+  } else if (toolKey === 'todo' || tool.name === 'todo' || tool.type === 'todo' || (tool.title && tool.title.toLowerCase().startsWith('todo'))) {
+    displayTitle = 'Todo';
+    const todoSummary = getTodoSummary(tool);
+    if (todoSummary) {
+      displaySubtitle = todoSummary;
+    } else if (tool.title && (tool.title.includes('—') || tool.title.includes(' - ') || tool.title.includes(': '))) {
+      const parts = tool.title.split(/\s+[—\-:]\s+/);
+      const sub = parts.slice(1).join(' — ').trim();
+      const cleaned = sub
+        .split(/\s*·\s*/)
+        .filter((p) => !/^0\s+(complete|in progress|pending)/i.test(p))
+        .join(' · ');
+      displaySubtitle = cleaned || sub;
+    }
+  } else if (mcpToolNameOf(tool)) {
+    // MCP call: `write xd://mcp__<tool>` (or a direct `mcp__<tool>` name) —
+    // the MCP tool names the action, never the transport `write`.
+    const inputObj = typeof tool.input === 'object' && tool.input !== null ? (tool.input as Record<string, any>) : undefined;
+    displayTitle = toTitleCase(mcpToolNameOf(tool)!);
+    const subject = mcpSubjectOf(tool, inputObj);
+    if (subject) {
+      displaySubtitle = subject.length > 80 ? `${subject.slice(0, 79)}…` : subject;
+    }
+  } else if (tool.title && (tool.title.includes('—') || tool.title.includes(' - ') || tool.title.includes(': '))) {
+    const parts = tool.title.split(/\s+[—\-:]\s+/);
+    displayTitle = toTitleCase(parts[0].trim());
+    displaySubtitle = parts.slice(1).join(' — ').trim();
+  } else if (tool.title) {
+    displayTitle = toTitleCase(tool.title);
+  } else {
+    displayTitle = toTitleCase(toolKey || tool.name || 'Tool Call');
+  }
+
+  // Resolve task tool subagent name/target
+  if ((toolKey === 'task' || tool.name === 'task') && !displaySubtitle) {
+    const inputObj = typeof tool.input === 'object' && tool.input !== null ? (tool.input as Record<string, any>) : undefined;
+    const firstTask = Array.isArray(inputObj?.tasks) ? inputObj.tasks[0] : undefined;
+    if (firstTask?.name) {
+      displaySubtitle = `${firstTask.name}${firstTask.agent ? ` · ${firstTask.agent}` : ''}`;
+    }
+  }
+
+  const targetFilePath = resolveTargetFile(tool);
+  const subtitle =
+    displaySubtitle && !displaySubtitle.startsWith('xd://')
+      ? displaySubtitle
+      : targetFilePath && !targetFilePath.startsWith('xd://')
+        ? targetFilePath
+        : displaySubtitle || (tool.detail && !targetFilePath ? tool.detail : undefined);
+
+  const meta = tool.duration || tool.time ? (
+    <span className="font-mono text-[10px] text-ink/40">{tool.duration || tool.time}</span>
+  ) : null;
+
+  return (
+    <ToolCardShell
+      tool={tool}
+      icon={tool.icon || getToolIcon(toolKey)}
+      title={displayTitle}
+      subtitle={subtitle}
+      meta={meta}
+      isOpen={isOpen}
+      onToggle={onToggle ? handleToggle : undefined}
+      defaultExpanded={defaultExpanded}
+      alwaysExpanded={toolKey === 'yield' && hasPanel}
+    >
+      <ToolDetailsPanel tool={tool} />
+
+      {!hasPanel && 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>
+      )}
+
+      {!hasPanel && diffText && (
+        <div className="space-y-1.5">
+          <SectionLabel>Diff</SectionLabel>
+          <DiffView text={diffText} />
+        </div>
+      )}
+
+      {!hasPanel && outputText && (
+        <FallbackOutput text={outputText} />
+      )}
+    </ToolCardShell>
+  );
+});

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

@@ -0,0 +1,96 @@
+import { useCallback, useMemo, useState } from 'preact/hooks';
+import type { AgentActionData, ToolCallData, ToolType } from '@/shared/types';
+import { isSkippedTool } from '@/shared/lib/chat/tool-status';
+import { ToolCallCard } from '@/client/components/workspace/chat-timeline/ToolCallCard';
+
+interface ToolCallingSectionProps {
+  tools: (ToolCallData | AgentActionData)[];
+  title?: string;
+  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, title, defaultExpanded = false }: ToolCallingSectionProps) {
+  const normalizedTools = useMemo(() => {
+    return (tools || []).map((t, i) => normalizeToolData(t, i));
+  }, [tools]);
+
+  const [openMap, setOpenMap] = useState<Record<string, boolean>>(() => {
+    const initial: Record<string, boolean> = {};
+    normalizedTools.forEach((tool, idx) => {
+      const isSkipped = isSkippedTool(tool);
+      const isAutoOpen = !isSkipped && (tool.status === 'error' || (defaultExpanded && idx === 0));
+      initial[tool.id] = isAutoOpen;
+    });
+    return initial;
+  });
+
+  // Stable identity so memoized ToolCallCard rows skip re-rendering while streaming.
+  const toggleTool = useCallback((toolId: string) => {
+    setOpenMap(prev => ({
+      ...prev,
+      [toolId]: !prev[toolId]
+    }));
+  }, []);
+
+  if (!normalizedTools || normalizedTools.length === 0) return null;
+
+  return (
+    <div className="mx-3 space-y-1.5">
+      {title && (
+        <div className="flex items-center gap-2 px-1 pt-0.5">
+          <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/35">
+            {title}
+          </span>
+          <span className="h-px flex-1 bg-ink/8" />
+        </div>
+      )}
+      {normalizedTools.map((tool) => (
+        <ToolCallCard
+          key={tool.id}
+          tool={tool}
+          isOpen={Boolean(openMap[tool.id])}
+          onToggle={toggleTool}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+
+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;
+  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, 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>
+        </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>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { useRef } from 'preact/hooks';
+import type { ChangeEvent } from 'preact/compat';
+import { File as FileIcon, Paperclip, X } from 'lucide-preact';
+import type { Attachment } from '@/shared/types';
+
+interface AttachmentToolbarProps {
+  attachments: Attachment[];
+  onFilesSelected: (files: File[]) => void;
+  onRemove: (id: string) => void;
+}
+
+export function AttachmentToolbar({ attachments, onFilesSelected, onRemove }: AttachmentToolbarProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.currentTarget.files && e.currentTarget.files.length > 0) {
+      onFilesSelected(Array.from(e.currentTarget.files));
+    }
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  return (
+    <>
+      <div className="flex items-center flex-wrap gap-1.5 px-3 py-2 border-b border-ink/5 text-ink/60">
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="flex items-center justify-center hover:bg-ink/5 p-1 rounded transition-colors text-ink/60 hover:text-ink shrink-0"
+          title="Attach file or image"
+        >
+          <Paperclip size={14} />
+        </button>
+
+        {attachments.map(att => (
+          <div key={att.id} className="relative flex items-center bg-canvas border border-ink/10 rounded-md p-0.5 pr-6 text-xs shadow-sm group">
+            {att.preview ? (
+              <img src={att.preview} alt="preview" className="w-6 h-6 object-cover rounded-sm mr-1.5 border border-ink/5" />
+            ) : (
+              <div className="w-6 h-6 flex items-center justify-center bg-ink/5 rounded-sm mr-1.5 text-ink/60">
+                <FileIcon size={12} />
+              </div>
+            )}
+            <span className="truncate max-w-[120px] font-mono text-[10px] text-ink/80">{att.file.name}</span>
+            <button
+              onClick={() => onRemove(att.id)}
+              className="absolute right-0.5 top-1/2 -translate-y-1/2 p-0.5 text-ink/40 hover:text-error hover:bg-error/10 rounded transition-colors"
+              title="Remove attachment"
+            >
+              <X size={10} />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <input
+        type="file"
+        multiple
+        className="hidden"
+        ref={fileInputRef}
+        onChange={handleFileSelect}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { useRef, useState } from 'preact/hooks';
+import { Brain, Check } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+interface ThinkingLevelDropdownProps {
+  thinkingLevels: string[];
+  currentThinking: string;
+  onSelect: (level: string) => void;
+}
+
+export function ThinkingLevelDropdown({ thinkingLevels, currentThinking, onSelect }: ThinkingLevelDropdownProps) {
+  const [showThinking, setShowThinking] = useState(false);
+  const thinkingRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(thinkingRef, () => setShowThinking(false));
+
+  const handleSelect = (level: string) => {
+    setShowThinking(false);
+    onSelect(level);
+  };
+
+  return (
+    <div className="relative" ref={thinkingRef}>
+      <button
+        onClick={() => thinkingLevels.length > 0 && setShowThinking(!showThinking)}
+        disabled={thinkingLevels.length === 0}
+        className="flex items-center space-x-1 hover:bg-ink/5 px-2 py-1 rounded transition-colors text-xs text-ink/80 disabled:opacity-40 disabled:cursor-not-allowed"
+        title={thinkingLevels.length === 0 ? 'This model exposes no thinking levels' : `Thinking Level: ${currentThinking}`}
+      >
+        <Brain size={12} className="text-ink/60" />
+        <span className="hidden lg:inline">{currentThinking}</span>
+      </button>
+      {showThinking && thinkingLevels.length > 0 && (
+        <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">Thinking Level</div>
+          {thinkingLevels.map(level => (
+            <button
+              key={level}
+              onClick={() => handleSelect(level)}
+              className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center justify-between transition-colors"
+            >
+              <span>{level}</span>
+              {currentThinking === level && <Check size={12} className="text-ink" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}