fix(ui): integrate agent panel with live runs and add Chat mode

src-tauri/migrations/20260424000_provider_api_format.sql

@@ -0,0 +1,8 @@
+-- Add api_format column to providers.
+-- Values: 'openai' (default) or 'anthropic'.
+-- This lets custom/gateway providers opt into the Anthropic message format
+-- which enables prompt caching and correct content-block serialisation.
+ALTER TABLE providers ADD COLUMN api_format TEXT NOT NULL DEFAULT 'openai';
+
+-- Built-in providers that already use Anthropic format
+UPDATE providers SET api_format = 'anthropic' WHERE provider_type IN ('anthropic', 'enowxlabs');

src-tauri/src/agents/runner.rs

@@ -1071,7 +1071,10 @@ impl AgentRunner {
             "stream": true,
         });
 
-        let client = reqwest::Client::new();
+        let client = reqwest::Client::builder()
+            .timeout(std::time::Duration::from_secs(60))
+            .connect_timeout(std::time::Duration::from_secs(10))
+            .build()?;
         let mut request = client
             .post(endpoint)
             .header(CONTENT_TYPE, "application/json")
@@ -1113,7 +1116,10 @@ impl AgentRunner {
             payload["system"] = Value::String(system_prompt);
         }
 
-        let client = reqwest::Client::new();
+        let client = reqwest::Client::builder()
+            .timeout(std::time::Duration::from_secs(60))
+            .connect_timeout(std::time::Duration::from_secs(10))
+            .build()?;
         let mut request = client
             .post("https://api.anthropic.com/v1/messages")
             .header(CONTENT_TYPE, "application/json")

src-tauri/src/services/chat_service.rs

@@ -163,7 +163,10 @@ async fn send_openai_compatible(
     on_token: &Channel<String>,
     cancel_token: &CancellationToken,
 ) -> AppResult<String> {
-    let client = reqwest::Client::new();
+    let client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_secs(30))
+        .connect_timeout(std::time::Duration::from_secs(10))
+        .build()?;
     let endpoint = format!("{}/chat/completions", base_url.trim_end_matches('/'));
 
     let messages: Vec<Value> = history
@@ -231,7 +234,10 @@ async fn send_anthropic(
     on_token: &Channel<String>,
     cancel_token: &CancellationToken,
 ) -> AppResult<String> {
-    let client = reqwest::Client::new();
+    let client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_secs(30))
+        .connect_timeout(std::time::Duration::from_secs(10))
+        .build()?;
 
     let (system_msgs, chat_msgs): (Vec<_>, Vec<_>) =
         history.iter().partition(|m| m.role == "system");

src-tauri/src/services/model_service.rs

@@ -42,7 +42,10 @@ pub async fn list_models(
 
 async fn fetch_openai_models(base_url: &str, api_key: Option<&str>) -> AppResult<Vec<String>> {
     let url = format!("{}/models", base_url.trim_end_matches('/'));
-    let client = Client::new();
+    let client = Client::builder()
+        .timeout(std::time::Duration::from_secs(10))
+        .connect_timeout(std::time::Duration::from_secs(5))
+        .build()?;
     let mut req = client.get(&url);
 
     if let Some(key) = api_key {
@@ -75,7 +78,10 @@ async fn fetch_openai_models(base_url: &str, api_key: Option<&str>) -> AppResult
 }
 
 async fn fetch_anthropic_models(api_key: Option<&str>) -> AppResult<Vec<String>> {
-    let client = Client::new();
+    let client = Client::builder()
+        .timeout(std::time::Duration::from_secs(10))
+        .connect_timeout(std::time::Duration::from_secs(5))
+        .build()?;
     let mut req = client
         .get("https://api.anthropic.com/v1/models")
         .header("anthropic-version", "2023-06-01");

src/components/layout/AppShell.tsx

@@ -434,7 +434,7 @@ export const AppShell: React.FC = () => {
 
     const { sessionId: currentSessionId, projectPath } = ctx;
 
-    if (selectedAgentType === 'orchestrator' || selectedAgentType === 'planner') {
+    if (selectedAgentType !== 'chat') {
       const userMsg: Message = {
         id: crypto.randomUUID(),
         sessionId: currentSessionId,

src/components/layout/RightSidebar.tsx

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
-import { Robot, Code, ChartBar, TerminalWindow, Cpu, Books, SidebarSimple } from '@phosphor-icons/react';
+import { Robot, Code, ChartBar, TerminalWindow, Cpu, Books, SidebarSimple, CircleNotch, CheckCircle, XCircle } from '@phosphor-icons/react';
 import { cn } from '@/lib/utils';
 import { useUIStore } from '@/stores/useUIStore';
+import { useAgentStore } from '@/stores/useAgentStore';
+import { AGENT_LABELS } from '@/types';
 
 type Tab = 'agents' | 'skills' | 'metrics';
 
 export const RightSidebar: React.FC = () => {
   const [activeTab, setActiveTab] = useState<Tab>('agents');
   const toggleRightSidebar = useUIStore((s) => s.toggleRightSidebar);
+  const agentRuns = useAgentStore((s) => s.agentRuns);
 
   const tabs = [
     { id: 'agents' as Tab, icon: Robot, label: 'Agents' },
@@ -52,13 +55,54 @@ export const RightSidebar: React.FC = () => {
               <Cpu size={14} weight="duotone" />
               Active Agents
             </h3>
-            <div className="p-4 rounded-xl border border-[var(--border)] bg-[var(--surface-2)]/50 text-center space-y-2">
-              <div className="w-10 h-10 rounded-full bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center mx-auto">
-                <TerminalWindow size={20} weight="duotone" className="text-[var(--text)]" />
+            {agentRuns.length === 0 ? (
+              <div className="p-4 rounded-xl border border-[var(--border)] bg-[var(--surface-2)]/50 text-center space-y-2">
+                <div className="w-10 h-10 rounded-full bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center mx-auto">
+                  <TerminalWindow size={20} weight="duotone" className="text-[var(--text)]" />
+                </div>
+                <p className="text-xs font-medium">No agents running</p>
+                <p className="text-[10px] text-[var(--text-muted)]">Spawn an agent from the chat to see progress here.</p>
               </div>
-              <p className="text-xs font-medium">No agents running</p>
-              <p className="text-[10px] text-[var(--text-muted)]">Spawn an agent from the chat to see progress here.</p>
-            </div>
+            ) : (
+              <div className="space-y-2">
+                {agentRuns.map((run) => (
+                  <div
+                    key={run.id}
+                    className="p-3 rounded-lg border border-[var(--border)] bg-[var(--surface-2)]/30 space-y-2"
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        {run.status === 'running' && (
+                          <CircleNotch size={14} weight="bold" className="text-[var(--accent)] animate-spin" />
+                        )}
+                        {run.status === 'completed' && (
+                          <CheckCircle size={14} weight="fill" className="text-green-500" />
+                        )}
+                        {run.status === 'failed' && (
+                          <XCircle size={14} weight="fill" className="text-red-500" />
+                        )}
+                        <span className="text-xs font-medium text-[var(--text)]">
+                          {AGENT_LABELS[run.agentType as keyof typeof AGENT_LABELS] || run.agentType}
+                        </span>
+                      </div>
+                      <span className="text-[10px] text-[var(--text-subtle)] uppercase tracking-wider">
+                        {run.status}
+                      </span>
+                    </div>
+                    {run.toolCalls.length > 0 && (
+                      <div className="text-[10px] text-[var(--text-muted)]">
+                        {run.toolCalls.filter(tc => tc.status === 'completed').length}/{run.toolCalls.length} tools completed
+                      </div>
+                    )}
+                    {run.streamingText && run.status === 'running' && (
+                      <div className="text-[10px] text-[var(--text-muted)] truncate">
+                        {run.streamingText.slice(0, 60)}...
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
         )}
 

src/components/settings/AgentsTab.tsx

@@ -5,6 +5,7 @@ import { useAgentStore } from '@/stores/useAgentStore';
 import { invoke } from '@tauri-apps/api/core';
 import { cn } from '@/lib/utils';
 import {
+  ChatCircle,
   Robot,
   TreeStructure,
   Code,
@@ -19,6 +20,7 @@ import {
 } from '@phosphor-icons/react';
 
 const AGENT_TYPES: AgentType[] = [
+  'chat',
   'orchestrator',
   'planner',
   'coder_fe',
@@ -33,6 +35,7 @@ const AGENT_TYPES: AgentType[] = [
 ];
 
 const AGENT_ICONS: Record<AgentType, React.ElementType> = {
+  chat: ChatCircle,
   orchestrator: Robot,
   planner: TreeStructure,
   coder_fe: Code,
@@ -49,7 +52,7 @@ const AGENT_ICONS: Record<AgentType, React.ElementType> = {
 export function AgentsTab() {
   const { providers } = useSettingsStore();
   const { agentConfigs, setAgentConfigs, upsertAgentConfig } = useAgentStore();
-  const [selectedAgent, setSelectedAgent] = useState<AgentType>('orchestrator');
+  const [selectedAgent, setSelectedAgent] = useState<AgentType>('chat');
   const [loading, setLoading] = useState(false);
   const [models, setModels] = useState<string[]>([]);
   const [localConfig, setLocalConfig] = useState<{ providerId: string | null; modelId: string | null }>({

src/stores/useAgentStore.ts

@@ -24,7 +24,7 @@ interface AgentState {
 export const useAgentStore = create<AgentState>((set) => ({
   agentRuns: [],
   agentConfigs: [],
-  selectedAgentType: 'orchestrator',
+  selectedAgentType: 'chat',
   pendingPermission: null,
 
   setAgentRuns: (runs) => set({ agentRuns: runs }),

src/types/index.ts

@@ -64,6 +64,7 @@ export interface AgentRun {
 }
 
 export type AgentType =
+  | 'chat'
   | 'orchestrator'
   | 'planner'
   | 'coder_fe'
@@ -76,9 +77,10 @@ export type AgentType =
   | 'researcher'
   | 'librarian';
 
-export const SELECTABLE_AGENTS: AgentType[] = ['orchestrator', 'planner'];
+export const SELECTABLE_AGENTS: AgentType[] = ['chat', 'orchestrator', 'planner'];
 
 export const AGENT_LABELS: Record<AgentType, string> = {
+  chat: 'Chat',
   orchestrator: 'Orchestrator',
   planner: 'Planner',
   coder_fe: 'Coder FE',

tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "ignoreDeprecations": "5.0",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]