ab79dac4b3
Phase 1: Data model - groups.rs (Rust structs + load/save groups.json), groups.ts (TypeScript interfaces), groups-bridge.ts (IPC adapter), workspace.svelte.ts (replaces layout store), SQLite migrations (agent_messages, project_agent_state tables, project_id column), --group CLI argument. Phase 2: Project shell layout - GlobalTabBar, ProjectGrid, ProjectBox, ProjectHeader, CommandPalette, DocsTab, ContextTab, SettingsTab, App.svelte full rewrite (no sidebar/TilingGrid). Phase 3: ClaudeSession.svelte wrapping AgentPane per-project. Phase 4: TerminalTabs.svelte with shell/SSH/agent tab types. Phase 5: TeamAgentsPanel + AgentCard for compact subagent view. Also fixes AgentPane Svelte 5 event modifier (on:click -> onclick).
100 lines
2.2 KiB
Svelte
100 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type { AgentSession } from '../../stores/agents.svelte';
|
|
|
|
interface Props {
|
|
session: AgentSession;
|
|
onclick?: () => void;
|
|
}
|
|
|
|
let { session, onclick }: Props = $props();
|
|
|
|
let statusColor = $derived(
|
|
session.status === 'running' ? 'var(--ctp-green)' :
|
|
session.status === 'done' ? 'var(--ctp-blue)' :
|
|
session.status === 'error' ? 'var(--ctp-red)' :
|
|
'var(--ctp-overlay0)'
|
|
);
|
|
|
|
let truncatedPrompt = $derived(
|
|
session.prompt.length > 60
|
|
? session.prompt.slice(0, 60) + '...'
|
|
: session.prompt
|
|
);
|
|
</script>
|
|
|
|
<div class="agent-card" role="button" tabindex="0" {onclick} onkeydown={e => e.key === 'Enter' && onclick?.()}>
|
|
<div class="card-header">
|
|
<span class="status-dot" style="background: {statusColor}"></span>
|
|
<span class="agent-status">{session.status}</span>
|
|
{#if session.costUsd > 0}
|
|
<span class="agent-cost">${session.costUsd.toFixed(4)}</span>
|
|
{/if}
|
|
</div>
|
|
<div class="card-prompt">{truncatedPrompt}</div>
|
|
{#if session.status === 'running'}
|
|
<div class="card-progress">
|
|
<span class="turns">{session.numTurns} turns</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.agent-card {
|
|
padding: 6px 8px;
|
|
background: var(--ctp-surface0);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
|
|
.agent-card:hover {
|
|
background: var(--ctp-surface1);
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-status {
|
|
font-size: 0.65rem;
|
|
color: var(--ctp-overlay1);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.agent-cost {
|
|
margin-left: auto;
|
|
font-size: 0.65rem;
|
|
color: var(--ctp-overlay0);
|
|
font-family: monospace;
|
|
}
|
|
|
|
.card-prompt {
|
|
font-size: 0.72rem;
|
|
color: var(--ctp-subtext0);
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-progress {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.turns {
|
|
font-size: 0.65rem;
|
|
color: var(--ctp-overlay0);
|
|
}
|
|
</style>
|