git-reviewer 2.15.0 → 2.17.0

package/public/index.html

@@ -19,6 +19,19 @@
           <span id="repoButtonLabel">Open a repository</span>
         </button>
 
+        <button id="agentButton" class="agent-button hidden" onclick="openAgentDialog()"
+                title="Have the Claude Code session that wrote this code answer your comments">
+          <span class="agent-dot" aria-hidden="true"></span>
+          <span id="agentButtonLabel">Ask Claude Code</span>
+        </button>
+
+        <button id="searchButton" class="icon-button hidden" onclick="openSearch()"
+                title="Search the change (Ctrl+Shift+F)" aria-label="Search the change">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M10.68 11.74a6 6 0 01-7.92-8.98 6 6 0 018.98 7.92l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04zM11.5 7a4.5 4.5 0 10-9 0 4.5 4.5 0 009 0z"></path>
+          </svg>
+        </button>
+
         <button id="helpButton" class="icon-button" onclick="openHelp()"
                 title="How to review" aria-label="How to review">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
@@ -202,7 +215,73 @@
       </div>
     </div>
 
+    <!-- Connecting a Claude Code session to answer comments in their threads. -->
+    <div id="agentModal" class="help-modal hidden" onclick="if (event.target.id === 'agentModal') closeAgentDialog()">
+      <div class="help-card agent-card" role="dialog" aria-modal="true" aria-labelledby="agentTitle">
+        <div class="help-head">
+          <h2 id="agentTitle">Ask the session that wrote this code</h2>
+          <button class="icon-button" onclick="closeAgentDialog()" aria-label="Close">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="agent-body">
+          <div id="agentConnected" class="agent-connected hidden"></div>
+          <p class="agent-intro">Pick the Claude Code session that worked on this repository. Every comment you
+            write, and every reply you add, goes to it, and its answer appears in the thread as it is written.</p>
+          <div id="agentSessions" class="agent-sessions"></div>
+          <label class="agent-fork">
+            <input type="checkbox" id="agentFork" checked>
+            Answer in a copy of the session, so the original stays exactly as it was
+          </label>
+          <p class="agent-note">In the background the session can read the repository and nothing else.
+            To have it answer live in your terminal instead, copy its command and run it there:
+            your session, your permissions, and every comment arrives as it is written.</p>
+        </div>
+      </div>
+    </div>
+
     <aside id="sidebar" class="sidebar hidden">
+      <!-- Find across the whole change, the way an IDE's find navigator
+           searches a project: it takes the sidebar's place while open. -->
+      <section id="searchPanel" class="search-panel hidden" aria-label="Search the change">
+        <div class="search-head">
+          <h2>Search</h2>
+          <button class="search-back" type="button" onclick="closeSearch()" title="Back to the files (Esc)">Files</button>
+        </div>
+        <div class="search-box">
+          <input id="searchInput" type="search" list="searchHistory" placeholder="Find in the change"
+                 spellcheck="false" autocomplete="off" aria-label="Find in the change">
+          <datalist id="searchHistory"></datalist>
+          <button id="searchCase" class="search-toggle" type="button" aria-pressed="false" title="Match case">Aa</button>
+          <button id="searchRefs" class="search-toggle" type="button" aria-pressed="false"
+                  title="Find references: the definition, and uses added, removed and left unchanged">Refs</button>
+        </div>
+        <div class="search-options">
+          <select id="searchMode" aria-label="How to match">
+            <option value="contains">Contains</option>
+            <option value="word">Whole word</option>
+            <option value="prefix">Starts with</option>
+            <option value="suffix">Ends with</option>
+            <option value="regex">Regular expression</option>
+          </select>
+          <select id="searchScope" aria-label="Where to search">
+            <option value="changes">Changed lines</option>
+            <option value="files" selected>Changed files</option>
+            <option value="repo">Whole repository</option>
+          </select>
+        </div>
+        <div class="search-sides" role="group" aria-label="Show results">
+          <button type="button" data-side="all" class="active">All</button>
+          <button type="button" data-side="added">Added</button>
+          <button type="button" data-side="deleted">Deleted</button>
+          <button type="button" data-side="unchanged">Unchanged</button>
+        </div>
+        <div id="searchSummary" class="search-summary" role="status" aria-live="polite"></div>
+        <div id="searchResults" class="search-results" role="listbox" aria-label="Search results"></div>
+      </section>
+
       <!-- The commits a review is made of, when it is made of commits. Click
            one to review it on its own; shift-click a second to review the run
            between them -- the same gesture a pull request's commit picker
@@ -237,6 +316,7 @@
         </button>
       </div>
       <div id="codeViewer" class="code-viewer"></div>
+      <div id="searchMinimap" class="search-minimap hidden" aria-hidden="true"></div>
     </main>
 
     <div id="commentsResizeHandle" class="resize-handle hidden"></div>

package/public/style.css

@@ -651,6 +651,13 @@ button:disabled {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+/* The box keeps its right edge clear for the action buttons, which sit at
+   the top. A thread starts below them, so it can have the full width --
+   which an answer of a few paragraphs needs. */
+.comment-box .comment-followups {
+  margin-right: -194px;
+}
+
 .comment-followup-item {
   margin-bottom: 8px;
   padding: 8px 12px;
@@ -2222,3 +2229,379 @@ button:disabled {
   max-height: 8.5em;
   overflow-y: auto;
 }
+
+/* Agents answering in threads
+ *
+ * An answer from the session that wrote the code sits in the thread like any
+ * reply, marked with who wrote it so it is never mistaken for the reviewer's
+ * own note. The orange is the same family Claude Code uses for itself.
+ */
+.agent-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border: 1px solid #d1d5da;
+  border-radius: 6px;
+  background: white;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: #24292e;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.agent-button:hover {
+  background: #f6f8fa;
+  border-color: #c6cbd1;
+}
+
+.agent-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #c9ced6;
+}
+
+.agent-button.connected .agent-dot,
+.agent-connection .agent-dot {
+  background: #2da44e;
+}
+
+.agent-button.working .agent-dot {
+  background: #d97757;
+  animation: agent-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes agent-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-button.working .agent-dot { animation: none; }
+}
+
+.comment-followup-item.followup-agent {
+  border-left-color: #d97757;
+  background: rgba(217, 119, 87, 0.08);
+}
+
+.followup-author {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #b0532e;
+}
+
+.followup-markdown code {
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: rgba(27, 31, 35, 0.07);
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 11.5px;
+}
+
+.followup-code {
+  margin: 6px 0;
+  padding: 8px 10px;
+  border-radius: 4px;
+  background: rgba(27, 31, 35, 0.06);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.followup-code code {
+  padding: 0;
+  background: none;
+}
+
+.agent-typing {
+  color: #8a6d5f;
+  font-style: italic;
+}
+
+.followup-queued {
+  margin-top: 4px;
+  font-size: 11px;
+  color: #8a6d5f;
+  font-style: italic;
+}
+
+.comment-item-thread {
+  margin-top: 4px;
+  font-size: 11px;
+  color: #6a737d;
+}
+
+.comment-item-answering {
+  color: #b0532e;
+}
+
+.agent-card {
+  max-width: 640px;
+}
+
+.agent-body {
+  padding: 18px 22px 22px;
+  overflow-y: auto;
+  font-size: 13px;
+  color: #24292e;
+}
+
+.agent-intro,
+.agent-note {
+  line-height: 1.5;
+  color: #57606a;
+}
+
+.agent-note {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+.agent-sessions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 14px 0;
+}
+
+.agent-session {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+}
+
+.agent-session-copy {
+  opacity: 0.75;
+}
+
+.agent-session-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-session-title {
+  font-weight: 500;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.agent-session-meta,
+.agent-connection-meta {
+  margin-top: 2px;
+  font-size: 11.5px;
+  color: #6a737d;
+}
+
+.agent-session-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: none;
+}
+
+.agent-connect,
+.agent-copy,
+.agent-disconnect {
+  padding: 5px 10px;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.agent-connect {
+  border: none;
+  background: #d97757;
+  color: white;
+}
+
+.agent-connect:hover {
+  background: #c4643f;
+}
+
+.agent-copy,
+.agent-disconnect {
+  border: 1px solid #d1d5da;
+  background: white;
+  color: #24292e;
+}
+
+.agent-copy:hover,
+.agent-disconnect:hover {
+  background: #f6f8fa;
+}
+
+.agent-connected {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.agent-connection {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: #f0faf3;
+  border: 1px solid #c8e6d0;
+}
+
+.agent-connection .agent-dot {
+  margin-top: 5px;
+}
+
+.agent-connection > div {
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-connection-title {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-fork {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  color: #24292e;
+}
+
+.agent-empty {
+  padding: 12px 0;
+  color: #6a737d;
+}
+
+@media (max-width: 640px) {
+  .agent-session { flex-direction: column; align-items: stretch; }
+  .agent-session-actions { flex-direction: row; }
+  .agent-button { padding: 7px 9px; }
+}
+
+/* Search across the change
+ *
+ * Results are code, so they are set in the diff's monospace, and each one
+ * says which side of the change it is on with the diff's own colours.
+ */
+.code-section { position: relative; }
+.sidebar.searching > :not(#searchPanel):not(.resize-handle) { display: none !important; }
+.search-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  min-height: 0;
+  flex: 1;
+}
+.search-head { display: flex; align-items: center; justify-content: space-between; }
+.search-head h2 { font-size: 14px; font-weight: 600; color: #24292e; }
+.search-panel .search-back {
+  padding: 3px 9px; border: 1px solid #d1d5da; border-radius: 6px;
+  background: white; color: #24292e; font: inherit; font-size: 12px; cursor: pointer;
+}
+.search-panel .search-back:hover { background: #f3f4f6; }
+.search-box { display: flex; gap: 6px; }
+.search-box input {
+  flex: 1; min-width: 0; padding: 7px 9px;
+  border: 1px solid #d1d5da; border-radius: 6px; font-size: 13px;
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+}
+.search-box input:focus { outline: 2px solid #0366d6; outline-offset: -1px; }
+.search-panel .search-toggle {
+  padding: 0 8px; border: 1px solid #d1d5da; border-radius: 6px;
+  background: white; color: #57606a; cursor: pointer;
+  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
+}
+.search-panel .search-toggle:hover { background: #f3f4f6; }
+.search-panel .search-toggle[aria-pressed="true"] { background: #0366d6; border-color: #0366d6; color: white; }
+.search-options { display: flex; gap: 6px; }
+.search-options select {
+  flex: 1; min-width: 0; padding: 5px 6px; font-size: 12px;
+  border: 1px solid #d1d5da; border-radius: 6px; background: white;
+}
+.search-sides { display: flex; gap: 4px; flex-wrap: wrap; }
+.search-panel .search-sides button {
+  padding: 3px 9px; border: 1px solid #d1d5da; border-radius: 999px;
+  background: white; color: #57606a; font-size: 11.5px; font-weight: 500; cursor: pointer;
+}
+.search-panel .search-sides button:hover { background: #f3f4f6; }
+.search-panel .search-sides button.active { background: #24292e; border-color: #24292e; color: white; }
+.search-summary { font-size: 12px; color: #57606a; line-height: 1.45; }
+.search-summary .search-warning { display: block; margin-top: 4px; color: #9a6700; }
+.search-summary .search-error { color: #cf222e; }
+.search-results { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -14px; }
+.search-panel .search-file {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  padding: 6px 14px; border: none; border-radius: 0; background: #f6f8fa; cursor: pointer;
+  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; color: #24292e; text-align: left;
+  white-space: normal; position: sticky; top: 0; transform: none;
+}
+.search-panel .search-file:hover { background: #eef1f4; }
+.search-file .count {
+  margin-left: auto; padding: 1px 7px; border-radius: 999px;
+  background: #e1e4e8; color: #57606a; font-weight: 500; font-size: 11px;
+}
+.search-file .elsewhere { font-weight: 400; color: #8b949e; }
+.search-file[aria-expanded="false"] + .search-group { display: none; }
+.search-hit {
+  position: relative;
+  display: grid; grid-template-columns: 14px 34px minmax(0, 1fr); gap: 6px; align-items: baseline;
+  padding: 3px 14px; cursor: pointer;
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 11.5px;
+}
+.search-hit:hover { background: #f3f6fa; }
+.search-hit.selected { background: #ddf4ff; }
+.search-hit .side { text-align: center; font-weight: 700; }
+.search-hit[data-side="added"] .side { color: #1a7f37; }
+.search-hit[data-side="deleted"] .side { color: #cf222e; }
+.search-hit[data-side="context"] .side { color: #8b949e; }
+.search-hit[data-side="untouched"] .side { color: #0969da; }
+.search-hit .num { color: #8b949e; text-align: right; font-variant-numeric: tabular-nums; }
+.search-hit .text { white-space: pre; overflow: hidden; text-overflow: ellipsis; color: #24292e; }
+.search-hit[data-side="deleted"] .text { color: #82071e; }
+.search-hit mark { background: #fff8c5; color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px #d4a72c; }
+.search-hit .role {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 10.5px; color: #8250df; font-weight: 600;
+}
+.search-panel .hit-comment {
+  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+  visibility: hidden; padding: 1px 6px; border: 1px solid #d1d5da; border-radius: 4px;
+  background: white; color: #24292e; font: 11px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer;
+}
+.search-panel .hit-comment:hover { background: #f3f4f6; }
+.search-hit:hover .hit-comment, .search-hit.selected .hit-comment { visibility: visible; }
+.search-preview {
+  margin: 2px 14px 6px 34px; padding: 6px 8px; border-left: 2px solid #0969da;
+  background: #f6f8fa; font: 11px/1.5 SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  white-space: pre; overflow-x: auto; color: #24292e;
+}
+.search-preview .focus { background: #fff8c5; display: inline-block; min-width: 100%; }
+.line.search-flash { animation: search-flash 1.6s ease-out; }
+@keyframes search-flash { 0%, 30% { box-shadow: inset 4px 0 0 #0969da; background: #ddf4ff; } }
+@media (prefers-reduced-motion: reduce) { .line.search-flash { animation: none; box-shadow: inset 4px 0 0 #0969da; } }
+.search-minimap {
+  position: absolute; top: 58px; right: 2px; bottom: 6px; width: 8px; pointer-events: none;
+}
+.search-minimap span {
+  position: absolute; right: 0; width: 8px; height: 3px; border-radius: 1px;
+  background: #d4a72c; pointer-events: auto; cursor: pointer;
+}
+.search-minimap span[data-side="added"] { background: #2da44e; }
+.search-minimap span[data-side="deleted"] { background: #cf222e; }