feat(inspector): improve session UI, skills dropdown, and visual polish (#179)

- Add delete button on ended sessions (visible on hover) - Darken ended sessions with opacity and "ended" pill badge - Sort ended sessions to bottom of list - Add token usage pill in chat header - Disable input when session ended - Add Official Skills dropdown with SDK and Rivet presets - Format session IDs shorter with full ID on hover - Add arrow icon to "Configure persistence" link - Add agent logo SVGs
2026-04-17 18:02:36 +00:00 · 2026-02-13 05:54:53 +00:00 · 2026-02-13 05:54:53 +00:00 · e134012955
commit e134012955
parent 1c381c552a
22 changed files with 2283 additions and 395 deletions
--- a/frontend/packages/inspector/src/components/debug/AgentsTab.tsx
+++ b/frontend/packages/inspector/src/components/debug/AgentsTab.tsx
@ -5,6 +5,7 @@ import type { AgentInfo } from "sandbox-agent";
 type AgentModeInfo = { id: string; name: string; description: string };
 import FeatureCoverageBadges from "../agents/FeatureCoverageBadges";
 import { emptyFeatureCoverage } from "../../types/agents";
+const MIN_REFRESH_SPIN_MS = 350;

 const AgentsTab = ({
  agents,
@ -24,6 +25,7 @@ const AgentsTab = ({
  error: string | null;
 }) => {
  const [installingAgent, setInstallingAgent] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);

  const handleInstall = async (agentId: string, reinstall: boolean) => {
    setInstallingAgent(agentId);
@ -34,16 +36,30 @@ const AgentsTab = ({
    }
  };

+  const handleRefresh = async () => {
+    if (refreshing) return;
+    const startedAt = Date.now();
+    setRefreshing(true);
+    try {
+      await Promise.resolve(onRefresh());
+    } finally {
+      const elapsedMs = Date.now() - startedAt;
+      if (elapsedMs < MIN_REFRESH_SPIN_MS) {
+        await new Promise((resolve) => window.setTimeout(resolve, MIN_REFRESH_SPIN_MS - elapsedMs));
+      }
+      setRefreshing(false);
+    }
+  };
+
  return (
    <>
      <div className="inline-row" style={{ marginBottom: 16 }}>
-        <button className="button secondary small" onClick={onRefresh} disabled={loading}>
-          <RefreshCw className="button-icon" /> Refresh
+        <button className="button secondary small" onClick={() => void handleRefresh()} disabled={loading || refreshing}>
+          <RefreshCw className={`button-icon ${loading || refreshing ? "spinner-icon" : ""}`} /> Refresh
        </button>
      </div>

      {error && <div className="banner error">{error}</div>}
-      {loading && <div className="card-meta">Loading agents...</div>}
      {!loading && agents.length === 0 && (
        <div className="card-meta">No agents reported. Click refresh to check.</div>
      )}
--- a/frontend/packages/inspector/src/components/debug/DebugPanel.tsx
+++ b/frontend/packages/inspector/src/components/debug/DebugPanel.tsx
@ -16,6 +16,8 @@ const DebugPanel = ({
  onDebugTabChange,
  events,
  onResetEvents,
+  highlightedEventId,
+  onClearHighlight,
  requestLog,
  copiedLogId,
  onClearRequestLog,
@ -33,6 +35,8 @@ const DebugPanel = ({
  onDebugTabChange: (tab: DebugTab) => void;
  events: SessionEvent[];
  onResetEvents: () => void;
+  highlightedEventId?: string | null;
+  onClearHighlight?: () => void;
  requestLog: RequestLog[];
  copiedLogId: number | null;
  onClearRequestLog: () => void;
@ -86,6 +90,8 @@ const DebugPanel = ({
          <EventsTab
            events={events}
            onClear={onResetEvents}
+            highlightedEventId={highlightedEventId}
+            onClearHighlight={onClearHighlight}
          />
        )}

--- a/frontend/packages/inspector/src/components/debug/EventsTab.tsx
+++ b/frontend/packages/inspector/src/components/debug/EventsTab.tsx
@ -28,9 +28,9 @@ import {
  Wrench,
  type LucideIcon,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { SessionEvent } from "sandbox-agent";
-import { formatJson, formatTime } from "../../utils/format";
+import { formatJson, formatShortId, formatTime } from "../../utils/format";

 type EventIconInfo = { Icon: LucideIcon; category: string };

@ -111,9 +111,13 @@ function getEventIcon(method: string, payload: Record<string, unknown>): EventIc
 const EventsTab = ({
  events,
  onClear,
+  highlightedEventId,
+  onClearHighlight,
 }: {
  events: SessionEvent[];
  onClear: () => void;
+  highlightedEventId?: string | null;
+  onClearHighlight?: () => void;
 }) => {
  const [collapsedEvents, setCollapsedEvents] = useState<Record<string, boolean>>({});
  const [copied, setCopied] = useState(false);
@ -155,6 +159,25 @@ const EventsTab = ({
    }
  }, [events.length]);

+  // Scroll to highlighted event (with delay to ensure DOM is ready after tab switch)
+  useEffect(() => {
+    if (highlightedEventId) {
+      const scrollToEvent = () => {
+        const el = document.getElementById(`event-${highlightedEventId}`);
+        if (el) {
+          el.scrollIntoView({ behavior: "smooth", block: "center" });
+          // Clear highlight after animation
+          setTimeout(() => {
+            onClearHighlight?.();
+          }, 2000);
+        }
+      };
+      // Small delay to ensure tab switch and DOM render completes
+      const timer = setTimeout(scrollToEvent, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [highlightedEventId, onClearHighlight]);
+
  const getMethod = (event: SessionEvent): string => {
    const payload = event.payload as Record<string, unknown>;
    return typeof payload.method === "string" ? payload.method : "(response)";
@ -200,8 +223,14 @@ const EventsTab = ({
            const time = formatTime(new Date(event.createdAt).toISOString());
            const senderClass = event.sender === "client" ? "client" : "agent";

+            const isHighlighted = highlightedEventId === event.id;
+
            return (
-              <div key={eventKey} className={`event-item ${isCollapsed ? "collapsed" : "expanded"}`}>
+              <div
+                key={eventKey}
+                id={`event-${event.id}`}
+                className={`event-item ${isCollapsed ? "collapsed" : "expanded"} ${isHighlighted ? "highlighted" : ""}`}
+              >
                <button
                  className="event-summary"
                  type="button"
@ -219,8 +248,8 @@ const EventsTab = ({
                      </span>
                      <span className="event-time">{time}</span>
                    </div>
-                    <div className="event-id">
-                      {event.id}
+                    <div className="event-id" title={event.id}>
+                      {formatShortId(event.id)}
                    </div>
                  </div>
                  <span className="event-chevron">
--- a/frontend/packages/inspector/src/components/debug/McpTab.tsx
+++ b/frontend/packages/inspector/src/components/debug/McpTab.tsx
@ -1,4 +1,4 @@
-import { FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, ChevronRight, FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import type { SandboxAgent } from "sandbox-agent";
 import { formatJson } from "../../utils/format";
@ -8,15 +8,25 @@ type McpEntry = {
  config: Record<string, unknown>;
 };

+const MCP_DIRECTORY_STORAGE_KEY = "sandbox-agent-inspector-mcp-directory";
+
 const McpTab = ({
  getClient,
 }: {
  getClient: () => SandboxAgent;
 }) => {
-  const [directory, setDirectory] = useState("/");
+  const [directory, setDirectory] = useState(() => {
+    if (typeof window === "undefined") return "/";
+    try {
+      return window.localStorage.getItem(MCP_DIRECTORY_STORAGE_KEY) ?? "/";
+    } catch {
+      return "/";
+    }
+  });
  const [entries, setEntries] = useState<McpEntry[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [collapsedServers, setCollapsedServers] = useState<Record<string, boolean>>({});

  // Add/edit form state
  const [editing, setEditing] = useState(false);
@ -52,6 +62,14 @@ const McpTab = ({
    loadAll(directory);
  }, [directory, loadAll]);

+  useEffect(() => {
+    try {
+      window.localStorage.setItem(MCP_DIRECTORY_STORAGE_KEY, directory);
+    } catch {
+      // Ignore storage failures.
+    }
+  }, [directory]);
+
  const startAdd = () => {
    setEditing(true);
    setEditName("");
@ -158,7 +176,7 @@ const McpTab = ({
              value={editJson}
              onChange={(e) => { setEditJson(e.target.value); setEditError(null); }}
              rows={6}
-              style={{ width: "100%", boxSizing: "border-box", fontFamily: "monospace", fontSize: 11 }}
+              style={{ width: "100%", boxSizing: "border-box", fontFamily: "monospace", fontSize: 11, resize: "vertical" }}
            />
            {editError && <div className="banner error" style={{ marginTop: 4 }}>{editError}</div>}
          </div>
@ -180,29 +198,44 @@ const McpTab = ({
        </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>
+      {entries.map((entry) => {
+        const isCollapsed = collapsedServers[entry.name] ?? true;
+        return (
+          <div key={entry.name} className="card" style={{ marginBottom: 8 }}>
+            <div className="card-header">
+              <div className="inline-row" style={{ gap: 6 }}>
+                <button
+                  className="button ghost small"
+                  onClick={() => setCollapsedServers((prev) => ({ ...prev, [entry.name]: !(prev[entry.name] ?? true) }))}
+                  title={isCollapsed ? "Expand" : "Collapse"}
+                  style={{ padding: "2px 4px" }}
+                >
+                  {isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+                </button>
+                <span className="card-title">{entry.name}</span>
+              </div>
+              <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>
+            {!isCollapsed && (
+              <pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
+                {formatJson(entry.config)}
+              </pre>
+            )}
          </div>
-          <pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
-            {formatJson(entry.config)}
-          </pre>
-        </div>
-      ))}
+        );
+      })}
    </>
  );
 };
--- a/frontend/packages/inspector/src/components/debug/SkillsTab.tsx
+++ b/frontend/packages/inspector/src/components/debug/SkillsTab.tsx
@ -1,4 +1,4 @@
-import { FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, ChevronRight, FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import type { SandboxAgent } from "sandbox-agent";
 import { formatJson } from "../../utils/format";
@ -8,15 +8,49 @@ type SkillEntry = {
  config: { sources: Array<{ source: string; type: string; ref?: string | null; subpath?: string | null; skills?: string[] | null }> };
 };

+const SKILLS_DIRECTORY_STORAGE_KEY = "sandbox-agent-inspector-skills-directory";
+
 const SkillsTab = ({
  getClient,
 }: {
  getClient: () => SandboxAgent;
 }) => {
-  const [directory, setDirectory] = useState("/");
+  const officialSkills = [
+    {
+      name: "Sandbox Agent SDK",
+      skillId: "sandbox-agent",
+      source: "rivet-dev/skills",
+      summary: "Skills bundle for fast Sandbox Agent SDK setup and consistent workflows.",
+    },
+    {
+      name: "Rivet",
+      skillId: "rivet",
+      source: "rivet-dev/skills",
+      summary: "Open-source platform for building, deploying, and scaling AI agents.",
+      features: [
+        "Session Persistence",
+        "Resumable Sessions",
+        "Multi-Agent Support",
+        "Realtime Events",
+        "Tool Call Visibility",
+      ],
+    },
+  ];
+
+  const [directory, setDirectory] = useState(() => {
+    if (typeof window === "undefined") return "/";
+    try {
+      return window.localStorage.getItem(SKILLS_DIRECTORY_STORAGE_KEY) ?? "/";
+    } catch {
+      return "/";
+    }
+  });
  const [entries, setEntries] = useState<SkillEntry[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [showSdkSkills, setShowSdkSkills] = useState(false);
+  const [collapsedSkills, setCollapsedSkills] = useState<Record<string, boolean>>({});

  // Add form state
  const [editing, setEditing] = useState(false);
@ -56,6 +90,14 @@ const SkillsTab = ({
    loadAll(directory);
  }, [directory, loadAll]);

+  useEffect(() => {
+    try {
+      window.localStorage.setItem(SKILLS_DIRECTORY_STORAGE_KEY, directory);
+    } catch {
+      // Ignore storage failures.
+    }
+  }, [directory]);
+
  const startAdd = () => {
    setEditing(true);
    setEditName("");
@ -128,11 +170,66 @@ const SkillsTab = ({
    }
  };

+  const fallbackCopy = (text: string) => {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+  };
+
+  const copyText = async (id: string, text: string) => {
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        fallbackCopy(text);
+      }
+      setCopiedId(id);
+      window.setTimeout(() => {
+        setCopiedId((current) => (current === id ? null : current));
+      }, 1800);
+    } catch {
+      setError("Failed to copy snippet");
+    }
+  };
+
+  const applySkillPreset = (skill: typeof officialSkills[0]) => {
+    setEditing(true);
+    setEditName(skill.skillId);
+    setEditSource(skill.source);
+    setEditType("github");
+    setEditRef("");
+    setEditSubpath("");
+    setEditSkills(skill.skillId);
+    setEditError(null);
+    setShowSdkSkills(false);
+  };
+
+  const copySkillToInput = async (skillId: string) => {
+    const skill = officialSkills.find((s) => s.skillId === skillId);
+    if (skill) {
+      applySkillPreset(skill);
+      await copyText(`skill-input-${skillId}`, skillId);
+    }
+  };
+
  return (
    <>
      <div className="inline-row" style={{ marginBottom: 12, justifyContent: "space-between" }}>
        <span className="card-meta">Skills Configuration</span>
-        <div className="inline-row">
+        <div className="inline-row" style={{ gap: 6 }}>
+          <button
+            className="button secondary small"
+            onClick={() => setShowSdkSkills((prev) => !prev)}
+            title="Toggle official skills list"
+          >
+            {showSdkSkills ? <ChevronDown className="button-icon" style={{ width: 12, height: 12 }} /> : <ChevronRight className="button-icon" style={{ width: 12, height: 12 }} />}
+            Official Skills
+          </button>
          {!editing && (
            <button className="button secondary small" onClick={startAdd}>
              <Plus className="button-icon" style={{ width: 12, height: 12 }} />
@ -142,6 +239,43 @@ const SkillsTab = ({
        </div>
      </div>

+      {showSdkSkills && (
+        <div className="card" style={{ marginBottom: 12 }}>
+          <div className="card-meta" style={{ marginBottom: 8 }}>
+            Pick a skill to auto-fill the form.
+          </div>
+          {officialSkills.map((skill) => (
+            <div
+              key={skill.name}
+              style={{
+                border: "1px solid var(--border)",
+                borderRadius: 6,
+                padding: "8px 10px",
+                background: "var(--surface-2)",
+                marginBottom: 6,
+              }}
+            >
+              <div className="inline-row" style={{ justifyContent: "space-between", gap: 8, marginBottom: 4 }}>
+                <div style={{ fontWeight: 500, fontSize: 12 }}>{skill.name}</div>
+                <button className="button ghost small" onClick={() => void copySkillToInput(skill.skillId)}>
+                  {copiedId === `skill-input-${skill.skillId}` ? "Filled" : "Use"}
+                </button>
+              </div>
+              <div className="card-meta" style={{ fontSize: 10, marginBottom: skill.features ? 6 : 0 }}>{skill.summary}</div>
+              {skill.features && (
+                <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
+                  {skill.features.map((feature) => (
+                    <span key={feature} className="pill accent" style={{ fontSize: 9 }}>
+                      {feature}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
      <div className="inline-row" style={{ marginBottom: 12, gap: 6 }}>
        <FolderOpen size={14} className="muted" style={{ flexShrink: 0 }} />
        <input
@ -233,29 +367,44 @@ const SkillsTab = ({
        </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>
+      {entries.map((entry) => {
+        const isCollapsed = collapsedSkills[entry.name] ?? true;
+        return (
+          <div key={entry.name} className="card" style={{ marginBottom: 8 }}>
+            <div className="card-header">
+              <div className="inline-row" style={{ gap: 6 }}>
+                <button
+                  className="button ghost small"
+                  onClick={() => setCollapsedSkills((prev) => ({ ...prev, [entry.name]: !(prev[entry.name] ?? true) }))}
+                  title={isCollapsed ? "Expand" : "Collapse"}
+                  style={{ padding: "2px 4px" }}
+                >
+                  {isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+                </button>
+                <span className="card-title">{entry.name}</span>
+              </div>
+              <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>
+            {!isCollapsed && (
+              <pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
+                {formatJson(entry.config)}
+              </pre>
+            )}
          </div>
-          <pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
-            {formatJson(entry.config)}
-          </pre>
-        </div>
-      ))}
+        );
+      })}
    </>
  );
 };