npm - @delete101020/aidlc - Versions diffs - 4.0.0 - Mend

@delete101020/aidlc 4.0.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 (93) hide show

package/AUTOMATION.md +148 -0
package/README.md +684 -0
package/dist/assets/annotate-artifact.skill.md +121 -0
package/dist/assets/epic-context.skill.md +55 -0
package/dist/bundle.js +49470 -0
package/dist/templates/ainative/agents/native-engineer.md +66 -0
package/dist/templates/ainative/agents/native-operator.md +71 -0
package/dist/templates/ainative/agents/native-originator.md +56 -0
package/dist/templates/ainative/agents/native-product-owner.md +68 -0
package/dist/templates/ainative/agents/native-reviewer.md +65 -0
package/dist/templates/ainative/agents/native-verifier.md +58 -0
package/dist/templates/ainative/artifacts/build-plan.md +56 -0
package/dist/templates/ainative/artifacts/implement.md +55 -0
package/dist/templates/ainative/artifacts/intent.md +50 -0
package/dist/templates/ainative/artifacts/maintain.md +85 -0
package/dist/templates/ainative/artifacts/review.md +68 -0
package/dist/templates/ainative/artifacts/spec.md +69 -0
package/dist/templates/ainative/artifacts/verify.md +55 -0
package/dist/templates/ainative/skills/native-build-plan.md +74 -0
package/dist/templates/ainative/skills/native-implement.md +62 -0
package/dist/templates/ainative/skills/native-intent.md +50 -0
package/dist/templates/ainative/skills/native-maintain.md +94 -0
package/dist/templates/ainative/skills/native-review.md +82 -0
package/dist/templates/ainative/skills/native-spec.md +83 -0
package/dist/templates/ainative/skills/native-verify.md +60 -0
package/dist/templates/sdlc/agents/designer.md +87 -0
package/dist/templates/sdlc/agents/developer.md +178 -0
package/dist/templates/sdlc/agents/example-with-skills.md +59 -0
package/dist/templates/sdlc/agents/orchestrator.md +186 -0
package/dist/templates/sdlc/agents/po.md +115 -0
package/dist/templates/sdlc/agents/qa.md +141 -0
package/dist/templates/sdlc/agents/tech-lead.md +124 -0
package/dist/templates/sdlc/artifacts/design.md +130 -0
package/dist/templates/sdlc/artifacts/execute-test.md +64 -0
package/dist/templates/sdlc/artifacts/implement.backend.md +96 -0
package/dist/templates/sdlc/artifacts/implement.md +70 -0
package/dist/templates/sdlc/artifacts/implement.web-react.md +109 -0
package/dist/templates/sdlc/artifacts/implement.web.md +99 -0
package/dist/templates/sdlc/artifacts/plan.md +97 -0
package/dist/templates/sdlc/artifacts/prototype.md +141 -0
package/dist/templates/sdlc/artifacts/test-cases.md +47 -0
package/dist/templates/sdlc/artifacts/test-plan.md +100 -0
package/dist/templates/sdlc/artifacts/unit-test.md +32 -0
package/dist/templates/sdlc/profiles/agile-lite.yaml +29 -0
package/dist/templates/sdlc/profiles/hybrid.yaml +43 -0
package/dist/templates/sdlc/profiles/iso-ieee.yaml +67 -0
package/dist/templates/sdlc/profiles/none.yaml +21 -0
package/dist/templates/sdlc/skills/advance-epic.md +77 -0
package/dist/templates/sdlc/skills/analyze-requirements.md +279 -0
package/dist/templates/sdlc/skills/discovery-gate.md +118 -0
package/dist/templates/sdlc/skills/execute-test.md +74 -0
package/dist/templates/sdlc/skills/generate-test-cases.md +77 -0
package/dist/templates/sdlc/skills/implement.md +74 -0
package/dist/templates/sdlc/skills/prd.md +114 -0
package/dist/templates/sdlc/skills/prototype.md +128 -0
package/dist/templates/sdlc/skills/tech-design.md +134 -0
package/dist/templates/sdlc/skills/test-plan.md +115 -0
package/dist/templates/sdlc/skills/test-report.md +38 -0
package/dist/templates/sdlc/skills/unit-test.md +43 -0
package/dist/templates/sdlc/validators/ci.mjs +49 -0
package/dist/templates/sdlc/validators/traceability.mjs +244 -0
package/dist/templates/speckit/agents/analyst.md +42 -0
package/dist/templates/speckit/agents/speckit-developer.md +36 -0
package/dist/templates/speckit/agents/speckit-qa.md +38 -0
package/dist/templates/speckit/agents/speckit-tech-lead.md +40 -0
package/dist/templates/speckit/artifacts/analyze.md +48 -0
package/dist/templates/speckit/artifacts/clarify.md +64 -0
package/dist/templates/speckit/artifacts/plan.md +57 -0
package/dist/templates/speckit/artifacts/specify.md +64 -0
package/dist/templates/speckit/artifacts/tasks.md +33 -0
package/dist/templates/speckit/skills/analyze.md +50 -0
package/dist/templates/speckit/skills/clarify.md +31 -0
package/dist/templates/speckit/skills/plan.md +56 -0
package/dist/templates/speckit/skills/specify.md +52 -0
package/dist/templates/speckit/skills/speckit-implement.md +33 -0
package/dist/templates/speckit/skills/tasks.md +38 -0
package/dist/tools/epic-memory-hook.mjs +78 -0
package/dist/tools/epic-memory.mjs +130 -0
package/dist/tools/md-to-html.mjs +478 -0
package/dist/tools/vendor/marked.esm.mjs +2432 -0
package/dist/vendor/annotron/LICENSE +21 -0
package/dist/vendor/annotron/README.md +213 -0
package/dist/vendor/annotron/bin/annotron +467 -0
package/dist/vendor/annotron/commands/annotron.md +11 -0
package/dist/vendor/annotron/hooks/annotron-hook.sh +38 -0
package/dist/vendor/annotron/hooks/hooks.json +50 -0
package/dist/vendor/annotron/package.json +72 -0
package/dist/vendor/annotron/skills/annotron-review/SKILL.md +86 -0
package/dist/vendor/annotron/src/chrome.html +2029 -0
package/dist/vendor/annotron/src/mdRender.js +208 -0
package/dist/vendor/annotron/src/sdk.js +1042 -0
package/dist/vendor/annotron/src/server.js +780 -0
package/package.json +60 -0

package/dist/vendor/annotron/src/chrome.html ADDED Viewed

@@ -0,0 +1,2029 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>annotron</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bar-h: 60px;
+    --sidebar-w: 388px;
+    --radius: 9px;
+    --bg: #F3F3F8;
+    --panel: #fff;
+    --ink: #1B1A3D;
+    --accent: #2741F1;
+    --accent-hover: #1f34c9;
+    --accent-soft: rgba(39,65,241,.1);
+    --purple: #4E11B2;
+    --purple-soft: #8C78F3;
+    --coral: #D88689;
+    --green: #2fbf71;
+    --green-ink: #1c8a4e;
+    --line-08: rgba(27,26,61,.08);
+    --line-10: rgba(27,26,61,.10);
+    --line-14: rgba(27,26,61,.14);
+    --dim-45: rgba(27,26,61,.45);
+    --dim-5: rgba(27,26,61,.5);
+    --dim-6: rgba(27,26,61,.6);
+    --dim-7: rgba(27,26,61,.7);
+    --ink-82: rgba(27,26,61,.82);
+    --ui: 'Inter', system-ui, -apple-system, sans-serif;
+    --serif: 'Petrona', Georgia, serif;
+    --mono: ui-monospace, Menlo, monospace;
+  }
+  html, body { height: 100%; }
+  body {
+    font-family: var(--ui); font-size: 14px;
+    background: var(--bg); color: var(--ink);
+    -webkit-font-smoothing: antialiased;
+  }
+  ::selection { background: rgba(39,65,241,.18); }
+  ::-webkit-scrollbar { width: 11px; height: 11px; }
+  ::-webkit-scrollbar-thumb { background: rgba(27,26,61,.16); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
+  ::-webkit-scrollbar-thumb:hover { background: rgba(27,26,61,.28); background-clip: content-box; }
+  @keyframes cfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+  @keyframes cfPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
+  @keyframes thinking-bounce { 0%,80%,100% { transform: scale(.6); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
+  button { font-family: var(--ui); border: none; cursor: pointer; }
+  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  button:disabled { opacity: .45; cursor: default; }
+  kbd { padding: 1px 5px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line-10); font: 600 10px var(--mono); color: var(--dim-6); }
+  /* ── Topbar ─────────────────────────────────────────────────────────── */
+  #topbar {
+    display: flex; align-items: center; gap: 18px;
+    height: var(--bar-h); padding: 0 22px;
+    background: var(--panel); border-bottom: 1px solid var(--line-08);
+    flex: none; z-index: 30;
+  }
+  #topbar .left { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; }
+  #topbar .logo { font: 700 17px var(--ui); letter-spacing: -.03em; color: var(--accent); flex: none; }
+  #topbar .divider { width: 1px; height: 20px; background: var(--line-14); flex: none; }
+  #file-crumb { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font: 400 12.5px/1 var(--mono); color: var(--dim-5); }
+  #file-crumb svg { flex: none; opacity: .6; }
+  #file-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+  #topbar .right { display: flex; align-items: center; gap: 8px; flex: none; }
+  .live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; height: 32px; border-radius: 999px; background: var(--bg); font: 500 12px var(--ui); color: var(--dim-6); }
+  .live-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(27,26,61,.3); }
+  .live-pill.live .dot { background: var(--green); }
+  .btn-ghost { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--line-14); background: var(--panel); color: var(--ink); font: 600 13px var(--ui); }
+  .btn-ghost:hover:not(:disabled) { background: var(--bg); }
+  #btn-annotate.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
+  .btn-primary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: var(--radius); background: var(--accent); color: #fff; font: 600 13px var(--ui); box-shadow: 0 1px 2px rgba(27,26,61,.18); }
+  .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
+  .btn-primary:active:not(:disabled) { transform: scale(.98); }
+  #btn-help { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line-14); background: var(--panel); color: var(--dim-6); font: 600 14px var(--ui); }
+  #btn-help:hover { background: var(--bg); color: var(--ink); }
+  /* ── Layout ─────────────────────────────────────────────────────────── */
+  #main { display: flex; height: calc(100vh - var(--bar-h)); }
+  #outline-sidebar { width: 280px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line-08); min-height: 0; transition: width .2s ease; }
+  #outline-sidebar.hidden { display: none; }
+  #outline-sidebar.collapsed { width: 48px; }
+  #outline-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line-08); flex: none; }
+  #outline-title { font: 600 12px var(--ui); color: var(--dim-6); text-transform: uppercase; letter-spacing: .06em; flex: 1; overflow: hidden; white-space: nowrap; }
+  #outline-title.hidden { display: none; }
+  #btn-outline-toggle { width: 32px; height: 32px; padding: 0; border-radius: 6px; border: none; background: none; cursor: pointer; color: var(--dim-5); font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
+  #btn-outline-toggle:hover { background: rgba(39,65,241,.08); color: var(--accent); }
+  #outline-list { flex: 1; min-height: 0; overflow: auto; padding: 12px 0; }
+  #outline-sidebar.collapsed #outline-list { padding: 4px 0; }
+  .outline-item { padding: 8px 16px; font: 13px var(--ui); color: var(--dim-5); cursor: pointer; border-left: 3px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, border-color .15s, color .15s; }
+  #outline-sidebar.collapsed .outline-item { padding: 8px 6px; font-size: 0; }
+  #outline-sidebar.collapsed .outline-item::before { content: '•'; font-size: 12px; }
+  .outline-item:hover { background: rgba(39,65,241,.06); color: var(--ink); }
+  .outline-item.active { border-left-color: var(--accent); color: var(--accent); background: rgba(39,65,241,.08); }
+  #outline-sidebar.collapsed .outline-item.active { border-left-color: transparent; }
+  .outline-item.level-1 { padding-left: 16px; font-weight: 600; }
+  .outline-item.level-2 { padding-left: 32px; }
+  .outline-item.level-3 { padding-left: 48px; font-size: 12px; }
+  .outline-item.level-4 { padding-left: 64px; font-size: 12px; color: var(--dim-6); }
+  #outline-sidebar.collapsed .outline-item.level-1,
+  #outline-sidebar.collapsed .outline-item.level-2,
+  #outline-sidebar.collapsed .outline-item.level-3,
+  #outline-sidebar.collapsed .outline-item.level-4 { padding-left: 6px; }
+  #iframe-wrap { flex: 1; min-width: 0; position: relative; background: var(--bg); }
+  /* Markdown source editor (Markdown mode only) */
+  #md-editor { width: 44%; min-width: 320px; max-width: 720px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line-08); min-height: 0; }
+  #md-editor[hidden] { display: none; }
+  .mde-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line-08); font: 600 12px var(--ui); color: var(--dim-6); text-transform: uppercase; letter-spacing: .06em; flex: none; }
+  .mde-status { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--dim-45); }
+  .mde-status.dirty { color: var(--orange, #e07d00); }
+  .mde-status.saved { color: var(--green-ink); }
+  #md-textarea { flex: 1; min-height: 0; width: 100%; border: none; outline: none; resize: none; padding: 16px 18px; background: var(--panel); color: var(--ink); font: 13px/1.65 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
+  .mde-foot { flex: none; padding: 7px 14px; border-top: 1px solid var(--line-08); background: #FAFAFC; font: 400 11px var(--ui); color: var(--dim-45); display: flex; align-items: center; gap: 6px; }
+  iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }
+  #sidebar { width: var(--sidebar-w); flex: none; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line-08); min-height: 0; position: relative; }
+  .resize-handle {
+    position: absolute;
+    cursor: row-resize;
+    background: transparent;
+    transition: background 0.2s;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .resize-handle.h-resize {
+    cursor: col-resize;
+    width: 6px;
+    top: 0;
+    bottom: 0;
+  }
+  .resize-handle.h-resize::before {
+    content: '';
+    width: 3px;
+    height: 40px;
+    background: var(--line-14);
+    border-radius: 2px;
+    transition: background 0.2s;
+  }
+  .resize-handle.h-resize:hover::before {
+    background: var(--accent);
+    box-shadow: 0 0 8px rgba(39, 65, 241, 0.3);
+  }
+  .resize-handle.v-resize {
+    height: 6px;
+    left: 0;
+    right: 0;
+  }
+  .resize-handle.v-resize::before {
+    content: '';
+    width: 40px;
+    height: 3px;
+    background: var(--line-14);
+    border-radius: 2px;
+    transition: background 0.2s;
+  }
+  .resize-handle.v-resize:hover::before {
+    background: var(--accent);
+    box-shadow: 0 0 8px rgba(39, 65, 241, 0.3);
+  }
+  .resize-handle.v-top {
+    top: -3px;
+    margin-top: 0;
+  }
+  .resize-handle.v-bottom {
+    bottom: -3px;
+    margin-bottom: 0;
+  }
+  .resize-handle.h-left {
+    left: -3px;
+    margin-left: 0;
+  }
+  /* Tabs */
+  #sidebar-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line-08); flex: none; }
+  .stab { position: relative; height: 42px; padding: 0 14px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 600 13.5px var(--ui); color: var(--dim-5); display: inline-flex; align-items: center; }
+  .stab.active { color: var(--accent); border-bottom-color: var(--accent); }
+  .stab:hover:not(.active) { color: var(--ink); }
+  .badge { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 11px var(--ui); }
+  /* Tab panels */
+  .tab-panel { display: none; flex: 1; min-height: 0; overflow: auto; }
+  .tab-panel.active { display: flex; flex-direction: column; }
+  #annotations-list, #history-list, #history-resolved { padding: 14px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
+  /* Resolved comments archived at the top of the History tab */
+  #history-resolved:empty { display: none; }
+  #history-resolved { padding-bottom: 4px; }
+  .hist-section-label { font: 600 11px var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--dim-45); padding: 2px 2px 0; }
+  /* Composer card (new comment) */
+  .composer-card { flex-shrink: 0; animation: cfFade .18s ease-out; border: 1px solid rgba(39,65,241,.3); border-radius: 14px; background: var(--panel); box-shadow: 0 6px 20px rgba(27,26,61,.1); padding: 13px; }
+  .composer-card .cc-head { display: flex; align-items: center; gap: 6px; font: 600 11px var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
+  .composer-card .cc-quote { border-left: 3px solid var(--coral); padding: 2px 0 2px 10px; font: italic 400 12.5px/1.5 var(--ui); color: var(--dim-6); margin-bottom: 11px; max-height: 66px; overflow: hidden; }
+  .composer-card textarea { width: 100%; min-height: 66px; resize: vertical; border: 1px solid var(--line-14); border-radius: 10px; padding: 10px 11px; font: 400 13.5px/1.5 var(--ui); color: var(--ink); outline: none; }
+  .composer-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39,65,241,.12); }
+  .cc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
+  .cc-cancel { height: 32px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--line-14); background: var(--panel); color: var(--dim-7); font: 600 12.5px var(--ui); }
+  .cc-cancel:hover { background: var(--bg); }
+  .cc-submit { height: 32px; padding: 0 15px; border-radius: 8px; border: none; background: var(--accent); color: #fff; font: 600 12.5px var(--ui); }
+  .cc-submit:hover { background: var(--accent-hover); }
+  /* Comment cards */
+  .ann-card { flex-shrink: 0; cursor: pointer; border-radius: 14px; padding: 13px 14px; background: var(--panel); border: 1px solid var(--line-10); box-shadow: 0 1px 2px rgba(27,26,61,.04); transition: border-color .15s, box-shadow .15s; animation: cfFade .15s ease-out; }
+  .ann-card:hover { border-color: rgba(39,65,241,.4); }
+  .ann-card.selected { border-color: var(--accent); box-shadow: 0 4px 16px rgba(39,65,241,.14); }
+  .ann-card.pending { border-left: 3px solid var(--coral); }
+  .ann-card.resolved { background: #FAFBFA; opacity: .85; }
+  .ann-card.failed { border-color: #E5484D; box-shadow: 0 0 0 1px rgba(229,72,77,.35); }
+  .ann-card.failed:hover { border-color: #E5484D; }
+  .ann-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
+  .ann-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 11px var(--ui); }
+  .ann-who { flex: 1; min-width: 0; }
+  .ann-author { font: 600 12.5px var(--ui); color: var(--ink); }
+  .ann-time { font: 400 11px var(--ui); color: var(--dim-45); }
+  .ann-badge-resolved { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(47,191,113,.12); color: var(--green-ink); font: 600 10.5px var(--ui); }
+  .ann-badge-failed { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(229,72,77,.12); color: #C1272D; font: 600 10.5px var(--ui); }
+  /* Retry-all banner (shown above the list when comments failed to apply) */
+  .retry-banner { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(229,72,77,.4); background: rgba(229,72,77,.07); animation: cfFade .15s ease-out; }
+  .retry-banner .rb-text { flex: 1; font: 500 12.5px var(--ui); color: #C1272D; }
+  .retry-banner .rb-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: #E5484D; color: #fff; font: 600 12px var(--ui); border: none; }
+  .retry-banner .rb-btn:hover { background: #C1272D; }
+  .retry-banner .rb-btn:disabled { opacity: .5; cursor: default; }
+  .ann-action.retry { color: #C1272D; }
+  .ann-action.retry:hover { color: #E5484D; }
+  .ann-kind-tag { padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--dim-6); font: 600 10px var(--ui); text-transform: uppercase; letter-spacing: .04em; }
+  .ann-remove { margin-left: 4px; width: 22px; height: 22px; border-radius: 6px; background: none; color: var(--dim-45); font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+  .ann-remove:hover { background: var(--bg); color: var(--coral); }
+  .ann-quote { border-left: 3px solid rgba(216,134,137,.7); padding: 1px 0 1px 9px; font: italic 400 12px/1.45 var(--ui); color: var(--dim-5); margin-bottom: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+  .ann-thread { display: flex; flex-direction: column; gap: 8px; }
+  .tmsg { font: 400 13.5px/1.55 var(--ui); color: var(--ink-82); }
+  .tmsg.agent { background: rgba(140,120,243,.09); border-radius: 10px; padding: 8px 10px; }
+  .tmsg .tmsg-who { font: 600 10.5px var(--ui); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
+  .tmsg.agent .tmsg-who { color: var(--purple); }
+  .ann-actions { display: flex; gap: 14px; align-items: center; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(27,26,61,.07); }
+  .ann-action { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font: 600 12px var(--ui); color: var(--dim-5); }
+  .ann-action:hover { color: var(--accent); }
+  .tmsg-copy, .msg-copy { display: inline-flex; align-items: center; background: none; border: none; padding: 0; font: 600 11px var(--ui); color: var(--dim-45); }
+  .tmsg-copy:hover, .msg-copy:hover { color: var(--accent); }
+  /* Inline reply / note editors */
+  .ann-editor { margin-top: 10px; }
+  .ann-editor textarea { width: 100%; min-height: 54px; resize: vertical; border: 1px solid var(--line-14); border-radius: 10px; padding: 9px 10px; font: 400 13px/1.5 var(--ui); color: var(--ink); outline: none; }
+  .ann-editor textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39,65,241,.1); }
+  .ann-editor-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 8px; }
+  .mini-attach { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-14); background: var(--panel); color: var(--dim-7); font: 600 12px var(--ui); margin-right: auto; }
+  .mini-attach:hover { background: var(--bg); }
+  /* Empty states */
+  .empty-state { text-align: center; padding: 20px 16px; color: var(--dim-45); }
+  .empty-state .es-icon { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #B4A8FC, var(--purple-soft)); box-shadow: 0 4px 12px rgba(78,17,178,.15); }
+  .empty-state .es-title { font: 600 12px var(--ui); color: var(--ink); margin-bottom: 4px; }
+  .empty-state .es-sub { font: 400 11px/1.5 var(--ui); max-width: 240px; margin: 0 auto; }
+  .empty-state b { color: var(--accent); font-weight: 600; }
+  /* History timeline */
+  #history-list { padding-left: 22px; }
+  .hist-row { display: flex; gap: 13px; padding-bottom: 20px; position: relative; }
+  .hist-rail { flex: none; display: flex; flex-direction: column; align-items: center; }
+  .hist-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 3px; }
+  .hist-line { flex: 1; width: 2px; background: var(--line-08); margin-top: 2px; }
+  .hist-row:last-child .hist-line { display: none; }
+  .hist-text { font: 400 13px/1.5 var(--ui); color: var(--ink-82); }
+  .hist-time { font: 400 11px var(--ui); color: var(--dim-45); margin-top: 2px; }
+  /* Attach previews */
+  .attach-previews { display: flex; flex-wrap: wrap; gap: 6px; }
+  .attach-previews:empty { display: none; }
+  .attach-thumb { position: relative; width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--line-14); overflow: hidden; background: var(--bg); flex: none; }
+  .attach-previews.mini .attach-thumb { width: 40px; height: 40px; }
+  .attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .attach-thumb .attach-remove { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 16px; padding: 0; }
+  .attach-thumb .attach-remove:hover { background: var(--coral); }
+  /* Agent activity / conversation strip */
+  #conversation-wrap { flex: none; border-top: 1px solid var(--line-08); background: #FAFAFC; max-height: 210px; overflow: auto; }
+  #conversation-wrap:empty { display: none; }
+  #conversation { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+  .msg { font: 400 13px/1.55 var(--ui); }
+  .msg .msg-label { font: 600 10.5px var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--purple); margin-bottom: 4px; }
+  .msg.agent { background: rgba(140,120,243,.09); border-radius: 10px; padding: 9px 11px; color: var(--ink-82); }
+  .msg.human .msg-label { color: var(--accent); }
+  .msg.cancelled { opacity: .7; }
+  .msg.cancelled .msg-label { color: var(--coral); }
+  .thinking-dots { display: flex; gap: 5px; align-items: center; padding: 2px 0; }
+  .thinking-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-soft); animation: thinking-bounce 1.2s ease-in-out infinite; }
+  .thinking-dots span:nth-child(2) { animation-delay: .2s; }
+  .thinking-dots span:nth-child(3) { animation-delay: .4s; }
+  .work-steps { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
+  .work-step { font: 400 12px/1.4 var(--ui); color: var(--ink-82); display: flex; gap: 6px; align-items: baseline; }
+  .work-step::before { content: '›'; color: var(--purple-soft); flex: none; }
+  .work-step.done { color: var(--dim-45); }
+  .work-step.done::before { content: '✓'; color: var(--green); }
+  /* Permission cards */
+  #perm-requests { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; flex: none; }
+  #perm-requests:empty { display: none; }
+  #perm-requests:not(:empty) { padding-top: 12px; }
+  .perm-card { border: 1px solid #E7A23B; border-left: 3px solid #E7A23B; border-radius: 12px; background: #FFF9F0; padding: 11px 12px; animation: cfFade .15s ease-out; }
+  .perm-head { font: 600 10.5px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #B5730C; margin-bottom: 5px; }
+  .perm-tool { font: 500 12.5px var(--mono); color: var(--ink); word-break: break-word; margin-bottom: 9px; }
+  .perm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+  .perm-actions button { height: 30px; padding: 0 12px; border-radius: 8px; font: 600 12px var(--ui); }
+  .perm-allow { background: var(--green); color: #fff; }
+  .perm-always { background: var(--panel); border: 1px solid var(--line-14); color: var(--ink); }
+  .perm-always:hover { background: var(--bg); }
+  .perm-deny { background: var(--coral); color: #fff; }
+  /* Bottom composer */
+  #composer { flex: none; border-top: 1px solid var(--line-08); background: var(--panel); padding: 12px 14px 14px; }
+  #agent-info-bar {
+    padding: 8px 12px;
+    background: var(--bg);
+    border-radius: 6px;
+    font: 400 11px var(--mono);
+    color: var(--dim-5);
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    border: 1px solid var(--line-08);
+  }
+  .info-item { display: inline-flex; align-items: center; gap: 6px; }
+  .info-label { color: var(--dim-45); font-weight: 500; }
+  .info-value { color: var(--ink); font-weight: 600; }
+  #composer-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
+  #agent-status { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--ui); color: var(--dim-6); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #agent-status .status-dot-sm { width: 8px; height: 8px; border-radius: 50%; background: rgba(27,26,61,.35); flex: none; }
+  #agent-status.working .status-dot-sm { background: var(--accent); animation: cfPulse 1s ease-in-out infinite; }
+  #agent-status.idle .status-dot-sm { background: var(--green); }
+  #agent-status.needs-perm { color: #B5730C; font-weight: 600; }
+  #agent-status.needs-perm .status-dot-sm { background: #E7A23B; }
+  #remote-approve-wrap { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--ui); color: var(--dim-5); cursor: pointer; user-select: none; }
+  #remote-approve { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
+  /* Agent metrics bar */
+  #agent-metrics { display: flex; align-items: center; gap: 12px; padding: 8px 0; font: 400 11px var(--ui); color: var(--dim-45); flex-wrap: wrap; }
+  #agent-metrics.hidden { display: none; }
+  .metric-group { display: inline-flex; align-items: center; gap: 6px; }
+  .metric-label { color: var(--dim-6); font-weight: 500; }
+  .metric-value { color: var(--ink); font-family: var(--mono); font-weight: 600; }
+  .metric-bar { width: 100px; height: 4px; border-radius: 2px; background: var(--line-10); overflow: hidden; }
+  .metric-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--purple-soft)); border-radius: 2px; transition: width .3s ease; }
+  /* Model selector */
+  #model-selector-wrap { display: inline-flex; align-items: center; gap: 6px; }
+  #model-selector { padding: 5px 10px; border: 1px solid var(--line-10); border-radius: 6px; background: var(--panel); color: var(--ink); font: 500 11px var(--ui); cursor: pointer; }
+  #model-selector:hover { border-color: var(--line-14); background: var(--bg); }
+  #model-selector:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+  #composer-box { border: 1px solid var(--line-14); border-radius: 12px; background: var(--panel); overflow: hidden; }
+  #composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39,65,241,.1); }
+  #free-text { width: 100%; min-height: 62px; max-height: 150px; resize: none; border: none; outline: none; padding: 11px 12px; font: 400 13.5px/1.5 var(--ui); color: var(--ink); display: block; font-family: var(--ui); }
+  #composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid rgba(27,26,61,.07); background: #FAFAFC; }
+  #btn-attach { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line-14); background: var(--panel); color: var(--dim-7); font-size: 16px; padding: 0; cursor: pointer; }
+  #btn-attach:hover { background: var(--bg); color: var(--ink); }
+  #composer-send-group { display: flex; align-items: center; gap: 6px; }
+  #btn-send { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: none; background: var(--accent); color: #fff; font-size: 16px; padding: 0; cursor: pointer; }
+  #btn-send:hover:not(:disabled) { background: var(--accent-hover); }
+  #btn-cancel-agent { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: none; background: var(--coral); color: #fff; font-size: 16px; padding: 0; cursor: pointer; }
+  #btn-cancel-agent:hover:not(:disabled) { background: #c96e71; }
+  #composer .attach-previews { margin-top: 9px; }
+  #shortcut-hints { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px; font: 400 11px var(--ui); color: var(--dim-45); }
+  #shortcut-hints .hint { display: inline-flex; align-items: center; gap: 4px; }
+  /* Toast */
+  #toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px); z-index: 90; display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 13px var(--ui); box-shadow: 0 12px 34px rgba(27,26,61,.35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
+  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+  #toast svg { color: var(--purple-soft); flex: none; }
+  /* Done overlay (shown after finishing the review) */
+  #done-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(243,243,248,.82); backdrop-filter: blur(6px); }
+  #done-overlay.show { display: flex; animation: cfFade .2s ease-out; }
+  .done-card { text-align: center; background: var(--panel); border: 1px solid var(--line-10); border-radius: 20px; padding: 40px 44px; box-shadow: 0 20px 60px rgba(27,26,61,.2); max-width: 420px; }
+  .done-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(47,191,113,.14); color: var(--green-ink); }
+  .done-title { font: 600 20px var(--serif); color: var(--ink); margin-bottom: 8px; }
+  .done-sub { font: 400 13.5px/1.6 var(--ui); color: var(--dim-6); }
+  /* Undo toast */
+  #undo-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px); z-index: 90; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 13px var(--ui); box-shadow: 0 12px 34px rgba(27,26,61,.35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
+  #undo-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
+  #undo-toast button { background: var(--purple-soft); color: #fff; padding: 4px 12px; border-radius: 8px; font: 600 12px var(--ui); }
+  /* Help overlay */
+  #kbd-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(27,26,61,.4); align-items: center; justify-content: center; }
+  #kbd-overlay.open { display: flex; }
+  #kbd-panel { background: var(--panel); border-radius: 16px; padding: 24px 28px; min-width: 320px; max-width: 90vw; box-shadow: 0 20px 60px rgba(27,26,61,.3); }
+  #kbd-panel h2 { font: 500 20px var(--serif); margin-bottom: 16px; }
+  .kbd-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-08); gap: 16px; }
+  .kbd-row:last-of-type { border-bottom: none; }
+  .kbd-desc { font: 400 13px var(--ui); color: var(--ink-82); }
+  .kbd-keys { display: flex; gap: 4px; flex: none; }
+  #kbd-close { margin-top: 18px; width: 100%; height: 38px; border-radius: 9px; background: var(--bg); color: var(--ink); font: 600 13px var(--ui); }
+  #kbd-close:hover { background: var(--line-08); }
+  @media (prefers-reduced-motion: reduce) { *, .ann-card, .composer-card { animation: none !important; transition: none !important; } }
+  @media (max-width: 640px) {
+    #sidebar { width: 100%; position: fixed; bottom: 0; left: 0; right: 0; height: 56vh; border-left: none; border-top: 1px solid var(--line-08); }
+    #iframe-wrap { height: 44vh; }
+  }
+</style>
+</head>
+<body>
+<header id="topbar">
+  <div class="left">
+    <span class="logo">annotron</span>
+    <span class="divider"></span>
+    <span id="file-crumb">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="M9 4h6l5 5v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/><path d="M14 4v5h5"/></svg>
+      <span id="file-label" title="">—</span>
+    </span>
+  </div>
+  <div class="right">
+    <span class="live-pill" id="live-pill" title="Connecting…"><span class="dot"></span>Live</span>
+    <button id="btn-annotate" class="btn-ghost" aria-pressed="false" title="Toggle annotate mode (A)">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
+      <span id="annotate-label">Annotate</span>
+    </button>
+    <button id="btn-md-source" class="btn-ghost" title="Toggle Markdown source editor" style="display:none">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v14H4z"/><path d="M7 15v-4l2 2 2-2v4"/><path d="M16 11v4"/><path d="M14 13l2 2 2-2"/></svg>Markdown
+    </button>
+    <button id="btn-download" class="btn-ghost" title="Download clean HTML (D)">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M8 11l4 4 4-4"/><path d="M4 21h16"/></svg>Download
+    </button>
+    <button id="btn-finalize" class="btn-primary" title="Write result to disk (Shift+F)">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>Finalize
+    </button>
+    <button id="btn-save-md" class="btn-primary" title="Save changes to the .md source (Cmd/Ctrl+S)" style="display:none">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/></svg>Save
+    </button>
+    <button id="btn-done" class="btn-ghost" title="Finish review &amp; stop the annotron server">
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64A9 9 0 1 1 5.64 6.64"/><path d="M12 2v10"/></svg>Done
+    </button>
+    <button id="btn-help" title="Keyboard shortcuts (?)" aria-label="Show keyboard shortcuts">?</button>
+  </div>
+</header>
+<div id="main">
+  <aside id="outline-sidebar" class="hidden">
+    <div id="outline-header">
+      <span id="outline-title">Outline</span>
+      <button id="btn-outline-toggle" title="Toggle sidebar width (Ctrl+L)">‹</button>
+    </div>
+    <div id="outline-list"></div>
+  </aside>
+  <div id="md-editor" hidden>
+    <div class="mde-head">
+      <span>Markdown source</span>
+      <span class="mde-status" id="mde-status"></span>
+    </div>
+    <textarea id="md-textarea" spellcheck="false" placeholder="# Loading…" wrap="off"></textarea>
+    <div class="mde-foot"><kbd>Cmd/Ctrl</kbd><kbd>S</kbd> Save · edits render on Save</div>
+  </div>
+  <div id="iframe-wrap">
+    <iframe id="artifact-frame" title="Artifact preview" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
+  </div>
+  <aside id="sidebar">
+    <div class="resize-handle h-resize h-left"></div>
+    <div id="sidebar-tabs">
+      <button class="stab active" data-tab="annotations">Annotations <span class="badge" id="ann-badge" style="display:none">0</span></button>
+      <button class="stab" data-tab="history">History <span class="badge" id="hist-badge" style="display:none">0</span></button>
+    </div>
+    <div id="tab-annotations" class="tab-panel active">
+      <div id="annotations-list"></div>
+    </div>
+    <div id="tab-history" class="tab-panel">
+      <div id="history-resolved"></div>
+      <div id="history-list"></div>
+    </div>
+    <div class="resize-handle v-top"></div>
+    <div id="conversation-wrap"><div id="conversation"></div></div>
+    <div class="resize-handle v-bottom"></div>
+    <div id="perm-requests"></div>
+    <div id="composer">
+      <div id="agent-info-bar">
+        <div class="info-item">
+          <span class="info-label">🤖</span>
+          <span class="info-value" id="info-model">Default</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">🧠</span>
+          <span class="info-value" id="info-context">—</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">📊</span>
+          <span class="info-value" id="info-tokens">—</span>
+        </div>
+      </div>
+      <div id="composer-status">
+        <div style="display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;">
+          <span id="agent-status" class="idle"><span class="status-dot-sm"></span><span id="agent-status-text">Idle</span></span>
+          <div id="model-selector-wrap">
+            <select id="model-selector" title="Select model for agent">
+              <option value="">Default</option>
+              <option value="claude-opus-4-8">Opus 4.8</option>
+              <option value="claude-sonnet-5">Sonnet 5</option>
+              <option value="claude-haiku-4-5-20251001">Haiku 4.5</option>
+            </select>
+          </div>
+          <label id="ask-mode-wrap" title="Force Ask Mode even with comments (for Q&A over edits)" style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim-6);">
+            <input type="checkbox" id="ask-mode-toggle" style="cursor: pointer;">
+            <span>Ask Mode</span>
+          </label>
+        </div>
+        <label id="remote-approve-wrap" title="Approve tool permissions from this browser instead of the terminal">
+          <input type="checkbox" id="remote-approve"> Remote approve
+        </label>
+      </div>
+      <div id="agent-metrics" class="hidden">
+        <div class="metric-group">
+          <span class="metric-label">Model:</span>
+          <span class="metric-value" id="metric-model">—</span>
+        </div>
+        <div class="metric-group">
+          <span class="metric-label">Tokens:</span>
+          <span class="metric-value" id="metric-tokens">—</span>
+          <div class="metric-bar" style="margin-left: 4px;">
+            <div class="metric-bar-fill" id="metric-tokens-bar" style="width: 0%;"></div>
+          </div>
+        </div>
+        <div class="metric-group">
+          <span class="metric-label">Context:</span>
+          <span class="metric-value" id="metric-context">—</span>
+          <div class="metric-bar" style="margin-left: 4px;">
+            <div class="metric-bar-fill" id="metric-context-bar" style="width: 0%;"></div>
+          </div>
+        </div>
+      </div>
+      <div id="composer-box">
+        <textarea id="free-text" placeholder="Message to agent…  (Enter to send, Shift+Enter for newline, paste an image to attach)"></textarea>
+        <div id="composer-bar">
+          <button id="btn-attach" title="Attach image(s)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8.5" cy="8.5" r="1.6"/><path d="M21 15l-5-5L5 21"/></svg>
+          </button>
+          <div id="composer-send-group">
+            <button id="btn-cancel-agent" title="Cancel" style="display:none">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+            <button id="btn-send" title="Send (Enter)">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div id="attach-previews" class="attach-previews"></div>
+      <input type="file" id="file-input" accept="image/*" multiple hidden>
+      <div id="shortcut-hints">
+        <span class="hint">Comment only → apply change</span>
+        <span class="hint">+ Message → ask question</span>
+        <span class="hint"><kbd>↵</kbd> Send</span>
+        <span class="hint"><kbd>Ctrl</kbd><kbd>Z</kbd> Undo</span>
+        <span class="hint"><kbd>Esc</kbd> Off</span>
+        <span class="hint" style="margin-left:auto"><kbd>?</kbd> Help</span>
+      </div>
+    </div>
+  </aside>
+</div>
+<div id="done-overlay">
+  <div class="done-card">
+    <div class="done-icon"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></div>
+    <div class="done-title">Review complete</div>
+    <div class="done-sub">The annotron server has been stopped. You can safely close this tab.</div>
+  </div>
+</div>
+<div id="toast" role="status" aria-live="polite"></div>
+<div id="undo-toast" role="status" aria-live="polite">
+  <span id="undo-msg">Removed</span>
+  <button id="btn-undo" title="Undo (Ctrl+Z)">Undo</button>
+</div>
+<div id="kbd-overlay" role="dialog" aria-modal="true" aria-label="Keyboard shortcuts">
+  <div id="kbd-panel">
+    <h2>Keyboard shortcuts & modes</h2>
+    <div class="kbd-row"><span class="kbd-desc">Apply edit (Edit Mode)</span><span class="kbd-keys">Comment only, no message</span></div>
+    <div class="kbd-row"><span class="kbd-desc">Ask question (Ask Mode)</span><span class="kbd-keys">Comment + Message, or Message only</span></div>
+    <div class="kbd-row"><span class="kbd-desc">Toggle annotate mode</span><span class="kbd-keys"><kbd>A</kbd></span></div>
+    <div class="kbd-row"><span class="kbd-desc">Send feedback</span><span class="kbd-keys"><kbd>Enter</kbd></span></div>
+    <div class="kbd-row"><span class="kbd-desc">Undo last removal</span><span class="kbd-keys"><kbd>Ctrl</kbd><kbd>Z</kbd></span></div>
+    <div class="kbd-row"><span class="kbd-desc">Download clean HTML</span><span class="kbd-keys"><kbd>D</kbd></span></div>
+    <div class="kbd-row"><span class="kbd-desc">Exit annotate / close</span><span class="kbd-keys"><kbd>Esc</kbd></span></div>
+    <button id="kbd-close">Close</button>
+  </div>
+</div>
+<script>
+console.log('[annotron] chrome.html script loaded');
+const TAG = 'annotron-sdk';
+const params = new URLSearchParams(location.search);
+const file = params.get('file') || '';
+document.getElementById('file-label').textContent = file || '(no file)';
+document.getElementById('file-label').title = file;
+const frame       = document.getElementById('artifact-frame');
+const btnAnnotate = document.getElementById('btn-annotate');
+const annotateLabel = document.getElementById('annotate-label');
+const btnDownload = document.getElementById('btn-download');
+const btnFinalize = document.getElementById('btn-finalize');
+const btnDone     = document.getElementById('btn-done');
+const doneOverlay = document.getElementById('done-overlay');
+const btnSend     = document.getElementById('btn-send');
+const btnAttach   = document.getElementById('btn-attach');
+const btnCancel   = document.getElementById('btn-cancel-agent');
+const fileInput   = document.getElementById('file-input');
+const attachPreviews = document.getElementById('attach-previews');
+const permRequests   = document.getElementById('perm-requests');
+const agentStatusEl  = document.getElementById('agent-status');
+const agentStatusText= document.getElementById('agent-status-text');
+const remoteApprove  = document.getElementById('remote-approve');
+const modelSelector  = document.getElementById('model-selector');
+const askModeToggle  = document.getElementById('ask-mode-toggle');
+const agentMetrics   = document.getElementById('agent-metrics');
+const metricModel    = document.getElementById('metric-model');
+const metricTokens   = document.getElementById('metric-tokens');
+const metricContext  = document.getElementById('metric-context');
+const metricTokensBar= document.getElementById('metric-tokens-bar');
+const metricContextBar=document.getElementById('metric-context-bar');
+const btnHelp     = document.getElementById('btn-help');
+const livePill    = document.getElementById('live-pill');
+const freeText    = document.getElementById('free-text');
+const toastEl     = document.getElementById('toast');
+const undoToast   = document.getElementById('undo-toast');
+const undoMsg     = document.getElementById('undo-msg');
+const btnUndo     = document.getElementById('btn-undo');
+const kbdOverlay  = document.getElementById('kbd-overlay');
+const kbdClose    = document.getElementById('kbd-close');
+const annList     = document.getElementById('annotations-list');
+const histList    = document.getElementById('history-list');
+const histResolved= document.getElementById('history-resolved');
+const convoWrap   = document.getElementById('conversation-wrap');
+const convoEl     = document.getElementById('conversation');
+const annBadge    = document.getElementById('ann-badge');
+const histBadge   = document.getElementById('hist-badge');
+const outlineSidebar = document.getElementById('outline-sidebar');
+const outlineList = document.getElementById('outline-list');
+const btnOutlineToggle = document.getElementById('btn-outline-toggle');
+const outlineTitle = document.getElementById('outline-title');
+let outlineCollapsed = false;
+const tabPanel = document.querySelector('.tab-panel.active');
+const convoWrapEl = document.getElementById('conversation-wrap');
+const composerEl = document.getElementById('composer');
+const resizeHandles = document.querySelectorAll('.resize-handle');
+// ── State ──────────────────────────────────────────────────────────────────
+let annotating = false;
+let sdkReady = false;
+let savedScroll = 0;
+let serializeResolvers = {};
+let serializeCounter = 0;
+let undoStack = [];
+let undoTimer = null;
+let toastTimer = null;
+let agentWorking = false;
+let selectedAnnotationId = null;
+let openReplyId = null;      // annotation id whose reply editor is open
+// Resolved annotations live in the History tab and are NOT highlighted in the
+// artifact — except the one the reviewer is currently focusing from History,
+// which we temporarily add back to the synced set so its location flashes.
+let focusedResolvedId = null;
+let lastRounds = [];         // last feedback rounds from the server (History timeline)
+let me = { name: 'You', detail: '', initials: 'YO', color: '#2741F1' };  // reviewer identity
+// Image staging (runtime only — never persisted to the sidecar).
+const composerImages = [];       // main composer
+const replyImgStore = {};        // saved-annotation id -> images staged in its reply box
+const noteImgStore = {};         // pending-new id -> images staged in its note box
+// annotations: saved annotation objects (with threads). Each:
+// { id, kind, selector, label, text, thread:[{role,message,timestamp}], createdAt, status }
+let annotations = [];
+// pendingNew: new comments committed locally but not yet sent to the agent.
+let pendingNew = [];
+// Agent model & metrics
+let selectedModel = localStorage.getItem('annotron-model') || '';
+let forceAskMode = localStorage.getItem('annotron-ask-mode') === 'true';
+let agentMetricsData = { model: '', tokensUsed: 0, tokensMax: 200000, contextUsed: 0, contextMax: 65536 };
+// Resizable panels state
+let maxTabPanelHeight = null;
+// ── SVG helpers ──────────────────────────────────────────────────────────
+const ICON = {
+  check: '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>',
+  resolve: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>',
+  reply: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21l3-.7a3 3 0 0 0 1.4-.8L18.5 8.4a2 2 0 0 0 0-2.8l-.1-.1a2 2 0 0 0-2.8 0L4.5 16.6a3 3 0 0 0-.8 1.4z"/></svg>',
+  retry: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
+  msg: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+  toast: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>',
+};
+// ── Model selector ─────────────────────────────────────────────────────────
+const infoModel = document.getElementById('info-model');
+const infoContext = document.getElementById('info-context');
+const infoTokens = document.getElementById('info-tokens');
+function updateInfoBar() {
+  // Update model display
+  const modelDisplay = selectedModel ?
+    (selectedModel.includes('opus') ? 'Opus 4.8' :
+     selectedModel.includes('sonnet') ? 'Sonnet 5' :
+     selectedModel.includes('haiku') ? 'Haiku 4.5' :
+     selectedModel) : 'Default';
+  infoModel.textContent = modelDisplay;
+  // Update context display
+  if (agentMetricsData.contextUsed > 0) {
+    const fmt = (n) => n > 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
+    infoContext.textContent = fmt(agentMetricsData.contextUsed) + '/' + fmt(agentMetricsData.contextMax);
+  }
+  // Update tokens display
+  if (agentMetricsData.tokensUsed > 0) {
+    const fmt = (n) => n > 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
+    infoTokens.textContent = fmt(agentMetricsData.tokensUsed) + '/' + fmt(agentMetricsData.tokensMax);
+  }
+}
+modelSelector.value = selectedModel;
+modelSelector.addEventListener('change', (e) => {
+  selectedModel = e.target.value;
+  localStorage.setItem('annotron-model', selectedModel);
+  updateInfoBar();
+});
+updateInfoBar();
+// ── Ask Mode toggle ────────────────────────────────────────────────────────
+askModeToggle.checked = forceAskMode;
+askModeToggle.addEventListener('change', (e) => {
+  forceAskMode = e.target.checked;
+  localStorage.setItem('annotron-ask-mode', String(forceAskMode));
+});
+// ── Metrics display ────────────────────────────────────────────────────────
+function updateMetricsDisplay(metrics) {
+  agentMetricsData = { ...agentMetricsData, ...metrics };
+  const { model, tokensUsed, tokensMax, contextUsed, contextMax } = agentMetricsData;
+  if (model) metricModel.textContent = model;
+  if (tokensUsed > 0) {
+    const fmt = (n) => n > 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
+    metricTokens.textContent = fmt(tokensUsed) + ' / ' + fmt(tokensMax);
+    metricTokensBar.style.width = Math.min(100, (tokensUsed / tokensMax) * 100) + '%';
+  }
+  if (contextUsed > 0) {
+    const fmt = (n) => n > 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
+    metricContext.textContent = fmt(contextUsed) + ' / ' + fmt(contextMax);
+    metricContextBar.style.width = Math.min(100, (contextUsed / contextMax) * 100) + '%';
+  }
+  agentMetrics.classList.remove('hidden');
+  updateInfoBar();
+}
+// ── Sidebar tabs ───────────────────────────────────────────────────────────
+document.querySelectorAll('.stab').forEach(btn => {
+  btn.addEventListener('click', () => switchTab(btn.dataset.tab));
+});
+function switchTab(tab) {
+  document.querySelectorAll('.stab').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  const newPanel = document.getElementById('tab-' + tab);
+  if (newPanel) newPanel.classList.add('active');
+  // Leaving History drops the temporary highlight on any focused resolved card.
+  if (tab !== 'history' && focusedResolvedId) {
+    focusedResolvedId = null;
+    syncAnnotationsToArtifact();
+  }
+  // Trigger auto-resize for the newly visible panel
+  setTimeout(() => {
+    const activePanel = document.querySelector('.tab-panel.active');
+    if (activePanel && maxTabPanelHeight) {
+      const scrollHeight = activePanel.scrollHeight;
+      const newHeight = Math.min(scrollHeight + 20, maxTabPanelHeight);
+      activePanel.style.maxHeight = newHeight + 'px';
+    }
+  }, 50);
+}
+// ── Help overlay ───────────────────────────────────────────────────────────
+function openHelp() { kbdOverlay.classList.add('open'); kbdClose.focus(); }
+function closeHelp() { kbdOverlay.classList.remove('open'); btnHelp.focus(); }
+btnHelp.addEventListener('click', openHelp);
+kbdClose.addEventListener('click', closeHelp);
+kbdOverlay.addEventListener('click', (e) => { if (e.target === kbdOverlay) closeHelp(); });
+// ── Toast ──────────────────────────────────────────────────────────────────
+function flashToast(msg) {
+  toastEl.innerHTML = ICON.toast + '<span></span>';
+  toastEl.lastElementChild.textContent = msg;
+  toastEl.classList.add('show');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => toastEl.classList.remove('show'), 1900);
+}
+// Native Cmd+C / Ctrl+C for copy - no floating button needed
+// ── Time formatting ──────────────────────────────────────────────────────
+function timeAgo(iso) {
+  if (!iso) return '';
+  const t = new Date(iso).getTime();
+  if (isNaN(t)) return '';
+  const s = Math.max(0, Math.round((Date.now() - t) / 1000));
+  if (s < 45) return 'just now';
+  const m = Math.round(s / 60);
+  if (m < 60) return m + 'm ago';
+  const h = Math.round(m / 60);
+  if (h < 24) return h + 'h ago';
+  const d = Math.round(h / 24);
+  if (d < 7) return d + 'd ago';
+  return new Date(iso).toLocaleDateString();
+}
+// ── Artifact load ──────────────────────────────────────────────────────────
+function loadArtifact() {
+  if (!file) return;
+  // Reset readiness here (before navigating) rather than on the iframe 'load'
+  // event: 'load' can fire *after* the SDK's sdk-ready message is processed,
+  // which would race sdkReady back to false and silently disable Finalize/Download.
+  sdkReady = false;
+  savedScroll = frame.contentWindow?.scrollY || 0;
+  frame.src = '/artifact?file=' + encodeURIComponent(file);
+}
+loadArtifact();
+// ── Outline sidebar ────────────────────────────────────────────────────────
+function renderOutlineWithHeadings(headings) {
+  if (!headings || headings.length === 0) {
+    outlineSidebar.classList.add('hidden');
+    return;
+  }
+  outlineSidebar.classList.remove('hidden');
+  outlineList.innerHTML = '';
+  headings.forEach(h => {
+    const item = document.createElement('div');
+    item.className = `outline-item level-${h.level}`;
+    item.textContent = h.text;
+    item.addEventListener('click', () => {
+      const el = frame.contentDocument?.getElementById(h.id);
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        updateActiveOutlineItem(h.id);
+      }
+    });
+    item.dataset.id = h.id;
+    outlineList.appendChild(item);
+  });
+  // Track scroll to highlight current outline item
+  frame.contentWindow?.addEventListener('scroll', () => {
+    if (!headings.length) return;
+    let current = headings[0].id;
+    for (const h of headings) {
+      const el = frame.contentDocument?.getElementById(h.id);
+      if (el && el.getBoundingClientRect().top < 100) current = h.id;
+      else break;
+    }
+    updateActiveOutlineItem(current);
+  });
+}
+function updateActiveOutlineItem(activeId) {
+  document.querySelectorAll('.outline-item').forEach(item => {
+    item.classList.toggle('active', item.dataset.id === activeId);
+  });
+}
+function toggleOutlineSidebar() {
+  outlineCollapsed = !outlineCollapsed;
+  outlineSidebar.classList.toggle('collapsed', outlineCollapsed);
+  btnOutlineToggle.textContent = outlineCollapsed ? '›' : '‹';
+  outlineTitle.classList.toggle('hidden', outlineCollapsed);
+  localStorage.setItem('outline-collapsed', outlineCollapsed);
+}
+// Restore collapsed state from localStorage
+if (localStorage.getItem('outline-collapsed') === 'true') {
+  outlineCollapsed = true;
+  outlineSidebar.classList.add('collapsed');
+  btnOutlineToggle.textContent = '›';
+}
+btnOutlineToggle.addEventListener('click', toggleOutlineSidebar);
+// Keyboard shortcut: Ctrl+L to toggle outline
+document.addEventListener('keydown', (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'l' && !annotating) {
+    e.preventDefault();
+    toggleOutlineSidebar();
+  }
+});
+// ── Resizable panels ───────────────────────────────────────────────────────
+function setupResizeHandles() {
+  const sidebar = document.getElementById('sidebar');
+  resizeHandles.forEach((handle) => {
+    let isResizing = false;
+    let startPos = 0;
+    handle.addEventListener('mousedown', (e) => {
+      isResizing = true;
+      startPos = handle.classList.contains('h-resize') ? e.clientX : e.clientY;
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = handle.classList.contains('h-resize') ? 'col-resize' : 'row-resize';
+      // Lock max height on first drag
+      if (handle.classList.contains('v-top') && !maxTabPanelHeight) {
+        const activePanel = sidebar.querySelector('.tab-panel.active');
+        if (activePanel) {
+          maxTabPanelHeight = activePanel.offsetHeight;
+        }
+      }
+    });
+    document.addEventListener('mousemove', (e) => {
+      if (!isResizing) return;
+      const sidebar = document.getElementById('sidebar');
+      if (handle.classList.contains('h-resize')) {
+        // Horizontal resize: change sidebar width
+        const delta = e.clientX - startPos;
+        const currentWidth = sidebar.offsetWidth;
+        const newWidth = Math.max(280, Math.min(600, currentWidth - delta));
+        sidebar.style.width = newWidth + 'px';
+        startPos = e.clientX;
+      } else if (handle.classList.contains('v-top')) {
+        const delta = e.clientY - startPos;
+        // Resize tab-panel: auto-fit content but max = locked height
+        const activePanel = sidebar.querySelector('.tab-panel.active');
+        if (activePanel && maxTabPanelHeight) {
+          const newHeight = Math.max(100, maxTabPanelHeight + delta);
+          activePanel.style.maxHeight = newHeight + 'px';
+          activePanel.style.minHeight = 'auto';  // Auto-fit to content, but respect max
+          startPos = e.clientY;
+        }
+      } else if (handle.classList.contains('v-bottom')) {
+        const delta = e.clientY - startPos;
+        // Resize conversation up/down
+        const currentHeight = convoWrapEl.offsetHeight;
+        const newHeight = Math.max(50, currentHeight + delta);
+        convoWrapEl.style.maxHeight = newHeight + 'px';
+        startPos = e.clientY;
+      }
+    });
+    document.addEventListener('mouseup', () => {
+      isResizing = false;
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+    });
+  });
+  // Auto-resize tab-panel when comments added (within max)
+  const observer = new MutationObserver(() => {
+    const activePanel = sidebar.querySelector('.tab-panel.active');
+    if (activePanel && maxTabPanelHeight) {
+      const scrollHeight = activePanel.scrollHeight;
+      const newHeight = Math.min(scrollHeight + 20, maxTabPanelHeight);
+      activePanel.style.maxHeight = newHeight + 'px';
+    }
+  });
+  observer.observe(sidebar, { childList: true, subtree: true });
+}
+setupResizeHandles();
+// ── postMessage bridge ─────────────────────────────────────────────────────
+window.addEventListener('message', (e) => {
+  const d = e.data;
+  if (!d || !d[TAG]) return;
+  if (d.type === 'sdk-ready') {
+    sdkReady = true;
+    frame.contentWindow.postMessage({ [TAG]: true, type: 'set-annotate', value: annotating }, '*');
+    syncAnnotationsToArtifact();
+    if (d.headings && d.headings.length > 0) {
+      renderOutlineWithHeadings(d.headings);
+    }
+    if (savedScroll) frame.contentWindow.scrollTo(0, savedScroll);
+    return;
+  }
+  if (d.type === 'element-selected') {
+    addPending({ kind: 'element', selector: d.selector, label: d.label, text: '', note: d.note || '' });
+    return;
+  }
+  if (d.type === 'text-selected') {
+    addPending({
+      kind: 'text', selector: d.selector, label: d.label, text: d.text, note: d.note || '',
+      textStart: d.textStart, textEnd: d.textEnd,
+      textPrefix: d.textPrefix || '', textSuffix: d.textSuffix || '',
+    });
+    return;
+  }
+  if (d.type === 'text-edit') {
+    // Direct inline edit of the selected run in the .md (no agent). The server
+    // re-verifies the text before writing; on success the file watcher reloads
+    // the iframe and re-renders automatically.
+    (async () => {
+      try {
+        const res = await fetch('/edit-text', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file: d.file || file, oldText: d.oldText, newText: d.newText, index: d.index }),
+        });
+        if (res.ok) { flashToast(d.newText === '' ? 'Deleted' : 'Saved to .md'); }
+        else { flashToast('Could not apply edit — try the Markdown pane'); }
+      } catch { flashToast('Edit failed — server not reachable'); }
+    })();
+    return;
+  }
+  if (d.type === 'annotation-selected') {
+    switchTab('annotations');
+    selectAnnotation(d.id);
+    return;
+  }
+  if (d.type === 'serialized') {
+    const res = serializeResolvers[d.reqId];
+    if (res) { res(d.html); delete serializeResolvers[d.reqId]; }
+    return;
+  }
+});
+function requestSerialize() {
+  return new Promise((resolve) => {
+    const reqId = ++serializeCounter;
+    serializeResolvers[reqId] = resolve;
+    frame.contentWindow.postMessage({ [TAG]: true, type: 'serialize', reqId }, '*');
+  });
+}
+// ── Annotate toggle ────────────────────────────────────────────────────────
+function setAnnotate(val) {
+  annotating = val;
+  btnAnnotate.classList.toggle('active', annotating);
+  btnAnnotate.setAttribute('aria-pressed', String(annotating));
+  annotateLabel.textContent = annotating ? 'Annotating' : 'Annotate';
+  frame.contentWindow?.postMessage({ [TAG]: true, type: 'set-annotate', value: annotating }, '*');
+}
+btnAnnotate.addEventListener('click', () => setAnnotate(!annotating));
+function jumpToElement(selector) {
+  if (!selector || !sdkReady) return;
+  frame.contentWindow?.postMessage({ [TAG]: true, type: 'jump-to-element', selector }, '*');
+}
+// All annotations known to the client, for lookups by id.
+function visibleAnnotations() { return annotations.concat(pendingNew); }
+// Annotations that get highlighted in the artifact: open ones + pending, plus
+// the single resolved annotation currently focused from the History tab.
+function syncedAnnotations() {
+  const open = annotations.filter(a => a.status !== 'resolved');
+  const focused = focusedResolvedId
+    ? annotations.filter(a => a.id === focusedResolvedId && a.status === 'resolved')
+    : [];
+  return open.concat(focused, pendingNew);
+}
+function syncAnnotationsToArtifact() {
+  if (!sdkReady) return;
+  frame.contentWindow?.postMessage({
+    [TAG]: true, type: 'set-annotations',
+    annotations: syncedAnnotations(), selectedId: selectedAnnotationId,
+  }, '*');
+}
+function selectAnnotation(id, shouldFocusArtifact = false) {
+  selectedAnnotationId = id;
+  const annotation = visibleAnnotations().find(item => item.id === id);
+  // Resolved cards are only clickable from History; focusing one flashes its
+  // location by temporarily adding it back to the highlighted set.
+  focusedResolvedId = (annotation && annotation.status === 'resolved') ? id : null;
+  renderAnnotations();
+  renderHistoryTab();
+  const card = document.querySelector(`.ann-card[data-id='${CSS.escape(id)}']`);
+  if (card) card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  if (shouldFocusArtifact && annotation) {
+    syncAnnotationsToArtifact();
+    frame.contentWindow?.postMessage({ [TAG]: true, type: 'focus-annotation', annotation }, '*');
+  } else {
+    syncAnnotationsToArtifact();
+  }
+}
+// ── Reviewer identity ───────────────────────────────────────────────────────
+const AVATAR_COLORS = ['#2741F1', '#4E11B2', '#8C78F3', '#D88689', '#1c8a4e', '#2fbf71'];
+function initialsOf(name) {
+  const parts = String(name || '').trim().split(/[\s@._-]+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return (parts[0] || 'YO').slice(0, 2).toUpperCase();
+}
+function colorOf(name) {
+  let h = 0;
+  for (const c of String(name || '')) h = (h * 31 + c.charCodeAt(0)) >>> 0;
+  return AVATAR_COLORS[h % AVATAR_COLORS.length];
+}
+async function loadWhoami() {
+  if (!file) return;
+  try {
+    const res = await fetch('/whoami?file=' + encodeURIComponent(file));
+    if (!res.ok) return;
+    const d = await res.json();
+    if (d && d.name) {
+      me = { name: d.name, detail: d.detail || '', initials: initialsOf(d.name), color: colorOf(d.name) };
+      renderAnnotations();
+    }
+  } catch {}
+}
+// ── Load / save annotations ────────────────────────────────────────────────
+async function loadAnnotations() {
+  if (!file) return;
+  try {
+    const res = await fetch('/annotations?file=' + encodeURIComponent(file));
+    if (!res.ok) return;
+    const data = await res.json();
+    annotations = data.annotations || [];
+    lastRounds = data.rounds || [];
+    renderAnnotations();
+    renderHistoryTab();
+  } catch {}
+}
+async function saveAnnotations() {
+  if (!file) return;
+  try {
+    await fetch('/annotations', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file, annotations }),
+    });
+  } catch {}
+}
+// ── New pending comment (note captured by the inline composer in the artifact) ─
+function addPending(item) {
+  item.id = 'pending_' + Date.now() + '_' + Math.random().toString(36).slice(2, 6);
+  pendingNew.push(item);
+  selectedAnnotationId = item.id;
+  switchTab('annotations');
+  renderAnnotations();
+  flashToast('Comment added — Send feedback to notify the agent');
+}
+// ── Render annotations list ────────────────────────────────────────────────
+function renderAnnotations() {
+  annList.innerHTML = '';
+  // Resolved comments are archived to the History tab; only open comments and
+  // not-yet-sent pending ones belong in the Annotations list.
+  const open = annotations.filter(a => a.status !== 'resolved');
+  const total = open.length + pendingNew.length;
+  annBadge.textContent = total;
+  annBadge.style.display = total > 0 ? '' : 'none';
+  if (total === 0) {
+    annList.appendChild(buildEmptyState(
+      'No open comments',
+      'Select any text in the document, then choose <b>Comment</b> from the popover or right-click menu. Resolved comments move to <b>History</b>.'
+    ));
+  }
+  // Banner to retry every comment the agent couldn't apply.
+  const failed = open.filter(a => a.applyFailed);
+  if (failed.length) annList.appendChild(buildRetryBanner(failed));
+  pendingNew.forEach(item => annList.appendChild(buildAnnotationCard(item, true)));
+  open.forEach(ann => annList.appendChild(buildAnnotationCard(ann, false)));
+  syncAnnotationsToArtifact();
+}
+function buildRetryBanner(failed) {
+  const bar = document.createElement('div');
+  bar.className = 'retry-banner';
+  const txt = document.createElement('div');
+  txt.className = 'rb-text';
+  txt.textContent = `${failed.length} comment${failed.length !== 1 ? 's' : ''} couldn't be applied`;
+  const btn = document.createElement('button');
+  btn.className = 'rb-btn';
+  btn.innerHTML = ICON.retry + 'Retry all';
+  btn.disabled = agentWorking;
+  btn.addEventListener('click', () => retryAnnotations(failed));
+  bar.append(txt, btn);
+  return bar;
+}
+// The reviewer's instruction lives as the last human message in the thread.
+function lastHumanNote(ann) {
+  const humans = (ann.thread || []).filter(m => m.role === 'human');
+  return humans.length ? humans[humans.length - 1].message : (ann.note || ann.label || '');
+}
+// Re-send failed comments to the agent for another apply attempt.
+async function retryAnnotations(anns) {
+  const list = (anns || []).filter(a => a && a.applyFailed);
+  if (!list.length || agentWorking) return;
+  const items = list.map(a => ({
+    id: a.id, kind: a.kind, selector: a.selector || null, label: a.label || null, text: a.text || null,
+    textStart: a.textStart ?? null, textEnd: a.textEnd ?? null,
+    textPrefix: a.textPrefix || null, textSuffix: a.textSuffix || null,
+    note: lastHumanNote(a), retry: true, images: [],
+  }));
+  // Optimistically clear the failed flag so the UI reflects the in-flight retry.
+  list.forEach(a => { a.applyFailed = false; });
+  renderAnnotations();
+  try {
+    const res = await fetch('/feedback', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file, items, message: '', images: [] }),
+    });
+    if (res.ok) { flashToast(`Retrying ${items.length} comment${items.length !== 1 ? 's' : ''}…`); setAgentWorking(true); }
+    else list.forEach(a => { a.applyFailed = true; });
+  } catch { list.forEach(a => { a.applyFailed = true; }); renderAnnotations(); }
+}
+function buildEmptyState(title, subHtml) {
+  const wrap = document.createElement('div');
+  wrap.className = 'empty-state';
+  wrap.innerHTML = `<div class="es-icon">${ICON.msg}</div><div class="es-title">${title}</div><div class="es-sub">${subHtml}</div>`;
+  return wrap;
+}
+function buildAnnotationCard(ann, isPending) {
+  const card = document.createElement('div');
+  const failed = !isPending && ann.applyFailed && ann.status !== 'resolved';
+  card.className = 'ann-card' + (isPending ? ' pending' : '') +
+    (ann.status === 'resolved' ? ' resolved' : '') +
+    (failed ? ' failed' : '') +
+    (ann.id === selectedAnnotationId ? ' selected' : '');
+  card.dataset.id = ann.id;
+  // Header
+  const authorName = isPending ? me.name : (ann.author || me.name);
+  const authorDetail = isPending ? me.detail : (ann.authorDetail || me.detail);
+  const head = document.createElement('div');
+  head.className = 'ann-head';
+  const avatar = document.createElement('span');
+  avatar.className = 'ann-avatar';
+  avatar.style.background = colorOf(authorName);
+  avatar.textContent = initialsOf(authorName);
+  if (authorDetail) avatar.title = authorDetail;
+  const who = document.createElement('div');
+  who.className = 'ann-who';
+  const authorEl = document.createElement('div');
+  authorEl.className = 'ann-author';
+  authorEl.textContent = authorName;
+  if (authorDetail) authorEl.title = authorDetail;
+  const timeEl = document.createElement('div');
+  timeEl.className = 'ann-time';
+  timeEl.textContent = isPending
+    ? 'pending send'
+    : (ann.status === 'resolved' && ann.resolvedAt ? 'Resolved ' + timeAgo(ann.resolvedAt) : timeAgo(ann.createdAt));
+  who.append(authorEl, timeEl);
+  head.append(avatar, who);
+  if (!isPending && ann.status === 'resolved') {
+    const rb = document.createElement('span');
+    rb.className = 'ann-badge-resolved';
+    rb.innerHTML = ICON.check + 'Resolved';
+    head.appendChild(rb);
+  } else if (failed) {
+    const fb = document.createElement('span');
+    fb.className = 'ann-badge-failed';
+    fb.innerHTML = ICON.retry + 'Not applied';
+    head.appendChild(fb);
+  } else {
+    const kt = document.createElement('span');
+    kt.className = 'ann-kind-tag';
+    kt.textContent = ann.kind || 'note';
+    head.appendChild(kt);
+  }
+  const rm = document.createElement('button');
+  rm.className = 'ann-remove'; rm.textContent = '×'; rm.title = 'Remove';
+  rm.addEventListener('click', (e) => { e.stopPropagation(); isPending ? removePending(ann.id) : removeAnnotation(ann.id); });
+  head.appendChild(rm);
+  card.appendChild(head);
+  // Quote
+  const quoteText = ann.text || ann.label || '';
+  if (quoteText) {
+    const q = document.createElement('div');
+    q.className = 'ann-quote';
+    q.textContent = '"' + quoteText + '"';
+    card.appendChild(q);
+  }
+  // Body / thread
+  const thread = document.createElement('div');
+  thread.className = 'ann-thread';
+  if (isPending) {
+    const body = document.createElement('div');
+    body.className = 'tmsg';
+    body.textContent = ann.note || '';
+    thread.appendChild(body);
+    // Optional image attachments that ride along when Send feedback fires.
+    const previews = document.createElement('div');
+    previews.className = 'attach-previews mini';
+    previews.style.marginTop = '8px';
+    const store = (noteImgStore[ann.id] = noteImgStore[ann.id] || []);
+    const attach = createImageAttach(previews, store);
+    const imgBtn = document.createElement('button');
+    imgBtn.className = 'mini-attach'; imgBtn.style.marginTop = '8px';
+    imgBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8.5" cy="8.5" r="1.6"/><path d="M21 15l-5-5L5 21"/></svg>Image';
+    const imgInput = document.createElement('input');
+    imgInput.type = 'file'; imgInput.accept = 'image/*'; imgInput.multiple = true; imgInput.hidden = true;
+    imgBtn.addEventListener('click', (e) => { e.stopPropagation(); imgInput.click(); });
+    imgInput.addEventListener('change', () => { for (const f of imgInput.files) attach.add(f); imgInput.value = ''; });
+    thread.append(previews, imgBtn, imgInput);
+  } else if (ann.thread && ann.thread.length) {
+    ann.thread.forEach(msg => {
+      const m = document.createElement('div');
+      m.className = 'tmsg ' + (msg.role === 'agent' ? 'agent' : 'human');
+      if (msg.role === 'agent') {
+        const who2 = document.createElement('div'); who2.className = 'tmsg-who'; who2.textContent = 'Agent';
+        const b = document.createElement('div'); b.textContent = msg.message;
+        m.append(who2, b, makeCopyBtn(msg.message, 'tmsg-copy'));
+      } else {
+        m.textContent = msg.message;
+      }
+      thread.appendChild(m);
+    });
+  }
+  card.appendChild(thread);
+  // Actions (saved annotations only)
+  if (!isPending) {
+    const actions = document.createElement('div');
+    actions.className = 'ann-actions';
+    const resolve = document.createElement('button');
+    resolve.className = 'ann-action';
+    resolve.innerHTML = ICON.resolve + (ann.status === 'resolved' ? 'Reopen' : 'Resolve');
+    resolve.addEventListener('click', (e) => { e.stopPropagation(); toggleResolve(ann.id); });
+    const reply = document.createElement('button');
+    reply.className = 'ann-action';
+    reply.innerHTML = ICON.reply + 'Reply';
+    reply.addEventListener('click', (e) => { e.stopPropagation(); openReplyId = (openReplyId === ann.id ? null : ann.id); renderAnnotations(); });
+    actions.append(resolve, reply);
+    if (failed) {
+      const retry = document.createElement('button');
+      retry.className = 'ann-action retry';
+      retry.innerHTML = ICON.retry + 'Retry';
+      retry.disabled = agentWorking;
+      retry.addEventListener('click', (e) => { e.stopPropagation(); retryAnnotations([ann]); });
+      actions.append(retry);
+    }
+    card.appendChild(actions);
+    if (openReplyId === ann.id) card.appendChild(buildReplyEditor(ann));
+  }
+  // Jump to element in the artifact when the card is clicked
+  if (ann.selector) {
+    card.addEventListener('click', () => selectAnnotation(ann.id, true));
+  }
+  return card;
+}
+function buildReplyEditor(ann) {
+  const wrap = document.createElement('div');
+  wrap.className = 'ann-editor';
+  const previews = document.createElement('div');
+  previews.className = 'attach-previews mini';
+  const store = (replyImgStore[ann.id] = replyImgStore[ann.id] || []);
+  const attach = createImageAttach(previews, store);
+  const ta = document.createElement('textarea');
+  ta.placeholder = 'Reply to the agent…';
+  ta.addEventListener('paste', (e) => attach.handlePaste(e));
+  ta.addEventListener('click', (e) => e.stopPropagation());
+  ta.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); sendAnnotationReply(ann, ta); }
+  });
+  const row = document.createElement('div');
+  row.className = 'ann-editor-row';
+  const imgBtn = document.createElement('button');
+  imgBtn.className = 'mini-attach';
+  imgBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8.5" cy="8.5" r="1.6"/><path d="M21 15l-5-5L5 21"/></svg>Image';
+  const imgInput = document.createElement('input');
+  imgInput.type = 'file'; imgInput.accept = 'image/*'; imgInput.multiple = true; imgInput.hidden = true;
+  imgBtn.addEventListener('click', (e) => { e.stopPropagation(); imgInput.click(); });
+  imgInput.addEventListener('change', () => { for (const f of imgInput.files) attach.add(f); imgInput.value = ''; });
+  const send = document.createElement('button');
+  send.className = 'cc-submit'; send.textContent = 'Send reply';
+  send.addEventListener('click', (e) => { e.stopPropagation(); sendAnnotationReply(ann, ta); });
+  row.append(imgBtn, imgInput, send);
+  wrap.append(previews, ta, row);
+  wrap.addEventListener('click', (e) => e.stopPropagation());
+  setTimeout(() => ta.focus(), 20);
+  return wrap;
+}
+// Send a reply to a specific saved annotation → wakes the agent
+async function sendAnnotationReply(ann, textarea) {
+  const note = textarea.value.trim();
+  const staged = replyImgStore[ann.id] || [];
+  if (!note && !staged.length) return;
+  textarea.disabled = true;
+  try {
+    const images = await uploadImages(staged);
+    ann.thread = ann.thread || [];
+    const shown = note || `(${images.length} image${images.length !== 1 ? 's' : ''} attached)`;
+    ann.thread.push({ role: 'human', message: shown, timestamp: new Date().toISOString() });
+    delete replyImgStore[ann.id];
+    openReplyId = null;
+    renderAnnotations();
+    await fetch('/feedback', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        file,
+        items: [{ id: ann.id, kind: ann.kind, selector: ann.selector, label: ann.label, text: ann.text, note }],
+        message: '', images,
+      }),
+    });
+    setAgentWorking(true);
+  } finally { textarea.disabled = false; }
+}
+function toggleResolve(id) {
+  const ann = annotations.find(a => a.id === id);
+  if (!ann) return;
+  ann.status = ann.status === 'resolved' ? 'open' : 'resolved';
+  if (ann.status === 'resolved') ann.resolvedAt = new Date().toISOString();
+  else delete ann.resolvedAt;
+  // A resolved comment leaves the artifact highlights and the Annotations list;
+  // reopening it (or resolving) clears any lingering temporary focus.
+  if (focusedResolvedId === id) focusedResolvedId = null;
+  if (ann.status === 'open' && selectedAnnotationId === id) switchTab('annotations');
+  renderAnnotations();
+  renderHistoryTab();
+  saveAnnotations();
+  flashToast(ann.status === 'resolved' ? 'Comment resolved — moved to History' : 'Comment reopened');
+}
+// ── Render history ─────────────────────────────────────────────────────────
+const HIST_DOT = { open:'#8C78F3', comment:'#2741F1', agent:'#4E11B2', resolve:'#2fbf71', download:'#D88689' };
+// The History tab holds two things: resolved comments (as cards, clickable to
+// flash their location) and the feedback-round timeline.
+function renderHistoryTab() {
+  const resolved = annotations.filter(a => a.status === 'resolved');
+  const rounds = lastRounds || [];
+  const total = resolved.length + rounds.length;
+  histBadge.textContent = total;
+  histBadge.style.display = total > 0 ? '' : 'none';
+  // Resolved comments section
+  histResolved.innerHTML = '';
+  if (resolved.length) {
+    const label = document.createElement('div');
+    label.className = 'hist-section-label';
+    label.textContent = `Resolved · ${resolved.length}`;
+    histResolved.appendChild(label);
+    resolved.forEach(ann => histResolved.appendChild(buildAnnotationCard(ann, false)));
+  }
+  renderRounds(resolved.length, rounds);
+}
+function renderRounds(resolvedCount, rounds) {
+  histList.innerHTML = '';
+  if (!rounds.length) {
+    if (!resolvedCount) {
+      histList.appendChild(buildEmptyState('No history yet', 'Resolved comments, edits, and downloads will show up here as you work.'));
+    }
+    return;
+  }
+  rounds.slice().reverse().forEach(round => {
+    const row = document.createElement('div');
+    row.className = 'hist-row';
+    const rail = document.createElement('div');
+    rail.className = 'hist-rail';
+    const dot = document.createElement('span');
+    dot.className = 'hist-dot';
+    const color = HIST_DOT[round.kind] || '#8C78F3';
+    dot.style.background = color;
+    dot.style.boxShadow = '0 0 0 3px ' + color + '22';
+    const line = document.createElement('span'); line.className = 'hist-line';
+    rail.append(dot, line);
+    const body = document.createElement('div');
+    const cnt = round.annotationCount != null ? `${round.annotationCount} annotation${round.annotationCount !== 1 ? 's' : ''}` : '';
+    const text = round.agentSummary || round.text || [round.id, cnt].filter(Boolean).join(' · ') || 'Round';
+    body.innerHTML = `<div class="hist-text"></div><div class="hist-time">${round.timestamp ? new Date(round.timestamp).toLocaleString() : ''}</div>`;
+    body.querySelector('.hist-text').textContent = text;
+    row.append(rail, body);
+    histList.appendChild(row);
+  });
+}
+// ── Pending items ──────────────────────────────────────────────────────────
+function removePending(id) {
+  const idx = pendingNew.findIndex(c => c.id === id);
+  if (idx === -1) return;
+  const [item] = pendingNew.splice(idx, 1);
+  if (selectedAnnotationId === id) selectedAnnotationId = null;
+  undoStack.push({ type: 'pending', item, index: idx });
+  if (undoStack.length > 10) undoStack.shift();
+  renderAnnotations();
+  showUndoToast(item.label || item.kind);
+}
+function removeAnnotation(id) {
+  const idx = annotations.findIndex(a => a.id === id);
+  if (idx === -1) return;
+  const [ann] = annotations.splice(idx, 1);
+  if (selectedAnnotationId === id) selectedAnnotationId = null;
+  if (focusedResolvedId === id) focusedResolvedId = null;
+  undoStack.push({ type: 'saved', item: ann, index: idx });
+  if (undoStack.length > 10) undoStack.shift();
+  renderAnnotations();
+  renderHistoryTab();
+  saveAnnotations();
+  showUndoToast(ann.label || ann.kind);
+}
+// ── Undo ───────────────────────────────────────────────────────────────────
+function showUndoToast(label) {
+  undoMsg.textContent = `Removed: ${label}`;
+  undoToast.classList.add('visible');
+  clearTimeout(undoTimer);
+  undoTimer = setTimeout(() => undoToast.classList.remove('visible'), 4000);
+}
+function hideUndoToast() { clearTimeout(undoTimer); undoToast.classList.remove('visible'); }
+function undoRemove() {
+  if (!undoStack.length) return;
+  const { type, item, index } = undoStack.pop();
+  if (type === 'pending') pendingNew.splice(index, 0, item);
+  else { annotations.splice(index, 0, item); saveAnnotations(); }
+  selectedAnnotationId = item.id;
+  renderAnnotations();
+  renderHistoryTab();
+  hideUndoToast();
+}
+btnUndo.addEventListener('click', undoRemove);
+// ── Image attachments (reusable) ────────────────────────────────────────────
+function fileToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(r.result);
+    r.onerror = reject;
+    r.readAsDataURL(blob);
+  });
+}
+async function uploadImages(imgs) {
+  const out = [];
+  for (const img of imgs) {
+    try {
+      const res = await fetch('/upload', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ file, name: img.name, dataUrl: img.dataUrl }),
+      });
+      if (res.ok) { const d = await res.json(); out.push({ name: d.name, path: d.path }); }
+    } catch {}
+  }
+  return out;
+}
+function createImageAttach(previewEl, imgs) {
+  function render() {
+    previewEl.innerHTML = '';
+    imgs.forEach(img => {
+      const thumb = document.createElement('div');
+      thumb.className = 'attach-thumb'; thumb.title = img.name;
+      const im = document.createElement('img'); im.src = img.dataUrl; im.alt = img.name;
+      const rm = document.createElement('button');
+      rm.className = 'attach-remove'; rm.textContent = '×'; rm.title = 'Remove image';
+      rm.addEventListener('click', (e) => { e.stopPropagation(); const i = imgs.indexOf(img); if (i >= 0) imgs.splice(i, 1); render(); });
+      thumb.append(im, rm); previewEl.appendChild(thumb);
+    });
+  }
+  async function add(blob) {
+    if (!blob || !blob.type || !blob.type.startsWith('image/')) return;
+    const dataUrl = await fileToDataUrl(blob);
+    imgs.push({ id: 'img_' + Date.now() + '_' + Math.random().toString(36).slice(2, 6), name: blob.name || ('pasted.' + (blob.type.split('/')[1] || 'png')), dataUrl });
+    render();
+  }
+  function handlePaste(e) {
+    const items = e.clipboardData?.items || [];
+    let handled = false;
+    for (const it of items) {
+      if (it.type && it.type.startsWith('image/')) { const blob = it.getAsFile(); if (blob) { add(blob); handled = true; } }
+    }
+    if (handled) e.preventDefault();
+  }
+  render();
+  return { add, handlePaste, render, upload: () => uploadImages(imgs), clear() { imgs.length = 0; render(); }, count: () => imgs.length };
+}
+const composerAttach = createImageAttach(attachPreviews, composerImages);
+btnAttach.addEventListener('click', () => fileInput.click());
+fileInput.addEventListener('change', () => { for (const f of fileInput.files) composerAttach.add(f); fileInput.value = ''; });
+freeText.addEventListener('paste', (e) => composerAttach.handlePaste(e));
+// ── Agent working state ─────────────────────────────────────────────────────
+let workingStartMs = 0, workingTimer = null;
+function fmtElapsed(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0');
+}
+function setAgentWorking(on) {
+  agentWorking = on;
+  btnCancel.style.display = on ? '' : 'none';
+  btnCancel.disabled = false;
+  btnSend.disabled = on;
+  clearInterval(workingTimer); workingTimer = null;
+  if (on) {
+    // Keep counting from the first "working" tick of a round, not every re-entry.
+    if (!workingStartMs) workingStartMs = Date.now();
+    setStatus('working', 'Working… ' + fmtElapsed(Date.now() - workingStartMs));
+    workingTimer = setInterval(() => {
+      // Don't clobber a "Needs permission" message; resume once it's cleared.
+      if (agentWorking && agentStatusEl.classList.contains('working')) {
+        agentStatusText.textContent = 'Working… ' + fmtElapsed(Date.now() - workingStartMs);
+      }
+    }, 1000);
+  } else {
+    workingStartMs = 0;
+    setStatus('idle', 'Idle');
+  }
+}
+function setStatus(state, text) {
+  agentStatusEl.classList.remove('working', 'idle', 'needs-perm');
+  agentStatusEl.classList.add(state);
+  agentStatusText.textContent = text;
+}
+// ── Remote permission approval ──────────────────────────────────────────────
+remoteApprove.addEventListener('change', () => {
+  fetch('/permission/mode', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ file, enabled: remoteApprove.checked }),
+  }).catch(() => {});
+});
+function renderPermCard({ requestId, tool, summary }) {
+  if (permRequests.querySelector(`[data-req="${requestId}"]`)) return;
+  const card = document.createElement('div');
+  card.className = 'perm-card'; card.dataset.req = requestId;
+  const head = document.createElement('div'); head.className = 'perm-head'; head.textContent = '⚠ Permission needed';
+  const toolEl = document.createElement('div'); toolEl.className = 'perm-tool'; toolEl.textContent = summary || tool;
+  const actions = document.createElement('div'); actions.className = 'perm-actions';
+  const allow = document.createElement('button'); allow.className = 'perm-allow'; allow.textContent = 'Allow';
+  const always = document.createElement('button'); always.className = 'perm-always'; always.textContent = 'Allow always';
+  always.title = `Allow "${tool}" for the rest of this session without asking`;
+  const deny = document.createElement('button'); deny.className = 'perm-deny'; deny.textContent = 'Deny';
+  allow.addEventListener('click', () => decidePermission(requestId, 'allow', false));
+  always.addEventListener('click', () => decidePermission(requestId, 'allow', true));
+  deny.addEventListener('click', () => decidePermission(requestId, 'deny', false));
+  actions.append(allow, always, deny);
+  card.append(head, toolEl, actions);
+  permRequests.appendChild(card);
+  setStatus('needs-perm', 'Needs your permission');
+}
+function removePermCard(requestId) {
+  const card = permRequests.querySelector(`[data-req="${requestId}"]`);
+  if (card) card.remove();
+  if (!permRequests.children.length) setStatus(agentWorking ? 'working' : 'idle', agentWorking ? 'Working…' : 'Idle');
+}
+function decidePermission(requestId, decision, always) {
+  const card = permRequests.querySelector(`[data-req="${requestId}"]`);
+  if (card) card.querySelectorAll('button').forEach(b => b.disabled = true);
+  fetch('/permission/decision', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ file, requestId, decision, always }),
+  }).catch(() => {});
+  removePermCard(requestId);
+}
+// ── Agent activity / conversation ──────────────────────────────────────────
+function showWorking() {
+  let el = convoEl.querySelector('[data-working]');
+  if (el) return el;
+  el = document.createElement('div');
+  el.className = 'msg agent'; el.setAttribute('data-working', '1');
+  const lbl = document.createElement('div'); lbl.className = 'msg-label'; lbl.textContent = 'Agent';
+  const steps = document.createElement('div'); steps.className = 'work-steps';
+  const dots = document.createElement('div'); dots.className = 'thinking-dots'; dots.innerHTML = '<span></span><span></span><span></span>';
+  el.append(lbl, steps, dots);
+  convoEl.appendChild(el);
+  convoWrap.scrollTop = convoWrap.scrollHeight;
+  return el;
+}
+function addWorkStep(step, done) {
+  if (!step) return;
+  const el = showWorking();
+  const steps = el.querySelector('.work-steps');
+  const prev = steps.querySelector('.work-step:not(.done)');
+  if (prev) prev.classList.add('done');
+  const line = document.createElement('div');
+  line.className = 'work-step' + (done ? ' done' : '');
+  line.textContent = step;
+  steps.appendChild(line);
+  convoWrap.scrollTop = convoWrap.scrollHeight;
+}
+function hideWorking() { convoEl.querySelectorAll('[data-working]').forEach(el => el.remove()); }
+async function cancelAgent() {
+  if (!agentWorking) return;
+  btnCancel.disabled = true;
+  addWorkStep('Cancelling…', false);
+  try {
+    await fetch('/cancel', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file }) });
+  } catch {}
+}
+btnCancel.addEventListener('click', cancelAgent);
+// ── Send feedback ──────────────────────────────────────────────────────────
+async function sendFeedback() {
+  const message = freeText.value.trim();
+  const composerImgCount = composerAttach.count();
+  const noteImgCount = pendingNew.reduce((n, c) => n + (noteImgStore[c.id]?.length || 0), 0);
+  if (!pendingNew.length && !message && !composerImgCount && !noteImgCount) return;
+  btnSend.disabled = true;
+  try {
+    const items = await Promise.all(pendingNew.map(async c => ({
+      id: null, kind: c.kind, selector: c.selector || null, label: c.label || null, text: c.text || null,
+      textStart: c.textStart ?? null, textEnd: c.textEnd ?? null,
+      textPrefix: c.textPrefix || null, textSuffix: c.textSuffix || null,
+      note: c.note || null,
+      images: noteImgStore[c.id] ? await uploadImages(noteImgStore[c.id]) : [],
+    })));
+    const images = await composerAttach.upload();
+    const totalImgs = images.length + items.reduce((n, it) => n + it.images.length, 0);
+    const res = await fetch('/feedback', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file, items, message, images, model: selectedModel || null, askMode: forceAskMode }),
+    });
+    if (res.ok) {
+      pendingNew.forEach(c => { delete noteImgStore[c.id]; });
+      pendingNew = [];
+      composerAttach.clear();
+      selectedAnnotationId = null;
+      freeText.value = '';
+      undoStack = [];
+      hideUndoToast();
+      await loadAnnotations();
+      if (message || totalImgs) {
+        const suffix = totalImgs ? `  📎 ${totalImgs} image${totalImgs !== 1 ? 's' : ''}` : '';
+        addConvoMsg('human', (message || '(images attached)') + suffix);
+      }
+      flashToast('Feedback sent to agent');
+      setAgentWorking(true);
+    }
+  } finally {
+    if (!agentWorking) btnSend.disabled = false;
+  }
+}
+btnSend.addEventListener('click', sendFeedback);
+freeText.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); sendFeedback(); }
+});
+// ── Copy helpers ────────────────────────────────────────────────────────────
+function fallbackCopy(text, done) {
+  const ta = document.createElement('textarea');
+  ta.value = text; ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
+  document.body.appendChild(ta); ta.select();
+  try { document.execCommand('copy'); if (done) done(); } catch {}
+  ta.remove();
+}
+function copyText(text, btn) {
+  const flash = () => { if (!btn) return; const orig = btn.textContent; btn.textContent = 'Copied'; setTimeout(() => { btn.textContent = orig; }, 1200); };
+  if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(flash).catch(() => fallbackCopy(text, flash));
+  else fallbackCopy(text, flash);
+}
+function makeCopyBtn(text, cls) {
+  const b = document.createElement('button');
+  b.className = cls; b.textContent = 'Copy'; b.title = 'Copy message';
+  b.addEventListener('click', (e) => { e.stopPropagation(); copyText(text, b); });
+  return b;
+}
+// ── Conversation (general agent messages) ──────────────────────────────────
+function addConvoMsg(role, text) {
+  const el = document.createElement('div');
+  el.className = 'msg ' + role;
+  const label = document.createElement('div'); label.className = 'msg-label'; label.textContent = role === 'human' ? me.name : 'Agent';
+  const body = document.createElement('div'); body.textContent = text;
+  el.append(label, body);
+  if (role === 'agent') el.append(makeCopyBtn(text, 'msg-copy'));
+  convoEl.appendChild(el);
+  convoWrap.scrollTop = convoWrap.scrollHeight;
+}
+// ── Download ───────────────────────────────────────────────────────────────
+async function doDownload() {
+  if (!sdkReady) { flashToast('Preview is still loading — try again in a moment.'); return; }
+  btnDownload.disabled = true;
+  try {
+    const html = await requestSerialize();
+    const blob = new Blob([html], { type: 'text/html' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = file.split('/').pop() || 'artifact.html';
+    a.click();
+    URL.revokeObjectURL(a.href);
+    flashToast('Downloaded a clean copy');
+  } finally { btnDownload.disabled = false; }
+}
+btnDownload.addEventListener('click', doDownload);
+// ── Finalize ───────────────────────────────────────────────────────────────
+btnFinalize.addEventListener('click', async () => {
+  if (!sdkReady) { flashToast('Preview is still loading — try again in a moment.'); return; }
+  if (!confirm('Write the current rendered artifact to disk? This overwrites the file.')) return;
+  btnFinalize.disabled = true;
+  try {
+    const html = await requestSerialize();
+    const res = await fetch('/finalize', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file, html }),
+    });
+    if (res.ok) { addConvoMsg('human', 'Finalized — result written to disk.'); flashToast('Finalized to disk'); }
+    else alert('Finalize failed: ' + res.statusText);
+  } finally { btnFinalize.disabled = false; }
+});
+// ── Done: finish the review and shut the server down ────────────────────────
+let sessionDone = false;
+btnDone.addEventListener('click', async () => {
+  const warn = isMd && mdDirty
+    ? 'You have unsaved Markdown changes. Save them, finish the review, and shut down the server?'
+    : 'Finish the review and shut down the annotron server?';
+  if (!confirm(warn)) return;
+  btnDone.disabled = true;
+  try {
+    if (isMd && mdDirty) await saveMd();
+    // End the agent's poll loop cleanly, give it a moment to receive the signal
+    // and exit, THEN stop the server (else /stop could kill the server before
+    // the agent's long-poll response flushes and it never logs "Done").
+    await fetch('/done', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ file }),
+    }).catch(() => {});
+    await new Promise(r => setTimeout(r, 600));
+    await fetch('/stop', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}),
+    }).catch(() => {});
+  } finally {
+    finishSession();
+  }
+});
+function finishSession() {
+  sessionDone = true;                 // stop SSE from trying to reconnect
+  doneOverlay.classList.add('show');
+  livePill.classList.remove('live');
+  livePill.textContent = 'Stopped';
+}
+// ── SSE ────────────────────────────────────────────────────────────────────
+function connectSSE() {
+  if (!file) return;
+  const es = new EventSource('/events?file=' + encodeURIComponent(file));
+  es.addEventListener('reload', () => { savedScroll = frame.contentWindow?.scrollY || 0; loadArtifact(); loadSource(); });
+  es.addEventListener('agent-thinking', () => { setAgentWorking(true); showWorking(); });
+  es.addEventListener('agent-progress', (e) => { try { const d = JSON.parse(e.data); addWorkStep(d.step, d.done); } catch {} });
+  es.addEventListener('agent-progress-done', () => {
+    const steps = convoEl.querySelector('[data-working] .work-steps');
+    const last = steps && steps.querySelector('.work-step:not(.done)');
+    if (last) last.classList.add('done');
+  });
+  es.addEventListener('agent-status', (e) => {
+    try {
+      const t = JSON.parse(e.data).type || '';
+      if (t === 'permission_prompt') setStatus('needs-perm', 'Needs your permission');
+      else if (t === 'idle' || t === 'idle_prompt') { if (!agentWorking) setStatus('idle', 'Idle'); }
+    } catch {}
+  });
+  es.addEventListener('agent-metrics', (e) => {
+    try { updateMetricsDisplay(JSON.parse(e.data)); } catch {}
+  });
+  es.addEventListener('permission-request', (e) => { try { renderPermCard(JSON.parse(e.data)); } catch {} });
+  es.addEventListener('permission-resolved', (e) => { try { removePermCard(JSON.parse(e.data).requestId); } catch {} });
+  es.addEventListener('permission-mode', (e) => { try { remoteApprove.checked = !!JSON.parse(e.data).enabled; } catch {} });
+  es.addEventListener('agent-cancelled', () => {
+    hideWorking(); setAgentWorking(false);
+    addConvoMsg('agent', '⛔ Cancellation requested — the agent will stop at its next checkpoint.');
+    const last = convoEl.lastElementChild; if (last) last.classList.add('cancelled');
+  });
+  es.addEventListener('agent-reply', async (e) => {
+    hideWorking(); setAgentWorking(false);
+    try {
+      const d = JSON.parse(e.data);
+      const msg = d.message || e.data;
+      if (d.annotationId) {
+        // The agent acted on this comment → server marked it resolved; reload so
+        // it moves to the History tab, then reveal it wherever it now lives.
+        await loadAnnotations();
+        const card = document.querySelector(`.ann-card[data-id="${CSS.escape(d.annotationId)}"]`);
+        if (card) card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        flashToast(d.failed ? "Couldn't apply — Retry available" : 'Agent replied — comment resolved to History');
+      } else {
+        addConvoMsg('agent', msg);
+        flashToast('Agent replied');
+      }
+    } catch { addConvoMsg('agent', e.data); }
+  });
+  es.addEventListener('session-done', () => { es.close(); finishSession(); });
+  es.onopen = () => { livePill.classList.add('live'); livePill.title = 'Live'; };
+  es.onerror = () => {
+    if (sessionDone) { es.close(); return; }   // review finished — don't reconnect
+    livePill.classList.remove('live'); livePill.title = 'Disconnected — reconnecting…';
+    es.close(); setTimeout(() => { if (!sessionDone) connectSSE(); }, 3000);
+  };
+}
+connectSSE();
+// ── Keyboard shortcuts ─────────────────────────────────────────────────────
+document.addEventListener('keydown', (e) => {
+  const inInput = ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName);
+  const ctrl = e.ctrlKey || e.metaKey;
+  const helpOpen = kbdOverlay.classList.contains('open');
+  if (e.key === 'Escape') {
+    if (helpOpen) { closeHelp(); return; }
+    if (annotating) { setAnnotate(false); return; }
+  }
+  if (ctrl && (e.key === 's' || e.key === 'S')) { if (isMd) { e.preventDefault(); saveMd(); } return; }
+  if (ctrl && e.key === 'z' && !e.shiftKey) { if (undoStack.length) { e.preventDefault(); undoRemove(); } return; }
+  if (ctrl && e.key === 'Enter') { e.preventDefault(); sendFeedback(); return; }
+  if (!inInput && !ctrl) {
+    if (e.key === 'a' || e.key === 'A') { e.preventDefault(); setAnnotate(!annotating); return; }
+    if (e.key === 'd' || e.key === 'D') { e.preventDefault(); doDownload(); return; }
+    if (e.key === '?') { e.preventDefault(); helpOpen ? closeHelp() : openHelp(); return; }
+  }
+});
+// ── Markdown mode ────────────────────────────────────────────────────────────
+// When the artifact is a .md source, annotron renders it to HTML (with merslim
+// diagrams) for review, and exposes an editable Markdown pane + Save button so
+// the user can sync edits back to the .md (the source of truth).
+const isMd = /\.md$/i.test(file);
+const mdEditor   = document.getElementById('md-editor');
+const mdTextarea = document.getElementById('md-textarea');
+const mdStatus   = document.getElementById('mde-status');
+const btnMdSource = document.getElementById('btn-md-source');
+const btnSaveMd   = document.getElementById('btn-save-md');
+let mdDirty = false, mdLoaded = false;
+function setMdStatus(kind) {
+  mdStatus.className = 'mde-status' + (kind ? ' ' + kind : '');
+  mdStatus.textContent = kind === 'dirty' ? 'Unsaved changes' : (kind === 'saved' ? 'Saved' : '');
+}
+async function loadSource(force) {
+  if (!isMd) return;
+  if (mdDirty && !force) return;   // never clobber unsaved edits
+  try {
+    const res = await fetch('/source?file=' + encodeURIComponent(file));
+    if (!res.ok) return;
+    const d = await res.json();
+    mdTextarea.value = d.markdown || '';
+    mdLoaded = true; mdDirty = false; setMdStatus('');
+  } catch {}
+}
+function toggleMdEditor() {
+  const show = mdEditor.hasAttribute('hidden');
+  if (show) {
+    mdEditor.removeAttribute('hidden');
+    btnMdSource.classList.add('active');
+    if (!mdLoaded) loadSource();
+    setTimeout(() => mdTextarea.focus(), 30);
+  } else {
+    mdEditor.setAttribute('hidden', '');
+    btnMdSource.classList.remove('active');
+  }
+}
+async function saveMd() {
+  if (!isMd) return;
+  btnSaveMd.disabled = true;
+  try {
+    const res = await fetch('/save-md', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file, markdown: mdTextarea.value }),
+    });
+    if (res.ok) { mdDirty = false; setMdStatus('saved'); flashToast('Saved to .md — re-rendering preview'); }
+    else { const e = await res.json().catch(() => ({})); flashToast('Save failed: ' + (e.error || res.statusText)); }
+  } catch { flashToast('Save failed'); }
+  finally { btnSaveMd.disabled = false; }
+}
+if (isMd) {
+  btnFinalize.style.display = 'none';   // Finalize would overwrite .md with HTML
+  btnMdSource.style.display = '';
+  btnSaveMd.style.display = '';
+  btnMdSource.addEventListener('click', toggleMdEditor);
+  btnSaveMd.addEventListener('click', saveMd);
+  mdTextarea.addEventListener('input', () => { mdDirty = true; setMdStatus('dirty'); });
+  mdTextarea.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')) { e.preventDefault(); saveMd(); }
+  });
+  loadSource();   // keep the textarea in sync even while hidden, so Save is safe
+}
+// ── Init ───────────────────────────────────────────────────────────────────
+loadWhoami();
+loadAnnotations();
+</script>
+</body>
+</html>