pi-studio 0.5.44 → 0.5.46

package/client/studio.css

@@ -225,12 +225,18 @@
       filter: brightness(0.95);
     }
 
-    #scratchpadBtn.has-content {
+    #scratchpadBtn.has-content,
+    #reviewNotesBtn.has-content,
+    #reviewNotesBtn.is-active {
       border-color: var(--accent);
       color: var(--accent);
       font-weight: 600;
     }
 
+    #reviewNotesBtn.is-active {
+      background: var(--accent-soft);
+    }
+
     .section-header select {
       font-weight: 600;
       font-size: 14px;
@@ -313,6 +319,51 @@
       min-height: 0;
     }
 
+    .source-body {
+      display: flex;
+      gap: 12px;
+      flex: 1 1 auto;
+      min-height: 0;
+      align-items: stretch;
+    }
+
+    .source-primary {
+      display: flex;
+      flex: 1 1 auto;
+      min-width: 0;
+      min-height: 0;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .review-notes-dock-wrap {
+      flex: 0 0 clamp(300px, 34%, 420px);
+      min-width: 280px;
+      min-height: 0;
+      display: flex;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: var(--panel);
+      box-shadow: var(--panel-shadow);
+      overflow: hidden;
+    }
+
+    .review-notes-dock-wrap[hidden] {
+      display: none !important;
+    }
+
+    .review-notes-dock {
+      width: 100%;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      border: 0;
+      border-radius: 0;
+      overflow: hidden;
+      background: var(--panel);
+      box-shadow: none;
+    }
+
     .source-meta {
       display: flex;
       align-items: center;
@@ -338,6 +389,24 @@
       white-space: nowrap;
     }
 
+    .source-badge-button {
+      cursor: pointer;
+      transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
+    }
+
+    .source-badge-button:not(:disabled):hover,
+    .source-badge-button:not(:disabled):focus-visible {
+      border-color: var(--accent);
+      color: var(--text);
+      background: var(--accent-soft);
+      outline: none;
+    }
+
+    .source-badge-button:disabled {
+      cursor: default;
+      opacity: 0.75;
+    }
+
     .sync-badge.sync {
       border-color: var(--border-muted);
       color: var(--muted);
@@ -417,6 +486,7 @@
     }
 
     .editor-highlight-wrap {
+      --editor-review-note-gutter-width: 0px;
       --editor-line-number-gutter-width: 0px;
       position: relative;
       display: flex;
@@ -430,16 +500,71 @@
       overscroll-behavior: none;
     }
 
+    .editor-review-note-gutter,
     .editor-line-number-gutter {
       position: absolute;
       inset: 0 auto 0 0;
-      width: var(--editor-line-number-gutter-width);
       overflow: hidden;
-      border-right: 1px solid var(--border-muted);
       background: var(--panel-2);
+      z-index: 0;
+    }
+
+    .editor-review-note-gutter {
+      width: var(--editor-review-note-gutter-width);
+      border-right: 1px solid var(--border-muted);
+      z-index: 2;
+    }
+
+    .editor-review-note-gutter-content {
+      min-height: 100%;
+      padding: 10px 4px;
+    }
+
+    .editor-review-note-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 1.45em;
+    }
+
+    .editor-review-note-marker {
+      width: 18px;
+      min-width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      border: 1px solid transparent;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      line-height: 1;
+      font-weight: 700;
+      color: var(--accent);
+      background: var(--accent-soft);
+      cursor: pointer;
+    }
+
+    .editor-review-note-marker.has-multiple {
+      width: auto;
+      min-width: 18px;
+      padding: 0 4px;
+      border-color: var(--accent);
+    }
+
+    .editor-review-note-marker:hover,
+    .editor-review-note-marker:focus-visible {
+      border-color: var(--accent);
+      filter: brightness(0.96);
+      outline: none;
+    }
+
+    .editor-line-number-gutter {
+      left: var(--editor-review-note-gutter-width);
+      width: var(--editor-line-number-gutter-width);
+      border-right: 1px solid var(--border-muted);
       color: var(--muted);
       pointer-events: none;
-      z-index: 0;
     }
 
     .editor-line-number-gutter-content {
@@ -486,13 +611,14 @@
       margin: 0;
       border: 0;
       border-radius: 8px;
-      padding: 10px 10px 10px calc(10px + var(--editor-line-number-gutter-width));
+      padding: 10px 10px 10px calc(10px + var(--editor-review-note-gutter-width) + var(--editor-line-number-gutter-width));
       overflow: auto;
       pointer-events: none;
       white-space: pre-wrap;
       word-break: normal;
       overflow-wrap: break-word;
       overscroll-behavior: none;
+      scrollbar-width: none;
       font-family: var(--font-mono);
       font-size: 13px;
       line-height: 1.45;
@@ -501,6 +627,12 @@
       background: transparent;
     }
 
+    .editor-highlight::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+
     #sourceText {
       position: relative;
       z-index: 1;
@@ -513,7 +645,7 @@
       resize: none;
       outline: none;
       overscroll-behavior: none;
-      padding: 10px 10px 10px calc(10px + var(--editor-line-number-gutter-width));
+      padding: 10px 10px 10px calc(10px + var(--editor-review-note-gutter-width) + var(--editor-line-number-gutter-width));
     }
 
     #sourceText.highlight-active {
@@ -529,6 +661,29 @@
       -webkit-text-fill-color: transparent;
     }
 
+    .editor-selection-comment-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 4;
+      min-height: 24px;
+      border-radius: 999px;
+      padding: 0 10px;
+      font-size: 12px;
+      line-height: 1;
+      background: var(--accent-soft);
+      border-color: var(--accent);
+      color: var(--accent);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    }
+
+    .editor-selection-comment-btn:hover,
+    .editor-selection-comment-btn:focus-visible {
+      background: var(--accent-soft-strong);
+      color: var(--accent);
+      border-color: var(--accent);
+    }
+
     .hl-heading {
       color: var(--md-heading);
       font-weight: 700;
@@ -735,6 +890,75 @@
       margin-bottom: 1em;
     }
 
+    .preview-comment-block {
+      position: relative;
+    }
+
+    .preview-comment-block-content {
+      scroll-margin-top: 24px;
+    }
+
+    .preview-comment-controls {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 4;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      transform: translateY(-0.38rem);
+    }
+
+    .preview-comment-summary {
+      display: none !important;
+    }
+
+    .preview-comment-add {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 24px;
+      border-radius: 999px;
+      padding: 0 10px;
+      font-size: 12px;
+      line-height: 1;
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(-2px);
+      transition: opacity 120ms ease, transform 120ms ease, color 120ms ease, border-color 120ms ease, background-color 120ms ease;
+      background: var(--accent-soft);
+      border-color: var(--accent);
+      color: var(--accent);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    }
+
+    .preview-comment-block.has-selection .preview-comment-add {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0);
+    }
+
+    .preview-comment-add:hover,
+    .preview-comment-add:focus-visible {
+      background: var(--accent-soft-strong);
+      color: var(--accent);
+      border-color: var(--accent);
+    }
+
+    .preview-jump-highlight {
+      border-radius: 10px;
+      background: linear-gradient(to right, var(--accent-soft-strong) 0, var(--accent-soft) 3px, transparent 3px, transparent 100%);
+      box-shadow: 0 0 0 1px var(--accent-soft);
+    }
+
+    .preview-comment-inline-highlight {
+      background: var(--accent-soft-strong);
+      color: inherit;
+      border-radius: 4px;
+      padding: 0 0.08em;
+      box-shadow: 0 0 0 1px var(--accent-soft);
+    }
+
     .rendered-markdown li::marker {
       color: var(--md-list-bullet);
     }
@@ -1572,10 +1796,191 @@
       filter: brightness(0.95);
     }
 
+    .review-notes-dock .scratchpad-header {
+      padding: 12px 14px 10px;
+    }
+
+    .review-notes-dock .scratchpad-header h2 {
+      font-size: 15px;
+    }
+
+    .review-notes-dock .scratchpad-description {
+      font-size: 11px;
+      line-height: 1.4;
+      word-break: normal;
+      overflow-wrap: normal;
+    }
+
+    .review-notes-inline-token {
+      display: inline-block;
+      white-space: nowrap;
+      font-family: var(--font-mono);
+    }
+
+    .review-notes-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--border);
+      background: var(--panel-2);
+      box-shadow: inset 0 -1px 0 var(--border-muted);
+    }
+
+    .review-notes-empty {
+      padding: 14px;
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--muted);
+      border-bottom: 1px solid var(--border-muted);
+      background: var(--panel);
+    }
+
+    .review-notes-empty[hidden] {
+      display: none !important;
+    }
+
+    .review-notes-list {
+      display: flex;
+      flex: 1 1 auto;
+      min-height: 0;
+      flex-direction: column;
+      gap: 12px;
+      padding: 14px;
+      overflow: auto;
+      background: var(--panel);
+    }
+
+    .review-notes-dock-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: 10px 14px 12px;
+      border-top: 1px solid var(--border);
+      background: var(--panel-2);
+      box-shadow: inset 0 1px 0 var(--border-muted);
+    }
+
+    .review-notes-dock-footer .scratchpad-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .review-note-card {
+      border: 1px solid var(--border-muted);
+      border-radius: 12px;
+      background: var(--panel-2);
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .review-note-card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .review-note-card-title {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .review-note-anchor {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    .review-note-quote {
+      font-size: 12px;
+      color: var(--muted);
+      font-family: var(--font-mono);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .review-note-card-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+
+    .review-note-card textarea {
+      width: 100%;
+      min-height: 92px;
+      border-radius: 8px;
+      border: 0;
+      padding: 10px 12px;
+      background: var(--panel);
+      color: var(--text);
+      font-family: var(--font-mono);
+      font-size: 13px;
+      line-height: 1.5;
+      resize: vertical;
+      outline: none;
+      box-shadow: inset 0 0 0 1px var(--border-muted);
+    }
+
+    .review-note-card textarea:focus {
+      box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px var(--accent-soft);
+    }
+
+    .review-note-card-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .review-note-timestamp {
+      font-size: 11px;
+      color: var(--muted);
+    }
+
+    #reviewNotesAddBtn:not(:disabled) {
+      color: var(--muted);
+      border-color: var(--border-muted);
+      background: var(--panel);
+      font-weight: 500;
+    }
+
+    #reviewNotesAddBtn:not(:disabled):hover {
+      color: var(--text);
+      border-color: var(--accent-soft-strong);
+      background: var(--panel-2);
+    }
+
+    .review-note-delete-btn:not(:disabled) {
+      border-color: var(--warn-border);
+      color: var(--warn);
+    }
+
     #status.error { color: var(--error); }
     #status.warning { color: var(--warn); }
     #status.success { color: var(--ok); }
 
+    @media (max-width: 1200px) {
+      .source-body {
+        flex-direction: column;
+      }
+
+      .review-notes-dock-wrap {
+        flex: 0 0 auto;
+        min-width: 0;
+        max-height: min(42vh, 420px);
+      }
+    }
+
     @media (max-width: 980px) {
       footer {
         grid-template-columns: 1fr;