feat(inspector): improve contrast and add collapsible debug panel (#182)

frontend/packages/inspector/src/App.tsx

@@ -288,6 +288,7 @@ export default function App() {
 
   const [debugTab, setDebugTab] = useState<DebugTab>("events");
   const [highlightedEventId, setHighlightedEventId] = useState<string | null>(null);
+  const [debugPanelCollapsed, setDebugPanelCollapsed] = useState(false);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -1614,7 +1615,7 @@ export default function App() {
         </div>
       </header>
 
-      <main className="main-layout">
+      <main className={`main-layout ${debugPanelCollapsed ? "debug-collapsed" : ""}`}>
         <SessionSidebar
           sessions={sessions}
           selectedSessionId={sessionId}
@@ -1704,6 +1705,8 @@ export default function App() {
           agentsLoading={agentsLoading}
           agentsError={agentsError}
           getClient={getClient}
+          collapsed={debugPanelCollapsed}
+          onToggleCollapse={() => setDebugPanelCollapsed(!debugPanelCollapsed)}
         />
       </main>
       {toastStack}

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

@@ -1,4 +1,4 @@
-import { Cloud, PlayCircle, Server, Terminal, Wrench } from "lucide-react";
+import { ChevronLeft, ChevronRight, Cloud, PlayCircle, Server, Terminal, Wrench } from "lucide-react";
 import type { AgentInfo, SandboxAgent, SessionEvent } from "sandbox-agent";
 
 type AgentModeInfo = { id: string; name: string; description: string };
@@ -30,6 +30,8 @@ const DebugPanel = ({
   agentsLoading,
   agentsError,
   getClient,
+  collapsed,
+  onToggleCollapse,
 }: {
   debugTab: DebugTab;
   onDebugTabChange: (tab: DebugTab) => void;
@@ -49,10 +51,19 @@ const DebugPanel = ({
   agentsLoading: boolean;
   agentsError: string | null;
   getClient: () => SandboxAgent;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
 }) => {
   return (
-    <div className="debug-panel">
+    <div className={`debug-panel ${collapsed ? "collapsed" : ""}`}>
       <div className="debug-tabs">
+        <button
+          className="debug-collapse-btn"
+          onClick={onToggleCollapse}
+          title={collapsed ? "Expand panel" : "Collapse panel"}
+        >
+          {collapsed ? <ChevronLeft size={14} /> : <ChevronRight size={14} />}
+        </button>
         <button className={`debug-tab ${debugTab === "events" ? "active" : ""}`} onClick={() => onDebugTabChange("events")}>
           <PlayCircle className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
           Events