@vintasoftware/pr-review-canvas 0.2.0 → 0.4.0

package/static/styles/base.css

@@ -22,8 +22,10 @@
   --s4: var(--v4);
   --s5: var(--v5);
   --s6: var(--v6);
-  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
+  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
 
   --v1: light-dark(#ffd43b, #ffe066);
   --v2: light-dark(#ffa94d, #ffc078);
@@ -31,7 +33,15 @@
   --v4: light-dark(#da77f2, #e599f7);
   --v5: light-dark(#9775fa, #b197fc);
   --v6: light-dark(#748ffc, #91a7ff);
-  --stripe-y: linear-gradient(180deg, var(--v1) 0 1px, var(--v2) 1px 2px, var(--v3) 2px 3px, var(--v4) 3px 4px, var(--v5) 4px 5px, var(--v6) 5px 6px);
+  --stripe-y: linear-gradient(
+    180deg,
+    var(--v1) 0 1px,
+    var(--v2) 1px 2px,
+    var(--v3) 2px 3px,
+    var(--v4) 3px 4px,
+    var(--v5) 4px 5px,
+    var(--v6) 5px 6px
+  );
 
   --bg: light-dark(#ffffff, #1e1f2b);
   --panel: light-dark(#ffffff, #282a3a);
@@ -80,10 +90,10 @@
 
 /* The server writes `data-theme` for every load. `auto` matches neither rule, which leaves the
    `color-scheme: light dark` above to follow the operating system. */
-:root[data-theme="dark"] {
+:root[data-theme='dark'] {
   color-scheme: dark;
 }
-:root[data-theme="light"] {
+:root[data-theme='light'] {
   color-scheme: light;
 }
 
@@ -218,6 +228,6 @@ strong {
 }
 
 /* The hidden attribute takes priority over component layout styles. */
-[hidden]:not([hidden="until-found"]) {
+[hidden]:not([hidden='until-found']) {
   display: none !important;
 }

package/static/styles/chat-panel.css

@@ -0,0 +1,81 @@
+.chat-launcher,
+.chat-minimize {
+  display: none;
+}
+@media (max-width: 1360px) {
+  .chat-launcher {
+    display: block;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    z-index: 10;
+    padding: 14px 20px;
+    border: 1px solid var(--ink);
+    border-radius: 999px;
+    background: var(--accent);
+    color: var(--bg);
+    box-shadow: 0 4px 20px #0003;
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .chat-launcher[hidden] {
+    display: none;
+  }
+  .chat-minimize {
+    display: inline-block;
+  }
+  dialog.chat-dialog {
+    position: fixed;
+    inset: auto 20px 20px auto;
+    width: min(420px, calc(100vw - 40px));
+    height: min(680px, calc(100dvh - 40px));
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--ink);
+    border-radius: 12px;
+    background: var(--panel);
+    color: var(--fg);
+    box-shadow: 0 8px 32px #0004;
+    overflow: hidden;
+    z-index: 11;
+  }
+  .chat-dialog .chat {
+    position: relative;
+    top: auto;
+    height: 100%;
+    padding: 0;
+  }
+  .chat-dialog .chat-h,
+  .chat-dialog .ctx-line,
+  .chat-dialog .chat-composer {
+    flex-shrink: 0;
+  }
+  .chat-dialog .chat-h h2 {
+    margin-bottom: 0;
+  }
+  .chat-dialog .chat-composer {
+    margin: 0;
+    padding: 12px 14px;
+    gap: 8px;
+  }
+  .chat-dialog textarea {
+    max-height: 25dvh;
+  }
+}
+@media (max-width: 600px) {
+  dialog.chat-dialog {
+    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px;
+    width: auto;
+    height: calc(100dvh - 24px - env(safe-area-inset-bottom));
+  }
+  .chat-launcher {
+    right: 16px;
+    bottom: max(16px, env(safe-area-inset-bottom));
+  }
+  html:has(.chat-dialog:modal) {
+    overflow: hidden;
+  }
+}

package/static/styles/chat-tools.css

@@ -1,4 +1,32 @@
 /* Chat context, proposed comments, quick questions, and settings. */
+.chat-tool-calls > summary {
+  padding: 4px 0;
+  gap: 8px;
+  align-items: baseline;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.chat-tool-calls > summary::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+}
+.chat-tool-calls[open] > summary::before {
+  transform: rotate(45deg);
+}
+.chat-tool-calls > ul {
+  margin: 4px 0 8px;
+  padding-left: 14px;
+  list-style: none;
+}
+.chat-tool-calls > ul > li {
+  margin: 4px 0;
+  overflow-wrap: anywhere;
+}
 .ctx-line {
   display: flex;
   align-items: baseline;

package/static/styles/chat.css

@@ -25,7 +25,7 @@
   z-index: 3;
 }
 .handle::before {
-  content: "";
+  content: '';
   width: 4px;
   height: 36px;
   border-left: 1px solid currentColor;

package/static/styles/commands.css

@@ -14,10 +14,10 @@
   line-height: inherit;
 }
 .cmd::before {
-  content: "[ ";
+  content: '[ ';
 }
 .cmd::after {
-  content: " ]";
+  content: ' ]';
 }
 .cmd:hover {
   text-decoration: underline;
@@ -25,12 +25,12 @@
   text-decoration-thickness: 2px;
 }
 .cmd:disabled,
-.cmd[aria-disabled="true"] {
+.cmd[aria-disabled='true'] {
   color: var(--fg-dim);
   cursor: not-allowed;
   text-decoration: none;
 }
-.cmd[aria-busy="true"] {
+.cmd[aria-busy='true'] {
   color: var(--fg-muted);
   cursor: progress;
 }
@@ -116,6 +116,12 @@
   color: var(--purple);
   border-color: currentColor;
 }
+/* The two local reviews: work with no pull request, so neither open nor closed. */
+.pill.branch,
+.pill.uncommitted {
+  color: var(--accent);
+  border-color: currentColor;
+}
 .pill.agent {
   color: var(--fg);
   border-color: var(--ink);

package/static/styles/diff.css

@@ -127,7 +127,7 @@ tr.thread.hidden-thread .x {
   font-size: 12px;
 }
 tr.is-approx .x::before {
-  content: "near line ";
+  content: 'near line ';
   color: var(--fg-muted);
   font-size: 11px;
 }

package/static/styles/header.css

@@ -20,12 +20,26 @@
   text-transform: uppercase;
   font-size: 12px;
 }
-.brand .box {
-  border: 2px solid var(--ink);
-  padding: 2px 8px;
-  box-shadow: 3px 3px 0 var(--shadow);
+.brand-wordmark {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding-left: 40px;
+  white-space: nowrap;
   color: var(--fg);
 }
+.brand-icon {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+}
+.brand {
+  flex-wrap: wrap;
+}
 .hdr-actions {
   display: flex;
   flex-wrap: wrap;

package/static/styles/layout.css

@@ -31,8 +31,8 @@
   display: grid;
   grid-template-columns: auto auto minmax(0, 1fr);
   grid-template-areas:
-    "d n t"
-    "d n m";
+    'd n t'
+    'd n m';
   column-gap: 8px;
   padding: 6px 14px 6px 12px;
   color: var(--fg);
@@ -44,8 +44,8 @@
 .tree a:not(:has(.dot)) {
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    "t"
-    "m";
+    't'
+    'm';
 }
 .tree a:hover {
   background: var(--panel-2);

package/static/styles/panels.css

@@ -88,6 +88,10 @@
   box-shadow: 2px 2px 0 var(--shadow);
   font-size: 13px;
 }
+/* The same bar for a canvas that still applies: a note, not a warning. */
+.stale-bar.carried-over-bar {
+  background: var(--bg);
+}
 .notice {
   margin: 10px 0 0;
   padding: 6px 10px;

package/static/styles/responsive.css

@@ -4,25 +4,11 @@
     grid-template-columns: var(--rail-w) minmax(0, 1fr);
     background: linear-gradient(var(--ink), var(--ink)) calc(var(--rail-w) - 1px) 0 / 1px 100% no-repeat;
   }
-  .chat {
-    grid-column: 2;
-    position: static;
-    align-self: auto;
-    height: auto;
-    border-top: 2px solid var(--ink);
-    padding: 0;
-  }
-  .transcript {
-    max-height: 50vh;
-  }
   .handle {
     display: none;
   }
 }
 @media (max-width: 1000px) {
-  .chat {
-    grid-column: 1 / -1;
-  }
   .layout,
   .layout.no-chat {
     grid-template-columns: minmax(0, 1fr);
@@ -53,7 +39,7 @@
   }
   .tree a,
   .tree a:not(:has(.dot)) {
-    grid-template-areas: "d n t";
+    grid-template-areas: 'd n t';
     grid-template-columns: auto auto minmax(0, 1fr);
     align-items: center;
     border: 1px solid var(--ink);

package/static/styles/review-actions.css

@@ -35,6 +35,7 @@ tr.sel-bar .lbl {
   outline: 2px solid var(--focus);
   outline-offset: 1px;
 }
+.preview-controls,
 .composer-actions {
   display: flex;
   gap: 12px;

package/static/styles/review.css

@@ -52,7 +52,7 @@
   cursor: pointer;
   transition: transform 0.12s ease-out;
 }
-.chev[aria-expanded="true"] {
+.chev[aria-expanded='true'] {
   transform: rotate(90deg);
 }
 .body {
@@ -323,6 +323,21 @@
 .pr-desc {
   border-top: 1px solid var(--ink);
 }
+.review-history {
+  border-top: 1px solid var(--line);
+}
+.review-entry > .pill {
+  margin-bottom: 10px;
+}
+.review-entry .cmt {
+  row-gap: 8px;
+}
+.review-entry .who {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+}
 /* A <details> summary reads like a card header: the chevron before the title is its toggle. The row
    itself keeps the default cursor and no hover background; the native <details> handles the click. */
 summary {
@@ -469,5 +484,11 @@ details[open] > summary .chev {
   margin: 0;
 }
 
-.prose img { max-width: 100%; height: auto; }
-img.av { object-fit: cover; border-radius: 50%; }
+.prose img {
+  max-width: 100%;
+  height: auto;
+}
+img.av {
+  object-fit: cover;
+  border-radius: 50%;
+}