pi-studio 0.5.45 → 0.5.47

package/client/studio.css

@@ -661,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;
@@ -867,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);
     }
@@ -1856,14 +1948,16 @@
     }
 
     #reviewNotesAddBtn:not(:disabled) {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: var(--accent-contrast);
-      font-weight: 600;
+      color: var(--muted);
+      border-color: var(--border-muted);
+      background: var(--panel);
+      font-weight: 500;
     }
 
     #reviewNotesAddBtn:not(:disabled):hover {
-      filter: brightness(0.95);
+      color: var(--text);
+      border-color: var(--accent-soft-strong);
+      background: var(--panel-2);
     }
 
     .review-note-delete-btn:not(:disabled) {

package/index.ts

@@ -121,6 +121,7 @@ interface PersistedStudioReviewNote {
 	lineStart: number;
 	lineEnd: number;
 	selectedText: string;
+	selectedDisplayText?: string;
 }
 
 interface StudioPersistentState {
@@ -285,6 +286,7 @@ function normalizePersistedStudioReviewNote(value: unknown): PersistedStudioRevi
 		lineStart,
 		lineEnd,
 		selectedText: typeof candidate.selectedText === "string" ? candidate.selectedText : "",
+		selectedDisplayText: typeof candidate.selectedDisplayText === "string" ? candidate.selectedDisplayText : "",
 	};
 }
 
@@ -6173,6 +6175,7 @@ ${cssVarsBlock}
               <div id="lineNumberMeasure" class="editor-line-number-measure" aria-hidden="true"></div>
               <pre id="sourceHighlight" class="editor-highlight" aria-hidden="true"></pre>
               <textarea id="sourceText" placeholder="Paste or edit text here.">${initialText}</textarea>
+              <button id="editorSelectionCommentBtn" type="button" class="editor-selection-comment-btn" hidden title="Create a new local comment from the current editor selection.">Comment</button>
             </div>
             <div id="sourcePreview" class="panel-scroll rendered-markdown" hidden><pre class="plain-markdown"></pre></div>
           </div>
@@ -6188,11 +6191,11 @@ ${cssVarsBlock}
               <div class="review-notes-toolbar">
                 <span id="reviewNotesMeta" class="scratchpad-meta">No comments</span>
               </div>
-              <div id="reviewNotesEmptyState" class="review-notes-empty">No comments yet for this document. Select text (or just place the caret on a line) in <strong>Editor (Raw)</strong>, then choose <em>New comment from selection</em>.</div>
+              <div id="reviewNotesEmptyState" class="review-notes-empty">No comments yet for this document. Select text in <strong>Editor (Raw)</strong> or <strong>Editor (Preview)</strong> and use <em>Comment</em>, or use <em>Line comment</em> in <strong>Editor (Raw)</strong>.</div>
               <div id="reviewNotesList" class="review-notes-list" aria-live="polite"></div>
               <div class="review-notes-dock-footer">
                 <div class="scratchpad-actions">
-                  <button id="reviewNotesAddBtn" type="button" title="Create a new local comment from the current editor selection, or from the current line if nothing is selected.">New comment from selection</button>
+                  <button id="reviewNotesAddBtn" type="button" title="Create a new local comment on the current editor line.">Line comment</button>
                   <button id="reviewNotesInlineAllBtn" type="button" title="Toggle inline annotations for all non-empty comments.">All inline: Off</button>
                   <button id="reviewNotesDoneBtn" type="button" title="Hide the comments rail.">Hide</button>
                 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.45",
+  "version": "0.5.47",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",