ompchamber 0.3.0

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/index.tsx

@@ -0,0 +1,321 @@
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { AlertCircle, CheckCircle2, FileText, HelpCircle, ListFilter, Terminal } from 'lucide-preact';
+import type { ExtensionUiDialogRequest } from '@/client/hooks/chat/omp';
+import { AskDialogHeader } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Header';
+import { AskDialogSelectBody } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/SelectBody';
+import { AskDialogFooter } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Footer';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+
+export type ExtensionDialogResponse =
+  | { value: string }
+  | { confirmed: boolean }
+  | { cancelled: true };
+
+interface AskDialogProps {
+  request: ExtensionUiDialogRequest;
+  onRespond: (request: ExtensionUiDialogRequest, response: ExtensionDialogResponse) => void;
+}
+
+export function AskDialog({ request, onRespond }: AskDialogProps) {
+  const [value, setValue] = useState(request.method === 'editor' ? request.prefill ?? '' : '');
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [customValue, setCustomValue] = useState('');
+  const panelRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const customInputRef = useRef<HTMLInputElement>(null);
+
+  const options = request.options ?? [];
+  const optionDetails = request.optionDetails ?? [];
+
+  useEffect(() => {
+    setValue(request.method === 'editor' ? request.prefill ?? '' : '');
+    setSelectedOption(options.length > 0 ? options[0] : null);
+    setCustomValue('');
+  }, [request, options]);
+
+  useEffect(() => {
+    panelRef.current?.focus();
+    if (request.method === 'input') {
+      inputRef.current?.focus();
+    } else if (request.method === 'editor') {
+      textareaRef.current?.focus();
+    } else if (request.method === 'select') {
+      // When the AI offers an "Other"-style option, the intended interaction
+      // is typing a custom answer — focus the input right away.
+      const hasOther = options.some((option) => /^other\b/i.test(option.trim()));
+      if (hasOther) {
+        customInputRef.current?.focus();
+      }
+    }
+  }, [request.id, request.method, options]);
+
+  const cancel = useCallback(() => {
+    onRespond(request, { cancelled: true });
+  }, [onRespond, request]);
+
+  const submitValue = useCallback(() => {
+    if (request.method === 'confirm') {
+      onRespond(request, { confirmed: true });
+    } else if (request.method === 'select') {
+      // A typed custom answer is the actual response — the "Other" option
+      // label itself is not. It wins over the highlighted option.
+      if (customValue.trim()) {
+        onRespond(request, { value: customValue.trim() });
+      } else if (selectedOption) {
+        onRespond(request, { value: selectedOption });
+      }
+    } else {
+      onRespond(request, { value });
+    }
+  }, [onRespond, request, selectedOption, value, customValue]);
+
+  const handleConfirmOption = useCallback(
+    (option: string) => {
+      // Never submit the literal "Other…" label (e.g. via double-click) —
+      // it is a prompt to type, not an answer. Redirect to the input instead.
+      if (/^other\b/i.test(option.trim())) {
+        setSelectedOption(option);
+        customInputRef.current?.focus();
+        return;
+      }
+      onRespond(request, { value: option });
+    },
+    [onRespond, request]
+  );
+
+  const handleSelectOption = useCallback(
+    (option: string) => {
+      setSelectedOption(option);
+      // "Other"-style options expect a typed answer; put the caret in the
+      // custom input instead of leaving the label itself as the response.
+      if (/^other\b/i.test(option.trim())) {
+        customInputRef.current?.focus();
+      }
+    },
+    []
+  );
+
+  // Keyboard navigation & shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        cancel();
+        return;
+      }
+
+      if (request.method === 'select' && options.length > 0) {
+        // Typing in the custom "Other" input must not trigger number/arrow/Enter
+        // shortcuts — those keys belong to the text field while focused.
+        const typingCustom = e.target instanceof HTMLInputElement && e.target === customInputRef.current;
+        if (typingCustom) {
+          return;
+        }
+
+        const num = parseInt(e.key, 10);
+        if (!isNaN(num) && num >= 1 && num <= options.length) {
+          e.preventDefault();
+          setSelectedOption(options[num - 1]);
+          return;
+        }
+
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          const currentIdx = options.findIndex((o) => o === selectedOption);
+          const nextIdx = currentIdx < options.length - 1 ? currentIdx + 1 : 0;
+          setSelectedOption(options[nextIdx]);
+          return;
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          const currentIdx = options.findIndex((o) => o === selectedOption);
+          const prevIdx = currentIdx > 0 ? currentIdx - 1 : options.length - 1;
+          setSelectedOption(options[prevIdx]);
+          return;
+        }
+
+        if (e.key === 'Enter' && selectedOption) {
+          e.preventDefault();
+          submitValue();
+          return;
+        }
+      }
+
+      if (request.method === 'confirm') {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          submitValue();
+          return;
+        }
+      }
+
+      if (request.method === 'editor') {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+          e.preventDefault();
+          submitValue();
+          return;
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [cancel, submitValue, request.method, options, selectedOption]);
+
+  const methodMeta = (() => {
+    switch (request.method) {
+      case 'select':
+        return {
+          icon: <ListFilter size={16} className="text-ink" />,
+          label: 'Decision Required',
+          badge: `${options.length} Choices`,
+        };
+      case 'confirm':
+        return {
+          icon: <AlertCircle size={16} className="text-ink" />,
+          label: 'Confirmation Required',
+          badge: 'Confirm Action',
+        };
+      case 'input':
+        return {
+          icon: <Terminal size={16} className="text-ink" />,
+          label: 'Prompt Input',
+          badge: 'Text Input',
+        };
+      case 'editor':
+        return {
+          icon: <FileText size={16} className="text-ink" />,
+          label: 'Buffer Editor',
+          badge: 'Multiline Buffer',
+        };
+      default:
+        return {
+          icon: <HelpCircle size={16} className="text-ink" />,
+          label: 'Agent Request',
+          badge: 'Input',
+        };
+    }
+  })();
+
+  return (
+    <div
+      className="ask-dialog-backdrop fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
+      style={{
+        background: 'color-mix(in srgb, var(--theme-ink) 55%, transparent)',
+        backdropFilter: 'blur(8px)',
+      }}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) cancel();
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={request.title || methodMeta.label}
+        tabIndex={-1}
+        className="ask-dialog-panel w-full max-w-[560px] overflow-hidden rounded-2xl border border-ink/15 bg-paper shadow-2xl outline-none"
+        style={{
+          boxShadow: '0 24px 64px -8px color-mix(in srgb, var(--theme-ink) 28%, transparent)',
+        }}
+      >
+          <AskDialogHeader
+            title={request.title}
+            methodLabel={methodMeta.label}
+            badge={methodMeta.badge}
+            icon={methodMeta.icon}
+            onCancel={cancel}
+          />
+
+          <div className="max-h-[65vh] overflow-y-auto px-6 py-5 space-y-4">
+            {/* Prompt / Context Message with Markdown */}
+            {request.message && (
+              <div className="rounded-xl border border-ink/8 bg-canvas/40 p-4 text-[13px] leading-relaxed text-ink/85 select-text">
+                <MarkdownRenderer content={request.message} />
+              </div>
+            )}
+
+            {/* Select Options */}
+            {request.method === 'select' && (
+              <AskDialogSelectBody
+                options={options}
+                optionDetails={optionDetails}
+                selectedOption={selectedOption}
+                customValue={customValue}
+                onCustomChange={setCustomValue}
+                customInputRef={customInputRef}
+                onSelect={handleSelectOption}
+                onConfirmOption={handleConfirmOption}
+              />
+            )}
+
+            {/* Confirm Banner */}
+            {request.method === 'confirm' && (
+              <div className="flex items-center gap-3 rounded-xl border border-ink/10 bg-canvas/30 p-4">
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-ink/5 text-ink">
+                  <CheckCircle2 size={18} />
+                </div>
+                <div className="text-[12.5px] leading-relaxed text-ink/75">
+                  Confirming will allow the autonomous agent to proceed with this operation. Press <kbd className="rounded border border-ink/20 bg-paper px-1 py-0.2 font-mono text-[10.5px]">Enter</kbd> to confirm or <kbd className="rounded border border-ink/20 bg-paper px-1 py-0.2 font-mono text-[10.5px]">Esc</kbd> to abort.
+                </div>
+              </div>
+            )}
+
+            {/* Single-line Input */}
+            {request.method === 'input' && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-[11px] font-medium tracking-wider text-ink/50 uppercase">
+                  <span>Your Response</span>
+                  <span className="font-mono text-[10px] text-ink/40">Press [Enter] to submit</span>
+                </div>
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={value}
+                  placeholder={request.placeholder || 'Type your response...'}
+                  onChange={(e) => setValue(e.currentTarget.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      submitValue();
+                    }
+                  }}
+                  className="w-full rounded-xl border border-ink/15 bg-paper px-4 py-3 text-[13.5px] text-ink placeholder:text-ink/35 outline-none transition-all focus:border-ink focus:ring-2 focus:ring-ink/15"
+                />
+              </div>
+            )}
+
+            {/* Multiline Editor */}
+            {request.method === 'editor' && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-[11px] font-medium tracking-wider text-ink/50 uppercase">
+                  <span>Buffer Content</span>
+                  <span className="font-mono text-[10px] text-ink/40">{value.split('\n').length} lines · ⌘↵ to save</span>
+                </div>
+                <textarea
+                  ref={textareaRef}
+                  value={value}
+                  onChange={(e) => setValue(e.currentTarget.value)}
+                  rows={8}
+                  placeholder={request.placeholder || 'Enter content...'}
+                  className="w-full rounded-xl border border-ink/15 bg-canvas/30 px-4 py-3 font-mono text-[12px] leading-relaxed text-ink placeholder:text-ink/35 outline-none transition-all focus:border-ink focus:bg-paper focus:ring-2 focus:ring-ink/15"
+                />
+              </div>
+            )}
+          </div>
+
+          <AskDialogFooter
+            method={request.method}
+            optionsLength={options.length}
+            selectedOption={selectedOption}
+            hasCustomAnswer={customValue.trim().length > 0}
+            onCancel={cancel}
+            onSubmit={submitValue}
+          />
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/hashline-patch/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Body of an omp hashline `edit`: the ops the model sent, with their added
+ * lines. omp only reports the applied diff on the toolResult
+ * (`details.diff`/`details.patch`), so this view is what the Edit panel shows
+ * while the call streams and whenever a result carries no diff at all.
+ */
+
+import { useMemo } from 'preact/hooks';
+import type { HashlineSection, HashlineVerb } from '@/shared/lib/omp/session/hashline-patch';
+import { getLanguageFromPath, highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+/** A hashline `CUT` removes lines the model already saw, so it reads as the
+ *  destructive half of the patch; `PUT` carries the replacement body. */
+function opTone(verb: HashlineVerb): string {
+  return verb === 'CUT' ? 'bg-error/10 text-error' : 'bg-success/10 text-success';
+}
+
+export function HashlinePatch({ sections }: { sections: HashlineSection[] }) {
+  const syntaxReady = useSyntaxReady();
+
+  const htmlByOp = useMemo(() => {
+    return sections.map((section) => {
+      const lang = getLanguageFromPath(section.path);
+      return section.ops.map((op) => highlightLines(op.body.join('\n'), lang));
+    });
+  }, [sections, syntaxReady]);
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">
+        <span>Hashline Patch</span>
+        {sections[0].tag && (
+          <span className="font-mono text-[9px] font-normal tracking-normal text-ink/50">
+            snapshot {sections[0].tag}
+          </span>
+        )}
+      </div>
+      <div className="overflow-hidden rounded-lg border border-ink/8">
+        {sections.map((section, secIdx) => (
+          <div key={section.path} className="border-b border-ink/6 last:border-b-0">
+            <div className="flex min-w-0 items-center gap-2 bg-canvas/40 px-2.5 py-1.5">
+              <span className="truncate font-mono text-[10.5px] font-medium text-ink">{section.path}</span>
+              {section.moveTo && (
+                <span className="shrink-0 font-mono text-[10px] text-ink/50">→ {section.moveTo}</span>
+              )}
+              {section.removed && (
+                <span className="shrink-0 rounded bg-error/10 px-1.5 font-mono text-[9px] uppercase tracking-wider text-error">
+                  Removes file
+                </span>
+              )}
+            </div>
+            <div className="overflow-x-auto">
+              {section.ops.map((op, index) => (
+                <div key={`${op.verb}-${op.spec}-${index}`}>
+                  <div className="flex items-center gap-2 px-2.5 py-1">
+                    <span className={`shrink-0 rounded px-1.5 font-mono text-[9px] font-semibold ${opTone(op.verb)}`}>
+                      {op.verb}
+                    </span>
+                    {op.spec && <span className="font-mono text-[10.5px] text-ink/70">{op.spec}</span>}
+                  </div>
+                  {op.body.map((row, rowIndex) => {
+                    const html = htmlByOp[secIdx]?.[index]?.[rowIndex] || '';
+                    return html ? (
+                      <div
+                        key={rowIndex}
+                        className="shiki whitespace-pre bg-success/[0.05] px-2.5 font-mono text-[11px] leading-relaxed"
+                        dangerouslySetInnerHTML={{ __html: html }}
+                      />
+                    ) : (
+                      <div
+                        key={rowIndex}
+                        className="whitespace-pre bg-success/[0.05] px-2.5 font-mono text-[11px] leading-relaxed text-success/90"
+                      >
+                        {row}
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/index.tsx

@@ -0,0 +1,160 @@
+import type { ReactNode } from 'preact/compat';
+import type { ToolCallData } from '@/shared/types';
+import { TaskResult } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/TaskResult';
+import { Todo } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Todo';
+import { Lsp } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Lsp';
+import { WebSearch } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/WebSearch';
+import { Eval } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Eval';
+import { Github } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Github';
+import { Checkpoint } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Checkpoint';
+import { Bash } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Bash';
+import { SearchTool } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/SearchTool';
+import { SecurityScan } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/SecurityScan';
+import { Hub } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Hub';
+import { ContextNotes } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/ContextNotes';
+import { Memory } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Memory';
+import { Debug } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Debug';
+import { Goal } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Goal';
+import { AstEdit } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/AstEdit';
+import { Resolve } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Resolve';
+import { ManageSkill } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/ManageSkill';
+import { SearchFs } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/SearchFs';
+import { Ask } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Ask';
+import { Think } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Think';
+import { Read } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Read';
+import { Edit } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Edit';
+import { Mcp } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Mcp';
+import { hashlineTargetPath } from '@/shared/lib/omp/session/hashline-patch';
+import { getToolInputPath } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/tool-input';
+
+/** File a tool call targets: explicit `target`, result details, its arguments
+ *  (plain path keys or an omp hashline patch header), then the raw input. */
+export function resolveTargetFile(tool: ToolCallData): string | undefined {
+  if (tool.target) return tool.target;
+  if (tool.diff?.file) return tool.diff.file;
+  if (tool.input && typeof tool.input === 'object') {
+    const obj = tool.input as Record<string, unknown>;
+    if (typeof obj.path === 'string') return obj.path;
+    if (typeof obj.TargetFile === 'string') return obj.TargetFile;
+    if (typeof obj.targetFile === 'string') return obj.targetFile;
+    if (typeof obj.FilePath === 'string') return obj.FilePath;
+    if (typeof obj.filePath === 'string') return obj.filePath;
+    if (typeof obj.AbsolutePath === 'string') return obj.AbsolutePath;
+    if (typeof obj.absolutePath === 'string') return obj.absolutePath;
+    if (typeof obj.file === 'string') return obj.file;
+    const patchPath = hashlineTargetPath(obj);
+    if (patchPath) return patchPath;
+  }
+  if (typeof tool.details?.path === 'string') return tool.details.path;
+  if (typeof tool.input === 'string' && (tool.input.includes('.') || tool.input.includes('/'))) {
+    return tool.input;
+  }
+  if (tool.detail && (tool.detail.includes('.') || tool.detail.includes('/'))) {
+    return tool.detail;
+  }
+  return undefined;
+}
+
+export function resolveToolKey(tool: ToolCallData): string {
+  // 1. Detect oh-my-pi virtual device calls (e.g. xd://lsp, xd://ast_edit, xd://resolve)
+  const details = tool.details as Record<string, any> | undefined;
+  if (details?.xdev?.tool && typeof details.xdev.tool === 'string') {
+    return details.xdev.tool.toLowerCase();
+  }
+
+  const rawTarget = (tool.target || '').toLowerCase();
+  const inputPath = getToolInputPath(tool.input)?.toLowerCase() ?? '';
+
+  const xdTarget = rawTarget.startsWith('xd://') ? rawTarget.slice(5) : inputPath.startsWith('xd://') ? inputPath.slice(5) : '';
+  if (xdTarget) {
+    const dev = xdTarget.split(/[/?#]/)[0].trim();
+    if (dev) return dev;
+  }
+
+  const rawName = (tool.name || '').toLowerCase();
+  const rawType = (tool.type || '').toLowerCase();
+  const rawTitle = (tool.title || '').toLowerCase();
+
+  // If specific tool name is given (e.g. 'todo', 'eval', 'hub', 'grep', 'glob', 'read', 'write', 'edit')
+  if (rawName && rawName !== 'tool' && rawName !== 'custom') {
+    return rawName;
+  }
+
+  // Check title prefix if e.g. "grep — .", "read — app/...", "write — app/..."
+  const titlePrefix = rawTitle.split(/[\s—\-:]+/)[0]?.trim();
+  if (['grep', 'glob', 'read', 'write', 'edit', 'bash', 'terminal', 'run_command', 'todo', 'eval', 'hub', 'lsp', 'github', 'task', 'resolve', 'reject'].includes(titlePrefix)) {
+    return titlePrefix;
+  }
+
+  return rawType;
+}
+
+/** Panel khusus per tool family — dirender di dalam body ToolCallCard. */
+export function ToolDetailsPanel({ tool }: { tool: ToolCallData }): ReactNode {
+  const key = resolveToolKey(tool);
+
+  // File Read Family
+  if (key === 'read' || key === 'read_file' || key === 'view_file' || key === 'read_file_content') {
+    const targetFile = resolveTargetFile(tool);
+    return <Read tool={tool} targetFilePath={targetFile} output={tool.output || ''} />;
+  }
+
+  // File Edit / Write Family
+  if (
+    key === 'edit' ||
+    key === 'write' ||
+    key === 'edit_file' ||
+    key === 'create_file' ||
+    key === 'write_to_file' ||
+    key === 'replace_file_content' ||
+    key === 'multi_edit_file'
+  ) {
+    return <Edit tool={tool} />;
+  }
+
+  // Task & Todo
+  if (key === 'task') return <TaskResult tool={tool} />;
+  if (key === 'todo') return <Todo tool={tool} />;
+
+  // Search & Navigation
+  if (key === 'grep' || key === 'glob' || key === 'ast_grep') return <SearchTool tool={tool} />;
+  if (key === 'search_fs') return <SearchFs tool={tool} />;
+  if (key === 'web_search') return <WebSearch tool={tool} />;
+
+  // Code & Terminal Execution
+  if (key === 'bash' || key === 'terminal' || key === 'run_command') return <Bash tool={tool} />;
+  if (key === 'eval') return <Eval tool={tool} />;
+  if (key === 'lsp') return <Lsp tool={tool} />;
+  if (key === 'ast_edit') return <AstEdit tool={tool} />;
+  if (key === 'resolve' || key === 'reject') return <Resolve tool={tool} />;
+
+  // System, Process & Management
+  if (key === 'hub') return <Hub tool={tool} />;
+  if (key === 'github') return <Github tool={tool} />;
+  if (key === 'checkpoint' || key === 'rewind') return <Checkpoint tool={tool} />;
+  if (key === 'security_scan') return <SecurityScan tool={tool} />;
+  if (key === 'debug') return <Debug tool={tool} />;
+  if (key === 'manage_skill') return <ManageSkill tool={tool} />;
+
+  // Agent State & Interaction
+  if (key === 'context_notes' || key === 'new_context') return <ContextNotes tool={tool} />;
+  if (key === 'memory_edit' || key === 'retain' || key === 'recall' || key === 'reflect' || key === 'learn') {
+    return <Memory tool={tool} />;
+  }
+  if (key === 'goal' || key === 'yield') return <Goal tool={tool} />;
+  if (key === 'ask') return <Ask tool={tool} />;
+  if (key === 'think') return <Think tool={tool} />;
+
+  // Dynamic MCP / custom tools — `mcp__<tool>` names and xd:// device writes
+  if (key.startsWith('mcp__') || (typeof tool.name === 'string' && tool.name.startsWith('mcp__'))) {
+    return <Mcp tool={tool} />;
+  }
+
+  return null;
+}
+
+/** True kalau tool punya panel khusus yang sudah merender input/output sendiri —
+ *  ToolCallCard tidak boleh render Input/Output generik lagi (anti dobel). */
+export function hasToolDetailsPanel(tool: ToolCallData): boolean {
+  return ToolDetailsPanel({ tool }) !== null;
+}