ompchamber 0.3.0

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

@@ -0,0 +1,273 @@
+import { useMemo } from 'preact/hooks';
+import { Activity, CheckCircle2, Play, Radio, Server } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+
+interface HubItem {
+  id?: unknown;
+  name?: unknown;
+  label?: unknown;
+  type?: unknown;
+  status?: unknown;
+  state?: unknown;
+  task?: unknown;
+  message?: unknown;
+  durationMs?: unknown;
+  resolvedModel?: unknown;
+  resultText?: unknown;
+}
+
+function itemStatus(item: HubItem): 'running' | 'done' | 'failed' | 'idle' {
+  const s = typeof item.status === 'string' ? item.status.toLowerCase() : typeof item.state === 'string' ? item.state.toLowerCase() : '';
+  if (s === 'running' || s === 'started' || s === 'pending') return 'running';
+  if (s === 'done' || s === 'completed' || s === 'success') return 'done';
+  if (s === 'failed' || s === 'error') return 'failed';
+  return 'idle';
+}
+
+const STATUS_STYLES = {
+  running: 'bg-ink/8 text-ink/60',
+  done: 'bg-success/10 text-success',
+  failed: 'bg-error/10 text-error',
+  idle: 'bg-ink/5 text-ink/45',
+} as const;
+
+/** Panel untuk tool `hub` — proses background, dev servers, atau job list. */
+export function Hub({ tool }: { tool: ToolCallData }) {
+  const details = (tool.details ?? {}) as Record<string, any>;
+  const rawJobs = Array.isArray(details.jobs) ? details.jobs : Array.isArray(details.items) ? details.items : [];
+  const items: HubItem[] = rawJobs;
+  const input = tool.input;
+  const inputObj = typeof input === 'object' && input !== null ? (input as Record<string, any>) : undefined;
+  const output = tool.output || '';
+
+  // Detect op: "wait"
+  if (inputObj?.op === 'wait') {
+    const ids: string[] = Array.isArray(inputObj.ids) ? inputObj.ids : [];
+    const daemonName = typeof inputObj.name === 'string' ? inputObj.name : undefined;
+    const waitFor = typeof inputObj.for === 'string' ? inputObj.for : undefined;
+    const timeout = typeof inputObj.timeout === 'number'
+      ? `${inputObj.timeout}s`
+      : typeof inputObj.timeoutMs === 'number'
+        ? `${Math.round(inputObj.timeoutMs / 1000)}s`
+        : undefined;
+
+    return (
+      <div className="space-y-2 rounded-lg border border-ink/8 bg-paper p-3 text-[11.5px]">
+        <div className="flex items-center justify-between border-b border-ink/6 pb-2">
+          <div className="flex items-center gap-2">
+            <Radio size={13} className="text-ink/60" />
+            <span className="font-mono font-semibold text-ink">
+              {daemonName ? `Hub Wait: ${daemonName}` : 'Hub Wait'}
+            </span>
+            <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] uppercase tracking-wider text-ink/50">
+              {waitFor ? `wait (${waitFor})` : 'job wait'}
+            </span>
+          </div>
+          {timeout && (
+            <span className="font-mono text-[9.5px] text-ink/40">timeout: {timeout}</span>
+          )}
+        </div>
+        {ids.length > 0 && (
+          <div className="pt-1">
+            <span className="text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">
+              Waiting for Job IDs
+            </span>
+            <div className="mt-1 flex flex-wrap gap-1.5 font-mono text-[10.5px]">
+              {ids.map((id, i) => (
+                <span key={i} className="rounded bg-ink/5 px-2 py-0.5 text-ink/80">
+                  {id}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+        {output && <FallbackOutput text={output} />}
+      </div>
+    );
+  }
+
+  // Detect op: "logs"
+  if (inputObj?.op === 'logs') {
+    const daemonName = typeof inputObj.name === 'string' ? inputObj.name : 'Process';
+    return (
+      <div className="space-y-2 rounded-lg border border-ink/8 bg-paper p-3 text-[11.5px]">
+        <div className="flex items-center justify-between border-b border-ink/6 pb-2">
+          <div className="flex items-center gap-2">
+            <Server size={13} className="text-ink/60" />
+            <span className="font-mono font-semibold text-ink">{daemonName}</span>
+            <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] uppercase tracking-wider text-ink/50">
+              logs
+            </span>
+          </div>
+        </div>
+        <div className="rounded border border-ink/6 bg-canvas/40 p-2 font-mono text-[10.5px] text-ink/85 whitespace-pre-wrap">
+          {output || '// No log output'}
+        </div>
+      </div>
+    );
+  }
+
+  // Detect process management mode (e.g. op: "start", "stop", "restart", "status" with pid=)
+  const processInfo = useMemo(() => {
+    const op = typeof inputObj?.op === 'string' ? inputObj.op.toLowerCase() : '';
+    const isServiceOp = ['start', 'stop', 'restart', 'status'].includes(op);
+    const hasPid = output.includes('pid=');
+    if (!isServiceOp && !hasPid) return null;
+
+    const name = inputObj?.name || 'Service';
+    const app = inputObj?.application;
+    const args = Array.isArray(inputObj?.args) ? inputObj.args.join(' ') : '';
+    const cmd = app ? `${app} ${args}`.trim() : args;
+    const port = inputObj?.ready?.port;
+
+    const pidMatch = output.match(/pid=(\d+)/i);
+    const uptimeMatch = output.match(/uptime=([^\s]+)/i);
+    const restartsMatch = output.match(/restarts=(\d+)/i);
+    const isReady = output.toLowerCase().includes('ready') || output.toLowerCase().includes('started') || output.toLowerCase().includes('running');
+
+    return {
+      op: op || 'process',
+      name,
+      cmd,
+      port,
+      pid: pidMatch ? pidMatch[1] : undefined,
+      uptime: uptimeMatch ? uptimeMatch[1] : undefined,
+      restarts: restartsMatch ? restartsMatch[1] : undefined,
+      isReady,
+      outputLines: output.split(/\r?\n/).filter(Boolean),
+    };
+  }, [inputObj, output]);
+
+  // If process start/stop
+  if (processInfo) {
+    return (
+      <div className="space-y-2">
+        <div className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+          <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-3 py-2">
+            <div className="flex items-center gap-2">
+              <Server size={13} className="text-ink/60" />
+              <span className="font-mono text-[11px] font-semibold text-ink">{processInfo.name}</span>
+              <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9.5px] uppercase tracking-wider text-ink/50">
+                {processInfo.op}
+              </span>
+            </div>
+
+            {processInfo.isReady && (
+              <span className="inline-flex items-center gap-1.5 rounded-full bg-success/10 px-2 py-0.5 font-mono text-[9.5px] font-semibold text-success">
+                <span className="h-1.5 w-1.5 rounded-full bg-success animate-pulse" />
+                Active
+              </span>
+            )}
+          </div>
+
+          <div className="divide-y divide-ink/[0.04] p-3 text-[11px]">
+            {processInfo.cmd && (
+              <div className="flex items-center justify-between py-1 font-mono">
+                <span className="text-ink/45">Command</span>
+                <span className="rounded bg-ink/5 px-2 py-0.5 text-ink/85">{processInfo.cmd}</span>
+              </div>
+            )}
+            <div className="flex flex-wrap items-center gap-4 py-1.5 font-mono text-[10.5px]">
+              {processInfo.port && (
+                <span className="text-ink/60">
+                  Port: <strong className="text-ink">{processInfo.port}</strong>
+                </span>
+              )}
+              {processInfo.pid && (
+                <span className="text-ink/60">
+                  PID: <strong className="text-ink">{processInfo.pid}</strong>
+                </span>
+              )}
+              {processInfo.uptime && (
+                <span className="text-ink/60">
+                  Uptime: <strong className="text-ink">{processInfo.uptime}</strong>
+                </span>
+              )}
+            </div>
+
+            {processInfo.outputLines.length > 0 && (
+              <div className="pt-2">
+                <span className="text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">Log Output</span>
+                <div className="mt-1 rounded border border-ink/6 bg-canvas/40 p-2 font-mono text-[10.5px] text-ink/75">
+                  {processInfo.outputLines.map((l, i) => (
+                    <div key={i}>{l}</div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Job List mode
+  if (items.length === 0) {
+    if (!output) {
+      return (
+        <div className="flex items-center gap-2 rounded-lg border border-dashed border-ink/15 px-3 py-2.5 text-[11.5px] text-ink/45">
+          <Activity size={13} className="shrink-0" />
+          <span>No hub activities</span>
+        </div>
+      );
+    }
+    return <FallbackOutput text={output} />;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="overflow-hidden rounded-lg border border-ink/8">
+        <div className="flex items-center gap-2 border-b border-ink/8 bg-paper px-3 py-1.5">
+          <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">Hub Jobs</span>
+          <span className="rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9.5px] text-ink/45">
+            {items.length}
+          </span>
+        </div>
+        <div className="divide-y divide-ink/6 bg-canvas/40 py-1">
+          {items.map((item, index) => {
+            const status = itemStatus(item);
+            const name = typeof item.id === 'string' ? item.id : typeof item.name === 'string' ? item.name : `job-${index}`;
+            const label = typeof item.label === 'string' ? item.label : typeof item.task === 'string' ? item.task : typeof item.message === 'string' ? item.message : '';
+            const type = typeof item.type === 'string' ? item.type : undefined;
+            const duration = typeof item.durationMs === 'number' ? `${(item.durationMs / 1000).toFixed(1)}s` : undefined;
+            const model = typeof item.resolvedModel === 'string' ? item.resolvedModel : undefined;
+
+            return (
+              <div key={index} className="flex items-center gap-2 px-3 py-1.5 text-[11.5px]">
+                {status === 'running' ? (
+                  <Radio size={11} className="shrink-0 animate-pulse text-ink/50" />
+                ) : status === 'done' ? (
+                  <CheckCircle2 size={11} className="shrink-0 text-success" />
+                ) : (
+                  <Play size={11} className="shrink-0 text-ink/40" />
+                )}
+                <span className="shrink-0 font-mono text-[10px] font-semibold text-ink/80">{name}</span>
+                {type && (
+                  <span className="rounded bg-ink/5 px-1 py-0.2 font-mono text-[8.5px] uppercase tracking-wider text-ink/45">
+                    {type}
+                  </span>
+                )}
+                <span className="min-w-0 flex-1 truncate text-ink/85">{label}</span>
+                {model && (
+                  <span className="hidden sm:inline-block font-mono text-[9px] text-ink/40 truncate max-w-[120px]">
+                    {model}
+                  </span>
+                )}
+                {duration && (
+                  <span className="font-mono text-[9px] text-ink/40">{duration}</span>
+                )}
+                <span className={`shrink-0 rounded-full px-1.5 py-px font-mono text-[9px] ${STATUS_STYLES[status]}`}>
+                  {status}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {output && <FallbackOutput text={output} />}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,276 @@
+import { useMemo } from 'preact/hooks';
+import { AlertCircle, AlertTriangle, CheckCircle2, Cpu, Info, Server } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+import { getToolInputAction } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/tool-input';
+
+interface Diagnostic {
+  file?: unknown;
+  path?: unknown;
+  line?: unknown;
+  column?: unknown;
+  message?: unknown;
+  severity?: unknown;
+  code?: unknown;
+  source?: unknown;
+}
+
+interface LspServerInfo {
+  name: string;
+  capabilities: Record<string, any>;
+}
+
+function severityOf(d: Diagnostic): 'error' | 'warning' | 'info' {
+  const s = typeof d.severity === 'string' ? d.severity.toLowerCase() : '';
+  if (s === 'error' || s === '1') return 'error';
+  if (s === 'warning' || s === '2') return 'warning';
+  return 'info';
+}
+
+const SEVERITY_STYLES = {
+  error: {
+    Icon: AlertCircle,
+    color: 'text-error',
+    text: 'text-error',
+    badge: 'bg-error/10 text-error',
+  },
+  warning: {
+    Icon: AlertTriangle,
+    color: 'text-warning',
+    text: 'text-warning',
+    badge: 'bg-warning/10 text-warning',
+  },
+  info: {
+    Icon: Info,
+    color: 'text-ink/40',
+    text: 'text-ink/70',
+    badge: 'bg-ink/5 text-ink/50',
+  },
+} as const;
+
+function locationOf(d: Diagnostic): string {
+  const file = typeof d.file === 'string' ? d.file : typeof d.path === 'string' ? d.path : '';
+  const line = typeof d.line === 'number' ? d.line : undefined;
+  const col = typeof d.column === 'number' ? d.column : undefined;
+  if (!file) return '';
+  if (line === undefined) return file;
+  return col === undefined ? `${file}:${line}` : `${file}:${line}:${col}`;
+}
+
+function parseLspOutput(output: string): Diagnostic[] {
+  if (!output) return [];
+  try {
+    const data = JSON.parse(output);
+    if (Array.isArray(data)) return data;
+    if (data && typeof data === 'object') {
+      if (Array.isArray(data.diagnostics)) return data.diagnostics;
+      if (Array.isArray(data.errors)) return data.errors;
+    }
+  } catch {}
+
+  const lines = output.split(/\r?\n/).filter(Boolean);
+  const parsed: Diagnostic[] = [];
+  const dirStack: string[] = [];
+  let currentFile = '';
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    // Skip summary line like "23 hint(s):" or "0 error(s):"
+    if (/^\d+\s+(?:error|warning|hint|info)\(s\):/i.test(trimmed)) {
+      continue;
+    }
+
+    // Markdown directory/file headings: "# src/", "## App.tsx"
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const name = headingMatch[2].trim();
+      dirStack.length = Math.min(dirStack.length, level - 1);
+      if (name.endsWith('/')) {
+        dirStack[level - 1] = name;
+      } else {
+        const fullDir = dirStack.filter(Boolean).join('');
+        currentFile = fullDir ? `${fullDir.replace(/\/+$/, '')}/${name}` : name;
+      }
+      continue;
+    }
+
+    // Format: "  165:10 [hint] [typescript] 'isSyncing' is declared ... (6133)"
+    const hierMatch = line.match(/^\s*(\d+):(\d+)\s+\[(error|warning|info|hint)\]\s*(?:\[([^\]]+)\])?\s*(.*?)(?:\s*\((\d+|TS\d+)\))?$/i);
+    if (hierMatch) {
+      parsed.push({
+        file: currentFile || undefined,
+        line: parseInt(hierMatch[1], 10),
+        column: parseInt(hierMatch[2], 10),
+        severity: hierMatch[3].toLowerCase() === 'hint' ? 'info' : hierMatch[3].toLowerCase(),
+        source: hierMatch[4] || undefined,
+        message: hierMatch[5].trim(),
+        code: hierMatch[6] || undefined,
+      });
+      continue;
+    }
+
+    // Flat format: "file.tsx:18:5: error: message"
+    const match = line.match(/^([^:\n]+):(\d+)(?::(\d+))?\s*[-:]?\s*(error|warning|info|hint)?\s*(?:(TS\d+|[A-Za-z0-9_-]+):)?\s*(.*)$/i);
+    if (match) {
+      parsed.push({
+        file: match[1].trim(),
+        line: parseInt(match[2], 10),
+        column: match[3] ? parseInt(match[3], 10) : undefined,
+        severity: match[4] ? (match[4].toLowerCase() === 'hint' ? 'info' : match[4].toLowerCase()) : 'error',
+        code: match[5] || undefined,
+        message: match[6]?.trim() || line,
+      });
+    }
+  }
+  return parsed;
+}
+
+function parseCapabilities(output: string): LspServerInfo[] {
+  if (!output || !output.includes('capabilities:')) return [];
+  const servers: LspServerInfo[] = [];
+
+  // Match "server-name:\n  capabilities: { ... }" blocks
+  const blocks = output.split(/^(?=[A-Za-z0-9_-]+:)/m);
+  for (const block of blocks) {
+    const trimmed = block.trim();
+    if (!trimmed) continue;
+    const nameMatch = trimmed.match(/^([A-Za-z0-9_-]+):\s*capabilities:\s*(\{[\s\S]*\})/m);
+    if (nameMatch) {
+      const name = nameMatch[1];
+      try {
+        const capabilities = JSON.parse(nameMatch[2]);
+        servers.push({ name, capabilities });
+      } catch {
+        servers.push({ name, capabilities: {} });
+      }
+    }
+  }
+  return servers;
+}
+
+/** Daftar diagnostics atau Server Capabilities untuk tool `lsp`. */
+export function Lsp({ tool }: { tool: ToolCallData }) {
+  const details = (tool.details ?? {}) as Record<string, any>;
+  const output = tool.output ?? '';
+
+  const isCapabilities =
+    details.xdev?.args?.action === 'capabilities' ||
+    getToolInputAction(tool.input) === 'capabilities' ||
+    output.includes('capabilities:');
+
+  const capabilities = useMemo(() => (isCapabilities ? parseCapabilities(output) : []), [isCapabilities, output]);
+
+  const items: Diagnostic[] = useMemo(() => {
+    if (isCapabilities) return [];
+    return Array.isArray(details.diagnostics) ? details.diagnostics : parseLspOutput(output);
+  }, [details.diagnostics, isCapabilities, output]);
+
+  // View: LSP Server Capabilities
+  if (isCapabilities && capabilities.length > 0) {
+    return (
+      <div className="space-y-2 select-text">
+        <div className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+          <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-3 py-1.5">
+            <div className="flex items-center gap-2">
+              <Server size={13} className="text-ink/60" />
+              <span className="font-mono text-[10.5px] font-semibold text-ink">Language Servers</span>
+              <span className="rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9px] uppercase tracking-wider text-ink/50">
+                Capabilities
+              </span>
+            </div>
+            <span className="font-mono text-[10px] text-ink/40">{capabilities.length} active</span>
+          </div>
+
+          <div className="divide-y divide-ink/6 bg-canvas/30">
+            {capabilities.map((srv, idx) => {
+              const capKeys = Object.entries(srv.capabilities)
+                .filter(([, v]) => Boolean(v))
+                .map(([k]) => k.replace(/Provider$/, ''));
+
+              return (
+                <div key={idx} className="p-3 text-[11px]">
+                  <div className="flex items-center gap-2">
+                    <Cpu size={12} className="text-ink/50" />
+                    <span className="font-mono font-medium text-ink">{srv.name}</span>
+                    <span className="ml-auto inline-flex items-center gap-1 font-mono text-[9.5px] text-success">
+                      <CheckCircle2 size={10} />
+                      Connected
+                    </span>
+                  </div>
+
+                  {capKeys.length > 0 && (
+                    <div className="mt-2 flex flex-wrap gap-1">
+                      {capKeys.map((cap, i) => (
+                        <span
+                          key={i}
+                          className="rounded bg-ink/5 px-1.5 py-0.5 font-mono text-[9px] text-ink/60"
+                        >
+                          {cap}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // View: Empty / Fallback
+  if (items.length === 0) {
+    if (!output) return null;
+    return <FallbackOutput text={output} />;
+  }
+
+  // View: Diagnostics List
+  const bySeverity = (sev: 'error' | 'warning' | 'info') => items.filter((d) => severityOf(d) === sev);
+  const errorN = bySeverity('error').length;
+  const warningN = bySeverity('warning').length;
+  const infoN = bySeverity('info').length;
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-ink/8 select-text">
+      <div className="flex items-center gap-2 border-b border-ink/8 bg-paper px-2.5 py-1.5">
+        <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">
+          Diagnostics
+        </span>
+        <span className="ml-auto flex items-center gap-2 font-mono text-[10px]">
+          {errorN > 0 && <span className="flex items-center gap-1 text-error"><AlertCircle size={9} />{errorN}</span>}
+          {warningN > 0 && <span className="flex items-center gap-1 text-warning"><AlertTriangle size={9} />{warningN}</span>}
+          {infoN > 0 && <span className="flex items-center gap-1 text-ink/50"><Info size={9} />{infoN}</span>}
+        </span>
+      </div>
+      <div className="divide-y divide-ink/6 bg-canvas/40 py-1 max-h-72 overflow-auto">
+        {items.map((d, index) => {
+          const sev = severityOf(d);
+          const style = SEVERITY_STYLES[sev];
+          const loc = locationOf(d);
+          const msg = typeof d.message === 'string' ? d.message : '';
+          const code = typeof d.code === 'string' ? d.code : undefined;
+          const source = typeof d.source === 'string' ? d.source : undefined;
+
+          const { Icon, color, text: textColor } = style;
+
+          return (
+            <div key={index} className="flex items-start gap-2 px-2.5 py-1.5 text-[11.5px]">
+              <span className="flex h-5 w-3.5 shrink-0 items-center justify-center">
+                <Icon size={12} className={color} />
+              </span>
+              <span className="min-w-0 flex-1 break-words leading-5">
+                {loc && <span className="font-mono text-[10px] text-ink/45 mr-1">{loc}:</span>}
+                <span className={textColor}>{msg}</span>
+                {source && <span className="ml-1.5 font-mono text-[9px] text-ink/35">[{source}]</span>}
+                {code && <span className="ml-1 font-mono text-[9px] text-ink/35">({code})</span>}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { PackageCheck, PackageX } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+
+interface SkillItem {
+  name?: unknown;
+  slug?: unknown;
+  version?: unknown;
+  scope?: unknown;
+  status?: unknown;
+  message?: unknown;
+}
+
+function itemName(s: SkillItem): string {
+  return typeof s.name === 'string' ? s.name : typeof s.slug === 'string' ? s.slug : '';
+}
+
+function itemStatus(s: SkillItem): 'enabled' | 'disabled' | 'installed' | 'removed' {
+  const st = typeof s.status === 'string' ? s.status.toLowerCase() : '';
+  if (st === 'enabled' || st === 'installed') return st as 'enabled' | 'installed';
+  if (st === 'removed' || st === 'uninstalled' || st === 'deleted') return 'removed';
+  return 'disabled';
+}
+
+const STATUS_STYLES = {
+  enabled: 'bg-success/10 text-success',
+  installed: 'bg-ink/8 text-ink/60',
+  disabled: 'bg-ink/5 text-ink/45',
+  removed: 'bg-error/10 text-error',
+} as const;
+
+function parseSkills(output: string): SkillItem[] {
+  if (!output) return [];
+  try {
+    const data = JSON.parse(output);
+    if (Array.isArray(data)) return data;
+    if (data && typeof data === 'object') {
+      if (Array.isArray(data.skills)) return data.skills;
+      if (Array.isArray(data.items)) return data.items;
+    }
+  } catch {}
+  return [];
+}
+
+/** Panel untuk tool `manage_skill` — daftar skill terkelola. */
+export function ManageSkill({ tool }: { tool: ToolCallData }) {
+  const details = tool.details ?? {};
+  const items: SkillItem[] = Array.isArray(details.skills)
+    ? details.skills
+    : parseSkills(tool.output ?? '');
+
+  if (items.length === 0) {
+    if (!tool.output) return null;
+    return <FallbackOutput text={tool.output} />;
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-ink/8">
+      <div className="border-b border-ink/8 bg-paper px-2.5 py-1.5">
+        <span className="text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">Skills</span>
+        <span className="ml-2 rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9.5px] text-ink/45">
+          {items.length}
+        </span>
+      </div>
+      <div className="divide-y divide-ink/6 bg-canvas/40 py-1">
+        {items.map((item, index) => {
+          const name = itemName(item);
+          if (!name) return null;
+          const status = itemStatus(item);
+          const scope = typeof item.scope === 'string' ? item.scope : undefined;
+          const version = typeof item.version === 'string' ? item.version : undefined;
+          const msg = typeof item.message === 'string' ? item.message : '';
+          return (
+            <div key={index} className="flex items-center gap-2 px-2.5 py-1.5 text-[11.5px]">
+              {status === 'removed' ? (
+                <PackageX size={11} className="shrink-0 text-error" />
+              ) : (
+                <PackageCheck size={11} className="shrink-0 text-ink/40" />
+              )}
+              <span className="shrink-0 font-mono text-[10px] font-semibold text-ink/70">{name}</span>
+              {scope && <span className="rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9px] text-ink/45">{scope}</span>}
+              {version && <span className="font-mono text-[9px] text-ink/35">v{version}</span>}
+              {msg && <span className="min-w-0 flex-1 truncate text-ink/65">{msg}</span>}
+              <span className={`ml-auto shrink-0 rounded-full px-1.5 py-px font-mono text-[9px] ${STATUS_STYLES[status]}`}>
+                {status}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}