prreviewbuddy 0.43.0 → 0.45.0

package/static/shell.css

@@ -3252,6 +3252,12 @@ a.prb-rail-item { text-decoration: none; }
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.prb-card-summary code {
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--surface-2);
+  font-size: var(--t-code);
+}
 .prb-card-where,
 .prb-card-meta {
   display: flex;
@@ -3863,8 +3869,15 @@ a.prb-rail-item { text-decoration: none; }
   line-height: var(--lh-tight);
 }
 
-.prb-guide-progress {
+.prb-guide-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   margin: 0 0 20px;
+}
+.prb-guide-head .prb-focus-toggle { margin-left: auto; }
+.prb-guide-progress {
+  margin: 0;
   color: var(--pane-ink-faint);
   font-size: var(--t-meta);
 }
@@ -4517,3 +4530,199 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
 .prb-toast-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
 .prb-toast-open:focus-visible,
 .prb-toast-close:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
+
+/* ── Focus mode ──
+   One surface as the whole workspace, beneath the same header, which is outside `.prb-body` and so
+   never changes. The client sets `data-focus` and nothing else: every pane stays in the DOM,
+   hidden rather than removed, which is why a conversation, an open code panel and a scroll position
+   are all still there on the way back.
+
+   `body` in front of every selector, deliberately. The responsive blocks above set the grid with
+   (0,2,0) selectors inside media queries that come later in the cascade than anything this could
+   be placed beside. One element of extra specificity wins at every width without `!important`,
+   and without depending on this block staying last. */
+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; }
+/* 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; }
+
+/* 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
+   sit over the header this mode promises to keep. */
+body .prb-body[data-focus='buddy'] .prb-doc { display: none; }
+body .prb-body[data-focus='buddy'] .prb-ask {
+  display: flex;
+  position: relative;
+  inset: auto;
+  width: auto;
+  border-left: 0;
+}
+body .prb-body[data-focus='buddy'] .prb-ask-resize { display: none; }
+
+/* Prose at a reading measure, centred, with the column itself wider so a code block or a table in
+   an answer can use the room the mode exists to give it. The padding does the centring rather than
+   a max-width on the log, so the log's scrollbar stays at the window's edge. */
+body .prb-body[data-focus='buddy'] :is(.prb-ask-header, .prb-bank, .prb-ask-log, .prb-ask-form, .prb-ask-paused) {
+  padding-inline: max(18px, calc((100% - 1040px) / 2));
+}
+body .prb-body[data-focus='buddy'] .prb-msg-assistant :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) { max-width: 78ch; }
+body .prb-body[data-focus='buddy'] .prb-msg-user { max-width: min(90%, 78ch); }
+
+/* The expand control. Icon-only, like Copy on a card, so it does not compete with a title. Both
+   icons are in the markup and `aria-pressed` picks one, which is the state the client sets. */
+.prb-focus-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.prb-focus-toggle:hover { color: var(--text-primary); background: var(--surface-2); }
+.prb-focus-toggle:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
+.prb-focus-toggle .prb-focus-collapse,
+.prb-focus-toggle[aria-pressed='true'] .prb-focus-expand { display: none; }
+.prb-focus-toggle[aria-pressed='true'] .prb-focus-collapse { display: block; }
+/* In the assistant's header it follows the scope label, which takes the free space with
+   `margin-left: auto`, so the control stays at the right edge beside it. */
+.prb-ask-header .prb-focus-toggle { align-self: center; }
+
+/* The same control in the light document pane, in the pane's palette. */
+.prb-doc .prb-focus-toggle { color: var(--pane-ink-faint); }
+.prb-doc .prb-focus-toggle:hover { color: var(--pane-ink); background: var(--pane-bg); border-color: var(--pane-line); }
+/* 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; }
+
+/* ── Your prompts, folded ──
+   The heading is the toggle. Folded, it keeps a count, so a reviewer knows what is behind it
+   without opening it, and Add stays beside it. */
+.prb-bank-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 4px 2px 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.prb-bank-toggle:hover { color: var(--text-primary); }
+.prb-bank-toggle:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; border-radius: 4px; }
+.prb-bank-chevron { transition: transform 120ms ease; transform: rotate(90deg); }
+.prb-bank-toggle[aria-expanded='false'] .prb-bank-chevron { transform: none; }
+.prb-bank-count {
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: normal;
+}
+.prb-bank-toggle[aria-expanded='true'] .prb-bank-count { display: none; }
+.prb-bank[data-collapsed] { padding-bottom: 8px; }
+.prb-bank[data-collapsed] .prb-bank-head { margin-bottom: 0; }
+
+/* ── Ask Buddy on a finding card ──
+   The page's `[data-menu]` menu, as the header's `...` is, dropped into a card's title row beside
+   Copy. Positioned as the flex child it is, the way `.prb-header .prb-menu` is, so the panel hangs
+   off the trigger rather than off a corner of the card. The panel is in the card's flow inside the
+   scrolling pane, so near the bottom it extends the scroll rather than being cut off. */
+.prb-doc .pr-helper-issue-title-row .prb-menu {
+  position: relative;
+  top: auto;
+  right: auto;
+  display: inline-flex;
+  flex-shrink: 0;
+  /* Not the base rule's `z-index: 2`. That makes every card's wrapper a stacking context of its
+     own at the same level, and the next card's sparkle, later in the document, then paints over
+     this card's open panel. With no context here the panel's own z-index is measured against the
+     whole pane. */
+  z-index: auto;
+}
+.prb-doc .prb-ask-buddy-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-top: -3px;
+  color: var(--pane-accent);
+}
+.prb-doc .prb-ask-buddy-trigger:hover,
+.prb-doc .prb-ask-buddy-trigger[aria-expanded='true'] { background: var(--pane-bg); color: var(--pane-accent-ink); }
+.prb-doc .prb-ask-buddy-trigger:focus-visible { outline: 2px solid var(--pane-accent); outline-offset: -2px; }
+
+/* The tooltip Copy uses beside it, so the two icons explain themselves the same way. */
+.prb-doc .prb-ask-buddy-trigger::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 3;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: #24292f;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+.prb-doc .prb-ask-buddy-trigger:hover::after,
+.prb-doc .prb-ask-buddy-trigger:focus-visible::after { opacity: 1; transition-delay: 0.35s; }
+.prb-doc .prb-ask-buddy-trigger[aria-expanded='true']::after { display: none; }
+
+/* The panel in the pane's palette: the header's is dark on the dark shell, and a dark box in the
+   middle of a light card is the mistake pane_palette.test.ts exists to catch. */
+.prb-doc .prb-ask-buddy-panel {
+  top: 28px;
+  width: 280px;
+  max-width: min(280px, calc(100vw - 48px));
+  border-color: var(--pane-line);
+  background: var(--pane-surface);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
+  color: var(--pane-ink);
+}
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item {
+  display: block;
+  width: 100%;
+  padding: 7px 9px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--pane-ink);
+  font: inherit;
+  font-size: var(--t-meta);
+  text-align: left;
+  cursor: pointer;
+}
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:hover,
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:focus-visible { background: var(--pane-bg); outline: none; }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--pane-accent); }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:disabled { opacity: 0.5; cursor: default; }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--pane-line); }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-heading {
+  padding: 4px 9px 2px;
+  color: var(--pane-ink-faint);
+  font-size: var(--t-micro);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}

package/static/sidebar.css

@@ -876,6 +876,64 @@
 
 .pr-helper-issue-title { font-size: 14px; font-weight: 600; margin: 0; text-align: left; width: 100%; }
 
+/* The title and the one control that acts on the whole finding, side by side. The title takes the
+   room and wraps; the copy icon keeps its size at the top-right, level with the title's first line
+   however many lines the title wraps to. */
+.pr-helper-issue-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+.pr-helper-issue-title-row > .pr-helper-issue-title { flex: 1; min-width: 0; }
+
+/* Full strength rather than a chat reply's 0.65: at 0.65 its grey falls under 3:1 on the white card.
+   Pulled up a pixel so the 14px glyph sits on the 14px title's first line rather than below it.
+   Positioned so its tooltip can anchor to it: unlike a pill's, which spans its whole row, this one
+   belongs to one small control at the card's edge. */
+.pr-helper-finding-copy {
+  position: relative;
+  flex-shrink: 0;
+  margin-top: -1px;
+  opacity: 1;
+  font-size: 12px;
+}
+
+/* The tooltip grows leftward from the right edge, back over the card rather than out of the pane,
+   and stays on one line. The same look, delay and text reset as `.pr-helper-tip`, which it cannot
+   reuse: that one pins itself to its positioned row, and this control is its own anchor. */
+.pr-helper-finding-copy::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 3;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: #24292f;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 400;
+  font-family: inherit;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+
+.pr-helper-finding-copy:hover::after,
+.pr-helper-finding-copy:focus-visible::after {
+  opacity: 1;
+  transition-delay: 0.35s;
+}
+
+/* The button is saying "Copied" or "Copy failed" in words right now; a tooltip offering to copy
+   would argue with it. */
+.pr-helper-finding-copy.copied::after,
+.pr-helper-finding-copy.failed::after { display: none; }
+
 .pr-helper-issue-desc {
   font-size: 13px;
   line-height: 1.5;
@@ -4187,20 +4245,6 @@
   margin-top: 12px;
 }
 
-/* Copying the finding is a different kind of act from deciding about it, so it takes the far edge
-   rather than joining Investigate and Dismiss. On a question card it sits in the group instead,
-   because the far edge there already belongs to Jump to file. */
-.pr-helper-issue-actions > .pr-helper-msg-copy { margin-right: auto; }
-
-/* Full strength on a card. Under a chat reply the control is a quiet afterthought to the text, and
-   its 0.65 is right there; here it is a worded button among worded buttons, and at 0.65 its grey
-   falls under 3:1 on the white card. The size is its neighbours'. */
-.pr-helper-issue-actions .pr-helper-msg-copy,
-.pr-helper-question-actions .pr-helper-msg-copy {
-  opacity: 1;
-  font-size: 12px;
-}
-
 /* margin-left:auto rather than relying on the row's space-between: the jump link beside it is
    conditional (a question without a file has none), and space-between alone would swing this
    group to the left edge whenever it is the row's only child. Wraps because three controls do