greprag 5.76.0 → 5.78.0

package/app/app.js

@@ -0,0 +1,360 @@
+const state = { model: null, route: 'home', projectId: null, loading: true };
+
+const content = document.querySelector('#app-content');
+const title = document.querySelector('#page-title');
+const eyebrow = document.querySelector('#page-eyebrow');
+const picker = document.querySelector('#project-picker');
+const nav = document.querySelector('#nav-list');
+const sidebarStatus = document.querySelector('#sidebar-status');
+const refreshButton = document.querySelector('#refresh-button');
+const toast = document.querySelector('#toast');
+
+const pageTitles = {
+  home: ['Your GrepRAG', 'LOCAL CONTROL PLANE'],
+  memory: ['Memory', 'WHAT YOUR AGENTS REMEMBER'],
+  skills: ['Skills', 'CAPABILITIES ACROSS AGENTS'],
+  knowledge: ['Knowledge', 'YOUR SEARCHABLE CORPUS'],
+  agents: ['Agents', 'CONNECTED HARNESSES'],
+  notifications: ['Notifications', 'WHAT GREPRAG TELLS YOUR AGENTS'],
+  privacy: ['Privacy & data', 'STORAGE AND CONTROL'],
+  advanced: ['Advanced', 'LOCAL RUNTIME'],
+};
+
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;');
+}
+
+function formatNumber(value) {
+  return new Intl.NumberFormat(undefined, { notation: value >= 100000 ? 'compact' : 'standard', maximumFractionDigits: 1 }).format(value || 0);
+}
+
+function formatDate(value) {
+  if (!value) return 'Not scheduled';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return 'Unknown';
+  return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: date.getFullYear() === new Date().getFullYear() ? undefined : 'numeric' }).format(date);
+}
+
+function statusPill(label, status = 'healthy') {
+  return `<span class="status-pill ${escapeHtml(status)}">${escapeHtml(label)}</span>`;
+}
+
+function miniPill(label, status = 'healthy') {
+  return `<span class="mini-pill ${escapeHtml(status)}">${escapeHtml(label)}</span>`;
+}
+
+function sectionHeading(kicker, heading, copy = '') {
+  return `<div class="section-heading"><div><span class="section-kicker">${escapeHtml(kicker)}</span><h2>${escapeHtml(heading)}</h2></div>${copy ? `<p>${escapeHtml(copy)}</p>` : ''}</div>`;
+}
+
+function toggle(setting, enabled, label, kind = 'setting') {
+  const attr = kind === 'setting' ? `data-setting="${escapeHtml(setting)}"`
+    : kind === 'interrupt' ? `data-interrupt="${escapeHtml(setting)}"`
+    : `data-adapter="${escapeHtml(setting)}"`;
+  return `<button type="button" class="toggle" role="switch" aria-label="${escapeHtml(label)}" aria-checked="${enabled ? 'true' : 'false'}" ${attr}></button>`;
+}
+
+function settingRow({ setting, title: rowTitle, description, enabled, scope = 'This project', kind = 'setting' }) {
+  return `<div class="setting-row"><div class="setting-copy"><div class="setting-title">${escapeHtml(rowTitle)}<span class="setting-scope">${escapeHtml(scope)}</span></div><p>${escapeHtml(description)}</p></div>${toggle(setting, enabled, rowTitle, kind)}</div>`;
+}
+
+function metric(label, value, note) {
+  return `<div class="metric"><span class="metric-label">${escapeHtml(label)}</span><div class="metric-value">${escapeHtml(value)}</div><div class="metric-note">${escapeHtml(note)}</div></div>`;
+}
+
+function signalRail(model) {
+  const live = {
+    agent: model.agents.some(agent => agent.configured),
+    capture: model.memory.captureEnabled,
+    memory: model.account.connected,
+    recall: model.memory.recapEnabled,
+  };
+  return `<div class="signal-rail" aria-label="GrepRAG memory path">
+    ${[['agent', 'AG', 'Agents'], ['capture', 'CP', 'Capture'], ['memory', 'MM', 'Memory'], ['recall', 'RC', 'Recall']].map(([id, glyph, label]) =>
+      `<div class="signal-node ${live[id] ? 'is-live' : ''}"><span class="node-core">${glyph}</span><span>${label}</span></div>`).join('')}
+  </div>`;
+}
+
+function renderHome(model) {
+  const project = model.selectedProject;
+  if (!project) return renderNoProject();
+  const healthy = model.health.state === 'healthy';
+  const issues = model.health.issues.length
+    ? `<div class="attention-panel">${model.health.issues.map(issue => `<div class="attention-row">${escapeHtml(issue)}</div>`).join('')}</div>`
+    : '';
+  const connected = model.agents.filter(agent => agent.configured).length;
+  return `<div class="page-stack">
+    <section class="signal-hero">
+      <div class="hero-copy">
+        ${statusPill(healthy ? 'Everything is working' : 'Needs attention', healthy ? 'healthy' : 'attention')}
+        <h2>Your agents remember ${escapeHtml(project.name)}.</h2>
+        <p>GrepRAG captures the work, keeps your knowledge searchable, and returns the right context when an agent needs it.</p>
+      </div>
+      ${signalRail(model)}
+    </section>
+    ${issues}
+    <section class="metric-grid" aria-label="GrepRAG totals">
+      ${metric('Memory items', formatNumber(model.memory.nodes), model.memory.captureEnabled ? 'Capture is on for this project' : 'Capture is paused for this project')}
+      ${metric('Knowledge sources', formatNumber(model.corpus.count), model.corpus.failures ? `${model.corpus.failures} refresh failures` : 'Sources are current')}
+      ${metric('Available skills', formatNumber(model.skills.mirrored || model.skills.installedUnique), `${model.skills.installedUnique} installed locally`)}
+      ${metric('Connected agents', `${connected}/${model.agents.length}`, connected ? 'Receiving GrepRAG context' : 'Finish agent setup')}
+    </section>
+    ${sectionHeading('CURRENT PROJECT', 'Core settings', 'The controls most likely to change how GrepRAG feels day to day.')}
+    <section class="settings-list">
+      ${settingRow({ setting: 'memoryCapture', title: 'Remember agent conversations', description: 'Save completed conversations so they can be summarized and recalled later.', enabled: project.settings.memoryCapture })}
+      ${settingRow({ setting: 'sessionStartRecap', title: 'Start sessions with recent context', description: 'Give new sessions a compact recap of recent work in this project.', enabled: project.settings.sessionStartRecap })}
+    </section>
+  </div>`;
+}
+
+function renderMemory(model) {
+  const settings = model.selectedProject?.settings;
+  if (!settings) return renderNoProject();
+  return `<div class="page-stack">
+    <section class="signal-hero">
+      <div class="hero-copy"><span class="section-kicker">MEMORY PATH</span><h2>Keep context without carrying the whole conversation.</h2><p>Raw turns become compact project history. You control capture, startup recall, and the local safety net around long sessions.</p></div>
+      ${signalRail(model)}
+    </section>
+    ${sectionHeading('CAPTURE & RECALL', 'Project memory', 'These settings affect only the selected project and take effect on the next hook event.')}
+    <section class="settings-list">
+      ${settingRow({ setting: 'memoryCapture', title: 'Remember agent conversations', description: 'Capture completed turns for later search and summaries.', enabled: settings.memoryCapture })}
+      ${settingRow({ setting: 'sessionStartRecap', title: 'Start sessions with recent context', description: 'Add a concise recent-work recap when an agent session starts.', enabled: settings.sessionStartRecap })}
+      ${settingRow({ setting: 'contextGovernor', title: 'Track long-session context', description: 'Measure context size locally so long sessions can be compacted before they become wasteful.', enabled: settings.contextGovernor })}
+      ${settingRow({ setting: 'pngArchive', title: 'Archive before compaction', description: 'Keep a lossless local visual archive before a long conversation is compressed.', enabled: settings.pngArchive })}
+    </section>
+    <section class="metric-grid">
+      ${metric('Stored memory', formatNumber(model.memory.nodes), `${model.memory.stores} project memory ${model.memory.stores === 1 ? 'store' : 'stores'}`)}
+      ${metric('Capture', settings.memoryCapture ? 'On' : 'Off', 'Changes apply on the next completed turn')}
+      ${metric('Session recap', settings.sessionStartRecap ? 'On' : 'Off', 'Recent context at session start')}
+      ${metric('Context threshold', formatNumber(settings.contextThreshold), 'Tokens before the local advisory threshold')}
+    </section>
+  </div>`;
+}
+
+function agentCard(agent, projectId, skillsPage = false) {
+  const stateLabel = agent.configured ? 'Connected' : agent.installed ? 'Needs attention' : 'Not installed';
+  const stateKind = agent.configured ? 'healthy' : 'attention';
+  const adapterOn = agent.managedSkillCount > 0;
+  return `<article class="agent-card">
+    <div class="agent-head"><div class="agent-name"><span class="agent-glyph">${escapeHtml(agent.label.slice(0, 2).toUpperCase())}</span>${escapeHtml(agent.label)}</div>${miniPill(stateLabel, stateKind)}</div>
+    <div class="agent-meta"><span>${agent.skillCount} local skills</span><span>${agent.managedSkillCount} GrepRAG adapters</span></div>
+    <p class="agent-note">${escapeHtml(agent.note)}</p>
+    ${skillsPage && agent.canToggleSkillAdapter ? `<div class="agent-actions"><span class="setting-copy"><span class="setting-title">GrepRAG skill adapters</span></span>${toggle(agent.id, adapterOn, `${agent.label} skill adapters`, 'adapter')}</div>` : ''}
+  </article>`;
+}
+
+function renderSkills(model) {
+  return `<div class="page-stack">
+    ${sectionHeading('SKILL LAYER', 'Capabilities your agents can load', 'GrepRAG keeps one canonical skill library and can install lightweight native adapters into supported agents.')}
+    <section class="metric-grid">
+      ${metric('Mirrored skills', formatNumber(model.skills.mirrored), 'Canonical skills in your GrepRAG account')}
+      ${metric('Installed locally', formatNumber(model.skills.installedUnique), 'Unique skills found across agents')}
+      ${metric('Adapter targets', formatNumber(model.skills.adaptersActive), 'Agents with GrepRAG-managed adapters')}
+      ${metric('Sync health', model.account.cloudStatus === 'connected' ? 'Ready' : 'Offline', 'Existing local adapters remain available offline')}
+    </section>
+    ${sectionHeading('ADAPTERS', 'Choose where skills appear', 'Turning an adapter off removes only GrepRAG-managed adapter files. Your own local skills are preserved.')}
+    <section class="agent-grid">${model.agents.map(agent => agentCard(agent, model.selectedProject?.id, true)).join('')}</section>
+  </div>`;
+}
+
+function renderKnowledge(model) {
+  const stores = model.corpus.stores;
+  const list = stores.length ? `<div class="knowledge-list" role="table" aria-label="Knowledge sources">${stores.map(store =>
+    `<div class="knowledge-row" role="row"><div class="knowledge-name" role="cell"><strong title="${escapeHtml(store.name)}">${escapeHtml(store.name)}</strong><span>${escapeHtml(store.kind)}${store.tags.length ? ` · #${escapeHtml(store.tags.join(' #'))}` : ''}</span></div><div role="cell"><span class="table-value">${formatNumber(store.nodes)}</span><span class="table-meta">nodes</span></div><div role="cell"><span class="table-value">${escapeHtml(store.policy)}</span><span class="table-meta">refresh</span></div><div role="cell">${miniPill(store.failures ? `${store.failures} failed` : 'Healthy', store.health)}<span class="table-meta">checked ${formatDate(store.lastCheckedAt)}</span></div></div>`).join('')}</div>`
+    : `<div class="empty-card"><strong>No knowledge sources yet</strong><p>Upload a reference with <code>greprag corpus upload &lt;file-or-url&gt; --raw</code>. It will appear here automatically.</p></div>`;
+  return `<div class="page-stack">
+    ${sectionHeading('KNOWLEDGE', 'Searchable reference collections', 'Documents, codebases, transcripts, and other sources your agents can search before answering.')}
+    <section class="metric-grid">
+      ${metric('Sources', formatNumber(model.corpus.count), model.corpus.status === 'connected' ? 'Connected to GrepRAG' : 'Cloud data unavailable')}
+      ${metric('Indexed nodes', formatNumber(model.corpus.nodes), 'Searchable sections across all sources')}
+      ${metric('Words', formatNumber(model.corpus.words), 'Approximate indexed content')}
+      ${metric('Refresh health', model.corpus.failures ? `${model.corpus.failures} failed` : 'Healthy', model.corpus.failures ? 'Open the affected source for details' : 'No source refresh failures')}
+    </section>
+    ${sectionHeading('SOURCES', 'Corpus inventory', 'Freshness is based on each source’s real refresh state, not its original upload date.')}
+    ${list}
+  </div>`;
+}
+
+function renderAgents(model) {
+  return `<div class="page-stack">
+    ${sectionHeading('AGENTS', 'Connected to this machine', 'Connection health comes from the hooks, plugins, and skills installed locally—not from an account checkbox.')}
+    <section class="agent-grid">${model.agents.map(agent => agentCard(agent, model.selectedProject?.id)).join('')}</section>
+    <section class="signal-hero"><div class="hero-copy"><span class="section-kicker">ONE MEMORY</span><h2>Different agents. The same project context.</h2><p>Each integration speaks its agent’s native hook language while sharing the same project identity, memory, skills, and knowledge.</p></div>${signalRail(model)}</section>
+  </div>`;
+}
+
+function renderNotifications(model) {
+  const settings = model.selectedProject?.settings;
+  const groups = Map.groupBy ? Map.groupBy(model.notifications.modules, module => module.group) : model.notifications.modules.reduce((map, module) => map.set(module.group, [...(map.get(module.group) || []), module]), new Map());
+  const guidance = [...groups.entries()].map(([group, modules]) => `<section class="guidance-group"><h3>${escapeHtml(group)}</h3>${modules.map(module => settingRow({ setting: module.id, title: module.label, description: module.description, enabled: module.enabled, scope: module.surface, kind: 'interrupt' })).join('')}</section>`).join('');
+  return `<div class="page-stack">
+    ${sectionHeading('INBOX', 'When to surface messages', 'Message delivery and agent guidance are separate controls.')}
+    <section class="settings-list">
+      <div class="setting-row"><div class="setting-copy"><div class="setting-title">Inbox notifications<span class="setting-scope">This project</span></div><p>Choose when unread GrepRAG messages should appear in agent context.</p></div><select class="inline-select" data-select-setting="inboxNotify" aria-label="Inbox notification frequency"><option value="every_turn" ${settings?.inboxNotify === 'every_turn' ? 'selected' : ''}>Every turn</option><option value="session_start_only" ${settings?.inboxNotify === 'session_start_only' ? 'selected' : ''}>Session start only</option><option value="off" ${settings?.inboxNotify === 'off' ? 'selected' : ''}>Off</option></select></div>
+      ${settingRow({ setting: 'emailAutosave', title: 'Save email attachments automatically', description: 'Download new agent-email attachments into this project when messages arrive.', enabled: settings?.emailAutosave || false })}
+    </section>
+    ${sectionHeading('AGENT GUIDANCE', 'Control each GrepRAG prompt', 'These tenant-wide switches change the actual startup and just-in-time guidance delivered to every connected agent.')}
+    <div class="guidance-groups">${guidance}</div>
+  </div>`;
+}
+
+function renderPrivacy(model) {
+  const settings = model.selectedProject?.settings;
+  return `<div class="page-stack">
+    ${sectionHeading('DATA BOUNDARY', 'Where your GrepRAG data lives', 'The app runs locally. It reads local integration state and uses your CLI credential to request account metrics without exposing the key to browser JavaScript.')}
+    <section class="privacy-grid">
+      <article class="privacy-card"><h3>Local machine</h3><p>Hooks, adapter files, project settings, archives, and compressed-output originals stay on this machine.</p></article>
+      <article class="privacy-card"><h3>GrepRAG account</h3><p>Captured project memory, corpus sources, mirrored skills, and cross-agent messages are stored in your tenant.</p></article>
+      <article class="privacy-card"><h3>Browser session</h3><p>This page is served on loopback with a short-lived local session. Your GrepRAG API key never enters the page.</p></article>
+    </section>
+    ${sectionHeading('CAPTURE', 'Project data controls', 'Stopping capture does not delete existing memory. It prevents future completed turns from being stored.')}
+    <section class="settings-list">${settingRow({ setting: 'memoryCapture', title: 'Remember agent conversations', description: 'Allow completed turns from this project to be stored in your GrepRAG account.', enabled: settings?.memoryCapture || false })}</section>
+  </div>`;
+}
+
+function renderAdvanced(model) {
+  const settings = model.selectedProject?.settings;
+  return `<div class="page-stack">
+    ${sectionHeading('LOCAL RUNTIME', 'Advanced project features', 'These are real hook behaviors. Changes apply without reinstalling GrepRAG.')}
+    <section class="settings-list">
+      ${settingRow({ setting: 'crushWrap', title: 'Compress noisy tool output', description: 'Reduce test, build, and search output before it enters agent context while keeping originals recoverable.', enabled: settings?.crushWrap || false })}
+      ${settingRow({ setting: 'contextGovernor', title: 'Track context pressure', description: 'Measure long-session context locally for a pull-only health reading.', enabled: settings?.contextGovernor || false })}
+      ${settingRow({ setting: 'pngArchive', title: 'Archive before compaction', description: 'Render a lossless local archive before supported agents compact long transcripts.', enabled: settings?.pngArchive || false })}
+    </section>
+    ${sectionHeading('AUTOMATIC REPAIRS', 'Mechanic', 'The global panic switch remains CLI-controlled so it can work even when the app or network is unavailable.')}
+    <section class="setting-row"><div class="setting-copy"><div class="setting-title">Repair runtime</div><p>Use <code>greprag mechanic off</code> for the local-first panic switch and <code>greprag mechanic on</code> to resume.</p></div>${miniPill(model.advanced.mechanicEnabled ? 'Running' : 'Paused', model.advanced.mechanicEnabled ? 'healthy' : 'attention')}</section>
+    ${sectionHeading('PATHS', 'Diagnostic locations')}
+    <section class="path-grid">
+      <div class="path-row"><span>Project settings</span><code class="path-value">${escapeHtml(model.advanced.projectSettingsPath)}</code></div>
+      <div class="path-row"><span>Tenant settings</span><code class="path-value">${escapeHtml(model.advanced.settingsPath)}</code></div>
+      <div class="path-row"><span>GrepRAG API</span><code class="path-value">${escapeHtml(model.advanced.apiUrl)}</code></div>
+    </section>
+  </div>`;
+}
+
+function renderNoProject() {
+  return `<div class="empty-card"><strong>No local GrepRAG project found</strong><p>Run <code>greprag init</code> inside a Git repository, then reopen the app.</p></div>`;
+}
+
+function render() {
+  const model = state.model;
+  const [pageTitle, pageEyebrow] = pageTitles[state.route] || pageTitles.home;
+  title.textContent = pageTitle;
+  eyebrow.textContent = pageEyebrow;
+  nav.querySelectorAll('[data-route]').forEach(button => button.setAttribute('aria-current', button.dataset.route === state.route ? 'page' : 'false'));
+  if (!model) return;
+  const pages = { home: renderHome, memory: renderMemory, skills: renderSkills, knowledge: renderKnowledge, agents: renderAgents, notifications: renderNotifications, privacy: renderPrivacy, advanced: renderAdvanced };
+  content.innerHTML = (pages[state.route] || pages.home)(model);
+  content.setAttribute('aria-busy', 'false');
+}
+
+function renderChrome(model) {
+  picker.innerHTML = model.projects.map(project => `<option value="${escapeHtml(project.id)}" ${project.id === model.selectedProject?.id ? 'selected' : ''}>${escapeHtml(project.name)}</option>`).join('');
+  picker.disabled = model.projects.length < 2;
+  const cloudState = model.account.cloudStatus === 'connected' ? 'healthy' : 'attention';
+  sidebarStatus.innerHTML = `<div class="connection-line"><span class="status-dot ${cloudState}"></span>${model.account.connected ? escapeHtml(model.account.handle || 'Account connected') : 'Account not connected'}</div><div class="connection-line"><span class="status-dot ${model.health.state}"></span>${model.health.state === 'healthy' ? 'All systems healthy' : 'Attention needed'}</div><div class="sidebar-version">greprag ${escapeHtml(model.app.version)} · local app</div>`;
+}
+
+function showToast(message, error = false) {
+  toast.textContent = message;
+  toast.className = `toast show${error ? ' error' : ''}`;
+  clearTimeout(showToast.timer);
+  showToast.timer = setTimeout(() => { toast.className = 'toast'; }, 3200);
+}
+
+async function api(path, options = {}) {
+  const response = await fetch(path, { ...options, headers: { 'Content-Type': 'application/json', ...(options.headers || {}) } });
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok || body.ok === false) throw new Error(body.error || `Request failed (${response.status})`);
+  return body;
+}
+
+async function loadModel({ quiet = false } = {}) {
+  if (!quiet) {
+    content.setAttribute('aria-busy', 'true');
+    content.innerHTML = `<div class="loading-state"><span class="loading-pulse" aria-hidden="true"></span><p>Reading your GrepRAG setup…</p></div>`;
+  }
+  refreshButton.disabled = true;
+  try {
+    const query = state.projectId ? `?project=${encodeURIComponent(state.projectId)}` : '';
+    const body = await api(`/api/model${query}`);
+    state.model = body.model;
+    state.projectId = body.model.selectedProject?.id || null;
+    renderChrome(body.model);
+    render();
+  } catch (error) {
+    content.innerHTML = `<div class="fatal-state"><strong>GrepRAG could not load</strong><p>${escapeHtml(error.message)}</p><button type="button" class="action-button" data-retry>Try again</button></div>`;
+    showToast(error.message, true);
+  } finally {
+    refreshButton.disabled = false;
+  }
+}
+
+async function mutate(element, path, method, body, success) {
+  element.disabled = true;
+  try {
+    await api(path, { method, body: JSON.stringify(body) });
+    await loadModel({ quiet: true });
+    showToast(success);
+  } catch (error) {
+    element.disabled = false;
+    showToast(error.message, true);
+  }
+}
+
+nav.addEventListener('click', event => {
+  const button = event.target.closest('[data-route]');
+  if (!button) return;
+  state.route = button.dataset.route;
+  history.replaceState(null, '', `#${state.route}`);
+  render();
+  document.querySelector('#content').focus({ preventScroll: true });
+});
+
+picker.addEventListener('change', () => {
+  state.projectId = picker.value;
+  loadModel();
+});
+
+refreshButton.addEventListener('click', () => loadModel());
+
+content.addEventListener('click', event => {
+  const retry = event.target.closest('[data-retry]');
+  if (retry) return loadModel();
+  const setting = event.target.closest('[data-setting]');
+  if (setting) {
+    const key = setting.dataset.setting;
+    const enabled = setting.getAttribute('aria-checked') !== 'true';
+    return mutate(setting, '/api/project-settings', 'PATCH', { projectId: state.projectId, patch: { [key]: enabled } }, `${setting.getAttribute('aria-label')} ${enabled ? 'enabled' : 'disabled'}.`);
+  }
+  const interrupt = event.target.closest('[data-interrupt]');
+  if (interrupt) {
+    const enabled = interrupt.getAttribute('aria-checked') !== 'true';
+    return mutate(interrupt, '/api/interrupts', 'PATCH', { id: interrupt.dataset.interrupt, enabled }, `${interrupt.getAttribute('aria-label')} ${enabled ? 'enabled' : 'disabled'} across agents.`);
+  }
+  const adapter = event.target.closest('[data-adapter]');
+  if (adapter) {
+    const enabled = adapter.getAttribute('aria-checked') !== 'true';
+    return mutate(adapter, '/api/skill-adapter', 'POST', { platform: adapter.dataset.adapter, projectId: state.projectId, enabled }, `${adapter.getAttribute('aria-label')} ${enabled ? 'enabled' : 'disabled'}.`);
+  }
+});
+
+content.addEventListener('change', event => {
+  const select = event.target.closest('[data-select-setting]');
+  if (!select) return;
+  mutate(select, '/api/project-settings', 'PATCH', { projectId: state.projectId, patch: { [select.dataset.selectSetting]: select.value } }, 'Inbox notifications updated.');
+});
+
+window.addEventListener('hashchange', () => {
+  const route = location.hash.slice(1);
+  if (pageTitles[route]) { state.route = route; render(); }
+});
+
+setInterval(() => api('/api/heartbeat', { method: 'POST', body: '{}' }).catch(() => {}), 20_000);
+state.route = pageTitles[location.hash.slice(1)] ? location.hash.slice(1) : 'home';
+loadModel();

package/app/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#12121a"/>
+  <text x="4" y="23" font-family="monospace" font-size="16" font-weight="700" fill="#8178ff">gR</text>
+</svg>

package/app/index.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="dark">
+    <meta name="theme-color" content="#0a0a0f">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="/app.css">
+    <title>GrepRAG</title>
+  </head>
+  <body>
+    <a class="skip-link" href="#content">Skip to content</a>
+    <div class="app-shell">
+      <aside class="sidebar" aria-label="GrepRAG navigation">
+        <div class="brand-row">
+          <span class="brand-mark" aria-hidden="true">gR</span>
+          <span class="brand-name">GrepRAG</span>
+          <span class="local-badge">LOCAL</span>
+        </div>
+        <label class="project-picker-label" for="project-picker">Current project</label>
+        <select id="project-picker" class="project-picker" aria-label="Current project"></select>
+        <nav class="nav-list" id="nav-list">
+          <button type="button" data-route="home"><span>01</span>Home</button>
+          <button type="button" data-route="memory"><span>02</span>Memory</button>
+          <button type="button" data-route="skills"><span>03</span>Skills</button>
+          <button type="button" data-route="knowledge"><span>04</span>Knowledge</button>
+          <button type="button" data-route="agents"><span>05</span>Agents</button>
+          <button type="button" data-route="notifications"><span>06</span>Notifications</button>
+          <button type="button" data-route="privacy"><span>07</span>Privacy & data</button>
+          <button type="button" data-route="advanced"><span>08</span>Advanced</button>
+        </nav>
+        <div class="sidebar-status" id="sidebar-status" aria-live="polite"></div>
+      </aside>
+      <main class="main-panel" id="content" tabindex="-1">
+        <header class="topbar">
+          <div>
+            <p class="eyebrow" id="page-eyebrow">LOCAL CONTROL PLANE</p>
+            <h1 id="page-title">Loading GrepRAG</h1>
+          </div>
+          <button class="refresh-button" id="refresh-button" type="button">Refresh</button>
+        </header>
+        <div class="content" id="app-content" aria-live="polite" aria-busy="true">
+          <div class="loading-state">
+            <span class="loading-pulse" aria-hidden="true"></span>
+            <p>Reading your GrepRAG setup…</p>
+          </div>
+        </div>
+      </main>
+    </div>
+    <div class="toast" id="toast" role="status" aria-live="polite"></div>
+    <script src="/app.js" defer></script>
+  </body>
+</html>

package/dist/app-settings.js

@@ -0,0 +1,162 @@
+"use strict";
+/** Local customer settings shared by the GrepRAG app and hook runtimes.
+ *
+ * Project behavior stays in .greprag/project.json, where the hooks already
+ * read it. Tenant-wide Interrupt preferences live in ~/.greprag/settings.json.
+ * The local app is only another reader/writer of those canonical surfaces.
+ *
+ * adr: adr/local-app-control-plane.md
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.localAppSettingsPath = localAppSettingsPath;
+exports.readLocalAppSettings = readLocalAppSettings;
+exports.setInterruptEnabled = setInterruptEnabled;
+exports.filterEnabledInterrupts = filterEnabledInterrupts;
+exports.readProjectAppSettings = readProjectAppSettings;
+exports.updateProjectAppSettings = updateProjectAppSettings;
+const fs = __importStar(require("node:fs"));
+const os = __importStar(require("node:os"));
+const path = __importStar(require("node:path"));
+const project_anchor_1 = require("./project-anchor");
+const DEFAULT_CONTEXT_THRESHOLD = 400_000;
+function readJson(file) {
+    try {
+        const parsed = JSON.parse(fs.readFileSync(file, 'utf8'));
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : {};
+    }
+    catch {
+        return {};
+    }
+}
+function localAppSettingsPath(homeDir = os.homedir()) {
+    return path.join(homeDir, '.greprag', 'settings.json');
+}
+function readLocalAppSettings(homeDir = os.homedir()) {
+    const raw = readJson(localAppSettingsPath(homeDir));
+    const interrupts = raw.interrupts && typeof raw.interrupts === 'object'
+        ? raw.interrupts
+        : {};
+    const disabled = Array.isArray(interrupts.disabled)
+        ? [...new Set(interrupts.disabled.filter((id) => typeof id === 'string' && /^[a-z0-9-]{1,80}$/.test(id)))]
+        : [];
+    return { version: 1, interrupts: { disabled } };
+}
+function setInterruptEnabled(moduleId, enabled, homeDir = os.homedir()) {
+    if (!/^[a-z0-9-]{1,80}$/.test(moduleId))
+        throw new Error('Invalid feature id.');
+    const settings = readLocalAppSettings(homeDir);
+    const disabled = new Set(settings.interrupts.disabled);
+    if (enabled)
+        disabled.delete(moduleId);
+    else
+        disabled.add(moduleId);
+    const next = {
+        version: 1,
+        interrupts: { disabled: [...disabled].sort() },
+    };
+    const file = localAppSettingsPath(homeDir);
+    fs.mkdirSync(path.dirname(file), { recursive: true });
+    fs.writeFileSync(file, JSON.stringify(next, null, 2) + '\n', 'utf8');
+    return next;
+}
+/** Filter an Interrupt registry without importing it here (keeps the settings
+ * module free of reminder-registry cycles and useful to every harness). */
+function filterEnabledInterrupts(modules, settings = readLocalAppSettings()) {
+    const disabled = new Set(settings.interrupts.disabled);
+    return modules.filter(module => !disabled.has(module.id));
+}
+function readProjectAppSettings(cwd) {
+    const anchor = (0, project_anchor_1.readAnchor)(cwd);
+    const raw = readJson(anchor.anchorPath);
+    return {
+        memoryCapture: anchor.memoryCapture,
+        sessionStartRecap: anchor.sessionStartRecap,
+        inboxNotify: anchor.inboxNotify,
+        crushWrap: raw.crush_wrap !== false,
+        contextGovernor: raw.context_governor !== false,
+        contextThreshold: typeof raw.context_threshold === 'number' && raw.context_threshold > 0
+            ? raw.context_threshold
+            : DEFAULT_CONTEXT_THRESHOLD,
+        pngArchive: raw.png_archive !== false,
+        emailAutosave: raw.email_autosave === true,
+    };
+}
+function assertProjectPatch(patch) {
+    const booleanKeys = [
+        'memoryCapture', 'sessionStartRecap', 'crushWrap', 'contextGovernor',
+        'pngArchive', 'emailAutosave',
+    ];
+    for (const key of booleanKeys) {
+        if (patch[key] !== undefined && typeof patch[key] !== 'boolean') {
+            throw new Error(`${key} must be true or false.`);
+        }
+    }
+    if (patch.inboxNotify !== undefined &&
+        !['every_turn', 'session_start_only', 'off'].includes(patch.inboxNotify)) {
+        throw new Error('inboxNotify must be every_turn, session_start_only, or off.');
+    }
+    if (patch.contextThreshold !== undefined &&
+        (!Number.isInteger(patch.contextThreshold) ||
+            patch.contextThreshold < 50_000 || patch.contextThreshold > 2_000_000)) {
+        throw new Error('contextThreshold must be an integer from 50,000 to 2,000,000.');
+    }
+}
+function updateProjectAppSettings(cwd, patch) {
+    assertProjectPatch(patch);
+    (0, project_anchor_1.ensureAnchor)(cwd);
+    const anchor = (0, project_anchor_1.readAnchor)(cwd);
+    const raw = readJson(anchor.anchorPath);
+    const mapping = [
+        ['memoryCapture', 'memory_capture'],
+        ['sessionStartRecap', 'session_start_recap'],
+        ['inboxNotify', 'inbox_notify'],
+        ['crushWrap', 'crush_wrap'],
+        ['contextGovernor', 'context_governor'],
+        ['contextThreshold', 'context_threshold'],
+        ['pngArchive', 'png_archive'],
+        ['emailAutosave', 'email_autosave'],
+    ];
+    for (const [inputKey, fileKey] of mapping) {
+        const value = patch[inputKey];
+        if (value !== undefined)
+            raw[fileKey] = value;
+    }
+    fs.mkdirSync(path.dirname(anchor.anchorPath), { recursive: true });
+    fs.writeFileSync(anchor.anchorPath, JSON.stringify(raw, null, 2) + '\n', 'utf8');
+    return readProjectAppSettings(cwd);
+}