From ecf3d1b3ce42e0000d179050d06a6558178bae2e Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Thu, 18 Jun 2026 00:31:10 -0700
Subject: [PATCH] graph in panel

---
 README.md                        |  9 ++-
 docs/panel-and-edges-plan.md     | 81 +++++++++++++++++++++++++++
 public/manifest.json             |  5 +-
 scripts/layout-shot.mjs          |  7 ++-
 scripts/panel-shot.mjs           | 83 ++++++++++++++++++++++++++++
 scripts/redirect-probe.mjs       | 94 ++++++++++++++++++++++++++++++++
 src/background/index.ts          | 66 ++++++++++++++++------
 src/storage/sessionMap.ts        |  2 +
 src/viewer/App.tsx               | 61 +++++++++++++++++++--
 src/viewer/graph/layout.ts       |  7 ++-
 src/viewer/styles.css            | 53 +++++++++++++++++-
 src/viewer/views/GraphCanvas.tsx | 51 +++++++++--------
 tests/graph.test.ts              | 15 +++++
 13 files changed, 487 insertions(+), 47 deletions(-)
 create mode 100644 docs/panel-and-edges-plan.md
 create mode 100644 scripts/panel-shot.mjs
 create mode 100644 scripts/redirect-probe.mjs

diff --git a/README.md b/README.md
index 9b52862..f95884d 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,8 @@ Then load it in Chrome:
 2. **Load unpacked** → select the `dist/` folder.
 3. Browse around. Open the service-worker console (the **service worker** link
    on the extension card) to watch `[history-graph] visit …` logs.
-4. Click the toolbar button to open the graph viewer.
+4. Click the toolbar icon to open the **side panel** (it solos the active tab and
+   updates live). Use the ⤢ button in the panel to pop out the full-tab view.
 
 After code changes, `npm run dev` rebuilds automatically — just hit the reload
 icon on the extension card to pick up the new build.
@@ -92,6 +93,7 @@ Each is a layout strategy feeding the shared `GraphCanvas`:
 - [x] Reversible time direction (newest- or oldest-at-top; newest default).
 - [x] Forbidden-columns lane allocation (interval-graph coloring) so concurrent
       branches never share a column — no overlapping lanes/connectors.
+- [x] Right-angle (elbow) connectors with rounded junctions.
 - [ ] Node detail panel, search highlighting, jump-to-now.
 
 ### Data model & capture fidelity
@@ -104,9 +106,14 @@ Each is a layout strategy feeding the shared `GraphCanvas`:
 - [ ] Optional **seed from `chrome.history`** on install (reconstruct a partial
       tree from `referringVisitId`) for a non-empty day one.
 - [ ] Treat back/forward as an explicit "revisit" edge if we want to show it.
+- [x] Collapse client-side redirects/canonicalisation (e.g. /wiki/Juneau →
+      /wiki/Juneau,_Alaska) into one node via the History-API timing heuristic.
 
 ### UX & product
 
+- [x] **Side panel** that follows your browsing: toolbar icon opens it, it solos
+      the active tab, refreshes live, and uses a compact (container-query) layout.
+- [x] Persist view prefs (mode + direction) across sessions.
 - [ ] Date-range picker (beyond the preset dropdown) and per-domain filtering.
 - [ ] **Pause capture** + per-site ignore list; define incognito behavior.
 - [ ] Export / import the graph (JSON).
diff --git a/docs/panel-and-edges-plan.md b/docs/panel-and-edges-plan.md
new file mode 100644
index 0000000..347089d
--- /dev/null
+++ b/docs/panel-and-edges-plan.md
@@ -0,0 +1,81 @@
+# Plan: right-angle edges, side panel, and quick wins
+
+Status: **done** (right-angle edges, Juneau/redirect dedupe, side panel +
+compact + auto-solo + live refresh, persisted prefs). Kept for reference.
+
+## 1. Right-angle (elbow) edges — small
+
+Today connectors are cubic-bezier S-curves (`GraphCanvas.tsx`). Switch to
+orthogonal elbows, which read cleaner and suit the transit-map look.
+
+- Mainline / same-column edges stay a straight vertical line (unchanged).
+- Fork edges become an L: keep the **child's column straight** and bend once at
+  the parent's row. For a parent→child edge: `M parentX parentY H childX V childY`
+  — horizontal along the parent's row, then vertical up the child's column.
+- Add a small corner radius (e.g. 4px) via an arc/quadratic at the bend for
+  polish; expose a constant so we can compare sharp vs rounded.
+- Because forbidden-columns guarantees each branch its own column, the vertical
+  runs line up — elbows will look like clean metro junctions.
+
+No layout change; this is purely the edge `d` string in `GraphCanvas`.
+
+## 2. Side panel that lives alongside browsing — medium
+
+Run the viewer in Chrome's Side Panel so the graph updates as you browse.
+
+**Wiring**
+- `manifest.json`: add `"permissions": ["sidePanel"]` and
+  `"side_panel": { "default_path": "viewer.html?panel=1" }`.
+- Service worker: `chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })`
+  so the toolbar icon opens the panel. (Note: this suppresses
+  `action.onClicked`, so move "open full tab" to a button inside the panel.)
+
+**Compact mode** (`?panel=1`, plus width-responsive)
+- Use a container query (`container-type: inline-size`) on the app shell so the
+  layout adapts to the ~360px panel without a separate codebase.
+- Hide in compact: brand wordmark (keep the mark), the range `<select>`, the
+  Tree/List switch (default to Git graph), and the per-row `transition · time`
+  meta. Keep: search (collapsible), collapse toggles, solo chip, clear (overflow).
+- Shrink row height and max label width.
+- Add an **"Open full view"** button (opens `viewer.html` in a tab).
+
+**Live updates**
+- Service worker broadcasts a debounced `chrome.runtime.sendMessage({type:"visit"})`
+  after `putVisit`/title patches.
+- Viewer listens via `chrome.runtime.onMessage` and calls `reload()`. Wrap send
+  in `.catch(()=>{})` since there may be no listener.
+
+**Follow-along** (panel-only, behind `?panel=1`)
+- On a live update, scroll the most recent visit (HEAD) into view and briefly
+  pulse it. HEAD is already computed in `GraphCanvas`.
+- Option to evaluate later: auto-solo the active tab so the panel shows the
+  current tab's lineage. Flagging as a choice, not building first pass.
+
+## 3. Other low-hanging, high-value
+
+Prioritized; all small unless noted.
+
+- **Fix duplicate nodes** (the "Juneau, Alaska" pair). Likely a trailing-slash
+  or redirect-normalized URL that slips past the exact-match dedupe. Strengthen
+  the same-stop check (normalize trailing slash; reuse/extend `sameDocument`),
+  and confirm with a harness case on a redirecting page.
+- **Persist view prefs** — save `{ mode, newestFirst }` to `chrome.storage.local`,
+  restore on mount. (Skip soloTab/collapsed — session-scoped.)
+- **Auto-scroll/highlight current** — useful in both panel and tab.
+- **Open-full-view button** — tiny, needed by the panel anyway.
+- **Hover/keyboard polish** — focusable rows, visible focus ring, `title` on the
+  station for fork count. (Accessibility floor.)
+
+Deferred (bigger): node detail panel, favicon caching by origin, timeline view,
+row virtualization.
+
+## Suggested order
+
+1. Right-angle edges + Juneau dedupe (quick, visible wins).
+2. Side panel: manifest + behavior + "open full view".
+3. Compact mode via container queries + hide list.
+4. Live refresh (SW broadcast → reload) + follow-along scroll.
+5. Persist view prefs.
+
+Each step builds and is screenshot-testable via the existing harnesses
+(`scripts/viewer-shot.mjs`, `scripts/layout-shot.mjs`).
diff --git a/public/manifest.json b/public/manifest.json
index 48eb662..80f11a2 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,12 +3,15 @@
   "name": "History Graph",
   "version": "0.0.1",
   "description": "Visualize your browsing history as a tree / git-style graph.",
-  "permissions": ["webNavigation", "tabs", "storage"],
+  "permissions": ["webNavigation", "tabs", "storage", "sidePanel"],
   "background": {
     "service_worker": "background.js",
     "type": "module"
   },
   "action": {
     "default_title": "Open History Graph"
+  },
+  "side_panel": {
+    "default_path": "viewer.html?panel=1"
   }
 }
diff --git a/scripts/layout-shot.mjs b/scripts/layout-shot.mjs
index 56c498a..1ccfb15 100644
--- a/scripts/layout-shot.mjs
+++ b/scripts/layout-shot.mjs
@@ -17,7 +17,7 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 const context = await chromium.launchPersistentContext(mkdtempSync(resolve(tmpdir(), "hg-")), {
   headless: false,
   args: [`--disable-extensions-except=${DIST}`, `--load-extension=${DIST}`],
-  viewport: { width: 1100, height: 760 },
+  viewport: { width: 700, height: 760 }, // mid width: exercises control-bar wrapping
   colorScheme: "dark",
 });
 
@@ -82,7 +82,12 @@ try {
   await viewer.waitForSelector(".graph", { timeout: 5000 });
   await sleep(500);
   await viewer.screenshot({ path: `${OUT}/5-forbidden.png` });
+  const ov = await viewer.evaluate(() => ({
+    sw: document.documentElement.scrollWidth,
+    cw: document.documentElement.clientWidth,
+  }));
   console.log(`wrote ${OUT}/5-forbidden.png`);
+  console.log(`horizontal: scrollWidth=${ov.sw} clientWidth=${ov.cw} → ${ov.sw > ov.cw ? "OVERFLOW" : "ok"}`);
 } finally {
   await context.close();
 }
diff --git a/scripts/panel-shot.mjs b/scripts/panel-shot.mjs
new file mode 100644
index 0000000..16d759f
--- /dev/null
+++ b/scripts/panel-shot.mjs
@@ -0,0 +1,83 @@
+// Screenshot the side-panel (compact) layout. Loads viewer.html?panel=1 at panel
+// width, seeds data keyed to the active tab so auto-solo has something to show,
+// including a cross-tab child to exercise the ↗ jump button.
+//
+//   node scripts/panel-shot.mjs   (after `npm run build`)
+
+import { chromium } from "playwright";
+import { mkdtempSync, mkdirSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const DIST = resolve(dirname(fileURLToPath(import.meta.url)), "../dist");
+const OUT = "/tmp/hg-shots";
+mkdirSync(OUT, { recursive: true });
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const context = await chromium.launchPersistentContext(mkdtempSync(resolve(tmpdir(), "hg-")), {
+  headless: false,
+  args: [`--disable-extensions-except=${DIST}`, `--load-extension=${DIST}`],
+  viewport: { width: 400, height: 760 }, // panel-ish
+  colorScheme: "dark",
+});
+
+try {
+  let [sw] = context.serviceWorkers();
+  if (!sw) sw = await context.waitForEvent("serviceworker", { timeout: 10_000 });
+  const extId = new URL(sw.url()).host;
+
+  const page = await context.newPage();
+  await page.goto(`chrome-extension://${extId}/viewer.html?panel=1`, { waitUntil: "load" });
+
+  await page.evaluate(async () => {
+    const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+    const A = tab?.id ?? 1;
+    const B = A + 1000; // a different "tab" we opened
+    const now = Date.now();
+    const t = (m) => now - m * 60_000;
+    const W = "https://en.wikipedia.org/static/favicon/wikipedia.ico";
+    const mk = (id, title, ts, parentId, tabId = A) => ({
+      id, url: `https://en.wikipedia.org/wiki/${id}`, title, faviconUrl: W,
+      ts, tabId, parentId, transition: "link", qualifiers: [],
+    });
+    const visits = [
+      mk("wiki", "Wikipedia", t(20), null),
+      mk("espn", "ESPN", t(18), "wiki"),
+      mk("wdc", "The Walt Disney Company", t(16), "espn"),
+      mk("ren", "Disney Renaissance", t(14), "wdc"),
+      mk("bcast", "Broadcasting of sports events", t(12), "espn"),
+      mk("maps", "Google Maps", t(15), "wdc", B), // opened in another tab
+    ];
+    const db = await new Promise((res, rej) => {
+      const r = indexedDB.open("history-graph", 1);
+      r.onupgradeneeded = () => {
+        const d = r.result;
+        if (!d.objectStoreNames.contains("visits")) {
+          const s = d.createObjectStore("visits", { keyPath: "id" });
+          s.createIndex("ts", "ts");
+          s.createIndex("tabId", "tabId");
+          s.createIndex("parentId", "parentId");
+        }
+      };
+      r.onsuccess = () => res(r.result);
+      r.onerror = () => rej(r.error);
+    });
+    await new Promise((res, rej) => {
+      const tx = db.transaction("visits", "readwrite");
+      const s = tx.objectStore("visits");
+      s.clear();
+      for (const v of visits) s.put(v);
+      tx.oncomplete = () => res();
+      tx.onerror = () => rej(tx.error);
+    });
+  });
+
+  await page.reload({ waitUntil: "load" });
+  await page.waitForSelector(".graph, .empty", { timeout: 5000 });
+  await sleep(600);
+  await page.screenshot({ path: `${OUT}/6-panel.png` });
+  console.log(`wrote ${OUT}/6-panel.png`);
+} finally {
+  await context.close();
+}
diff --git a/scripts/redirect-probe.mjs b/scripts/redirect-probe.mjs
new file mode 100644
index 0000000..a683670
--- /dev/null
+++ b/scripts/redirect-probe.mjs
@@ -0,0 +1,94 @@
+// Probe: what does the extension capture when /wiki/Juneau redirects to
+// /wiki/Juneau,_Alaska? Prints the HTTP redirect chain AND the rows our capture
+// layer stored (url + transition + qualifiers).
+//
+//   node scripts/redirect-probe.mjs   (after `npm run build`)
+
+import { chromium } from "playwright";
+import { mkdtempSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const DIST = resolve(dirname(fileURLToPath(import.meta.url)), "../dist");
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const context = await chromium.launchPersistentContext(mkdtempSync(resolve(tmpdir(), "hg-")), {
+  headless: false,
+  args: [`--disable-extensions-except=${DIST}`, `--load-extension=${DIST}`],
+});
+
+try {
+  let [sw] = context.serviceWorkers();
+  if (!sw) sw = await context.waitForEvent("serviceworker", { timeout: 10_000 });
+  const extId = new URL(sw.url()).host;
+  const attach = (w) => w.on("console", (m) => console.log("  [SW]", m.text()));
+  attach(sw);
+  context.on("serviceworker", attach);
+
+  // Observe History API usage on every document: is the redirect a push or a
+  // replace, and how long after the document loads?
+  await context.addInitScript(() => {
+    const stamp = () => Math.round(performance.now());
+    const log = (m, u) => console.log(`HIST ${m} ${u} @${stamp()}ms`);
+    const p = history.pushState.bind(history);
+    const r = history.replaceState.bind(history);
+    history.pushState = (s, t, u) => (log("push", u ?? ""), p(s, t, u));
+    history.replaceState = (s, t, u) => (log("replace", u ?? ""), r(s, t, u));
+  });
+
+  const page = await context.newPage();
+  page.on("console", (m) => {
+    const t = m.text();
+    if (t.startsWith("HIST")) console.log("  page:", t);
+  });
+
+  // Warm up the service worker so it doesn't cold-start mid-scenario and miss
+  // the parent navigation (a test artifact, not a product behavior).
+  await page.goto("https://en.wikipedia.org/wiki/Main_Page", { waitUntil: "load" });
+  await sleep(1500);
+
+  // Reproduce the user's path: on a real article, CLICK a link to the bare
+  // /wiki/Juneau (a redirect page) and let it client-redirect.
+  await page.goto("https://en.wikipedia.org/wiki/Southeast_Alaska", { waitUntil: "load" });
+  await sleep(1200);
+  await page.evaluate(() => {
+    const a = document.createElement("a");
+    a.href = "/wiki/Juneau";
+    a.textContent = "go";
+    document.body.prepend(a);
+    a.click();
+  });
+  await page.waitForLoadState("load");
+  await sleep(2500); // let the client-side redirect + capture settle
+  const finalUrl = page.url();
+  const chain = ["(see captured rows)"];
+
+  // Read the extension's IndexedDB from a page on the extension origin.
+  const viewer = await context.newPage();
+  await viewer.goto(`chrome-extension://${extId}/viewer.html`, { waitUntil: "load" });
+  const visits = await viewer.evaluate(async () => {
+    const db = await new Promise((res, rej) => {
+      const q = indexedDB.open("history-graph");
+      q.onsuccess = () => res(q.result);
+      q.onerror = () => rej(q.error);
+    });
+    return await new Promise((res, rej) => {
+      const q = db.transaction("visits").objectStore("visits").getAll();
+      q.onsuccess = () => res(q.result);
+      q.onerror = () => rej(q.error);
+    });
+  });
+
+  console.log("clicked: /wiki/Juneau from Southeast_Alaska");
+  console.log("final url:", finalUrl);
+  void chain;
+  console.log(`\ncaptured ${visits.length} visit(s):`);
+  const byId = new Map(visits.map((v) => [v.id, v]));
+  for (const v of visits.sort((a, b) => a.ts - b.ts)) {
+    const parent = v.parentId ? byId.get(v.parentId)?.url ?? "(out of range)" : "(root)";
+    console.log(`  [${v.transition}] ${v.url}\n      parent: ${parent}`);
+  }
+} finally {
+  await context.close();
+}
diff --git a/src/background/index.ts b/src/background/index.ts
index 60d56ab..ccd7e60 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -45,18 +45,37 @@ chrome.webNavigation.onCreatedNavigationTarget.addListener(async (details) => {
 // The main event: a navigation has committed in a frame.
 chrome.webNavigation.onCommitted.addListener(async (details) => {
   if (details.frameId !== MAIN_FRAME) return; // ignore iframes for now
-  await recordNavigation(details);
+  await recordNavigation(details, "commit");
 });
 
-// Single-page-app route changes (pushState/replaceState) don't fire onCommitted.
-// Capture them as follow-on visits so SPAs aren't black holes in the tree.
+// Same-document URL changes via the History API (pushState/replaceState). Used
+// for SPA routes — but also for client-side redirects/canonicalisation, which
+// we collapse rather than record (see below).
 chrome.webNavigation.onHistoryStateUpdated.addListener(async (details) => {
   if (details.frameId !== MAIN_FRAME) return;
-  await recordNavigation(details);
+  await recordNavigation(details, "history");
 });
 
+// A same-document URL change this soon after the page committed is almost
+// always a redirect/canonicalisation (e.g. /wiki/Juneau → /wiki/Juneau,_Alaska),
+// not a navigation the user made. Real SPA route changes come after they dwell.
+const REDIRECT_WINDOW_MS = 1500;
+
+type NavSource = "commit" | "history";
+
+// Tell open viewers (esp. the side panel) that the data changed, so they can
+// refresh live. Debounced; the .catch swallows "no receiver" when nothing's open.
+let notifyTimer: ReturnType<typeof setTimeout> | undefined;
+function notifyChanged(): void {
+  clearTimeout(notifyTimer);
+  notifyTimer = setTimeout(() => {
+    chrome.runtime.sendMessage({ type: "hg:changed" }).catch(() => {});
+  }, 250);
+}
+
 async function recordNavigation(
   details: chrome.webNavigation.WebNavigationTransitionCallbackDetails,
+  via: NavSource,
 ): Promise<void> {
   const { tabId, url } = details;
   if (isIgnorable(url)) return;
@@ -67,7 +86,7 @@ async function recordNavigation(
   if (qualifiers.includes("forward_back")) {
     const existing = await getLatestVisitForTabUrl(tabId, url);
     if (existing) {
-      await setCurrentVisit(tabId, { id: existing.id, url: existing.url });
+      await setCurrentVisit(tabId, { id: existing.id, url: existing.url, committedAt: existing.ts });
       console.log(`[history-graph] back/forward → ${url}`);
       return;
     }
@@ -84,13 +103,17 @@ async function recordNavigation(
     return;
   }
 
-  // Client-side redirect: the page we just recorded is bouncing to a new URL.
-  // Update that node in place rather than creating a near-duplicate child, so a
-  // redirect chain collapses to a single node at its final URL.
-  if (current && qualifiers.includes("client_redirect")) {
+  // Client-side redirect — either explicitly tagged by Chrome, or inferred: a
+  // History-API URL change moments after the page committed. Update the node in
+  // place so the redirect collapses to a single node at its final URL.
+  const taggedRedirect = qualifiers.includes("client_redirect");
+  const softRedirect =
+    via === "history" && current != null && details.timeStamp - current.committedAt < REDIRECT_WINDOW_MS;
+  if (current && (taggedRedirect || softRedirect)) {
     await patchVisit(current.id, { url });
-    await setCurrentVisit(tabId, { id: current.id, url });
+    await setCurrentVisit(tabId, { id: current.id, url, committedAt: current.committedAt });
     console.log(`[history-graph] redirect ⇒ ${url}`);
+    notifyChanged();
     return;
   }
 
@@ -104,7 +127,11 @@ async function recordNavigation(
   if (pending?.faviconUrl) visit.faviconUrl = pending.faviconUrl;
 
   await putVisit(visit);
-  await setCurrentVisit(details.tabId, { id: visit.id, url: visit.url });
+  await setCurrentVisit(details.tabId, {
+    id: visit.id,
+    url: visit.url,
+    committedAt: details.timeStamp,
+  });
 
   // Milestone 2 visibility: watch these in the service worker console.
   console.log(
@@ -112,6 +139,7 @@ async function recordNavigation(
       `${parentId ? "" : " (root)"} ← ${visit.url}`,
     visit,
   );
+  notifyChanged();
 }
 
 // Fill in the page title/favicon once the tab reports them.
@@ -136,6 +164,7 @@ chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   const current = await getCurrentVisit(tabId);
   if (current && sameDocument(current.url, url)) {
     await patchVisit(current.id, patch);
+    notifyChanged();
     return;
   }
 
@@ -144,6 +173,7 @@ chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   const match = await getLatestVisitForTabUrl(tabId, url);
   if (match) {
     await patchVisit(match.id, patch);
+    notifyChanged();
     return;
   }
 
@@ -165,7 +195,10 @@ chrome.webNavigation.onCompleted.addListener(async (details) => {
     ...(tab.title ? { title: tab.title } : {}),
     ...(tab.favIconUrl ? { faviconUrl: tab.favIconUrl } : {}),
   };
-  if (patch.title || patch.faviconUrl) await patchVisit(visit.id, patch);
+  if (patch.title || patch.faviconUrl) {
+    await patchVisit(visit.id, patch);
+    notifyChanged();
+  }
 });
 
 // Tab gone → drop its current-visit bookkeeping.
@@ -173,9 +206,10 @@ chrome.tabs.onRemoved.addListener((tabId) => {
   void clearTab(tabId);
 });
 
-// Toolbar button opens the visualization in a full tab.
-chrome.action.onClicked.addListener(() => {
-  void chrome.tabs.create({ url: chrome.runtime.getURL("viewer.html") });
-});
+// Clicking the toolbar icon opens the side panel (set once; suppresses
+// action.onClicked). The panel follows along as you browse.
+chrome.sidePanel
+  ?.setPanelBehavior({ openPanelOnActionClick: true })
+  .catch((e) => console.warn("[history-graph] sidePanel:", e));
 
 console.log("[history-graph] capture service worker started");
diff --git a/src/storage/sessionMap.ts b/src/storage/sessionMap.ts
index a93a962..bfa45e4 100644
--- a/src/storage/sessionMap.ts
+++ b/src/storage/sessionMap.ts
@@ -27,6 +27,8 @@ const TITLE_KEY = "pendingTitleByTab";
 export interface CurrentVisit {
   id: string;
   url: string;
+  /** webNavigation timeStamp when this visit committed (for redirect timing). */
+  committedAt: number;
 }
 
 export interface PendingTitle {
diff --git a/src/viewer/App.tsx b/src/viewer/App.tsx
index a001f6c..8437f67 100644
--- a/src/viewer/App.tsx
+++ b/src/viewer/App.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useForest } from "./useForest";
 import { buildViewModel } from "./graph/viewModel";
 import { chronologicalLayout, treeLayout } from "./graph/layout";
@@ -22,6 +22,50 @@ export function App() {
 
   const { forest, reload } = useForest(rangeDays, search);
 
+  // Running inside the side panel? It follows along as you browse.
+  const panel = useMemo(() => new URLSearchParams(location.search).has("panel"), []);
+
+  // Live refresh: the capture worker pings us after every change.
+  useEffect(() => {
+    const onMsg = (msg: { type?: string }) => {
+      if (msg?.type === "hg:changed") reload();
+    };
+    chrome.runtime.onMessage.addListener(onMsg);
+    return () => chrome.runtime.onMessage.removeListener(onMsg);
+  }, [reload]);
+
+  // In the panel, solo whichever tab is active and follow tab switches.
+  useEffect(() => {
+    if (!panel) return;
+    const sync = async () => {
+      const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+      if (tab?.id != null) setSoloTab(tab.id);
+    };
+    void sync();
+    chrome.tabs.onActivated.addListener(sync);
+    chrome.windows.onFocusChanged.addListener(sync);
+    return () => {
+      chrome.tabs.onActivated.removeListener(sync);
+      chrome.windows.onFocusChanged.removeListener(sync);
+    };
+  }, [panel]);
+
+  const openFullView = () => chrome.tabs.create({ url: chrome.runtime.getURL("viewer.html") });
+
+  // Persist view preferences (mode + direction) across sessions.
+  const prefsLoaded = useRef(false);
+  useEffect(() => {
+    chrome.storage.local.get("hg:prefs").then((o) => {
+      const p = o["hg:prefs"] as { mode?: Mode; newestFirst?: boolean } | undefined;
+      if (p?.mode) setMode(p.mode);
+      if (typeof p?.newestFirst === "boolean") setNewestFirst(p.newestFirst);
+      prefsLoaded.current = true;
+    });
+  }, []);
+  useEffect(() => {
+    if (prefsLoaded.current) void chrome.storage.local.set({ "hg:prefs": { mode, newestFirst } });
+  }, [mode, newestFirst]);
+
   // A short label per tab = the title of its most recent visit.
   const tabLabels = useMemo(() => {
     const best = new Map<number, { title: string; ts: number }>();
@@ -74,11 +118,11 @@ export function App() {
   const viewProps = { model, actions, tabLabel, soloed: soloTab != null };
 
   return (
-    <div className="app">
+    <div className={panel ? "app panel" : "app"}>
       <header className="topbar">
         <div className="brand">
           <span className="brand-mark" aria-hidden="true" />
-          History&nbsp;Graph
+          <span className="brand-text">History&nbsp;Graph</span>
         </div>
         <div className="controls">
           {soloTab != null && (
@@ -93,7 +137,11 @@ export function App() {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
-          <select value={rangeDays} onChange={(e) => setRangeDays(Number(e.target.value))}>
+          <select
+            className="range"
+            value={rangeDays}
+            onChange={(e) => setRangeDays(Number(e.target.value))}
+          >
             <option value={1}>24 hours</option>
             <option value={7}>7 days</option>
             <option value={30}>30 days</option>
@@ -122,6 +170,11 @@ export function App() {
           <span className="count" title="visible visits">
             {model.annotations.size}
           </span>
+          {panel && (
+            <button className="ghost" onClick={openFullView} title="Open in a full tab">
+              ⤢
+            </button>
+          )}
           <button className="clear" onClick={clearData}>
             Clear data
           </button>
diff --git a/src/viewer/graph/layout.ts b/src/viewer/graph/layout.ts
index 5e91bfb..c81438a 100644
--- a/src/viewer/graph/layout.ts
+++ b/src/viewer/graph/layout.ts
@@ -101,8 +101,13 @@ export function chronologicalLayout(roots: VisitNode[], opts: LayoutOptions = {}
   // Interval-graph coloring: branches whose row-spans overlap get distinct
   // columns. THIS is the forbidden-columns guarantee — a lane or connector is
   // never drawn through a column another branch occupies in the same rows.
+  //
+  // Tie-break by end DESCENDING: among branches that start together (siblings of
+  // a fork), the one that stays active longest / terminates most recently claims
+  // the inner (lower) column, pushing older siblings outward — and the long
+  // trunk keeps column 0.
   const active: Branch[] = [];
-  for (const b of [...branches].sort((x, y) => x.start - y.start || x.end - y.end)) {
+  for (const b of [...branches].sort((x, y) => x.start - y.start || y.end - x.end)) {
     for (let i = active.length - 1; i >= 0; i--) if (active[i].end < b.start) active.splice(i, 1);
     const taken = new Set(active.map((a) => a.col));
     let col = 0;
diff --git a/src/viewer/styles.css b/src/viewer/styles.css
index 5b4efb9..bf94602 100644
--- a/src/viewer/styles.css
+++ b/src/viewer/styles.css
@@ -26,6 +26,12 @@
   box-sizing: border-box;
 }
 
+/* The app is a query container so the same UI adapts to the narrow side panel
+   (and any narrow window) without a separate layout. */
+.app {
+  container-type: inline-size;
+}
+
 body {
   margin: 0;
   font: 13px/1.5 system-ui, sans-serif;
@@ -67,9 +73,12 @@ body {
 
 .controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: 0.5rem;
   margin-left: auto;
+  min-width: 0;
 }
 
 input,
@@ -84,13 +93,25 @@ button {
 }
 
 input.search {
-  min-width: 15rem;
+  width: 15rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 button {
   cursor: pointer;
 }
 
+.ghost {
+  background: transparent;
+  border-color: transparent;
+  font-size: 1rem;
+  line-height: 1;
+}
+.ghost:hover {
+  border-color: var(--line);
+}
+
 /* Segmented view switcher. */
 .seg {
   display: inline-flex;
@@ -216,6 +237,9 @@ main {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* Shrink/grow within the row and ellipsize instead of pushing siblings. */
+  flex: 1 1 auto;
+  min-width: 3ch;
   max-width: 52ch;
 }
 .label:hover {
@@ -283,3 +307,30 @@ main {
     transition: none !important;
   }
 }
+
+/* Compact layout for the side panel / narrow windows — placed last so these
+   declarations win over the base rules at equal specificity. Hides the chrome
+   that doesn't earn its space and lets the graph breathe. */
+@container (max-width: 540px) {
+  .brand-text,
+  .range,
+  .count,
+  .order-toggle,
+  .meta {
+    display: none;
+  }
+  .topbar {
+    gap: 0.4rem;
+    padding: 0.5rem 0.6rem;
+  }
+  main {
+    padding: 0.5rem 0.6rem 3rem;
+  }
+  input.search {
+    min-width: 0;
+    flex: 1 1 5rem;
+  }
+  .label {
+    max-width: 26ch;
+  }
+}
diff --git a/src/viewer/views/GraphCanvas.tsx b/src/viewer/views/GraphCanvas.tsx
index 6b3adbe..b3f467d 100644
--- a/src/viewer/views/GraphCanvas.tsx
+++ b/src/viewer/views/GraphCanvas.tsx
@@ -10,10 +10,27 @@ const PAD_X = 14;
 const DOT_R = 5;
 const LANES = 8; // palette size; see --lane-N in styles.css
 
+const CORNER = 6; // radius of the rounded right-angle bend
+
 const cx = (col: number) => PAD_X + col * COL_W + COL_W / 2;
 const cy = (row: number) => row * ROW_H + ROW_H / 2;
 const lane = (col: number) => `var(--lane-${col % LANES})`;
 
+/**
+ * Right-angle connector. Mainline (same column) is a straight vertical line.
+ * A fork bends once: horizontal along the PARENT's row, then straight up/down
+ * the CHILD's column — so every branch reads as a straight vertical lane with a
+ * single rounded junction, like a transit map.
+ */
+function edgePath(x1: number, y1: number, x2: number, y2: number): string {
+  if (x1 === x2) return `M${x1} ${y1} V${y2}`;
+  const hx = Math.sign(x2 - x1);
+  const vy = Math.sign(y2 - y1);
+  const r = Math.min(CORNER, Math.abs(x2 - x1), Math.abs(y2 - y1));
+  // parent → horizontal to just before the corner → rounded turn → vertical to child
+  return `M${x1} ${y1} H${x2 - hx * r} Q${x2} ${y1} ${x2} ${y1 + vy * r} V${y2}`;
+}
+
 /**
  * Renders a GraphLayout: an SVG gutter of lanes + station dots on the left, and
  * absolutely-positioned HTML rows (favicon/title/controls) on the right. Both
@@ -30,28 +47,18 @@ export function GraphCanvas({ layout, model, actions, tabLabel, soloed }: ViewPr
       style={{ height, "--row-h": `${ROW_H}px`, "--gutter": `${gutterW}px` } as CSSProperties}
     >
       <svg className="lanes" width={gutterW} height={height} aria-hidden="true">
-        {layout.edges.map((e) => {
-          const x1 = cx(e.fromCol);
-          const y1 = cy(e.fromRow);
-          const x2 = cx(e.toCol);
-          const y2 = cy(e.toRow);
-          const my = (y1 + y2) / 2;
-          const d =
-            x1 === x2
-              ? `M${x1} ${y1} L${x2} ${y2}`
-              : `M${x1} ${y1} C ${x1} ${my} ${x2} ${my} ${x2} ${y2}`;
-          return (
-            <path
-              key={`${e.fromId}-${e.toId}`}
-              d={d}
-              fill="none"
-              stroke={lane(e.toCol)}
-              strokeWidth={2}
-              strokeLinecap="round"
-              opacity={e.mainline ? 1 : 0.85}
-            />
-          );
-        })}
+        {layout.edges.map((e) => (
+          <path
+            key={`${e.fromId}-${e.toId}`}
+            d={edgePath(cx(e.fromCol), cy(e.fromRow), cx(e.toCol), cy(e.toRow))}
+            fill="none"
+            stroke={lane(e.toCol)}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            opacity={e.mainline ? 1 : 0.85}
+          />
+        ))}
         {layout.cells.map((c) => {
           const ann = model.annotations.get(c.id);
           const isFork = ann?.isFork ?? false;
diff --git a/tests/graph.test.ts b/tests/graph.test.ts
index 0c93d84..ac06ea3 100644
--- a/tests/graph.test.ts
+++ b/tests/graph.test.ts
@@ -77,6 +77,21 @@ check("forbidden columns: a late sibling branch doesn't reuse a busy lane", () =
   assert.equal(cols.size, 3);
 });
 
+check("sibling forks: more-recently-terminating branch takes the inner column", () => {
+  // p forks to three leaves; c is mainline (continues p's column). Of the two
+  // forked siblings, b terminates later than a, so b should be inner (lower col).
+  const f = buildForest([
+    v("p", 1, null),
+    v("a", 2, "p"),
+    v("b", 3, "p"),
+    v("c", 5, "p"),
+  ]).roots;
+  const col = new Map(chronologicalLayout(f).cells.map((c) => [c.id, c.col]));
+  assert.equal(col.get("p"), 0); // trunk stays leftmost
+  assert.equal(col.get("c"), 0); // mainline continues the trunk
+  assert.ok(col.get("b")! < col.get("a")!); // recent sibling is inner
+});
+
 console.log("\ntreeLayout:");
 check("subtrees are contiguous and col == depth", () => {
   const { cells } = treeLayout(fixture());
-- 
2.51.2