total-recall-brain 3.28.2 → 3.30.1

package/extension/lib/ui-helpers.js

@@ -0,0 +1,229 @@
+// Total Recall — pure UI helpers shared by the side panel, options page and the
+// service worker. No DOM or chrome.* access, so the same file is unit-tested
+// under vitest (see ui-helpers.spec.mjs). Exposed as `self.TRUi`.
+
+(function (root) {
+  'use strict';
+
+  // Raw cosine similarity a memory must reach before the extension calls it
+  // "related" to the page. The search API's `score` is rank-fused (RRF) and says
+  // nothing about relevance: the top hit scores ~0.49 however unrelated it is,
+  // and one lexical word match ("deployment") pushed a 0.38-similarity hit to
+  // 0.93. Calibrated on the live brain 2026-09-22: unrelated page titles topped
+  // out at 0.48, genuinely related ones started at 0.55.
+  const RELATED_MIN_SIMILARITY = 0.53;
+  // Only for brains too old to report `similarity`.
+  const RELATED_MIN_FUSED_SCORE = 0.75;
+
+  const HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+  function escapeHtml(value) {
+    return String(value == null ? '' : value).replace(/[&<>"']/g, (ch) => HTML_ESCAPES[ch]);
+  }
+
+  function isCapturableUrl(url) {
+    return /^https?:\/\//i.test(String(url || ''));
+  }
+
+  function hostnameOf(url) {
+    try { return new URL(url).hostname.replace(/^www\./, ''); } catch { return ''; }
+  }
+
+  /** Domain blocklist match: exact host or any subdomain of an entry. */
+  function isBlocked(url, blocklist) {
+    if (!Array.isArray(blocklist) || blocklist.length === 0) return false;
+    let host;
+    try { host = new URL(url).hostname.toLowerCase(); } catch { return false; }
+    return blocklist.some((entry) => {
+      const domain = String(entry || '').trim().toLowerCase()
+        .replace(/^[a-z]+:\/\//, '').replace(/\/.*$/, '').replace(/^\*\./, '');
+      return domain && (host === domain || host.endsWith(`.${domain}`));
+    });
+  }
+
+  function collapseWhitespace(text) {
+    return String(text || '').replace(/[ \t\f\v ]+/g, ' ').replace(/\s*\n\s*/g, '\n').replace(/\n{3,}/g, '\n\n').trim();
+  }
+
+  /** Trim to `max` chars, preferring to end on a sentence or word boundary. */
+  function clip(text, max) {
+    const clean = collapseWhitespace(text);
+    if (clean.length <= max) return clean;
+    const cut = clean.slice(0, max);
+    const sentence = Math.max(cut.lastIndexOf('. '), cut.lastIndexOf('.\n'));
+    if (sentence > max * 0.6) return cut.slice(0, sentence + 1);
+    const word = cut.lastIndexOf(' ');
+    return `${cut.slice(0, word > max * 0.6 ? word : max)}…`;
+  }
+
+  /**
+   * Build the memory body for a page capture so the node holds real content, not
+   * just a URL: the user's note, then the selection (or description + leading
+   * readable text), then the source.
+   */
+  function buildCaptureExcerpt({ url, description, selection, text, note } = {}) {
+    const parts = [];
+    if (note && note.trim()) parts.push(note.trim());
+    if (selection && selection.trim()) {
+      parts.push(clip(selection, 4000).split('\n').map((line) => `> ${line}`).join('\n'));
+    } else {
+      if (description && description.trim()) parts.push(clip(description, 400));
+      if (text && text.trim()) {
+        const lead = clip(text, 1500);
+        if (!description || !lead.startsWith(description.trim().slice(0, 40))) parts.push(lead);
+      }
+    }
+    if (url) parts.push(`Source: ${url}`);
+    return parts.join('\n\n');
+  }
+
+  function memoryText(result) {
+    return String(result.content || result.body || result.excerpt || result.snippet || '');
+  }
+
+  /**
+   * Keep only vault memories that are genuinely related: sessions have no
+   * title/body to show, and rank-fused scores alone say nothing about relevance.
+   */
+  function filterRelated(results, { minSimilarity = RELATED_MIN_SIMILARITY, minFusedScore = RELATED_MIN_FUSED_SCORE, limit = 5, excludeUrl } = {}) {
+    return (Array.isArray(results) ? results : [])
+      .filter((r) => r && r.type !== 'session' && r.slug && r.title)
+      .filter((r) => (typeof r.similarity === 'number'
+        ? r.similarity >= minSimilarity
+        : (r.score || 0) >= minFusedScore))
+      .filter((r) => !excludeUrl || !memoryText(r).includes(excludeUrl))
+      .slice(0, limit)
+      .map((r) => ({
+        slug: r.slug,
+        title: String(r.title),
+        excerpt: clip(stripMarkdown(memoryText(r)), 220),
+        category: r.category || 'memory',
+        similarity: typeof r.similarity === 'number' ? r.similarity : null,
+      }));
+  }
+
+  function stripMarkdown(text) {
+    return String(text || '')
+      .replace(/```[\s\S]*?```/g, ' ')
+      .replace(/`([^`]+)`/g, '$1')
+      .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+      .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+      .replace(/^\s{0,3}(#{1,6}|>|[-*+]|\d+\.)\s+/gm, '')
+      .replace(/(\*\*|__|\*|_)(.+?)\1/g, '$2');
+  }
+
+  function timeAgo(value, now = Date.now()) {
+    const t = typeof value === 'number' ? value : Date.parse(value);
+    if (!t || Number.isNaN(t)) return '';
+    const s = Math.max(0, Math.round((now - t) / 1000));
+    if (s < 45) return 'just now';
+    if (s < 3600) return `${Math.round(s / 60)}m ago`;
+    if (s < 86400) return `${Math.round(s / 3600)}h ago`;
+    if (s < 86400 * 7) return `${Math.round(s / 86400)}d ago`;
+    return new Date(t).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }
+
+  function safeHref(url) {
+    return /^https?:\/\//i.test(url) ? url : null;
+  }
+
+  function renderInline(escaped) {
+    return escaped
+      .replace(/`([^`\n]+)`/g, '<code>$1</code>')
+      .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
+      .replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, '$1<em>$2</em>')
+      .replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (m, label, href) => {
+        // href is already HTML-escaped; unescape &amp; only to test the scheme.
+        const safe = safeHref(href.replace(/&amp;/g, '&'));
+        return safe ? `<a href="${href}" target="_blank" rel="noopener noreferrer">${label}</a>` : label;
+      });
+  }
+
+  /**
+   * Minimal, safe markdown for chat replies. Escapes everything first, then
+   * re-introduces a small whitelist: fenced/inline code, bold, italic, http(s)
+   * links, headings (as strong lines), bullet/numbered lists and paragraphs.
+   */
+  function renderMarkdown(markdown) {
+    const src = String(markdown || '').replace(/\r\n/g, '\n');
+    const blocks = [];
+    const fence = /```[\w-]*\n?([\s\S]*?)```/g;
+    let last = 0;
+    let m;
+    while ((m = fence.exec(src))) {
+      blocks.push({ kind: 'text', value: src.slice(last, m.index) });
+      blocks.push({ kind: 'code', value: m[1].replace(/\n$/, '') });
+      last = fence.lastIndex;
+    }
+    blocks.push({ kind: 'text', value: src.slice(last) });
+
+    const html = [];
+    for (const block of blocks) {
+      if (block.kind === 'code') {
+        html.push(`<pre><code>${escapeHtml(block.value)}</code></pre>`);
+        continue;
+      }
+      const lines = block.value.split('\n');
+      let list = null;
+      let para = [];
+      const flushPara = () => {
+        if (para.length) html.push(`<p>${para.map((l) => renderInline(escapeHtml(l))).join('<br>')}</p>`);
+        para = [];
+      };
+      const flushList = () => {
+        if (list) html.push(`<${list.tag}>${list.items.map((i) => `<li>${renderInline(escapeHtml(i))}</li>`).join('')}</${list.tag}>`);
+        list = null;
+      };
+      for (const line of lines) {
+        const bullet = line.match(/^\s*[-*+]\s+(.*)$/);
+        const numbered = line.match(/^\s*\d+[.)]\s+(.*)$/);
+        const heading = line.match(/^\s{0,3}#{1,6}\s+(.*)$/);
+        if (bullet || numbered) {
+          flushPara();
+          const tag = bullet ? 'ul' : 'ol';
+          if (list && list.tag !== tag) flushList();
+          if (!list) list = { tag, items: [] };
+          list.items.push((bullet || numbered)[1]);
+        } else if (heading) {
+          flushPara(); flushList();
+          html.push(`<p class="md-heading">${renderInline(escapeHtml(heading[1]))}</p>`);
+        } else if (!line.trim()) {
+          flushPara(); flushList();
+        } else {
+          flushList();
+          para.push(line);
+        }
+      }
+      flushPara(); flushList();
+    }
+    return html.join('');
+  }
+
+  const RESEARCH_STATUS = {
+    pending: { label: 'Queued', tone: 'neutral' },
+    in_progress: { label: 'Researching', tone: 'accent' },
+    done: { label: 'Done', tone: 'success' },
+    failed: { label: 'Failed', tone: 'error' },
+  };
+  function researchStatus(status) {
+    return RESEARCH_STATUS[status] || { label: String(status || 'Unknown'), tone: 'neutral' };
+  }
+
+  const api = {
+    RELATED_MIN_SIMILARITY,
+    RELATED_MIN_FUSED_SCORE,
+    escapeHtml,
+    isCapturableUrl,
+    hostnameOf,
+    isBlocked,
+    clip,
+    buildCaptureExcerpt,
+    filterRelated,
+    stripMarkdown,
+    timeAgo,
+    renderMarkdown,
+    researchStatus,
+  };
+
+  root.TRUi = api;
+})(typeof self !== 'undefined' ? self : globalThis);

package/extension/lib/ui-helpers.spec.mjs

@@ -0,0 +1,94 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest';
+import fs from 'node:fs';
+import vm from 'node:vm';
+
+// Load it the way Chrome does: a classic script that attaches to `self`.
+const sandbox = { URL };
+sandbox.self = sandbox;
+vm.runInNewContext(fs.readFileSync(new URL('./ui-helpers.js', import.meta.url), 'utf8'), sandbox);
+const ui = sandbox.TRUi;
+
+describe('escapeHtml / renderMarkdown', () => {
+  it('escapes every HTML-significant character', () => {
+    expect(ui.escapeHtml(`<img src=x onerror="alert('1')">&`)).toBe('&lt;img src=x onerror=&quot;alert(&#39;1&#39;)&quot;&gt;&amp;');
+  });
+
+  it('never lets raw HTML through', () => {
+    const html = ui.renderMarkdown('hi <script>alert(1)</script> **b** <img src=x onerror=alert(1)>');
+    expect(html).not.toMatch(/<script|<img/);
+    expect(html).toContain('<strong>b</strong>');
+  });
+
+  it('only links http(s) targets', () => {
+    expect(ui.renderMarkdown('[ok](https://example.com/a?b=1&c=2)')).toContain('<a href="https://example.com/a?b=1&amp;c=2"');
+    const bad = ui.renderMarkdown('[bad](javascript:alert(1))');
+    expect(bad).not.toContain('<a');
+    expect(bad).toContain('bad');
+  });
+
+  it('renders code fences, lists and headings', () => {
+    const html = ui.renderMarkdown('# Title\n\n- one\n- two\n\n1. a\n2. b\n\n```js\nconst x = "<b>";\n```');
+    expect(html).toContain('<p class="md-heading">Title</p>');
+    expect(html).toContain('<ul><li>one</li><li>two</li></ul>');
+    expect(html).toContain('<ol><li>a</li><li>b</li></ol>');
+    expect(html).toContain('<pre><code>const x = &quot;&lt;b&gt;&quot;;</code></pre>');
+  });
+});
+
+describe('filterRelated', () => {
+  const results = [
+    { type: 'session', session_id: 's', score: 0.9 },
+    { type: 'vault', slug: 'noise', title: 'Unrelated', body: 'x', score: 0.49, similarity: 0.41 },
+    { type: 'vault', slug: 'close', title: 'Close', content: '**Deploy** notes', score: 0.48, similarity: 0.7, category: 'facts' },
+    { type: 'vault', slug: 'agree', title: 'Agree', body: 'y', score: 0.8 },
+    { type: 'vault', slug: 'lexical-fluke', title: 'Fluke', body: 'z', score: 0.93, similarity: 0.38 },
+    { type: 'vault', slug: 'self', title: 'This page', body: 'Source: https://a.test/p', score: 0.9, similarity: 0.9 },
+  ];
+
+  it('drops sessions, rank-only noise, lexical flukes and memories of the page itself', () => {
+    const out = ui.filterRelated(results, { excludeUrl: 'https://a.test/p' });
+    expect(out.map(r => r.slug)).toEqual(['close', 'agree']);
+    expect(out[0]).toMatchObject({ title: 'Close', excerpt: 'Deploy notes', category: 'facts', similarity: 0.7 });
+  });
+
+  it('tolerates junk input', () => {
+    expect(ui.filterRelated(undefined)).toEqual([]);
+  });
+});
+
+describe('capture helpers', () => {
+  it('quotes the selection and cites the source', () => {
+    const body = ui.buildCaptureExcerpt({ url: 'https://a.test', selection: 'line one\nline two', note: 'why' });
+    expect(body).toBe('why\n\n> line one\n> line two\n\nSource: https://a.test');
+  });
+
+  it('falls back to description plus leading text, clipped', () => {
+    const text = 'Sentence one is here. '.repeat(200);
+    const body = ui.buildCaptureExcerpt({ url: 'https://a.test', description: 'A page about things', text });
+    expect(body.startsWith('A page about things\n\nSentence one')).toBe(true);
+    expect(body.length).toBeLessThan(2000);
+    expect(body.endsWith('Source: https://a.test')).toBe(true);
+  });
+
+  it('isBlocked matches hosts and subdomains, not substrings', () => {
+    expect(ui.isBlocked('https://mail.google.com/x', ['google.com'])).toBe(true);
+    expect(ui.isBlocked('https://notgoogle.com/', ['google.com'])).toBe(false);
+    expect(ui.isBlocked('https://bank.example/', ['https://bank.example/login'])).toBe(true);
+    expect(ui.isBlocked('https://example.com/', ['co'])).toBe(false);
+  });
+
+  it('isCapturableUrl accepts only web pages', () => {
+    expect(ui.isCapturableUrl('https://x.y')).toBe(true);
+    expect(ui.isCapturableUrl('chrome://extensions')).toBe(false);
+    expect(ui.isCapturableUrl('file:///etc/hosts')).toBe(false);
+  });
+
+  it('timeAgo buckets', () => {
+    const now = Date.parse('2026-09-22T12:00:00Z');
+    expect(ui.timeAgo('2026-09-22T11:59:50Z', now)).toBe('just now');
+    expect(ui.timeAgo('2026-09-22T11:30:00Z', now)).toBe('30m ago');
+    expect(ui.timeAgo('2026-09-21T12:00:00Z', now)).toBe('1d ago');
+    expect(ui.timeAgo('nonsense', now)).toBe('');
+  });
+});

package/extension/manifest.json

@@ -1,17 +1,20 @@
 {
   "manifest_version": 3,
-  "name": "Total Recall — Brain Extension",
-  "version": "0.1.0",
-  "description": "Contextual memory overlay, Share-to-Brain, and passive browsing context for Total Recall",
+  "name": "Total Recall",
+  "version": "0.2.0",
+  "description": "Capture pages into your Total Recall brain, recall what you already know, and chat with it beside any tab.",
+  "minimum_chrome_version": "116",
   "permissions": ["activeTab", "contextMenus", "sidePanel", "storage", "tabs"],
-  "optional_permissions": ["history", "webNavigation"],
   "host_permissions": ["http://127.0.0.1:*/*", "http://localhost:*/*"],
+  "optional_host_permissions": ["http://*/*", "https://*/*"],
   "background": {
     "service_worker": "background.js"
   },
   "action": {
+    "default_title": "Open Total Recall",
     "default_icon": {
       "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
       "48": "icons/icon-48.png",
       "128": "icons/icon-128.png"
     }
@@ -19,8 +22,19 @@
   "side_panel": {
     "default_path": "sidepanel/sidepanel.html"
   },
+  "commands": {
+    "_execute_action": {
+      "suggested_key": { "default": "Alt+Shift+R" },
+      "description": "Open the Total Recall side panel"
+    },
+    "remember-page": {
+      "suggested_key": { "default": "Alt+Shift+S" },
+      "description": "Remember the current page (or the selected text)"
+    }
+  },
+  "omnibox": { "keyword": "tr" },
   "content_scripts": [{
-    "matches": ["<all_urls>"],
+    "matches": ["http://*/*", "https://*/*"],
     "js": ["content-script.js"],
     "css": ["content-script.css"],
     "run_at": "document_idle"
@@ -32,6 +46,7 @@
   "incognito": "not_allowed",
   "icons": {
     "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
     "48": "icons/icon-48.png",
     "128": "icons/icon-128.png"
   }

package/extension/options/options.css

@@ -1,218 +1,64 @@
-/* Total Recall — Options Page Styles (Catppuccin Mocha) */
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #11111b;
-  color: #cdd6f4;
-  min-height: 100vh;
-}
-
-.options-page {
-  max-width: 560px;
-  margin: 0 auto;
-  padding: 32px 24px;
-}
-
-/* ---- Header ---- */
-.options-header {
-  margin-bottom: 32px;
-}
-
-.options-header h1 {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-/* ---- Sections ---- */
-.section {
-  margin-bottom: 28px;
-  padding: 20px;
-  background: #181825;
-  border-radius: 14px;
-  border: 1px solid #313244;
-}
-
-.section h2 {
-  font-size: 14px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
-  color: #89b4fa;
-  margin-bottom: 16px;
-}
-
-/* ---- Fields ---- */
-.field-group {
-  margin-bottom: 16px;
-}
-
-.field-group:last-child {
-  margin-bottom: 0;
-}
-
-.field-group label {
-  display: block;
-  font-size: 13px;
-  font-weight: 600;
-  color: #a6adc8;
-  margin-bottom: 6px;
-}
-
-.field-group .hint {
-  font-weight: 400;
-  color: #585b70;
-  font-size: 11px;
-}
-
-.field-group input[type="text"],
-.field-group input[type="password"],
-.field-group textarea {
-  width: 100%;
-  padding: 10px 14px;
-  background: #1e1e2e;
-  border: 1px solid #313244;
-  border-radius: 10px;
-  color: #cdd6f4;
-  font-size: 14px;
-  outline: none;
-  font-family: inherit;
-  transition: border-color 0.2s ease;
-}
-
-.field-group input:focus,
-.field-group textarea:focus {
-  border-color: #89b4fa;
-}
-
-.field-group textarea {
-  resize: vertical;
-  min-height: 80px;
-  font-family: 'SF Mono', Menlo, Monaco, monospace;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-/* ---- Connection test ---- */
-.connection-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.connection-status {
-  font-size: 13px;
-  font-weight: 600;
-  transition: color 0.3s ease;
-}
-
-.connection-status.ok {
-  color: #a6e3a1;
-}
-
-.connection-status.fail {
-  color: #f38ba8;
-}
-
-/* ---- Radio group ---- */
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.radio-label {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background: #1e1e2e;
-  border: 1px solid #313244;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: border-color 0.2s ease;
-}
-
-.radio-label:hover {
-  border-color: #45475a;
-}
-
-.radio-label input[type="radio"] {
-  accent-color: #89b4fa;
-  width: 16px;
-  height: 16px;
-}
-
-.radio-text {
-  font-size: 13px;
-  font-weight: 600;
-  color: #cdd6f4;
-  min-width: 60px;
-}
-
-.radio-desc {
-  font-size: 12px;
-  color: #585b70;
-}
-
-/* ---- Buttons ---- */
-.btn {
-  padding: 10px 20px;
-  font-size: 13px;
-  font-weight: 600;
-  border: 1px solid #313244;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
-}
-
-.btn:active {
-  transform: scale(0.97);
-}
-
-.btn.primary {
-  background: #89b4fa;
-  color: #11111b;
-  border-color: #89b4fa;
-}
-
-.btn.primary:hover {
-  background: #74c7ec;
-  border-color: #74c7ec;
-}
-
-.btn.secondary {
-  background: #1e1e2e;
-  color: #cdd6f4;
-}
-
-.btn.secondary:hover {
-  background: #313244;
-  border-color: #89b4fa;
-}
-
-/* ---- Actions footer ---- */
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.save-status {
-  font-size: 13px;
-  font-weight: 600;
-  transition: opacity 0.3s ease;
-}
-
-.save-status.saved {
-  color: #a6e3a1;
-}
-
-.save-status.error {
-  color: #f38ba8;
-}
+/* Total Recall — extension options. Tokens come from ../lib/tokens.css. */
+
+body { font-size: 14px; min-height: 100vh; }
+
+.page { max-width: 680px; margin: 0 auto; padding: 48px 24px 64px; display: flex; flex-direction: column; gap: 18px; }
+
+.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
+.hero-mark { border-radius: 12px; filter: drop-shadow(0 8px 24px rgba(59, 130, 246, 0.25)); }
+.hero h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
+.hero p { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }
+
+.card {
+  display: flex; flex-direction: column; gap: 18px; padding: 22px;
+  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
+  backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--shadow-md);
+}
+.card-head { display: flex; align-items: flex-start; gap: 12px; }
+.card-head > div { flex: 1; }
+.card-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
+.card-head p { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
+.card-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--accent-hover); background: var(--accent-muted); border: 1px solid var(--border-accent); }
+
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
+.muted { font-weight: 400; color: var(--text-tertiary); }
+.input, .textarea { font-size: 13.5px; padding: 9px 12px; }
+.mono { font-family: var(--font-mono); font-size: 12.5px; }
+.input-row { display: flex; gap: 6px; }
+.input-row .icon-btn { width: 38px; height: auto; border: 1px solid var(--border); }
+.input-row .icon-btn[aria-pressed="true"] { color: var(--accent-hover); border-color: var(--border-accent); }
+.help { font-size: 12px; color: var(--text-tertiary); line-height: 1.55; }
+.help code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
+.help a { display: inline-flex; align-items: center; gap: 3px; }
+
+.actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
+.btn { height: 34px; padding: 0 14px; font-size: 13px; }
+.saved { font-size: 12px; font-weight: 600; color: var(--success); animation: rise 0.2s ease both; }
+
+.result {
+  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 14px; border-radius: var(--radius-md);
+  font-size: 12.5px; background: var(--bg-secondary); border: 1px solid var(--border); animation: rise 0.2s ease both;
+}
+.result[hidden] { display: none; }
+.result.ok { border-color: rgba(52, 211, 153, 0.25); background: var(--success-muted); }
+.result.fail { border-color: rgba(248, 113, 113, 0.25); background: var(--error-muted); grid-template-columns: 1fr; color: var(--error); }
+.result dt { color: var(--text-tertiary); }
+.result dd { color: var(--text-primary); font-weight: 500; }
+
+.setting { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
+.setting.sub { margin-top: -6px; padding-left: 14px; border-left: 2px solid var(--border); }
+.setting.sub.is-disabled { opacity: 0.5; }
+.setting-title { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
+
+.shortcuts { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
+.shortcuts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; background: var(--bg-tertiary); }
+.shortcuts > div + div { border-top: 1px solid var(--border); }
+.shortcuts dt { font-size: 13px; }
+.shortcuts dd { display: flex; gap: 4px; }
+.shortcuts .unset { font-size: 12px; color: var(--text-tertiary); }
+.kbd { min-width: 22px; height: 22px; font-size: 11.5px; }
+.tips { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
+.tips > div { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
+
+.foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-tertiary); padding: 4px 4px 0; }