chore: fix bad merge

frontend/packages/inspector/src/components/debug/AgentsTab.tsx

@@ -1,6 +1,8 @@
 import { Download, Loader2, RefreshCw } from "lucide-react";
 import { useState } from "react";
-import type { AgentInfo, AgentModeInfo } from "../../types/legacyApi";
+import type { AgentInfo } from "sandbox-agent";
+
+type AgentModeInfo = { id: string; name: string; description: string };
 import FeatureCoverageBadges from "../agents/FeatureCoverageBadges";
 import { emptyFeatureCoverage } from "../../types/agents";
 
@@ -52,9 +54,9 @@ const AgentsTab = ({
             id,
             installed: false,
             credentialsAvailable: false,
-            version: undefined,
-            path: undefined,
-            capabilities: emptyFeatureCoverage
+            version: undefined as string | undefined,
+            path: undefined as string | undefined,
+            capabilities: emptyFeatureCoverage as AgentInfo["capabilities"],
           }))).map((agent) => {
         const isInstalling = installingAgent === agent.id;
         return (

frontend/packages/inspector/src/components/debug/ApprovalsTab.tsx

@@ -1,105 +0,0 @@
-import { HelpCircle, Shield } from "lucide-react";
-import type { PermissionEventData, QuestionEventData } from "../../types/legacyApi";
-import { formatJson } from "../../utils/format";
-
-const ApprovalsTab = ({
-  questionRequests,
-  permissionRequests,
-  questionSelections,
-  onSelectQuestionOption,
-  onAnswerQuestion,
-  onRejectQuestion,
-  onReplyPermission
-}: {
-  questionRequests: QuestionEventData[];
-  permissionRequests: PermissionEventData[];
-  questionSelections: Record<string, string[][]>;
-  onSelectQuestionOption: (requestId: string, optionLabel: string) => void;
-  onAnswerQuestion: (request: QuestionEventData) => void;
-  onRejectQuestion: (requestId: string) => void;
-  onReplyPermission: (requestId: string, reply: "once" | "always" | "reject") => void;
-}) => {
-  return (
-    <>
-      {questionRequests.length === 0 && permissionRequests.length === 0 ? (
-        <div className="card-meta">No pending approvals.</div>
-      ) : (
-        <>
-          {questionRequests.map((request) => {
-            const selections = questionSelections[request.question_id] ?? [];
-            const selected = selections[0] ?? [];
-            const answered = selected.length > 0;
-            return (
-              <div key={request.question_id} className="card">
-                <div className="card-header">
-                  <span className="card-title">
-                    <HelpCircle className="button-icon" style={{ marginRight: 6 }} />
-                    Question
-                  </span>
-                  <span className="pill accent">Pending</span>
-                </div>
-                <div style={{ marginTop: 12 }}>
-                  <div style={{ fontSize: 12, marginBottom: 8 }}>{request.prompt}</div>
-                  <div className="option-list">
-                    {request.options.map((option) => {
-                      const isSelected = selected.includes(option);
-                      return (
-                        <label key={option} className="option-item">
-                          <input
-                            type="radio"
-                            checked={isSelected}
-                            onChange={() => onSelectQuestionOption(request.question_id, option)}
-                          />
-                          <span>{option}</span>
-                        </label>
-                      );
-                    })}
-                  </div>
-                </div>
-                <div className="card-actions">
-                  <button className="button success small" disabled={!answered} onClick={() => onAnswerQuestion(request)}>
-                    Reply
-                  </button>
-                  <button className="button danger small" onClick={() => onRejectQuestion(request.question_id)}>
-                    Reject
-                  </button>
-                </div>
-              </div>
-            );
-          })}
-
-          {permissionRequests.map((request) => (
-            <div key={request.permission_id} className="card">
-              <div className="card-header">
-                <span className="card-title">
-                  <Shield className="button-icon" style={{ marginRight: 6 }} />
-                  Permission
-                </span>
-                <span className="pill accent">Pending</span>
-              </div>
-              <div className="card-meta" style={{ marginTop: 8 }}>
-                {request.action}
-              </div>
-              {request.metadata !== null && request.metadata !== undefined && (
-                <pre className="code-block">{formatJson(request.metadata)}</pre>
-              )}
-              <div className="card-actions">
-                <button className="button success small" onClick={() => onReplyPermission(request.permission_id, "once")}>
-                  Allow Once
-                </button>
-                <button className="button secondary small" onClick={() => onReplyPermission(request.permission_id, "always")}>
-                  Always
-                </button>
-                <button className="button danger small" onClick={() => onReplyPermission(request.permission_id, "reject")}>
-                  Reject
-                </button>
-              </div>
-            </div>
-          ))}
-        </>
-      )}
-    </>
-  );
-};
-
-export default ApprovalsTab;

frontend/packages/inspector/src/components/debug/DebugPanel.tsx

@@ -1,19 +1,21 @@
-import { Cloud, PlayCircle, Terminal } from "lucide-react";
-import type { AgentInfo, AgentModeInfo, UniversalEvent } from "../../types/legacyApi";
+import { Cloud, PlayCircle, Server, Terminal, Wrench } from "lucide-react";
+import type { AgentInfo, SandboxAgent, SessionEvent } from "sandbox-agent";
+
+type AgentModeInfo = { id: string; name: string; description: string };
 import AgentsTab from "./AgentsTab";
 import EventsTab from "./EventsTab";
+import McpTab from "./McpTab";
+import SkillsTab from "./SkillsTab";
 import RequestLogTab from "./RequestLogTab";
 import type { RequestLog } from "../../types/requestLog";
 
-export type DebugTab = "log" | "events" | "agents";
+export type DebugTab = "log" | "events" | "agents" | "mcp" | "skills";
 
 const DebugPanel = ({
   debugTab,
   onDebugTabChange,
   events,
-  offset,
   onResetEvents,
-  eventsError,
   requestLog,
   copiedLogId,
   onClearRequestLog,
@@ -24,14 +26,13 @@ const DebugPanel = ({
   onRefreshAgents,
   onInstallAgent,
   agentsLoading,
-  agentsError
+  agentsError,
+  getClient,
 }: {
   debugTab: DebugTab;
   onDebugTabChange: (tab: DebugTab) => void;
-  events: UniversalEvent[];
-  offset: number;
+  events: SessionEvent[];
   onResetEvents: () => void;
-  eventsError: string | null;
   requestLog: RequestLog[];
   copiedLogId: number | null;
   onClearRequestLog: () => void;
@@ -43,6 +44,7 @@ const DebugPanel = ({
   onInstallAgent: (agentId: string, reinstall: boolean) => Promise<void>;
   agentsLoading: boolean;
   agentsError: string | null;
+  getClient: () => SandboxAgent;
 }) => {
   return (
     <div className="debug-panel">
@@ -60,6 +62,14 @@ const DebugPanel = ({
           <Cloud className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
           Agents
         </button>
+        <button className={`debug-tab ${debugTab === "mcp" ? "active" : ""}`} onClick={() => onDebugTabChange("mcp")}>
+          <Server className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
+          MCP
+        </button>
+        <button className={`debug-tab ${debugTab === "skills" ? "active" : ""}`} onClick={() => onDebugTabChange("skills")}>
+          <Wrench className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
+          Skills
+        </button>
       </div>
 
       <div className="debug-content">
@@ -75,9 +85,7 @@ const DebugPanel = ({
         {debugTab === "events" && (
           <EventsTab
             events={events}
-            offset={offset}
             onClear={onResetEvents}
-            error={eventsError}
           />
         )}
 
@@ -92,6 +100,14 @@ const DebugPanel = ({
             error={agentsError}
           />
         )}
+
+        {debugTab === "mcp" && (
+          <McpTab getClient={getClient} />
+        )}
+
+        {debugTab === "skills" && (
+          <SkillsTab getClient={getClient} />
+        )}
       </div>
     </div>
   );

frontend/packages/inspector/src/components/debug/EventsTab.tsx

@@ -1,19 +1,119 @@
-import { ChevronDown, ChevronRight } from "lucide-react";
+import {
+  Ban,
+  Bot,
+  Brain,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  CircleX,
+  Command,
+  CornerDownLeft,
+  FilePen,
+  FileText,
+  FolderOpen,
+  Hourglass,
+  KeyRound,
+  ListChecks,
+  MessageSquare,
+  Plug,
+  Radio,
+  ScrollText,
+  Settings,
+  ShieldCheck,
+  SquarePlus,
+  SquareTerminal,
+  ToggleLeft,
+  Trash2,
+  Unplug,
+  Wrench,
+  type LucideIcon,
+} from "lucide-react";
 import { useEffect, useState } from "react";
-import type { UniversalEvent } from "../../types/legacyApi";
+import type { SessionEvent } from "sandbox-agent";
 import { formatJson, formatTime } from "../../utils/format";
-import { getEventCategory, getEventClass, getEventIcon, getEventKey, getEventType } from "./eventUtils";
+
+type EventIconInfo = { Icon: LucideIcon; category: string };
+
+function getEventIcon(method: string, payload: Record<string, unknown>): EventIconInfo {
+  if (method === "session/update") {
+    const params = payload.params as Record<string, unknown> | undefined;
+    const update = params?.update as Record<string, unknown> | undefined;
+    const updateType = update?.sessionUpdate as string | undefined;
+
+    switch (updateType) {
+      case "user_message_chunk":
+        return { Icon: MessageSquare, category: "prompt" };
+      case "agent_message_chunk":
+        return { Icon: Bot, category: "update" };
+      case "agent_thought_chunk":
+        return { Icon: Brain, category: "update" };
+      case "tool_call":
+      case "tool_call_update":
+        return { Icon: Wrench, category: "tool" };
+      case "plan":
+        return { Icon: ListChecks, category: "config" };
+      case "available_commands_update":
+        return { Icon: Command, category: "config" };
+      case "current_mode_update":
+        return { Icon: ToggleLeft, category: "config" };
+      case "config_option_update":
+        return { Icon: Settings, category: "config" };
+      default:
+        return { Icon: Radio, category: "update" };
+    }
+  }
+
+  switch (method) {
+    case "initialize":
+      return { Icon: Plug, category: "connection" };
+    case "authenticate":
+      return { Icon: KeyRound, category: "connection" };
+    case "session/new":
+      return { Icon: SquarePlus, category: "session" };
+    case "session/load":
+      return { Icon: FolderOpen, category: "session" };
+    case "session/prompt":
+      return { Icon: MessageSquare, category: "prompt" };
+    case "session/cancel":
+      return { Icon: Ban, category: "cancel" };
+    case "session/set_mode":
+      return { Icon: ToggleLeft, category: "config" };
+    case "session/set_config_option":
+      return { Icon: Settings, category: "config" };
+    case "session/request_permission":
+      return { Icon: ShieldCheck, category: "permission" };
+    case "fs/read_text_file":
+      return { Icon: FileText, category: "filesystem" };
+    case "fs/write_text_file":
+      return { Icon: FilePen, category: "filesystem" };
+    case "terminal/create":
+      return { Icon: SquareTerminal, category: "terminal" };
+    case "terminal/kill":
+      return { Icon: CircleX, category: "terminal" };
+    case "terminal/output":
+      return { Icon: ScrollText, category: "terminal" };
+    case "terminal/release":
+      return { Icon: Trash2, category: "terminal" };
+    case "terminal/wait_for_exit":
+      return { Icon: Hourglass, category: "terminal" };
+    case "_sandboxagent/session/detach":
+      return { Icon: Unplug, category: "session" };
+    case "(response)":
+      return { Icon: CornerDownLeft, category: "response" };
+    default:
+      if (method.startsWith("_sandboxagent/")) {
+        return { Icon: Radio, category: "connection" };
+      }
+      return { Icon: Circle, category: "response" };
+  }
+}
 
 const EventsTab = ({
   events,
-  offset,
   onClear,
-  error
 }: {
-  events: UniversalEvent[];
-  offset: number;
+  events: SessionEvent[];
   onClear: () => void;
-  error: string | null;
 }) => {
   const [collapsedEvents, setCollapsedEvents] = useState<Record<string, boolean>>({});
   const [copied, setCopied] = useState(false);
@@ -55,10 +155,15 @@ const EventsTab = ({
     }
   }, [events.length]);
 
+  const getMethod = (event: SessionEvent): string => {
+    const payload = event.payload as Record<string, unknown>;
+    return typeof payload.method === "string" ? payload.method : "(response)";
+  };
+
   return (
     <>
       <div className="inline-row" style={{ marginBottom: 12, justifyContent: "space-between" }}>
-        <span className="card-meta">Offset: {offset}</span>
+        <span className="card-meta">{events.length} events</span>
         <div className="inline-row">
           <button
             type="button"
@@ -75,26 +180,26 @@ const EventsTab = ({
         </div>
       </div>
 
-      {error && <div className="banner error">{error}</div>}
-
       {events.length === 0 ? (
         <div className="card-meta">
-          No events yet. Start streaming to receive events.
+          No events yet. Create a session and send a message.
         </div>
       ) : (
         <div className="event-list">
           {[...events].reverse().map((event) => {
-            const type = getEventType(event);
-            const category = getEventCategory(type);
-            const eventClass = `${category} ${getEventClass(type)}`;
-            const eventKey = getEventKey(event);
+            const eventKey = event.id;
             const isCollapsed = collapsedEvents[eventKey] ?? true;
             const toggleCollapsed = () =>
               setCollapsedEvents((prev) => ({
                 ...prev,
                 [eventKey]: !(prev[eventKey] ?? true)
               }));
-            const Icon = getEventIcon(type);
+            const method = getMethod(event);
+            const payload = event.payload as Record<string, unknown>;
+            const { Icon, category } = getEventIcon(method, payload);
+            const time = formatTime(new Date(event.createdAt).toISOString());
+            const senderClass = event.sender === "client" ? "client" : "agent";
+
             return (
               <div key={eventKey} className={`event-item ${isCollapsed ? "collapsed" : "expanded"}`}>
                 <button
@@ -103,24 +208,26 @@ const EventsTab = ({
                   onClick={toggleCollapsed}
                   title={isCollapsed ? "Expand payload" : "Collapse payload"}
                 >
-                  <span className={`event-icon ${eventClass}`}>
+                  <span className={`event-icon ${category}`}>
                     <Icon size={14} />
                   </span>
                   <div className="event-summary-main">
                     <div className="event-title-row">
-                      <span className={`event-type ${eventClass}`}>{type}</span>
-                      <span className="event-time">{formatTime(event.time)}</span>
+                      <span className={`event-type ${category}`}>{method}</span>
+                      <span className={`pill ${senderClass === "client" ? "accent" : "success"}`}>
+                        {event.sender}
+                      </span>
+                      <span className="event-time">{time}</span>
                     </div>
                     <div className="event-id">
-                      Event #{event.event_id || event.sequence} - seq {event.sequence} - {event.source}
-                      {event.synthetic ? " (synthetic)" : ""}
+                      {event.id}
                     </div>
                   </div>
                   <span className="event-chevron">
                     {isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
                   </span>
                 </button>
-                {!isCollapsed && <pre className="code-block event-payload">{formatJson(event.data)}</pre>}
+                {!isCollapsed && <pre className="code-block event-payload">{formatJson(event.payload)}</pre>}
               </div>
             );
           })}

frontend/packages/inspector/src/components/debug/McpTab.tsx

@@ -0,0 +1,210 @@
+import { FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import type { SandboxAgent } from "sandbox-agent";
+import { formatJson } from "../../utils/format";
+
+type McpEntry = {
+  name: string;
+  config: Record<string, unknown>;
+};
+
+const McpTab = ({
+  getClient,
+}: {
+  getClient: () => SandboxAgent;
+}) => {
+  const [directory, setDirectory] = useState("/");
+  const [entries, setEntries] = useState<McpEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Add/edit form state
+  const [editing, setEditing] = useState(false);
+  const [editName, setEditName] = useState("");
+  const [editJson, setEditJson] = useState("");
+  const [editError, setEditError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const loadAll = useCallback(async (dir: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const configPath = `${dir === "/" ? "" : dir}/.sandbox-agent/config/mcp.json`;
+      const bytes = await getClient().readFsFile({ path: configPath });
+      const text = new TextDecoder().decode(bytes);
+      if (!text.trim()) {
+        setEntries([]);
+        return;
+      }
+      const map = JSON.parse(text) as Record<string, Record<string, unknown>>;
+      setEntries(
+        Object.entries(map).map(([name, config]) => ({ name, config })),
+      );
+    } catch {
+      // File doesn't exist yet or is empty — that's fine
+      setEntries([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [getClient]);
+
+  useEffect(() => {
+    loadAll(directory);
+  }, [directory, loadAll]);
+
+  const startAdd = () => {
+    setEditing(true);
+    setEditName("");
+    setEditJson('{\n  "type": "local",\n  "command": "npx",\n  "args": ["@modelcontextprotocol/server-everything"]\n}');
+    setEditError(null);
+  };
+
+  const cancelEdit = () => {
+    setEditing(false);
+    setEditName("");
+    setEditJson("");
+    setEditError(null);
+  };
+
+  const save = async () => {
+    const name = editName.trim();
+    if (!name) {
+      setEditError("Name is required");
+      return;
+    }
+
+    let parsed: Record<string, unknown>;
+    try {
+      parsed = JSON.parse(editJson.trim());
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+        setEditError("Must be a JSON object");
+        return;
+      }
+    } catch {
+      setEditError("Invalid JSON");
+      return;
+    }
+
+    setSaving(true);
+    setEditError(null);
+    try {
+      await getClient().setMcpConfig(
+        { directory, mcpName: name },
+        parsed as Parameters<SandboxAgent["setMcpConfig"]>[1],
+      );
+      cancelEdit();
+      await loadAll(directory);
+    } catch (err) {
+      setEditError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (name: string) => {
+    try {
+      await getClient().deleteMcpConfig({ directory, mcpName: name });
+      await loadAll(directory);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete");
+    }
+  };
+
+  return (
+    <>
+      <div className="inline-row" style={{ marginBottom: 12, justifyContent: "space-between" }}>
+        <span className="card-meta">MCP Server Configuration</span>
+        <div className="inline-row">
+          {!editing && (
+            <button className="button secondary small" onClick={startAdd}>
+              <Plus className="button-icon" style={{ width: 12, height: 12 }} />
+              Add
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="inline-row" style={{ marginBottom: 12, gap: 6 }}>
+        <FolderOpen size={14} className="muted" style={{ flexShrink: 0 }} />
+        <input
+          className="setup-input mono"
+          value={directory}
+          onChange={(e) => setDirectory(e.target.value)}
+          placeholder="/"
+          style={{ flex: 1, fontSize: 11 }}
+        />
+      </div>
+
+      {error && <div className="banner error">{error}</div>}
+      {loading && <div className="card-meta">Loading...</div>}
+
+      {editing && (
+        <div className="card" style={{ marginBottom: 12 }}>
+          <div className="card-header">
+            <span className="card-title">
+              {editName ? `Edit: ${editName}` : "Add MCP Server"}
+            </span>
+          </div>
+          <div style={{ marginTop: 8 }}>
+            <input
+              className="setup-input"
+              value={editName}
+              onChange={(e) => { setEditName(e.target.value); setEditError(null); }}
+              placeholder="server-name"
+              style={{ marginBottom: 8, width: "100%", boxSizing: "border-box" }}
+            />
+            <textarea
+              className="setup-input mono"
+              value={editJson}
+              onChange={(e) => { setEditJson(e.target.value); setEditError(null); }}
+              rows={6}
+              style={{ width: "100%", boxSizing: "border-box", fontFamily: "monospace", fontSize: 11 }}
+            />
+            {editError && <div className="banner error" style={{ marginTop: 4 }}>{editError}</div>}
+          </div>
+          <div className="card-actions">
+            <button className="button primary small" onClick={save} disabled={saving}>
+              {saving ? <Loader2 className="button-icon spinner-icon" /> : null}
+              Save
+            </button>
+            <button className="button ghost small" onClick={cancelEdit}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {entries.length === 0 && !editing && !loading && (
+        <div className="card-meta">
+          No MCP servers configured in this directory.
+        </div>
+      )}
+
+      {entries.map((entry) => (
+        <div key={entry.name} className="card" style={{ marginBottom: 8 }}>
+          <div className="card-header">
+            <span className="card-title">{entry.name}</span>
+            <div className="card-header-pills">
+              <span className="pill accent">
+                {(entry.config as { type?: string }).type ?? "unknown"}
+              </span>
+              <button
+                className="button ghost small"
+                onClick={() => remove(entry.name)}
+                title="Remove"
+                style={{ padding: "2px 4px" }}
+              >
+                <Trash2 size={12} />
+              </button>
+            </div>
+          </div>
+          <pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
+            {formatJson(entry.config)}
+          </pre>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default McpTab;

frontend/packages/inspector/src/components/debug/RequestLogTab.tsx

@@ -44,21 +44,21 @@ const RequestLogTab = ({
                   type="button"
                   onClick={() => hasDetails && toggleExpanded(entry.id)}
                   title={hasDetails ? (isExpanded ? "Collapse" : "Expand") : undefined}
-                  style={{ cursor: hasDetails ? "pointer" : "default" }}
+                  style={{ cursor: hasDetails ? "pointer" : "default", gridTemplateColumns: "1fr auto auto auto" }}
                 >
-                  <div className="event-summary-main" style={{ flex: 1 }}>
+                  <div className="event-summary-main">
                     <div className="event-title-row">
                       <span className="log-method">{entry.method}</span>
                       <span className="log-url text-truncate" style={{ flex: 1 }}>{entry.url}</span>
-                      <span className={`log-status ${entry.status && entry.status < 400 ? "ok" : "error"}`}>
-                        {entry.status || "ERR"}
-                      </span>
                     </div>
                     <div className="event-id">
                       {entry.time}
                       {entry.error && ` - ${entry.error}`}
                     </div>
                   </div>
+                  <span className={`log-status ${entry.status && entry.status < 400 ? "ok" : "error"}`}>
+                    {entry.status || "ERR"}
+                  </span>
                   <span
                     className="copy-button"
                     onClick={(e) => {

frontend/packages/inspector/src/components/debug/SkillsTab.tsx

@@ -0,0 +1,263 @@
+import { FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import type { SandboxAgent } from "sandbox-agent";
+import { formatJson } from "../../utils/format";
+
+type SkillEntry = {
+  name: string;
+  config: { sources: Array<{ source: string; type: string; ref?: string | null; subpath?: string | null; skills?: string[] | null }> };
+};
+
+const SkillsTab = ({
+  getClient,
+}: {
+  getClient: () => SandboxAgent;
+}) => {
+  const [directory, setDirectory] = useState("/");
+  const [entries, setEntries] = useState<SkillEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Add form state
+  const [editing, setEditing] = useState(false);
+  const [editName, setEditName] = useState("");
+  const [editSource, setEditSource] = useState("");
+  const [editType, setEditType] = useState("github");
+  const [editRef, setEditRef] = useState("");
+  const [editSubpath, setEditSubpath] = useState("");
+  const [editSkills, setEditSkills] = useState("");
+  const [editError, setEditError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const loadAll = useCallback(async (dir: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const configPath = `${dir === "/" ? "" : dir}/.sandbox-agent/config/skills.json`;
+      const bytes = await getClient().readFsFile({ path: configPath });
+      const text = new TextDecoder().decode(bytes);
+      if (!text.trim()) {
+        setEntries([]);
+        return;
+      }
+      const map = JSON.parse(text) as Record<string, SkillEntry["config"]>;
+      setEntries(
+        Object.entries(map).map(([name, config]) => ({ name, config })),
+      );
+    } catch {
+      // File doesn't exist yet or is empty — that's fine
+      setEntries([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [getClient]);
+
+  useEffect(() => {
+    loadAll(directory);
+  }, [directory, loadAll]);
+
+  const startAdd = () => {
+    setEditing(true);
+    setEditName("");
+    setEditSource("rivet-dev/skills");
+    setEditType("github");
+    setEditRef("");
+    setEditSubpath("");
+    setEditSkills("sandbox-agent");
+    setEditError(null);
+  };
+
+  const cancelEdit = () => {
+    setEditing(false);
+    setEditName("");
+    setEditSource("");
+    setEditType("github");
+    setEditRef("");
+    setEditSubpath("");
+    setEditSkills("");
+    setEditError(null);
+  };
+
+  const save = async () => {
+    const name = editName.trim();
+    if (!name) {
+      setEditError("Name is required");
+      return;
+    }
+    const source = editSource.trim();
+    if (!source) {
+      setEditError("Source is required");
+      return;
+    }
+
+    const skillEntry: SkillEntry["config"]["sources"][0] = {
+      source,
+      type: editType,
+    };
+    if (editRef.trim()) skillEntry.ref = editRef.trim();
+    if (editSubpath.trim()) skillEntry.subpath = editSubpath.trim();
+    const skillsList = editSkills.trim()
+      ? editSkills.split(",").map((s) => s.trim()).filter(Boolean)
+      : null;
+    if (skillsList && skillsList.length > 0) skillEntry.skills = skillsList;
+
+    const config = { sources: [skillEntry] };
+
+    setSaving(true);
+    setEditError(null);
+    try {
+      await getClient().setSkillsConfig(
+        { directory, skillName: name },
+        config,
+      );
+      cancelEdit();
+      await loadAll(directory);
+    } catch (err) {
+      setEditError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (name: string) => {
+    try {
+      await getClient().deleteSkillsConfig({ directory, skillName: name });
+      await loadAll(directory);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete");
+    }
+  };
+
+  return (
+    <>
+      <div className="inline-row" style={{ marginBottom: 12, justifyContent: "space-between" }}>
+        <span className="card-meta">Skills Configuration</span>
+        <div className="inline-row">
+          {!editing && (
+            <button className="button secondary small" onClick={startAdd}>
+              <Plus className="button-icon" style={{ width: 12, height: 12 }} />
+              Add
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="inline-row" style={{ marginBottom: 12, gap: 6 }}>
+        <FolderOpen size={14} className="muted" style={{ flexShrink: 0 }} />
+        <input
+          className="setup-input mono"
+          value={directory}
+          onChange={(e) => setDirectory(e.target.value)}
+          placeholder="/"
+          style={{ flex: 1, fontSize: 11 }}
+        />
+      </div>
+
+      {error && <div className="banner error">{error}</div>}
+      {loading && <div className="card-meta">Loading...</div>}
+
+      {editing && (
+        <div className="card" style={{ marginBottom: 12 }}>
+          <div className="card-header">
+            <span className="card-title">Add Skill Source</span>
+          </div>
+          <div style={{ marginTop: 8 }}>
+            <input
+              className="setup-input"
+              value={editName}
+              onChange={(e) => { setEditName(e.target.value); setEditError(null); }}
+              placeholder="skill-name"
+              style={{ marginBottom: 6, width: "100%", boxSizing: "border-box" }}
+            />
+            <div className="inline-row" style={{ marginBottom: 6, gap: 4 }}>
+              <select
+                className="setup-select"
+                value={editType}
+                onChange={(e) => setEditType(e.target.value)}
+                style={{ width: 90 }}
+              >
+                <option value="github">github</option>
+                <option value="local">local</option>
+                <option value="git">git</option>
+              </select>
+              <input
+                className="setup-input mono"
+                value={editSource}
+                onChange={(e) => { setEditSource(e.target.value); setEditError(null); }}
+                placeholder={editType === "github" ? "owner/repo" : editType === "local" ? "/path/to/skill" : "https://..."}
+                style={{ flex: 1 }}
+              />
+            </div>
+            <input
+              className="setup-input"
+              value={editSkills}
+              onChange={(e) => setEditSkills(e.target.value)}
+              placeholder="Skills filter (comma-separated, optional)"
+              style={{ marginBottom: 6, width: "100%", boxSizing: "border-box" }}
+            />
+            {editType !== "local" && (
+              <div className="inline-row" style={{ gap: 4 }}>
+                <input
+                  className="setup-input mono"
+                  value={editRef}
+                  onChange={(e) => setEditRef(e.target.value)}
+                  placeholder="Branch/tag (optional)"
+                  style={{ flex: 1 }}
+                />
+                <input
+                  className="setup-input mono"
+                  value={editSubpath}
+                  onChange={(e) => setEditSubpath(e.target.value)}
+                  placeholder="Subpath (optional)"
+                  style={{ flex: 1 }}
+                />
+              </div>
+            )}
+            {editError && <div className="banner error" style={{ marginTop: 4 }}>{editError}</div>}
+          </div>
+          <div className="card-actions">
+            <button className="button primary small" onClick={save} disabled={saving}>
+              {saving ? <Loader2 className="button-icon spinner-icon" /> : null}
+              Save
+            </button>
+            <button className="button ghost small" onClick={cancelEdit}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {entries.length === 0 && !editing && !loading && (
+        <div className="card-meta">
+          No skills configured in this directory.
+        </div>
+      )}
+
+      {entries.map((entry) => (
+        <div key={entry.name} className="card" style={{ marginBottom: 8 }}>
+          <div className="card-header">
+            <span className="card-title">{entry.name}</span>
+            <div className="card-header-pills">
+              <span className="pill accent">
+                {entry.config.sources.length} source{entry.config.sources.length !== 1 ? "s" : ""}
+              </span>
+              <button
+                className="button ghost small"
+                onClick={() => remove(entry.name)}
+                title="Remove"
+                style={{ padding: "2px 4px" }}
+              >
+                <Trash2 size={12} />
+              </button>
+            </div>
+          </div>
+          <pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
+            {formatJson(entry.config)}
+          </pre>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default SkillsTab;

frontend/packages/inspector/src/components/debug/eventUtils.ts

@@ -1,110 +0,0 @@
-import {
-  Activity,
-  AlertTriangle,
-  Brain,
-  CheckCircle,
-  FileDiff,
-  HelpCircle,
-  Info,
-  MessageSquare,
-  PauseCircle,
-  PlayCircle,
-  Shield,
-  Terminal,
-  Wrench,
-  Zap
-} from "lucide-react";
-import type { UniversalEvent } from "../../types/legacyApi";
-
-export const getEventType = (event: UniversalEvent) => event.type;
-
-export const getEventKey = (event: UniversalEvent) =>
-  event.event_id ? `id:${event.event_id}` : `seq:${event.sequence}`;
-
-export const getEventCategory = (type: string) => type.split(".")[0] ?? type;
-
-export const getEventClass = (type: string) => type.replace(/\./g, "-");
-
-export const getEventIcon = (type: string) => {
-  switch (type) {
-    // ACP session update events
-    case "acp.agent_message_chunk":
-      return MessageSquare;
-    case "acp.user_message_chunk":
-      return MessageSquare;
-    case "acp.agent_thought_chunk":
-      return Brain;
-    case "acp.tool_call":
-      return Wrench;
-    case "acp.tool_call_update":
-      return Activity;
-    case "acp.plan":
-      return FileDiff;
-    case "acp.session_info_update":
-      return Info;
-    case "acp.usage_update":
-      return Info;
-    case "acp.current_mode_update":
-      return Info;
-    case "acp.config_option_update":
-      return Info;
-    case "acp.available_commands_update":
-      return Terminal;
-
-    // Inspector lifecycle events
-    case "inspector.turn_started":
-      return PlayCircle;
-    case "inspector.turn_ended":
-      return PauseCircle;
-    case "inspector.user_message":
-      return MessageSquare;
-
-    // Session lifecycle (inspector-emitted)
-    case "session.started":
-      return PlayCircle;
-    case "session.ended":
-      return PauseCircle;
-
-    // Legacy synthetic events
-    case "turn.started":
-      return PlayCircle;
-    case "turn.ended":
-      return PauseCircle;
-    case "item.started":
-      return MessageSquare;
-    case "item.delta":
-      return Activity;
-    case "item.completed":
-      return CheckCircle;
-
-    // Approval events
-    case "question.requested":
-      return HelpCircle;
-    case "question.resolved":
-      return CheckCircle;
-    case "permission.requested":
-      return Shield;
-    case "permission.resolved":
-      return CheckCircle;
-
-    // Error events
-    case "error":
-      return AlertTriangle;
-    case "agent.unparsed":
-      return Brain;
-
-    default:
-      if (type.startsWith("acp.")) return Zap;
-      if (type.startsWith("inspector.")) return Info;
-      if (type.startsWith("item.")) return MessageSquare;
-      if (type.startsWith("session.")) return PlayCircle;
-      if (type.startsWith("error")) return AlertTriangle;
-      if (type.startsWith("agent.")) return Brain;
-      if (type.startsWith("question.")) return HelpCircle;
-      if (type.startsWith("permission.")) return Shield;
-      if (type.startsWith("file.")) return FileDiff;
-      if (type.startsWith("command.")) return Terminal;
-      if (type.startsWith("tool.")) return Wrench;
-      return Zap;
-  }
-};