agentgui 1.0.884 → 1.0.886

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.884",
+  "version": "1.0.886",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/scripts/capture-screenshots.mjs

@@ -22,16 +22,27 @@ const OUT = path.resolve(argMap.out || path.join(ROOT, 'docs/screenshots'));
 
 function pickChrome() {
     if (process.env.CHROME && fs.existsSync(process.env.CHROME)) return process.env.CHROME;
+    const home = process.env.USERPROFILE || process.env.HOME || '';
     const candidates = [
+        // Linux
         '/usr/bin/chromium',
         '/usr/bin/chromium-browser',
         '/usr/bin/google-chrome',
         '/usr/bin/google-chrome-stable',
         '/snap/bin/chromium',
+        // macOS
         '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+        '/Applications/Chromium.app/Contents/MacOS/Chromium',
+        // Windows — program files variants
+        'C:/Program Files/Google/Chrome/Application/chrome.exe',
+        'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe',
+        path.join(home, 'AppData/Local/Google/Chrome/Application/chrome.exe'),
+        path.join(home, 'AppData/Local/Chromium/Application/chrome.exe'),
+        // puppeteer-core bundled chromium (if installed via npm)
+        ...(() => { try { return [require('puppeteer-core').executablePath()]; } catch { return []; } })(),
     ];
-    for (const c of candidates) if (fs.existsSync(c)) return c;
-    throw new Error('No chromium binary found. Set CHROME env var or apt install chromium.');
+    for (const c of candidates) if (c && fs.existsSync(c)) return c;
+    throw new Error('No chromium binary found. Set CHROME env var, install Google Chrome, or apt install chromium.');
 }
 
 async function findFreePort() {

package/scripts/harvest-fixtures.mjs

@@ -15,9 +15,32 @@ import os from 'os';
 import crypto from 'crypto';
 import { fileURLToPath } from 'url';
 import { createRequire } from 'module';
+import { initSchema } from '../database-schema.js';
+import { migrateFromJson, migrateToACP, migrateConversationColumns } from '../database-migrations.js';
+import { migrateACPSchema, migrateBackfillMessages, migrateFTS, migrateAutoVacuum } from '../database-migrations-acp.js';
 
 const require = createRequire(import.meta.url);
-const Database = require('better-sqlite3');
+
+let Database;
+try {
+    Database = (await import('bun:sqlite')).default;
+} catch {
+    Database = require('better-sqlite3');
+}
+
+function openDb(path) {
+    try {
+        const db = new Database(path);
+        db.run('PRAGMA journal_mode = WAL');
+        db.run('PRAGMA foreign_keys = ON');
+        return db;
+    } catch {
+        const db = new Database(path);
+        db.pragma('journal_mode = WAL');
+        db.pragma('foreign_keys = ON');
+        return db;
+    }
+}
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ROOT = path.resolve(__dirname, '..');
@@ -146,35 +169,20 @@ function build() {
     fs.mkdirSync(OUT_DIR, { recursive: true });
     if (fs.existsSync(OUT_DB)) fs.unlinkSync(OUT_DB);
 
-    const db = new Database(OUT_DB);
-    db.pragma('journal_mode = WAL');
-    db.pragma('foreign_keys = ON');
-
-    // Inline the subset of the schema needed to render conversations.
-    db.exec(`
-        CREATE TABLE IF NOT EXISTS conversations (
-            id TEXT PRIMARY KEY, agentId TEXT NOT NULL, title TEXT,
-            created_at INTEGER NOT NULL, updated_at INTEGER NOT NULL,
-            status TEXT DEFAULT 'active'
-        );
-        CREATE INDEX IF NOT EXISTS idx_conversations_agent ON conversations(agentId);
-        CREATE INDEX IF NOT EXISTS idx_conversations_updated ON conversations(updated_at DESC);
-
-        CREATE TABLE IF NOT EXISTS messages (
-            id TEXT PRIMARY KEY, conversationId TEXT NOT NULL, role TEXT NOT NULL,
-            content TEXT NOT NULL, created_at INTEGER NOT NULL
-        );
-        CREATE INDEX IF NOT EXISTS idx_messages_conversation ON messages(conversationId);
-
-        CREATE TABLE IF NOT EXISTS sessions (
-            id TEXT PRIMARY KEY, conversationId TEXT NOT NULL, status TEXT NOT NULL,
-            started_at INTEGER NOT NULL, completed_at INTEGER, response TEXT, error TEXT
-        );
-        CREATE INDEX IF NOT EXISTS idx_sessions_conversation ON sessions(conversationId);
-    `);
-
-    const insConv = db.prepare(`INSERT INTO conversations (id, agentId, title, created_at, updated_at, status)
-        VALUES (?, ?, ?, ?, ?, ?)`);
+    const db = openDb(OUT_DB);
+
+    // Use the real schema pipeline — same as database.js — so fixture DB always matches production.
+    initSchema(db);
+    migrateFromJson(db, path.join(OUT_DIR, 'nonexistent.json'));
+    migrateToACP(db);
+    migrateConversationColumns(db);
+    migrateACPSchema(db);
+    migrateBackfillMessages(db);
+    migrateFTS(db);
+    migrateAutoVacuum(db);
+
+    const insConv = db.prepare(`INSERT INTO conversations (id, agentId, agentType, title, created_at, updated_at, status)
+        VALUES (?, ?, ?, ?, ?, ?, ?)`);
     const insMsg = db.prepare(`INSERT INTO messages (id, conversationId, role, content, created_at)
         VALUES (?, ?, ?, ?, ?)`);
     const insSess = db.prepare(`INSERT INTO sessions (id, conversationId, status, started_at, completed_at, response, error)
@@ -185,7 +193,7 @@ function build() {
         DEMO_TITLES.forEach((title, idx) => {
             const convId = det('conv', title);
             const ts = BASE_TS - idx * 3600 * 1000;            // newest first
-            insConv.run(convId, 'claude-code', title, ts, ts, 'active');
+            insConv.run(convId, 'claude-code', 'direct', title, ts, ts, 'active');
 
             const userText = realPrompts[idx] || synthUser(title);
             const assistantText = synthAssistant(title);

package/static/css/brand-bible.css

@@ -0,0 +1,450 @@
+:root {
+  /* Brand palette — mirrors design/colors_and_type.css exactly */
+  --paper:        #EFE9DD;
+  --ink:          #0B0B09;
+  --acid:         #B8FF00;
+  --link:         #1F4DFF;
+  --warn:         #FF3B1F;
+  --live:         #00A86B;
+
+  --green:        #247420;
+  --green-2:      #92CEAC;
+  --green-deep:   #1c5a19;
+  --green-fg:     #FFFFFF;
+  --purple:       #420247;
+  --purple-fg:    #FFFFFF;
+  --mascot:       #E84B8A;
+  --mascot-fg:    #FFFFFF;
+  --sun:          #FFD100;
+  --flame:        #FF5C1A;
+  --sky:          #3B82F6;
+
+  /* Panel surface tokens — light */
+  --panel-0:       var(--paper);
+  --panel-1:       #f6f1e7;
+  --panel-2:       #ece5d8;
+  --panel-3:       #ddd4c3;
+  --panel-hover:   #e6dece;
+  --panel-select:  #d8eed6;
+  --panel-text:    var(--ink);
+  --panel-text-2:  #4a473f;
+  --panel-text-3:  #6d675b;
+  --panel-accent:    var(--green);
+  --panel-accent-2:  var(--green-deep);
+  --panel-accent-fg: #ffffff;
+  --panel-shadow:  none;
+  --panel-shadow-top: none;
+
+  /* Semantic color aliases */
+  --color-primary: var(--green);
+  --color-primary-dark: var(--green-deep);
+  --color-bg-primary: var(--panel-0);
+  --color-bg-secondary: var(--panel-1);
+  --color-bg-raised: var(--panel-1);
+  --color-bg-hover: var(--panel-hover);
+  --color-bg-code: #f3eddf;
+  --color-code-text: var(--ink);
+  --color-code-border: var(--ink);
+  --color-thinking-bg: #efe7d5;
+  --color-text-primary: var(--panel-text);
+  --color-text-secondary: var(--panel-text-2);
+  --color-text-muted: var(--panel-text-3);
+  --color-border: var(--ink);
+  --color-success: var(--green);
+  --color-error: var(--warn);
+  --color-warning: #b36f00;
+  --color-info: var(--link);
+  --color-focus-ring: rgba(36, 116, 32, 0.2);
+
+  /* Mono color tokens */
+  --mono-1: var(--green);
+  --mono-2: var(--purple);
+  --mono-3: var(--mascot);
+  --mono-4: var(--sun);
+  --mono-5: var(--warn);
+  --mono-6: var(--sky);
+
+  /* Foreground tokens */
+  --fg:   var(--ink);
+  --fg-3: var(--panel-text-3);
+  --bg:   var(--paper);
+  --bg-2: var(--panel-2);
+
+  /* Typography */
+  --ff-display: "Archivo Black", "Arial Black", "Times New Roman", serif;
+  --ff-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+  --ff-body:    "Instrument Serif", Georgia, serif;
+  --ff-prose:   "Instrument Serif", Georgia, serif;
+
+  /* Font sizes */
+  --fs-micro:  9px;
+  --fs-xs:     11px;
+  --fs-tiny:   11px;
+  --fs-sm:     12px;
+  --fs-body:   13px;
+  --fs-lg:     14px;
+  --fs-h3:     14px;
+  --fs-h4:     13px;
+  --fs-h2:     28px;
+  --fs-h1:     48px;
+  --fs-hero:   96px;
+
+  /* Line heights */
+  --lh-tight:  1.05;
+  --lh-snug:   1.2;
+  --lh-base:   1.5;
+  --lh-long:   1.6;
+
+  /* Letter spacing */
+  --tr-tight:  -0.02em;
+  --tr-label:  0.08em;
+  --tr-caps:   0.05em;
+
+  /* Spacing scale (4px base) */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  24px;
+  --space-6:  32px;
+  --space-7:  48px;
+  --space-8:  64px;
+
+  /* Border radius — flat by default */
+  --r-1:    0;
+  --r-2:    0;
+  --r-3:    0;
+  --r-pill: 9999px;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+
+  /* Border widths */
+  --bw-hair: 1px;
+  --bw-rule: 2px;
+
+  /* Measure */
+  --measure: 72ch;
+
+  /* Motion */
+  --dur-snap:  80ms;
+  --dur-base:  160ms;
+  --ease:      cubic-bezier(0.2, 0, 0, 1);
+
+  /* Surface overlays */
+  --surface-2:     rgba(0,0,0,0.04);
+  --surface-ink-2: rgba(255,255,255,0.06);
+
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+}
+
+html.dark,
+[data-theme="dark"] {
+  --panel-0:       #0B0B09;
+  --panel-1:       #141411;
+  --panel-2:       #1f1f1a;
+  --panel-3:       #2a2a23;
+  --panel-hover:   #24241f;
+  --panel-select:  #1f3520;
+  --panel-text:    #EFE9DD;
+  --panel-text-2:  #d2cab9;
+  --panel-text-3:  #afa797;
+  --panel-accent:    var(--green-2);
+  --panel-accent-2:  var(--green-2);
+  --panel-accent-fg: var(--ink);
+  --panel-shadow:  none;
+
+  --mono-1: var(--green-2);
+  --mono-2: #c084fc;
+  --mono-3: var(--mascot);
+  --mono-4: var(--sun);
+  --mono-5: var(--warn);
+  --mono-6: var(--sky);
+
+  --fg:   var(--panel-text);
+  --fg-3: var(--panel-text-3);
+  --bg:   var(--panel-0);
+  --bg-2: var(--panel-2);
+
+  --color-primary: var(--green-2);
+  --color-primary-dark: #7ebe9a;
+  --color-bg-primary: var(--panel-0);
+  --color-bg-secondary: var(--panel-1);
+  --color-bg-raised: var(--panel-1);
+  --color-bg-hover: var(--panel-hover);
+  --color-bg-code: #1d1d18;
+  --color-code-text: var(--panel-text);
+  --color-code-border: var(--panel-text);
+  --color-thinking-bg: #1a1f18;
+  --color-text-primary: var(--panel-text);
+  --color-text-secondary: var(--panel-text-2);
+  --color-text-muted: var(--panel-text-3);
+  --color-border: var(--panel-text);
+  --color-focus-ring: rgba(146, 206, 172, 0.25);
+}
+
+html,
+body {
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-family: var(--ff-mono);
+  letter-spacing: 0;
+}
+
+* {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.sidebar,
+.main-header,
+.view-toggle-bar,
+.input-section,
+.sidebar-search-bar,
+.clone-input-bar,
+.bulk-action-bar,
+.pm2-monitor-panel,
+.tools-popup-content,
+.folder-modal,
+.status-badge,
+.input-card,
+.cli,
+.panel,
+.kv,
+.welcome-agents-grid > * {
+  border: 1px solid var(--color-border) !important;
+}
+
+.sidebar {
+  background: var(--panel-1);
+}
+
+.sidebar-header h2,
+.header-title,
+.welcome-title {
+  font-family: var(--ff-display);
+  text-transform: lowercase;
+  letter-spacing: -0.02em;
+}
+
+.sidebar-header h2,
+.header-title {
+  font-size: 1rem;
+}
+
+.main-header,
+.view-toggle-bar,
+.sidebar-search-bar,
+.input-section {
+  background: var(--panel-0);
+}
+
+.sidebar-new-btn,
+.clone-go-btn,
+.input-send-btn,
+.btn-primary,
+.view-toggle-btn.active,
+.status-indicator[data-status="connected"],
+.streaming-block-system,
+.message-tool,
+.conversation-item.active {
+  background: var(--panel-accent) !important;
+  color: var(--panel-accent-fg) !important;
+}
+
+.sidebar-overflow-btn,
+.sidebar-toggle-btn,
+.theme-toggle-btn,
+.header-icon-btn,
+.input-icon-btn,
+.view-toggle-btn,
+.btn,
+.btn-ghost,
+.status-cancel-btn,
+.clone-cancel-btn,
+.tools-popup-refresh-btn {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border) !important;
+}
+
+.sidebar-overflow-btn:hover,
+.sidebar-toggle-btn:hover,
+.theme-toggle-btn:hover,
+.header-icon-btn:hover,
+.input-icon-btn:hover,
+.view-toggle-btn:hover,
+.btn:hover,
+.btn-ghost:hover,
+.status-cancel-btn:hover,
+.clone-cancel-btn:hover,
+.tools-popup-refresh-btn:hover {
+  background: var(--panel-hover) !important;
+  color: var(--color-text-primary) !important;
+}
+
+.welcome-logo {
+  background: var(--purple);
+  color: #fff;
+  border: 1px solid var(--color-border);
+  font-family: var(--ff-display);
+}
+
+.welcome-subtitle {
+  font-family: var(--ff-mono);
+  text-transform: lowercase;
+  color: var(--color-text-secondary);
+}
+
+.message {
+  border: 1px solid var(--color-border);
+  background: var(--panel-1);
+}
+
+.message-user {
+  background: #dcefd9;
+}
+
+html.dark .message-user {
+  background: #1f3520;
+}
+
+.message-role,
+.conversation-item-meta,
+.status-badge,
+.sidebar-empty,
+.sidebar-search-input,
+.input-chip-select,
+.input-card-textarea,
+.sidebar-list,
+.streaming-status-bar,
+.kv td:first-child {
+  font-family: var(--ff-mono);
+}
+
+.message-content,
+.message-text,
+.welcome-subtitle,
+.main-panel p {
+  font-family: var(--ff-body);
+  font-size: 0.98rem;
+}
+
+a,
+.prose a,
+.message-content a {
+  color: var(--link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+a:hover,
+.prose a:hover,
+.message-content a:hover {
+  color: var(--panel-accent);
+}
+
+.input-card,
+.sidebar-search-input,
+.clone-input,
+.input-chip-select,
+.input-card-textarea,
+.tools-popup-content,
+.folder-modal,
+.message-code,
+pre,
+code {
+  background: var(--color-bg-secondary) !important;
+  color: var(--color-text-primary);
+}
+
+.message-code,
+pre,
+code {
+  border: 1px solid var(--color-border);
+}
+
+.status-badge,
+.app-shell,
+.main-panel,
+#output-scroll,
+.messages-wrapper,
+.sidebar-list,
+.conversation-item,
+.streaming-status-bar,
+.input-card-toolbar,
+.card,
+.panel-body {
+  border-color: var(--color-border) !important;
+}
+
+.streaming-status-bar {
+  background: var(--panel-1);
+}
+
+.status-agent-name {
+  color: var(--panel-accent);
+  font-weight: 700;
+}
+
+.tools-popup,
+.folder-modal-overlay {
+  background: rgba(11, 11, 9, 0.5) !important;
+}
+
+.drop-zone-overlay {
+  background: rgba(36, 116, 32, 0.12);
+  border: 1px dashed var(--color-border);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--panel-3);
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    border-right: 1px solid var(--color-border) !important;
+  }
+}
+
+/* Selection — mascot brand color */
+::selection { background: var(--mascot); color: var(--mascot-fg); }
+
+/* Mono color utilities — colorful mono, the 247420 signature */
+.mono-green   { color: var(--mono-1); }
+.mono-purple  { color: var(--mono-2); }
+.mono-mascot  { color: var(--mono-3); }
+.mono-sun     { color: var(--mono-4); }
+.mono-flame   { color: var(--mono-5); }
+.mono-sky     { color: var(--mono-6); }
+.mono-ink     { color: var(--fg); }
+.mono-dim     { color: var(--fg-3); }
+
+/* Highlight blocks — mono run on tinted bg */
+.hl-green   { background: var(--green);   color: var(--green-fg);   padding: 0.08em 0.4em; }
+.hl-purple  { background: var(--purple);  color: var(--purple-fg);  padding: 0.08em 0.4em; }
+.hl-mascot  { background: var(--mascot);  color: var(--mascot-fg);  padding: 0.08em 0.4em; }
+.hl-sun     { background: var(--sun);     color: var(--ink);        padding: 0.08em 0.4em; }
+
+/* Syntax role classes */
+.m-k  { color: var(--mono-2); font-weight: 500; }
+.m-s  { color: var(--mono-4); }
+.m-n  { color: var(--mono-1); }
+.m-c  { color: var(--fg-3); font-style: italic; }
+.m-tag{ color: var(--mono-3); }
+.m-op { color: var(--mono-5); }
+.m-ref{ color: var(--mono-6); text-decoration: underline; text-underline-offset: 3px; }
+
+/* Row hover — translate + shadow like design system */
+.conversation-item:hover {
+  transform: translateX(-1px);
+}
+
+/* Focus ring — green glow */
+:focus-visible {
+  outline: 2px solid var(--panel-accent) !important;
+  outline-offset: 2px;
+}

package/static/index.html

@@ -3,11 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
-  <meta name="theme-color" content="#3b82f6" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#1e293b" media="(prefers-color-scheme: dark)">
-  <title>AgentGUI</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%233b82f6'/%3E%3Ctext x='50' y='68' font-size='50' font-family='sans-serif' font-weight='bold' fill='white' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E">
+  <meta name="description" content="247420 branded AgentGUI - real-time multi-agent coding interface">
+  <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#1f1f1a" media="(prefers-color-scheme: dark)">
+  <title>247420 // AgentGUI</title>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23247420'/%3E%3Ctext x='50' y='68' font-size='50' font-family='sans-serif' font-weight='bold' fill='%23EFE9DD' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif&display=swap">
   <link rel="preload" href="/gm/css/main.css" as="style">
   <link rel="preload" href="/gm/lib/xstate.umd.min.js" as="script">
   <link rel="preload" href="/gm/lib/msgpackr.min.js" as="script">
@@ -42,6 +45,7 @@
     <link rel="stylesheet" href="/gm/css/main.css">
   <link rel="stylesheet" href="/gm/css/tools-popup.css" media="print" onload="this.media='all'">
   <link rel="stylesheet" href="/gm/css/gmail-skin.css">
+  <link rel="stylesheet" href="/gm/css/brand-bible.css">
 </head>
 <body>
   <a href="#app" class="skip-link">Skip to conversation</a>
@@ -397,3 +401,6 @@
   </script>
 </body>
 </html>
+
+
+