npm - red-pen-hub - Versions diffs - 0.7.0 - Mend

red-pen-hub 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/src/public/board.html ADDED Viewed

@@ -0,0 +1,1305 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<title>Red Pen Hub - Project Board</title>
+<style>
+  :root {
+    --rp-red: #D32F2F;
+    --bg: #f4f5f7;
+    --card: #ffffff;
+    --ink: #1d2327;
+    --muted: #646970;
+    --line: #dcdcde;
+    --hover: #f6f7f7;
+  }
+  body.dark {
+    --bg: #16181d;
+    --card: #1f232b;
+    --ink: #e6e7ea;
+    --muted: #9aa0aa;
+    --line: #353a44;
+    --hover: #262b34;
+  }
+  /* Always reserve the vertical scrollbar gutter so switching between a tall tab (scrollbar) and a
+     short one (no scrollbar) never changes the viewport width - otherwise the centered navbar +
+     content wrapper (and the gutter'd brand block) shift horizontally between tabs. */
+  html { scrollbar-gutter: stable; overflow-y: scroll; }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--ink);
+  }
+  header {
+    background: var(--card);
+    color: var(--ink);
+    border-bottom: 1px solid var(--line);
+  }
+  /* Inner bar shares .wrap's max-width + horizontal padding, so the header content's
+     left edge lines up with the main content area's left edge at every width. */
+  header .hbar {
+    position: relative;
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 14px 22px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px 14px;
+  }
+  header .logo { width: 42px; height: 42px; display: block; flex: none; }
+  header .brand { display: flex; flex-direction: column; gap: 1px; line-height: 1.12; }
+  header h1 { font-size: 24px; margin: 0; font-weight: 700; letter-spacing: .3px; color: var(--rp-red); }
+  header .tag { font-size: 13px; color: var(--muted); }
+  header .spacer { flex: 1; }
+  /* One row: [brand block] [tabs] ...spacer... [buttons]. The Open tab keeps its left edge on the
+     content column; the brand block is the ONE element pulled outside that column into the left
+     gutter (on screens wide enough to have a gutter). Below that it sits inline, left of the tabs. */
+  header .brandblock { display: flex; align-items: center; gap: 12px; flex: none; }
+  header .tabs { flex: 0 1 auto; }
+  @media (min-width: 1840px) {
+    header .brandblock { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 20px; white-space: nowrap; }
+  }
+  header button:not(.tab):not(.rp-toggle) {
+    background: transparent;
+    color: var(--ink);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 13px;
+  }
+  header button:not(.tab):not(.rp-toggle):hover { border-color: var(--rp-red); color: var(--rp-red); }
+  /* Help "?" button: round, links to the docs, with a hover tooltip. */
+  .help-btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; }
+  .help-btn:hover, .help-btn:focus-visible { border-color: var(--rp-red); color: var(--rp-red); }
+  .help-tip { position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; background: #2a2e35; color: #fff; font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .15s, transform .15s; z-index: 60; }
+  .help-btn:hover .help-tip, .help-btn:focus-visible .help-tip { opacity: 1; transform: translateY(0); }
+  /* Refresh: leftmost on the row + a red border for a touch more prominence. */
+  #refreshBtn { border-color: var(--rp-red); color: var(--rp-red); font-weight: 600; }
+  #refreshBtn:hover { background: var(--rp-red); color: #fff; border-color: var(--rp-red); }
+  /* Light/dark toggle: a sliding pill. The knob (red) slides left (light) / right (dark);
+     the sun/moon symbol lives INSIDE the knob and cross-fades between the two on switch.
+     Standardize this across surfaces once the look is locked. */
+  .rp-toggle { position: relative; width: 52px; height: 28px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--tgl-track, #dfe1e5); cursor: pointer; transition: background .3s; }
+  body.dark .rp-toggle { background: #2c3038; }
+  .rp-toggle-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--rp-red); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .32s cubic-bezier(.4,.1,.3,1.25); }
+  body.dark .rp-toggle-knob { transform: translateX(24px); }
+  .rp-toggle-knob svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 13px; height: 13px; fill: #fff; transition: opacity .28s; }
+  .rp-toggle .ic-sun { opacity: 1; }
+  .rp-toggle .ic-moon { opacity: 0; }
+  body.dark .rp-toggle .ic-sun { opacity: 0; }
+  body.dark .rp-toggle .ic-moon { opacity: 1; }
+  .wrap { padding: 18px 22px; max-width: 1600px; margin: 0 auto; }
+  .srctable tr.prow { cursor: pointer; }
+  .srctable tr.prow:hover td { background: var(--hover); }
+  .sources-view { margin: 16px 0 14px; }
+  .sources-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
+  .sources-head #sourcesSummary { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
+  .sources-head .spacer { flex: 1; }
+  .lic-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #D32F2F; border-left-width: 4px; border-radius: 8px; background: rgba(211,47,47,.06); font-size: 13px; color: var(--ink); flex-wrap: wrap; }
+  .lic-banner .spacer { flex: 1; }
+  .lic-banner button { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid #D32F2F; background: #D32F2F; color: #fff; border-radius: 6px; padding: 6px 12px; }
+  .lic-panel { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); max-width: 760px; }
+  .lic-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 8px; }
+  .lic-panel .ok { color: #2e7d46; font-weight: 600; margin: 0; }
+  .lic-panel .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .lic-panel input { flex: 1; min-width: 240px; font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
+  .lic-panel button { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 6px; padding: 6px 12px; }
+  .lic-panel .hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
+  .srctable th { cursor: default; }
+  .srctable td { vertical-align: middle; font-size: 13px; }
+  .srctable .lab { font-weight: 600; }
+  .srctable .sub { display: block; font-size: 11px; color: var(--muted); word-break: break-all; }
+  .srctable .ok { color: #2e7d32; }
+  .srctable .err { color: var(--rp-red); }
+  .srctable .repo-ok { color: #2e7d32; }
+  .srctable .repo-warn { color: #b8860b; }
+  .srctable .repo-none { color: var(--muted); }
+  .srctable .acts { white-space: nowrap; }
+  .sact { background: none; border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; margin-right: 4px; cursor: pointer; font-size: 12px; color: var(--ink); }
+  .sact:hover { border-color: var(--rp-red); color: var(--rp-red); }
+  .sact.danger:hover { background: var(--rp-red); color: #fff; border-color: var(--rp-red); }
+  #srcModal input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin-top: 6px; font: inherit; background: var(--card); color: var(--ink); }
+  .filters {
+    background: var(--card);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    padding: 12px;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 14px;
+  }
+  .filters select, .filters input {
+    background: var(--bg);
+    color: var(--ink);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 6px 9px;
+    font-size: 13px;
+  }
+  .filters input[type=search] { min-width: 220px; flex: 1; }
+  .filters .viewsep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
+  .viewbtn { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
+  .viewbtn:hover { color: var(--ink); border-color: var(--muted); }
+  table { width: 100%; border-collapse: collapse; background: var(--card); }
+  th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
+  th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
+  tr:hover td { background: var(--hover); }
+  td.body { max-width: 560px; min-width: 210px; }
+  td.col-proj { max-width: 280px; min-width: 200px; }
+  td.col-proj .project { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tablescroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
+  .col-where { width: 60px; max-width: 180px; }
+  .col-created, .col-resolved { width: 100px; white-space: nowrap; color: var(--muted); font-size: 12px; }
+  .pill.pri-high { color: var(--rp-red); border-color: var(--rp-red); font-weight: 700; }
+  th.sorted { color: var(--ink); }
+  th .arrow { color: var(--rp-red); font-size: 10px; display: inline-block; width: 1em; text-align: center; }
+  .badge { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: 11px; font-weight: 600; color: #fff; }
+  .pill { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: 11px; border: 1px solid var(--line); color: var(--muted); }
+  .status-open { color: var(--rp-red); font-weight: 600; }
+  .status-in_progress, .status-in-progress { color: #b26a00; font-weight: 600; }
+  .status-resolved { color: #1a7f37; }
+  /* Dark theme: the mid-tone green/orange status + source colours fail AA contrast on the dark card; lighten them. */
+  body.dark .status-in_progress, body.dark .status-in-progress { color: #f0a83a; }
+  body.dark .status-resolved { color: #4ac26b; }
+  body.dark .srctable .ok, body.dark .srctable .repo-ok { color: #4ac26b; }
+  a.jump { color: var(--rp-red); text-decoration: none; font-weight: 600; }
+  a.jump:hover { text-decoration: underline; }
+  .col-acts { width: 150px; white-space: nowrap; text-align: right; }
+  .rb { background: transparent; color: var(--rp-red); border: 1px solid var(--rp-red); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
+  .rb:hover { background: var(--rp-red); color: #fff; }
+  .rb.reopen, .rb.start { color: var(--muted); border-color: var(--line); }
+  .rb.reopen:hover, .rb.start:hover { background: var(--muted); color: var(--card); border-color: var(--muted); }
+  .rb:disabled { opacity: .5; cursor: default; }
+  #rphToast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 9999; }
+  #rphToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+  #rphToast.err { background: var(--rp-red); color: #fff; }
+  /* Undo popup: bottom-center confirmation with an Undo action + a 5s draining countdown ring. */
+  #rphUndo { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; gap: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); padding: 9px 14px 9px 16px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10000; }
+  #rphUndo.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
+  #rphUndo .ut-msg { font-size: 13px; white-space: nowrap; }
+  #rphUndo .ut-undo { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; padding: 3px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
+  #rphUndo .ut-undo:hover { background: var(--rp-red); color: #fff; border-color: var(--rp-red); }
+  #rphUndo .ut-ring { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
+  #rphUndo .ut-ring .ut-track { fill: none; stroke: rgba(127,127,127,.35); stroke-width: 2.5; }
+  #rphUndo .ut-ring .ut-prog { fill: none; stroke: var(--rp-red); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 56.55; stroke-dashoffset: 0; animation: ut-drain 5s linear forwards; }
+  @keyframes ut-drain { to { stroke-dashoffset: 56.55; } }
+  @media (prefers-reduced-motion: reduce) { #rphUndo .ut-ring .ut-prog { animation: none; } .rp-spin { animation: none; } }
+  #rphUndo.paused .ut-ring .ut-prog { animation-play-state: paused; }
+  /* When the undo popup is up, lift the transient toast above it so they never stack on the same spot. */
+  body.undo-open #rphToast { bottom: 84px; }
+  .where { color: var(--muted); font-size: 12px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .byline { color: var(--muted); font-size: 11px; margin-top: 3px; }
+  .empty { padding: 40px; text-align: center; color: var(--muted); }
+  .project { font-weight: 600; }
+  .surface { font-size: 11px; color: var(--muted); }
+  footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; }
+  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: flex-start; justify-content: center; z-index: 1000; overflow: auto; }
+  .overlay.show { display: flex; }
+  .modal { background: var(--card); color: var(--ink); border-radius: 10px; width: min(760px, 94vw); margin: 40px 0; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
+  .modal h2 { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 16px; display: flex; align-items: center; }
+  .modal h2 .x { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 22px; line-height: 1; background: none; border: none; }
+  .modal .body { padding: 18px 20px; }
+  .modal h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 8px; }
+  .scanbar { display: flex; gap: 8px; margin: 4px 0 14px; }
+  .scanbar input { flex: 1; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
+  .btn { background: var(--rp-red); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; }
+  .btn:disabled { opacity: .5; cursor: default; }
+  .btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
+  .cand { border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; margin-bottom: 8px; }
+  .cand.dim { opacity: .55; }
+  .cand .top { display: flex; align-items: center; gap: 10px; }
+  .cand .lab { font-weight: 600; }
+  .cand .sub { color: var(--muted); font-size: 12px; word-break: break-all; }
+  .cand .auth { display: flex; gap: 8px; margin-top: 8px; }
+  .cand .auth input { flex: 1; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
+  .srow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
+  .srow .rm { margin-left: auto; cursor: pointer; color: var(--rp-red); background: none; border: none; font-size: 13px; }
+  .modal .foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
+  .modal .foot .note { color: var(--muted); font-size: 12px; }
+  .hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
+  @keyframes rp-spin { to { transform: rotate(360deg); } }
+  .rp-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rp-spin .7s linear infinite; vertical-align: -2px; }
+  button:disabled { opacity: .6; cursor: default; }
+  .tabs { display: flex; gap: 10px; flex-wrap: wrap; }
+  header .tabs .tab { background: var(--bg); }
+  .tab { box-sizing: border-box; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; min-width: 90px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; font: inherit; }
+  .tab .n { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
+  .tab .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
+  .tab:hover { border-color: var(--rp-red); }
+  .tab.active { border-color: var(--rp-red); }
+  .tab.active .n, .tab.attn .n { color: var(--rp-red); }
+</style>
+<script>window.__HUB_TOKEN__ = '%%HUB_TOKEN%%';</script>
+</head>
+<body>
+<header>
+ <div class="hbar">
+  <div class="brandblock">
+    <img class="logo" src="favicon.svg" alt="">
+    <div class="brand">
+      <h1>Red Pen Hub</h1>
+      <span class="tag">combined project board</span>
+    </div>
+  </div>
+  <div class="tabs" id="tabs" role="group" aria-label="Filter notes by status">
+    <button class="tab active" type="button" data-tab="open"><span class="n" id="tc-open">0</span><span class="l">Open</span></button>
+    <button class="tab" type="button" data-tab="progress"><span class="n" id="tc-progress">0</span><span class="l">In progress</span></button>
+    <button class="tab" type="button" data-tab="resolved"><span class="n" id="tc-resolved">0</span><span class="l">Resolved</span></button>
+    <button class="tab" type="button" data-tab="all"><span class="n" id="tc-all">0</span><span class="l">All</span></button>
+    <button class="tab" type="button" data-tab="projects"><span class="n" id="tc-projects">0</span><span class="l">Projects</span></button>
+    <button class="tab" type="button" data-tab="sources"><span class="n" id="tc-sources">0</span><span class="l">Sources</span></button>
+  </div>
+  <span class="spacer"></span>
+  <button id="refreshBtn" type="button">Refresh</button>
+  <button id="exportMdBtn" type="button">Export MD</button>
+  <button id="exportCsvBtn" type="button">Export CSV</button>
+  <button id="darkBtn" class="rp-toggle" type="button" role="switch" aria-checked="false" aria-label="Switch dark / light mode" title="Switch dark / light mode">
+    <span class="rp-toggle-knob">
+      <svg class="ic-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="5"/><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 1.5v3M12 19.5v3M4.5 4.5l2 2M17.5 17.5l2 2M1.5 12h3M19.5 12h3M4.5 19.5l2-2M17.5 6.5l2-2"/></g></svg>
+      <svg class="ic-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+    </span>
+  </button>
+  <!-- Docs "?" button. NOTE: this is the LOCAL docs path for dogfooding - swap it for the
+       PUBLIC docs URL before the Hub ships to customers (their machine has no such path). -->
+  <a id="helpBtn" class="help-btn" href="https://docs.redpen.tools/hub.html" target="_blank" rel="noopener" aria-label="Documentation">?<span class="help-tip">View the documentation</span></a>
+ </div>
+</header>
+<div class="wrap">
+  <div id="licenseBanner" class="lic-banner" style="display:none"></div>
+  <div class="filters">
+    <input type="search" id="q" placeholder="Search notes..." aria-label="Search notes">
+    <select id="fProject" aria-label="Filter by project"><option value="">All projects</option></select>
+    <select id="fSurface" aria-label="Filter by surface"><option value="">All surfaces</option></select>
+    <select id="fType" aria-label="Filter by type"><option value="">All types</option></select>
+    <select id="fPriority" aria-label="Filter by priority"><option value="">All priorities</option></select>
+    <span class="viewsep" aria-hidden="true"></span>
+    <select id="viewSel" aria-label="Apply a saved view"><option value="">Saved views...</option></select>
+    <button id="viewSave" class="viewbtn" type="button" title="Save the current filters as a named view">Save view</button>
+    <button id="viewDel" class="viewbtn" type="button" title="Delete the selected view" style="display:none">Delete</button>
+  </div>
+  <div class="tablescroll">
+  <table>
+    <thead>
+      <tr>
+        <th class="col-proj" data-sort="project">Project</th>
+        <th data-sort="surface">Surface</th>
+        <th data-sort="type">Type</th>
+        <th data-sort="priority">Priority</th>
+        <th data-sort="status">Status</th>
+        <th data-sort="body">Note</th>
+        <th class="col-where" data-sort="page">Location</th>
+        <th class="col-created" data-sort="createdAt">Created</th>
+        <th class="col-resolved" data-sort="resolvedAt">Resolved</th>
+        <th class="col-acts"></th>
+      </tr>
+    </thead>
+    <tbody id="rows"></tbody>
+  </table>
+  </div>
+  <div class="empty" id="empty" style="display:none">No Red Pen notes found across your sources yet.</div>
+  <div id="sourcesView" class="sources-view" style="display:none">
+    <div class="sources-head">
+      <span id="sourcesSummary">Sources</span>
+      <span class="spacer"></span>
+      <button class="btn" id="addBtn" type="button">+ Add Local Projects</button>
+      <button class="btn" id="connectBtn" type="button">+ Connect a Site</button>
+    </div>
+    <p class="hint" id="sourcesHint" style="margin:0 0 12px;max-width:760px"><strong>Add Local Projects</strong> reads notes from Red Pen projects on this computer. <strong>Connect a Site</strong> lets another site - remote or live - push its notes here.</p>
+    <div id="licensePanel" class="lic-panel"></div>
+    <table class="srctable">
+      <thead><tr>
+        <th>Project</th><th>Surface</th><th>Type</th><th>Status</th><th>Notes</th><th>Repo</th><th>Actions</th>
+      </tr></thead>
+      <tbody id="sourcesRows"></tbody>
+    </table>
+  </div>
+  <div id="projectsView" class="sources-view" style="display:none">
+    <div class="sources-head"><span id="projectsSummary">Projects</span></div>
+    <table class="srctable">
+      <thead><tr>
+        <th>Project</th><th>Surface</th><th>Open</th><th>In progress</th><th>Resolved</th><th>Total</th>
+      </tr></thead>
+      <tbody id="projectsRows"></tbody>
+    </table>
+  </div>
+  <footer id="foot"></footer>
+</div>
+<div class="overlay" id="mdOverlay">
+  <div class="modal" role="dialog" aria-modal="true">
+    <h2>Export Markdown <button class="x" id="mdClose" type="button">&times;</button></h2>
+    <div class="body">
+      <p class="hint">A markdown digest of the current view (this tab + filters), grouped by project as Obsidian task checkboxes. Drop it into a daily note, a standup, or a changelog.</p>
+      <textarea id="mdText" readonly style="width:100%;box-sizing:border-box;min-height:300px;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--card);color:var(--ink);resize:vertical"></textarea>
+    </div>
+    <div class="foot">
+      <button class="btn" id="mdCopy" type="button">Copy</button>
+      <button class="btn" id="mdDownload" type="button">Download .md</button>
+      <button class="btn ghost" id="mdCancel" type="button">Close</button>
+      <span class="note" id="mdNote"></span>
+    </div>
+  </div>
+</div>
+<div class="overlay" id="srcModal">
+  <div class="modal" role="dialog" aria-modal="true">
+    <h2 id="srcModalTitle">Edit source <button class="x" id="srcModalClose" type="button">&times;</button></h2>
+    <div class="body" id="srcModalBody"></div>
+    <div class="foot">
+      <button class="btn" id="srcModalSave" type="button">Save</button>
+      <button class="btn ghost" id="srcModalCancel" type="button">Cancel</button>
+      <span class="note" id="srcModalNote"></span>
+    </div>
+  </div>
+</div>
+<div class="overlay" id="overlay">
+  <div class="modal" role="dialog" aria-modal="true">
+    <h2>Add Local Projects <button class="x" id="modalClose" type="button">&times;</button></h2>
+    <div class="body">
+      <h3>Scan a folder on this computer</h3>
+      <p class="hint">Point the Hub at a dev folder on this machine - it links Red Pen projects and reads their notes from disk (file-based projects + local WordPress). For a remote or live site, use "Connect a Site" instead.</p>
+      <div class="scanbar">
+        <input type="text" id="scanRoot" placeholder="C:\path\to\your\dev\directory">
+        <button class="btn" id="scanBtn" type="button">Scan</button>
+      </div>
+      <div id="scanResults"></div>
+      <h3 style="margin-top:18px">Current sources</h3>
+      <div id="currentSources"></div>
+    </div>
+    <div class="foot">
+      <button class="btn" id="addSelectedBtn" type="button" disabled>Add selected</button>
+      <button class="btn ghost" id="modalCancel" type="button">Close</button>
+      <span class="note" id="modalNote"></span>
+    </div>
+  </div>
+</div>
+<div class="overlay" id="connectOverlay">
+  <div class="modal" role="dialog" aria-modal="true">
+    <h2>Connect a Site <button class="x" id="connectClose" type="button">&times;</button></h2>
+    <div class="body">
+      <p class="hint">Link a remote or live site by having it push its notes here. Paste the two values below into that site's Red Pen "Connect to Hub" settings (WordPress: Tools - Red Pen - Display settings); once it pushes, it appears in Sources.</p>
+      <h3 style="margin-top:14px">Hub URL</h3>
+      <div class="scanbar"><input type="text" id="connUrl" readonly><button class="btn ghost" data-copy="connUrl" type="button">Copy</button></div>
+      <h3>Connect token</h3>
+      <div class="scanbar"><input type="text" id="connToken" readonly><button class="btn ghost" data-copy="connToken" type="button">Copy</button></div>
+      <p class="hint">Keep this token private - anyone who has it (and can reach your Hub) could push notes to it.</p>
+    </div>
+    <div class="foot">
+      <button class="btn ghost" id="connectCancel" type="button">Close</button>
+      <span class="note" id="connectNote"></span>
+    </div>
+  </div>
+</div>
+<script>
+(function () {
+  function readJson(k, d) { try { var v = JSON.parse(localStorage.getItem(k)); return v == null ? d : v; } catch (e) { return d; } }
+  function writeJson(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) {} }
+  var ALL = [];
+  var LAST = readJson('rphub.last', null);   // persisted view state (tab/sort/filters), restored on first load
+  var VIEWS = readJson('rphub.views', {});   // named saved views
+  var SORT = { key: (LAST && LAST.sortKey) || 'priority', dir: (LAST && LAST.sortDir) || -1 };   // default: priority, high at top
+  var TAB = (LAST && LAST.tab) || 'open';   // primary nav: Open is the default view, not All (also 'sources' = the sources panel)
+  var SOURCES = [];   // current source list, for the Sources tab + its count
+  // Attach the hub token to every same-origin /api request so it passes the server's
+  // token gate. Injected into the page at serve time; keeps the board working while
+  // the API stays closed to anything that doesn't have the token.
+  var HUB_TOKEN = window.__HUB_TOKEN__ || '';
+  (function (orig) {
+    window.fetch = function (input, init) {
+      var url = typeof input === 'string' ? input : (input && input.url) || '';
+      if (url.slice(0, 5) === '/api/') {
+        init = init || {};
+        var h = Object.assign({}, init.headers || {});
+        h['x-hub-token'] = HUB_TOKEN;
+        init.headers = h;
+      }
+      return orig.call(this, input, init);
+    };
+  })(window.fetch);
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
+    });
+  }
+  function fmtDate(v) {
+    if (!v) return '';
+    var d = typeof v === 'number' ? new Date(v) : new Date(String(v));
+    if (isNaN(d.getTime())) return '';
+    function p(x) { return (x < 10 ? '0' : '') + x; }
+    return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes());
+  }
+  function uniq(arr) {
+    var s = {}; arr.forEach(function (v) { if (v) s[v] = 1; });
+    return Object.keys(s).sort();
+  }
+  // ---- View state: persist tab/sort/filters across reloads + named saved views ----
+  var FILTER_IDS = ['q', 'fProject', 'fSurface', 'fType', 'fPriority'];
+  function fval(id) { var el = document.getElementById(id); return el ? el.value : ''; }
+  function fset(id, v) { var el = document.getElementById(id); if (el && v != null) el.value = v; }
+  function currentState() {
+    var s = { tab: TAB, sortKey: SORT.key, sortDir: SORT.dir };
+    FILTER_IDS.forEach(function (id) { s[id] = fval(id); });
+    return s;
+  }
+  function persistLast() { writeJson('rphub.last', currentState()); }
+  function applyState(s) {
+    if (!s) return;
+    if (s.tab) TAB = s.tab;
+    if (s.sortKey) SORT.key = s.sortKey;
+    if (s.sortDir) SORT.dir = s.sortDir;
+    FILTER_IDS.forEach(function (id) { fset(id, s[id]); });
+  }
+  function rebuildViewSel(sel) {
+    var el = document.getElementById('viewSel');
+    var names = Object.keys(VIEWS).sort();
+    el.innerHTML = '<option value="">Saved views...</option>' +
+      names.map(function (n) { return '<option value="' + esc(n) + '">' + esc(n) + '</option>'; }).join('');
+    el.value = names.indexOf(sel) === -1 ? '' : sel;
+    document.getElementById('viewDel').style.display = el.value ? '' : 'none';
+  }
+  // ---- CSV export (spreadsheet / CI sibling of the Markdown export) ----
+  function csvCell(s) { s = String(s == null ? '' : s); return /[",\r\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s; }
+  function buildCsv() {
+    var head = ['Project', 'Surface', 'Type', 'Priority', 'Severity', 'Status', 'Note', 'Author', 'Assignee', 'Replies', 'Location', 'Anchor', 'Created', 'Resolved', 'Resolved By'];
+    var lines = [head.join(',')];
+    filtered().forEach(function (n) {
+      lines.push([n.project, n.surface, n.type, n.priority, n.severity, n.status, n.body, n.author, n.assignee, n.replyCount || 0, n.url, n.anchor, fmtDate(n.createdAt), fmtDate(n.resolvedAt), n.resolvedBy].map(csvCell).join(','));
+    });
+    return lines.join('\r\n') + '\r\n';
+  }
+  function downloadCsv() {
+    var date = new Date().toISOString().slice(0, 10);
+    var blob = new Blob(['' + buildCsv()], { type: 'text/csv' });   // BOM so Excel reads UTF-8
+    var a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'red-pen-' + TAB + '-' + date + '.csv';
+    document.body.appendChild(a); a.click();
+    setTimeout(function () { URL.revokeObjectURL(a.href); a.remove(); }, 0);
+  }
+  function fillSelect(id, vals) {
+    var sel = document.getElementById(id);
+    var keep = sel.value;
+    var first = sel.options[0].outerHTML;
+    sel.innerHTML = first + vals.map(function (v) {
+      return '<option value="' + esc(v) + '">' + esc(v) + '</option>';
+    }).join('');
+    sel.value = keep;
+  }
+  function typeColor(n) {
+    // n.typeColor comes from other projects/sites and is injected into a style
+    // attribute unescaped, so only allow a plain color token (hex or CSS word).
+    var raw = n.typeColor;
+    if (raw && (/^#[0-9a-fA-F]{3,8}$/.test(raw) || /^[a-zA-Z]+$/.test(raw))) return raw;
+    var map = { bug: '#D32F2F', note: '#5a6acf', idea: '#1a7f37', question: '#b26a00', todo: '#6d28d9' };
+    return map[(n.type || '').toLowerCase()] || '#5a6acf';
+  }
+  // Only allow http(s) or root-relative links in href - blocks javascript:/data: URLs.
+  function safeUrl(u) {
+    u = String(u == null ? '' : u);
+    return /^(https?:|\/)/i.test(u) ? u : '#';
+  }
+  function surfaceColor(s) {
+    return s === 'wordpress' ? '#21759b' : s === 'express' ? '#1a7f37' : '#6d28d9';
+  }
+  function srcKind(s) {
+    if (s.connected) return 'push';
+    if (typeof s.source === 'string' && /^https?:/i.test(s.source)) return 'wp-rest';
+    return 'file';
+  }
+  function relTime(iso) {
+    if (!iso) return '';
+    var t = +new Date(iso); if (!t) return '';
+    var secs = Math.max(0, Math.round((Date.now() - t) / 1000));
+    if (secs < 60) return 'now';
+    var m = Math.round(secs / 60); if (m < 60) return m + 'm ago';
+    var h = Math.round(m / 60); if (h < 24) return h + 'h ago';
+    return Math.round(h / 24) + 'd ago';
+  }
+  function renderSources(sources) {
+    var ok = sources.filter(function (s) { return !s.error; }).length;
+    document.getElementById('sourcesSummary').textContent =
+      sources.length + ' source' + (sources.length === 1 ? '' : 's') + ', ' + (sources.length - ok) + ' need attention';
+    document.getElementById('sourcesRows').innerHTML = sources.map(function (s) {
+      var kind = srcKind(s);
+      var status = s.error
+        ? '<span class="err">' + esc(s.error) + '</span>'
+        : (kind === 'push' ? '<span class="ok">synced ' + esc(relTime(s.lastSync) || 'now') + '</span>' : '<span class="ok">ok</span>');
+      var editBtn = kind === 'wp-rest' ? '<button class="sact" data-act="edit" type="button" title="Edit URL + credentials">edit</button>' : '';
+      var rmTitle = kind === 'push' ? 'Forget this connection' : 'Remove this source';
+      return '<tr data-key="' + esc(s.key) + '" data-project="' + esc(s.label) + '" data-kind="' + kind + '">' +
+        '<td><span class="lab">' + esc(s.label) + '</span><span class="sub" title="' + esc(s.source) + '">' + esc(s.source) + '</span></td>' +
+        '<td><span class="badge" style="background:' + surfaceColor(s.surface) + '">' + esc(s.surface) + '</span></td>' +
+        '<td>' + (kind === 'push' ? 'push' : 'pull') + '</td>' +
+        '<td>' + status + '</td>' +
+        '<td>' + (s.error ? '-' : s.count) + '</td>' +
+        '<td class="repo"><span class="repo-none">...</span></td>' +
+        '<td class="acts">' +
+          '<button class="sact" data-act="path" type="button" title="Set this project\'s local git repo (shows clean / dirty status)">repo</button>' +
+          '<button class="sact" data-act="recheck" type="button" title="Re-check (reloads the board)">re-check</button>' +
+          editBtn +
+          '<button class="sact danger" data-act="remove" type="button" title="' + rmTitle + '">remove</button>' +
+        '</td></tr>';
+    }).join('');
+  }
+  function loadRepoStatus() {
+    var rows = document.querySelectorAll('#sourcesRows tr[data-project]');
+    if (!rows.length) return;
+    var projects = [];
+    rows.forEach(function (r) { projects.push(r.getAttribute('data-project')); });
+    fetch('/api/git-status', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ projects: projects }) })
+      .then(function (r) { return r.json(); }).then(function (d) {
+        var st = d.status || {};
+        rows.forEach(function (r) {
+          var s = st[r.getAttribute('data-project')] || {};
+          var cell = r.querySelector('.repo'); if (!cell) return;
+          if (s.isRepo) cell.innerHTML = '<span class="' + (s.clean ? 'repo-ok' : 'repo-warn') + '">git ' + esc(s.branch || '') + (s.clean ? '' : ' (' + s.dirty + ' dirty)') + '</span>';
+          else if (s.hasPath && s.exists === false) cell.innerHTML = '<span class="repo-warn">path not found</span>';
+          else if (s.hasPath) cell.innerHTML = '<span class="repo-warn">not a repo</span>';
+          else cell.innerHTML = '<span class="repo-none">set path</span>';
+        });
+      }).catch(function () { /* leave placeholders */ });
+  }
+  // The small per-source modal (repo path / wp-rest credentials).
+  var srcSaveFn = null;
+  function closeSrcModal() { document.getElementById('srcModal').classList.remove('show'); }
+  function openRepoModal(project) {
+    document.getElementById('srcModalBody').innerHTML =
+      '<p class="hint">Local git repo for <b>' + esc(project) + '</b> - the Sources tab shows its clean / dirty status. Point it at the project source repo, not a deployed copy.</p>' +
+      '<input id="srcModalInput" type="text" placeholder="C:\\path\\to\\repo">';
+    document.getElementById('srcModalNote').textContent = '';
+    document.getElementById('srcModal').classList.add('show');
+    fetch('/api/repo-paths').then(function (r) { return r.json(); }).then(function (d) {
+      var inp = document.getElementById('srcModalInput'); if (inp) inp.value = (d.paths || {})[project] || '';
+    });
+    srcSaveFn = function () {
+      var path = (document.getElementById('srcModalInput').value || '').trim();
+      fetch('/api/repo-paths', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project: project, path: path }) })
+        .then(function () { closeSrcModal(); if (TAB === 'sources') loadRepoStatus(); });
+    };
+  }
+  function openCredModal(tr, project) {
+    var key = tr.getAttribute('data-key');
+    var sub = tr.querySelector('.sub');
+    document.getElementById('srcModalBody').innerHTML =
+      '<p class="hint">WordPress REST credentials for <b>' + esc(project) + '</b>. Use an Application Password, not the login password.</p>' +
+      '<input id="srcUrl" type="text" placeholder="Site URL" value="' + esc(sub ? sub.textContent : '') + '">' +
+      '<input id="srcUser" type="text" placeholder="WP username">' +
+      '<input id="srcPw" type="text" placeholder="Application password">';
+    document.getElementById('srcModalNote').textContent = '';
+    document.getElementById('srcModal').classList.add('show');
+    srcSaveFn = function () {
+      var url = document.getElementById('srcUrl').value.trim();
+      var user = document.getElementById('srcUser').value.trim();
+      var pw = document.getElementById('srcPw').value.trim();
+      fetch('/api/sources/remove', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: key }) })
+        .then(function () { return fetch('/api/sources', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ add: [{ type: 'wp-rest', label: project, url: url, user: user, appPassword: pw }] }) }); })
+        .then(function () { closeSrcModal(); load(); });
+    };
+  }
+  // Status buckets the tabs select. Anything not in-progress/resolved counts as Open.
+  function statusBucket(n) {
+    if (/progress/.test(n.status)) return 'progress';
+    if (n.status === 'resolved') return 'resolved';
+    return 'open';
+  }
+  // Every filter EXCEPT status (the tabs own status). Tab counts use this set so they
+  // reflect the active project/surface/type/priority/search.
+  function passNonStatus(n) {
+    var q = document.getElementById('q').value.toLowerCase().trim();
+    var fp = document.getElementById('fProject').value;
+    var fs = document.getElementById('fSurface').value;
+    var ft = document.getElementById('fType').value;
+    var fpr = document.getElementById('fPriority').value;
+    if (fp && n.project !== fp) return false;
+    if (fs && n.surface !== fs) return false;
+    if (ft && n.type !== ft) return false;
+    if (fpr && n.priority !== fpr) return false;
+    if (q) {
+      var hay = (n.body + ' ' + n.project + ' ' + n.page + ' ' + n.type).toLowerCase();
+      if (hay.indexOf(q) === -1) return false;
+    }
+    return true;
+  }
+  function filtered() {
+    var out = ALL.filter(function (n) {
+      return passNonStatus(n) && (TAB === 'all' || statusBucket(n) === TAB);
+    });
+    out.sort(function (a, b) {
+      var x, y;
+      if (SORT.key === 'priority') { x = priRank(a.priority); y = priRank(b.priority); }
+      else if (SORT.key === 'createdAt') { x = +new Date(a.createdAt) || 0; y = +new Date(b.createdAt) || 0; }
+      else if (SORT.key === 'resolvedAt') { x = +new Date(a.resolvedAt) || 0; y = +new Date(b.resolvedAt) || 0; }
+      else { x = a[SORT.key]; y = b[SORT.key]; }
+      if (x < y) return -1 * SORT.dir;
+      if (x > y) return 1 * SORT.dir;
+      return (+new Date(b.createdAt) || 0) - (+new Date(a.createdAt) || 0);   // tie-break: newest first
+    });
+    return out;
+  }
+  // Sources is its own view (the old foldable, promoted to a tab): when active it
+  // replaces the filters + notes table with the source list.
+  function applyView() {
+    var view = TAB === 'sources' ? 'sources' : (TAB === 'projects' ? 'projects' : 'notes');
+    document.getElementById('sourcesView').style.display = view === 'sources' ? 'block' : 'none';
+    document.getElementById('projectsView').style.display = view === 'projects' ? 'block' : 'none';
+    document.querySelector('.filters').style.display = view === 'notes' ? '' : 'none';
+    document.querySelector('table').style.display = view === 'notes' ? '' : 'none';
+    if (view !== 'notes') document.getElementById('empty').style.display = 'none';
+    if (view === 'sources') loadRepoStatus();
+  }
+  function render() {
+    applyView();
+    if (TAB === 'sources' || TAB === 'projects') return;   // these views have no note rows to build
+    var rows = filtered();
+    var tb = document.getElementById('rows');
+    document.getElementById('empty').style.display = rows.length ? 'none' : 'block';
+    tb.innerHTML = rows.map(function (n) {
+      var where = n.url
+        ? '<a class="jump" href="' + esc(safeUrl(n.url)) + '" target="_blank" rel="noopener">open</a>'
+        : '';
+      var anchor = n.anchor ? '<div class="where" title="' + esc(n.anchor) + '">' + esc(n.anchor) + '</div>' : '';
+      var st = String(n.status || 'open').replace(/-/g, '_');
+      var key = noteKey(n);
+      // Compact identity/thread byline - only the parts a surface actually supplied.
+      var bits = [];
+      if (n.author) bits.push('by ' + esc(n.author));
+      if (n.assignee) bits.push('&rarr; ' + esc(n.assignee));
+      if (n.severity) bits.push('severity: ' + esc(n.severity));
+      if (n.dupeOf) bits.push('dup of ' + esc(n.dupeOf));
+      if (n.relatedTo) bits.push('rel: ' + esc(n.relatedTo));
+      if (n.replyCount) bits.push(n.replyCount + ' repl' + (n.replyCount === 1 ? 'y' : 'ies'));
+      var byline = bits.length ? '<div class="byline">' + bits.join(' &middot; ') + '</div>' : '';
+      var resolvedCell = esc(fmtDate(n.resolvedAt)) + (n.resolvedBy ? '<div class="byline">' + esc(n.resolvedBy) + '</div>' : '');
+      return '<tr data-key="' + esc(key) + '">'
+        + '<td class="col-proj"><span class="project">' + esc(n.project) + '</span></td>'
+        + '<td><span class="surface">' + esc(n.surface) + '</span></td>'
+        + '<td><span class="badge" style="background:' + typeColor(n) + '">' + esc(n.type) + '</span></td>'
+        + '<td><span class="pill pri-' + esc(n.priority) + '">' + esc(n.priority) + '</span></td>'
+        + '<td><span class="status-' + esc(st) + '">' + esc(n.status) + '</span></td>'
+        + '<td class="body">' + esc(n.body) + byline + '</td>'
+        + '<td class="col-where">' + where + anchor + '</td>'
+        + '<td class="col-created">' + esc(fmtDate(n.createdAt)) + '</td>'
+        + '<td class="col-resolved">' + resolvedCell + '</td>'
+        + '<td class="col-acts">' + statusBtn(n) + '</td>'
+        + '</tr>';
+    }).join('');
+    setSortArrows();
+  }
+  function priRank(p) { var r = { high: 3, normal: 2, medium: 2, low: 1 }; return r[String(p).toLowerCase()] || 0; }
+  function setSortArrows() {
+    var ths = document.querySelectorAll('th[data-sort]');
+    for (var i = 0; i < ths.length; i++) {
+      var th = ths[i], a = th.querySelector('.arrow');
+      if (!a) { a = document.createElement('span'); a.className = 'arrow'; th.appendChild(a); }
+      var active = th.getAttribute('data-sort') === SORT.key;
+      a.textContent = active ? (SORT.dir === 1 ? '▲' : '▼') : '';
+      th.classList.toggle('sorted', active);
+      th.setAttribute('aria-sort', active ? (SORT.dir === 1 ? 'ascending' : 'descending') : 'none');
+    }
+  }
+  // The Projects view: one row per project with its note breakdown; click to drill in.
+  function renderProjects() {
+    var byProj = {};
+    function ensure(name, surface) {
+      var p = byProj[name] || (byProj[name] = { project: name, surfaces: {}, open: 0, progress: 0, resolved: 0, total: 0 });
+      if (surface) p.surfaces[surface] = 1;
+      return p;
+    }
+    // Seed from every connected source so projects with 0 notes still appear.
+    SOURCES.forEach(function (s) { ensure(s.label, s.surface); });
+    ALL.forEach(function (n) {
+      var p = ensure(n.project, n.surface);
+      p.total++;
+      var b = statusBucket(n);
+      if (b === 'resolved') p.resolved++; else if (b === 'progress') p.progress++; else p.open++;
+    });
+    var rows = Object.keys(byProj).map(function (k) { return byProj[k]; })
+      .sort(function (a, b) { return (b.open - a.open) || (b.total - a.total); });
+    document.getElementById('projectsSummary').textContent = rows.length + ' project' + (rows.length === 1 ? '' : 's') + ' - click one to see its notes';
+    document.getElementById('projectsRows').innerHTML = rows.map(function (p) {
+      return '<tr class="prow" data-project="' + esc(p.project) + '">' +
+        '<td><span class="lab">' + esc(p.project) + '</span></td>' +
+        '<td>' + esc(Object.keys(p.surfaces).join(', ')) + '</td>' +
+        '<td>' + p.open + '</td>' +
+        '<td>' + p.progress + '</td>' +
+        '<td>' + p.resolved + '</td>' +
+        '<td>' + p.total + '</td></tr>';
+    }).join('');
+  }
+  function renderTabs() {
+    var base = ALL.filter(passNonStatus);
+    var counts = { open: 0, progress: 0, resolved: 0, all: base.length };
+    base.forEach(function (n) { counts[statusBucket(n)]++; });
+    ['open', 'progress', 'resolved', 'all'].forEach(function (k) {
+      var c = document.getElementById('tc-' + k);
+      if (c) c.textContent = counts[k];
+    });
+    var prj = document.getElementById('tc-projects');
+    if (prj) prj.textContent = uniq(SOURCES.map(function (s) { return s.label; }).concat(ALL.map(function (n) { return n.project; }))).length;
+    var src = document.getElementById('tc-sources');
+    if (src) src.textContent = SOURCES.length;
+    var errs = SOURCES.filter(function (s) { return s.error; }).length;
+    var srcTab = document.querySelector('#tabs .tab[data-tab="sources"]');
+    if (srcTab) srcTab.classList.toggle('attn', errs > 0);
+    var tabs = document.querySelectorAll('#tabs .tab');
+    for (var i = 0; i < tabs.length; i++) {
+      var on = tabs[i].getAttribute('data-tab') === TAB;
+      tabs[i].classList.toggle('active', on);
+      tabs[i].setAttribute('aria-pressed', on ? 'true' : 'false');
+    }
+  }
+  // ---- Write-back (resolve / reopen from the board) ----
+  function statusBtn(n) {
+    var b = statusBucket(n);
+    if (b === 'resolved') return '<button class="rb reopen" data-to="open" type="button">Reopen</button>';
+    // Open notes get a Start control (the In-progress bucket/tab existed but nothing
+    // could populate it from the board); in-progress notes just get Resolve.
+    var start = (b === 'open') ? '<button class="rb start" data-to="progress" type="button">Start</button> ' : '';
+    return start + '<button class="rb" data-to="resolved" type="button">Resolve</button>';
+  }
+  // Low-level: POST a status change for one note; resolves to { ok, d }.
+  function postNoteStatus(note, to) {
+    return fetch('/api/note-status', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key: note.sourceKey, id: note.id, status: to })
+    }).then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); });
+  }
+  // POST the new status to the note's source. The Hub routes it to the right
+  // adapter (file store / connected store / WP REST) by the note's sourceKey.
+  // On a Resolve, show an undo popup (5s) so a mis-click is one click to reverse.
+  function setNoteStatus(note, to, btn) {
+    if (!note || !note.sourceKey) { toast('No source recorded for this note', true); return; }
+    if (btn) btn.disabled = true;
+    postNoteStatus(note, to)
+      .then(function (res) {
+        if (!res.ok || !res.d.ok) { toast((res.d && res.d.error) || 'Could not update note', true); if (btn) btn.disabled = false; return; }
+        // Connected (push) sources now hold Hub-side status changes across the site's
+        // future pushes (merge-on-ingest), so a resolve here is durable on the board -
+        // no revert warning needed. It still isn't written back to the origin site.
+        if (to === 'resolved') {
+          undoToast('Resolved', note, function () {
+            postNoteStatus(note, 'open')
+              .then(function (r2) { if (!r2.ok || !r2.d.ok) { toast((r2.d && r2.d.error) || 'Could not reopen note', true); return; } load(); })
+              .catch(function () { toast('Network error - note not reopened', true); });
+          });
+        }
+        load();   // re-pull so counts + tabs reflect the change
+      })
+      .catch(function () { toast('Network error - note not updated', true); if (btn) btn.disabled = false; });
+  }
+  // Minimal toast - surfaces write-back failures (and could be reused elsewhere).
+  function toast(msg, isErr) {
+    var t = document.getElementById('rphToast');
+    if (!t) { t = document.createElement('div'); t.id = 'rphToast'; document.body.appendChild(t); }
+    t.setAttribute('role', isErr ? 'alert' : 'status');   // errors announce assertively to screen readers
+    t.textContent = msg;
+    t.className = isErr ? 'err show' : 'show';
+    clearTimeout(toast._t);
+    toast._t = setTimeout(function () { t.className = t.className.replace('show', '').trim(); }, 3200);
+  }
+  // Bottom-center confirmation with an Undo action + a 5s draining countdown ring, then fades.
+  var undoTimer = null;
+  function undoToast(label, note, onUndo) {
+    var u = document.getElementById('rphUndo');
+    if (!u) { u = document.createElement('div'); u.id = 'rphUndo'; u.setAttribute('role', 'status'); document.body.appendChild(u); }
+    // Rebuild content each time so the ring animation restarts from full.
+    u.innerHTML =
+      '<span class="ut-msg"></span>' +
+      '<button class="ut-undo" type="button">Undo</button>' +
+      '<svg class="ut-ring" viewBox="0 0 24 24" aria-hidden="true">' +
+        '<circle class="ut-track" cx="12" cy="12" r="9"></circle>' +
+        '<circle class="ut-prog" cx="12" cy="12" r="9"></circle>' +
+      '</svg>';
+    u.querySelector('.ut-msg').textContent = label + (note && note.project ? ' - ' + note.project : '');
+    var undoBtn = u.querySelector('.ut-undo');
+    var hide = function () { clearTimeout(undoTimer); undoTimer = null; u.classList.remove('show', 'paused'); document.body.classList.remove('undo-open'); };
+    var arm = function () { clearTimeout(undoTimer); undoTimer = setTimeout(function () { hide(); }, 5000); };
+    undoBtn.onclick = function () { hide(); if (onUndo) onUndo(); };
+    // Keyboard reach: Esc dismisses; while the popup holds focus the countdown pauses so a
+    // keyboard user isn't timed out mid-decision, then re-arms with a fresh window on blur.
+    u.onkeydown = function (e) { if (e.key === 'Escape') { e.preventDefault(); hide(); } };
+    u.onfocusin = function () { u.classList.add('paused'); clearTimeout(undoTimer); undoTimer = null; };
+    u.onfocusout = function () { u.classList.remove('paused'); arm(); };
+    document.body.classList.add('undo-open');
+    u.classList.remove('show'); void u.offsetWidth; u.classList.add('show'); // reflow so the show transition + ring restart
+    arm();
+    undoBtn.focus();
+  }
+  // ---- Note identity (used by the write-back row lookup) ----
+  function noteKey(n) { return n.project + '||' + n.id; }
+  // ---- Markdown digest export (the current view -> Obsidian-friendly markdown) ----
+  function buildMarkdown() {
+    var rows = filtered();
+    var tabLabel = { open: 'Open', progress: 'In progress', resolved: 'Resolved', all: 'All' }[TAB] || TAB;
+    var date = new Date().toISOString().slice(0, 10);
+    var projs = uniq(rows.map(function (n) { return n.project; }));
+    var lines = [];
+    lines.push('# Red Pen - ' + tabLabel + ' notes (' + date + ')');
+    lines.push('');
+    lines.push(rows.length + ' note' + (rows.length === 1 ? '' : 's') + ' across ' + projs.length + ' project' + (projs.length === 1 ? '' : 's') + '.');
+    lines.push('');
+    var byProj = {};
+    rows.forEach(function (n) { (byProj[n.project] = byProj[n.project] || []).push(n); });
+    Object.keys(byProj).forEach(function (proj) {
+      var ns = byProj[proj];
+      lines.push('## ' + proj + ' (' + ns.length + ')');
+      ns.forEach(function (n) {
+        var box = (n.status === 'resolved') ? '- [x]' : '- [ ]';
+        var meta = '**' + (n.type || 'note') + (n.priority ? ' / ' + n.priority : '') + '**';
+        var body = (n.body || '').replace(/\s+/g, ' ').trim();
+        var link = n.url ? ' ([source](' + n.url + '))' : '';
+        lines.push(box + ' ' + meta + ' - ' + body + link);
+      });
+      lines.push('');
+    });
+    return lines.join('\n').trim() + '\n';
+  }
+  function openMdExport() {
+    document.getElementById('mdText').value = buildMarkdown();
+    document.getElementById('mdNote').textContent = '';
+    document.getElementById('mdOverlay').classList.add('show');
+  }
+  function copyMd() {
+    var ta = document.getElementById('mdText');
+    function ok() { document.getElementById('mdNote').textContent = 'Copied to clipboard.'; }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(ta.value).then(ok, function () { ta.focus(); ta.select(); try { document.execCommand('copy'); ok(); } catch (e) {} });
+    } else { ta.focus(); ta.select(); try { document.execCommand('copy'); ok(); } catch (e) {} }
+  }
+  function downloadMd() {
+    var date = new Date().toISOString().slice(0, 10);
+    var blob = new Blob([document.getElementById('mdText').value], { type: 'text/markdown' });
+    var a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'red-pen-' + TAB + '-' + date + '.md';
+    document.body.appendChild(a); a.click();
+    setTimeout(function () { URL.revokeObjectURL(a.href); a.remove(); }, 0);
+    document.getElementById('mdNote').textContent = 'Downloaded ' + a.download + '.';
+  }
+  var firstLoad = true;
+  function load() {
+    var refresh = document.getElementById('refreshBtn');
+    refresh.disabled = true;
+    refresh.textContent = 'Loading...';
+    document.getElementById('foot').innerHTML = '<span class="rp-spin"></span> Loading notes...';
+    // Preserve the active filter selection across the option rebuild below; on the very
+    // first load, seed it from the persisted view state instead so filters survive a reload.
+    var keep = (firstLoad && LAST) ? LAST : currentState();
+    fetch('/api/notes').then(function (r) { return r.json(); }).then(function (data) {
+      ALL = data.notes || [];
+      fillSelect('fProject', uniq(ALL.map(function (n) { return n.project; })));
+      fillSelect('fSurface', uniq(ALL.map(function (n) { return n.surface; })));
+      fillSelect('fType', uniq(ALL.map(function (n) { return n.type; })));
+      fillSelect('fPriority', uniq(ALL.map(function (n) { return n.priority; })));
+      FILTER_IDS.forEach(function (id) { fset(id, keep[id]); });
+      firstLoad = false;
+      SOURCES = data.sources || [];
+      renderLicense(data.license || null);
+      renderSources(SOURCES);
+      renderProjects();
+      renderTabs();
+      render();
+      document.getElementById('foot').textContent =
+        'Aggregated ' + ALL.length + ' notes from ' + data.sources.length + ' sources - ' +
+        (data.generatedAt || '');
+    }).catch(function (e) {
+      document.getElementById('foot').textContent = 'Error loading notes: ' + e;
+      toast('Could not load notes: ' + e, true);
+    }).then(function () {
+      refresh.disabled = false;
+      refresh.textContent = 'Refresh';
+    });
+  }
+  // PRO license: the same offline-signed key that unlocks the WordPress plugin lifts
+  // the free 3-project cap on the board. Verified server-side (local, no phone-home).
+  var LIC = null;
+  function renderLicense(lic) {
+    LIC = lic;
+    // At the free-tier project cap, hide the add / connect controls and their hint -
+    // adding more projects does nothing until you unlock. Restored once licensed.
+    var atCap = !!(lic && !lic.licensed && lic.totalProjects >= lic.projectCap);
+    ['addBtn', 'connectBtn', 'sourcesHint'].forEach(function (id) {
+      var el = document.getElementById(id); if (el) { el.style.display = atCap ? 'none' : ''; }
+    });
+    var banner = document.getElementById('licenseBanner');
+    if (lic && lic.capped) {
+      banner.style.display = '';
+      banner.innerHTML = '<span>Free tier - the board is showing <b>' + lic.projectCap + ' of ' + lic.totalProjects +
+        '</b> projects. Unlock unlimited with a Red Pen PRO key.</span><span class="spacer"></span>' +
+        '<button type="button" id="licUnlockBtn">Unlock unlimited</button>';
+      document.getElementById('licUnlockBtn').onclick = function () {
+        TAB = 'sources'; renderTabs(); render(); persistLast();
+        var el = document.getElementById('licKeyInput'); if (el) { el.focus(); }
+      };
+    } else {
+      banner.style.display = 'none';
+    }
+    var panel = document.getElementById('licensePanel');
+    if (!panel) return;
+    if (lic && lic.licensed) {
+      panel.innerHTML = '<h3>Red Pen PRO</h3><p class="ok">PRO unlocked - licensed to ' + esc(lic.licensedTo || '') +
+        '. Unlimited projects.</p><div class="row" style="margin-top:8px"><button type="button" id="licRemoveBtn">Remove key</button></div>';
+      document.getElementById('licRemoveBtn').onclick = function () { saveLicense(''); };
+    } else {
+      var cap = lic ? lic.projectCap : 3;
+      panel.innerHTML = '<h3>Red Pen PRO</h3>' +
+        '<p class="hint" style="margin:0 0 8px">Unlicensed - the board shows up to <b>' + cap + '</b> projects. Paste your PRO license key to unlock unlimited. Verified locally - no account, no phone-home.</p>' +
+        '<div class="row"><input type="text" id="licKeyInput" placeholder="paste your license key" spellcheck="false" autocomplete="off"><button type="button" id="licSaveBtn">Unlock</button></div>' +
+        '<p class="hint" id="licMsg"></p>';
+      document.getElementById('licSaveBtn').onclick = function () { saveLicense(document.getElementById('licKeyInput').value); };
+    }
+  }
+  function saveLicense(key) {
+    fetch('/api/license', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: key }) })
+      .then(function (r) { return r.json(); })
+      .then(function (res) {
+        if (key && !res.licensed) {
+          var m = document.getElementById('licMsg'); if (m) { m.textContent = 'That key did not validate - check you pasted the whole key.'; }
+          toast('License key did not validate.', true);
+          return;
+        }
+        toast(res.licensed ? ('PRO unlocked - licensed to ' + res.email) : 'License removed.', false);
+        load();
+      })
+      .catch(function (e) { toast('Could not save license: ' + e, true); });
+  }
+  ['q', 'fProject', 'fSurface', 'fType', 'fPriority'].forEach(function (id) {
+    // Other filters change the per-tab counts, so refresh the tabs too.
+    document.getElementById(id).addEventListener('input', function () { renderTabs(); render(); persistLast(); });
+  });
+  document.getElementById('tabs').addEventListener('click', function (e) {
+    var t = e.target.closest('.tab'); if (!t) return;
+    TAB = t.getAttribute('data-tab');
+    renderTabs();
+    render();
+    persistLast();
+  });
+  document.getElementById('exportMdBtn').addEventListener('click', openMdExport);
+  var mdOverlay = document.getElementById('mdOverlay');
+  function closeMd() { mdOverlay.classList.remove('show'); }
+  document.getElementById('mdClose').addEventListener('click', closeMd);
+  document.getElementById('mdCancel').addEventListener('click', closeMd);
+  mdOverlay.addEventListener('click', function (e) { if (e.target === mdOverlay) closeMd(); });
+  document.getElementById('mdCopy').addEventListener('click', copyMd);
+  document.getElementById('mdDownload').addEventListener('click', downloadMd);
+  document.getElementById('sourcesRows').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-act]'); if (!b) return;
+    var tr = b.closest('tr[data-key]'); if (!tr) return;
+    var act = b.getAttribute('data-act'), key = tr.getAttribute('data-key'), kind = tr.getAttribute('data-kind'), project = tr.getAttribute('data-project');
+    if (act === 'recheck') {
+      if (kind === 'push') {
+        fetch('/api/refresh-name', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: key }) }).then(function () { load(); });
+      } else { load(); }
+    }
+    else if (act === 'path') { openRepoModal(project); }
+    else if (act === 'edit') { openCredModal(tr, project); }
+    else if (act === 'remove') {
+      var url = kind === 'push' ? '/api/connected/remove' : '/api/sources/remove';
+      fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: key }) }).then(function () { load(); });
+    }
+  });
+  document.getElementById('projectsRows').addEventListener('click', function (e) {
+    var tr = e.target.closest('tr.prow'); if (!tr) return;
+    document.getElementById('fProject').value = tr.getAttribute('data-project');
+    TAB = 'open';
+    renderTabs(); render();
+  });
+  var srcModalEl = document.getElementById('srcModal');
+  document.getElementById('srcModalClose').addEventListener('click', closeSrcModal);
+  document.getElementById('srcModalCancel').addEventListener('click', closeSrcModal);
+  srcModalEl.addEventListener('click', function (e) { if (e.target === srcModalEl) closeSrcModal(); });
+  document.getElementById('srcModalSave').addEventListener('click', function () { if (srcSaveFn) srcSaveFn(); });
+  // Row clicks: the only interactive control on a note row is the Resolve/Reopen button.
+  document.getElementById('rows').addEventListener('click', function (e) {
+    var rb = e.target.closest('.rb');
+    if (!rb) return;
+    var rtr = e.target.closest('tr[data-key]'); if (!rtr) return;
+    var rkey = rtr.getAttribute('data-key'), rnote = null;
+    for (var j = 0; j < ALL.length; j++) { if (noteKey(ALL[j]) === rkey) { rnote = ALL[j]; break; } }
+    setNoteStatus(rnote, rb.getAttribute('data-to'), rb);
+  });
+  document.querySelectorAll('th[data-sort]').forEach(function (th) {
+    th.tabIndex = 0;
+    th.setAttribute('role', 'button');
+    function doSort() {
+      var k = th.getAttribute('data-sort');
+      if (SORT.key === k) SORT.dir *= -1; else { SORT.key = k; SORT.dir = 1; }
+      render();
+      persistLast();
+    }
+    th.addEventListener('click', doSort);
+    th.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); doSort(); }
+    });
+  });
+  document.getElementById('refreshBtn').addEventListener('click', load);
+  document.getElementById('exportCsvBtn').addEventListener('click', downloadCsv);
+  // ---- Theme toggle (announces state via aria-checked, persists in localStorage) ----
+  var darkBtn = document.getElementById('darkBtn');
+  function setDark(on) {
+    document.body.classList.toggle('dark', on);
+    darkBtn.setAttribute('aria-checked', on ? 'true' : 'false');
+    try { localStorage.setItem('rphub.dark', on ? '1' : '0'); } catch (e) {}
+  }
+  darkBtn.addEventListener('click', function () { setDark(!document.body.classList.contains('dark')); });
+  try { setDark(localStorage.getItem('rphub.dark') === '1'); } catch (e) {}
+  // ---- Saved views ----
+  rebuildViewSel('');
+  document.getElementById('viewSel').addEventListener('change', function () {
+    var name = this.value;
+    if (name && VIEWS[name]) { applyState(VIEWS[name]); persistLast(); renderTabs(); render(); }
+    document.getElementById('viewDel').style.display = name ? '' : 'none';
+  });
+  document.getElementById('viewSave').addEventListener('click', function () {
+    var name = (window.prompt('Save current filters as:') || '').trim();
+    if (!name) return;
+    VIEWS[name] = currentState();
+    writeJson('rphub.views', VIEWS);
+    rebuildViewSel(name);
+  });
+  document.getElementById('viewDel').addEventListener('click', function () {
+    var name = document.getElementById('viewSel').value;
+    if (!name) return;
+    delete VIEWS[name];
+    writeJson('rphub.views', VIEWS);
+    rebuildViewSel('');
+  });
+  // ---- Add Projects modal ----
+  var CANDS = [];
+  var overlay = document.getElementById('overlay');
+  function openModal() {
+    overlay.classList.add('show');
+    document.getElementById('scanResults').innerHTML = '';
+    document.getElementById('modalNote').textContent = '';
+    CANDS = [];
+    updateAddBtn();
+    fetch('/api/sources').then(function (r) { return r.json(); }).then(function (d) {
+      var root = (d.scanRoots && d.scanRoots[0]) || '';
+      document.getElementById('scanRoot').value = root;
+      renderCurrent(d.sources || []);
+    });
+  }
+  function closeModal() { overlay.classList.remove('show'); }
+  function renderCurrent(sources) {
+    var box = document.getElementById('currentSources');
+    if (!sources.length) { box.innerHTML = '<p class="hint">No sources yet - scan a directory and add some.</p>'; return; }
+    box.innerHTML = sources.map(function (s) {
+      return '<div class="srow"><span class="badge" style="background:' +
+        (s.surface === 'wordpress' ? '#21759b' : s.surface === 'express' ? '#1a7f37' : '#6d28d9') +
+        '">' + esc(s.surface) + '</span><span>' + esc(s.label) + '</span>' +
+        '<button class="rm" data-key="' + esc(s.key) + '" type="button">remove</button></div>';
+    }).join('');
+    box.querySelectorAll('.rm').forEach(function (b) {
+      b.addEventListener('click', function () {
+        fetch('/api/sources/remove', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key: b.getAttribute('data-key') })
+        }).then(function (r) { return r.json(); }).then(function (d) {
+          renderCurrent(d.sources.map(function (s) { return { key: s.key, label: s.label, surface: s.type === 'wp-rest' ? 'wordpress' : 'file' }; }));
+          load();
+        });
+      });
+    });
+  }
+  function doScan() {
+    var root = document.getElementById('scanRoot').value.trim();
+    var box = document.getElementById('scanResults');
+    var scanBtn = document.getElementById('scanBtn');
+    scanBtn.disabled = true; scanBtn.textContent = 'Scanning...';
+    box.innerHTML = '<p class="hint"><span class="rp-spin"></span> Detecting Red Pen projects under ' + esc(root) + ' ...</p>';
+    fetch('/api/scan?root=' + encodeURIComponent(root)).then(function (r) { return r.json(); }).then(function (d) {
+      CANDS = d.candidates || [];
+      if (d.error) { box.innerHTML = '<p class="hint">Error: ' + esc(d.error) + '</p>'; return; }
+      if (!CANDS.length) { box.innerHTML = '<p class="hint">No Red Pen installs found under that directory.</p>'; return; }
+      box.innerHTML = '<p class="hint">Found ' + CANDS.length + ' install(s). Uncheck any you do not want, then Add selected.</p>' +
+        CANDS.map(function (c, i) {
+          var checked = c.already ? '' : 'checked';
+          var dim = c.already ? ' dim' : '';
+          var meta = c.type === 'wp-rest'
+            ? 'WordPress' + (c.already ? ' - already added' : '')
+            : esc(c.surface) + ' - ' + c.count + ' note' + (c.count === 1 ? '' : 's') + (c.already ? ' - already added' : '');
+          var sub = c.type === 'wp-rest' ? esc(c.install || c.url) : esc(c.path);
+          var auth = c.type === 'wp-rest'
+            ? '<div class="auth">' +
+                '<input id="wpurl_' + i + '" placeholder="Site URL" value="' + esc(c.url || '') + '">' +
+                '<input id="wpuser_' + i + '" placeholder="WP username">' +
+                '<input id="wppw_' + i + '" placeholder="Application password">' +
+              '</div>'
+            : '';
+          return '<div class="cand' + dim + '"><div class="top">' +
+            '<input type="checkbox" class="ck" id="cand_' + i + '" data-i="' + i + '" ' + (c.already ? 'disabled' : checked) + '>' +
+            '<div><div class="lab">' + esc(c.label) + ' <span class="sub">(' + meta + ')</span></div>' +
+            '<div class="sub">' + sub + '</div></div></div>' + auth + '</div>';
+        }).join('');
+      box.querySelectorAll('.ck').forEach(function (ck) { ck.addEventListener('change', updateAddBtn); });
+      updateAddBtn();
+    }).catch(function (e) { box.innerHTML = '<p class="hint">Scan failed: ' + esc(e) + '</p>'; })
+      .then(function () { scanBtn.disabled = false; scanBtn.textContent = 'Scan'; });
+  }
+  function selectedSources() {
+    var out = [];
+    document.querySelectorAll('.ck:checked').forEach(function (ck) {
+      var c = CANDS[+ck.getAttribute('data-i')];
+      if (!c) return;
+      if (c.type === 'wp-rest') {
+        var i = ck.getAttribute('data-i');
+        out.push({
+          type: 'wp-rest', label: c.label,
+          url: (document.getElementById('wpurl_' + i).value || '').trim(),
+          user: (document.getElementById('wpuser_' + i).value || '').trim(),
+          appPassword: (document.getElementById('wppw_' + i).value || '').trim()
+        });
+      } else {
+        out.push({ type: 'file', label: c.label, path: c.path, surface: c.surface });
+      }
+    });
+    return out;
+  }
+  function updateAddBtn() {
+    var n = document.querySelectorAll('.ck:checked').length;
+    var btn = document.getElementById('addSelectedBtn');
+    btn.disabled = n === 0;
+    btn.textContent = n ? 'Add ' + n + ' selected' : 'Add selected';
+  }
+  function addSelected() {
+    var add = selectedSources();
+    if (!add.length) return;
+    fetch('/api/sources', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ add: add })
+    }).then(function (r) { return r.json(); }).then(function (d) {
+      document.getElementById('modalNote').textContent = 'Added ' + d.added + '.';
+      load();
+      closeModal();
+    });
+  }
+  document.getElementById('addBtn').addEventListener('click', openModal);
+  document.getElementById('modalClose').addEventListener('click', closeModal);
+  document.getElementById('modalCancel').addEventListener('click', closeModal);
+  document.getElementById('scanBtn').addEventListener('click', doScan);
+  document.getElementById('addSelectedBtn').addEventListener('click', addSelected);
+  overlay.addEventListener('click', function (e) { if (e.target === overlay) closeModal(); });
+  // ---- Connect a Site modal ----
+  var connectOverlay = document.getElementById('connectOverlay');
+  function openConnect() {
+    fetch('/api/connect-info').then(function (r) { return r.json(); }).then(function (d) {
+      document.getElementById('connUrl').value = d.url;
+      document.getElementById('connToken').value = d.token;
+      document.getElementById('connectNote').textContent = '';
+      connectOverlay.classList.add('show');
+    });
+  }
+  function closeConnect() { connectOverlay.classList.remove('show'); }
+  document.getElementById('connectBtn').addEventListener('click', openConnect);
+  document.getElementById('connectClose').addEventListener('click', closeConnect);
+  document.getElementById('connectCancel').addEventListener('click', closeConnect);
+  connectOverlay.addEventListener('click', function (e) { if (e.target === connectOverlay) closeConnect(); });
+  document.querySelectorAll('[data-copy]').forEach(function (b) {
+    b.addEventListener('click', function () {
+      var el = document.getElementById(b.getAttribute('data-copy'));
+      el.select();
+      try { navigator.clipboard.writeText(el.value); } catch (e) { try { document.execCommand('copy'); } catch (e2) {} }
+      document.getElementById('connectNote').textContent = 'Copied.';
+    });
+  });
+  // ---- Modal focus management (shared across all four overlays) ----
+  var OVERLAY_IDS = ['mdOverlay', 'srcModal', 'overlay', 'connectOverlay'];
+  function openOverlay() {
+    for (var i = 0; i < OVERLAY_IDS.length; i++) {
+      var el = document.getElementById(OVERLAY_IDS[i]);
+      if (el && el.classList.contains('show')) return el;
+    }
+    return null;
+  }
+  function focusables(root) {
+    return Array.prototype.slice.call(root.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )).filter(function (el) { return el.offsetParent !== null; });
+  }
+  // Focus the first control when a modal opens (each open path just toggles the 'show'
+  // class, so observe that rather than wiring every opener).
+  OVERLAY_IDS.forEach(function (id) {
+    var el = document.getElementById(id);
+    if (!el) return;
+    new MutationObserver(function () {
+      if (!el.classList.contains('show')) return;
+      var f = focusables(el.querySelector('.modal') || el);
+      if (f.length) f[0].focus();
+    }).observe(el, { attributes: true, attributeFilter: ['class'] });
+  });
+  // Esc closes the open overlay; Tab is trapped within it.
+  document.addEventListener('keydown', function (e) {
+    var ov = openOverlay();
+    if (e.key === 'Escape') {
+      if (ov) ov.classList.remove('show');
+      return;
+    }
+    if (e.key !== 'Tab' || !ov) return;
+    var f = focusables(ov.querySelector('.modal') || ov);
+    if (!f.length) return;
+    var first = f[0], last = f[f.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+  });
+  load();
+})();
+</script>
+</body>
+</html>