@oratis/lisa 0.8.0 → 0.11.0

package/dist/web/devices.js

@@ -0,0 +1,113 @@
+/**
+ * Per-device pairing tokens — a revocable credential per phone/tablet, layered
+ * on top of the global LISA_WEB_TOKEN.
+ *
+ * The global token is what binds the server to a non-loopback host and what the
+ * owner uses; a device token is minted per device (QR pairing) so each can be
+ * revoked individually without rotating the global secret. Only the SHA-256 hash
+ * of each device token is stored (`~/.lisa/devices.json`) — the raw token is
+ * returned exactly once, at mint time, for the QR.
+ */
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import crypto from "node:crypto";
+function lisaHome() {
+    return process.env.LISA_HOME ?? path.join(os.homedir(), ".lisa");
+}
+function devicesPath() {
+    return path.join(lisaHome(), "devices.json");
+}
+function sha256hex(s) {
+    return crypto.createHash("sha256").update(s).digest("hex");
+}
+export function loadDevices() {
+    try {
+        const parsed = JSON.parse(fs.readFileSync(devicesPath(), "utf8"));
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.filter((d) => !!d && typeof d.id === "string" && typeof d.tokenHash === "string");
+    }
+    catch {
+        return [];
+    }
+}
+function saveDevices(list) {
+    const file = devicesPath();
+    // Records hold per-device token HASHES — credentials. Keep the store private
+    // (0600 file inside a 0700 dir), matching how config.env is written in env.ts.
+    // writeFileSync's mode only applies on create, so chmod after to tighten a
+    // pre-existing loose file.
+    fs.mkdirSync(path.dirname(file), { recursive: true, mode: 0o700 });
+    fs.writeFileSync(file, JSON.stringify(list, null, 2), { mode: 0o600 });
+    try {
+        fs.chmodSync(file, 0o600);
+    }
+    catch {
+        // best effort — non-POSIX filesystems may reject chmod
+    }
+}
+export function toPublicDevice(d) {
+    return { id: d.id, name: d.name, platform: d.platform, createdAt: d.createdAt, lastSeenAt: d.lastSeenAt };
+}
+/** Mint a device token + record. Returns the raw token ONCE (for the QR). */
+export function mintDevice(name, platform, now = Date.now()) {
+    const token = crypto.randomBytes(24).toString("hex");
+    const id = crypto.randomBytes(6).toString("hex");
+    const rec = {
+        id,
+        name: name.slice(0, 80) || "device",
+        platform: platform.slice(0, 32) || "unknown",
+        tokenHash: sha256hex(token),
+        createdAt: now,
+        lastSeenAt: now,
+    };
+    const list = loadDevices();
+    list.push(rec);
+    saveDevices(list);
+    return { id, token, device: toPublicDevice(rec) };
+}
+/** Constant-time compare a presented token against a stored hash. */
+function tokenMatchesHash(presented, hash) {
+    const a = crypto.createHash("sha256").update(presented).digest();
+    let b;
+    try {
+        b = Buffer.from(hash, "hex");
+    }
+    catch {
+        return false;
+    }
+    return a.length === b.length && crypto.timingSafeEqual(a, b);
+}
+/** Return the device whose token matches `presented`, or null. Does not mutate. */
+export function verifyDeviceToken(presented) {
+    if (!presented)
+        return null;
+    for (const d of loadDevices()) {
+        if (tokenMatchesHash(presented, d.tokenHash))
+            return d;
+    }
+    return null;
+}
+/** Update a device's lastSeenAt (best-effort). */
+export function touchDevice(id, now = Date.now()) {
+    const list = loadDevices();
+    const d = list.find((x) => x.id === id);
+    if (!d)
+        return;
+    d.lastSeenAt = now;
+    saveDevices(list);
+}
+export function listDevices() {
+    return loadDevices().map(toPublicDevice);
+}
+/** Remove a device by id. Returns true if one was removed. */
+export function revokeDevice(id) {
+    const list = loadDevices();
+    const next = list.filter((d) => d.id !== id);
+    if (next.length === list.length)
+        return false;
+    saveDevices(next);
+    return true;
+}
+//# sourceMappingURL=devices.js.map

package/dist/web/devices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devices.js","sourceRoot":"","sources":["../../src/web/devices.ts"],"names":[],"mappings":"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"}

package/dist/web/island.d.ts

@@ -7,6 +7,10 @@
  * unread flag). See docs/MAC_ISLAND_PLAN.md.
  *
  * No build step, no framework — single string of inline HTML/CSS/JS.
+ *
+ * D4a: the multi-agent roster logic (merge/aggregate) lives in agent-roster.ts
+ * and is SOURCE-INJECTED into the inline <script> below via `${mergeAgentSession}`
+ * so the browser runs the exact unit-tested code instead of a drifting copy.
  */
-export declare const ISLAND_HTML = "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Lisa \u00B7 island</title>\n<link rel=\"manifest\" href=\"/manifest.webmanifest\">\n<style>\n  :root {\n    color-scheme: dark;\n    --bg: rgba(8, 12, 24, 0.92);\n    --bg-strong: rgba(8, 12, 24, 0.96);\n    --fg: #e6e8ee;\n    --fg-dim: #9ba3b8;\n    --fg-faint: #6b7280;\n    --accent: #6ad4ff;\n    --accent-warm: #ffd066;\n    --accent-dream: #b487ff;\n    --accent-claude: #ff8c42;\n    --border: rgba(255, 255, 255, 0.08);\n    /* 1px top inner highlight that reads as a glass bevel */\n    --hairline: rgba(255, 255, 255, 0.12);\n    /* Layered materials \u2014 a soft vertical gradient gives the panels depth\n       instead of a flat fill, closer to the macOS Notch look. */\n    --pill-grad: linear-gradient(180deg, rgba(28, 35, 56, 0.94) 0%, rgba(10, 14, 28, 0.94) 100%);\n    --panel-grad: linear-gradient(180deg, rgba(22, 28, 46, 0.96) 0%, rgba(9, 13, 25, 0.97) 72%);\n    --shadow-pill: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 var(--hairline) inset;\n    --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.55), 0 1px 0 var(--hairline) inset;\n    /* Gentle overshoot easing for a springy, alive feel. */\n    --spring: cubic-bezier(0.22, 1, 0.36, 1);\n  }\n  html, body {\n    margin: 0;\n    padding: 0;\n    background: transparent;\n    overflow: hidden;\n    height: 100vh;\n    font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", system-ui, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    color: var(--fg);\n    user-select: none;\n    cursor: default;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4px 8px;\n  }\n\n  #pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--pill-grad);\n    border: 1px solid var(--border);\n    border-radius: 22px;\n    padding: 5px 14px 5px 5px;\n    backdrop-filter: blur(20px) saturate(1.4);\n    -webkit-backdrop-filter: blur(20px) saturate(1.4);\n    box-shadow: var(--shadow-pill);\n    cursor: pointer;\n    transition: transform 260ms var(--spring), box-shadow 260ms var(--spring);\n    max-width: 280px;\n  }\n  /* Lift toward the cursor (the old rule pushed it *down*, which read as\n     a press). Subtle scale + deeper shadow sells the float. */\n  #pill:hover {\n    transform: translateY(-1px) scale(1.015);\n    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.16) inset;\n  }\n  #pill:active { transform: translateY(0) scale(0.99); }\n\n  /* Avatar is an <img> not a background-image \u2014 more reliable in\n     WKWebView and lets us crop into the face via object-position.\n     The 512\u00D7512 source has ~15% transparent padding around the\n     character; we scale up via object-fit + anchor toward the top\n     so the face dominates the small circle.\n     pointer-events: none + draggable=false so the img never steals\n     or hijacks mouse events from the pill (HTML <img> default is\n     draggable, which interferes with our Swift-side click/drag\n     resolution). */\n  #avatar {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    object-fit: cover;\n    object-position: 50% 22%;\n    background: #15192a;\n    flex-shrink: 0;\n    image-rendering: pixelated;\n    border: 1px solid rgba(255, 255, 255, 0.10);\n    box-shadow: 0 0 0 2px rgba(106, 212, 255, 0.10);\n    pointer-events: none;\n    -webkit-user-drag: none;\n    user-select: none;\n  }\n\n  #label {\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    color: var(--fg);\n  }\n\n  #dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    background: transparent;\n    flex-shrink: 0;\n  }\n  #dot.thinking       { background: var(--accent);         animation: pulse 1.2s ease-in-out infinite; }\n  #dot.dreaming       { background: var(--accent-dream);   animation: pulse 2.4s ease-in-out infinite; }\n  #dot.unread         { background: var(--accent-warm); }\n  /* Phase 2: pill dot reflects the strongest signal across all\n     Claude sessions. */\n  #dot.claude-working { background: var(--accent-claude);  animation: pulse 1.8s ease-in-out infinite; }\n  #dot.claude-waiting { background: var(--accent-claude); }  /* solid \u2014 \"needs you\" */\n  #dot.claude-error   { background: #ff5577;               animation: pulse 0.8s ease-in-out infinite; }\n  #dot.offline        { background: var(--fg-faint); }\n\n  @keyframes pulse {\n    0%, 100% { opacity: 0.35; }\n    50%      { opacity: 1; }\n  }\n\n  /* Expanded panel \u2014 appears below the pill on hover/click.\n     The native LisaIsland.app window is a fixed 360\u00D7440 pt; the pill\n     takes the top ~58pt (height + 8pt margin around). The expand\n     panel fills the rest. When content (long \u2605 reflection + many\n     active Claude sessions + their state trails when row-open)\n     exceeds that, the panel scrolls internally rather than letting\n     anything clip out of the window. */\n  #expand {\n    margin-top: 10px;\n    width: 336px;\n    max-height: calc(100vh - 70px);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--panel-grad);\n    border: 1px solid var(--border);\n    border-radius: 18px;\n    padding: 16px 18px;\n    backdrop-filter: blur(24px) saturate(1.4);\n    -webkit-backdrop-filter: blur(24px) saturate(1.4);\n    box-shadow: var(--shadow-panel);\n    font-size: 12.5px;\n    line-height: 1.55;\n    box-sizing: border-box;\n    opacity: 0;\n    transform: translateY(-6px) scale(0.985);\n    transform-origin: top center;\n    pointer-events: none;\n    transition: opacity 240ms var(--spring), transform 240ms var(--spring);\n  }\n  body.expanded #expand {\n    opacity: 1;\n    transform: none;\n    pointer-events: auto;\n  }\n  /* Subtle scrollbar \u2014 visible only while scrolling/hovering. The\n     default WKWebView scrollbar is too chunky for a 336px panel. */\n  #expand::-webkit-scrollbar { width: 6px; }\n  #expand::-webkit-scrollbar-track { background: transparent; }\n  #expand::-webkit-scrollbar-thumb {\n    background: rgba(255, 255, 255, 0.10);\n    border-radius: 3px;\n  }\n  #expand::-webkit-scrollbar-thumb:hover {\n    background: rgba(255, 255, 255, 0.20);\n  }\n\n  /* Stack section blocks with consistent vertical rhythm. */\n  #expand > div + div { margin-top: 14px; }\n\n  .section-label {\n    color: var(--accent);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.10em;\n    font-size: 10.5px;\n    margin-bottom: 8px;\n  }\n  .section-body {\n    color: var(--fg-dim);\n    word-wrap: break-word;\n  }\n\n  #idle-section { display: none; }\n  body.has-unread #idle-section { display: block; }\n  #idle-body {\n    background: rgba(255, 208, 102, 0.07);\n    border-left: 2px solid var(--accent-warm);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--fg);\n    /* No inner max-height \u2014 the outer #expand panel scrolls if total\n       content overflows the window. One scrollbar, not nested. */\n    white-space: pre-wrap;\n  }\n\n  /* Claude Code section \u2014 appears when there's active Claude Code activity */\n  #claude-section { display: none; }\n  body.has-claude #claude-section { display: block; }\n  #claude-section .section-label { color: var(--accent-claude); }\n  #claude-list {\n    list-style: none;\n    padding: 4px 0;\n    margin: 0;\n    border-left: 2px solid var(--accent-claude);\n    background: rgba(255, 140, 66, 0.06);\n    border-radius: 6px;\n    /* No inner overflow either \u2014 outer #expand scrolls. Avoids the\n       nested-scrollbar UX where the user scrolls inside this card by\n       accident and can't reach the action buttons below. */\n  }\n  #claude-list li {\n    padding: 8px 12px;\n    color: var(--fg);\n    font-size: 11.5px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    cursor: pointer;\n    transition: background 120ms ease;\n  }\n  #claude-list li:hover { background: rgba(255, 140, 66, 0.10); }\n  #claude-list li + li { border-top: 1px solid rgba(255, 140, 66, 0.10); }\n  /* Row \"head\" \u2014 the pip + project + relative-time line. Always rendered.\n     Stays as a horizontal flex strip even when the row is expanded; the\n     trail + actions render BELOW it because the parent <li> is flex-column. */\n  #claude-list .head {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  #claude-list .proj { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  /* Relative-time reads as a small pill chip (cf. the \"<1m\" chip in the\n     reference) \u2014 sits cleaner against the row than bare text. */\n  #claude-list .when {\n    color: var(--fg-dim);\n    flex-shrink: 0;\n    font-variant-numeric: tabular-nums;\n    font-size: 10px;\n    padding: 2px 7px;\n    border-radius: 999px;\n    background: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.07);\n  }\n  #claude-list .empty { padding: 8px 12px; color: var(--fg-faint); font-style: italic; }\n  /* O2 \u2014 Tier-2 activity line: what the session is structurally doing. */\n  #claude-list .act {\n    margin: 4px 0 0 18px;\n    padding: 5px 9px;\n    font-size: 10.5px;\n    color: var(--fg-dim);\n    font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n    /* Inset monospace card with an accent rail \u2014 echoes the reference's\n       code-diff panel without needing the actual diff content. */\n    background: rgba(255, 255, 255, 0.035);\n    border: 1px solid rgba(255, 255, 255, 0.05);\n    border-left: 2px solid rgba(255, 140, 66, 0.5);\n    border-radius: 7px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Phase 2 \u2014 per-session state pip prefix */\n  #claude-list .pip {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    background: var(--fg-faint);\n    margin-right: 4px;\n  }\n  #claude-list .pip.working { background: var(--accent-claude); animation: pulse 1.8s ease-in-out infinite; }\n  #claude-list .pip.waiting { background: var(--accent-claude); }\n  #claude-list .pip.error   { background: #ff5577; }\n  #claude-list .pip.unknown { background: var(--fg-faint); }\n\n  /* Phase 3 \u2014 state transition trail, shown below the row head when\n     the parent <li> has the .row-open class. */\n  #claude-list .trail {\n    display: none;\n    margin: 4px 0 0 14px;\n    padding: 6px 0 2px;\n    border-top: 1px dashed rgba(255, 140, 66, 0.18);\n    font-size: 10px;\n    color: var(--fg-faint);\n    line-height: 1.7;\n    word-spacing: 0.05em;\n  }\n  #claude-list li.row-open .trail { display: block; }\n\n  /* Phase 3.5 \u2014 inline action row when the session is expanded */\n  #claude-list .actions {\n    display: none;\n    margin: 6px 0 0 14px;\n    gap: 6px;\n    flex-wrap: wrap;\n  }\n  #claude-list li.row-open .actions { display: flex; }\n  #claude-list .actions button {\n    flex: 0 0 auto;\n    background: rgba(255, 140, 66, 0.10);\n    border: 1px solid rgba(255, 140, 66, 0.22);\n    color: var(--fg);\n    padding: 4px 8px;\n    border-radius: 6px;\n    font-size: 10.5px;\n    cursor: pointer;\n    font-family: inherit;\n  }\n  #claude-list .actions button:hover { background: rgba(255, 140, 66, 0.16); }\n  #claude-list .actions button:disabled { opacity: 0.35; cursor: not-allowed; }\n  #claude-list .trail .tdot {\n    display: inline-block;\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n    margin-right: 4px;\n    vertical-align: 0;\n    background: var(--fg-faint);\n  }\n  #claude-list .trail .tdot.working { background: var(--accent-claude); }\n  #claude-list .trail .tdot.waiting { background: var(--accent-claude); opacity: 0.7; }\n  #claude-list .trail .tdot.error   { background: #ff5577; }\n  /* (older stub removed \u2014 .head is a real flex strip now, see above) */\n\n  /* Phase 3 \u2014 notification opt-in chip */\n  #notify-cta {\n    display: none;\n    margin-top: 10px;\n    padding: 8px 12px;\n    border-radius: 10px;\n    background: rgba(255, 140, 66, 0.12);\n    border: 1px solid rgba(255, 140, 66, 0.30);\n    font-size: 11px;\n    color: var(--fg);\n    text-align: center;\n    cursor: pointer;\n    transition: background 120ms ease;\n  }\n  #notify-cta:hover { background: rgba(255, 140, 66, 0.18); }\n  body.notify-default #notify-cta { display: block; }\n\n  #actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 4px;\n  }\n  button {\n    flex: 1;\n    background: rgba(255, 255, 255, 0.06);\n    border: 1px solid var(--border);\n    color: var(--fg);\n    padding: 9px 12px;\n    border-radius: 11px;\n    font-size: 11.5px;\n    font-weight: 550;\n    cursor: pointer;\n    font-family: inherit;\n    transition: background 160ms var(--spring), transform 160ms var(--spring), box-shadow 160ms var(--spring);\n  }\n  button:hover  { background: rgba(255, 255, 255, 0.11); transform: translateY(-1px); }\n  button:active { background: rgba(255, 255, 255, 0.16); transform: translateY(0); }\n  button.muted  { opacity: 0.6; }\n  /* Primary CTA \u2014 accent-filled with a soft glow, the way the reference\n     elevates its main action above the secondary ones. */\n  #btn-open {\n    background: linear-gradient(180deg, rgba(106, 212, 255, 0.22), rgba(106, 212, 255, 0.12));\n    border-color: rgba(106, 212, 255, 0.35);\n    color: #d6f3ff;\n    box-shadow: 0 4px 14px rgba(106, 212, 255, 0.12);\n  }\n  #btn-open:hover {\n    background: linear-gradient(180deg, rgba(106, 212, 255, 0.30), rgba(106, 212, 255, 0.16));\n    box-shadow: 0 6px 18px rgba(106, 212, 255, 0.22);\n  }\n\n  /* Offline state \u2014 desaturate + dim */\n  body.offline #avatar { filter: grayscale(1); opacity: 0.5; }\n  body.offline #label  { color: var(--fg-faint); }\n\n  /* Screen-advisor suggestion card */\n  #suggestion-section { display: none; }\n  body.has-suggestion #suggestion-section { display: block; }\n  #suggestion-title { font-weight: 600; margin: 2px 0 3px; }\n  #suggestion-rationale { font-size: 11px; color: var(--fg-faint); margin-bottom: 6px; }\n  #suggestion-act {\n    width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; cursor: pointer;\n    font: inherit; font-size: 12px; font-weight: 600;\n    background: var(--accent, #5b8cff); color: #fff;\n  }\n  #suggestion-act:hover { filter: brightness(1.08); }\n  /* a soft glow on the pill dot when a fresh suggestion is waiting */\n  body.has-suggestion #dot { background: var(--accent, #5b8cff); opacity: 1; }\n</style>\n</head>\n<body>\n  <div id=\"pill\" role=\"button\" tabindex=\"0\" aria-label=\"Lisa island\">\n    <img id=\"avatar\" alt=\"\" draggable=\"false\" src=\"/assets/lisa/neutral.png\" />\n    <div id=\"label\">Lisa</div>\n    <div id=\"dot\" aria-hidden=\"true\"></div>\n  </div>\n  <div id=\"expand\" role=\"region\" aria-label=\"Lisa status detail\">\n    <div id=\"desire-section\">\n      <div class=\"section-label\">currently wanting</div>\n      <div class=\"section-body\" id=\"desire-body\">\u2014</div>\n    </div>\n    <div id=\"idle-section\">\n      <div class=\"section-label\">\u2605 while you were away</div>\n      <div id=\"idle-body\"></div>\n    </div>\n    <div id=\"suggestion-section\">\n      <div class=\"section-label\">\uD83D\uDCA1 suggested next step</div>\n      <div id=\"suggestion-title\"></div>\n      <div id=\"suggestion-rationale\"></div>\n      <button id=\"suggestion-act\" type=\"button\">Optimize \u25B8</button>\n    </div>\n    <div id=\"claude-section\">\n      <div class=\"section-label\">claude code \u00B7 <span id=\"claude-count\">0</span> active</div>\n      <ul id=\"claude-list\"></ul>\n      <div id=\"notify-cta\" role=\"button\" tabindex=\"0\">\uD83D\uDD14 Notify me when Claude is waiting</div>\n    </div>\n    <div id=\"actions\">\n      <button id=\"btn-open\">Open chat</button>\n      <button id=\"btn-dismiss\" class=\"muted\">Dismiss \u2605</button>\n    </div>\n  </div>\n\n<script>\n(() => {\n  const pill         = document.getElementById('pill');\n  const avatar       = document.getElementById('avatar');\n  const dot          = document.getElementById('dot');\n  const expand       = document.getElementById('expand');\n  const desireBody   = document.getElementById('desire-body');\n  const idleBody     = document.getElementById('idle-body');\n  const claudeList   = document.getElementById('claude-list');\n  const claudeCount  = document.getElementById('claude-count');\n  const notifyCta    = document.getElementById('notify-cta');\n  const btnOpen      = document.getElementById('btn-open');\n  const btnDismiss   = document.getElementById('btn-dismiss');\n  const suggTitle    = document.getElementById('suggestion-title');\n  const suggRationale= document.getElementById('suggestion-rationale');\n  const suggAct      = document.getElementById('suggestion-act');\n  const body         = document.body;\n\n  const state = {\n    mood: 'neutral',\n    online: false,\n    unread: false,\n    idleText: '',\n    desire: null,\n    thinking: false,\n    dreaming: false,\n    claudeSessions: [],  // [{project, sessionId, lastMtime}, \u2026]\n    suggestion: null,    // {title, rationale, task, at} from the screen advisor\n  };\n\n  // 30-min activity window matches the watcher's ACTIVE_WINDOW_MS.\n  const CLAUDE_ACTIVE_WINDOW_MS = 30 * 60 * 1000;\n\n  // Phase 3 \u2014 in-memory state transition history per session.\n  // Map<sessionId, [{state, reason, ts}, \u2026]> capped at MAX_HISTORY.\n  // Pure UI memory; not persisted, not transmitted.\n  const stateHistory = new Map();\n  const MAX_HISTORY = 8;\n  // Per-session opened-state for the inline trail in the expand list.\n  const rowOpen = new Set();\n\n  function recordStateHistory(sessionId, info) {\n    let h = stateHistory.get(sessionId);\n    if (!h) { h = []; stateHistory.set(sessionId, h); }\n    const last = h[h.length - 1];\n    if (last && last.state === info.state && last.reason === info.reason) {\n      // Same state, just refresh timestamp \u2014 collapse repeats.\n      last.ts = info.lastMtime;\n      return false;\n    }\n    h.push({ state: info.state, reason: info.reason, ts: info.lastMtime });\n    while (h.length > MAX_HISTORY) h.shift();\n    return true; // transition happened\n  }\n\n  // \u2500\u2500 Phase 3 \u2014 notifications (native via LisaIsland.app, or web fallback)\n  // Fires \"Claude is waiting in <project>\" alerts when a session\n  // transitions INTO waiting. Throttled per session so a flaky tool\n  // that bounces between waiting/working doesn't spam.\n  //\n  // Phase 3.5: when running inside LisaIsland.app, we delegate to the\n  // native UNUserNotificationCenter via postMessage \u2014 better permission\n  // flow, integrates with macOS Focus / DnD. In a plain browser tab we\n  // fall back to the Notification API.\n  const NOTIFY_THROTTLE_MS = 60_000;\n  const lastNotifyAt = new Map();\n  const hasBridge = !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.island);\n\n  function notifPermission() {\n    if (hasBridge) return 'granted'; // native side asks the user; we just request and trust\n    return ('Notification' in window) ? Notification.permission : 'unsupported';\n  }\n\n  function refreshNotifyCta() {\n    // The \uD83D\uDD14 chip is only needed when running in a browser AND\n    // permission hasn't been answered yet. Native bridge handles its\n    // own permission prompt.\n    if (hasBridge) {\n      body.classList.remove('notify-default');\n      return;\n    }\n    body.classList.toggle('notify-default', notifPermission() === 'default');\n  }\n\n  function requestNotificationPermission() {\n    if (hasBridge) {\n      window.webkit.messageHandlers.island.postMessage({ type: 'ensure_notify_permission' });\n      refreshNotifyCta();\n      return;\n    }\n    if (!('Notification' in window) || Notification.permission !== 'default') {\n      refreshNotifyCta();\n      return;\n    }\n    Notification.requestPermission().then(() => refreshNotifyCta()).catch(() => {});\n  }\n\n  function maybeNotifyWaiting(prevState, info) {\n    if (info.state !== 'waiting') return;\n    if (prevState === 'waiting') return;     // already in this state\n    const last = lastNotifyAt.get(info.sessionId) || 0;\n    if (Date.now() - last < NOTIFY_THROTTLE_MS) return;\n    lastNotifyAt.set(info.sessionId, Date.now());\n    const reasonLabel = info.stateReason === 'permission' ? 'needs permission' : 'is waiting';\n    const title = 'Claude ' + reasonLabel + ' in ' + info.project;\n    const bodyText = info.sessionId.slice(0, 8) + ' \u00B7 click to open Lisa';\n    if (hasBridge) {\n      window.webkit.messageHandlers.island.postMessage({\n        type: 'notify',\n        title: title,\n        body: bodyText,\n        sessionId: info.sessionId,\n      });\n      return;\n    }\n    if (notifPermission() !== 'granted') return;\n    try {\n      const n = new Notification(title, {\n        body: bodyText,\n        tag: 'lisa-claude-' + info.sessionId,\n        icon: '/assets/lisa-mascot.png',\n        silent: false,\n      });\n      n.onclick = () => { window.focus(); window.open('/', '_blank'); n.close(); };\n    } catch (_) { /* unsupported, ignore */ }\n  }\n  function recentSessions() {\n    const cutoff = Date.now() - CLAUDE_ACTIVE_WINDOW_MS;\n    return state.claudeSessions.filter(\n      (s) => new Date(s.lastMtime).getTime() >= cutoff\n    );\n  }\n  /**\n   * Phase 2: aggregate Claude state for the pill dot. Priority is\n   * \"loudest signal wins\": an error anywhere dominates everything;\n   * otherwise a \"waiting\" session beats a \"working\" session (because\n   * \"waiting\" means Claude needs the user \u2014 more attention-worthy\n   * than \"working\" which is passive observing).\n   */\n  function aggregateClaudeState() {\n    const recent = recentSessions();\n    if (recent.length === 0) return null;\n    if (recent.some((s) => s.state === 'error'))   return 'error';\n    if (recent.some((s) => s.state === 'waiting')) return 'waiting';\n    if (recent.some((s) => s.state === 'working')) return 'working';\n    return null;\n  }\n\n  function setAvatar(slug) {\n    if (!slug) return;\n    state.mood = slug;\n    // Use the <img> src attribute \u2014 far more reliable than CSS\n    // background-image in WKWebView, and lets the browser's standard\n    // image cache + retry logic do its thing.\n    avatar.src = '/assets/lisa/' + encodeURIComponent(slug) + '.png';\n  }\n\n  function refreshDot() {\n    dot.className = '';\n    // Priority: LISA's own state (offline / thinking / dreaming / unread)\n    // always wins over the Claude-Code-monitor indicator \u2014 the pill is\n    // primarily about her, the Claude dot is a quieter \"by the way\".\n    if (!state.online)  { dot.classList.add('offline');  return; }\n    if (state.thinking) { dot.classList.add('thinking'); return; }\n    if (state.dreaming) { dot.classList.add('dreaming'); return; }\n    if (state.unread)   { dot.classList.add('unread');   return; }\n    const claude = aggregateClaudeState();\n    if (claude === 'error')   { dot.classList.add('claude-error');   return; }\n    if (claude === 'waiting') { dot.classList.add('claude-waiting'); return; }\n    if (claude === 'working') { dot.classList.add('claude-working'); return; }\n  }\n\n  function refreshPanel() {\n    body.classList.toggle('offline',   !state.online);\n    body.classList.toggle('has-unread', state.unread);\n    body.classList.toggle('has-claude', state.claudeSessions.length > 0);\n    desireBody.textContent = state.desire || '(nothing actively pursued)';\n    idleBody.textContent   = state.idleText || '';\n    btnDismiss.classList.toggle('muted', !state.unread);\n    btnDismiss.disabled = !state.unread;\n    body.classList.toggle('has-suggestion', !!state.suggestion);\n    if (state.suggestion) {\n      suggTitle.textContent = state.suggestion.title || '';\n      suggRationale.textContent = state.suggestion.rationale || '';\n    }\n    renderClaudeList();\n  }\n\n  function relativeTime(iso) {\n    const ms = Date.now() - new Date(iso).getTime();\n    if (ms < 30_000)             return 'just now';\n    if (ms < 60_000)             return Math.round(ms / 1000) + 's ago';\n    if (ms < 3600_000)           return Math.round(ms / 60_000) + 'm ago';\n    return Math.round(ms / 3600_000) + 'h ago';\n  }\n\n  // O2 \u2014 compact one-line summary of a session's Tier-2 activity. Structural\n  // only (tool names, last command, basename of a touched file). Returns ''\n  // when there's no activity (e.g. visibility=metadata).\n  function basename(p) {\n    if (!p) return '';\n    const parts = String(p).split('/');\n    return parts[parts.length - 1] || p;\n  }\n  function formatActivity(s) {\n    const a = s.activity;\n    if (!a) return '';\n    if (a.pendingPermission) return '\u26A0 wants to run ' + a.pendingPermission;\n    const bits = [];\n    if (a.lastError) bits.push('\u2717 ' + a.lastError);\n    if (a.lastCommandName) bits.push('$ ' + a.lastCommandName);\n    const tool = a.lastTools && a.lastTools.length ? a.lastTools[a.lastTools.length - 1] : '';\n    const file = a.filesTouched && a.filesTouched.length ? basename(a.filesTouched[a.filesTouched.length - 1]) : '';\n    if (tool && file) bits.push(tool + ' ' + file);\n    else if (tool) bits.push(tool);\n    else if (file) bits.push(file);\n    return bits.join(' \u00B7 ');\n  }\n\n  function renderClaudeList() {\n    const recent = recentSessions();\n    claudeCount.textContent = String(recent.length);\n    while (claudeList.firstChild) claudeList.removeChild(claudeList.firstChild);\n    if (recent.length === 0) {\n      const li = document.createElement('li');\n      li.className = 'empty';\n      li.textContent = '(idle)';\n      claudeList.appendChild(li);\n      return;\n    }\n    // Sort: errors first, then waiting, then working, then by mtime.\n    const stateRank = { error: 0, waiting: 1, working: 2, unknown: 3 };\n    const rows = recent.slice().sort((a, b) => {\n      const ra = stateRank[a.state] ?? 9;\n      const rb = stateRank[b.state] ?? 9;\n      if (ra !== rb) return ra - rb;\n      return new Date(b.lastMtime).getTime() - new Date(a.lastMtime).getTime();\n    }).slice(0, 5);\n    for (const s of rows) {\n      const li = document.createElement('li');\n      if (rowOpen.has(s.sessionId)) li.classList.add('row-open');\n      // pip + project + relative-time render as a single horizontal\n      // .head strip. The trail + actions render BELOW the head when\n      // the row is open (li is flex-column).\n      const head = document.createElement('div');\n      head.className = 'head';\n      const pip = document.createElement('span');\n      pip.className = 'pip ' + (s.state || 'unknown');\n      const proj = document.createElement('span');\n      proj.className = 'proj';\n      proj.textContent = s.project;\n      const when = document.createElement('span');\n      when.className = 'when';\n      when.textContent = relativeTime(s.lastMtime);\n      head.appendChild(pip);\n      head.appendChild(proj);\n      head.appendChild(when);\n      li.appendChild(head);\n\n      // O2 (Tier 2) \u2014 one-line structural activity under the row head.\n      // \"what it's doing\" without any conversation content.\n      const actLine = formatActivity(s);\n      if (actLine) {\n        const act = document.createElement('div');\n        act.className = 'act';\n        act.textContent = actLine;\n        li.appendChild(act);\n      }\n\n      // Phase 3 \u2014 collapsible state-transition trail\n      const trail = document.createElement('div');\n      trail.className = 'trail';\n      renderTrail(trail, s);\n      li.appendChild(trail);\n\n      // Phase 3.5 \u2014 action buttons (Open in Finder / Copy resume)\n      const actions = document.createElement('div');\n      actions.className = 'actions';\n      renderActions(actions, s);\n      li.appendChild(actions);\n\n      li.title = s.state + (s.stateReason ? ' (' + s.stateReason + ')' : '')\n               + ' \u00B7 ' + s.sessionId\n               + '\\nclick: expand timeline \u00B7 double-click: copy sessionId';\n      li.addEventListener('click', () => {\n        if (rowOpen.has(s.sessionId)) rowOpen.delete(s.sessionId);\n        else rowOpen.add(s.sessionId);\n        renderClaudeList();\n      });\n      li.addEventListener('dblclick', async (ev) => {\n        ev.stopPropagation();\n        try { await navigator.clipboard.writeText(s.sessionId); } catch (_) {}\n      });\n      claudeList.appendChild(li);\n    }\n  }\n\n  /**\n   * Phase 3.5 \u2014 render the inline action buttons for one Claude session.\n   * Each session has a cwd (from .cwd top-level field in the jsonl)\n   * and a sessionId. We expose two actions:\n   *   - Open in Finder  \u2014 opens the cwd folder\n   *   - Copy resume cmd \u2014 clipboard: cd \"<cwd>\" && claude --resume <sid>\n   */\n  function renderActions(container, s) {\n    const cwd = s.cwd || '';\n    const hasCwd = cwd.startsWith('/');\n\n    const openBtn = document.createElement('button');\n    openBtn.type = 'button';\n    openBtn.textContent = '\uD83D\uDCC1 Open folder';\n    openBtn.disabled = !hasCwd;\n    openBtn.title = hasCwd ? cwd : 'No cwd recorded in this session';\n    openBtn.addEventListener('click', (e) => {\n      e.stopPropagation();\n      if (!hasCwd) return;\n      if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.island) {\n        window.webkit.messageHandlers.island.postMessage({\n          type: 'open_path',\n          path: cwd,\n        });\n      } else {\n        // Browser fallback: copy the path so the user can paste in Finder.\n        navigator.clipboard.writeText(cwd).catch(() => {});\n      }\n    });\n    container.appendChild(openBtn);\n\n    const copyBtn = document.createElement('button');\n    copyBtn.type = 'button';\n    copyBtn.textContent = '\uD83D\uDCCB Resume cmd';\n    copyBtn.disabled = !hasCwd;\n    const cmd = hasCwd\n      ? 'cd ' + JSON.stringify(cwd) + ' && claude --resume ' + s.sessionId\n      : 'claude --resume ' + s.sessionId;\n    copyBtn.title = cmd;\n    copyBtn.addEventListener('click', async (e) => {\n      e.stopPropagation();\n      try {\n        await navigator.clipboard.writeText(cmd);\n        const orig = copyBtn.textContent;\n        copyBtn.textContent = '\u2713 copied';\n        setTimeout(() => { copyBtn.textContent = orig; }, 1200);\n      } catch (_) {}\n    });\n    container.appendChild(copyBtn);\n  }\n\n  function renderTrail(container, s) {\n    const h = stateHistory.get(s.sessionId) || [];\n    if (h.length === 0) {\n      container.textContent = '(no transitions recorded yet)';\n      return;\n    }\n    // Render newest first so the right-most reads as \"right now\".\n    const ordered = h.slice();\n    for (let i = 0; i < ordered.length; i++) {\n      const entry = ordered[i];\n      const tdot = document.createElement('span');\n      tdot.className = 'tdot ' + (entry.state || 'unknown');\n      container.appendChild(tdot);\n      const span = document.createElement('span');\n      span.textContent = entry.state + ' \u00B7 ' + relativeTime(entry.ts);\n      container.appendChild(span);\n      if (i < ordered.length - 1) {\n        const sep = document.createElement('span');\n        sep.textContent = '  \u2192  ';\n        sep.style.color = 'rgba(255,255,255,0.15)';\n        container.appendChild(sep);\n      }\n    }\n  }\n\n  function expandPanel(open) {\n    if (body.classList.contains('expanded') === open) return;\n    body.classList.toggle('expanded', open);\n    // Tell the native container (LisaIsland.app, Phase 2.2+) so it can\n    // resize its NSWindow \u2014 the pill window is sized just for the pill\n    // when collapsed, and grows to host the expand panel on open.\n    // Falls back gracefully when running in a plain browser tab.\n    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.island) {\n      window.webkit.messageHandlers.island.postMessage({\n        type: open ? 'expand' : 'collapse'\n      });\n    }\n  }\n\n  // \u2500\u2500 Interaction \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  //\n  // When running inside LisaIsland.app (Phase 2.1+), the native window\n  // owns drag and click-vs-drag resolution: Swift's IslandWindow\n  // intercepts mouseDown in sendEvent and runs a synchronous\n  // mouseDragged loop. If movement > 4px \u2192 drag (setFrameOrigin each\n  // tick, no IPC roundtrip). If no movement \u2192 Swift synthesizes\n  // pill.click() here so this click handler still fires.\n  //\n  // In a plain browser tab there's no native container \u2014 the click\n  // handler runs normally. Hover-to-expand also works in both modes:\n  // when the native window is in \"passthrough\" state for the\n  // non-pill area, mouseenter still fires on the WKWebView once the\n  // cursor crosses INTO the pill region.\n\n  let hoverTimer = null;\n  pill.addEventListener('mouseenter', () => {\n    clearTimeout(hoverTimer);\n    hoverTimer = setTimeout(() => expandPanel(true), 250);\n  });\n  pill.addEventListener('mouseleave', () => {\n    clearTimeout(hoverTimer);\n    // Don't collapse if the mouse just moved into the expand panel.\n    setTimeout(() => {\n      if (!expand.matches(':hover')) expandPanel(false);\n    }, 200);\n  });\n  expand.addEventListener('mouseleave', () => expandPanel(false));\n\n  pill.addEventListener('click', (e) => {\n    e.preventDefault();\n    expandPanel(!body.classList.contains('expanded'));\n  });\n  pill.addEventListener('dblclick', (e) => {\n    e.preventDefault();\n    openFull();\n  });\n\n  function openFull(prefill) {\n    // If a Swift container is present (Phase 2), prefer to delegate. Pass the\n    // optional prefill text so the app can drop it into the chat composer.\n    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.island) {\n      window.webkit.messageHandlers.island.postMessage({ type: 'open_full_gui', prefill: prefill || '' });\n    } else {\n      window.open(prefill ? '/?prefill=' + encodeURIComponent(prefill) : '/', '_blank');\n    }\n  }\n  btnOpen.addEventListener('click', (e) => { e.stopPropagation(); openFull(); });\n\n  // Optimize \u25B8 \u2014 prefill the suggested task into the chat for the user to\n  // confirm (and then Lisa can dispatch a coding agent). Never auto-runs.\n  if (suggAct) {\n    suggAct.addEventListener('click', (e) => {\n      e.stopPropagation();\n      const s = state.suggestion;\n      if (!s) return;\n      const prompt =\n        s.task +\n        '\\n\\n(Suggested from my screen: \"' + s.title + '\". ' +\n        'If this is worth doing, dispatch a coding agent for it \u2014 confirm the repo/dir with me first.)';\n      openFull(prompt);\n    });\n  }\n  btnDismiss.addEventListener('click', async (e) => {\n    e.stopPropagation();\n    if (!state.unread) return;\n    try { await fetch('/api/island/dismiss-unread', { method: 'POST' }); } catch (_) {}\n    state.unread = false;\n    state.idleText = '';\n    refreshDot();\n    refreshPanel();\n  });\n\n  // \u2500\u2500 Server polling for richer state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  let backoff = 5_000;\n  async function pollPing() {\n    try {\n      const r = await fetch('/api/island/ping', { cache: 'no-store' });\n      if (!r.ok) throw new Error('not ok');\n      const j = await r.json();\n      state.online  = !!j.online;\n      state.unread  = !!j.has_unread_idle_message;\n      state.idleText = j.last_idle_message_text || '';\n      state.desire  = j.current_desire || null;\n      if (j.mood) setAvatar(j.mood);\n      backoff = 5_000;\n    } catch (_) {\n      state.online = false;\n    }\n    refreshDot();\n    refreshPanel();\n  }\n\n  // \u2500\u2500 SSE subscription for instant pulses \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  let es = null;\n  function subscribe() {\n    try { if (es) es.close(); } catch (_) {}\n    es = new EventSource('/events');\n    es.addEventListener('open', () => {\n      state.online = true;\n      refreshDot();\n      refreshPanel();\n    });\n    es.addEventListener('message', (ev) => {\n      let m;\n      try { m = JSON.parse(ev.data); } catch (_) { return; }\n      switch (m.type) {\n        case 'mood':\n          setAvatar(m.slug);\n          break;\n        case 'chat_start':\n          state.thinking = true;\n          refreshDot();\n          break;\n        case 'chat_end':\n          state.thinking = false;\n          refreshDot();\n          break;\n        case 'idle_start':\n          state.dreaming = true;\n          refreshDot();\n          break;\n        case 'idle_done':\n        case 'idle_error':\n          state.dreaming = false;\n          refreshDot();\n          break;\n        case 'idle_message':\n          state.dreaming = false;\n          state.unread = true;\n          state.idleText = (m.text || '').slice(0, 1000);\n          refreshDot();\n          refreshPanel();\n          // One subtle pulse so a watching user notices.\n          document.body.animate(\n            [{ opacity: 0.7 }, { opacity: 1 }, { opacity: 0.85 }],\n            { duration: 600, iterations: 2 },\n          );\n          break;\n        case 'screen_suggestion':\n          if (m.title && m.task) {\n            state.suggestion = { title: m.title, rationale: m.rationale || '', task: m.task, at: m.at };\n            refreshPanel();\n            // gentle pulse + auto-expand so a watching user notices\n            expandPanel(true);\n            document.body.animate(\n              [{ opacity: 0.75 }, { opacity: 1 }],\n              { duration: 500, iterations: 2 },\n            );\n          }\n          break;\n        case 'claude_session_update':\n          upsertClaudeSession({\n            project: m.projectLabel,\n            projectEncoded: m.projectEncoded,\n            sessionId: m.sessionId,\n            lastMtime: m.ts,\n            state: m.state || 'unknown',\n            stateReason: m.stateReason || '',\n            cwd: m.cwd || '',\n          });\n          refreshDot();\n          refreshPanel();\n          break;\n      }\n    });\n    es.addEventListener('error', () => {\n      state.online = false;\n      refreshDot();\n      refreshPanel();\n      // Auto-retry: SSE EventSource reconnects on its own, but if the page\n      // server is down entirely we'll keep firing 'error' until it's back.\n    });\n  }\n\n  // \u2500\u2500 Claude Code session helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n  function upsertClaudeSession(s) {\n    const idx = state.claudeSessions.findIndex(\n      (x) => x.sessionId === s.sessionId\n    );\n    const prevState = idx >= 0 ? state.claudeSessions[idx].state : null;\n    if (idx >= 0) state.claudeSessions[idx] = s;\n    else state.claudeSessions.push(s);\n    pruneClaudeSessions();\n\n    // Phase 3 \u2014 record transition + maybe notify on entering \"waiting\".\n    const transitioned = recordStateHistory(s.sessionId, {\n      state: s.state,\n      reason: s.stateReason,\n      lastMtime: s.lastMtime,\n    });\n    if (transitioned) maybeNotifyWaiting(prevState, s);\n  }\n\n  function pruneClaudeSessions() {\n    const cutoff = Date.now() - CLAUDE_ACTIVE_WINDOW_MS;\n    state.claudeSessions = state.claudeSessions.filter(\n      (s) => new Date(s.lastMtime).getTime() >= cutoff\n    );\n  }\n\n  async function fetchClaudeSessions() {\n    try {\n      const r = await fetch('/api/claude/sessions', { cache: 'no-store' });\n      if (!r.ok) return;\n      const j = await r.json();\n      if (Array.isArray(j.sessions)) {\n        state.claudeSessions = j.sessions.map((s) => ({\n          project: s.project,\n          projectEncoded: s.projectEncoded,\n          sessionId: s.sessionId,\n          lastMtime: s.lastMtime,\n          state: s.state || 'unknown',\n          stateReason: s.stateReason || '',\n          cwd: s.cwd || '',\n        }));\n        // Phase 3 \u2014 seed each session's history with its current state\n        // so the trail isn't empty on first open. Doesn't notify (no\n        // transition implied by initial load).\n        for (const s of state.claudeSessions) {\n          recordStateHistory(s.sessionId, {\n            state: s.state,\n            reason: s.stateReason,\n            lastMtime: s.lastMtime,\n          });\n        }\n      }\n    } catch (_) {\n      // server might not yet have the endpoint (older LISA) \u2014 silent\n    }\n  }\n\n  // Phase 3 \u2014 notification permission opt-in. The CTA is only visible\n  // when permission is in the default (un-asked) state.\n  notifyCta.addEventListener('click', (e) => {\n    e.stopPropagation();\n    requestNotificationPermission();\n  });\n  notifyCta.addEventListener('keydown', (e) => {\n    if (e.key === 'Enter' || e.key === ' ') requestNotificationPermission();\n  });\n\n  // \u2500\u2500 Bootstrap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  setAvatar('neutral');\n  pollPing();\n  fetchClaudeSessions().then(() => { refreshDot(); refreshPanel(); });\n  subscribe();\n  refreshNotifyCta();\n  // A fresh island picks up the most recent screen-advisor suggestion (if the\n  // feature is on and one was made before this widget loaded).\n  fetch('/api/screen-advisor/latest', { cache: 'no-store' })\n    .then((r) => r.ok ? r.json() : null)\n    .then((j) => { if (j && j.suggestion) { state.suggestion = j.suggestion; refreshPanel(); } })\n    .catch(() => {});\n  // Lightweight resync \u2014 covers cases where SSE silently disconnected\n  // (laptop sleep, network blip) and we need to refresh state.\n  setInterval(pollPing, 30_000);\n  setInterval(fetchClaudeSessions, 60_000);\n  // Re-render every 15s so \"Xs ago\" / \"Xm ago\" labels stay fresh and\n  // stale sessions fall off the list without a fresh update event.\n  setInterval(() => {\n    pruneClaudeSessions();\n    refreshDot();\n    refreshPanel();\n  }, 15_000);\n})();\n</script>\n</body>\n</html>\n";
+export declare const ISLAND_HTML: string;
 //# sourceMappingURL=island.d.ts.map

package/dist/web/island.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"island.d.ts","sourceRoot":"","sources":["../../src/web/island.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,WAAW,0r0CAmkCvB,CAAC"}
+{"version":3,"file":"island.d.ts","sourceRoot":"","sources":["../../src/web/island.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,eAAO,MAAM,WAAW,QAs6CvB,CAAC"}