prreviewbuddy 0.45.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prreviewbuddy",
-  "version": "0.45.0",
+  "version": "0.46.0",
   "description": "Review a branch or pull request in an isolated checkout, from your terminal, with the coding agent you already have installed.",
   "license": "UNLICENSED",
   "homepage": "https://prreviewbuddy.com",

package/static/shell.css

@@ -1529,6 +1529,9 @@ a.prb-rail-item { text-decoration: none; }
 }
 .prb-bank-add:hover { border-color: var(--border-strong); color: var(--text-primary); }
 .prb-bank-list { display: flex; flex-wrap: wrap; gap: 6px; }
+/* Folded. The `display` above outranks the browser's own rule for `hidden`, so without this the
+   fold flips the attribute and the chips stay on screen. */
+.prb-bank-list[hidden] { display: none; }
 /* The pair reads as one chip: the label inserts, the pencil edits. They share a border so the
    edit affordance is visibly part of the prompt it edits rather than a control floating beside it. */
 .prb-bank-item {
@@ -3704,6 +3707,320 @@ a.prb-rail-item { text-decoration: none; }
 .prb-diagram-source > summary::before { content: '\25B8  '; }
 .prb-diagram-source[open] > summary::before { content: '\25BE  '; }
 
+/* ── The two diagram tabs ──
+   Each says what question it answers, so the reviewer never has to open both to learn they differ.
+   A segmented strip rather than the rail's style: these are two views of one place, not two places. */
+.prb-diagram-modes {
+  display: inline-flex;
+  gap: 2px;
+  margin: 0 0 18px;
+  padding: 4px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 10px;
+  background: #f6f8fa;
+}
+.prb-diagram-mode {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  min-width: 190px;
+  padding: 8px 18px 9px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #57606a;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.prb-diagram-mode:hover { color: #1f2328; }
+.prb-diagram-mode[aria-selected='true'] {
+  background: #fff;
+  color: #1f2328;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+}
+.prb-diagram-mode:focus-visible { outline: 2px solid #9333ea; outline-offset: 1px; }
+.prb-diagram-mode-title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-body); font-weight: 600; }
+/* The picture on this tab already exists: switching to it costs nothing. Passive, and a word for
+   assistive technology rather than colour alone. */
+.prb-diagram-mode-ready {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: rgba(26, 127, 55, 0.12);
+  color: #1a7f37;
+  font-size: 10px;
+  font-weight: 700;
+}
+.prb-diagram-mode-ready[hidden] { display: none; }
+.prb-diagram-mode-subtitle { font-size: var(--t-micro); color: #8c959f; }
+
+/* ── Before anything is drawn ──
+   Says what the view is for and offers the one action that spends a run. Not a dead end, and not a
+   button that pretends to be free. */
+.prb-map-empty {
+  max-width: 560px;
+  margin: 8px 0 20px;
+  padding: 18px 20px;
+  border: 1px dashed rgba(15, 23, 42, 0.2);
+  border-radius: 10px;
+  background: #fff;
+  font-size: var(--t-body);
+  line-height: var(--lh-body);
+  color: #57606a;
+}
+.prb-map-empty p { margin: 0 0 10px; }
+.prb-map-empty-title { margin: 0 0 6px; font-size: var(--t-section); font-weight: 600; color: #1f2328; }
+.prb-map-empty-note { font-size: var(--t-meta); color: #8c959f; }
+.prb-map-stale {
+  padding: 7px 10px;
+  border-radius: 7px;
+  background: rgba(251, 191, 36, 0.12);
+  font-size: var(--t-meta);
+  color: #6b5514;
+}
+.prb-map-generate {
+  margin-top: 4px;
+  padding: 7px 14px;
+  border: 1px solid #9333ea;
+  border-radius: 6px;
+  background: #9333ea;
+  color: #fff;
+  font: inherit;
+  font-size: var(--t-meta);
+  font-weight: 600;
+  cursor: pointer;
+}
+.prb-map-generate:hover { background: #7e22ce; }
+.prb-map-generate[disabled] { opacity: 0.55; cursor: default; }
+/* While a map is being made there is one state on screen, the work and its Stop: the button that
+   would start it again goes, whether this page asked or came back to a run already going. */
+.prb-view[data-map-running] .prb-map-generate { display: none; }
+/* The implementation tab's own empty state goes the moment its first card is in the pane. */
+.prb-view[data-diagram-pane]:has([data-diagram-card]) [data-diagram-empty] { display: none; }
+
+/* ── The change map ── */
+.prb-map-body { container-type: inline-size; }
+.prb-map {
+  margin: 0 0 20px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 10px;
+  background: #fff;
+}
+.prb-map-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+.prb-map-heading { flex: 1 1 280px; min-width: 0; }
+.prb-map-title { margin: 0; font-size: var(--t-section); font-weight: 600; color: #1f2328; }
+.prb-map-intent { margin: 4px 0 0; font-size: var(--t-body); line-height: var(--lh-body); color: #57606a; }
+.prb-map-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+.prb-map-registers {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid rgba(15, 23, 42, 0.15);
+  border-radius: 7px;
+  background: #f6f8fa;
+}
+.prb-map-register {
+  padding: 3px 10px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #57606a;
+  font: inherit;
+  font-size: var(--t-micro);
+  cursor: pointer;
+}
+.prb-map-register[aria-pressed='true'] { background: #fff; color: #1f2328; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
+.prb-map-register:focus-visible { outline: 2px solid #9333ea; outline-offset: 1px; }
+.prb-map-hint { margin: 10px 16px 0; font-size: var(--t-micro); color: #8c959f; }
+
+/* One graph in the page, two sets of words; the board says which to show. */
+.prb-map[data-register='simple'] [data-reg='technical'],
+.prb-map[data-register='technical'] [data-reg='simple'] { display: none; }
+
+/* Stages as columns, read left to right. The gaps are wide on purpose: the relationship labels sit
+   in them, and a label is the point of a line. */
+.prb-map-board {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--prb-map-stages, 5), minmax(180px, 1fr));
+  column-gap: 112px;
+  padding: 14px 16px 22px;
+  overflow-x: auto;
+}
+.prb-map-stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.prb-map-stage-title {
+  align-self: flex-start;
+  margin: 0 0 -8px;
+  font-size: var(--t-micro);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #8c959f;
+}
+
+.prb-map-node {
+  --role: #8250df;
+  position: relative;
+  padding: 9px 11px 10px;
+  border: 1px solid rgba(15, 23, 42, 0.14);
+  border-left: 4px solid var(--role);
+  border-radius: 8px;
+  background: #fff;
+  font-size: var(--t-meta);
+  line-height: 1.45;
+  color: #424a53;
+  transition: opacity 0.15s ease, box-shadow 0.15s ease;
+  cursor: pointer;
+}
+.prb-map-node:focus-visible { outline: 2px solid #9333ea; outline-offset: 2px; }
+.prb-map-node[data-role='intent'] { --role: #0969da; }
+.prb-map-node[data-role='actor'] { --role: #6e7781; }
+.prb-map-node[data-role='concept'] { --role: #8250df; }
+.prb-map-node[data-role='state'] { --role: #0f766e; }
+.prb-map-node[data-role='constraint'] { --role: #9a6700; }
+.prb-map-node[data-role='risk'] { --role: #cf222e; }
+.prb-map-node[data-role='outcome'] { --role: #1a7f37; }
+/* Importance is prominence: a heavier frame and a larger name, never a score. */
+.prb-map-node[data-weight='primary'] {
+  border-width: 2px 2px 2px 5px;
+  border-color: var(--role);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+}
+.prb-map-node[data-weight='primary'] .prb-map-node-title { font-size: calc(var(--t-body) + 1px); }
+.prb-map-role {
+  margin: 0 0 3px;
+  font-size: var(--t-micro);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--role);
+}
+.prb-map-core { color: #57606a; font-weight: 500; }
+.prb-map-node-title { margin: 0 0 4px; font-size: var(--t-body); font-weight: 600; line-height: 1.3; color: #1f2328; }
+.prb-map-node-body { margin: 0; }
+.prb-map code:not(.prb-map-anchor) {
+  padding: 0 3px;
+  border-radius: 3px;
+  background: #f6f8fa;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--t-code);
+}
+.prb-map-why { margin: 6px 0 0; color: #57606a; }
+.prb-map-why-lead { font-weight: 600; color: #1f2328; }
+.prb-map-anchor {
+  display: inline-block;
+  max-width: 100%;
+  margin-top: 6px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #f6f8fa;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--t-code);
+  color: #57606a;
+  overflow-wrap: anywhere;
+}
+/* Relationships the board could not draw cleanly, said in the idea they leave from. */
+.prb-map-inline {
+  margin: 7px 0 0;
+  padding: 6px 0 0;
+  border-top: 1px dashed rgba(15, 23, 42, 0.14);
+  list-style: none;
+  font-size: var(--t-micro);
+  color: #57606a;
+}
+.prb-map-inline:not(:has(li:not([hidden]))) { display: none; }
+.prb-map-inline li + li { margin-top: 2px; }
+.prb-map-inline em { color: #1f2328; }
+.prb-map-goto {
+  display: block;
+  margin-top: 8px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #8250df;
+  font: inherit;
+  font-size: var(--t-micro);
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.prb-map-goto:hover { text-decoration: underline; }
+
+.prb-map-edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+.prb-map-edge { fill: none; stroke: #8c959f; stroke-width: 1.5; transition: opacity 0.15s ease; }
+.prb-map-arrow { fill: #8c959f; }
+.prb-map-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
+.prb-map-board:not([data-laid-out]) .prb-map-labels { visibility: hidden; }
+.prb-map-label {
+  position: absolute;
+  max-width: 100px;
+  padding: 1px 6px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 10px;
+  background: #fff;
+  font-size: var(--t-micro);
+  font-style: italic;
+  line-height: 1.35;
+  text-align: center;
+  color: #424a53;
+  transition: opacity 0.15s ease;
+}
+.prb-map-label[hidden] { display: none; }
+
+/* Selecting an idea keeps it, its neighbours and the lines between them, and quiets the rest. */
+.prb-map-board[data-selecting] .prb-map-node:not([data-active]):not([data-near]) { opacity: 0.35; }
+.prb-map-board[data-selecting] .prb-map-edge:not([data-active]) { opacity: 0.15; }
+.prb-map-board[data-selecting] .prb-map-label:not([data-active]) { opacity: 0.2; }
+.prb-map-board .prb-map-edge[data-active] { stroke: #1f2328; stroke-width: 2; }
+.prb-map-board .prb-map-label[data-active] { border-color: #1f2328; color: #1f2328; }
+.prb-map-node[data-active] { box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.25); }
+
+.prb-map-list { margin: 0 16px 14px; font-size: var(--t-meta); color: #57606a; }
+.prb-map-list > summary { cursor: pointer; }
+.prb-map-list ol { margin: 8px 0 0; padding-left: 20px; line-height: var(--lh-body); }
+.prb-map-list li { margin-bottom: 4px; }
+.prb-map-list strong { color: #1f2328; font-weight: 600; }
+.prb-map-note { color: #57606a; }
+
+/* Five stages side by side, with room between them for the words on the lines, need about 1360px:
+   the expanded pane, not the one between the rail and Buddy AI. Narrower than that the stages stack, top to bottom, in the same reading order,
+   and the lines follow them down. A board that scrolled sideways would hide the half of every line
+   that explains it. */
+@container (max-width: 1360px) {
+  .prb-map-board { grid-template-columns: minmax(0, 1fr); row-gap: 58px; overflow-x: visible; }
+  .prb-map-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 28px 36px; }
+  .prb-map-stage-title { flex-basis: 100%; margin: 0; }
+  .prb-map-node { flex: 1 1 210px; max-width: 300px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .prb-map-node, .prb-map-edge, .prb-map-label { transition: none; }
+}
+
 /* ── The Overview's stat cards ──
    The drawer stacks each card as a centred column: number, then label, then an optional note. At
    460px that is the only thing that fits. Here it produced two faults at once. Every card is as
@@ -3797,6 +4114,21 @@ a.prb-rail-item { text-decoration: none; }
 }
 .pr-helper-diagram-button:hover { background: rgba(147, 51, 234, 0.08); }
 .pr-helper-diagram-button[disabled] { opacity: 0.55; cursor: default; }
+/* The Overview's way to the diagrams: the main visual path through the change, so a step above its
+   neighbour with a tinted ground, yet no run behind it, so not the filled treatment Generate has. */
+.pr-helper-map-button {
+  margin: 0 0 14px;
+  padding: 7px 16px;
+  border: 1px solid #9333ea;
+  border-radius: 6px;
+  background: rgba(147, 51, 234, 0.1);
+  color: #7e22ce;
+  font-family: inherit;
+  font-size: var(--t-meta);
+  font-weight: 600;
+  cursor: pointer;
+}
+.pr-helper-map-button:hover { background: rgba(147, 51, 234, 0.16); }
 /* In a theme card the button stands alone in the actions row, whose other occupant — the guided
    review CTA — is hidden in this client. That CTA carried the gap below the review checklist, so
    with it gone the row has to carry it, or the button sits flush against the checklist box: the
@@ -4544,14 +4876,17 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
 body .prb-body[data-focus] { grid-template-columns: minmax(0, 1fr); }
 body .prb-body[data-focus] .prb-rail { display: none; }
 
-/* A document surface: the review pane takes the width, and gets more room to use it. Issues and
-   Questions stay a readable measure; a diff is the one thing here that genuinely wants the width. */
-body .prb-body:is([data-focus='issues'], [data-focus='questions'], [data-focus='files'], [data-focus='guide']) .prb-ask { display: none; }
-body .prb-body:is([data-focus='issues'], [data-focus='questions'], [data-focus='guide']) .pr-helper-sidebar.prb-pane { max-width: 1080px; }
+/* A document surface, which is every view but the assistant: the review pane takes the width, and
+   gets more room to use it. Prose stays a readable measure; a diff and a drawing are the things here
+   that genuinely want the width. */
+body .prb-body[data-focus]:not([data-focus='buddy']) .prb-ask { display: none; }
+body .prb-body[data-focus]:not([data-focus='buddy']) .pr-helper-sidebar.prb-pane { max-width: 1080px; }
+body .prb-body:is([data-focus='files'], [data-focus='diagram']) .pr-helper-sidebar.prb-pane { max-width: 1600px; }
 /* The rail is where the themes are listed, and it is hidden here, so the picker it stands in for
    below 860px stands in for it now. */
 body .prb-body[data-focus='guide'] .prb-guide-picker { display: flex; }
-body .prb-body[data-focus='files'] .pr-helper-sidebar.prb-pane { max-width: 1600px; }
+/* An expanded map has room for every stage side by side, which is the point of expanding it. */
+body .prb-body[data-focus='map']:not([data-focus='buddy']) .pr-helper-sidebar.prb-pane { max-width: 1560px; }
 
 /* The assistant: the review pane goes, and the assistant is a column in the grid again at every
    width. Below 860px it is otherwise a fixed overlay, and an overlay as the whole workspace would
@@ -4606,6 +4941,10 @@ body .prb-body[data-focus='buddy'] .prb-msg-user { max-width: min(90%, 78ch); }
 /* The title row is baseline-aligned for the disclosure's text; an icon has no baseline worth
    aligning, so it centres on the title instead. */
 .prb-doc .prb-doc-head .prb-focus-toggle { align-self: center; margin-left: auto; }
+/* Beside Analysis details the pair sits together at the right: the disclosure takes the free space,
+   and the toggle follows it rather than splitting the row in two. */
+.prb-doc .prb-doc-head .prb-doc-provenance { margin-left: auto; }
+.prb-doc .prb-doc-head .prb-doc-provenance + .prb-focus-toggle { margin-left: -8px; }
 
 /* ── Your prompts, folded ──
    The heading is the toggle. Folded, it keeps a count, so a reviewer knows what is behind it