@anmol-srv/sigil 0.11.0 → 0.12.1

package/src/gui/web/design/colors_and_type.css

@@ -0,0 +1,178 @@
+/* ============================================================
+   SIGIL DESIGN SYSTEM — colors_and_type.css
+   Dark, sharp-edged console. Blue brand mark, monospace data,
+   restrained status color. Import this file to inherit all tokens.
+   ============================================================ */
+
+/* ---- Webfonts ---------------------------------------------- */
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
+
+:root {
+  /* ========================================================
+     COLOR — cool-neutral dark ramp
+     Surfaces are layered near-black; text is a desaturated
+     white ramp. Chroma is kept extremely low (cool grey).
+     ======================================================== */
+
+  /* Backgrounds / surfaces (low → high elevation) */
+  --bg-0:        #08090b;   /* app background, deepest */
+  --bg-1:        #0b0c0e;   /* page canvas */
+  --surface-1:   #101113;   /* card / panel */
+  --surface-2:   #151618;   /* row hover, inset, raised */
+  --surface-3:   #1b1d20;   /* active / pressed surface */
+
+  /* Borders / hairlines */
+  --border-1:    #1d1f23;   /* default hairline divider */
+  --border-2:    #292c31;   /* stronger border / card edge */
+  --border-strong: #3a3e44; /* focus-adjacent, input border hover */
+
+  /* Foreground text ramp */
+  --fg-1:        #f4f5f6;   /* primary text, headings, key values */
+  --fg-2:        #a2a5ab;   /* body, secondary text */
+  --fg-3:        #74777d;   /* labels, captions, footer */
+  --fg-4:        #50535a;   /* disabled, faint meta */
+
+  /* ---- Brand (from the Sigil mark gradient) ---- */
+  --brand:       #0084ff;   /* primary blue — active, links, focus */
+  --brand-deep:  #004ce6;   /* gradient anchor / pressed */
+  --brand-light: #99d5ff;   /* gradient highlight / on-dark accents */
+  --brand-tint:  rgba(0, 132, 255, 0.12);  /* selected/active wash */
+  --brand-ring:  rgba(0, 132, 255, 0.45);  /* focus ring */
+
+  /* ---- Status (semantic, used sparingly) ---- */
+  --ok:          #3ddc84;   /* connected / healthy */
+  --ok-tint:     rgba(61, 220, 132, 0.12);
+  --warn:        #f5b544;   /* degraded / attention */
+  --warn-tint:   rgba(245, 181, 68, 0.12);
+  --danger:      #ff5a52;   /* error / disconnected */
+  --danger-tint: rgba(255, 90, 82, 0.12);
+  --info:        var(--brand);
+
+  /* ========================================================
+     TYPE — Geist (UI) + Geist Mono (data / identifiers)
+     UI copy is grotesk; anything machine-derived (pids,
+     versions, hashes, ids, durations) is monospace.
+     ======================================================== */
+  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+
+  /* Type scale (px → rem at 16px base) */
+  --text-display: 2.25rem;  /* 36 — page hero (rare) */
+  --text-h1:      1.625rem; /* 26 — page title */
+  --text-h2:      1.125rem; /* 18 — section / card value */
+  --text-h3:      1rem;     /* 16 — sub-section */
+  --text-body:    0.9375rem;/* 15 — body copy */
+  --text-sm:      0.8125rem;/* 13 — table cells, meta */
+  --text-label:   0.6875rem;/* 11 — UPPERCASE eyebrow labels */
+  --text-xs:      0.625rem; /* 10 — micro meta */
+
+  /* Weights */
+  --w-regular: 400;
+  --w-medium:  500;
+  --w-semibold:600;
+  --w-bold:    700;
+
+  /* Tracking */
+  --track-label: 0.12em;   /* uppercase eyebrows */
+  --track-tight: -0.01em;  /* large headings */
+  --track-normal: 0;
+
+  /* Line heights */
+  --lh-tight: 1.15;
+  --lh-snug:  1.35;
+  --lh-body:  1.55;
+
+  /* ========================================================
+     GEOMETRY — sharp edges. Radius is near-zero by design.
+     ======================================================== */
+  --radius-0: 0px;     /* default — sharp */
+  --radius-1: 2px;     /* inputs, badges (barely softened) */
+  --radius-2: 3px;     /* the largest we ever go */
+
+  /* Borders */
+  --bw: 1px;
+
+  /* ========================================================
+     SPACING — 4px base grid
+     ======================================================== */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 24px;
+  --sp-6: 32px;
+  --sp-7: 48px;
+  --sp-8: 64px;
+  --sp-9: 96px;
+
+  /* Layout */
+  --maxw: 1680px;          /* content max width */
+  --gutter: 32px;          /* page horizontal padding */
+  --nav-h: 64px;           /* top bar height */
+
+  /* ========================================================
+     ELEVATION — shadows are flat & subtle (console, not card UI)
+     ======================================================== */
+  --shadow-0: none;
+  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
+  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
+  --shadow-pop: 0 12px 40px rgba(0,0,0,0.6);
+
+  /* Focus */
+  --focus-ring: 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-ring);
+
+  /* Motion — minimal, quick, no bounce */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --dur-1: 90ms;
+  --dur-2: 150ms;
+}
+
+/* ============================================================
+   SEMANTIC ELEMENT STYLES — opt-in helpers
+   ============================================================ */
+
+.sig-display {
+  font-family: var(--font-sans);
+  font-size: var(--text-display);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--track-tight);
+  line-height: var(--lh-tight);
+  color: var(--fg-1);
+}
+.sig-h1 {
+  font-family: var(--font-sans);
+  font-size: var(--text-h1);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--track-tight);
+  line-height: var(--lh-tight);
+  color: var(--fg-1);
+}
+.sig-h2 {
+  font-family: var(--font-sans);
+  font-size: var(--text-h2);
+  font-weight: var(--w-semibold);
+  line-height: var(--lh-snug);
+  color: var(--fg-1);
+}
+.sig-label {
+  font-family: var(--font-sans);
+  font-size: var(--text-label);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--track-label);
+  text-transform: uppercase;
+  color: var(--fg-3);
+}
+.sig-body {
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  font-weight: var(--w-regular);
+  line-height: var(--lh-body);
+  color: var(--fg-2);
+}
+.sig-mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: var(--w-medium);
+  color: var(--fg-1);
+  font-feature-settings: 'ss01' on, 'zero' on;
+}

package/src/gui/web/design/sigil-mark-mono.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <g fill="currentColor">
+    <path d="m54.7 21.7v8.9h3.3l19.9-9.7 1.4-0.1 0.1 1.8-9.7 19.9v3.1h9.6l16.2-12.7 2.7-2.8v-27.9h-28.6l-14.9 19.5z"></path>
+    <path d="m2.2 2.2v27.9l2.7 2.2 15.8 13.4h9.5v-3.2l-9.8-20 0.1-1.8 1.6 0.1 19.9 9.8h3.2v-8.9l-14.9-19.5z"></path>
+    <path d="m20.6 54.4-17.2 13.2-1.2 1.6v28.7h28.1l14.9-19.4v-9.7h-3.3l-19.9 10.5-1.5 0.1v-1.8l9.7-19.8v-3.4z"></path>
+    <path d="m54.7 68.8v9.7l14.9 19.4h28.7v-28.7l-19.1-14.8h-9.5v3.3l9.7 19.9-0.1 1.7h-1.4l-19.7-10.5z"></path>
+  </g>
+</svg>

package/src/gui/web/design/sigil-mark.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <linearGradient id="sig1" x1="54.74" x2="98.29" y1="23.07" y2="10.4" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#99D5FF" offset="0"></stop>
+    <stop stop-color="#0084FF" offset=".3602"></stop>
+    <stop stop-color="#004CE6" offset="1"></stop>
+  </linearGradient>
+  <linearGradient id="sig2" x1="1.691" x2="45.24" y1="10.02" y2="32.95" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#005CE6" offset=".3602"></stop>
+    <stop stop-color="#0084FF" offset=".7432"></stop>
+    <stop stop-color="#C9E7FF" offset="1"></stop>
+  </linearGradient>
+  <linearGradient id="sig3" x1="2.223" x2="45.24" y1="89.56" y2="67.06" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#005CE6" offset=".3602"></stop>
+    <stop stop-color="#0084FF" offset=".7432"></stop>
+    <stop stop-color="#C9E7FF" offset="1"></stop>
+  </linearGradient>
+  <linearGradient id="sig4" x1="54.74" x2="98.29" y1="78.41" y2="89.91" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#99D5FF" offset="0"></stop>
+    <stop stop-color="#0084FF" offset=".3602"></stop>
+    <stop stop-color="#004CE6" offset="1"></stop>
+  </linearGradient>
+  <path fill="url(#sig1)" d="m54.7 21.7v8.9h3.3l19.9-9.7 1.4-0.1 0.1 1.8-9.7 19.9v3.1h9.6l16.2-12.7 2.7-2.8v-27.9h-28.6l-14.9 19.5z"></path>
+  <path fill="url(#sig2)" d="m2.2 2.2v27.9l2.7 2.2 15.8 13.4h9.5v-3.2l-9.8-20 0.1-1.8 1.6 0.1 19.9 9.8h3.2v-8.9l-14.9-19.5z"></path>
+  <path fill="url(#sig3)" d="m20.6 54.4-17.2 13.2-1.2 1.6v28.7h28.1l14.9-19.4v-9.7h-3.3l-19.9 10.5-1.5 0.1v-1.8l9.7-19.8v-3.4z"></path>
+  <path fill="url(#sig4)" d="m54.7 68.8v9.7l14.9 19.4h28.7v-28.7l-19.1-14.8h-9.5v3.3l9.7 19.9-0.1 1.7h-1.4l-19.7-10.5z"></path>
+</svg>

package/src/gui/web/index.html

@@ -4,55 +4,61 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Sigil</title>
-  <link rel="icon" type="image/svg+xml" href="/static/sigil.svg">
+  <link rel="icon" type="image/svg+xml" href="/static/design/sigil-mark.svg">
+  <!-- Sigil design system tokens (color, type, spacing, geometry) — loaded
+       BEFORE app.css so the dashboard re-skins onto the brand. -->
+  <link rel="stylesheet" href="/static/design/colors_and_type.css">
   <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
+  <!-- Toast stack — central status/error feedback (see toast.js) -->
+  <div id="toasts" class="toast-stack" aria-live="polite"></div>
+
   <!-- ════════════════════════════════════════════════════════════════════
        ONBOARDING WIZARD (shown until SETUP_COMPLETE)
        ════════════════════════════════════════════════════════════════════ -->
   <div class="onboarding" id="onboarding" hidden>
     <aside class="onboarding-sidebar">
       <div class="brand">
-        <img class="brand-mark" src="/static/sigil.svg" alt="Sigil" width="20" height="20">
+        <img class="brand-mark" src="/static/design/sigil-mark.svg" alt="Sigil" width="20" height="20">
         <div class="brand-name">Sigil</div>
         <div class="brand-badge">setup</div>
       </div>
 
       <ol class="onboarding-steps" id="ob-steps">
-        <li class="onboarding-step active" data-ob-step="welcome">
+        <li class="onboarding-step active" data-ob-step="connectors">
           <div class="num">1</div>
           <div>
-            <div class="label">Welcome</div>
-            <div class="desc">What Sigil is</div>
+            <div class="label">Connectors</div>
+            <div class="desc">Editors &amp; tools</div>
           </div>
         </li>
-        <li class="onboarding-step future" data-ob-step="database">
+        <li class="onboarding-step future" data-ob-step="llm">
           <div class="num">2</div>
           <div>
-            <div class="label">Database</div>
-            <div class="desc">Where memory lives</div>
+            <div class="label">Provider</div>
+            <div class="desc">Fact extraction + reasoning</div>
           </div>
         </li>
-        <li class="onboarding-step future" data-ob-step="llm">
+        <li class="onboarding-step future" data-ob-step="embedding">
           <div class="num">3</div>
           <div>
-            <div class="label">LLM provider</div>
-            <div class="desc">Fact extraction + reasoning</div>
+            <div class="label">Embeddings</div>
+            <div class="desc">Semantic search</div>
           </div>
         </li>
-        <li class="onboarding-step future" data-ob-step="embedding">
+        <li class="onboarding-step future" data-ob-step="database">
           <div class="num">4</div>
           <div>
-            <div class="label">Embeddings</div>
-            <div class="desc">Semantic search</div>
+            <div class="label">Database</div>
+            <div class="desc">Where memory lives</div>
           </div>
         </li>
         <li class="onboarding-step future" data-ob-step="finish">
           <div class="num">5</div>
           <div>
             <div class="label">All set</div>
-            <div class="desc">Wire up your editor</div>
+            <div class="desc">Open the dashboard</div>
           </div>
         </li>
       </ol>
@@ -62,31 +68,31 @@
     </aside>
 
     <main class="onboarding-content">
-      <!-- ── Step 1: Welcome ─────────────────────────────────────────── -->
-      <section class="wizard-step active" data-step="welcome">
-        <h1>Welcome to Sigil.</h1>
-        <p class="lede">Persistent memory for AI coding agents. One brain shared across Claude Code, Cursor, Codex, and any MCP client — stored in your own Postgres.</p>
-
-        <h2>What we'll set up</h2>
-        <ol class="kv">
-          <div class="row"><div class="k">1. Database</div><div class="v" style="font-family: var(--font-ui);">Connect Sigil to a Postgres database — Neon, Supabase, RDS, or local install. We'll install pgvector and run migrations for you.</div></div>
-          <div class="row"><div class="k">2. LLM provider</div><div class="v" style="font-family: var(--font-ui);">For fact extraction, AUDM dedup, and query synthesis. Claude Code subscription works for free.</div></div>
-          <div class="row"><div class="k">3. Embeddings</div><div class="v" style="font-family: var(--font-ui);">Vector model for semantic search.</div></div>
-          <div class="row"><div class="k">4. Editor wiring</div><div class="v" style="font-family: var(--font-ui);">Register Sigil with the AI coding tools you have installed.</div></div>
-        </ol>
+      <!-- ── Step 1: Connectors ──────────────────────────────────────── -->
+      <section class="wizard-step active" data-step="connectors">
+        <h1>Connect your tools.</h1>
+        <p class="lede">Sigil installs memory hooks into the AI coding tools you already use — one shared brain across Claude Code, Cursor, Codex, Kiro, and any MCP client. Click to connect; you can change this any time.</p>
+
+        <div class="connector-grid" id="ob-connectors"><div class="muted">detecting installed tools…</div></div>
 
         <div class="wizard-actions">
           <div class="spacer"></div>
-          <button class="btn primary large" data-ob-next="database">Get started</button>
+          <button class="btn ghost" data-ob-next="llm" id="ob-connectors-skip">Skip for now</button>
+          <button class="btn primary large" data-ob-next="llm">Continue</button>
         </div>
       </section>
 
-      <!-- ── Step 2: Database ────────────────────────────────────────── -->
+      <!-- ── Step 4: Database (linear guided flow) ───────────────────── -->
       <section class="wizard-step" data-step="database">
-        <h1>Connect your database.</h1>
-        <p class="lede">Sigil stores every fact, document, and embedding in a Postgres database you control. Pick a managed provider or point at a local install.</p>
+        <h1>Set up your database.</h1>
+        <p class="lede">Sigil stores every fact, document, and embedding in Postgres with pgvector. Let Sigil create a local one for you, or point it at a database you control.</p>
 
         <div class="provider-card-grid" id="db-mode-cards">
+          <label class="provider-card" data-db-mode="docker" id="ob-db-mode-docker" hidden>
+            <input type="radio" name="db-mode" value="docker" hidden>
+            <span class="name">Local (automatic) <span class="badge info" style="margin-left:8px;">RECOMMENDED</span></span>
+            <span class="hint">Sigil runs a pgvector Postgres in Docker for you. Zero config.</span>
+          </label>
           <label class="provider-card" data-db-mode="url">
             <input type="radio" name="db-mode" value="url" hidden checked>
             <span class="name">Connection URL</span>
@@ -95,10 +101,12 @@
           <label class="provider-card" data-db-mode="fields">
             <input type="radio" name="db-mode" value="fields" hidden>
             <span class="name">Local Postgres install</span>
-            <span class="hint">Docker, brew, apt — host + port + user + password.</span>
+            <span class="hint">Existing host + port + user + password.</span>
           </label>
         </div>
 
+        <p class="muted text-sm" id="ob-db-docker-note" style="margin-top: var(--s-2);" hidden></p>
+
         <div id="ob-db-url" style="margin-top: var(--s-5);">
           <label class="field">
             <span class="label">Postgres connection URL</span>
@@ -119,18 +127,17 @@
           <label class="field"><span class="label">Password</span><input type="password" id="ob-db-pass" autocomplete="off"></label>
         </div>
 
-        <div class="flex-row" style="margin-top: var(--s-3);">
-          <button class="btn primary" id="ob-db-test">Test connection</button>
-          <button class="btn" id="ob-db-install-pgv" hidden>Install pgvector</button>
-          <button class="btn" id="ob-db-migrate" hidden>Run migrations</button>
+        <div class="flex-row" style="margin-top: var(--s-4);">
+          <button class="btn primary" id="ob-db-setup">Set up database</button>
         </div>
 
-        <pre id="ob-db-result" class="result" hidden></pre>
+        <!-- Linear flow rows (filled by JS) — replaces the old toggling buttons -->
+        <div class="db-flow" id="ob-db-flow" hidden></div>
 
         <div class="wizard-actions">
-          <button class="btn ghost" data-ob-back="welcome">Back</button>
+          <button class="btn ghost" data-ob-back="embedding">Back</button>
           <div class="spacer"></div>
-          <button class="btn primary" data-ob-next="llm" id="ob-db-next" disabled>Continue</button>
+          <button class="btn primary" data-ob-next="finish" id="ob-db-next" disabled>Continue</button>
         </div>
       </section>
 
@@ -149,7 +156,7 @@
         <pre id="ob-llm-result" class="result" hidden></pre>
 
         <div class="wizard-actions">
-          <button class="btn ghost" data-ob-back="database">Back</button>
+          <button class="btn ghost" data-ob-back="connectors">Back</button>
           <div class="spacer"></div>
           <button class="btn primary" data-ob-next="embedding" id="ob-llm-next" disabled>Continue</button>
         </div>
@@ -171,7 +178,7 @@
         <div class="wizard-actions">
           <button class="btn ghost" data-ob-back="llm">Back</button>
           <div class="spacer"></div>
-          <button class="btn primary" data-ob-next="finish" id="ob-emb-next" disabled>Continue</button>
+          <button class="btn primary" data-ob-next="database" id="ob-emb-next" disabled>Continue</button>
         </div>
       </section>
 
@@ -194,6 +201,11 @@
           <div class="row"><div class="k">Other devices</div><div class="v" style="font-family: var(--font-ui);">From the Devices tab in the dashboard, create a pairing code and run <code>sigil join …</code> on the joining device.</div></div>
         </ul>
 
+        <label class="field" style="flex-direction:row; align-items:center; gap: var(--s-2); margin-top: var(--s-5);">
+          <input type="checkbox" id="ob-always-up" checked>
+          <span class="label" style="text-transform:none; letter-spacing:0;">Keep Sigil always running — start on login, auto-restart on crash or reboot (recommended)</span>
+        </label>
+
         <div class="wizard-actions">
           <div class="spacer"></div>
           <button class="btn primary large" id="ob-complete">Open the dashboard →</button>
@@ -208,7 +220,7 @@
   <header>
     <div class="header-inner">
       <div class="brand">
-        <img class="brand-mark" src="/static/sigil.svg" alt="Sigil" width="20" height="20">
+        <img class="brand-mark" src="/static/design/sigil-mark.svg" alt="Sigil" width="20" height="20">
         <div class="brand-name">Sigil</div>
         <div class="brand-badge" id="brand-badge">local</div>
       </div>
@@ -383,6 +395,16 @@
         </div>
       </div>
 
+      <!-- Coding agents — single-click install of Sigil hooks into Claude Code,
+           Cursor, Codex, Kiro, Hermes. Cards reuse the wizard's connectorCard. -->
+      <div class="panel" style="padding: var(--s-5); margin-bottom: var(--s-4);">
+        <div class="title-block" style="margin-bottom: var(--s-4);">
+          <h3 style="margin: 0;">Coding agents</h3>
+          <p class="muted text-sm" style="margin: 4px 0 0;">One shared memory across every AI coding tool you use. Sigil writes a small CLAUDE.md/AGENTS.md import + hook config — fully reversible.</p>
+        </div>
+        <div class="connector-grid" id="settings-connectors"><div class="muted">detecting installed tools…</div></div>
+      </div>
+
       <!-- Current config + switch controls -->
       <div class="panel" style="padding: var(--s-5); margin-bottom: var(--s-4);">
         <div class="row"><div class="k">Database</div><div class="v" id="cfg-db">…</div></div>

package/src/gui/web/toast.js

@@ -0,0 +1,62 @@
+/**
+ * Central toast feedback — the only channel for transient status/errors.
+ * Design-system styled: a sharp surface-1 panel with a hairline border, a 7px
+ * status square (red/green/amber/brand) and an optional mono error code.
+ * Errors are sticky (no auto-dismiss); info/success fade. Replaces every
+ * inline `out.textContent = …` / `alert()` in the old GUI.
+ */
+function host() {
+  return document.getElementById('toasts');
+}
+
+export function toast({ variant = 'info', message = '', hint, code, timeout } = {}) {
+  const stack = host();
+  if (!stack) return () => {};
+
+  const el = document.createElement('div');
+  el.className = `toast toast-${variant}`;
+  el.setAttribute('role', variant === 'error' ? 'alert' : 'status');
+
+  const sq = document.createElement('span');
+  sq.className = 'toast-sq';
+
+  const body = document.createElement('div');
+  body.className = 'toast-body';
+
+  const msg = document.createElement('div');
+  msg.className = 'toast-msg';
+  msg.textContent = message;
+  body.appendChild(msg);
+
+  if (hint) {
+    const h = document.createElement('div');
+    h.className = 'toast-hint';
+    h.textContent = hint;
+    body.appendChild(h);
+  }
+  if (code) {
+    const c = document.createElement('span');
+    c.className = 'toast-code';
+    c.textContent = code;
+    body.appendChild(c);
+  }
+
+  const x = document.createElement('button');
+  x.className = 'toast-x';
+  x.type = 'button';
+  x.textContent = '×';
+  x.setAttribute('aria-label', 'dismiss');
+  const remove = () => { el.remove(); };
+  x.onclick = remove;
+
+  el.append(sq, body, x);
+  stack.appendChild(el);
+
+  const ttl = timeout != null ? timeout : (variant === 'error' ? 0 : 4000);
+  if (ttl > 0) setTimeout(remove, ttl);
+  return remove;
+}
+
+export const toastError = (o) => toast({ ...o, variant: 'error' });
+export const toastOk = (o) => toast({ ...o, variant: 'success' });
+export const toastInfo = (o) => toast({ ...o, variant: 'info' });