feat: add turn streaming and inspector updates

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

@@ -8,23 +8,31 @@ const AgentsTab = ({
   defaultAgents,
   modesByAgent,
   onRefresh,
-  onInstall
+  onInstall,
+  loading,
+  error
 }: {
   agents: AgentInfo[];
   defaultAgents: string[];
   modesByAgent: Record<string, AgentModeInfo[]>;
   onRefresh: () => void;
   onInstall: (agentId: string, reinstall: boolean) => void;
+  loading: boolean;
+  error: string | null;
 }) => {
   return (
     <>
       <div className="inline-row" style={{ marginBottom: 16 }}>
-        <button className="button secondary small" onClick={onRefresh}>
+        <button className="button secondary small" onClick={onRefresh} disabled={loading}>
           <RefreshCw className="button-icon" /> Refresh
         </button>
       </div>
 
-      {agents.length === 0 && <div className="card-meta">No agents reported. Click refresh to check.</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>
+      )}
 
       {(agents.length
         ? agents

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

@@ -14,6 +14,8 @@ const DebugPanel = ({
   offset,
   onFetchEvents,
   onResetEvents,
+  eventsLoading,
+  eventsError,
   requestLog,
   copiedLogId,
   onClearRequestLog,
@@ -22,7 +24,9 @@ const DebugPanel = ({
   defaultAgents,
   modesByAgent,
   onRefreshAgents,
-  onInstallAgent
+  onInstallAgent,
+  agentsLoading,
+  agentsError
 }: {
   debugTab: DebugTab;
   onDebugTabChange: (tab: DebugTab) => void;
@@ -30,6 +34,8 @@ const DebugPanel = ({
   offset: number;
   onFetchEvents: () => void;
   onResetEvents: () => void;
+  eventsLoading: boolean;
+  eventsError: string | null;
   requestLog: RequestLog[];
   copiedLogId: number | null;
   onClearRequestLog: () => void;
@@ -39,6 +45,8 @@ const DebugPanel = ({
   modesByAgent: Record<string, AgentModeInfo[]>;
   onRefreshAgents: () => void;
   onInstallAgent: (agentId: string, reinstall: boolean) => void;
+  agentsLoading: boolean;
+  agentsError: string | null;
 }) => {
   return (
     <div className="debug-panel">
@@ -69,7 +77,14 @@ const DebugPanel = ({
         )}
 
         {debugTab === "events" && (
-          <EventsTab events={events} offset={offset} onFetch={onFetchEvents} onClear={onResetEvents} />
+          <EventsTab
+            events={events}
+            offset={offset}
+            onFetch={onFetchEvents}
+            onClear={onResetEvents}
+            loading={eventsLoading}
+            error={eventsError}
+          />
         )}
 
         {debugTab === "agents" && (
@@ -79,6 +94,8 @@ const DebugPanel = ({
             modesByAgent={modesByAgent}
             onRefresh={onRefreshAgents}
             onInstall={onInstallAgent}
+            loading={agentsLoading}
+            error={agentsError}
           />
         )}
       </div>

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

@@ -8,12 +8,16 @@ const EventsTab = ({
   events,
   offset,
   onFetch,
-  onClear
+  onClear,
+  loading,
+  error
 }: {
   events: UniversalEvent[];
   offset: number;
   onFetch: () => void;
   onClear: () => void;
+  loading: boolean;
+  error: string | null;
 }) => {
   const [collapsedEvents, setCollapsedEvents] = useState<Record<string, boolean>>({});
 
@@ -28,8 +32,8 @@ const EventsTab = ({
       <div className="inline-row" style={{ marginBottom: 12, justifyContent: "space-between" }}>
         <span className="card-meta">Offset: {offset}</span>
         <div className="inline-row">
-          <button className="button ghost small" onClick={onFetch}>
-            Fetch
+          <button className="button ghost small" onClick={onFetch} disabled={loading}>
+            {loading ? "Loading..." : "Fetch"}
           </button>
           <button className="button ghost small" onClick={onClear}>
             Clear
@@ -37,8 +41,12 @@ 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.</div>
+        <div className="card-meta">
+          {loading ? "Loading events..." : "No events yet. Start streaming to receive events."}
+        </div>
       ) : (
         <div className="event-list">
           {[...events].reverse().map((event) => {