@oratis/lisa 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +5 -0
  2. package/dist/idle/runner.d.ts +12 -0
  3. package/dist/idle/runner.d.ts.map +1 -1
  4. package/dist/idle/runner.js +33 -2
  5. package/dist/idle/runner.js.map +1 -1
  6. package/dist/integrations/dispatch-ledger.d.ts +51 -0
  7. package/dist/integrations/dispatch-ledger.d.ts.map +1 -0
  8. package/dist/integrations/dispatch-ledger.js +106 -0
  9. package/dist/integrations/dispatch-ledger.js.map +1 -0
  10. package/dist/soul/birth.d.ts.map +1 -1
  11. package/dist/soul/birth.js +8 -0
  12. package/dist/soul/birth.js.map +1 -1
  13. package/dist/tools/dispatch_agent.d.ts.map +1 -1
  14. package/dist/tools/dispatch_agent.js +13 -1
  15. package/dist/tools/dispatch_agent.js.map +1 -1
  16. package/dist/tools/registry.d.ts.map +1 -1
  17. package/dist/tools/registry.js +7 -0
  18. package/dist/tools/registry.js.map +1 -1
  19. package/dist/tools/signal_agent.d.ts +36 -0
  20. package/dist/tools/signal_agent.d.ts.map +1 -0
  21. package/dist/tools/signal_agent.js +140 -0
  22. package/dist/tools/signal_agent.js.map +1 -0
  23. package/dist/web/island.d.ts +1 -1
  24. package/dist/web/island.d.ts.map +1 -1
  25. package/dist/web/island.js +72 -23
  26. package/dist/web/island.js.map +1 -1
  27. package/dist/web/lisa-html.d.ts +1 -1
  28. package/dist/web/lisa-html.d.ts.map +1 -1
  29. package/dist/web/lisa-html.js +111 -4
  30. package/dist/web/lisa-html.js.map +1 -1
  31. package/dist/web/server.d.ts.map +1 -1
  32. package/dist/web/server.js +54 -0
  33. package/dist/web/server.js.map +1 -1
  34. package/package.json +1 -1
package/dist/web/island.d.ts CHANGED
@@ -8,5 +8,5 @@
8
8
  *
9
9
  * No build step, no framework — single string of inline HTML/CSS/JS.
10
10
  */
11
- 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: #e4e4e6;\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.06);\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(--bg);\n border: 1px solid var(--border);\n border-radius: 22px;\n padding: 5px 14px 5px 5px;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);\n cursor: pointer;\n transition: transform 200ms ease, opacity 200ms ease;\n max-width: 280px;\n }\n #pill:hover { transform: translateY(1px); }\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(--bg-strong);\n border: 1px solid var(--border);\n border-radius: 18px;\n padding: 16px 18px;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);\n font-size: 12.5px;\n line-height: 1.55;\n box-sizing: border-box;\n opacity: 0;\n transform: translateY(-4px);\n pointer-events: none;\n transition: opacity 200ms ease, transform 200ms ease;\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 #claude-list .when { color: var(--fg-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 11px; }\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: 2px 0 0 18px;\n font-size: 10.5px;\n color: var(--fg-dim);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\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 }\n button {\n flex: 1;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid var(--border);\n color: var(--fg);\n padding: 8px 12px;\n border-radius: 10px;\n font-size: 11.5px;\n cursor: pointer;\n font-family: inherit;\n transition: background 150ms ease;\n }\n button:hover { background: rgba(255, 255, 255, 0.10); }\n button:active { background: rgba(255, 255, 255, 0.15); }\n button.muted { opacity: 0.5; }\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</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=\"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 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 };\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 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() {\n // If a Swift container is present (Phase 2), prefer to delegate.\n if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.island) {\n window.webkit.messageHandlers.island.postMessage({ type: 'open_full_gui' });\n } else {\n window.open('/', '_blank');\n }\n }\n btnOpen.addEventListener('click', (e) => { e.stopPropagation(); openFull(); });\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 '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 // 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";
11
+ 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</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=\"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 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 };\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 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() {\n // If a Swift container is present (Phase 2), prefer to delegate.\n if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.island) {\n window.webkit.messageHandlers.island.postMessage({ type: 'open_full_gui' });\n } else {\n window.open('/', '_blank');\n }\n }\n btnOpen.addEventListener('click', (e) => { e.stopPropagation(); openFull(); });\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 '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 // 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";
12
12
  //# sourceMappingURL=island.d.ts.map
package/dist/web/island.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"island.d.ts","sourceRoot":"","sources":["../../src/web/island.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,WAAW,qnpCAm9BvB,CAAC"}
1
+ {"version":3,"file":"island.d.ts","sourceRoot":"","sources":["../../src/web/island.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,WAAW,6muCAogCvB,CAAC"}
package/dist/web/island.js CHANGED
@@ -20,14 +20,24 @@ export const ISLAND_HTML = `<!doctype html>
20
20
  color-scheme: dark;
21
21
  --bg: rgba(8, 12, 24, 0.92);
22
22
  --bg-strong: rgba(8, 12, 24, 0.96);
23
- --fg: #e4e4e6;
23
+ --fg: #e6e8ee;
24
24
  --fg-dim: #9ba3b8;
25
25
  --fg-faint: #6b7280;
26
26
  --accent: #6ad4ff;
27
27
  --accent-warm: #ffd066;
28
28
  --accent-dream: #b487ff;
29
29
  --accent-claude: #ff8c42;
30
- --border: rgba(255, 255, 255, 0.06);
30
+ --border: rgba(255, 255, 255, 0.08);
31
+ /* 1px top inner highlight that reads as a glass bevel */
32
+ --hairline: rgba(255, 255, 255, 0.12);
33
+ /* Layered materials — a soft vertical gradient gives the panels depth
34
+ instead of a flat fill, closer to the macOS Notch look. */
35
+ --pill-grad: linear-gradient(180deg, rgba(28, 35, 56, 0.94) 0%, rgba(10, 14, 28, 0.94) 100%);
36
+ --panel-grad: linear-gradient(180deg, rgba(22, 28, 46, 0.96) 0%, rgba(9, 13, 25, 0.97) 72%);
37
+ --shadow-pill: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 var(--hairline) inset;
38
+ --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.55), 0 1px 0 var(--hairline) inset;
39
+ /* Gentle overshoot easing for a springy, alive feel. */
40
+ --spring: cubic-bezier(0.22, 1, 0.36, 1);
31
41
  }
32
42
  html, body {
33
43
  margin: 0;
@@ -52,18 +62,24 @@ export const ISLAND_HTML = `<!doctype html>
52
62
  display: inline-flex;
53
63
  align-items: center;
54
64
  gap: 8px;
55
- background: var(--bg);
65
+ background: var(--pill-grad);
56
66
  border: 1px solid var(--border);
57
67
  border-radius: 22px;
58
68
  padding: 5px 14px 5px 5px;
59
- backdrop-filter: blur(20px);
60
- -webkit-backdrop-filter: blur(20px);
61
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
69
+ backdrop-filter: blur(20px) saturate(1.4);
70
+ -webkit-backdrop-filter: blur(20px) saturate(1.4);
71
+ box-shadow: var(--shadow-pill);
62
72
  cursor: pointer;
63
- transition: transform 200ms ease, opacity 200ms ease;
73
+ transition: transform 260ms var(--spring), box-shadow 260ms var(--spring);
64
74
  max-width: 280px;
65
75
  }
66
- #pill:hover { transform: translateY(1px); }
76
+ /* Lift toward the cursor (the old rule pushed it *down*, which read as
77
+ a press). Subtle scale + deeper shadow sells the float. */
78
+ #pill:hover {
79
+ transform: translateY(-1px) scale(1.015);
80
+ box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.16) inset;
81
+ }
82
+ #pill:active { transform: translateY(0) scale(0.99); }
67
83
 
68
84
  /* Avatar is an <img> not a background-image — more reliable in
69
85
  WKWebView and lets us crop into the face via object-position.
@@ -132,20 +148,21 @@ export const ISLAND_HTML = `<!doctype html>
132
148
  max-height: calc(100vh - 70px);
133
149
  overflow-y: auto;
134
150
  overscroll-behavior: contain;
135
- background: var(--bg-strong);
151
+ background: var(--panel-grad);
136
152
  border: 1px solid var(--border);
137
153
  border-radius: 18px;
138
154
  padding: 16px 18px;
139
- backdrop-filter: blur(20px);
140
- -webkit-backdrop-filter: blur(20px);
141
- box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
155
+ backdrop-filter: blur(24px) saturate(1.4);
156
+ -webkit-backdrop-filter: blur(24px) saturate(1.4);
157
+ box-shadow: var(--shadow-panel);
142
158
  font-size: 12.5px;
143
159
  line-height: 1.55;
144
160
  box-sizing: border-box;
145
161
  opacity: 0;
146
- transform: translateY(-4px);
162
+ transform: translateY(-6px) scale(0.985);
163
+ transform-origin: top center;
147
164
  pointer-events: none;
148
- transition: opacity 200ms ease, transform 200ms ease;
165
+ transition: opacity 240ms var(--spring), transform 240ms var(--spring);
149
166
  }
150
167
  body.expanded #expand {
151
168
  opacity: 1;
@@ -229,14 +246,32 @@ export const ISLAND_HTML = `<!doctype html>
229
246
  gap: 10px;
230
247
  }
231
248
  #claude-list .proj { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
232
- #claude-list .when { color: var(--fg-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 11px; }
249
+ /* Relative-time reads as a small pill chip (cf. the "<1m" chip in the
250
+ reference) — sits cleaner against the row than bare text. */
251
+ #claude-list .when {
252
+ color: var(--fg-dim);
253
+ flex-shrink: 0;
254
+ font-variant-numeric: tabular-nums;
255
+ font-size: 10px;
256
+ padding: 2px 7px;
257
+ border-radius: 999px;
258
+ background: rgba(255, 255, 255, 0.05);
259
+ border: 1px solid rgba(255, 255, 255, 0.07);
260
+ }
233
261
  #claude-list .empty { padding: 8px 12px; color: var(--fg-faint); font-style: italic; }
234
262
  /* O2 — Tier-2 activity line: what the session is structurally doing. */
235
263
  #claude-list .act {
236
- margin: 2px 0 0 18px;
264
+ margin: 4px 0 0 18px;
265
+ padding: 5px 9px;
237
266
  font-size: 10.5px;
238
267
  color: var(--fg-dim);
239
268
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
269
+ /* Inset monospace card with an accent rail — echoes the reference's
270
+ code-diff panel without needing the actual diff content. */
271
+ background: rgba(255, 255, 255, 0.035);
272
+ border: 1px solid rgba(255, 255, 255, 0.05);
273
+ border-left: 2px solid rgba(255, 140, 66, 0.5);
274
+ border-radius: 7px;
240
275
  overflow: hidden;
241
276
  text-overflow: ellipsis;
242
277
  white-space: nowrap;
@@ -325,22 +360,36 @@ export const ISLAND_HTML = `<!doctype html>
325
360
  #actions {
326
361
  display: flex;
327
362
  gap: 8px;
363
+ margin-top: 4px;
328
364
  }
329
365
  button {
330
366
  flex: 1;
331
- background: rgba(255, 255, 255, 0.05);
367
+ background: rgba(255, 255, 255, 0.06);
332
368
  border: 1px solid var(--border);
333
369
  color: var(--fg);
334
- padding: 8px 12px;
335
- border-radius: 10px;
370
+ padding: 9px 12px;
371
+ border-radius: 11px;
336
372
  font-size: 11.5px;
373
+ font-weight: 550;
337
374
  cursor: pointer;
338
375
  font-family: inherit;
339
- transition: background 150ms ease;
376
+ transition: background 160ms var(--spring), transform 160ms var(--spring), box-shadow 160ms var(--spring);
377
+ }
378
+ button:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-1px); }
379
+ button:active { background: rgba(255, 255, 255, 0.16); transform: translateY(0); }
380
+ button.muted { opacity: 0.6; }
381
+ /* Primary CTA — accent-filled with a soft glow, the way the reference
382
+ elevates its main action above the secondary ones. */
383
+ #btn-open {
384
+ background: linear-gradient(180deg, rgba(106, 212, 255, 0.22), rgba(106, 212, 255, 0.12));
385
+ border-color: rgba(106, 212, 255, 0.35);
386
+ color: #d6f3ff;
387
+ box-shadow: 0 4px 14px rgba(106, 212, 255, 0.12);
388
+ }
389
+ #btn-open:hover {
390
+ background: linear-gradient(180deg, rgba(106, 212, 255, 0.30), rgba(106, 212, 255, 0.16));
391
+ box-shadow: 0 6px 18px rgba(106, 212, 255, 0.22);
340
392
  }
341
- button:hover { background: rgba(255, 255, 255, 0.10); }
342
- button:active { background: rgba(255, 255, 255, 0.15); }
343
- button.muted { opacity: 0.5; }
344
393
 
345
394
  /* Offline state — desaturate + dim */
346
395
  body.offline #avatar { filter: grayscale(1); opacity: 0.5; }
package/dist/web/island.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"island.js","sourceRoot":"","sources":["../../src/web/island.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAm9B1B,CAAC"}
1
+ {"version":3,"file":"island.js","sourceRoot":"","sources":["../../src/web/island.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAogC1B,CAAC"}