feat: Electrobun Svelte+WGPU prototype (Dawn GPU confirmed on Linux)

- Svelte 5 frontend with Catppuccin Mocha theme, 2 project cards - Electrobun v1.16.0 with bundleWGPU: true (Dawn on Linux x64) - WebKitGTK webview + WGPU surface coexistence confirmed - CPU: 6.5% idle (CSS animation + WebKitGTK overhead) - Port 9760 for dev server (project convention)
2026-03-20 01:25:41 +01:00 · 2026-03-20 01:25:41 +01:00 · cfc135ffaf
commit cfc135ffaf
parent 1f20fc460e
29 changed files with 1106 additions and 1020 deletions
--- a/ui-electrobun/src/mainview/App.svelte
+++ b/ui-electrobun/src/mainview/App.svelte
@ -0,0 +1,239 @@
+<script lang="ts">
+  // ── Types ────────────────────────────────────────────────────
+  type AgentStatus = 'running' | 'idle' | 'stalled';
+  type MsgRole = 'user' | 'assistant' | 'tool-call' | 'tool-result';
+  type TabId = 'model' | 'docs' | 'files';
+
+  interface AgentMessage {
+    id: number;
+    role: MsgRole;
+    content: string;
+  }
+
+  interface Project {
+    id: string;
+    name: string;
+    cwd: string;
+    accent: string;
+    status: AgentStatus;
+    costUsd: number;
+    tokens: number;
+    messages: AgentMessage[];
+  }
+
+  // ── Demo data ────────────────────────────────────────────────
+  const PROJECTS: Project[] = [
+    {
+      id: 'p1',
+      name: 'agent-orchestrator',
+      cwd: '~/code/ai/agent-orchestrator',
+      accent: 'var(--ctp-mauve)',
+      status: 'running',
+      costUsd: 0.034,
+      tokens: 18420,
+      messages: [
+        { id: 1, role: 'user',        content: 'Add a wake scheduler for Manager agents that wakes them when review queue depth > 3.' },
+        { id: 2, role: 'assistant',   content: 'Reading existing wake-scheduler.svelte.ts to understand the 3-strategy pattern...' },
+        { id: 3, role: 'tool-call',   content: 'Read("src/lib/stores/wake-scheduler.svelte.ts")' },
+        { id: 4, role: 'tool-result', content: '// 312 lines\nexport type WakeStrategy = "persistent" | "on-demand" | "smart";\n...' },
+        { id: 5, role: 'assistant',   content: 'Found the WakeSignal enum. I\'ll add ReviewBacklog(0.6) and hook into bttask polling. Writing wake-scorer.ts update now.' },
+        { id: 6, role: 'tool-call',   content: 'Edit("src/lib/utils/wake-scorer.ts", old="// signals", new="// signals\n  ReviewBacklog = 0.6,")' },
+        { id: 7, role: 'assistant',   content: 'Done. ReviewBacklog signal added at priority 0.6 (between TaskQueuePressure 0.7 and PeriodicFloor 0.1). Run `npm test` to verify 24 scorer tests still pass.' },
+      ],
+    },
+    {
+      id: 'p2',
+      name: 'quanta-discord-bot',
+      cwd: '~/code/quanta/discord-bot',
+      accent: 'var(--ctp-sapphire)',
+      status: 'idle',
+      costUsd: 0.011,
+      tokens: 6830,
+      messages: [
+        { id: 1, role: 'user',        content: 'Why is the QRAG MCP server returning 504s on large semantic search queries?' },
+        { id: 2, role: 'assistant',   content: 'Checking the MCP HTTP handler timeout config and Qdrant query path...' },
+        { id: 3, role: 'tool-call',   content: 'Read("src/mcp/server.ts", offset=120, limit=40)' },
+        { id: 4, role: 'tool-result', content: 'const QUERY_TIMEOUT_MS = 5000; // default\n...' },
+        { id: 5, role: 'assistant',   content: 'Found it. The MCP handler has a hardcoded 5s timeout but Qdrant HNSW search on 500k vectors takes 6–9s at ef=256. Two options:\n1. Raise timeout to 15s (quick fix)\n2. Lower ef to 128 for faster approximate search (~3s, slight recall drop)\n\nRecommend option 2 for latency-sensitive bot responses.' },
+        { id: 6, role: 'user',        content: 'Go with option 2.' },
+        { id: 7, role: 'assistant',   content: 'Updated `ef_searching: 128` in qdrant-config.ts and raised timeout to 8s as safety margin. Restarted service on port 9320.' },
+      ],
+    },
+  ];
+
+  // ── Reactive state ───────────────────────────────────────────
+  let activeTab = $state<Record<string, TabId>>({ p1: 'model', p2: 'model' });
+  let settingsOpen = $state(false);
+
+  // ── Derived status bar aggregates ───────────────────────────
+  let runningCount = $derived(PROJECTS.filter(p => p.status === 'running').length);
+  let idleCount    = $derived(PROJECTS.filter(p => p.status === 'idle').length);
+  let totalCost    = $derived(PROJECTS.reduce((s, p) => s + p.costUsd, 0));
+  let totalTokens  = $derived(PROJECTS.reduce((s, p) => s + p.tokens, 0));
+
+  function setTab(projectId: string, tab: TabId) {
+    activeTab = { ...activeTab, [projectId]: tab };
+  }
+
+  function fmtTokens(n: number): string {
+    return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+  }
+
+  function fmtCost(n: number): string {
+    return `$${n.toFixed(3)}`;
+  }
+</script>
+
+<div class="app-shell">
+  <!-- ── Sidebar icon rail ──────────────────────────────────── -->
+  <aside class="sidebar" role="navigation" aria-label="Primary navigation">
+    <div class="sidebar-spacer"></div>
+    <button
+      class="sidebar-icon"
+      class:active={settingsOpen}
+      onclick={() => settingsOpen = !settingsOpen}
+      aria-label="Settings"
+      title="Settings"
+    >
+      <!-- gear icon -->
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="3"/>
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+      </svg>
+    </button>
+  </aside>
+
+  <!-- ── Main workspace ───────────────────────────────────────── -->
+  <main class="workspace">
+    <div class="project-grid">
+      {#each PROJECTS as project (project.id)}
+        <article
+          class="project-card"
+          style="--accent: {project.accent}"
+          aria-label="Project: {project.name}"
+        >
+          <!-- Project header -->
+          <header class="project-header">
+            <!-- Status dot — wgpu surface placeholder -->
+            <div class="status-dot-wrap" aria-label="Status: {project.status}">
+              <!--
+                Future: replace inner div with <electrobun-wgpu id="wgpu-surface-{project.id}">
+                for GPU-rendered animation. CSS pulse is the WebView fallback.
+              -->
+              <div class="status-dot {project.status}" role="img" aria-label="{project.status}"></div>
+            </div>
+
+            <span class="project-name">{project.name}</span>
+            <span class="project-cwd" title={project.cwd}>{project.cwd}</span>
+          </header>
+
+          <!-- Tab bar -->
+          <div class="tab-bar" role="tablist" aria-label="{project.name} tabs">
+            {#each (['model', 'docs', 'files'] as TabId[]) as tab}
+              <button
+                class="tab-btn"
+                class:active={activeTab[project.id] === tab}
+                role="tab"
+                aria-selected={activeTab[project.id] === tab}
+                aria-controls="tabpanel-{project.id}-{tab}"
+                onclick={() => setTab(project.id, tab)}
+              >
+                {tab.charAt(0).toUpperCase() + tab.slice(1)}
+              </button>
+            {/each}
+          </div>
+
+          <!-- Tab content -->
+          <div class="tab-content">
+            <!-- Model tab: agent messages -->
+            <div
+              id="tabpanel-{project.id}-model"
+              class="tab-pane"
+              class:active={activeTab[project.id] === 'model'}
+              role="tabpanel"
+              aria-label="Model"
+            >
+              {#each project.messages as msg (msg.id)}
+                <div class="msg">
+                  <span class="msg-role {msg.role.split('-')[0]}">{msg.role}</span>
+                  <div
+                    class="msg-body"
+                    class:tool-call={msg.role === 'tool-call'}
+                    class:tool-result={msg.role === 'tool-result'}
+                  >{msg.content}</div>
+                </div>
+              {/each}
+            </div>
+
+            <!-- Docs tab placeholder -->
+            <div
+              id="tabpanel-{project.id}-docs"
+              class="tab-pane"
+              class:active={activeTab[project.id] === 'docs'}
+              role="tabpanel"
+              aria-label="Docs"
+            >
+              <div class="placeholder-pane">No markdown files open</div>
+            </div>
+
+            <!-- Files tab placeholder -->
+            <div
+              id="tabpanel-{project.id}-files"
+              class="tab-pane"
+              class:active={activeTab[project.id] === 'files'}
+              role="tabpanel"
+              aria-label="Files"
+            >
+              <div class="placeholder-pane">File browser — coming soon</div>
+            </div>
+          </div>
+        </article>
+      {/each}
+    </div>
+  </main>
+</div>
+
+<!-- ── Status bar ─────────────────────────────────────────────── -->
+<footer class="status-bar" role="status" aria-live="polite" aria-label="System status">
+  {#if runningCount > 0}
+    <span class="status-segment">
+      <span class="status-dot-sm green" aria-hidden="true"></span>
+      <span class="status-value">{runningCount}</span>
+      <span>running</span>
+    </span>
+  {/if}
+  {#if idleCount > 0}
+    <span class="status-segment">
+      <span class="status-dot-sm gray" aria-hidden="true"></span>
+      <span class="status-value">{idleCount}</span>
+      <span>idle</span>
+    </span>
+  {/if}
+  <span class="status-bar-spacer"></span>
+  <span class="status-segment" title="Total tokens used">
+    <span>tokens</span>
+    <span class="status-value">{fmtTokens(totalTokens)}</span>
+  </span>
+  <span class="status-segment" title="Total session cost">
+    <span>cost</span>
+    <span class="status-value">{fmtCost(totalCost)}</span>
+  </span>
+</footer>
+
+<style>
+  /* Component-scoped overrides only — base styles live in app.css */
+  :global(body) {
+    overflow: hidden;
+  }
+
+  :global(#app) {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .app-shell {
+    flex: 1;
+    min-height: 0;
+  }
+</style>
--- a/ui-electrobun/src/mainview/app.css
+++ b/ui-electrobun/src/mainview/app.css
@ -0,0 +1,400 @@
+/* Catppuccin Mocha palette — same --ctp-* vars as Tauri app */
+:root {
+  --ctp-rosewater: #f5e0dc;
+  --ctp-flamingo:  #f2cdcd;
+  --ctp-pink:      #f5c2e7;
+  --ctp-mauve:     #cba6f7;
+  --ctp-red:       #f38ba8;
+  --ctp-maroon:    #eba0ac;
+  --ctp-peach:     #fab387;
+  --ctp-yellow:    #f9e2af;
+  --ctp-green:     #a6e3a1;
+  --ctp-teal:      #94e2d5;
+  --ctp-sky:       #89dceb;
+  --ctp-sapphire:  #74c7ec;
+  --ctp-blue:      #89b4fa;
+  --ctp-lavender:  #b4befe;
+  --ctp-text:      #cdd6f4;
+  --ctp-subtext1:  #bac2de;
+  --ctp-subtext0:  #a6adc8;
+  --ctp-overlay2:  #9399b2;
+  --ctp-overlay1:  #7f849c;
+  --ctp-overlay0:  #6c7086;
+  --ctp-surface2:  #585b70;
+  --ctp-surface1:  #45475a;
+  --ctp-surface0:  #313244;
+  --ctp-base:      #1e1e2e;
+  --ctp-mantle:    #181825;
+  --ctp-crust:     #11111b;
+
+  /* Typography */
+  --ui-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --ui-font-size: 0.875rem;
+  --term-font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
+  --term-font-size: 0.8125rem;
+
+  /* Layout */
+  --sidebar-width: 2.75rem;
+  --status-bar-height: 1.75rem;
+  --tab-bar-height: 2rem;
+  --header-height: 2.5rem;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--ctp-base);
+  color: var(--ctp-text);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  -webkit-font-smoothing: antialiased;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── App shell ─────────────────────────────────────────────── */
+.app-shell {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ── Sidebar / icon rail ───────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  background: var(--ctp-mantle);
+  border-right: 1px solid var(--ctp-surface0);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem 0;
+  gap: 0.25rem;
+}
+
+.sidebar-icon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  border: none;
+  background: transparent;
+  color: var(--ctp-overlay1);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+  padding: 0;
+}
+
+.sidebar-icon:hover {
+  background: var(--ctp-surface0);
+  color: var(--ctp-text);
+}
+
+.sidebar-icon.active {
+  background: var(--ctp-surface1);
+  color: var(--ctp-mauve);
+}
+
+.sidebar-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.sidebar-spacer {
+  flex: 1;
+}
+
+/* ── Project grid (main workspace) ────────────────────────── */
+.workspace {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.project-grid {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--ctp-crust);
+}
+
+/* ── Project card ──────────────────────────────────────────── */
+.project-card {
+  background: var(--ctp-base);
+  border: 1px solid var(--ctp-surface0);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Accent stripe on left edge */
+.project-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--accent, var(--ctp-mauve));
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.project-card {
+  position: relative;
+}
+
+/* ── Project header ────────────────────────────────────────── */
+.project-header {
+  height: var(--header-height);
+  background: var(--ctp-mantle);
+  border-bottom: 1px solid var(--ctp-surface0);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.625rem 0 0.875rem;
+  flex-shrink: 0;
+}
+
+.status-dot-wrap {
+  flex-shrink: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  position: relative;
+}
+
+/* wgpu placeholder — same dimensions as the dot, GPU surface goes here */
+#wgpu-surface,
+.wgpu-surface {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--dot-color, var(--ctp-overlay0));
+}
+
+/* CSS fallback pulsing dot (compositor-driven, ~0% CPU) */
+.status-dot {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--dot-color, var(--ctp-overlay0));
+}
+
+.status-dot.running {
+  --dot-color: var(--ctp-green);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+.status-dot.idle {
+  --dot-color: var(--ctp-overlay1);
+}
+
+.status-dot.stalled {
+  --dot-color: var(--ctp-peach);
+  animation: pulse-dot 1.4s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.55; transform: scale(0.85); }
+}
+
+.project-name {
+  font-weight: 600;
+  color: var(--ctp-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.project-cwd {
+  font-size: 0.75rem;
+  color: var(--ctp-subtext0);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  max-width: 10rem;
+  flex-shrink: 0;
+}
+
+/* ── Tab bar ───────────────────────────────────────────────── */
+.tab-bar {
+  height: var(--tab-bar-height);
+  background: var(--ctp-mantle);
+  border-bottom: 1px solid var(--ctp-surface0);
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  padding: 0 0.25rem;
+  gap: 0.125rem;
+}
+
+.tab-btn {
+  padding: 0 0.75rem;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--ctp-subtext0);
+  font-family: var(--ui-font-family);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.12s, border-color 0.12s;
+  margin-bottom: -1px;
+}
+
+.tab-btn:hover {
+  color: var(--ctp-text);
+}
+
+.tab-btn.active {
+  color: var(--ctp-text);
+  border-bottom-color: var(--accent, var(--ctp-mauve));
+}
+
+/* ── Tab content area ──────────────────────────────────────── */
+.tab-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-pane {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.5rem 0.625rem;
+  display: none;
+}
+
+.tab-pane.active {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* scrollbar */
+.tab-pane::-webkit-scrollbar { width: 0.375rem; }
+.tab-pane::-webkit-scrollbar-track { background: transparent; }
+.tab-pane::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 0.25rem; }
+
+/* ── Agent messages ────────────────────────────────────────── */
+.msg {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.msg-role {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ctp-overlay1);
+}
+
+.msg-role.user  { color: var(--ctp-blue); }
+.msg-role.assistant { color: var(--ctp-mauve); }
+.msg-role.tool  { color: var(--ctp-peach); }
+
+.msg-body {
+  background: var(--ctp-surface0);
+  border-radius: 0.3125rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--ctp-text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.msg-body.tool-call {
+  background: color-mix(in srgb, var(--ctp-peach) 8%, var(--ctp-surface0));
+  border-left: 2px solid var(--ctp-peach);
+  font-family: var(--term-font-family);
+  font-size: 0.75rem;
+}
+
+.msg-body.tool-result {
+  background: color-mix(in srgb, var(--ctp-teal) 6%, var(--ctp-surface0));
+  border-left: 2px solid var(--ctp-teal);
+  font-family: var(--term-font-family);
+  font-size: 0.75rem;
+  color: var(--ctp-subtext1);
+}
+
+/* ── Docs / Files placeholder ──────────────────────────────── */
+.placeholder-pane {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ctp-overlay0);
+  font-size: 0.8125rem;
+  font-style: italic;
+}
+
+/* ── Status bar ────────────────────────────────────────────── */
+.status-bar {
+  height: var(--status-bar-height);
+  background: var(--ctp-crust);
+  border-top: 1px solid var(--ctp-surface0);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.75rem;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--ctp-subtext0);
+}
+
+.status-segment {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.status-dot-sm {
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot-sm.green  { background: var(--ctp-green); }
+.status-dot-sm.gray   { background: var(--ctp-overlay0); }
+.status-dot-sm.orange { background: var(--ctp-peach); }
+
+.status-bar-spacer { flex: 1; }
+
+.status-value {
+  color: var(--ctp-text);
+  font-weight: 500;
+}
--- a/ui-electrobun/src/mainview/index.html
+++ b/ui-electrobun/src/mainview/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>
--- a/ui-electrobun/src/mainview/main.ts
+++ b/ui-electrobun/src/mainview/main.ts
@ -0,0 +1,9 @@
+import "./app.css";
+import App from "./App.svelte";
+import { mount } from "svelte";
+
+const app = mount(App, {
+	target: document.getElementById("app")!,
+});
+
+export default app;