npm - @kykiles/opencode-mem - Versions diffs - 13.10.2 - Mend

@kykiles/opencode-mem 13.10.2

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 (89) hide show

package/LICENSE +202 -0
package/README.md +429 -0
package/dist/npx-cli/index.js +9798 -0
package/dist/opencode-plugin/index.js +70 -0
package/package.json +187 -0
package/plugin/.mcp.json +12 -0
package/plugin/bun.lock +160 -0
package/plugin/hooks/bugfixes-2026-01-10.md +92 -0
package/plugin/hooks/hooks.json +87 -0
package/plugin/modes/code--ar.json +24 -0
package/plugin/modes/code--bn.json +24 -0
package/plugin/modes/code--chill.json +8 -0
package/plugin/modes/code--cs.json +24 -0
package/plugin/modes/code--da.json +24 -0
package/plugin/modes/code--de.json +24 -0
package/plugin/modes/code--el.json +24 -0
package/plugin/modes/code--es.json +24 -0
package/plugin/modes/code--fi.json +24 -0
package/plugin/modes/code--fr.json +24 -0
package/plugin/modes/code--he.json +24 -0
package/plugin/modes/code--hi.json +24 -0
package/plugin/modes/code--hu.json +24 -0
package/plugin/modes/code--id.json +24 -0
package/plugin/modes/code--it.json +24 -0
package/plugin/modes/code--ja.json +24 -0
package/plugin/modes/code--ko.json +24 -0
package/plugin/modes/code--nl.json +24 -0
package/plugin/modes/code--no.json +24 -0
package/plugin/modes/code--pl.json +24 -0
package/plugin/modes/code--pt-br.json +24 -0
package/plugin/modes/code--ro.json +24 -0
package/plugin/modes/code--ru.json +24 -0
package/plugin/modes/code--sv.json +24 -0
package/plugin/modes/code--th.json +24 -0
package/plugin/modes/code--tr.json +24 -0
package/plugin/modes/code--uk.json +24 -0
package/plugin/modes/code--ur.json +25 -0
package/plugin/modes/code--vi.json +24 -0
package/plugin/modes/code--zh.json +24 -0
package/plugin/modes/code.json +139 -0
package/plugin/modes/email-investigation.json +120 -0
package/plugin/modes/law-study--chill.json +7 -0
package/plugin/modes/law-study-CLAUDE.md +85 -0
package/plugin/modes/law-study.json +120 -0
package/plugin/modes/meme-tokens.json +125 -0
package/plugin/package.json +45 -0
package/plugin/scripts/bun-runner.js +238 -0
package/plugin/scripts/context-generator.cjs +825 -0
package/plugin/scripts/mcp-server.cjs +249 -0
package/plugin/scripts/server-service.cjs +9939 -0
package/plugin/scripts/statusline-counts.js +40 -0
package/plugin/scripts/transcript-watcher.cjs +29 -0
package/plugin/scripts/version-check.js +193 -0
package/plugin/scripts/worker-service.cjs +2238 -0
package/plugin/scripts/worker-wrapper.cjs +2 -0
package/plugin/skills/babysit/SKILL.md +87 -0
package/plugin/skills/design-is/SKILL.md +312 -0
package/plugin/skills/do/SKILL.md +45 -0
package/plugin/skills/how-it-works/SKILL.md +22 -0
package/plugin/skills/how-it-works/onboarding-explainer.md +17 -0
package/plugin/skills/knowledge-agent/SKILL.md +80 -0
package/plugin/skills/learn-codebase/SKILL.md +21 -0
package/plugin/skills/make-plan/SKILL.md +67 -0
package/plugin/skills/mem-search/SKILL.md +131 -0
package/plugin/skills/oh-my-issues/SKILL.md +226 -0
package/plugin/skills/pathfinder/SKILL.md +111 -0
package/plugin/skills/smart-explore/SKILL.md +193 -0
package/plugin/skills/standup/SKILL.md +142 -0
package/plugin/skills/standup/agent-brief.md +47 -0
package/plugin/skills/standup/standup.mjs +662 -0
package/plugin/skills/timeline-report/SKILL.md +211 -0
package/plugin/skills/version-bump/SKILL.md +74 -0
package/plugin/skills/version-bump/scripts/generate_changelog.js +34 -0
package/plugin/skills/weekly-digests/SKILL.md +262 -0
package/plugin/skills/what-the/SKILL.md +6 -0
package/plugin/skills/wowerpoint/SKILL.md +205 -0
package/plugin/sqlite/SessionStore.js +764 -0
package/plugin/sqlite/observations/files.js +10 -0
package/plugin/ui/assets/fonts/monaspace-radon-var.woff +0 -0
package/plugin/ui/assets/fonts/monaspace-radon-var.woff2 +0 -0
package/plugin/ui/claude-mem-logo-for-dark-mode.webp +0 -0
package/plugin/ui/claude-mem-logo-stylized.png +0 -0
package/plugin/ui/claude-mem-logomark.webp +0 -0
package/plugin/ui/icon-thick-completed.svg +8 -0
package/plugin/ui/icon-thick-investigated.svg +8 -0
package/plugin/ui/icon-thick-learned.svg +12 -0
package/plugin/ui/icon-thick-next-steps.svg +8 -0
package/plugin/ui/viewer-bundle.js +65 -0
package/plugin/ui/viewer.html +2402 -0

package/plugin/ui/viewer.html ADDED Viewed

@@ -0,0 +1,2402 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>opencode-mem viewer</title>
+  <link rel="icon" type="image/webp" href="opencode-mem-logomark.webp">
+  <style>
+    @font-face {
+      font-family: 'Monaspace Radon';
+      src: url('assets/fonts/monaspace-radon-var.woff2') format('woff2-variations'),
+        url('assets/fonts/monaspace-radon-var.woff') format('woff-variations');
+      font-weight: 200 900;
+      font-display: swap;
+    }
+    /* Theme Variables - Light Mode */
+    :root,
+    [data-theme="light"] {
+      --color-bg-primary: #ffffff;
+      --color-bg-secondary: #efebe4;
+      --color-bg-tertiary: #f0f0f0;
+      --color-bg-header: #f6f8fa;
+      --color-bg-card: #ffffff;
+      --color-bg-card-hover: #f6f8fa;
+      --color-bg-input: #ffffff;
+      --color-bg-button: #0969da;
+      --color-bg-button-hover: #1177e6;
+      --color-bg-button-active: #0860ca;
+      --color-bg-summary: #fffbf0;
+      --color-bg-prompt: #f6f3fb;
+      --color-bg-observation: #f0f6fb;
+      --color-bg-stat: #f6f8fa;
+      --color-bg-scrollbar-track: #ffffff;
+      --color-bg-scrollbar-thumb: #d1d5da;
+      --color-bg-scrollbar-thumb-hover: #b1b5ba;
+      --color-border-primary: #d0d7de;
+      --color-border-secondary: #d8dee4;
+      --color-border-hover: #0969da;
+      --color-border-focus: #0969da;
+      --color-border-summary: #d4a72c;
+      --color-border-summary-hover: #c29d29;
+      --color-border-prompt: #8250df;
+      --color-border-prompt-hover: #6e40c9;
+      --color-border-observation: #0969da;
+      --color-border-observation-hover: #0550ae;
+      --color-text-primary: #2b2520;
+      --color-text-secondary: #5a5248;
+      --color-text-tertiary: #726b5f;
+      --color-text-muted: #8f8a7e;
+      --color-text-header: #2b2520;
+      --color-text-title: #2b2520;
+      --color-text-subtitle: #5a5248;
+      --color-text-button: #ffffff;
+      --color-text-summary: #8a6116;
+      --color-text-observation: #2b2520;
+      --color-text-logo: #2b2520;
+      --color-accent-primary: #0969da;
+      --color-accent-focus: #0969da;
+      --color-accent-success: #1a7f37;
+      --color-accent-error: #d1242f;
+      --color-accent-summary: #9a6700;
+      --color-accent-prompt: #8250df;
+      --color-accent-observation: #0550ae;
+      --color-type-badge-bg: rgba(9, 105, 218, 0.12);
+      --color-type-badge-text: #0969da;
+      --color-summary-badge-bg: rgba(154, 103, 0, 0.12);
+      --color-summary-badge-text: #9a6700;
+      --color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
+      --color-prompt-badge-text: #8250df;
+      --color-observation-badge-bg: rgba(9, 105, 218, 0.12);
+      --color-observation-badge-text: #0550ae;
+      --color-skeleton-base: #d0d7de;
+      --color-skeleton-highlight: #e8ecef;
+      --shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
+      /* Font families */
+      --font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+    }
+    /* Theme Variables - Dark Mode */
+    [data-theme="dark"] {
+      --color-bg-primary: #1a1916;
+      --color-bg-secondary: #252320;
+      --color-bg-tertiary: #1f1d1a;
+      --color-bg-header: #1f1d1a;
+      --color-bg-card: #252320;
+      --color-bg-card-hover: #2d2a26;
+      --color-bg-input: #252320;
+      --color-bg-button: #0969da;
+      --color-bg-button-hover: #1177e6;
+      --color-bg-button-active: #0860ca;
+      --color-bg-summary: #2a2724;
+      --color-bg-prompt: #262033;
+      --color-bg-observation: #1a2332;
+      --color-bg-stat: #252320;
+      --color-bg-scrollbar-track: #1a1916;
+      --color-bg-scrollbar-thumb: #3a3834;
+      --color-bg-scrollbar-thumb-hover: #4a4540;
+      --color-border-primary: #3a3834;
+      --color-border-secondary: #3a3834;
+      --color-border-hover: #4a4540;
+      --color-border-focus: #58a6ff;
+      --color-border-summary: #7a6a50;
+      --color-border-summary-hover: #8b7960;
+      --color-border-prompt: #6e5b9e;
+      --color-border-prompt-hover: #7e6bae;
+      --color-border-observation: #527aa0;
+      --color-border-observation-hover: #6a8eb8;
+      --color-text-primary: #dcd6cc;
+      --color-text-secondary: #b8b0a4;
+      --color-text-tertiary: #938a7e;
+      --color-text-muted: #7a7266;
+      --color-text-header: #e8e2d8;
+      --color-text-title: #e8e2d8;
+      --color-text-subtitle: #b8b0a4;
+      --color-text-button: #ffffff;
+      --color-text-summary: #d4b888;
+      --color-text-observation: #a8b8c8;
+      --color-text-logo: #e0dad0;
+      --color-accent-primary: #58a6ff;
+      --color-accent-focus: #58a6ff;
+      --color-accent-success: #16c60c;
+      --color-accent-error: #e74856;
+      --color-accent-summary: #d4b888;
+      --color-accent-prompt: #8e7cbc;
+      --color-accent-observation: #79b8ff;
+      --color-type-badge-bg: rgba(88, 166, 255, 0.125);
+      --color-type-badge-text: #58a6ff;
+      --color-summary-badge-bg: rgba(212, 184, 136, 0.15);
+      --color-summary-badge-text: #d4b888;
+      --color-prompt-badge-bg: rgba(142, 124, 188, 0.15);
+      --color-prompt-badge-text: #9e8ccc;
+      --color-observation-badge-bg: rgba(121, 184, 255, 0.15);
+      --color-observation-badge-text: #79b8ff;
+      --color-skeleton-base: #3a3834;
+      --color-skeleton-highlight: #4a4540;
+      --shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
+      /* Font families */
+      --font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+    }
+    /* System preference default */
+    @media (prefers-color-scheme: light) {
+      :root:not([data-theme]) {
+        --color-bg-primary: #ffffff;
+        --color-bg-secondary: #f6f8fa;
+        --color-bg-tertiary: #f0f0f0;
+        --color-bg-header: #f6f8fa;
+        --color-bg-card: #ffffff;
+        --color-bg-card-hover: #f6f8fa;
+        --color-bg-input: #ffffff;
+        --color-bg-button: #0969da;
+        --color-bg-button-hover: #1177e6;
+        --color-bg-button-active: #0860ca;
+        --color-bg-summary: #fffbf0;
+        --color-bg-prompt: #f6f3fb;
+        --color-bg-observation: #f0f6fb;
+        --color-bg-stat: #f6f8fa;
+        --color-bg-scrollbar-track: #ffffff;
+        --color-bg-scrollbar-thumb: #d1d5da;
+        --color-bg-scrollbar-thumb-hover: #b1b5ba;
+        --color-border-primary: #d0d7de;
+        --color-border-secondary: #d8dee4;
+        --color-border-hover: #0969da;
+        --color-border-focus: #0969da;
+        --color-border-summary: #d4a72c;
+        --color-border-summary-hover: #c29d29;
+        --color-border-prompt: #8250df;
+        --color-border-prompt-hover: #6e40c9;
+        --color-border-observation: #0969da;
+        --color-border-observation-hover: #0550ae;
+        --color-text-primary: #24292f;
+        --color-text-secondary: #57606a;
+        --color-text-tertiary: #6e7781;
+        --color-text-muted: #8b949e;
+        --color-text-header: #24292f;
+        --color-text-title: #24292f;
+        --color-text-subtitle: #57606a;
+        --color-text-button: #ffffff;
+        --color-text-summary: #8a6116;
+        --color-text-observation: #24292f;
+        --color-text-logo: #24292f;
+        --color-accent-primary: #0969da;
+        --color-accent-focus: #0969da;
+        --color-accent-success: #1a7f37;
+        --color-accent-error: #d1242f;
+        --color-accent-summary: #9a6700;
+        --color-accent-prompt: #8250df;
+        --color-accent-observation: #0550ae;
+        --color-type-badge-bg: rgba(9, 105, 218, 0.12);
+        --color-type-badge-text: #0969da;
+        --color-summary-badge-bg: rgba(154, 103, 0, 0.12);
+        --color-summary-badge-text: #9a6700;
+        --color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
+        --color-prompt-badge-text: #8250df;
+        --color-observation-badge-bg: rgba(9, 105, 218, 0.12);
+        --color-observation-badge-text: #0550ae;
+        --color-skeleton-base: #d0d7de;
+        --color-skeleton-highlight: #e8ecef;
+        --shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
+        /* Font families */
+        --font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme]) {
+        --color-bg-primary: #1e1e1e;
+        --color-bg-secondary: #2d2d2d;
+        --color-bg-tertiary: #252526;
+        --color-bg-header: #252526;
+        --color-bg-card: #2d2d2d;
+        --color-bg-card-hover: #333333;
+        --color-bg-input: #2d2d2d;
+        --color-bg-button: #0969da;
+        --color-bg-button-hover: #1177e6;
+        --color-bg-button-active: #0860ca;
+        --color-bg-summary: #3d2f00;
+        --color-bg-prompt: #2d1b4e;
+        --color-bg-observation: #1a2332;
+        --color-bg-stat: #2d2d2d;
+        --color-bg-scrollbar-track: #1e1e1e;
+        --color-bg-scrollbar-thumb: #424242;
+        --color-bg-scrollbar-thumb-hover: #4e4e4e;
+        --color-border-primary: #404040;
+        --color-border-secondary: #404040;
+        --color-border-hover: #505050;
+        --color-border-focus: #58a6ff;
+        --color-border-summary: #9e6a03;
+        --color-border-summary-hover: #ae7a13;
+        --color-border-prompt: #6e40c9;
+        --color-border-prompt-hover: #8e6cdb;
+        --color-border-observation: #527aa0;
+        --color-border-observation-hover: #6a8eb8;
+        --color-text-primary: #cccccc;
+        --color-text-secondary: #a0a0a0;
+        --color-text-tertiary: #6e7681;
+        --color-text-muted: #8b949e;
+        --color-text-header: #e0e0e0;
+        --color-text-title: #e0e0e0;
+        --color-text-subtitle: #a0a0a0;
+        --color-text-button: #ffffff;
+        --color-text-summary: #f2cc60;
+        --color-text-observation: #a8b8c8;
+        --color-text-logo: #dadada;
+        --color-accent-primary: #58a6ff;
+        --color-accent-focus: #58a6ff;
+        --color-accent-success: #16c60c;
+        --color-accent-error: #e74856;
+        --color-accent-summary: #f2cc60;
+        --color-accent-prompt: #8e6cdb;
+        --color-accent-observation: #79b8ff;
+        --color-type-badge-bg: rgba(88, 166, 255, 0.125);
+        --color-type-badge-text: #58a6ff;
+        --color-summary-badge-bg: rgba(242, 204, 96, 0.125);
+        --color-summary-badge-text: #f2cc60;
+        --color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
+        --color-prompt-badge-text: #8e6cdb;
+        --color-observation-badge-bg: rgba(121, 184, 255, 0.15);
+        --color-observation-badge-text: #79b8ff;
+        --color-skeleton-base: #404040;
+        --color-skeleton-highlight: #505050;
+        --shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
+        /* Font families */
+        --font-terminal: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+      }
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+      background: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      font-size: 14px;
+      overflow: hidden;
+    }
+    .header {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--color-border-primary);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: linear-gradient(to bottom,
+        var(--color-bg-header) 0%,
+        var(--color-bg-primary) 100%);
+      backdrop-filter: blur(8px);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+    }
+    .header-main {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      min-width: 0;
+      flex-wrap: wrap;
+    }
+    .header h1 {
+      font-size: 17px;
+      font-weight: 500;
+      color: var(--color-text-header);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      line-height: 1;
+    }
+    .logomark {
+      height: 32px;
+      width: auto;
+    }
+    .logomark.spinning {
+      animation: spin 1.5s linear infinite;
+    }
+    .queue-bubble {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      background: var(--color-accent-primary);
+      color: var(--color-text-button);
+      font-size: 10px;
+      font-weight: 600;
+      font-family: 'Monaspace Radon', monospace;
+      height: 18px;
+      border-radius: 9px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 5px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      animation: pulse 2s ease-in-out infinite;
+      z-index: 10;
+    }
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+    }
+    .logo-text {
+      font-family: 'Monaspace Radon', monospace;
+      font-weight: 100;
+      font-size: 21px;
+      letter-spacing: -0.03em;
+      color: var(--color-text-logo);
+      line-height: 1;
+      padding-top: 1px;
+    }
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+    }
+    .settings-btn,
+    .theme-toggle-btn {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 6px;
+      padding: 0;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+    .settings-btn:hover,
+    .theme-toggle-btn:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-focus);
+      color: var(--color-text-primary);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    }
+    .settings-btn.active {
+      background: linear-gradient(135deg, var(--color-bg-button) 0%, var(--color-accent-primary) 100%);
+      border-color: var(--color-bg-button);
+      color: var(--color-text-button);
+      box-shadow: 0 2px 8px rgba(9, 105, 218, 0.25);
+    }
+    /* GitHub Stars Button - Similar to Community Button */
+    .github-stars-btn {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 6px;
+      padding: 0 14px;
+      height: 36px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      font-weight: 500;
+      text-decoration: none;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      white-space: nowrap;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+    .github-stars-btn:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-focus);
+      color: var(--color-text-primary);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    }
+    .github-stars-btn:active {
+      transform: translateY(0);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+    /* Stars count animation */
+    .stars-count {
+      animation: countUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+      display: inline-block;
+    }
+    .stars-loading {
+      opacity: 0.5;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes countUp {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .icon-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      color: var(--color-text-secondary);
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 6px;
+      text-decoration: none;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+    .icon-link:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-focus);
+      color: var(--color-text-primary);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    }
+    .settings-icon,
+    .theme-toggle-btn svg {
+      width: 18px;
+      height: 18px;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+    select,
+    input,
+    button {
+      background: var(--color-bg-input);
+      color: var(--color-text-primary);
+      border: 1px solid var(--color-border-primary);
+      padding: 6px 12px;
+      font-family: inherit;
+      font-size: 13px;
+      border-radius: 4px;
+      transition: all 0.15s ease;
+    }
+    .status select {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 6px;
+      padding: 0 32px 0 12px;
+      height: 36px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      max-width: 180px;
+    }
+    .status select:hover {
+      background-color: var(--color-bg-card-hover);
+      border-color: var(--color-border-focus);
+      color: var(--color-text-primary);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    }
+    .status select:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
+      transform: translateY(-1px);
+    }
+    select:hover,
+    input:hover {
+      border-color: var(--color-border-focus);
+    }
+    select:focus,
+    input:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: var(--shadow-focus);
+    }
+    button {
+      background: var(--color-bg-button);
+      color: var(--color-text-button);
+      border: none;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    button:hover:not(:disabled) {
+      background: var(--color-bg-button-hover);
+    }
+    button:active:not(:disabled) {
+      background: var(--color-bg-button-active);
+    }
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .feed {
+      flex: 1;
+      overflow-y: scroll;
+      height: 100vh;
+      padding: 24px 18px;
+      display: flex;
+      justify-content: center;
+    }
+    .feed-content {
+      max-width: 650px;
+    }
+    .card {
+      margin-bottom: 24px;
+      padding: 24px;
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 8px;
+      transition: all 0.15s ease;
+      animation: slideIn 0.3s ease-out;
+      line-height: 1.7;
+    }
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .card:hover {
+      border-color: var(--color-border-hover);
+    }
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 14px;
+      font-size: 12px;
+      color: var(--color-text-muted);
+      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    }
+    .card-header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .card-type {
+      padding: 2px 8px;
+      background: var(--color-type-badge-bg);
+      color: var(--color-type-badge-text);
+      border-radius: 3px;
+      font-weight: 500;
+      text-transform: uppercase;
+      font-size: 11px;
+      letter-spacing: 0.5px;
+    }
+    .card-source {
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-weight: 600;
+      font-size: 10px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      border: 1px solid transparent;
+    }
+    .source-claude {
+      background: rgba(255, 138, 61, 0.12);
+      color: #c25a00;
+      border-color: rgba(255, 138, 61, 0.22);
+    }
+    .source-codex {
+      background: rgba(33, 150, 243, 0.12);
+      color: #0f5ba7;
+      border-color: rgba(33, 150, 243, 0.24);
+    }
+    .source-cursor {
+      background: rgba(124, 58, 237, 0.12);
+      color: #6d28d9;
+      border-color: rgba(124, 58, 237, 0.24);
+    }
+    [data-theme="dark"] .source-claude {
+      color: #ffb067;
+      border-color: rgba(255, 176, 103, 0.2);
+    }
+    [data-theme="dark"] .source-codex {
+      color: #8fc7ff;
+      border-color: rgba(143, 199, 255, 0.2);
+    }
+    [data-theme="dark"] .source-cursor {
+      color: #c4b5fd;
+      border-color: rgba(196, 181, 253, 0.2);
+    }
+    .card-title {
+      font-size: 17px;
+      margin-bottom: 14px;
+      color: var(--color-text-title);
+      font-weight: 600;
+      line-height: 1.4;
+      letter-spacing: -0.01em;
+    }
+    .view-mode-toggles {
+      display: flex;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+    .view-mode-toggle {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--color-bg-tertiary);
+      border: 1px solid var(--color-border-primary);
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 0.15s ease;
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: lowercase;
+      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    }
+    .view-mode-toggle svg {
+      flex-shrink: 0;
+      opacity: 0.7;
+      transition: opacity 0.15s ease;
+    }
+    .view-mode-toggle:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-hover);
+      color: var(--color-text-primary);
+    }
+    .view-mode-toggle:hover svg {
+      opacity: 1;
+    }
+    .view-mode-toggle.active {
+      background: var(--color-accent-primary);
+      border-color: var(--color-accent-primary);
+      color: var(--color-text-button);
+    }
+    .view-mode-toggle.active svg {
+      opacity: 1;
+    }
+    .view-mode-content {
+      margin-bottom: 12px;
+    }
+    .view-mode-content .card-subtitle {
+      margin-bottom: 0;
+    }
+    .view-mode-content .facts-list {
+      list-style: disc;
+      margin: 0;
+      padding-left: 20px;
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      line-height: 1.7;
+    }
+    .view-mode-content .facts-list li {
+      margin-bottom: 6px;
+    }
+    .view-mode-content .narrative {
+      max-height: 300px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      line-height: 1.7;
+    }
+    .card-meta {
+      font-size: 11px;
+      color: var(--color-text-tertiary);
+      margin-top: 18px;
+      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      line-height: 1.5;
+    }
+    .meta-date {
+      color: var(--color-text-tertiary);
+    }
+    .meta-files {
+      color: var(--color-text-muted);
+      font-size: 10px;
+    }
+    .meta-files .file-label {
+      font-weight: 500;
+      color: var(--color-text-tertiary);
+    }
+    /* Stack single column on narrow screens (removed - no longer using card-files) */
+    @media (max-width: 600px) {}
+    /* Project badge styling */
+    .card-project {
+      color: var(--color-text-muted);
+    }
+    /* Merged-into-parent provenance badge */
+    .card-merged-badge {
+      padding: 1px 6px;
+      border-radius: 3px;
+      font-size: 9px;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      color: var(--color-text-muted);
+      background: var(--color-type-badge-bg);
+      border: 1px solid var(--color-border-primary);
+      opacity: 0.85;
+    }
+    .summary-card {
+      border-color: var(--color-border-summary);
+      background: var(--color-bg-summary);
+    }
+    .summary-card:hover {
+      border-color: var(--color-border-summary-hover);
+    }
+    .summary-card .card-type {
+      background: var(--color-summary-badge-bg);
+      color: var(--color-summary-badge-text);
+    }
+    .summary-card .card-title {
+      color: var(--color-text-summary);
+    }
+    /* Enhanced Summary Card Styles - Editorial/Archival Aesthetic */
+    .summary-card {
+      position: relative;
+    }
+    .summary-card-header {
+      margin-bottom: 24px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--color-border-summary);
+      border-bottom-style: dashed;
+    }
+    .summary-badge-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 16px;
+      flex-wrap: wrap;
+    }
+    .summary-badge {
+      font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
+      font-weight: 600;
+      font-size: 10px;
+      text-transform: uppercase;
+      padding: 4px 10px;
+      border-radius: 2px;
+    }
+    .summary-project-badge {
+      font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
+      font-size: 11px;
+      color: var(--color-text-muted);
+      font-weight: 400;
+      padding: 3px 8px;
+      background: rgba(0, 0, 0, 0.03);
+      border-radius: 2px;
+      border: 1px solid var(--color-border-primary);
+    }
+    [data-theme="dark"] .summary-project-badge {
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .summary-title {
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--color-text-summary);
+      letter-spacing: -0.02em;
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    .summary-sections {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      margin-bottom: 24px;
+    }
+    .summary-section {
+      animation: summaryFadeIn 0.4s ease-out backwards;
+      transition: transform 0.2s ease;
+    }
+    @keyframes summaryFadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .summary-section-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+    .summary-section-icon {
+      position: relative;
+      width: auto;
+      font-size: 16px;
+      line-height: 1;
+    }
+    .summary-section-icon--investigated {
+      height: 16px;
+    }
+    .summary-section-icon--learned {
+      height: 18px;
+      left: -1px;
+      top: -3px;
+    }
+    .summary-section-icon--completed {
+      height: 17px;
+    }
+    .summary-section-icon--next_steps {
+      height: 15px;
+    }
+    .summary-section-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-accent-summary);
+      text-transform: uppercase;
+      margin: 0;
+      font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
+    }
+    .summary-section-content {
+      margin-left: 26px;
+      color: var(--color-text-secondary);
+      font-size: 14px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    .summary-card-footer {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border-primary);
+      font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
+      font-size: 11px;
+      color: var(--color-text-tertiary);
+    }
+    .summary-meta-id {
+      font-weight: 500;
+      color: var(--color-accent-summary);
+    }
+    .summary-meta-divider {
+      opacity: 0.5;
+    }
+    .summary-meta-date {
+      font-weight: 400;
+    }
+    /* Responsive adjustments for summary cards */
+    @media (max-width: 600px) {
+      .summary-title {
+        font-size: 18px;
+      }
+      .summary-section-content {
+        margin-left: 0;
+        padding-left: 12px;
+        font-size: 13px;
+      }
+      .summary-section-header {
+        gap: 8px;
+      }
+    }
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--color-bg-scrollbar-track);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--color-bg-scrollbar-thumb);
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--color-bg-scrollbar-thumb-hover);
+    }
+    .save-status {
+      margin-top: 8px;
+      font-size: 12px;
+      color: var(--color-text-muted);
+    }
+    .prompt-card {
+      border-color: var(--color-border-prompt);
+      background: var(--color-bg-prompt);
+    }
+    .prompt-card:hover {
+      border-color: var(--color-border-prompt-hover);
+    }
+    .prompt-card .card-type {
+      background: var(--color-prompt-badge-bg);
+      color: var(--color-prompt-badge-text);
+    }
+    /* Welcome modal — first-launch + reusable as help via the ? button.
+       Layout strategy: desktop-first, fluid type via clamp(), and squares
+       built with the padding-bottom:100% trick (percentage padding resolves
+       against width, so the box is always W × W regardless of content). */
+    .welcome-modal-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 1100;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: clamp(16px, 3vw, 40px);
+      background: rgba(0, 0, 0, 0.15);
+      animation: fadeIn 0.18s ease-out;
+      overflow-y: auto;
+    }
+    .welcome-modal {
+      position: relative;
+      width: 100%;
+      max-width: clamp(560px, 70vw, 960px);
+      padding: clamp(28px, 4vw, 52px) clamp(28px, 4.5vw, 60px) clamp(24px, 3vw, 40px);
+      border-radius: clamp(14px, 1.4vw, 20px);
+      background: color-mix(in srgb, var(--color-bg-card) 55%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-border-primary) 55%, transparent);
+      box-shadow:
+        0 40px 120px rgba(0, 0, 0, 0.6),
+        0 16px 48px rgba(0, 0, 0, 0.35),
+        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+      animation: slideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+      backdrop-filter: blur(28px) saturate(170%);
+      -webkit-backdrop-filter: blur(28px) saturate(170%);
+    }
+    .welcome-modal-dismiss {
+      position: absolute;
+      top: clamp(12px, 1.4vw, 18px);
+      right: clamp(12px, 1.4vw, 18px);
+      width: 36px;
+      height: 36px;
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--color-bg-card) 70%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-border-primary) 70%, transparent);
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      padding: 0;
+    }
+    .welcome-modal-dismiss:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-focus);
+      color: var(--color-text-primary);
+      transform: scale(1.05);
+    }
+    .welcome-modal-dismiss:active {
+      transform: scale(0.95);
+    }
+    .welcome-modal-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: clamp(8px, 0.8vw, 12px);
+      margin-bottom: clamp(20px, 2.4vw, 36px);
+    }
+    .welcome-modal-logo {
+      width: clamp(72px, 7.5vw, 104px);
+      height: clamp(72px, 7.5vw, 104px);
+      object-fit: contain;
+      filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.18));
+    }
+    .welcome-modal-header h2 {
+      margin: clamp(4px, 0.5vw, 8px) 0 0 0;
+      font-size: clamp(22px, 2.4vw, 32px);
+      font-weight: 600;
+      color: var(--color-text-title);
+      letter-spacing: -0.02em;
+      line-height: 1.2;
+    }
+    .welcome-modal-header p {
+      margin: 0;
+      font-size: clamp(13px, 1.2vw, 17px);
+      color: var(--color-text-secondary);
+      line-height: 1.5;
+    }
+    .welcome-modal-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: clamp(10px, 1.2vw, 18px);
+    }
+    /* True-square shell: padding-bottom:100% resolves against parent
+       width, so the box is always W × W. Content is positioned absolutely
+       inside so it cannot push the box taller. */
+    .welcome-modal-feature {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 100%;
+      border-radius: clamp(10px, 1vw, 14px);
+      background: color-mix(in srgb, var(--color-bg-tertiary) 35%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-border-primary) 50%, transparent);
+      transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
+    }
+    .welcome-modal-feature:hover {
+      border-color: var(--color-border-focus);
+      transform: translateY(-2px);
+      background: color-mix(in srgb, var(--color-bg-tertiary) 55%, transparent);
+    }
+    .welcome-modal-feature-inner {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: clamp(6px, 0.7vw, 12px);
+      padding: clamp(14px, 1.8vw, 26px);
+    }
+    .welcome-modal-feature-art {
+      width: clamp(56px, 6.5vw, 96px);
+      height: clamp(56px, 6.5vw, 96px);
+      color: var(--color-text-tertiary);
+      flex-shrink: 0;
+    }
+    .welcome-modal-feature-title {
+      margin: clamp(2px, 0.3vw, 6px) 0 0 0;
+      font-size: clamp(14px, 1.2vw, 17px);
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      color: var(--color-text-primary);
+      line-height: 1.3;
+    }
+    .welcome-modal-feature-desc {
+      margin: 0;
+      font-size: clamp(11px, 0.9vw, 13px);
+      line-height: 1.45;
+      color: var(--color-text-secondary);
+    }
+    .welcome-modal-footer {
+      margin-top: clamp(20px, 2.2vw, 32px);
+      padding-top: clamp(14px, 1.4vw, 20px);
+      border-top: 1px solid color-mix(in srgb, var(--color-border-primary) 50%, transparent);
+      text-align: center;
+      font-size: clamp(12px, 1vw, 14px);
+      color: var(--color-text-muted);
+    }
+    .welcome-modal-footer a {
+      color: var(--color-accent-primary);
+      text-decoration: none;
+      font-weight: 500;
+    }
+    .welcome-modal-footer a:hover {
+      text-decoration: underline;
+    }
+    .welcome-modal-footer-sep {
+      margin: 0 8px;
+      opacity: 0.5;
+    }
+    /* Below ~600px three squares get too small to read — stack to one
+       column and let each block grow to natural content height. */
+    @media (max-width: 600px) {
+      .welcome-modal {
+        max-width: 100%;
+      }
+      .welcome-modal-grid {
+        grid-template-columns: 1fr;
+      }
+      .welcome-modal-feature {
+        height: auto;
+        padding-bottom: 0;
+      }
+      .welcome-modal-feature-inner {
+        position: static;
+        padding: 22px 18px;
+      }
+    }
+    .card-content {
+      margin-top: 14px;
+      margin-bottom: 12px;
+      line-height: 1.7;
+      color: var(--color-text-primary);
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    .spinner {
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--color-border-primary);
+      border-top-color: var(--color-accent-focus);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes shimmer {
+      0% {
+        background-position: 200% 0;
+      }
+      100% {
+        background-position: -200% 0;
+      }
+    }
+    /* Scroll to top button */
+    .scroll-to-top {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      width: 48px;
+      height: 48px;
+      background: var(--color-bg-button);
+      color: var(--color-text-button);
+      border: none;
+      border-radius: 24px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: all 0.2s ease;
+      z-index: 50;
+      animation: fadeInUp 0.3s ease-out;
+    }
+    .scroll-to-top:hover {
+      background: var(--color-bg-button-hover);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    }
+    .scroll-to-top:active {
+      background: var(--color-bg-button-active);
+      transform: translateY(0);
+    }
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    /* Tablet Responsive Styles - 481px to 768px */
+    @media (max-width: 768px) and (min-width: 481px) {
+      /* Header stays on one line, hide icon links to save space */
+      .header {
+        padding: 14px 20px;
+      }
+      .header-main {
+        gap: 12px;
+      }
+      .status {
+        gap: 6px;
+      }
+      .status select {
+        max-width: 160px;
+      }
+      /* Hide icon links (docs, github, twitter) on tablet */
+      .icon-link {
+        display: none;
+      }
+      /* Feed adjustments */
+      .feed {
+        padding: 20px 16px;
+      }
+      .feed-content {
+      }
+      /* Card adjustments */
+      .card {
+        padding: 20px;
+      }
+    }
+    /* Mobile & Small Tablet - 600px and below */
+    @media (max-width: 600px) {
+      /* Hide GitHub stars button on mobile */
+      .github-stars-btn {
+        display: none;
+      }
+    }
+    /* Mobile Responsive Styles - 480px and below */
+    @media (max-width: 480px) {
+      /* Hide project dropdown in header, will show in sidebar */
+      .status select {
+        display: none;
+      }
+      /* Header stays on one line */
+      .header {
+        padding: 12px 16px;
+      }
+      .header h1 {
+        font-size: 15px;
+        gap: 8px;
+      }
+      .header-main {
+        gap: 10px;
+      }
+      .logomark {
+        height: 28px;
+      }
+      .logo-text {
+        font-size: 18px;
+      }
+      .status {
+        display: flex;
+        gap: 6px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        padding-bottom: 4px;
+      }
+      .status::-webkit-scrollbar {
+        display: none;
+      }
+      .status select {
+        max-width: 140px;
+        flex-shrink: 0;
+        padding: 0 28px 0 10px;
+        height: 32px;
+        font-size: 12px;
+      }
+      /* Hide icon links on mobile */
+      .icon-link {
+        display: none;
+      }
+      .settings-btn,
+      .theme-toggle-btn,
+      .icon-link {
+        width: 32px;
+        height: 32px;
+        flex-shrink: 0;
+      }
+      .settings-icon,
+      .theme-toggle-btn svg,
+      .icon-link svg {
+        width: 16px;
+        height: 16px;
+      }
+      /* Feed adjustments */
+      .feed {
+        padding: 16px 12px;
+      }
+      /* Card adjustments */
+      .card {
+        padding: 16px;
+        margin-bottom: 16px;
+      }
+      .card-title {
+        font-size: 15px;
+      }
+      .card-header {
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .card-header-left {
+        flex-wrap: wrap;
+      }
+      /* Scroll to top button position */
+      .scroll-to-top {
+        bottom: 16px;
+        right: 16px;
+        width: 44px;
+        height: 44px;
+      }
+    }
+    /* Context Settings Modal - Modern Clean Design */
+    .modal-backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.65);
+      backdrop-filter: blur(4px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      animation: fadeIn 0.2s ease-out;
+      padding: 20px;
+    }
+    .context-settings-modal {
+      background: var(--color-bg-primary);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 12px;
+      width: 100%;
+      max-width: 1200px;
+      height: 90vh;
+      max-height: 800px;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      overflow: hidden;
+    }
+    .modal-header {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border-primary);
+      background: var(--color-bg-header);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      flex-shrink: 0;
+    }
+    .modal-header h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text-header);
+      letter-spacing: -0.01em;
+      flex-shrink: 0;
+    }
+    .header-controls {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      flex: 1;
+      justify-content: flex-end;
+    }
+    .preview-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      white-space: nowrap;
+    }
+    .preview-selector select:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    .preview-selector select {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-primary);
+      color: var(--color-text-primary);
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-family: inherit;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .preview-selector select:hover {
+      border-color: var(--color-border-focus);
+      background: var(--color-bg-card-hover);
+    }
+    .preview-selector select:focus {
+      outline: none;
+      border-color: var(--color-accent-primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+    .modal-close-btn {
+      background: transparent;
+      border: 1px solid var(--color-border-primary);
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      padding: 0;
+    }
+    .modal-close-btn:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-focus);
+      color: var(--color-text-primary);
+      transform: scale(1.05);
+    }
+    .modal-close-btn:active {
+      transform: scale(0.95);
+    }
+    .modal-body {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 70fr 30fr;
+      gap: 0;
+      overflow: hidden;
+      min-height: 0;
+    }
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 24px;
+      border-top: 1px solid var(--modal-border);
+      background: var(--modal-header-bg);
+    }
+    .modal-footer .save-status {
+      font-size: 13px;
+    }
+    .modal-footer .save-status .success {
+      color: var(--success-color, #22c55e);
+    }
+    .modal-footer .save-status .error {
+      color: var(--error-color, #ef4444);
+    }
+    .modal-footer .save-btn {
+      padding: 8px 24px;
+      background: var(--accent-color, #3b82f6);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+    .modal-footer .save-btn:hover:not(:disabled) {
+      background: var(--accent-hover, #2563eb);
+    }
+    .modal-footer .save-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    /* Preview Column - Terminal Style */
+    .preview-column {
+      padding: 20px;
+      overflow: hidden;
+      border-right: none;
+      background: transparent;
+      display: flex;
+      flex-direction: column;
+    }
+    .preview-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      color: #ccc;
+    }
+    .preview-content pre {
+      margin: 0;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    /* Settings Column */
+    .settings-column {
+      padding: 0;
+      overflow-y: auto;
+      background: var(--color-bg-primary);
+      position: relative;
+    }
+    /* Custom Scrollbar */
+    .settings-column::-webkit-scrollbar {
+      width: 8px;
+    }
+    .settings-column::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .settings-column::-webkit-scrollbar-thumb {
+      background: var(--color-bg-scrollbar-thumb);
+      border-radius: 4px;
+    }
+    .settings-column::-webkit-scrollbar-thumb:hover {
+      background: var(--color-bg-scrollbar-thumb-hover);
+    }
+    .preview-content::-webkit-scrollbar {
+      width: 8px;
+    }
+    .preview-content::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .preview-content::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 4px;
+    }
+    .preview-content::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+    /* Animations */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    @keyframes slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.98);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+    /* ============================================
+       NEW: Collapsible Sections
+       ============================================ */
+    .settings-section-collapsible {
+      border-bottom: 1px solid var(--color-border-primary);
+    }
+    .settings-section-collapsible:last-child {
+      border-bottom: none;
+    }
+    .section-header-btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 16px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      transition: background 0.15s ease;
+    }
+    .section-header-btn:hover {
+      background: var(--color-bg-card-hover);
+    }
+    .section-header-content {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .section-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      letter-spacing: -0.01em;
+    }
+    .section-description {
+      font-size: 11px;
+      color: var(--color-text-muted);
+      font-weight: 400;
+    }
+    .chevron-icon {
+      color: var(--color-text-muted);
+      transition: transform 0.2s ease;
+      flex-shrink: 0;
+    }
+    .chevron-icon.rotated {
+      transform: rotate(180deg);
+    }
+    .section-content {
+      padding: 0 16px 16px 16px;
+    }
+    /* ============================================
+       NEW: Form Fields with Tooltips
+       ============================================ */
+    .form-field {
+      margin-bottom: 12px;
+    }
+    .form-field:last-child {
+      margin-bottom: 0;
+    }
+    .form-field-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-primary);
+      margin-bottom: 6px;
+    }
+    .tooltip-trigger {
+      display: inline-flex;
+      align-items: center;
+      color: var(--color-text-muted);
+      cursor: help;
+      transition: color 0.15s ease;
+    }
+    .tooltip-trigger:hover {
+      color: var(--color-accent-primary);
+    }
+    .form-field input[type="number"],
+    .form-field select {
+      width: 100%;
+      background: var(--color-bg-input);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 6px;
+      padding: 8px 12px;
+      height: 36px;
+      font-size: 13px;
+      color: var(--color-text-primary);
+      transition: all 0.15s ease;
+    }
+    .form-field input[type="number"]:hover,
+    .form-field select:hover {
+      border-color: var(--color-border-hover);
+    }
+    .form-field input[type="number"]:focus,
+    .form-field select:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
+    }
+    /* ============================================
+       NEW: Toggle Switches
+       ============================================ */
+    .toggle-group {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border-secondary);
+    }
+    .toggle-row:last-child {
+      border-bottom: none;
+    }
+    .toggle-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+      min-width: 0;
+    }
+    .toggle-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-primary);
+      cursor: pointer;
+    }
+    .toggle-description {
+      font-size: 11px;
+      color: var(--color-text-muted);
+      line-height: 1.3;
+    }
+    .toggle-switch {
+      position: relative;
+      width: 40px;
+      height: 22px;
+      background: var(--color-bg-tertiary);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 11px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      margin-left: 12px;
+      padding: 0;
+    }
+    .toggle-switch:hover:not(.disabled) {
+      border-color: var(--color-border-hover);
+    }
+    .toggle-switch.on {
+      background: var(--color-accent-primary);
+      border-color: var(--color-accent-primary);
+    }
+    .toggle-switch.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .toggle-knob {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      background: white;
+      border-radius: 50%;
+      transition: transform 0.2s ease;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+    .toggle-switch.on .toggle-knob {
+      transform: translateX(18px);
+    }
+    /* ============================================
+       NEW: Display Subsections
+       ============================================ */
+    .display-subsection {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border-secondary);
+    }
+    .display-subsection:first-child {
+      padding-top: 0;
+    }
+    .display-subsection:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+    .subsection-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 10px;
+    }
+    /* Console Drawer - Chrome DevTools Style */
+    .console-toggle-btn {
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background: var(--color-bg-button);
+      border: none;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      transition: all 0.2s ease;
+      z-index: 999;
+    }
+    .console-toggle-btn:hover {
+      background: var(--color-bg-button-hover);
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+    }
+    .console-toggle-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+    .console-drawer {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: var(--color-bg-primary);
+      border-top: 1px solid var(--color-border-primary);
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+    }
+    .console-resize-handle {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 6px;
+      cursor: ns-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .console-resize-handle:hover .console-resize-bar {
+      background: var(--color-bg-button);
+    }
+    .console-resize-bar {
+      width: 40px;
+      height: 3px;
+      border-radius: 2px;
+      background: var(--color-border-primary);
+      transition: background 0.2s ease;
+    }
+    .console-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--color-border-primary);
+      background: var(--color-bg-header);
+      margin-top: 6px;
+    }
+    .console-tabs {
+      display: flex;
+      gap: 4px;
+    }
+    .console-tab {
+      padding: 4px 12px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+    }
+    .console-tab.active {
+      color: var(--color-text-primary);
+      border-bottom-color: var(--color-bg-button);
+      font-weight: 500;
+    }
+    .console-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .console-auto-refresh {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      user-select: none;
+    }
+    .console-auto-refresh input[type="checkbox"] {
+      cursor: pointer;
+    }
+    .console-control-btn {
+      background: transparent;
+      border: none;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 4px 8px;
+      font-size: 14px;
+      border-radius: 4px;
+      transition: all 0.15s ease;
+    }
+    .console-control-btn:hover {
+      background: var(--color-bg-card-hover);
+      color: var(--color-text-primary);
+    }
+    .console-control-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .console-clear-btn:hover {
+      color: var(--color-accent-error);
+    }
+    .console-content {
+      flex: 1;
+      overflow: auto;
+      background: var(--color-bg-primary);
+    }
+    .console-logs {
+      margin: 0;
+      padding: 8px 12px;
+      font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+      font-size: 11px;
+      line-height: 1.5;
+      color: var(--color-text-primary);
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+    .console-error {
+      padding: 8px 12px;
+      background: rgba(239, 68, 68, 0.08);
+      border-bottom: 1px solid var(--color-accent-error);
+      color: var(--color-accent-error);
+      font-size: 11px;
+      font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+    }
+    /* Console Filter Bar */
+    .console-filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--color-bg-secondary);
+      border-bottom: 1px solid var(--color-border-primary);
+    }
+    .console-filter-section {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .console-filter-label {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      white-space: nowrap;
+    }
+    .console-filter-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      align-items: center;
+    }
+    .console-filter-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 8px;
+      font-size: 11px;
+      font-weight: 500;
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border-primary);
+      border-radius: 4px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      white-space: nowrap;
+    }
+    .console-filter-chip:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--chip-color, var(--color-border-hover));
+      color: var(--color-text-primary);
+    }
+    .console-filter-chip.active {
+      background: var(--chip-color, var(--color-accent-primary));
+      border-color: var(--chip-color, var(--color-accent-primary));
+      color: white;
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    }
+    .console-filter-chip.active:hover {
+      opacity: 0.9;
+    }
+    .console-filter-action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      font-size: 12px;
+      background: transparent;
+      border: 1px solid var(--color-border-primary);
+      border-radius: 4px;
+      color: var(--color-text-muted);
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+    .console-filter-action:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-hover);
+      color: var(--color-text-primary);
+    }
+    /* Log Line Styles */
+    .log-line {
+      display: block;
+      padding: 2px 0;
+      font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+      font-size: 11px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    .log-line-raw {
+      color: var(--color-text-secondary);
+      opacity: 0.8;
+    }
+    .log-line-empty {
+      color: var(--color-text-muted);
+      font-style: italic;
+      padding: 20px 0;
+      text-align: center;
+    }
+    .log-timestamp {
+      color: var(--color-text-muted);
+      opacity: 0.7;
+    }
+    .log-level {
+      font-weight: 500;
+    }
+    .log-component {
+      font-weight: 500;
+    }
+    .log-correlation {
+      color: var(--color-accent-primary);
+      opacity: 0.9;
+    }
+    .log-message {
+      color: inherit;
+    }
+    /* Log Level Colors in Dark Mode */
+    [data-theme="dark"] .log-line-raw {
+      color: #8b949e;
+    }
+    /* Responsive adjustments for filter bar */
+    @media (max-width: 600px) {
+      .console-filters {
+        flex-direction: column;
+        gap: 8px;
+        padding: 6px 10px;
+      }
+      .console-filter-section {
+        flex-wrap: wrap;
+      }
+      .console-filter-chip {
+        padding: 2px 6px;
+        font-size: 10px;
+      }
+    }
+    /* Responsive Modal */
+    @media (max-width: 900px) {
+      .modal-body {
+        grid-template-columns: 1fr;
+      }
+      .preview-column {
+        display: none;
+      }
+    }
+    @media (max-width: 600px) {
+      .modal-backdrop {
+        padding: 0;
+      }
+      .context-settings-modal {
+        border-radius: 0;
+        height: 100vh;
+        max-height: none;
+      }
+      .modal-header {
+        padding: 12px 16px;
+        gap: 12px;
+      }
+      .preview-selector {
+        font-size: 11px;
+        gap: 6px;
+      }
+      .preview-selector select {
+        padding: 5px 10px;
+        font-size: 11px;
+      }
+      .section-header-btn {
+        padding: 12px 14px;
+      }
+      .section-content {
+        padding: 0 14px 14px 14px;
+      }
+      .toggle-row {
+        padding: 8px 0;
+      }
+      .toggle-switch {
+        width: 36px;
+        height: 20px;
+      }
+      .toggle-knob {
+        width: 14px;
+        height: 14px;
+      }
+      .toggle-switch.on .toggle-knob {
+        transform: translateX(16px);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="viewer-bundle.js"></script>
+</body>
+</html>