prreviewbuddy 0.50.0 → 0.52.2

package/static/sidebar.css

@@ -653,6 +653,51 @@
   margin-top: 2px;
 }
 
+/* The extension's cards, laid out as the workspace's are: the figure leads and the label sits
+   beside it, pinned to the top row so four cards align with or without a note. Only once each
+   card has the room: at the sidebar's narrowest a quarter-width card cannot hold "Questions" beside
+   its figure, and the stacked card above stays. The grid is the query container because the rule
+   only needs its children; nothing else in the panel is contained. Selectors carry the extension
+   class, so they outrank the base rules wherever those sit in the file. */
+.pr-helper-extension .pr-helper-overview-stats { container-type: inline-size; }
+
+@container (min-width: 400px) {
+  .pr-helper-extension .pr-helper-overview-stat {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+    column-gap: 8px;
+    align-items: start;
+    padding: 10px 12px;
+    text-align: left;
+  }
+  .pr-helper-extension .pr-helper-overview-stat-value {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    font-size: 24px;
+    font-weight: 300;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+  .pr-helper-extension .pr-helper-overview-stat-value-wide { font-size: 15px; }
+  .pr-helper-extension .pr-helper-overview-stat-label {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: start;
+    /* Squares the label's cap height with the figure's top. */
+    margin-top: 5px;
+  }
+  .pr-helper-extension .pr-helper-overview-stat-note {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+  }
+  /* Into flow, ahead of the word, now that nothing is centred for it to compensate. */
+  .pr-helper-extension .pr-helper-overview-stat-info { position: static; transform: none; }
+  /* The whole card lights up as the link, so the arrow only pushed the label off the figure. */
+  .pr-helper-extension .pr-helper-overview-stat-arrow { display: none; }
+}
+
 /* Explains a capped review, and only ever appears on one. Sits ahead of the 11px label rather
    than beside the value, so it's sized to that row — against the bold number it read as a
    glyph belonging to the count. */
@@ -895,11 +940,30 @@
 .pr-helper-finding-copy {
   position: relative;
   flex-shrink: 0;
-  margin-top: -1px;
   opacity: 1;
   font-size: 12px;
 }
 
+/* Copy and Ask Buddy are a pair and speak one interaction language, on both surfaces: the same
+   24px target and 6px corner, neutral grey at rest, and a soft surface on hover with the icon
+   colour left alone. Colour is kept for meaning: purple for an Ask Buddy menu that is open, and
+   the app's green or red for what Copy just did (.pr-helper-msg-copy.copied / .failed below). Pulled up 3px so the box centres on the title's first line.
+   Doubled class: the chat's .pr-helper-msg-copy rules sit later in this file and would win a tie. */
+.pr-helper-msg-copy.pr-helper-finding-copy {
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-top: -3px;
+  padding: 0;
+  border-radius: 6px;
+  color: var(--color-fg-muted, #57606a);
+}
+.pr-helper-finding-copy:hover:not(.copied):not(.failed) {
+  background: rgba(31, 35, 40, 0.07);
+  color: var(--color-fg-muted, #57606a);
+}
+.pr-helper-finding-copy:focus-visible { outline: 2px solid #9333ea; outline-offset: -2px; }
+
 /* 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. */
@@ -929,10 +993,82 @@
   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. */
+/* After a click the bubble carries "Copied" or "Copy failed" and shows without waiting for the
+   pointer: below the button rather than beside it, where Ask Buddy sits. */
 .pr-helper-finding-copy.copied::after,
-.pr-helper-finding-copy.failed::after { display: none; }
+.pr-helper-finding-copy.failed::after { opacity: 1; transition-delay: 0s; }
+
+/* Ask Buddy on a finding card, in the extension: the sparkle beside Copy, and its menu. Scoped to
+   .pr-helper-extension, which only the extension's root carries: the workspace loads this sheet
+   too, its review document is also a .pr-helper-sidebar, and it styles its own menu in shell.css
+   under .prb-doc. The panel matches the selection popover, which offers the same list. */
+.pr-helper-extension .prb-ask-buddy { position: relative; flex-shrink: 0; }
+.pr-helper-extension .prb-ask-buddy-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-top: -3px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-fg-muted, #57606a);
+  cursor: pointer;
+}
+.pr-helper-extension .prb-ask-buddy-trigger:hover { background: rgba(31, 35, 40, 0.07); }
+.pr-helper-extension .prb-ask-buddy-trigger[aria-expanded='true'] { background: rgba(147, 51, 234, 0.1); color: #9333ea; }
+.pr-helper-extension .prb-ask-buddy-trigger:focus-visible { outline: 2px solid #9333ea; outline-offset: -2px; }
+.pr-helper-extension .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;
+  font-weight: 400;
+  font-family: inherit;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+.pr-helper-extension .prb-ask-buddy-trigger:hover::after,
+.pr-helper-extension .prb-ask-buddy-trigger:focus-visible::after { opacity: 1; transition-delay: 0.35s; }
+.pr-helper-extension .prb-ask-buddy-trigger[aria-expanded='true']::after { display: none; }
+.pr-helper-extension .prb-ask-buddy-panel {
+  position: absolute;
+  top: 26px;
+  right: 0;
+  z-index: 5;
+  width: 240px;
+  max-width: calc(100vw - 48px);
+  padding: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  text-align: left;
+}
+/* The card whose menu is open comes forward. A dismissed card's opacity makes it its own layer,
+   where the panel's z-index counts only inside the card: the next card's Copy and sparkle painted
+   across the open menu, and the menu was drawn faded. */
+.pr-helper-extension [data-finding-card]:has(.prb-ask-buddy-trigger[aria-expanded='true']) {
+  position: relative;
+  z-index: 6;
+  opacity: 1;
+}
+.pr-helper-extension .prb-ask-buddy-panel .pr-helper-selection-menu-item { display: block; width: 100%; text-align: left; }
+.pr-helper-extension .prb-ask-buddy-panel .pr-helper-selection-menu-item[disabled] { opacity: 0.5; cursor: default; }
+/* Arrow keys move focus through these items, so the focus has to show. */
+.pr-helper-extension .prb-ask-buddy-panel .pr-helper-selection-menu-item:focus-visible { outline: 2px solid #9333ea; outline-offset: -2px; }
 
 .pr-helper-issue-desc {
   font-size: 13px;
@@ -2050,6 +2186,15 @@
 
 .pr-helper-markdown a:hover { text-decoration: underline; }
 
+/* State, not decoration: it changes what the next question means. Wraps rather than truncates. */
+.pr-helper-ask-scope {
+  margin: 0 0 6px;
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+  overflow-wrap: anywhere;
+}
+.pr-helper-ask-scope-value { color: var(--color-fg-default, #24292f); }
+
 .pr-helper-chat-input-row {
   display: flex;
   gap: 6px;
@@ -2133,7 +2278,8 @@
 
 /* Deliberately quieter than the chips it reveals: once the reviewer is typing their own
    questions, this is a door they may never open again, not a call to action. */
-.pr-helper-suggestions-toggle {
+.pr-helper-suggestions-toggle,
+.pr-helper-saved-prompts-toggle {
   display: flex;
   align-items: center;
   gap: 5px;
@@ -2149,9 +2295,11 @@
   cursor: pointer;
 }
 
-.pr-helper-suggestions-toggle:hover { color: #9333ea; }
+.pr-helper-suggestions-toggle:hover,
+.pr-helper-saved-prompts-toggle:hover { color: #9333ea; }
 
-.pr-helper-suggestions-toggle::before {
+.pr-helper-suggestions-toggle::before,
+.pr-helper-saved-prompts-toggle::before {
   content: '';
   width: 0;
   height: 0;
@@ -2161,10 +2309,12 @@
   transition: transform 0.15s ease;
 }
 
-.pr-helper-suggestions-toggle[aria-expanded='true']::before { transform: rotate(90deg); }
+.pr-helper-suggestions-toggle[aria-expanded='true']::before,
+.pr-helper-saved-prompts-toggle[aria-expanded='true']::before { transform: rotate(90deg); }
 
 /* Open, the toggle is a label for the list right beneath it rather than a lone control. */
-.pr-helper-suggestions-toggle[aria-expanded='true'] { margin-bottom: 8px; }
+.pr-helper-suggestions-toggle[aria-expanded='true'],
+.pr-helper-saved-prompts-toggle[aria-expanded='true'] { margin-bottom: 8px; }
 
 .pr-helper-quick-prompts {
   display: flex;
@@ -2187,7 +2337,13 @@
 .pr-helper-quick-prompt-button:hover { border-color: #9333ea; color: #9333ea; }
 
 .pr-helper-quick-prompts-section-group,
-.pr-helper-quick-prompts-saved-group { display: contents; }
+/* Its own block below the suggestions, not part of their stack: that stack folds away after the
+   first question, and Your prompts stays as the reviewer left it. */
+.pr-helper-quick-prompts-saved-group { margin-bottom: 8px; }
+/* .pr-helper-quick-prompts is a flex row, which beats the hidden attribute. */
+#pr-helper-saved-prompts-list[hidden] { display: none; }
+/* The count is a quantity, not part of the heading, so it drops the heading's caps and weight. */
+.pr-helper-saved-prompts-count { font-weight: 600; text-transform: none; letter-spacing: 0; }
 
 /* ── The reviewer's own prompts ──
    The chip and its edit control read as one object, so the border and the hover colour belong to
@@ -2887,7 +3043,9 @@
   transition: opacity 0.12s;
 }
 
-.pr-helper-file-item:hover .pr-helper-file-stats { opacity: 0; }
+.pr-helper-file-item:hover .pr-helper-file-stats,
+.pr-helper-file-item:focus-within .pr-helper-file-stats,
+.pr-helper-file-item:has(.pr-helper-file-actions [aria-expanded='true']) .pr-helper-file-stats { opacity: 0; }
 
 /* ── Hover-reveal action buttons ── */
 .pr-helper-file-actions {
@@ -2902,38 +3060,85 @@
   transition: opacity 0.12s;
 }
 
-/* Opaque too, and for the same reason as the buttons: making only the buttons solid still lets
-   text show through the gaps between them. The tray occludes as one block.
+/* One trigger, the row's "more actions", in the icon language Copy and Ask Buddy use: neutral grey,
+   a soft surface on hover, colour only when it means something. It sits where the +/- stats are,
+   which already give way on hover. Revealed by keyboard focus as well as the pointer, and held
+   while its menu is open, so the menu does not vanish when the pointer leaves the row. */
+.pr-helper-file-item:hover .pr-helper-file-actions,
+.pr-helper-file-item:focus-within .pr-helper-file-actions,
+.pr-helper-file-actions:has([aria-expanded='true']) {
+  opacity: 1;
+  pointer-events: auto;
+}
 
-   The colour tracks the row's own state rather than being a flat white, because the row tints on
-   hover — #fbf7fe is that 4% purple composited over white, precomputed because a translucent
-   overlay on a translucent row would double the tint.
+/* Top right, level with the +/- stats it replaces on hover, rather than centred down a tall row.
+   No transform: one would make the tray its own stacking context, and the next row would paint
+   over the open menu. Raised while open for the same reason. */
+.pr-helper-file-actions[data-menu] {
+  top: 13px;
+  right: 12px;
+  transform: none;
+}
+.pr-helper-file-actions:has([aria-expanded='true']) { z-index: 10; }
 
-   Bordered and shadowed, because the tray is not part of the row: it is absolutely positioned over
-   the top of it, occluding whatever text is underneath. Without an edge, three buttons simply
-   appeared mid-sentence with no account of where the words went — the outline plus the shadow say
-   "this is one panel, floating above", which is exactly what it is.
+.pr-helper-file-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-fg-muted, #57606a);
+  cursor: pointer;
+}
+.pr-helper-file-menu-trigger:hover,
+.pr-helper-file-menu-trigger[aria-expanded='true'] { background: rgba(31, 35, 40, 0.07); }
+.pr-helper-file-menu-trigger:focus-visible { outline: 2px solid #9333ea; outline-offset: -2px; }
 
-   Radius 8 against the buttons' 4: an outer corner has to be looser than the corners it contains,
-   or the nesting reads as a mistake. Padding is symmetric now for the same reason — the old
-   `0 … 14px` let the buttons sit flush against the right edge, which is invisible without a border
-   and lopsided with one. */
-.pr-helper-file-actions {
+/* The same panel as the selection popover and a card's Ask Buddy menu. */
+.pr-helper-file-menu {
+  position: absolute;
+  top: 28px;
+  right: 0;
+  z-index: 5;
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+}
+.pr-helper-file-menu .pr-helper-action-btn {
+  display: block;
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-fg-default, #24292f);
+  font-family: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.pr-helper-file-menu .pr-helper-action-btn:hover:not([disabled]) { background: rgba(147, 51, 234, 0.1); color: #9333ea; }
+.pr-helper-file-menu .pr-helper-action-btn:focus-visible { outline: 2px solid #9333ea; outline-offset: -2px; }
+.pr-helper-file-menu .pr-helper-action-btn[disabled] { opacity: 0.5; cursor: default; }
+
+/* The running state keeps the tray: "Analysing…" and Cancel float over the row's text as one
+   panel, and #fbf7fe is the row's 4% purple hover tint composited over white. */
+.pr-helper-file-actions-running {
   background: #ffffff;
   padding: 4px 6px;
   border: 1px solid rgba(147, 51, 234, 0.25);
   border-radius: 8px;
   box-shadow: 0 2px 6px rgba(31, 35, 40, 0.10);
-  /* The tray's default `stretch` left the "Analysing…" label top-aligned in a box the taller
-     Cancel button had grown, so the two read as being on different lines. */
   align-items: center;
 }
-
-.pr-helper-file-item:hover .pr-helper-file-actions {
-  opacity: 1;
-  pointer-events: auto;
-  background: #fbf7fe;
-}
+.pr-helper-file-item:hover .pr-helper-file-actions-running { background: #fbf7fe; }
 
 /* Opts out of the hover gate above, and must: this is the only indication that a follow-up is
    running and the only way to stop it, so a version of it you have to hover to find would leave
@@ -3365,7 +3570,9 @@
   border: 2px solid #9333ea;
   border-radius: 6px;
   pointer-events: none;
-  z-index: 999996; /* below the overlay's 999997, above ordinary page content */
+  /* Below every floating control (Save for later is 999996, the overlay 999997): a decoration that
+     shared a number painted its border across Save for later. Still above ordinary page content. */
+  z-index: 999995;
   /* No dimming wash behind this. It used to carry `box-shadow: 0 0 0 2000px rgba(147,51,234,
      0.04)` — a full-page purple tint over everything outside the box, painted above all of
      GitHub's own content. At 4% it read as subtle until something saturated sat under it:
@@ -3912,8 +4119,17 @@
   flex-direction: column;
   min-width: 220px;
   padding: 4px;
+  /* With the saved prompts the list is about 375px. position() keeps it inside the window, but a
+     window shorter than the list would cut it off, so there it scrolls instead. 16px is the two
+     8px viewport margins position() leaves. */
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+  box-sizing: border-box;
 }
 
+/* Scrolled, not squashed: a flex column shrinks its items to fit a capped height. */
+.pr-helper-selection-popover-expanded .pr-helper-selection-menu > * { flex-shrink: 0; }
+
 .pr-helper-selection-menu-item {
   padding: 7px 10px;
   border: none;