+ {#each $agentTree as rootNode}
+ {@render agentNode(rootNode, 0)}
{/each}
@@ -73,7 +155,8 @@
{@const selectedAgent = $agents.find((a) => a.id === $selectedAgentId)}
{#if selectedAgent}
-
Details: {typeNames[selectedAgent.type]}
+
{typeIcons[selectedAgent.type]} {typeNames[selectedAgent.type]}
+
Status:
{statusIcons[selectedAgent.status]} {selectedAgent.status}
@@ -82,6 +165,12 @@
Aufgabe:
{selectedAgent.task}
+ {#if selectedAgent.model}
+
+ Modell:
+ {selectedAgent.model}
+
+ {/if}
Gestartet:
{selectedAgent.startedAt.toLocaleTimeString('de-DE')}
@@ -90,6 +179,18 @@
Laufzeit:
{formatDuration(selectedAgent.startedAt)}
+ {#if selectedAgent.parentAgentId}
+
+ Parent:
+ selectAgent(selectedAgent.parentAgentId!)}>
+ {selectedAgent.parentAgentId.substring(0, 8)}...
+
+
+ {/if}
+
+ Tiefe:
+ {selectedAgent.depth}
+
Tool-Aufrufe ({selectedAgent.toolCalls.length})
@@ -150,13 +251,34 @@
margin-top: var(--spacing-sm);
}
- .agent-list {
+ /* Baum-Ansicht */
+ .agent-tree {
flex: 1;
overflow-y: auto;
padding: var(--spacing-sm);
}
+ .agent-node {
+ position: relative;
+ margin-left: calc(var(--depth) * 1.5rem);
+ }
+
+ /* Verbindungslinie für Subagents */
+ .tree-line {
+ position: absolute;
+ left: -1rem;
+ top: 0;
+ bottom: 50%;
+ width: 1rem;
+ border-left: 2px solid var(--bg-tertiary);
+ border-bottom: 2px solid var(--bg-tertiary);
+ border-bottom-left-radius: 4px;
+ }
+
.agent-item {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--spacing-xs);
width: 100%;
text-align: left;
padding: var(--spacing-sm) var(--spacing-md);
@@ -180,15 +302,57 @@
border-left: 3px solid var(--success);
}
+ .agent-item.is-subagent {
+ background: var(--bg-primary);
+ border-style: dashed;
+ }
+
+ .collapse-toggle {
+ padding: 2px 4px;
+ font-size: 0.625rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--text-secondary);
+ flex-shrink: 0;
+ }
+
+ .collapse-toggle:hover {
+ color: var(--text-primary);
+ }
+
+ .collapse-spacer {
+ width: 18px;
+ flex-shrink: 0;
+ }
+
+ .agent-content {
+ flex: 1;
+ min-width: 0;
+ }
+
.agent-main {
display: flex;
align-items: center;
- gap: var(--spacing-sm);
- margin-bottom: var(--spacing-xs);
+ gap: var(--spacing-xs);
+ flex-wrap: wrap;
+ }
+
+ .agent-type-icon {
+ font-size: 0.875rem;
}
.agent-type {
font-weight: 600;
+ font-size: 0.8rem;
+ }
+
+ .agent-model {
+ font-size: 0.625rem;
+ padding: 1px 4px;
+ background: var(--accent);
+ color: white;
+ border-radius: var(--radius-sm);
}
.agent-duration {
@@ -202,14 +366,27 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ margin-top: 2px;
}
- .agent-tools {
+ .agent-meta {
+ display: flex;
+ gap: var(--spacing-sm);
font-size: 0.625rem;
color: var(--text-secondary);
margin-top: var(--spacing-xs);
}
+ .agent-depth {
+ padding: 1px 4px;
+ background: var(--bg-tertiary);
+ border-radius: var(--radius-sm);
+ }
+
+ .agent-children {
+ margin-top: var(--spacing-xs);
+ }
+
/* Detail-Ansicht */
.agent-details {
padding: var(--spacing-md);
@@ -242,6 +419,15 @@
min-width: 80px;
}
+ .parent-link {
+ cursor: pointer;
+ color: var(--accent);
+ }
+
+ .parent-link:hover {
+ text-decoration: underline;
+ }
+
.tool-list {
display: flex;
flex-direction: column;
diff --git a/src/lib/stores/app.ts b/src/lib/stores/app.ts
index dd2b2ef..23a5778 100644
--- a/src/lib/stores/app.ts
+++ b/src/lib/stores/app.ts
@@ -5,11 +5,15 @@ import { writable, derived } from 'svelte/store';
// Typen
export interface Agent {
id: string;
- type: 'main' | 'explore' | 'plan' | 'bash';
+ type: 'main' | 'explore' | 'plan' | 'bash' | 'code' | 'test' | 'review';
status: 'active' | 'waiting' | 'idle' | 'stopped';
task: string;
startedAt: Date;
toolCalls: ToolCall[];
+ // Subagent-Hierarchie
+ parentAgentId?: string; // undefined = Main Agent
+ depth: number; // 0 = Main, 1 = direkter Subagent, etc.
+ model?: string; // Welches Modell nutzt dieser Agent
}
export interface ToolCall {
@@ -74,9 +78,34 @@ export const agentCount = derived(agents, ($agents) => ({
total: $agents.length,
active: $agents.filter((a) => a.status === 'active').length,
waiting: $agents.filter((a) => a.status === 'waiting').length,
- idle: $agents.filter((a) => a.status === 'idle').length
+ idle: $agents.filter((a) => a.status === 'idle').length,
+ mainAgents: $agents.filter((a) => !a.parentAgentId).length,
+ subAgents: $agents.filter((a) => a.parentAgentId).length,
}));
+// Agent-Baum Typen und Builder (muss vor agentTree Store sein)
+export interface AgentTreeNode {
+ agent: Agent;
+ children: AgentTreeNode[];
+}
+
+export function buildAgentTree(agentsList: Agent[]): AgentTreeNode[] {
+ // Nur Root-Agents (ohne Parent)
+ const roots = agentsList.filter((a) => !a.parentAgentId);
+
+ function buildNode(agent: Agent): AgentTreeNode {
+ const children = agentsList
+ .filter((a) => a.parentAgentId === agent.id)
+ .map(buildNode);
+ return { agent, children };
+ }
+
+ return roots.map(buildNode);
+}
+
+// Agent-Baum als reaktiver Store
+export const agentTree = derived(agents, ($agents) => buildAgentTree($agents));
+
// Aktionen
export function addMessage(role: Message['role'], content: string, agentId?: string) {
messages.update((msgs) => [
@@ -91,8 +120,27 @@ export function addMessage(role: Message['role'], content: string, agentId?: str
]);
}
-export function addAgent(type: Agent['type'], task: string): string {
- const id = crypto.randomUUID();
+export interface AddAgentOptions {
+ id?: string;
+ parentAgentId?: string;
+ model?: string;
+}
+
+export function addAgent(type: Agent['type'], task: string, options?: AddAgentOptions): string {
+ const id = options?.id || crypto.randomUUID();
+ const parentAgentId = options?.parentAgentId;
+
+ // Tiefe berechnen: Parent-Tiefe + 1 (oder 0 wenn kein Parent)
+ let depth = 0;
+ if (parentAgentId) {
+ agents.subscribe((ags) => {
+ const parent = ags.find((a) => a.id === parentAgentId);
+ if (parent) {
+ depth = parent.depth + 1;
+ }
+ })();
+ }
+
agents.update((ags) => [
...ags,
{
@@ -101,12 +149,30 @@ export function addAgent(type: Agent['type'], task: string): string {
status: 'active',
task,
startedAt: new Date(),
- toolCalls: []
+ toolCalls: [],
+ parentAgentId,
+ depth,
+ model: options?.model,
}
]);
return id;
}
+// Subagent hinzufügen (Kurzform)
+export function addSubAgent(
+ parentId: string,
+ type: Agent['type'],
+ task: string,
+ options?: Omit
+): string {
+ return addAgent(type, task, { ...options, parentAgentId: parentId });
+}
+
+// Alle Kinder eines Agents finden
+export function getChildAgents(parentId: string, agentsList: Agent[]): Agent[] {
+ return agentsList.filter((a) => a.parentAgentId === parentId);
+}
+
export function updateAgentStatus(id: string, status: Agent['status']) {
agents.update((ags) =>
ags.map((a) => (a.id === id ? { ...a, status } : a))
diff --git a/src/lib/stores/events.ts b/src/lib/stores/events.ts
index 7bd42d8..b2e3d56 100644
--- a/src/lib/stores/events.ts
+++ b/src/lib/stores/events.ts
@@ -11,6 +11,7 @@ import {
isProcessing,
addMessage,
addAgent,
+ addSubAgent,
updateAgentStatus,
addToolCall,
completeToolCall,
@@ -19,7 +20,8 @@ import {
sessionStats,
currentSessionId,
messageToDb,
- type Message
+ type Message,
+ type Agent
} from './app';
// Event-Typen vom Backend
@@ -28,6 +30,18 @@ interface AgentEvent {
type?: string;
task?: string;
code?: number;
+ model?: string;
+}
+
+interface SubagentEvent {
+ id: string;
+ parentAgentId: string;
+ type?: string;
+ task?: string;
+ depth?: number;
+ model?: string;
+ toolUseId?: string;
+ success?: boolean;
}
interface ToolEvent {
@@ -137,6 +151,30 @@ export async function initEventListeners(): Promise {
})
);
+ // Subagent gestartet
+ listeners.push(
+ await listen('subagent-started', (event) => {
+ const { id, parentAgentId, type, task, depth, model } = event.payload;
+ console.log('🤖 Subagent gestartet:', id, type, '(Parent:', parentAgentId, ')');
+
+ addSubAgent(
+ parentAgentId,
+ mapAgentType(type || 'explore'),
+ task || 'Subagent-Aufgabe',
+ { id, model }
+ );
+ })
+ );
+
+ // Subagent gestoppt
+ listeners.push(
+ await listen('subagent-stopped', (event) => {
+ const { id, success } = event.payload;
+ console.log('⏹️ Subagent gestoppt:', id, success ? 'OK' : 'FEHLER');
+ updateAgentStatus(id, 'stopped');
+ })
+ );
+
// Tool Start
listeners.push(
await listen('tool-start', (event) => {
@@ -241,17 +279,25 @@ export async function cleanupEventListeners(): Promise {
}
// Agent-Typ mappen
-function mapAgentType(type: string): 'main' | 'explore' | 'plan' | 'bash' {
- const typeMap: Record = {
+function mapAgentType(type: string): Agent['type'] {
+ const typeMap: Record = {
main: 'main',
'Main Agent': 'main',
Main: 'main',
explore: 'explore',
Explore: 'explore',
+ 'general-purpose': 'explore',
plan: 'plan',
Plan: 'plan',
bash: 'bash',
- Bash: 'bash'
+ Bash: 'bash',
+ code: 'code',
+ Code: 'code',
+ implement: 'code',
+ test: 'test',
+ Test: 'test',
+ review: 'review',
+ Review: 'review',
};
- return typeMap[type] || 'main';
+ return typeMap[type] || 'explore';
}