semantic-code-review 0.24.2__py3-none-any.whl

semantic_code_review/viewer/assets/viewer.css

@@ -0,0 +1,1202 @@
+/* Semantic Code Review — viewer styles. */
+
+:root {
+  color-scheme: dark light;
+  --bg: #0d1117;
+  --bg-alt: #161b22;
+  --bg-panel: #21262d;
+  --fg: #c9d1d9;
+  --fg-muted: #8b949e;
+  --fg-dim: #6e7681;
+  --border: #30363d;
+  --accent: #58a6ff;
+  --ok: #3fb950;
+  --warn: #d29922;
+  --err: #f85149;
+  --crit: #f85149;
+  --major: #d29922;
+  --minor: #8b949e;
+  --info: #58a6ff;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #ffffff;
+    --bg-alt: #f6f8fa;
+    --bg-panel: #eaeef2;
+    --fg: #1f2328;
+    --fg-muted: #59636e;
+    --fg-dim: #848d97;
+    --border: #d0d7de;
+    --accent: #0969da;
+    --ok: #1a7f37;
+  }
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 14px; line-height: 1.5;
+}
+
+/* --- Top bar -------------------------------------------------------------- */
+.pr-bar {
+  position: sticky; top: 0; z-index: 50;
+  background: var(--bg-alt); border-bottom: 1px solid var(--border);
+  padding: 10px 16px; display: flex; gap: 14px; align-items: center;
+  flex-wrap: wrap;
+}
+.pr-title { font-weight: 600; margin-right: auto; }
+.pr-title .pr-meta { color: var(--fg-muted); margin-left: 8px; font-weight: 400; font-size: 12px; }
+.fold-slider { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+.fold-slider button {
+  background: transparent; color: var(--fg-muted); border: none;
+  padding: 4px 10px; font-size: 12px; cursor: pointer;
+}
+.fold-slider button.active { background: var(--accent); color: #fff; }
+.fold-slider button:hover:not(.active) { background: var(--bg-panel); color: var(--fg); }
+.help-btn, .reset-btn {
+  background: transparent; border: 1px solid var(--border); color: var(--fg-muted);
+  padding: 4px 10px; font-size: 12px; border-radius: 6px; cursor: pointer;
+}
+
+/* --- Layout: sidebar + main ---------------------------------------------- */
+.layout {
+  display: flex;
+  align-items: flex-start;
+}
+.group-sidebar {
+  flex: 0 0 220px;
+  position: sticky;
+  top: 56px;                      /* just below the sticky .pr-bar */
+  align-self: flex-start;
+  max-height: calc(100vh - 56px);
+  overflow-y: auto;
+  padding: 12px 10px 12px 16px;
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+}
+.group-sidebar.empty { display: none; }
+.group-sidebar #app + & { /* never triggered, but documents: sidebar left of #app */ }
+.layout > main#app { flex: 1 1 auto; min-width: 0; }
+
+.group-sidebar-header h3,
+.group-axis-header h3 {
+  margin: 0 0 8px 2px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fg-muted);
+  font-weight: 600;
+}
+
+/* Each grouping axis lives in its own stacked section so reviewers
+ * can scan every axis at once without flipping a tab. Themes sits
+ * above Files; the "Show all" button sits above both axes and
+ * clears whichever pill is active. */
+.group-axis { margin-bottom: 14px; }
+.group-axis:last-child { margin-bottom: 0; }
+.group-axis-header h3 { margin-top: 6px; }
+.group-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  margin-bottom: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--fg);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+}
+.group-btn:hover { background: var(--bg-alt); border-color: var(--border); }
+.group-btn.active {
+  background: var(--bg-panel);
+  border-color: var(--accent);
+  color: var(--fg);
+}
+.group-btn-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.group-btn-count {
+  flex: 0 0 auto;
+  background: var(--bg-alt);
+  color: var(--fg-muted);
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  min-width: 20px;
+  text-align: center;
+}
+.group-btn.active .group-btn-count {
+  background: var(--accent);
+  color: var(--bg);
+}
+/* Comment-thread tally on Files-axis pills: unresolved/total. Sits
+ * next to the hunk-count badge. Muted when every thread is resolved;
+ * amber when there's outstanding discussion to chase. */
+.group-btn-comments {
+  flex: 0 0 auto;
+  background: var(--bg-alt);
+  color: var(--fg-muted);
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  min-width: 28px;
+  text-align: center;
+}
+.group-btn-comments.has-unresolved {
+  background: transparent;
+  color: var(--warn);
+  border: 1px solid var(--warn);
+  padding: 0 5px;
+}
+.group-btn.active .group-btn-comments {
+  background: var(--bg);
+  color: var(--fg);
+}
+.group-btn-all {
+  margin-bottom: 10px;
+  color: var(--fg-muted);
+  font-style: italic;
+}
+
+/* Symbols axis: nested class ▸ method tree. The toggle sits in a fixed
+ * column to the left of each pill so leaves (toggle hidden) stay aligned
+ * with their parents; children indent under the row. */
+.group-tree-node { margin-bottom: 0; }
+.group-tree-row { display: flex; align-items: center; gap: 2px; }
+.group-tree-row .group-btn { margin-bottom: 4px; }
+.group-tree-toggle {
+  flex: 0 0 auto;
+  width: 14px;
+  align-self: stretch;
+  margin-bottom: 4px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--fg-muted);
+  font-size: 9px;
+  line-height: 1;
+  cursor: pointer;
+}
+.group-tree-toggle:hover { color: var(--fg); }
+.group-tree-toggle-leaf { cursor: default; visibility: hidden; }
+.group-tree-children { padding-left: 12px; }
+
+/* Subtle tell for hunks that no semantic group claimed, visible in
+ * the unfiltered view only. Left border gets a dotted treatment so
+ * the eye can pick them out at a glance without them feeling alarming. */
+.hunk.ungrouped {
+  border-left-style: dotted !important;
+}
+
+/* --- PR overview panel ---------------------------------------------------- */
+.pr-panel {
+  margin: 12px 16px; background: var(--bg-alt); border: 1px solid var(--border);
+  border-radius: 8px; padding: 12px 16px;
+}
+.pr-panel h2 { margin: 0 0 6px 0; font-size: 14px; font-weight: 600; }
+.pr-panel .themes span {
+  display: inline-block; background: var(--bg-panel); color: var(--fg-muted);
+  padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-right: 4px;
+}
+
+/* --- Files ---------------------------------------------------------------- */
+.file {
+  margin: 12px 16px; background: var(--bg-alt); border: 1px solid var(--border);
+  border-radius: 8px; overflow: hidden;
+}
+.file-header {
+  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
+  background: var(--bg-panel); user-select: none;
+}
+.file.folded .file-header { background: var(--bg-alt); }
+.chevron {
+  width: 14px; height: 14px;
+  flex-shrink: 0;
+  color: var(--fg-muted);
+  transform-origin: 50% 50%;
+  transform: rotate(0deg);
+  transition: transform 140ms cubic-bezier(0.4, 0.0, 0.2, 1), color 140ms ease;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.chevron.open { transform: rotate(90deg); }
+.file-header:hover .chevron,
+.hunk-header:hover .chevron,
+.segment:hover .chevron { color: var(--fg); }
+.file-path {
+  font-family: var(--mono); font-weight: 600;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+.file-summary { color: var(--fg-muted); flex: 1; font-size: 13px; min-width: 0; }
+.file-meta { display: flex; gap: 6px; font-size: 12px; color: var(--fg-muted); }
+.file-meta .adds { color: var(--ok); }
+.file-meta .dels { color: var(--err); }
+
+.file-body { padding: 12px 14px; }
+.file-overview {
+  font-size: 12px; color: var(--fg-muted);
+  padding: 6px 8px; background: var(--bg); border-radius: 4px; margin-bottom: 12px;
+}
+.file-overview .label { color: var(--fg-dim); margin-right: 4px; }
+
+/* --- Hunks ---------------------------------------------------------------- */
+.hunk {
+  margin: 12px 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
+  background: var(--bg);
+}
+.hunk.folded { border-left-width: 3px; }
+.hunk-header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    "chev  pos     meta"
+    ".     intent  intent";
+  column-gap: 10px;
+  row-gap: 4px;
+  padding: 8px 12px;
+  cursor: pointer;
+  background: var(--bg-panel); user-select: none;
+}
+.hunk-header > .chevron { grid-area: chev; align-self: start; margin-top: 2px; }
+.hunk-pos {
+  grid-area: pos;
+  font-family: var(--mono); color: var(--fg-dim); font-size: 12px;
+  align-self: start;
+}
+.hunk-intent {
+  grid-area: intent;
+  color: var(--fg); font-size: 13px;
+  align-self: start;
+}
+.hunk-intent.empty { color: var(--fg-dim); font-style: italic; }
+.hunk-intent.pending {
+  color: var(--fg-dim); font-style: italic;
+  animation: scr-pulse 1.4s ease-in-out infinite;
+}
+.hunk-intent.queued { color: var(--fg-dim); font-style: italic; opacity: 0.7; }
+@keyframes scr-pulse {
+  0%, 100% { opacity: 0.55; }
+  50%      { opacity: 1; }
+}
+
+/* Progress strip — shown only while augmentation is streaming. */
+.scr-progress {
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 6px 14px;
+  background: var(--bg-alt); border-bottom: 1px solid var(--border);
+  font-size: 12px; color: var(--fg-muted);
+}
+.scr-progress.hidden { display: none; }
+.scr-progress-summary { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
+.scr-progress-overview {
+  display: inline-block; padding: 1px 8px; border-radius: 10px;
+  border: 1px solid var(--border); background: var(--bg);
+}
+.scr-progress-overview[data-state="pending"] { color: var(--fg-muted); }
+.scr-progress-overview[data-state="running"] {
+  color: var(--accent); border-color: var(--accent);
+  animation: scr-pulse 1.4s ease-in-out infinite;
+}
+.scr-progress-overview[data-state="ok"]     { color: var(--ok);  border-color: var(--ok); }
+.scr-progress-overview[data-state="failed"] { color: var(--err); border-color: var(--err); }
+.scr-progress-hunks { color: var(--fg); font-weight: 500; }
+.scr-progress-detail { color: var(--fg-dim); }
+.scr-progress-grid {
+  display: flex; flex-wrap: wrap; gap: 3px;
+  padding-top: 2px;
+}
+.scr-progress-grid .sq {
+  width: 10px; height: 10px; border-radius: 2px;
+  background: var(--bg); border: 1px solid var(--border);
+  cursor: pointer;
+}
+.scr-progress-grid .sq[data-state="queued"]  { background: var(--bg); }
+.scr-progress-grid .sq[data-state="running"] {
+  background: var(--accent); border-color: var(--accent);
+  animation: scr-pulse 1.4s ease-in-out infinite;
+}
+.scr-progress-grid .sq[data-state="ok"]     { background: var(--ok);  border-color: var(--ok); }
+.scr-progress-grid .sq[data-state="failed"] { background: var(--err); border-color: var(--err); }
+.scr-progress-grid .sq:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.hunk-meta { grid-area: meta; display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
+/* Subtle 3-star confidence indicator at the top-right of the hunk
+ * header. One filled star = low (the LLM hedged); three = high. The
+ * old `c=NN` chip was loud and numeric; stars read at a glance and
+ * stay out of the way. */
+.hunk-confidence {
+  display: inline-flex;
+  gap: 1px;
+  font-size: 10px;
+  color: var(--fg-muted);
+  letter-spacing: 0.5px;
+}
+.hunk-confidence .conf-star.on { color: var(--fg-muted); }
+.hunk-confidence[data-level="1"] .conf-star.on { color: var(--err); }
+.hunk-confidence[data-level="1"] { opacity: 1; }
+
+.context-icon {
+  font-size: 13px; color: var(--accent); cursor: help;
+}
+
+/* --- Segments ------------------------------------------------------------- */
+.seg-list { padding: 8px 12px; background: var(--bg); }
+.segment {
+  margin: 6px 0; padding: 6px 10px; background: var(--bg-alt);
+  border-left: 3px solid var(--border); border-radius: 3px;
+  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
+}
+.segment .chevron { margin-top: 1px; }
+.segment-range {
+  font-family: var(--mono); color: var(--fg-dim); font-size: 12px; min-width: 90px;
+  flex-shrink: 0;
+}
+.segment-intent { flex: 1; font-size: 13px; }
+.segment-intent.empty { color: var(--fg-dim); font-style: italic; }
+
+.context-note, .refs {
+  padding: 6px 12px; background: var(--bg-alt); border-top: 1px solid var(--border);
+  font-size: 12px; color: var(--fg-muted);
+}
+.context-note { border-left: 3px solid var(--accent); padding-left: 16px; }
+.refs a.ref-link {
+  display: inline-block; padding: 1px 6px; margin: 1px 4px 1px 0;
+  border: 1px solid var(--border); border-radius: 4px;
+  font-family: var(--mono); font-size: 11px;
+  color: var(--accent); text-decoration: none; background: var(--bg);
+}
+.refs a.ref-link:hover { background: var(--bg-panel); border-color: var(--accent); }
+.refs .ref-reason { color: var(--fg-muted); font-size: 11px; }
+
+/* --- Smells --------------------------------------------------------------- */
+.smell {
+  display: inline-block; font-size: 11px; padding: 2px 8px;
+  border-radius: 10px; color: #fff; margin-left: 4px; cursor: help;
+  white-space: nowrap;
+}
+.smell.sev-info    { background: #3b82f680; }
+.smell.sev-minor   { background: #64748b80; }
+.smell.sev-major   { background: #d2992280; }
+.smell.sev-critical{ background: #f8514980; }
+
+/* --- Diff grid -----------------------------------------------------------
+ * Two halves side by side, each its own horizontal-scroll container and
+ * its own 2-column grid (lineno + content). One shared scrollbar per
+ * side, zero mid-hunk scrollbars.
+ *
+ * Vertical alignment across halves: code rows use a uniform line-height
+ * and an enforced min-height on every cell, so every code row on both
+ * sides is exactly one line tall. Annotation rows break that symmetry
+ * (prose wraps); the JS inserts an invisible placeholder row on the
+ * opposite side and syncs its height to the real annotation via a
+ * ResizeObserver. Subgrid would do this for free but requires explicit
+ * outer row tracks, which we don't know at CSS compile time.
+ */
+.diff {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.5;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--bg);
+}
+.diff .half {
+  display: grid;
+  /* `max-content` as the track *min* sizes the content column to the widest
+   * line, so every row's grid area — and thus its background tint — is as
+   * wide as the longest line and stays painted when a long sibling scrolls
+   * into view. `1fr` as the max lets the track grow to fill the column when
+   * the content is narrower than the viewport. A plain `minmax(0, 1fr)`
+   * floors the track at 0, so the widest line overflows its own area while
+   * shorter rows' tint stops at the viewport edge. */
+  grid-template-columns: 3.5em minmax(max-content, 1fr);
+  overflow-x: auto;
+  min-width: 0;
+  /* overflow-y is implicitly clipped (non-visible) when x is auto.
+   * The annotation arrow's upward bleed stays inside the same scroll
+   * container as its anchor row, so nothing should actually overflow
+   * vertically in practice. */
+}
+
+/* Each `.row` is a real grid box spanning both of `.half`'s columns,
+ * and uses `subgrid` so its two cells land in `.half`'s column tracks
+ * (matching widths across every row). Making the row an actual box
+ * rather than `display: contents` is required for `position: sticky`
+ * on `.cell-lineno` to work reliably in Chromium — sticky grandchildren
+ * of a display:contents parent have quirks that make them scroll along
+ * with content. */
+.diff .row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+
+.diff .cell {
+  padding: 0 8px;
+  white-space: pre;
+  min-width: 0;
+  /* Force one line-height per cell so empty cells on the opposite side
+   * of a pure-insert/delete row still occupy a full row, keeping the
+   * two halves vertically aligned line-for-line. */
+  min-height: calc(1.5em);
+  line-height: 1.5;
+}
+.diff .cell-lineno {
+  /* Pin line numbers to the left of their half so they stay visible
+   * when the content cells pan horizontally. z-index keeps them above
+   * the scrolling code; the background eliminates bleed-through. */
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  color: var(--fg-dim);
+  text-align: right;
+  user-select: none;
+  background: var(--bg-alt);
+  border-right: 1px solid var(--border);
+  padding: 0 6px;
+}
+.diff .cell-lineno.empty { background: transparent; border-right-color: transparent; }
+.diff .cell-content {
+  /* Width (and thus the row-kind background tint) comes from the content
+   * column track — `minmax(max-content, 1fr)` on `.half` above — so every
+   * cell stretches to the widest line. No per-cell `min-width` needed. */
+  /* Reserve a left gutter for the fold chevron so it can float outside
+   * the text flow without displacing the code. Every line — chevron or
+   * not — pays the same gutter so indentation reads consistently.
+   * `position: relative` makes the chevron's absolute positioning
+   * anchor here rather than on the scroll container. */
+  position: relative;
+  padding-left: 20px;
+}
+.diff .cell-content code { background: transparent !important; padding: 0 !important; }
+.diff .cell-content.empty { background: transparent; min-width: 0; }
+
+/* Per-row kind tints */
+.diff .row-ctx .cell-content { background: var(--bg); }
+.diff .row-ins .cell-content-new { background: rgba(63, 185, 80, 0.16); }
+.diff .row-del .cell-content-old { background: rgba(248, 81, 73, 0.16); }
+.diff .row-pair .cell-content-old { background: rgba(248, 81, 73, 0.16); }
+.diff .row-pair .cell-content-new { background: rgba(63, 185, 80, 0.16); }
+
+/* Intra-line sub-diff: the changed block within a replacement, over the
+ * light whole-line row tint. A subtle fill plus a coloured underline marks
+ * it. Underline (not a full ring) because a block that crosses highlight.js
+ * token spans is rendered as several adjacent `.char-chg` spans — a ring
+ * would draw a vertical edge at every join, breaking up joined text; an
+ * underline stays continuous across them. Applies to any changed row
+ * (pair, or a del/ins line inside a multi-line replacement block), so the
+ * side determines the colour. */
+.diff .cell-content-old .char-chg {
+  background: rgba(248, 81, 73, 0.13);
+  border-bottom: 2px solid rgba(248, 81, 73, 0.7);
+}
+.diff .cell-content-new .char-chg {
+  background: rgba(63, 185, 80, 0.13);
+  border-bottom: 2px solid rgba(63, 185, 80, 0.7);
+}
+
+/* Symbol-focus search highlight: every occurrence of the focused symbol's
+ * name, painted search-style. Amber reads on both themes and over the
+ * green/red row + char-chg tints; the ring keeps it legible regardless. */
+.diff .cell-content code .symbol-hit {
+  background: rgba(255, 196, 0, 0.4);
+  box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.7);
+  border-radius: 2px;
+}
+
+/* Dim the empty placeholder on the opposite side of an ins/del */
+.diff .row-ins .cell-content-old.empty,
+.diff .row-del .cell-content-new.empty {
+  background: rgba(110, 118, 129, 0.05);
+}
+
+/* Indent-based fold control ---------------------------------------------- */
+/* The chevron floats in the left gutter of .cell-content — it does NOT
+ * take text-flow space, so lines with chevrons read at the same indent
+ * as their siblings without. Without this, fold-header lines appeared
+ * ~2 chars more indented than their bodies and the nesting structure
+ * was visually illegible. */
+.diff .fold-chev {
+  position: absolute;
+  left: 4px;
+  top: 2px;
+  width: 12px; height: 12px;
+  color: var(--fg-dim);
+  cursor: pointer;
+  outline: none;
+}
+.diff .fold-chev:hover { color: var(--accent); }
+.diff .fold-chev:focus-visible {
+  outline: 1px dotted var(--accent);
+  outline-offset: 1px;
+}
+
+/* Annotation rows — emacs-flycheck-style boxed callouts linked to a line
+ * in the diff via an L-shaped arrow. The arrow emerges from the first
+ * non-whitespace column of the anchor line, drops down, and turns right
+ * into the box. Two-line height by default; box overflow clipped. */
+.diff .cell-annotation {
+  /* An annotation lives in its half's grid and spans the two columns
+   * (gutter + content) of that half. Same rule on both sides — the
+   * annotation's parent determines which half it lands in. */
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 0 8px 6px;
+  color: var(--fg-muted);
+  background: transparent;
+  overflow: visible;            /* arrow top can extend above the cell */
+}
+
+/* Placeholder row on the opposite half, mirroring an annotation's
+ * height via JS-applied inline height so the two halves stay aligned
+ * even though only one side is populated. */
+.diff .row-placeholder {
+  grid-column: 1 / -1;
+  visibility: hidden;
+}
+.diff .annot-arrow {
+  flex-shrink: 0;
+  /* margin-left + margin-top set inline by JS so the arrow's vertical
+   * segment lands at the character midpoint of the anchor line and the
+   * arrow's top reaches the line's vertical midline. */
+  color: var(--accent);
+  pointer-events: none;
+}
+.diff .annot-box {
+  flex: 0 1 auto;
+  padding: 4px 10px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 4px;
+  font-size: 13px;
+  line-height: 1.4;
+  font-style: italic;
+  color: var(--fg);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-weight: 400;
+  white-space: normal;
+  max-width: 64ch;
+  /* Fold summaries clamp to ~3 lines; line-notes and comments get to
+   * wrap freely. The annotations module applies the actual per-variant
+   * sizing inline via `layout.maxHeight`; this CSS default is only a
+   * pre-JS fallback. */
+  max-height: 5em;
+  overflow: hidden;
+}
+.diff .annot-box.missing {
+  color: var(--fg-dim);
+  border-left-color: var(--fg-dim);
+}
+.diff .annot-box.pending {
+  color: var(--fg-muted);
+  border-left-color: var(--accent);
+  font-style: italic;
+  animation: scr-pulse 1.4s ease-in-out infinite;
+}
+.diff .annot-box.failed {
+  color: var(--err);
+  border-left-color: var(--err);
+  cursor: pointer;
+}
+
+/* Reviewer comment variant (amber/warn border so it stands out from the
+ * blue LLM fold descriptions). */
+.diff .annot-comment .annot-arrow { color: var(--warn); }
+.diff .annot-comment .annot-box {
+  border-left-color: var(--warn);
+  font-style: normal;
+  max-height: none;         /* comments can wrap freely */
+}
+
+/* Line-note variant: same palette as fold summaries, but the body is
+ * often several sentences and should not be clipped. */
+.diff .annot-note .annot-box {
+  max-height: none;
+}
+.comment-body { white-space: pre-wrap; font-size: 100%; }
+
+/* Header strip on ingested comments: avatar, @author, permalink. Pure
+ * local comments don't get a header (no `author`), so this only shows
+ * up on PR-sourced rows. */
+.comment-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: var(--fg-muted);
+}
+.comment-avatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: block;
+}
+.comment-author { font-weight: 600; color: var(--fg); }
+.comment-permalink {
+  margin-left: auto;
+  text-decoration: none;
+  color: var(--fg-muted);
+}
+.comment-permalink:hover { color: var(--accent); }
+
+/* Anchor-status chip on the thread root. Surfaces when the original
+ * (commit_id, line) had to be propagated to head — "was line 42",
+ * "line removed since abc1234", etc. Compact + low-key so it doesn't
+ * compete with the author name. */
+.comment-anchor-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+  font-size: 10px;
+  text-transform: lowercase;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+  color: var(--fg-muted);
+  background: var(--bg-panel);
+}
+.comment-anchor-chip.chip-shifted   { border-color: var(--accent); color: var(--accent); }
+.comment-anchor-chip.chip-orphaned,
+.comment-anchor-chip.chip-file_gone {
+  border-color: var(--warn);
+  color: var(--warn);
+}
+.comment-anchor-chip.chip-commit_unavailable {
+  border-color: var(--err);
+  color: var(--err);
+}
+
+/* GitHub-rendered body: drop the pre-wrap white-space rule so block
+ * elements (<p>, <pre>, <ul>) lay out naturally. */
+.comment-body.comment-body-html { white-space: normal; }
+.comment-body.comment-body-html p { margin: 0 0 6px; }
+.comment-body.comment-body-html p:last-child { margin-bottom: 0; }
+.comment-body.comment-body-html pre {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 4px 6px;
+  overflow-x: auto;
+  font-size: 12px;
+}
+.comment-body.comment-body-html code {
+  font-family: var(--mono);
+  background: var(--bg-panel);
+  padding: 0 3px;
+  border-radius: 2px;
+}
+.comment-body.comment-body-html pre code {
+  background: transparent;
+  padding: 0;
+}
+.comment-body.comment-body-html blockquote {
+  margin: 0 0 6px;
+  padding-left: 8px;
+  border-left: 2px solid var(--border);
+  color: var(--fg-muted);
+}
+.comment-body.comment-body-html a { color: var(--accent); }
+.comment-body.comment-body-html img { max-width: 100%; }
+
+/* Thread block: all comments at one anchor share a single annotation
+ * box and arrow. Replies are indented inside that box rather than
+ * occupying their own annotation rows. */
+.comment-thread { display: flex; flex-direction: column; gap: 8px; }
+.comment-thread-entry {
+  /* Stacked entries get a divider between them so individual comments
+   * read as distinct without each needing its own box. */
+  border-top: 1px solid var(--border);
+  padding-top: 6px;
+}
+.comment-thread-entry:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+/* Replies aren't visually indented — the thread is a flat stack and
+ * the divider between entries is enough. (The .comment-thread-reply
+ * class still attaches for any future treatment that wants to target
+ * replies specifically.) */
+.comment-thread-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 4px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border);
+}
+.comment-btn-reply { padding: 2px 10px; }
+
+/* LLM line-note annotation — the LLM observation plus a small
+ * "Add as comment" affordance. Clicking the button opens the comment
+ * editor pre-filled with the line-note text and the source annotation
+ * row is removed once a comment is saved. */
+.line-note-body { display: flex; flex-direction: column; gap: 4px; }
+.line-note-text { white-space: pre-wrap; }
+.line-note-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2px;
+}
+.comment-btn-promote {
+  padding: 1px 8px;
+  font-size: 10px;
+  opacity: 0.7;
+}
+.comment-btn-promote:hover { opacity: 1; }
+
+/* Smell pills that are click-to-promote get a subtle hover cue —
+ * pointer cursor + a hint underline. Non-promotable smells (the
+ * file-overview aggregator) stay static. */
+.smell.smell-promotable { cursor: pointer; }
+.smell.smell-promotable:hover {
+  outline: 1px solid currentColor;
+  outline-offset: -1px;
+}
+
+/* Resolved thread: collapsed header bar at the top of the thread block.
+ * The annot-box still surrounds the whole thread; the header is just
+ * the first child, with a softer tone so a wall of resolved threads
+ * doesn't shout. */
+.diff .annot-comment-resolved .annot-box {
+  border-left-color: var(--fg-muted);
+}
+.comment-thread-resolved-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 12px;
+  padding: 2px 0;
+  cursor: pointer;
+  text-align: left;
+}
+.comment-thread-resolved-header:hover {
+  color: var(--fg);
+}
+.comment-thread-chev { width: 1em; display: inline-block; text-align: center; }
+.comment-thread-resolved-tag {
+  color: var(--ok, #6cf09e);
+  font-weight: 600;
+}
+.comment-thread-resolved-meta { color: var(--fg-muted); }
+
+/* The comment editor should not inherit the annot-box width/height
+ * clamps — it grows freely with the user's text. */
+.diff .annot-editor .annot-box.comment-editor-box {
+  max-width: none;
+  max-height: none;
+  width: 100%;
+}
+.comment-editor-box textarea.comment-editor-input {
+  display: block;
+  width: 100%;
+  min-width: 32ch;
+  box-sizing: border-box;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 4px 6px;
+  font-family: var(--mono);
+  font-size: 13px;
+  /* Start at a single line; JS autosizes height on input. User can still
+   * drag the handle horizontally to widen if they want a wider box. */
+  resize: horizontal;
+  overflow: hidden;
+  outline: none;
+}
+.comment-editor-box textarea.comment-editor-input:focus {
+  border-color: var(--accent);
+}
+.comment-editor-bar, .comment-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+  justify-content: flex-end;
+}
+.comment-btn {
+  background: var(--bg-panel);
+  color: var(--fg-muted);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 2px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  font-family: inherit;
+}
+.comment-btn:hover { color: var(--fg); border-color: var(--accent); }
+.comment-btn-save { background: var(--warn); color: #000; border-color: var(--warn); }
+.comment-btn-save:hover { color: #000; background: #e0ab2c; }
+.comment-btn-del:hover { color: var(--err); border-color: var(--err); }
+
+/* Gutter hover affordance — show a faint + in the line-number column on
+ * hover so reviewers know the number is clickable. */
+.diff .cell-lineno:not(.empty) { cursor: pointer; position: relative; }
+.diff .cell-lineno:not(.empty):hover {
+  background: var(--bg-panel);
+  color: var(--accent);
+}
+.diff .cell-lineno:not(.empty):hover::before {
+  content: "+";
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 10px;
+  color: var(--warn);
+}
+
+/* "Done" button in the PR bar (only present when a session endpoint
+ * was baked into the HTML). */
+.done-btn {
+  background: var(--warn);
+  color: #000;
+  border: 1px solid var(--warn);
+  border-radius: 6px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-left: 8px;
+}
+.done-btn:hover:not(:disabled) { background: #e0ab2c; }
+.done-btn:disabled { opacity: 0.7; cursor: default; }
+
+@media (prefers-color-scheme: light) {
+  .diff .row-ins .cell-content-new { background: rgba(26, 127, 55, 0.10); }
+  .diff .row-del .cell-content-old { background: rgba(207, 34, 46, 0.10); }
+  .diff .row-pair .cell-content-old { background: rgba(207, 34, 46, 0.10); }
+  .diff .row-pair .cell-content-new { background: rgba(26, 127, 55, 0.10); }
+}
+
+/* --- Gap expansion chips (inter-hunk context) ---------------------------- */
+.gap-chip {
+  margin: 8px 0;
+  padding: 6px 12px;
+  background: var(--bg-alt);
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  text-align: center;
+  font-family: var(--mono);
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
+}
+.gap-chip:hover {
+  background: var(--bg-panel);
+  color: var(--fg);
+  border-color: var(--accent);
+  border-style: solid;
+}
+.gap-chip .gap-icon { margin-right: 6px; color: var(--accent); }
+
+.gap-expansion { position: relative; margin: 8px 0; }
+.gap-expansion .diff { border-style: dashed; opacity: 0.92; }
+.gap-expansion .gap-collapse {
+  position: absolute; top: 4px; right: 4px; z-index: 2;
+  background: var(--bg-panel); color: var(--fg-muted);
+  border: 1px solid var(--border); border-radius: 4px;
+  padding: 2px 8px; font-size: 11px; cursor: pointer;
+  font-family: var(--mono);
+}
+.gap-expansion .gap-collapse:hover { color: var(--fg); border-color: var(--accent); }
+
+/* --- Status bar ----------------------------------------------------------- */
+/* `position: sticky; bottom: 0` only pins relative to a scrolling
+ * ancestor, not the viewport — for a body-level footer it just sits
+ * at the end of the document flow. Use `fixed` to anchor it to the
+ * viewport bottom regardless of scroll position, and reserve space
+ * with body padding so the last content row isn't hidden behind it. */
+.status-bar {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  background: var(--bg-alt); border-top: 1px solid var(--border);
+  padding: 6px 16px; color: var(--fg-muted); font-size: 12px;
+  display: flex; gap: 16px; align-items: flex-end;
+  z-index: 40;
+}
+body { padding-bottom: 30px; }
+
+/* The status counts sit on the right; when the console mounts, the
+ * prompt input takes the flexible left and pushes them over. */
+.status-counts { margin-left: auto; white-space: nowrap; }
+
+/* --- Review console ------------------------------------------------------- */
+.console-input {
+  flex: 1 1 auto; min-width: 0;
+  resize: none; overflow-y: auto;
+  font: inherit; line-height: 1.4;
+  color: var(--fg); background: var(--bg-panel);
+  border: 1px solid var(--border); border-radius: 6px;
+  padding: 3px 8px;
+}
+.console-input::placeholder { color: var(--fg-muted); }
+.console-input:focus { outline: none; border-color: var(--fg-muted); }
+.console-input.busy { opacity: 0.7; }
+
+/* Selection chip: the reviewer's pinned selection (Slice 4). Sits at the
+ * far left of the footer; visible only while a selection is pinned. */
+.console-chip {
+  flex: 0 1 auto; min-width: 0;
+  display: inline-flex; align-items: center; gap: 4px;
+  max-width: 40%;
+  font-size: 12px; line-height: 1.2;
+  color: var(--fg); background: var(--bg-panel);
+  border: 1px solid var(--border); border-radius: 6px;
+  padding: 2px 4px 2px 8px;
+}
+.console-chip.hidden { display: none; }
+.console-chip-label {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.console-chip-clear {
+  flex: 0 0 auto;
+  font: inherit; line-height: 1; color: var(--fg-muted);
+  background: none; border: none; cursor: pointer; padding: 0 2px;
+}
+.console-chip-clear:hover { color: var(--fg); }
+
+/* Stop affordance: visible only while a turn streams. */
+.console-stop {
+  flex: 0 0 auto; align-self: center;
+  font: inherit; font-size: 12px; line-height: 1.2;
+  color: var(--fg); background: var(--bg-panel);
+  border: 1px solid var(--border); border-radius: 6px;
+  padding: 3px 10px; cursor: pointer;
+}
+.console-stop:hover { border-color: var(--fg-muted); }
+.console-stop:disabled { opacity: 0.5; cursor: default; }
+.console-stop.hidden { display: none; }
+
+/* Transcript drawer: anchored above the footer, grows upward to a cap
+ * then scrolls. `bottom` clears the fixed footer's reserved strip. */
+.console-drawer {
+  position: fixed; left: 0; right: 0; bottom: 30px;
+  max-height: 58vh; overflow-y: auto;
+  background: var(--bg-alt); border-top: 1px solid var(--border);
+  z-index: 39;
+  padding: 12px 16px;
+}
+.console-drawer.hidden { display: none; }
+.console-transcript {
+  display: flex; flex-direction: column; gap: 16px;
+  /* Left-aligned (not centred) so the transcript lines up under the
+   * prompt input, the way a terminal/Claude-Code log reads. The
+   * max-width just caps line length for readability. */
+  max-width: 980px; margin: 0;
+}
+/* Both question and answer read top-to-bottom, left-aligned and
+ * full-width — no chat bubbles. The question is a quieter left-bordered
+ * echo of the prompt; the answer below it is the prominent prose. */
+.console-q {
+  max-width: 100%;
+  white-space: pre-wrap; word-break: break-word;
+  font-size: 13px; color: var(--fg-muted);
+  border-left: 2px solid var(--border); padding-left: 10px;
+}
+.console-a {
+  max-width: 100%;
+  white-space: pre-wrap; word-break: break-word;
+  font-size: 13px; color: var(--fg); line-height: 1.5;
+  /* Pull the answer up under its question so a turn reads as one
+   * block, with the larger transcript gap separating turns. */
+  margin-top: -8px;
+}
+.console-a.console-pending .console-text { color: var(--fg-muted); }
+.console-a.console-error .console-text { color: var(--danger, #e5534b); }
+/* A cancelled turn keeps its partial text but dims it. */
+.console-a.console-cancelled .console-text { opacity: 0.65; }
+
+/* Tool-activity lines stream above the answer text while the agent
+ * reaches for tools; muted + monospaced to read as machine activity. */
+.console-activity {
+  display: flex; flex-direction: column; gap: 2px;
+  margin-bottom: 4px;
+}
+.console-activity:empty { display: none; }
+.console-tool {
+  font-family: var(--mono, ui-monospace, monospace);
+  font-size: 11px; color: var(--fg-muted);
+}
+
+/* --- Rendered markdown answers (Slice 3) ---------------------------------
+ * `.console-text` holds markdown-it output (sanitised); it manages its
+ * own block whitespace, so override the pre-wrap inherited from the
+ * plain-text era. Code fences keep their own `pre` whitespace. */
+.console-text { white-space: normal; }
+.console-text > :first-child { margin-top: 0; }
+.console-text > :last-child { margin-bottom: 0; }
+.console-text p { margin: 0 0 8px; }
+.console-text h1, .console-text h2, .console-text h3,
+.console-text h4, .console-text h5, .console-text h6 {
+  margin: 14px 0 6px; line-height: 1.3; font-weight: 600;
+}
+.console-text h1 { font-size: 18px; }
+.console-text h2 { font-size: 16px; }
+.console-text h3 { font-size: 14px; }
+.console-text h4, .console-text h5, .console-text h6 { font-size: 13px; }
+.console-text ul, .console-text ol { margin: 0 0 8px; padding-left: 22px; }
+.console-text li { margin: 2px 0; }
+.console-text a { color: var(--accent); text-decoration: none; }
+.console-text a:hover { text-decoration: underline; }
+.console-text code {
+  font-family: var(--mono, ui-monospace, monospace);
+  font-size: 0.92em;
+  background: var(--bg-panel); border-radius: 4px;
+  padding: 0.1em 0.35em;
+}
+.console-text pre {
+  background: var(--bg-alt); border: 1px solid var(--border);
+  border-radius: 6px; padding: 10px 12px; margin: 0 0 8px;
+  overflow-x: auto;
+}
+.console-text pre code {
+  background: none; padding: 0; font-size: 12px; line-height: 1.45;
+}
+.console-text blockquote {
+  margin: 0 0 8px; padding: 0 12px;
+  border-left: 3px solid var(--border); color: var(--fg-muted);
+}
+.console-text table {
+  border-collapse: collapse; margin: 0 0 8px; font-size: 12px;
+}
+.console-text th, .console-text td {
+  border: 1px solid var(--border); padding: 4px 8px;
+}
+.console-text hr {
+  border: none; border-top: 1px solid var(--border); margin: 12px 0;
+}
+/* A rendered mermaid diagram (its source `pre` is swapped out for this).
+ * Centred, with the SVG scaled to fit the transcript width. */
+.console-mermaid {
+  margin: 0 0 8px; text-align: center;
+}
+.console-mermaid svg { max-width: 100%; height: auto; }
+
+/* --- Help overlay --------------------------------------------------------- */
+.help-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100;
+  display: flex; align-items: center; justify-content: center;
+}
+.help-overlay.hidden { display: none; }
+.help-card {
+  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
+  padding: 24px; max-width: 480px; color: var(--fg);
+}
+.help-card h3 { margin-top: 0; }
+.help-card kbd {
+  display: inline-block; padding: 1px 6px; background: var(--bg-panel);
+  border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono);
+  font-size: 11px; margin: 0 2px;
+}
+
+/* --- Post-confirm modal (scr pr only) ------------------------------------ */
+/* Shown when the reviewer clicks Done in posting mode. Each row is a
+ * comment that would be posted; per-row checkbox + delete give the
+ * reviewer one last pass before the post fires. Reuses the help
+ * overlay's backdrop pattern (fixed full-screen, centred card). */
+.post-modal {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 110;
+  display: flex; align-items: center; justify-content: center;
+}
+.post-modal.hidden { display: none; }
+.post-modal-card {
+  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
+  padding: 20px 24px; width: min(720px, 90vw); max-height: 80vh;
+  display: flex; flex-direction: column; color: var(--fg);
+}
+.post-modal-header { margin: 0 0 6px; font-size: 16px; }
+.post-modal-meta {
+  margin: 0 0 14px; font-size: 12px; color: var(--fg-muted);
+  font-family: var(--mono);
+}
+.post-modal-list {
+  list-style: none; padding: 0; margin: 0; overflow-y: auto;
+  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+  max-height: 50vh;
+}
+.post-modal-empty {
+  padding: 20px; text-align: center; color: var(--fg-muted); font-style: italic;
+}
+.post-row {
+  display: flex; align-items: flex-start; gap: 8px;
+  padding: 10px 0; border-bottom: 1px solid var(--border);
+}
+.post-row:last-child { border-bottom: 0; }
+.post-row-label {
+  flex: 1; display: grid;
+  grid-template-columns: auto 1fr auto; gap: 4px 10px;
+  align-items: baseline; cursor: pointer;
+}
+.post-row-check { grid-row: 1 / span 2; margin-top: 2px; }
+.post-row-loc {
+  font-family: var(--mono); font-size: 12px; color: var(--fg-muted);
+  grid-column: 2; grid-row: 1;
+}
+.post-row-kind {
+  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--accent); grid-column: 3; grid-row: 1;
+}
+.post-row-body {
+  font-size: 13px; white-space: pre-wrap; word-break: break-word;
+  grid-column: 2 / span 2; grid-row: 2;
+}
+.post-row-delete {
+  background: transparent; border: 1px solid var(--border); border-radius: 4px;
+  width: 22px; height: 22px; padding: 0; line-height: 1;
+  color: var(--fg-muted); cursor: pointer; font-size: 16px;
+}
+.post-row-delete:hover:not(:disabled) {
+  color: var(--warn); border-color: var(--warn);
+}
+.post-row-delete:disabled { opacity: 0.5; cursor: default; }
+.post-modal-status {
+  margin: 10px 0 0; font-size: 12px; color: var(--warn); min-height: 1.2em;
+}
+.post-modal-footer {
+  display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px;
+}
+.post-modal-footer button {
+  background: var(--bg-panel); color: var(--fg);
+  border: 1px solid var(--border); border-radius: 6px;
+  padding: 6px 14px; font-size: 13px; cursor: pointer;
+}
+.post-modal-footer .post-confirm {
+  background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600;
+}
+.post-modal-footer .post-confirm:hover:not(:disabled) { filter: brightness(1.1); }
+.post-modal-footer button:disabled { opacity: 0.6; cursor: default; }
+.post-modal-success {
+  display: flex; gap: 12px; align-items: flex-start;
+  padding: 16px 0; margin-bottom: 4px;
+}
+.post-modal-tick {
+  font-size: 24px; color: var(--ok, #2ea043); line-height: 1;
+}
+.post-modal-success-text { font-size: 14px; }
+.post-modal-link {
+  display: inline-block; margin-top: 4px;
+  color: var(--accent); text-decoration: none;
+}
+.post-modal-link:hover { text-decoration: underline; }