Refine persona triggering, simplify transcript panel, remove HighlightedText

JoeCowles · claude · JoeCowles · commit b18511e55855 · 2026-04-26T01:30:54.000-05:00
Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/electron/dist/main.js b/electron/dist/main.js
@@ -188,7 +188,7 @@ function createOverlayWindow() {
     overlayWin.loadURL(OVERLAY_HTML);
     // Keep overlay filling the screen if display changes
     electron_1.screen.on('display-metrics-changed', () => {
-        if (!overlayWin)
+        if (!overlayWin || overlayWin.isDestroyed())
             return;
         const { width: w, height: h } = electron_1.screen.getPrimaryDisplay().workAreaSize;
         overlayWin.setBounds({ x: 0, y: 0, width: w, height: h });
diff --git a/electron/main.ts b/electron/main.ts
@@ -189,7 +189,7 @@ function createOverlayWindow() {
 
   // Keep overlay filling the screen if display changes
   screen.on('display-metrics-changed', () => {
-    if (!overlayWin) return;
+    if (!overlayWin || overlayWin.isDestroyed()) return;
     const { width: w, height: h } = screen.getPrimaryDisplay().workAreaSize;
     overlayWin.setBounds({ x: 0, y: 0, width: w, height: h });
   });
diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
@@ -3,7 +3,7 @@
 // podcommentators main page — orchestrates audio/video sources, transcript, and AI persona sidebar.
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AppMode, AudioSource, TranscriptHighlight } from '@/types';
+import { AppMode, AudioSource } from '@/types';
 import { useSettings } from '@/context/SettingsContext';
 import { useTranscript } from '@/hooks/useTranscript';
 import { usePersonaOrchestrator } from '@/hooks/usePersonaOrchestrator';
@@ -118,14 +118,6 @@ export default function Home() {
     setIsVideoStream(false);
   }, [previewStream, stopListening]);
 
-  // Build transcript highlights from commentary that includes quoted statements
-  const transcriptHighlights = useMemo<TranscriptHighlight[]>(
-    () => commentaryHistory
-      .filter((m) => m.quotedText)
-      .map((m) => ({ text: m.quotedText, color: m.personaColor })),
-    [commentaryHistory]
-  );
-
   const hasApiKey = Boolean(settings.apiKey);
   const hasVideo = Boolean(previewStream) || isVideoStream;
 
@@ -237,7 +229,6 @@ export default function Home() {
                     commentaryCount={commentaryHistory.length}
                     onToggleCommentary={() => setShowCommentary((v) => !v)}
                     showingCommentary={showCommentary}
-                    highlights={transcriptHighlights}
                   />
                   {showCommentary && (
                     <CommentaryHistory messages={commentaryHistory} />
diff --git a/src/app/desktop/page.tsx b/src/app/desktop/page.tsx
@@ -2,13 +2,11 @@
 // src/app/desktop/page.tsx
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { TranscriptHighlight } from '@/types';
 import { useSettings } from '@/context/SettingsContext';
 import { useTranscript } from '@/hooks/useTranscript';
 import { usePersonaOrchestrator } from '@/hooks/usePersonaOrchestrator';
 import SettingsModal from '@/components/SettingsModal';
 import CommentaryHistory from '@/components/CommentaryHistory';
-import HighlightedText from '@/components/HighlightedText';
 import { Settings, Mic, MicOff, Eye, EyeOff, MessageSquare } from 'lucide-react';
 import styles from './desktop.module.css';
 import type { MainWindowElectronAPI } from '@/types/electron';
@@ -91,14 +89,6 @@ export default function DesktopPage() {
     onWaveformStateChange: handleWaveformChange,
   });
 
-  // Build transcript highlights from commentary that includes quoted statements
-  const transcriptHighlights = useMemo<TranscriptHighlight[]>(
-    () => commentaryHistory
-      .filter((m) => m.quotedText)
-      .map((m) => ({ text: m.quotedText, color: m.personaColor })),
-    [commentaryHistory]
-  );
-
   // Broadcast persona states to the overlay window
   useEffect(() => {
     if (!isElectron) return;
@@ -121,9 +111,12 @@ export default function DesktopPage() {
     micDeviceId: micDeviceId || undefined,
   });
 
-  // Auto-scroll transcript
+  // Auto-scroll transcript — only when user is near the bottom
+  const desktopScrolledUp = useRef(false);
   useEffect(() => {
-    transcriptEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (!desktopScrolledUp.current) {
+      transcriptEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
   }, [chunks, interimText]);
 
   // On Start: request mic permission first, then enumerate devices, then start
@@ -165,8 +158,7 @@ export default function DesktopPage() {
     (s) => s.isStreaming || s.waveformState !== 'idle'
   ).length;
   const pulseScale = isListening ? 1 + micLevel * 0.1 : 1;
-  const recentChunks = chunks.slice(-6);
-  const hasTranscript = recentChunks.length > 0 || !!interimText;
+  const hasTranscript = chunks.length > 0 || !!interimText;
 
   const toggleScreenshareVisibility = useCallback(() => {
     const nextVal = !screenshareVisible;
@@ -290,14 +282,14 @@ export default function DesktopPage() {
           </p>
         )}
 
-        {/* Chat toggle */}
-        {isListening && (
+        {/* Chat toggle — visible whenever there's commentary */}
+        {commentaryHistory.length > 0 && (
           <button
             className={[styles.chatToggle, showCommentary ? styles.chatToggleActive : ''].join(' ')}
             onClick={() => setShowCommentary((v) => !v)}
           >
             <MessageSquare size={13} />
-            Chat{commentaryHistory.length > 0 ? ` (${commentaryHistory.length})` : ''}
+            Chat{` (${commentaryHistory.length})`}
           </button>
         )}
 
@@ -310,11 +302,15 @@ export default function DesktopPage() {
 
         {/* Transcript */}
         {hasTranscript && !showCommentary && (
-          <div className={styles.transcript}>
-            {recentChunks.map((chunk) => (
-              <p key={chunk.id} className={styles.chunk}>
-                <HighlightedText text={chunk.text} highlights={transcriptHighlights} />
-              </p>
+          <div
+            className={styles.transcript}
+            onScroll={(e) => {
+              const el = e.currentTarget;
+              desktopScrolledUp.current = el.scrollHeight - el.scrollTop - el.clientHeight > 60;
+            }}
+          >
+            {chunks.map((chunk) => (
+              <p key={chunk.id} className={styles.chunk}>{chunk.text}</p>
             ))}
             {interimText && (
               <p className={styles.interim}>{interimText}<span className={styles.cursor}>▋</span></p>
diff --git a/src/components/CommentatorRail.tsx b/src/components/CommentatorRail.tsx
@@ -159,7 +159,6 @@ export default function CommentatorRail({ personas, personaStates }: Commentator
           const isActive   = waveformState === 'active';
           const showWave   = isVisible && (isThinking || isActive);
 
-          // Show the full response — CSS handles scrolling for long text
           const displayText = currentResponse;
 
           const trackClass = [
diff --git a/src/components/HighlightedText.tsx b/src/components/HighlightedText.tsx
diff --git a/src/components/TranscriptPanel.tsx b/src/components/TranscriptPanel.tsx
@@ -3,8 +3,7 @@
 
 import { useEffect, useRef } from 'react';
 import { Mic, MessageSquare } from 'lucide-react';
-import { TranscriptChunk, TranscriptHighlight } from '@/types';
-import HighlightedText from './HighlightedText';
+import { TranscriptChunk } from '@/types';
 import styles from './TranscriptPanel.module.css';
 
 interface TranscriptPanelProps {
@@ -15,7 +14,6 @@ interface TranscriptPanelProps {
   commentaryCount?: number;
   onToggleCommentary?: () => void;
   showingCommentary?: boolean;
-  highlights?: TranscriptHighlight[];
 }
 
 function formatTime(ts: number): string {
@@ -31,14 +29,26 @@ export default function TranscriptPanel({
   commentaryCount = 0,
   onToggleCommentary,
   showingCommentary = false,
-  highlights = [],
 }: TranscriptPanelProps) {
   const bodyRef = useRef<HTMLDivElement>(null);
+  const userScrolledUp = useRef(false);
 
-  // Auto-scroll to bottom on new content
+  // Track whether the user has scrolled away from the bottom
   useEffect(() => {
     const el = bodyRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
+    if (!el) return;
+    const onScroll = () => {
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
+      userScrolledUp.current = !atBottom;
+    };
+    el.addEventListener('scroll', onScroll, { passive: true });
+    return () => el.removeEventListener('scroll', onScroll);
+  }, []);
+
+  // Auto-scroll to bottom on new content — only if user hasn't scrolled up
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (el && !userScrolledUp.current) el.scrollTop = el.scrollHeight;
   }, [chunks, interimText]);
 
   return (
@@ -82,9 +92,7 @@ export default function TranscriptPanel({
             {chunks.map((chunk) => (
               <div key={chunk.id} className={styles.chunk}>
                 <span className={styles.timestamp}>{formatTime(chunk.timestamp)}</span>
-                <p className={styles.chunkText}>
-                  <HighlightedText text={chunk.text} highlights={highlights} />
-                </p>
+                <p className={styles.chunkText}>{chunk.text}</p>
               </div>
             ))}
             {interimText && (
diff --git a/src/hooks/usePersonaOrchestrator.ts b/src/hooks/usePersonaOrchestrator.ts
@@ -152,6 +152,7 @@ export function usePersonaOrchestrator({
               personaColor: persona.color,
               text: cleanText,
               quotedText,
+              triggerChunk: latestChunk,
               timestamp: Date.now(),
               citations: result.citations,
             }]);
@@ -220,7 +221,9 @@ export function usePersonaOrchestrator({
           }
           tokenCount++;
           fullResponse += token;
-          updatePersonaState(persona.id, { currentResponse: fullResponse });
+          // Strip [[...]] prefix from displayed text so users don't see brackets
+          const { cleanText: displayText } = parseQuotedStatement(fullResponse);
+          updatePersonaState(persona.id, { currentResponse: displayText });
         }
 
         console.log(`[Orchestrator] ✅ ${persona.name} DONE  tokens=${tokenCount}  chars=${fullResponse.length}  triggerId=${triggerId}`);
@@ -244,6 +247,7 @@ export function usePersonaOrchestrator({
             personaColor: persona.color,
             text: cleanText,
             quotedText,
+            triggerChunk: latestChunk,
             timestamp: Date.now(),
             citations: collectedCitations,
           }]);
diff --git a/src/prompts/benny/system.md b/src/prompts/benny/system.md
@@ -2,10 +2,16 @@ You are Benny, the comedy writer of a live podcast/video commentary team. You wr
 
 Your job: Write **1–2 short, punchy jokes or one-liners** directly inspired by the transcript. No setup longer than one sentence.
 
+**Response format:**
+Always begin your response with the exact statement or phrase you are riffing on, wrapped in double brackets. Then write your joke(s) on a new line. Example:
+
+[[I've been trying to learn to cook but I keep burning everything]]
+Sounds like your smoke detector is pulling double duty as a dinner bell.
+
 **Tone:** Irreverent but not mean-spirited. Fast, clipped, confident. You've been in writers' rooms and you know when a bit works.
 
 **Rules:**
-- Output ONLY the joke(s) — no intro, no "Here's a joke:", no explanation
+- Output ONLY the bracketed quote then the joke(s) — no intro, no "Here's a joke:", no explanation
 - Each joke is one or two short sentences max
 - Puns, wordplay, absurdist observations, and light irony all welcome
 - Classic setup/punchline OR pure one-liner — pick whatever lands harder
diff --git a/src/prompts/milo/system.md b/src/prompts/milo/system.md
@@ -4,10 +4,16 @@ Your job: Given a transcript snippet, do **one** of the following:
 1. Name the *exact* sound effect or musical sting that perfectly fits this moment — be vivid, specific, and absurd (e.g., "the Wilhelm scream sped up to 1.5x", "a recorder playing Hot Cross Buns in a minor key")
 2. Provide a weird, obscure, or surprisingly relevant piece of cultural, historical, or scientific context that reframes the conversation
 
+**Response format:**
+Always begin your response with the exact statement or moment you are reacting to, wrapped in double brackets. Then write your commentary on a new line. Example:
+
+[[and then the whole server just went down]]
+The exact sound you're looking for is a 1997 dial-up modem handshake played in reverse at half speed, fading into the THX deep note.
+
 **Tone:** Dry, deadpan, slightly surreal. You deliver context like a bored archivist who has seen everything.
 
 **Rules:**
-- 2–3 sentences max
+- 2–3 sentences max after the bracketed quote
 - No hedging. State your suggestion as fact.
 - Sound effect suggestions must be *highly specific*, never generic ("applause" or "sad trombone" is not acceptable)
 - Alternate between sound effect commentary and context commentary across your responses
diff --git a/src/prompts/rex/system.md b/src/prompts/rex/system.md
@@ -2,10 +2,16 @@ You are Rex, the cynical, contrarian commentator of a live podcast/video comment
 
 Your job: React to a transcript snippet with **maximum cynicism and contrarianism** in the fewest possible words.
 
+**Response format:**
+Always begin your response with the exact statement or moment you are reacting to, wrapped in double brackets. Then write your commentary on a new line. Example:
+
+[[we're really excited about this new partnership]]
+"Excited." Sure. That's what we're calling it now.
+
 **Tone:** Sarcastic internet energy. You've seen it all, you're not impressed, and you want everyone to know. But you're not hateful — you punch at ideas and situations, never at people.
 
 **Rules:**
-- 1–2 SHORT sentences max. Brevity is your weapon.
+- 1–2 SHORT sentences max after the bracketed quote. Brevity is your weapon.
 - Be sarcastic, not hateful. Punch at ideas, not identities.
 - Channel classic contrarian energy: "This again?", "Cool story.", "Nobody asked.", "That's certainly a take.", "Sure, buddy."
 - Occasionally, halfway through your cynicism, catch yourself having a half-sincere thought — then immediately walk it back ("...not that it matters")
diff --git a/src/types/index.ts b/src/types/index.ts
