[eval] Eval Viewer Quick Reactions and Comments Dashboard (#8639)

## What
Added Thumbs Up and Thumbs Down reaction toggles for immediate
evaluation rating in the Breadboard Eval Viewer's Topology inspector,
and established a grouped "All Comments" modal to aggregate visual notes
by section.

## Why
Improves evaluation velocity by allowing raters to visually endorse
("Good") or flag ("Bad") individual Node Configurations, Dimensions, and
Transcript events via mutually-exclusive singleton reaction toggles
stored cleanly as `.notes.json` sidecar files.

## Changes
- **Backend & Types (`types.ts`, `filesystem.ts`)**: Expanded `UserNote`
to accommodate optional `.reaction` fields. Added dedicated
`.notes.json` read/write capabilities to `FileSystemEvalBackend`.
- **UI Components (`notes-container.ts`, `bgl-viewer.ts`)**: Built
`<ui-notes-container>` delivering distinct hover-light-up reactivity,
composed bubbling for event delegation, and real-time active state
styles. Incorporated a dashboard for grouping non-reaction notes by
context.
- **State Orchestration (`inspector.ts`)**: Engineered `add-note` and
`delete-note` custom event handlers in `A2UIEvalInspector` enforcing
singleton and mutually-exclusive reaction conditions dynamically on
state updates.

## Testing
- Navigate to the Eval Viewer's Topology mode.
- Click Thumbs Up or Thumbs Down on any configuration item; verify the
corresponding button lights up and replaces opposite reactions.
- Click the lit reaction button again to toggle it OFF.
- Open `.notes.json` to confirm identical state persistence on disk.

Author: dglazkov

packages/visual-editor/eval/viewer/src/filesystem.ts

@@ -262,7 +262,7 @@ export class FileSystemEvalBackend {
               const fileBlob = await (descriptor as FileSystemFileHandle).getFile();
               const text = await fileBlob.text();
               const parsed = JSON.parse(text) as RunNotes;
-              const count = parsed?.notes?.length || 0;
+              const count = (parsed?.notes || []).filter((n) => !n.reaction).length;
               const baseName = name.replace(/\.notes\.json$/, "");
               notesCountMap.set(baseName, count);
             } catch {

packages/visual-editor/eval/viewer/src/inspector.ts

@@ -947,34 +947,71 @@ export class A2UIEvalInspector extends SignalWatcher(LitElement) {
     </section>`;
   }
 
-  async #handleAddNote(e: CustomEvent<{ location: NoteLocation; text: string }>) {
-    if (!this.selectedFilePath) return;
+  async #handleAddNote(e: CustomEvent<{ location: NoteLocation; text: string; reaction?: "good" | "bad" }>) {
+    if (!this.selectedFilePath) {
+      console.warn("Inspector: No selectedFilePath available!");
+      return;
+    }
 
     const newNote: UserNote = {
       id: crypto.randomUUID(),
       location: e.detail.location,
       text: e.detail.text,
       timestamp: new Date().toISOString(),
+      reaction: e.detail.reaction,
     };
 
-    const updatedNotes = [...this.notes, newNote];
+    let updatedNotes = [...this.notes];
+
+    if (e.detail.reaction) {
+      // Enforce Singleton & Mutually Exclusive: Filter out any existing reaction note for this location.
+      updatedNotes = updatedNotes.filter((n) => {
+        const isSameLoc = (locA: NoteLocation, locB: NoteLocation) => {
+          if (locA.type !== locB.type) return false;
+          if (locA.type === "node-config" && locB.type === "node-config") {
+            return locA.nodeId === locB.nodeId && locA.fieldName === locB.fieldName;
+          }
+          if (locA.type === "rater" && locB.type === "rater") {
+            return locA.dimension === locB.dimension && locA.fieldName === locB.fieldName;
+          }
+          if (locA.type === "transcript" && locB.type === "transcript") {
+            return locA.turn === locB.turn && locA.eventIndex === locB.eventIndex && locA.fieldName === locB.fieldName;
+          }
+          return false;
+        };
+
+        const hasReaction = n.reaction !== undefined;
+        const isSame = isSameLoc(n.location, e.detail.location);
+
+        // Keep the note if it's NOT a reaction note at the same location.
+        return !(hasReaction && isSame);
+      });
+    }
+
+    updatedNotes.push(newNote);
+
     const result = await this.#fileSystem.writeNotes(this.selectedFilePath, { notes: updatedNotes });
     if (ok(result)) {
       this.notes = updatedNotes;
-      this.#updateSidebarNoteCount(this.selectedFilePath, updatedNotes.length);
+      const nonReactionCount = updatedNotes.filter((n) => !n.reaction).length;
+      this.#updateSidebarNoteCount(this.selectedFilePath, nonReactionCount);
     } else {
       console.warn("Failed to save note:", result.$error);
     }
   }
 
   async #handleDeleteNote(e: CustomEvent<{ noteId: string }>) {
-    if (!this.selectedFilePath) return;
+    if (!this.selectedFilePath) {
+      console.warn("Inspector: No selectedFilePath available!");
+      return;
+    }
 
     const updatedNotes = this.notes.filter((n) => n.id !== e.detail.noteId);
     const result = await this.#fileSystem.writeNotes(this.selectedFilePath, { notes: updatedNotes });
     if (ok(result)) {
       this.notes = updatedNotes;
-      this.#updateSidebarNoteCount(this.selectedFilePath, updatedNotes.length);
+      const nonReactionCount = updatedNotes.filter((n) => !n.reaction).length;
+      this.#updateSidebarNoteCount(this.selectedFilePath, nonReactionCount);
     } else {
       console.warn("Failed to delete note:", result.$error);
     }

packages/visual-editor/eval/viewer/src/types.ts

@@ -14,6 +14,7 @@ export type UserNote = {
   location: NoteLocation;
   text: string;
   timestamp: string;
+  reaction?: "good" | "bad";
 };
 
 export type RunNotes = {

packages/visual-editor/eval/viewer/src/ui/bgl-viewer.ts

@@ -989,7 +989,8 @@ class BGLViewer extends LitElement {
   }
 
   #renderAllNotesModal() {
-    if (!this.notes || this.notes.length === 0) {
+    const nonReactionNotes = (this.notes || []).filter((n) => !n.reaction);
+    if (nonReactionNotes.length === 0) {
       return html`<dialog ${ref(this.#allNotesDialogRef)}>
         <form method="dialog">
           <div id="dialog-header">
@@ -1006,7 +1007,7 @@ class BGLViewer extends LitElement {
     }
 
     const groups = new Map<string, UserNote[]>();
-    for (const note of this.notes) {
+    for (const note of nonReactionNotes) {
       const section = this.#getSectionTitle(note.location);
       if (!groups.has(section)) {
         groups.set(section, []);
@@ -1017,7 +1018,7 @@ class BGLViewer extends LitElement {
     return html`<dialog ${ref(this.#allNotesDialogRef)}>
       <form method="dialog">
         <div id="dialog-header">
-          <h2>All Comments (${this.notes.length})</h2>
+          <h2>All Comments (${nonReactionNotes.length})</h2>
           <button type="submit" aria-label="Close">
             <span class="g-icon filled round">close</span>
           </button>
@@ -1036,7 +1037,14 @@ class BGLViewer extends LitElement {
                       <span style="font-weight: 600; color: var(--light-dark-n-20);">${fieldRef}</span>
                       <span>${new Date(note.timestamp).toLocaleString()}</span>
                     </div>
-                    <div style="white-space: pre-wrap;">${note.text}</div>
+                    <div style="display: flex; align-items: center; gap: var(--bb-grid-size-2);">
+                      ${note.reaction ? html`<span 
+                        class="g-icon round" 
+                        style="color: ${note.reaction === 'good' ? '#34a853' : '#ea4335'}; font-size: 16px; flex-shrink: 0;"
+                        title=${note.reaction === 'good' ? 'Marked as Good' : 'Marked as Bad'}
+                      >${note.reaction === 'good' ? 'thumb_up' : 'thumb_down'}</span>` : nothing}
+                      <div style="white-space: pre-wrap;">${note.text}</div>
+                    </div>
                   </div>`;
                 })}
               </div>
@@ -1076,9 +1084,9 @@ class BGLViewer extends LitElement {
           </div>
           <button @click=${() => this.#showRaterModal()}>Show Details</button>
           <button 
-            style="margin-top: var(--bb-grid-size); ${this.notes && this.notes.length > 0 ? '' : 'opacity: 0.5;'}" 
+            style="margin-top: var(--bb-grid-size); ${(this.notes || []).filter((n) => !n.reaction).length > 0 ? '' : 'opacity: 0.5;'}" 
             @click=${() => this.#showAllNotesModal()}
-          >All Comments (${this.notes?.length || 0})</button>
+          >All Comments (${(this.notes || []).filter((n) => !n.reaction).length})</button>
         </div>` : nothing}
       </div>
       <div