@jhizzard/termdeck 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhizzard/termdeck",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Browser-based terminal multiplexer with metadata overlays, panel flashback memory recall, and AI-aware session management",
   "bin": {
     "termdeck": "./packages/cli/src/index.js"
@@ -29,7 +29,8 @@
     "server": "node packages/server/src/index.js",
     "start": "NODE_ENV=production node packages/cli/src/index.js",
     "test": "node --test packages/server/tests/**/*.test.js",
-    "install:app": "bash install.sh"
+    "install:app": "bash install.sh",
+    "sync-rumen-functions": "bash scripts/sync-rumen-functions.sh"
   },
   "dependencies": {
     "@homebridge/node-pty-prebuilt-multiarch": "^0.13.1",

package/packages/cli/src/init-rumen.js

@@ -18,10 +18,12 @@
 //   2. Derive project ref from SUPABASE_URL; confirm with user
 //   3. supabase link --project-ref <ref>
 //   4. Apply rumen migration 001 via pg
-//   5. supabase functions deploy rumen-tick --no-verify-jwt
+//   5. supabase functions deploy rumen-tick AND graph-inference (Sprint 43 T3)
+//      from a single staging dir with multi-function supabase/config.toml
 //   6. supabase secrets set DATABASE_URL=... ANTHROPIC_API_KEY=... [OPENAI_API_KEY=...]
-//   7. Test the function with a manual POST (fetch)
-//   8. Apply pg_cron schedule migration (002) with project ref substituted
+//   7. Test rumen-tick with a manual POST (graph-inference is cron-only)
+//   8. Apply pg_cron schedule migrations 002 (rumen-tick) AND 003 (graph-inference)
+//      with project ref substituted
 
 const path = require('path');
 const fs = require('fs');
@@ -301,67 +303,98 @@ async function applyRumenTables(secrets, dryRun) {
   }
 }
 
-function deployFunction(rumenVersion, dryRun) {
-  step('Running: supabase functions deploy rumen-tick --no-verify-jwt...');
+// Sprint 43 T3: rumen-tick is the only function with a `__RUMEN_VERSION__`
+// placeholder (its `npm:@jhizzard/rumen@<ver>` import is rewritten at deploy
+// time). graph-inference pins its own deps (`npm:postgres@3.4.4`) and is
+// copied verbatim. If a future function adds a placeholder, list it here.
+const FUNCTIONS_WITH_VERSION_PLACEHOLDER = new Set(['rumen-tick']);
+
+function deployFunctions(rumenVersion, dryRun) {
+  const fnNames = migrations.listRumenFunctions();
+  if (fnNames.length === 0) {
+    fail('no Rumen Edge Function source found in bundled setup or @jhizzard/rumen package');
+    return false;
+  }
+
+  step(`Staging ${fnNames.length} Edge Function(s) (${fnNames.join(', ')})...`);
   if (dryRun) { ok('(dry-run)'); return true; }
 
-  // We need the supabase command to run against a repo layout with
-  // `supabase/functions/rumen-tick/`. The TermDeck install does NOT include
-  // a `supabase/` directory at the project root, so we stage a tiny working
-  // directory under `os.tmpdir()` that mirrors what the CLI expects.
-  const stage = stageRumenFunction(rumenVersion);
+  // Stage all functions in one directory and one config.toml so a single
+  // `supabase functions deploy <name>` invocation per function can share the
+  // project root. This mirrors how a real Supabase repo is laid out.
+  let stage;
+  try {
+    stage = stageRumenFunctions(rumenVersion);
+  } catch (err) {
+    fail(err.message);
+    return false;
+  }
   if (!stage) {
-    fail('could not stage rumen-tick function source');
+    fail('could not stage Rumen Edge Function source');
     return false;
   }
-
-  const r = runShell('supabase', ['functions', 'deploy', 'rumen-tick', '--no-verify-jwt'], {
-    cwd: stage
-  });
-  if (!r.ok) { fail(`deploy failed (exit ${r.code})`); return false; }
   ok();
+
+  for (const name of fnNames) {
+    step(`Running: supabase functions deploy ${name} --no-verify-jwt...`);
+    const r = runShell('supabase', ['functions', 'deploy', name, '--no-verify-jwt'], {
+      cwd: stage
+    });
+    if (!r.ok) {
+      fail(`deploy of ${name} failed (exit ${r.code})`);
+      return false;
+    }
+    ok();
+  }
   return true;
 }
 
-// Create a staging directory containing:
-//   <stage>/supabase/functions/rumen-tick/{index.ts, tsconfig.json}
-// Also write a minimal `supabase/config.toml` so `supabase functions deploy`
-// doesn't complain about a missing project root.
-function stageRumenFunction(rumenVersion) {
+// Create a staging directory containing every bundled Rumen Edge Function:
+//   <stage>/supabase/functions/<name>/{index.ts, tsconfig.json}
+//   <stage>/supabase/config.toml  (one [functions.<name>] block per function)
+//
+// `__RUMEN_VERSION__` is substituted only in functions listed in
+// FUNCTIONS_WITH_VERSION_PLACEHOLDER (currently just rumen-tick). Other
+// files are copied verbatim. Returns the staging dir path or null if no
+// function source could be located.
+function stageRumenFunctions(rumenVersion) {
   if (!rumenVersion || !/^\d+\.\d+\.\d+/.test(rumenVersion)) {
-    throw new Error(`stageRumenFunction: invalid rumenVersion ${JSON.stringify(rumenVersion)}`);
+    throw new Error(`stageRumenFunctions: invalid rumenVersion ${JSON.stringify(rumenVersion)}`);
   }
+  const root = migrations.rumenFunctionsRoot();
+  const fnNames = migrations.listRumenFunctions();
+  if (fnNames.length === 0) return null;
+
   const stage = fs.mkdtempSync(path.join(os.tmpdir(), 'termdeck-rumen-stage-'));
-  const functionSrc = migrations.rumenFunctionDir();
-  if (!fs.existsSync(functionSrc)) return null;
-
-  const dest = path.join(stage, 'supabase', 'functions', 'rumen-tick');
-  fs.mkdirSync(dest, { recursive: true });
-  for (const f of fs.readdirSync(functionSrc)) {
-    const srcPath = path.join(functionSrc, f);
-    const destPath = path.join(dest, f);
-    // Substitute the version placeholder in the Deno entry point. Other files
-    // in the directory (tsconfig.json, etc.) are copied verbatim.
-    if (f === 'index.ts') {
-      const raw = fs.readFileSync(srcPath, 'utf-8');
-      if (!raw.includes('__RUMEN_VERSION__')) {
-        throw new Error(
-          `rumen-tick/index.ts is missing the __RUMEN_VERSION__ placeholder — ` +
-          `has someone reintroduced a hardcoded version?`
-        );
+
+  for (const name of fnNames) {
+    const fnSrc = path.join(root, name);
+    const fnDest = path.join(stage, 'supabase', 'functions', name);
+    fs.mkdirSync(fnDest, { recursive: true });
+    for (const f of fs.readdirSync(fnSrc)) {
+      const srcPath = path.join(fnSrc, f);
+      const destPath = path.join(fnDest, f);
+      if (f === 'index.ts' && FUNCTIONS_WITH_VERSION_PLACEHOLDER.has(name)) {
+        const raw = fs.readFileSync(srcPath, 'utf-8');
+        if (!raw.includes('__RUMEN_VERSION__')) {
+          throw new Error(
+            `${name}/index.ts is missing the __RUMEN_VERSION__ placeholder — ` +
+            `has someone reintroduced a hardcoded version? ` +
+            `Re-run scripts/sync-rumen-functions.sh to repopulate the placeholder.`
+          );
+        }
+        fs.writeFileSync(destPath, raw.replace(/__RUMEN_VERSION__/g, rumenVersion));
+      } else {
+        fs.copyFileSync(srcPath, destPath);
       }
-      fs.writeFileSync(destPath, raw.replace(/__RUMEN_VERSION__/g, rumenVersion));
-    } else {
-      fs.copyFileSync(srcPath, destPath);
     }
   }
 
+  const fnBlocks = fnNames.map((name) => `[functions.${name}]\nverify_jwt = false\n`).join('\n');
   const configToml = `# staged by termdeck init --rumen
 project_id = "termdeck-rumen-stage"
 
-[functions.rumen-tick]
-verify_jwt = false
-`;
+${fnBlocks}`;
   fs.writeFileSync(path.join(stage, 'supabase', 'config.toml'), configToml);
 
   return stage;
@@ -569,7 +602,8 @@ function wireAccessTokenInMcpJson({ token, mcpJsonPath, _testFs } = {}) {
 }
 
 function printNextSteps(projectRef) {
-  const functionUrl = `https://${projectRef}.supabase.co/functions/v1/rumen-tick`;
+  const rumenTickUrl = `https://${projectRef}.supabase.co/functions/v1/rumen-tick`;
+  const graphInferenceUrl = `https://${projectRef}.supabase.co/functions/v1/graph-inference`;
   const now = new Date();
   // Round up to the next 15-minute mark so the hint is accurate.
   const next = new Date(now.getTime());
@@ -577,16 +611,20 @@ function printNextSteps(projectRef) {
   process.stdout.write(`
 Rumen is deployed.
 
-Schedule: every 15 minutes via pg_cron
-First scheduled run: ${next.toISOString().replace(/\.\d+Z$/, 'Z')}
-Edge Function URL: ${functionUrl}
+Edge Functions:
+  rumen-tick        every 15 min — first run: ${next.toISOString().replace(/\.\d+Z$/, 'Z')}
+                    ${rumenTickUrl}
+  graph-inference   daily at 03:00 UTC (Sprint 42 cron)
+                    ${graphInferenceUrl}
 
 Next steps:
-  1. Monitor:  psql "$DATABASE_URL" -c "SELECT * FROM rumen_jobs ORDER BY started_at DESC LIMIT 5"
-  2. Store the service_role key in Supabase Vault as \`rumen_service_role_key\`
-     so the cron call in migrations/002_pg_cron_schedule.sql can authenticate.
+  1. Monitor rumen jobs: psql "$DATABASE_URL" -c "SELECT * FROM rumen_jobs ORDER BY started_at DESC LIMIT 5"
+  2. Store service_role keys in Supabase Vault — required for both cron schedules:
+       rumen_service_role_key            (used by 002_pg_cron_schedule.sql)
+       graph_inference_service_role_key  (used by 003_graph_inference_schedule.sql)
   3. Rumen insights flow back into Mnestra's memory_items via rumen_insights.
-  4. TermDeck's Flashback will surface cross-project patterns automatically.
+  4. graph-inference fills memory_relationships edges nightly (cosine similarity ≥ 0.85).
+  5. TermDeck's Flashback will surface cross-project patterns automatically.
 `);
 }
 
@@ -664,7 +702,7 @@ async function main(argv) {
     process.stderr.write(`  ! falling back to pinned FALLBACK_RUMEN_VERSION=${FALLBACK_RUMEN_VERSION}\n`);
   }
 
-  if (!deployFunction(resolved.version, flags.dryRun)) return 6;
+  if (!deployFunctions(resolved.version, flags.dryRun)) return 6;
   if (!setFunctionSecrets(secrets, flags.dryRun)) return 7;
   if (!(await testFunction(projectRef, secrets, flags.dryRun))) return 8;
   if (!flags.skipSchedule) {
@@ -700,3 +738,6 @@ module.exports = main;
 // pin the access-token detection without spawning a real `supabase` binary.
 module.exports._looksLikeMissingAccessToken = looksLikeMissingAccessToken;
 module.exports._wireAccessTokenInMcpJson = wireAccessTokenInMcpJson;
+// Sprint 43 T3: stage helper exposed so init-rumen-deploy.test.js can pin
+// the multi-function staging contract without shelling out to `supabase`.
+module.exports._stageRumenFunctions = stageRumenFunctions;

package/packages/client/public/app.js

@@ -303,7 +303,7 @@
               updatePanelMeta(id, msg.session.meta);
               break;
             case 'proactive_memory':
-              showProactiveToast(id, msg.hit);
+              showProactiveToast(id, msg.hit, msg.flashback_event_id);
               break;
             case 'exit':
               updatePanelMeta(id, {
@@ -583,7 +583,7 @@
       }
     }
 
-    function showProactiveToast(id, hit) {
+    function showProactiveToast(id, hit, flashbackEventId) {
       const entry = state.sessions.get(id);
       if (!entry || !entry.el) return;
 
@@ -606,16 +606,29 @@
 
       entry.el.appendChild(toast);
 
+      // Sprint 43 T2: track dismiss/click-through against flashback_events.
+      // The id is set server-side in the proactive_memory WS frame; if it's
+      // missing (server-side INSERT failed, or older server) the POSTs are
+      // skipped and the live toast still works — persistence is best-effort.
       const dismiss = () => {
         toast.remove();
         clearTimeout(toast._autoTimer);
+        if (flashbackEventId) {
+          fetch(`${API}/api/flashback/${flashbackEventId}/dismissed`, { method: 'POST' })
+            .catch((err) => console.warn('[flashback] dismiss POST failed:', err.message));
+        }
       };
       toast.querySelector('.t-dismiss').addEventListener('click', (e) => {
         e.stopPropagation();
         dismiss();
       });
       toast.addEventListener('click', () => {
-        dismiss();
+        toast.remove();
+        clearTimeout(toast._autoTimer);
+        if (flashbackEventId) {
+          fetch(`${API}/api/flashback/${flashbackEventId}/clicked`, { method: 'POST' })
+            .catch((err) => console.warn('[flashback] clicked POST failed:', err.message));
+        }
         showFlashbackModal(hit, id);
       });
 
@@ -1334,7 +1347,7 @@
               updatePanelMeta(id, msg.session.meta);
               break;
             case 'proactive_memory':
-              showProactiveToast(id, msg.hit);
+              showProactiveToast(id, msg.hit, msg.flashback_event_id);
               break;
             case 'exit':
               updatePanelMeta(id, { status: 'exited', statusDetail: `Exited (${msg.exitCode})` });

package/packages/client/public/flashback-history.html

@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TermDeck · Flashback History</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    /* Sprint 43 T2 — flashback-history page styling. Self-contained so the
+       dashboard ships independently of style.css; uses the existing --tg-*
+       design tokens for theme consistency. */
+    body.fb-page {
+      margin: 0;
+      background: var(--tg-bg);
+      color: var(--tg-text);
+      font-family: var(--tg-sans);
+      min-height: 100vh;
+    }
+    .fb-topbar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 8px 16px;
+      background: var(--tg-surface);
+      border-bottom: 1px solid var(--tg-border);
+      min-height: 44px;
+    }
+    .fb-tb-back {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--tg-text-bright);
+      text-decoration: none;
+      font-weight: 600;
+      padding: 4px 8px;
+      border-radius: var(--tg-radius-sm);
+    }
+    .fb-tb-back:hover { background: var(--tg-surface-hover); }
+    .fb-tb-divider { color: var(--tg-text-dim); }
+    .fb-tb-title { color: var(--tg-text); font-weight: 500; }
+    .fb-tb-spacer { flex: 1; }
+    .fb-tb-controls {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .fb-tb-controls label {
+      font-size: 12px;
+      color: var(--tg-text-dim);
+    }
+    .fb-tb-controls select {
+      background: var(--tg-bg);
+      color: var(--tg-text);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius-sm);
+      padding: 5px 8px;
+      font-family: var(--tg-mono);
+      font-size: 12px;
+    }
+    .fb-tb-controls select:focus {
+      outline: none;
+      border-color: var(--tg-accent);
+    }
+    .fb-tb-btn {
+      background: var(--tg-bg);
+      color: var(--tg-text);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius-sm);
+      padding: 5px 10px;
+      font-size: 12px;
+      font-family: var(--tg-mono);
+      cursor: pointer;
+    }
+    .fb-tb-btn:hover {
+      background: var(--tg-surface-hover);
+      border-color: var(--tg-border-active);
+    }
+
+    .fb-stage {
+      max-width: 1200px;
+      margin: 24px auto;
+      padding: 0 16px;
+    }
+
+    /* Funnel summary card */
+    .fb-funnel {
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius);
+      padding: 18px 20px;
+      margin-bottom: 20px;
+    }
+    .fb-funnel-title {
+      font-size: 12px;
+      color: var(--tg-text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      margin: 0 0 12px 0;
+      font-weight: 600;
+    }
+    .fb-funnel-bars {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 10px;
+    }
+    .fb-funnel-row {
+      display: grid;
+      grid-template-columns: 140px 1fr 80px;
+      align-items: center;
+      gap: 12px;
+    }
+    .fb-funnel-label {
+      font-size: 13px;
+      color: var(--tg-text);
+    }
+    .fb-funnel-bar {
+      position: relative;
+      height: 14px;
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      border-radius: 7px;
+      overflow: hidden;
+    }
+    .fb-funnel-bar-fill {
+      position: absolute;
+      inset: 0;
+      width: 0%;
+      transition: width 220ms ease-out;
+    }
+    .fb-funnel-row[data-tier="fires"] .fb-funnel-bar-fill { background: var(--tg-purple); }
+    .fb-funnel-row[data-tier="dismissed"] .fb-funnel-bar-fill { background: var(--tg-amber); }
+    .fb-funnel-row[data-tier="clicked"] .fb-funnel-bar-fill { background: var(--tg-green); }
+    .fb-funnel-count {
+      font-family: var(--tg-mono);
+      font-size: 12px;
+      color: var(--tg-text-bright);
+      text-align: right;
+    }
+    .fb-funnel-pct {
+      font-size: 10px;
+      color: var(--tg-text-dim);
+      margin-left: 4px;
+    }
+
+    /* Zero-state */
+    .fb-zero {
+      background: var(--tg-surface);
+      border: 1px dashed var(--tg-border-active);
+      border-radius: var(--tg-radius);
+      padding: 28px 24px;
+      text-align: center;
+      color: var(--tg-text-dim);
+    }
+    .fb-zero h3 {
+      margin: 0 0 8px 0;
+      color: var(--tg-text-bright);
+      font-size: 15px;
+    }
+    .fb-zero p {
+      margin: 6px 0;
+      max-width: 620px;
+      margin-left: auto;
+      margin-right: auto;
+      line-height: 1.5;
+    }
+    .fb-zero code {
+      font-family: var(--tg-mono);
+      background: var(--tg-bg);
+      padding: 1px 6px;
+      border-radius: 3px;
+      color: var(--tg-cyan);
+      font-size: 12px;
+    }
+
+    /* Table */
+    .fb-table-wrap {
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius);
+      overflow: hidden;
+    }
+    .fb-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    .fb-table thead {
+      background: var(--tg-bg);
+      border-bottom: 1px solid var(--tg-border);
+    }
+    .fb-table th {
+      text-align: left;
+      padding: 10px 12px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--tg-text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .fb-table td {
+      padding: 10px 12px;
+      border-top: 1px solid var(--tg-border);
+      vertical-align: top;
+      color: var(--tg-text);
+    }
+    .fb-table tbody tr:hover {
+      background: var(--tg-surface-hover);
+    }
+    .fb-cell-time {
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-text-dim);
+      white-space: nowrap;
+    }
+    .fb-cell-project {
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-cyan);
+      white-space: nowrap;
+    }
+    .fb-cell-error {
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-text);
+      max-width: 480px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .fb-cell-hits {
+      font-family: var(--tg-mono);
+      color: var(--tg-text-bright);
+      text-align: right;
+    }
+    .fb-cell-score {
+      font-family: var(--tg-mono);
+      color: var(--tg-text-dim);
+      text-align: right;
+      font-size: 11px;
+    }
+    .fb-cell-status {
+      white-space: nowrap;
+    }
+    .fb-pill {
+      display: inline-block;
+      padding: 2px 7px;
+      font-size: 10px;
+      font-family: var(--tg-mono);
+      border-radius: 999px;
+      border: 1px solid var(--tg-border);
+      background: var(--tg-bg);
+      color: var(--tg-text-dim);
+      margin-right: 4px;
+    }
+    .fb-pill-clicked { color: var(--tg-green); border-color: var(--tg-green); }
+    .fb-pill-dismissed { color: var(--tg-amber); border-color: var(--tg-amber); }
+    .fb-pill-pending { color: var(--tg-purple); border-color: var(--tg-purple); }
+
+    .fb-loading {
+      text-align: center;
+      padding: 40px;
+      color: var(--tg-text-dim);
+      font-size: 13px;
+    }
+    .fb-error-banner {
+      background: rgba(247, 118, 142, 0.08);
+      border: 1px solid var(--tg-red);
+      color: var(--tg-red);
+      padding: 10px 14px;
+      border-radius: var(--tg-radius-sm);
+      margin-bottom: 16px;
+      font-size: 13px;
+    }
+  </style>
+</head>
+<body class="fb-page">
+
+  <header class="fb-topbar">
+    <a class="fb-tb-back" href="/" title="Back to dashboard" aria-label="Back to dashboard">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      TermDeck
+    </a>
+    <span class="fb-tb-divider">/</span>
+    <span class="fb-tb-title">Flashback History</span>
+    <span class="fb-tb-spacer"></span>
+    <div class="fb-tb-controls">
+      <label for="fbWindow">Window</label>
+      <select id="fbWindow">
+        <option value="1d">last 24 h</option>
+        <option value="7d" selected>last 7 days</option>
+        <option value="30d">last 30 days</option>
+        <option value="all">all time</option>
+      </select>
+      <button type="button" class="fb-tb-btn" id="fbRefresh" title="Reload data">refresh</button>
+    </div>
+  </header>
+
+  <main class="fb-stage">
+    <div id="fbErrorBanner" class="fb-error-banner" hidden></div>
+
+    <section class="fb-funnel" id="fbFunnel" aria-label="Click-through funnel">
+      <h3 class="fb-funnel-title">Click-through funnel</h3>
+      <div class="fb-funnel-bars">
+        <div class="fb-funnel-row" data-tier="fires">
+          <span class="fb-funnel-label">Fires</span>
+          <div class="fb-funnel-bar"><div class="fb-funnel-bar-fill" id="fbBarFires"></div></div>
+          <span class="fb-funnel-count"><span id="fbCountFires">—</span></span>
+        </div>
+        <div class="fb-funnel-row" data-tier="dismissed">
+          <span class="fb-funnel-label">Dismissed</span>
+          <div class="fb-funnel-bar"><div class="fb-funnel-bar-fill" id="fbBarDismissed"></div></div>
+          <span class="fb-funnel-count"><span id="fbCountDismissed">—</span><span class="fb-funnel-pct" id="fbPctDismissed"></span></span>
+        </div>
+        <div class="fb-funnel-row" data-tier="clicked">
+          <span class="fb-funnel-label">Clicked through</span>
+          <div class="fb-funnel-bar"><div class="fb-funnel-bar-fill" id="fbBarClicked"></div></div>
+          <span class="fb-funnel-count"><span id="fbCountClicked">—</span><span class="fb-funnel-pct" id="fbPctClicked"></span></span>
+        </div>
+      </div>
+    </section>
+
+    <div id="fbContent">
+      <div class="fb-loading">Loading flashback history…</div>
+    </div>
+  </main>
+
+  <script src="flashback-history.js"></script>
+</body>
+</html>