feat(v3): implement Mission Control MVP (Phases 1-5)

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).

v2/src/lib/components/Workspace/AgentCard.svelte

@@ -0,0 +1,100 @@
+<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>