Skip to content

Commit 0212f81

Browse files
author
Immanuel Simatupang
committed
fix(ui): integrate agent panel with live runs and add Chat mode
- RightSidebar now displays real-time agent runs from useAgentStore - Added 'chat' as default agent type for normal conversations - Orchestrator/Planner available for complex multi-agent tasks - Agent panel shows status icons (running/completed/failed) and tool progress - Fixed TypeScript deprecation warning in tsconfig.json Fixes: agent panel showing 'No agents running' despite active agents Fixes: confusing default agent selection (orchestrator → chat)
1 parent e32a9a9 commit 0212f81

6 files changed

Lines changed: 61 additions & 11 deletions

File tree

‎src/components/layout/AppShell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -434,7 +434,7 @@ export const AppShell: React.FC = () => {
434434

435435
const { sessionId: currentSessionId, projectPath } = ctx;
436436

437-
if (selectedAgentType === 'orchestrator' || selectedAgentType === 'planner') {
437+
if (selectedAgentType !== 'chat') {
438438
const userMsg: Message = {
439439
id: crypto.randomUUID(),
440440
sessionId: currentSessionId,

‎src/components/layout/RightSidebar.tsx‎

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React, { useState } from 'react';
2-
import { Robot, Code, ChartBar, TerminalWindow, Cpu, Books, SidebarSimple } from '@phosphor-icons/react';
2+
import { Robot, Code, ChartBar, TerminalWindow, Cpu, Books, SidebarSimple, CircleNotch, CheckCircle, XCircle } from '@phosphor-icons/react';
33
import { cn } from '@/lib/utils';
44
import { useUIStore } from '@/stores/useUIStore';
5+
import { useAgentStore } from '@/stores/useAgentStore';
6+
import { AGENT_LABELS } from '@/types';
57

68
type Tab = 'agents' | 'skills' | 'metrics';
79

810
export const RightSidebar: React.FC = () => {
911
const [activeTab, setActiveTab] = useState<Tab>('agents');
1012
const toggleRightSidebar = useUIStore((s) => s.toggleRightSidebar);
13+
const agentRuns = useAgentStore((s) => s.agentRuns);
1114

1215
const tabs = [
1316
{ id: 'agents' as Tab, icon: Robot, label: 'Agents' },
@@ -52,13 +55,54 @@ export const RightSidebar: React.FC = () => {
5255
<Cpu size={14} weight="duotone" />
5356
Active Agents
5457
</h3>
55-
<div className="p-4 rounded-xl border border-[var(--border)] bg-[var(--surface-2)]/50 text-center space-y-2">
56-
<div className="w-10 h-10 rounded-full bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center mx-auto">
57-
<TerminalWindow size={20} weight="duotone" className="text-[var(--text)]" />
58+
{agentRuns.length === 0 ? (
59+
<div className="p-4 rounded-xl border border-[var(--border)] bg-[var(--surface-2)]/50 text-center space-y-2">
60+
<div className="w-10 h-10 rounded-full bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center mx-auto">
61+
<TerminalWindow size={20} weight="duotone" className="text-[var(--text)]" />
62+
</div>
63+
<p className="text-xs font-medium">No agents running</p>
64+
<p className="text-[10px] text-[var(--text-muted)]">Spawn an agent from the chat to see progress here.</p>
5865
</div>
59-
<p className="text-xs font-medium">No agents running</p>
60-
<p className="text-[10px] text-[var(--text-muted)]">Spawn an agent from the chat to see progress here.</p>
61-
</div>
66+
) : (
67+
<div className="space-y-2">
68+
{agentRuns.map((run) => (
69+
<div
70+
key={run.id}
71+
className="p-3 rounded-lg border border-[var(--border)] bg-[var(--surface-2)]/30 space-y-2"
72+
>
73+
<div className="flex items-center justify-between">
74+
<div className="flex items-center gap-2">
75+
{run.status === 'running' && (
76+
<CircleNotch size={14} weight="bold" className="text-[var(--accent)] animate-spin" />
77+
)}
78+
{run.status === 'completed' && (
79+
<CheckCircle size={14} weight="fill" className="text-green-500" />
80+
)}
81+
{run.status === 'failed' && (
82+
<XCircle size={14} weight="fill" className="text-red-500" />
83+
)}
84+
<span className="text-xs font-medium text-[var(--text)]">
85+
{AGENT_LABELS[run.agentType as keyof typeof AGENT_LABELS] || run.agentType}
86+
</span>
87+
</div>
88+
<span className="text-[10px] text-[var(--text-subtle)] uppercase tracking-wider">
89+
{run.status}
90+
</span>
91+
</div>
92+
{run.toolCalls.length > 0 && (
93+
<div className="text-[10px] text-[var(--text-muted)]">
94+
{run.toolCalls.filter(tc => tc.status === 'completed').length}/{run.toolCalls.length} tools completed
95+
</div>
96+
)}
97+
{run.streamingText && run.status === 'running' && (
98+
<div className="text-[10px] text-[var(--text-muted)] truncate">
99+
{run.streamingText.slice(0, 60)}...
100+
</div>
101+
)}
102+
</div>
103+
))}
104+
</div>
105+
)}
62106
</div>
63107
)}
64108

‎src/components/settings/AgentsTab.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useAgentStore } from '@/stores/useAgentStore';
55
import { invoke } from '@tauri-apps/api/core';
66
import { cn } from '@/lib/utils';
77
import {
8+
ChatCircle,
89
Robot,
910
TreeStructure,
1011
Code,
@@ -19,6 +20,7 @@ import {
1920
} from '@phosphor-icons/react';
2021

2122
const AGENT_TYPES: AgentType[] = [
23+
'chat',
2224
'orchestrator',
2325
'planner',
2426
'coder_fe',
@@ -33,6 +35,7 @@ const AGENT_TYPES: AgentType[] = [
3335
];
3436

3537
const AGENT_ICONS: Record<AgentType, React.ElementType> = {
38+
chat: ChatCircle,
3639
orchestrator: Robot,
3740
planner: TreeStructure,
3841
coder_fe: Code,
@@ -49,7 +52,7 @@ const AGENT_ICONS: Record<AgentType, React.ElementType> = {
4952
export function AgentsTab() {
5053
const { providers } = useSettingsStore();
5154
const { agentConfigs, setAgentConfigs, upsertAgentConfig } = useAgentStore();
52-
const [selectedAgent, setSelectedAgent] = useState<AgentType>('orchestrator');
55+
const [selectedAgent, setSelectedAgent] = useState<AgentType>('chat');
5356
const [loading, setLoading] = useState(false);
5457
const [models, setModels] = useState<string[]>([]);
5558
const [localConfig, setLocalConfig] = useState<{ providerId: string | null; modelId: string | null }>({

‎src/stores/useAgentStore.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface AgentState {
2424
export const useAgentStore = create<AgentState>((set) => ({
2525
agentRuns: [],
2626
agentConfigs: [],
27-
selectedAgentType: 'orchestrator',
27+
selectedAgentType: 'chat',
2828
pendingPermission: null,
2929

3030
setAgentRuns: (runs) => set({ agentRuns: runs }),

‎src/types/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export interface AgentRun {
6464
}
6565

6666
export type AgentType =
67+
| 'chat'
6768
| 'orchestrator'
6869
| 'planner'
6970
| 'coder_fe'
@@ -76,9 +77,10 @@ export type AgentType =
7677
| 'researcher'
7778
| 'librarian';
7879

79-
export const SELECTABLE_AGENTS: AgentType[] = ['orchestrator', 'planner'];
80+
export const SELECTABLE_AGENTS: AgentType[] = ['chat', 'orchestrator', 'planner'];
8081

8182
export const AGENT_LABELS: Record<AgentType, string> = {
83+
chat: 'Chat',
8284
orchestrator: 'Orchestrator',
8385
planner: 'Planner',
8486
coder_fe: 'Coder FE',

‎tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"lib": ["ES2020", "DOM", "DOM.Iterable"],
66
"module": "ESNext",
77
"skipLibCheck": true,
8+
"ignoreDeprecations": "5.0",
89
"baseUrl": ".",
910
"paths": {
1011
"@/*": ["./src/*"]

0 commit comments

Comments
 (0)