1 files changed, 98 insertions, 4 deletions

diff --git a/vrsite/assets/style.css.tmpl b/vrsite/assets/style.css.tmpl
index a808203..f57e454 100644
--- a/vrsite/assets/style.css.tmpl
+++ b/vrsite/assets/style.css.tmpl
@@ -73,7 +73,44 @@ nav > header {
 }
 nav > header a { color: var(--fg); }
 nav .brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-nav .atrev { margin: 0 0 8px; }
+
+/* ── the current change ────────────────────────────────────────
+   Everything on screen is read at one change: the tree, the code, the
+   coverage, the notes, and anything you write. It says so, always. */
+.changebar {
+  margin-bottom: 10px; padding: 7px 8px;
+  border: 1px solid var(--border); border-left: 3px solid var(--accent);
+  border-radius: 6px; background: var(--bg);
+}
+.changebar.away { border-left-color: var(--note); }
+.changebar .cid { display: flex; align-items: baseline; gap: 6px; }
+.changebar .lbl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
+.changebar .cid code { font-size: 13px; font-weight: 600; color: var(--fg); }
+.changebar .cid a code { color: var(--accent); }
+.changebar .flags { color: var(--note); font-size: 10px; font-style: italic; margin-left: auto; }
+.changebar .desc {
+  margin: 3px 0 0; font-size: 11.5px; color: var(--muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.changebar .counts { margin: 5px 0 0; font-size: 11px; color: var(--muted); }
+.changebar .counts b { color: var(--fg); font-weight: 600; }
+.changebar .away { color: var(--note); }
+.changebar .scope { display: flex; gap: 0; margin-top: 7px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
+.changebar .scope a {
+  flex: 1; text-align: center; padding: 2px 4px;
+  font-size: 11px; color: var(--muted); text-decoration: none;
+}
+.changebar .scope a:hover { background: var(--hover); color: var(--fg); }
+.changebar .scope a.on { background: var(--hover); color: var(--fg); font-weight: 600; }
+.changebar .revjump { margin-top: 6px; }
+.changebar .revjump input { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
+.changebar .back { margin: 6px 0 0; font-size: 11px; }
+
+/* a note written at another change: it pins to line numbers that have moved */
+.note.away { border-style: dashed; opacity: 0.82; }
+.note.away:hover { opacity: 1; }
+.atchg.away { color: var(--note); }
+.atchg.away code { color: inherit; }
 .find, .filters input, .filters select, .notform input, .notform textarea, .jjform input {
   background: var(--bg); color: var(--fg);
   border: 1px solid var(--border); border-radius: 5px;
@@ -183,6 +220,8 @@ ol.code li {
   white-space: pre;
   min-height: 1lh;
   padding-right: 16px;
+  /* a #L42 jump must clear the sticky header, or the line lands under it */
+  scroll-margin-top: 76px;
 }
 ol.code li::before {
   content: counter(ln);
@@ -222,8 +261,62 @@ aside summary { cursor: pointer; color: var(--muted); }
 .note footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; }
 .note footer code { color: var(--muted); }
 .note .model { opacity: 0.85; }
+.note .conv { margin-left: auto; }
 .notecols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 14px; }
 
+/* ── conversation ──────────────────────────────────────────── */
+.convpage { padding: 0 16px 40vh; max-width: 1100px; }
+.turn {
+  display: grid; grid-template-columns: 12ch 8ch minmax(0, 1fr);
+  gap: 0 10px; align-items: baseline;
+  padding: 2px 0 2px 8px; border-left: 2px solid transparent;
+}
+.turn .role {
+  color: var(--muted); font-size: 11px; text-align: right;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.turn time { color: var(--ln); font-size: 11px; font-variant-numeric: tabular-nums; }
+.turn p { margin: 0; line-height: 1.5; white-space: pre-wrap; }
+.turn .what {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.t-say { padding: 8px 0 8px 8px; }
+.t-user { border-left-color: var(--accent); }
+.t-user .role, .t-user p { color: var(--fg); }
+.t-assistant .role { color: var(--cov); }
+.t-thinking p { color: var(--muted); font-style: italic; }
+.t-tool .role { color: var(--note); }
+.t-result .what { color: var(--muted); }
+.t-result.bad .what { color: var(--note); }
+.t-vr { border-left-color: var(--cov); background: color-mix(in srgb, var(--cov) 7%, transparent); }
+.t-vr .role { color: var(--cov); font-weight: 600; }
+/* A note is what you came to the conversation to find, so it breaks the run
+   of log lines: the note color's rail, a tinted band, a card instead of a
+   line. scroll-margin clears the sticky header — the anchored one is
+   scrolled to on load. */
+.t-note {
+  padding: 8px 0 8px 8px;
+  border-left-color: var(--note);
+  background: color-mix(in srgb, var(--note) 7%, transparent);
+}
+.t-note .role { color: var(--note); font-weight: 600; }
+.t-note .role::before { content: "◆ "; font-size: 9px; vertical-align: 1px; }
+.t-note .note { max-width: 640px; margin: 0; scroll-margin-top: 96px; }
+.t-note.here { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.t-note.here .note { border-color: var(--accent); border-left-color: var(--accent); }
+/* the whole card is the way back to the code; the links inside still work */
+.notewrap { cursor: pointer; }
+.notewrap:hover .note, .notewrap:focus-visible .note {
+  border-color: var(--accent); background: var(--hover);
+}
+.notewrap:focus-visible { outline: none; }
+.notewrap[data-href] .note::after {
+  content: "open in source →"; display: block;
+  margin-top: 6px; color: var(--accent); font-size: 11px; opacity: 0;
+}
+.notewrap:hover .note::after, .notewrap:focus-visible .note::after { opacity: 1; }
+
 /* ── live activity ─────────────────────────────────────────── */
 .activity { margin-bottom: 10px; }
 .actlist { display: flex; flex-direction: column; gap: 3px; }
@@ -279,9 +372,10 @@ aside summary { cursor: pointer; color: var(--muted); }
 .asidehead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
 aside .meta { font-size: 11px; }
 
-/* selection while picking lines to comment on */
-ol.code li.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); }
-ol.code li.sel::before { color: var(--accent); }
+/* lines picked to comment on, and lines you arrived at from a note */
+ol.code li.sel, ol.code li.focus { background: color-mix(in srgb, var(--accent) 16%, transparent); }
+ol.code li.sel::before, ol.code li.focus::before { color: var(--accent); }
+ol.code li.focus { box-shadow: inset 3px 0 var(--accent); }
 
 /* ── jj ────────────────────────────────────────────────────── */
 .jjform { display: flex; gap: 6px; align-items: center; padding: 10px 0; }