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

frontend/packages/inspector/src/components/chat/ChatMessages.tsx

@@ -1,130 +1,256 @@
 import { useState } from "react";
-import { getAvatarLabel, getMessageClass } from "./messageUtils";
+import { getMessageClass } from "./messageUtils";
 import type { TimelineEntry } from "./types";
-import { AlertTriangle, Settings, ChevronRight, ChevronDown } from "lucide-react";
+import { AlertTriangle, ChevronRight, ChevronDown, Wrench, Brain, Info, ExternalLink, PlayCircle } from "lucide-react";
 
-const CollapsibleMessage = ({
-  id,
-  icon,
-  label,
-  children,
-  className = ""
+const ToolItem = ({
+  entry,
+  isLast,
+  onEventClick
 }: {
-  id: string;
-  icon: React.ReactNode;
-  label: string;
-  children: React.ReactNode;
-  className?: string;
+  entry: TimelineEntry;
+  isLast: boolean;
+  onEventClick?: (eventId: string) => void;
 }) => {
   const [expanded, setExpanded] = useState(false);
 
+  const isTool = entry.kind === "tool";
+  const isReasoning = entry.kind === "reasoning";
+  const isMeta = entry.kind === "meta";
+
+  const isComplete = isTool && (entry.toolStatus === "completed" || entry.toolStatus === "failed");
+  const isFailed = isTool && entry.toolStatus === "failed";
+  const isInProgress = isTool && entry.toolStatus === "in_progress";
+
+  let label = "";
+  let icon = <Info size={12} />;
+
+  if (isTool) {
+    const statusLabel = entry.toolStatus && entry.toolStatus !== "completed"
+      ? ` (${entry.toolStatus.replace("_", " ")})`
+      : "";
+    label = `${entry.toolName ?? "tool"}${statusLabel}`;
+    icon = <Wrench size={12} />;
+  } else if (isReasoning) {
+    label = `Reasoning${entry.reasoning?.visibility ? ` (${entry.reasoning.visibility})` : ""}`;
+    icon = <Brain size={12} />;
+  } else if (isMeta) {
+    label = entry.meta?.title ?? "Status";
+    icon = entry.meta?.severity === "error" ? <AlertTriangle size={12} /> : <Info size={12} />;
+  }
+
+  const hasContent = isTool
+    ? Boolean(entry.toolInput || entry.toolOutput)
+    : isReasoning
+      ? Boolean(entry.reasoning?.text?.trim())
+      : Boolean(entry.meta?.detail?.trim());
+  const canOpenEvent = Boolean(
+    entry.eventId &&
+    onEventClick &&
+    !(isMeta && entry.meta?.title === "Available commands update"),
+  );
+
   return (
-    <div className={`collapsible-message ${className}`}>
-      <button className="collapsible-header" onClick={() => setExpanded(!expanded)}>
-        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-        {icon}
-        <span>{label}</span>
-      </button>
-      {expanded && <div className="collapsible-content">{children}</div>}
+    <div className={`tool-item ${isLast ? "last" : ""} ${isFailed ? "failed" : ""}`}>
+      <div className="tool-item-connector">
+        <div className="tool-item-dot" />
+        {!isLast && <div className="tool-item-line" />}
+      </div>
+      <div className="tool-item-content">
+        <button
+          className={`tool-item-header ${expanded ? "expanded" : ""}`}
+          onClick={() => hasContent && setExpanded(!expanded)}
+          disabled={!hasContent}
+        >
+          <span className="tool-item-icon">{icon}</span>
+          <span className="tool-item-label">{label}</span>
+          {isInProgress && (
+            <span className="tool-item-spinner">
+              <span className="thinking-dot" />
+              <span className="thinking-dot" />
+              <span className="thinking-dot" />
+            </span>
+          )}
+          {canOpenEvent && (
+            <span
+              className="tool-item-link"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEventClick(entry.eventId!);
+              }}
+              title="View in Events"
+            >
+              <ExternalLink size={10} />
+            </span>
+          )}
+          {hasContent && (
+            <span className="tool-item-chevron">
+              {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+            </span>
+          )}
+        </button>
+        {expanded && hasContent && (
+          <div className="tool-item-body">
+            {isTool && entry.toolInput && (
+              <div className="tool-section">
+                <div className="tool-section-title">Input</div>
+                <pre className="tool-code">{entry.toolInput}</pre>
+              </div>
+            )}
+            {isTool && isComplete && entry.toolOutput && (
+              <div className="tool-section">
+                <div className="tool-section-title">Output</div>
+                <pre className="tool-code">{entry.toolOutput}</pre>
+              </div>
+            )}
+            {isReasoning && entry.reasoning?.text && (
+              <div className="tool-section">
+                <pre className="tool-code muted">{entry.reasoning.text}</pre>
+              </div>
+            )}
+            {isMeta && entry.meta?.detail && (
+              <div className="tool-section">
+                <pre className="tool-code">{entry.meta.detail}</pre>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };
 
+const ToolGroup = ({ entries, onEventClick }: { entries: TimelineEntry[]; onEventClick?: (eventId: string) => void }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  // If only one item, render it directly without macro wrapper
+  if (entries.length === 1) {
+    return (
+      <div className="tool-group-single">
+        <ToolItem entry={entries[0]} isLast={true} onEventClick={onEventClick} />
+      </div>
+    );
+  }
+
+  const totalCount = entries.length;
+  const summary = `${totalCount} Event${totalCount > 1 ? "s" : ""}`;
+
+  // Check if any are in progress
+  const hasInProgress = entries.some(e => e.kind === "tool" && e.toolStatus === "in_progress");
+  const hasFailed = entries.some(e => e.kind === "tool" && e.toolStatus === "failed");
+
+  return (
+    <div className={`tool-group-container ${hasFailed ? "failed" : ""}`}>
+      <button
+        className={`tool-group-header ${expanded ? "expanded" : ""}`}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <span className="tool-group-icon">
+          <PlayCircle size={14} />
+        </span>
+        <span className="tool-group-label">{summary}</span>
+        <span className="tool-group-chevron">
+          {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        </span>
+      </button>
+      {expanded && (
+        <div className="tool-group">
+          {entries.map((entry, idx) => (
+            <ToolItem
+              key={entry.id}
+              entry={entry}
+              isLast={idx === entries.length - 1}
+              onEventClick={onEventClick}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const agentLogos: Record<string, string> = {
+  claude: `${import.meta.env.BASE_URL}logos/claude.svg`,
+  codex: `${import.meta.env.BASE_URL}logos/openai.svg`,
+  opencode: `${import.meta.env.BASE_URL}logos/opencode.svg`,
+  amp: `${import.meta.env.BASE_URL}logos/amp.svg`,
+  pi: `${import.meta.env.BASE_URL}logos/pi.svg`,
+};
+
 const ChatMessages = ({
   entries,
   sessionError,
-  messagesEndRef
+  eventError,
+  messagesEndRef,
+  onEventClick,
+  isThinking,
+  agentId
 }: {
   entries: TimelineEntry[];
   sessionError: string | null;
+  eventError?: string | null;
   messagesEndRef: React.RefObject<HTMLDivElement>;
+  onEventClick?: (eventId: string) => void;
+  isThinking?: boolean;
+  agentId?: string;
 }) => {
+  // Group consecutive tool/reasoning/meta entries together
+  const groupedEntries: Array<{ type: "message" | "tool-group" | "divider"; entries: TimelineEntry[] }> = [];
+
+  let currentToolGroup: TimelineEntry[] = [];
+
+  const flushToolGroup = () => {
+    if (currentToolGroup.length > 0) {
+      groupedEntries.push({ type: "tool-group", entries: currentToolGroup });
+      currentToolGroup = [];
+    }
+  };
+
+  for (const entry of entries) {
+    const isStatusDivider = entry.kind === "meta" &&
+      ["Session Started", "Turn Started", "Turn Ended"].includes(entry.meta?.title ?? "");
+
+    if (isStatusDivider) {
+      flushToolGroup();
+      groupedEntries.push({ type: "divider", entries: [entry] });
+    } else if (entry.kind === "tool" || entry.kind === "reasoning" || (entry.kind === "meta" && entry.meta?.detail)) {
+      currentToolGroup.push(entry);
+    } else if (entry.kind === "meta" && !entry.meta?.detail) {
+      // Simple meta without detail - add to tool group as single item
+      currentToolGroup.push(entry);
+    } else {
+      // Regular message
+      flushToolGroup();
+      groupedEntries.push({ type: "message", entries: [entry] });
+    }
+  }
+  flushToolGroup();
+
   return (
     <div className="messages">
-      {entries.map((entry) => {
-        const messageClass = getMessageClass(entry);
-
-        if (entry.kind === "meta") {
-          const isError = entry.meta?.severity === "error";
+      {groupedEntries.map((group, idx) => {
+        if (group.type === "divider") {
+          const entry = group.entries[0];
           const title = entry.meta?.title ?? "Status";
-          const isStatusDivider = ["Session Started", "Turn Started", "Turn Ended"].includes(title);
-
-          if (isStatusDivider) {
-            return (
-              <div key={entry.id} className="status-divider">
-                <div className="status-divider-line" />
-                <span className="status-divider-text">
-                  <Settings size={12} />
-                  {title}
-                </span>
-                <div className="status-divider-line" />
-              </div>
-            );
-          }
-
           return (
-            <CollapsibleMessage
-              key={entry.id}
-              id={entry.id}
-              icon={isError ? <AlertTriangle size={14} className="error-icon" /> : <Settings size={14} className="system-icon" />}
-              label={title}
-              className={isError ? "error" : "system"}
-            >
-              {entry.meta?.detail && <div className="part-body">{entry.meta.detail}</div>}
-            </CollapsibleMessage>
-          );
-        }
-
-        if (entry.kind === "reasoning") {
-          return (
-            <div key={entry.id} className="message assistant">
-              <div className="avatar">{getAvatarLabel("assistant")}</div>
-              <div className="message-content">
-                <div className="message-meta">
-                  <span>reasoning - {entry.reasoning?.visibility ?? "public"}</span>
-                </div>
-                <div className="part-body muted">{entry.reasoning?.text ?? ""}</div>
-              </div>
+            <div key={entry.id} className="status-divider">
+              <div className="status-divider-line" />
+              <span className="status-divider-text">{title}</span>
+              <div className="status-divider-line" />
             </div>
           );
         }
 
-        if (entry.kind === "tool") {
-          const isComplete = entry.toolStatus === "completed" || entry.toolStatus === "failed";
-          const isFailed = entry.toolStatus === "failed";
-          const statusLabel = entry.toolStatus && entry.toolStatus !== "completed"
-            ? entry.toolStatus.replace("_", " ")
-            : "";
-
-          return (
-            <CollapsibleMessage
-              key={entry.id}
-              id={entry.id}
-              icon={<span className="tool-icon">T</span>}
-              label={`tool call - ${entry.toolName ?? "tool"}${statusLabel ? ` (${statusLabel})` : ""}`}
-              className={`tool${isFailed ? " error" : ""}`}
-            >
-              {entry.toolInput && <pre className="code-block">{entry.toolInput}</pre>}
-              {isComplete && entry.toolOutput && (
-                <div className="part">
-                  <div className="part-title">result</div>
-                  <pre className="code-block">{entry.toolOutput}</pre>
-                </div>
-              )}
-              {!isComplete && !entry.toolInput && (
-                <span className="thinking-indicator">
-                  <span className="thinking-dot" />
-                  <span className="thinking-dot" />
-                  <span className="thinking-dot" />
-                </span>
-              )}
-            </CollapsibleMessage>
-          );
+        if (group.type === "tool-group") {
+          return <ToolGroup key={`group-${idx}`} entries={group.entries} onEventClick={onEventClick} />;
         }
 
+        // Regular message
+        const entry = group.entries[0];
+        const messageClass = getMessageClass(entry);
+
         return (
-          <div key={entry.id} className={`message ${messageClass}`}>
-            <div className="avatar">{getAvatarLabel(messageClass)}</div>
+          <div key={entry.id} className={`message ${messageClass} no-avatar`}>
             <div className="message-content">
               {entry.text ? (
                 <div className="part-body">{entry.text}</div>
@@ -140,6 +266,23 @@ const ChatMessages = ({
         );
       })}
       {sessionError && <div className="message-error">{sessionError}</div>}
+      {eventError && <div className="message-error">{eventError}</div>}
+      {isThinking && (
+        <div className="thinking-row">
+          <div className="thinking-avatar">
+            {agentId && agentLogos[agentId] ? (
+              <img src={agentLogos[agentId]} alt="" className="thinking-avatar-img" />
+            ) : (
+              <span className="ai-label">AI</span>
+            )}
+          </div>
+          <span className="thinking-indicator">
+            <span className="thinking-dot" />
+            <span className="thinking-dot" />
+            <span className="thinking-dot" />
+          </span>
+        </div>
+      )}
       <div ref={messagesEndRef} />
     </div>
   );

frontend/packages/inspector/src/components/chat/ChatPanel.tsx

@@ -1,6 +1,7 @@
-import { CheckSquare, MessageSquare, Plus, Square, Terminal } from "lucide-react";
+import { AlertTriangle, Archive, CheckSquare, MessageSquare, Plus, Square, Terminal } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { AgentInfo } from "sandbox-agent";
+import { formatShortId } from "../../utils/format";
 
 type AgentModeInfo = { id: string; name: string; description: string };
 type AgentModelInfo = { id: string; name?: string };
@@ -9,9 +10,27 @@ import ChatInput from "./ChatInput";
 import ChatMessages from "./ChatMessages";
 import type { TimelineEntry } from "./types";
 
+const HistoryLoadingSkeleton = () => (
+  <div className="chat-loading-skeleton" aria-hidden>
+    <div className="chat-skeleton-row assistant">
+      <div className="chat-skeleton-bubble w-lg" />
+    </div>
+    <div className="chat-skeleton-row user">
+      <div className="chat-skeleton-bubble w-md" />
+    </div>
+    <div className="chat-skeleton-row assistant">
+      <div className="chat-skeleton-bubble w-xl" />
+    </div>
+    <div className="chat-skeleton-row assistant">
+      <div className="chat-skeleton-bubble w-sm" />
+    </div>
+  </div>
+);
+
 const ChatPanel = ({
   sessionId,
   transcriptEntries,
+  isLoadingHistory,
   sessionError,
   message,
   onMessageChange,
@@ -24,35 +43,53 @@ const ChatPanel = ({
   agentsError,
   messagesEndRef,
   agentLabel,
+  modelLabel,
   currentAgentVersion,
   sessionEnded,
+  sessionArchived,
   onEndSession,
+  onArchiveSession,
+  onUnarchiveSession,
   modesByAgent,
   modelsByAgent,
   defaultModelByAgent,
+  onEventClick,
+  isThinking,
+  agentId,
+  tokenUsage,
 }: {
   sessionId: string;
   transcriptEntries: TimelineEntry[];
+  isLoadingHistory?: boolean;
   sessionError: string | null;
   message: string;
   onMessageChange: (value: string) => void;
   onSendMessage: () => void;
   onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  onCreateSession: (agentId: string, config: SessionConfig) => void;
+  onCreateSession: (agentId: string, config: SessionConfig) => Promise<void>;
   onSelectAgent: (agentId: string) => Promise<void>;
   agents: AgentInfo[];
   agentsLoading: boolean;
   agentsError: string | null;
   messagesEndRef: React.RefObject<HTMLDivElement>;
   agentLabel: string;
+  modelLabel?: string | null;
   currentAgentVersion?: string | null;
   sessionEnded: boolean;
+  sessionArchived: boolean;
   onEndSession: () => void;
+  onArchiveSession: () => void;
+  onUnarchiveSession: () => void;
   modesByAgent: Record<string, AgentModeInfo[]>;
   modelsByAgent: Record<string, AgentModelInfo[]>;
   defaultModelByAgent: Record<string, string>;
+  onEventClick?: (eventId: string) => void;
+  isThinking?: boolean;
+  agentId?: string;
+  tokenUsage?: { used: number; size: number; cost?: number } | null;
 }) => {
   const [showAgentMenu, setShowAgentMenu] = useState(false);
+  const [copiedSessionId, setCopiedSessionId] = useState(false);
   const menuRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -67,21 +104,92 @@ const ChatPanel = ({
     return () => document.removeEventListener("mousedown", handler);
   }, [showAgentMenu]);
 
+  const copySessionId = async () => {
+    if (!sessionId) return;
+    const onSuccess = () => {
+      setCopiedSessionId(true);
+      window.setTimeout(() => setCopiedSessionId(false), 1200);
+    };
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(sessionId);
+        onSuccess();
+        return;
+      }
+    } catch {
+      // Fallback below for older/insecure contexts.
+    }
+
+    const textarea = document.createElement("textarea");
+    textarea.value = sessionId;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+      document.execCommand("copy");
+      onSuccess();
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  };
+
+  const handleArchiveSession = () => {
+    if (!sessionId) return;
+    onArchiveSession();
+  };
+
+  const handleUnarchiveSession = () => {
+    if (!sessionId) return;
+    onUnarchiveSession();
+  };
+
   return (
     <div className="chat-panel">
       <div className="panel-header">
         <div className="panel-header-left">
           <MessageSquare className="button-icon" />
-          <span className="panel-title">{sessionId ? "Session" : "No Session"}</span>
-          {sessionId && <span className="session-id-display">{sessionId}</span>}
+          <span className="panel-title">{sessionId ? agentLabel : "No Session"}</span>
+          {sessionId && modelLabel && (
+            <span className="header-meta-pill" title={modelLabel}>
+              {modelLabel}
+            </span>
+          )}
+          {sessionId && currentAgentVersion && (
+            <span className="header-meta-pill">v{currentAgentVersion}</span>
+          )}
+          {sessionId && (
+            <button
+              type="button"
+              className="session-id-display"
+              title={copiedSessionId ? "Copied" : `${sessionId} (click to copy)`}
+              onClick={() => void copySessionId()}
+            >
+              {copiedSessionId ? "Copied" : formatShortId(sessionId)}
+            </button>
+          )}
         </div>
         <div className="panel-header-right">
+          {sessionId && tokenUsage && (
+            <span className="token-pill">{tokenUsage.used.toLocaleString()} tokens</span>
+          )}
           {sessionId && (
             sessionEnded ? (
-              <span className="button ghost small" style={{ opacity: 0.5, cursor: "default" }} title="Session ended">
-                <CheckSquare size={12} />
-                Ended
-              </span>
+              <>
+                <span className="button ghost small session-ended-status" title="Session ended">
+                  <CheckSquare size={12} />
+                  Ended
+                </span>
+                <button
+                  type="button"
+                  className="button ghost small"
+                  onClick={sessionArchived ? handleUnarchiveSession : handleArchiveSession}
+                  title={sessionArchived ? "Unarchive session" : "Archive session"}
+                >
+                  <Archive size={12} />
+                  {sessionArchived ? "Unarchive" : "Archive"}
+                </button>
+              </>
             ) : (
               <button
                 type="button"
@@ -97,12 +205,18 @@ const ChatPanel = ({
         </div>
       </div>
 
+      {sessionError && (
+        <div className="error-banner">
+          <AlertTriangle size={14} />
+          <span>{sessionError}</span>
+        </div>
+      )}
+
       <div className="messages-container">
         {!sessionId ? (
           <div className="empty-state">
-            <MessageSquare className="empty-state-icon" />
             <div className="empty-state-title">No Session Selected</div>
-            <p className="empty-state-text">Create a new session to start chatting with an agent.</p>
+            <p className="empty-state-text no-session-subtext">Create a new session to start chatting with an agent.</p>
             <div className="empty-state-menu-wrapper" ref={menuRef}>
               <button
                 className="button primary"
@@ -126,16 +240,24 @@ const ChatPanel = ({
             </div>
           </div>
         ) : transcriptEntries.length === 0 && !sessionError ? (
-          <div className="empty-state">
-            <Terminal className="empty-state-icon" />
-            <div className="empty-state-title">Ready to Chat</div>
-            <p className="empty-state-text">Send a message to start a conversation with the agent.</p>
-          </div>
+          isLoadingHistory ? (
+            <HistoryLoadingSkeleton />
+          ) : (
+            <div className="empty-state">
+              <Terminal className="empty-state-icon" />
+              <div className="empty-state-title">Ready to Chat</div>
+              <p className="empty-state-text">Send a message to start a conversation with the agent.</p>
+            </div>
+          )
         ) : (
           <ChatMessages
             entries={transcriptEntries}
             sessionError={sessionError}
+            eventError={null}
             messagesEndRef={messagesEndRef}
+            onEventClick={onEventClick}
+            isThinking={isThinking}
+            agentId={agentId}
           />
         )}
       </div>
@@ -145,24 +267,9 @@ const ChatPanel = ({
         onMessageChange={onMessageChange}
         onSendMessage={onSendMessage}
         onKeyDown={onKeyDown}
-        placeholder={sessionId ? "Send a message..." : "Select or create a session first"}
-        disabled={!sessionId}
+        placeholder={sessionEnded ? "Session ended" : sessionId ? "Send a message..." : "Select or create a session first"}
+        disabled={!sessionId || sessionEnded}
       />
-
-      {sessionId && (
-        <div className="session-config-bar">
-          <div className="session-config-field">
-            <span className="session-config-label">Agent</span>
-            <span className="session-config-value">{agentLabel}</span>
-          </div>
-          {currentAgentVersion && (
-            <div className="session-config-field">
-              <span className="session-config-label">Version</span>
-              <span className="session-config-value">{currentAgentVersion}</span>
-            </div>
-          )}
-        </div>
-      )}
     </div>
   );
 };

frontend/packages/inspector/src/components/chat/messageUtils.tsx

@@ -1,5 +1,5 @@
 import type { TimelineEntry } from "./types";
-import { Settings, AlertTriangle, User } from "lucide-react";
+import { Settings, AlertTriangle } from "lucide-react";
 import type { ReactNode } from "react";
 
 export const getMessageClass = (entry: TimelineEntry) => {
@@ -11,7 +11,7 @@ export const getMessageClass = (entry: TimelineEntry) => {
 };
 
 export const getAvatarLabel = (messageClass: string): ReactNode => {
-  if (messageClass === "user") return <User size={14} />;
+  if (messageClass === "user") return null;
   if (messageClass === "tool") return "T";
   if (messageClass === "system") return <Settings size={14} />;
   if (messageClass === "error") return <AlertTriangle size={14} />;

frontend/packages/inspector/src/components/chat/types.ts

@@ -1,5 +1,6 @@
 export type TimelineEntry = {
   id: string;
+  eventId?: string; // Links back to the original event for navigation
   kind: "message" | "tool" | "meta" | "reasoning";
   time: string;
   // For messages: