fix(viewer): show full hotkey labels and add live auto-follow toggle

- LiveControlBar legend was truncating labels via split(' ')[0], cutting
  'Using AI' to 'Using' and 'Trial & error' to 'Trial'. Show full labels.
- Add 'Follow' button next to zoom controls (live sessions only): when on,
  the zoomed window slides right as new events arrive, preserving width.
  Disabled automatically on manual pan/zoom-in/zoom-out so the user can
  freely inspect history. On by default; resets per session.

Author: Predixx

recording-viewer/src/App.css

@@ -1722,6 +1722,17 @@
     font-size: 12px;
     font-weight: 400;
 }
+.zoom-btn.follow {
+    width: auto;
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.zoom-btn.follow.active {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+    border-color: rgba(239, 68, 68, 0.3);
+}
 
 /* ── Follow playback button ─────────────────────────────────────────── */
 

recording-viewer/src/App.tsx

@@ -136,6 +136,7 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
             setIsVideoPlaying(false);
             videoTimeRef.current = 0;
             setZoomedXDomain(null);
+            setAutoFollowLive(true);
             const firstSessionStart = events.find(e => e.type === 'sessionStart') as SessionStartEvent | undefined;
             const schemaVersion = resolveSchemaVersion(metadata, firstSessionStart);
             setSession({ metadata, events, fileName: sessionId, schemaVersion, replayEq, annotations: loadedAnnotations });
@@ -203,6 +204,7 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
         setViewMode('timeline');
         setScrollToTimestamp(null);
         setZoomedXDomain(null);
+        setAutoFollowLive(true);
         setStickyLive(false);
         setEndedLiveSessionId(null);
         setSession(loaded);
@@ -218,6 +220,7 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
         setViewMode('timeline');
         setScrollToTimestamp(null);
         setZoomedXDomain(null);
+        setAutoFollowLive(true);
         setSession(null);
     }, []);
 
@@ -281,6 +284,7 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
     const [viewMode, setViewMode] = useState<'timeline' | 'list'>('timeline');
     const [scrollToTimestamp, setScrollToTimestamp] = useState<number | null>(null);
     const [zoomedXDomain, setZoomedXDomain] = useState<[number, number] | null>(null);
+    const [autoFollowLive, setAutoFollowLive] = useState(true);
 
     const handleViewInList = useCallback((timestamp: number) => {
         setScrollToTimestamp(timestamp);
@@ -328,8 +332,29 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
 
     const effectiveXDomain = zoomedXDomain ?? xDomain;
 
+    // Slide the zoomed window right when new live events arrive, preserving width.
+    // Only active when isLiveSession + autoFollowLive + currently zoomed in.
+    useEffect(() => {
+        if (!autoFollowLive || !isLiveSession || !zoomedXDomain || !xDomain) return;
+        if (xDomain[1] <= zoomedXDomain[1]) return;
+        const range = zoomedXDomain[1] - zoomedXDomain[0];
+        setZoomedXDomain([xDomain[1] - range, xDomain[1]]);
+    }, [autoFollowLive, isLiveSession, xDomain, zoomedXDomain]);
+
+    const handleToggleAutoFollow = useCallback(() => {
+        setAutoFollowLive((prev) => {
+            const next = !prev;
+            if (next && zoomedXDomain && xDomain) {
+                const range = zoomedXDomain[1] - zoomedXDomain[0];
+                setZoomedXDomain([xDomain[1] - range, xDomain[1]]);
+            }
+            return next;
+        });
+    }, [xDomain, zoomedXDomain]);
+
     const handleZoomChange = useCallback((domain: [number, number] | null) => {
         setZoomedXDomain(domain);
+        setAutoFollowLive(false);
     }, []);
 
     const handleZoomIn = useCallback(() => {
@@ -341,6 +366,7 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
         if (newRange < 2000) return;
         const center = (min + max) / 2;
         setZoomedXDomain([center - newRange / 2, center + newRange / 2]);
+        setAutoFollowLive(false);
     }, [xDomain, zoomedXDomain]);
 
     const handleZoomOut = useCallback(() => {
@@ -354,6 +380,7 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
             setZoomedXDomain(null);
             return;
         }
+        setAutoFollowLive(false);
         let newMin = (min + max) / 2 - newRange / 2;
         let newMax = (min + max) / 2 + newRange / 2;
         if (newMin < xDomain[0]) { newMin = xDomain[0]; newMax = newMin + newRange; }
@@ -480,6 +507,15 @@ export function RecordingViewerApp({ authStatus }: RecordingViewerAppProps) {
                                 {zoomedXDomain && (
                                     <button className="zoom-btn reset" onClick={() => setZoomedXDomain(null)} title="Reset zoom">Reset</button>
                                 )}
+                                {isLiveSession && (
+                                    <button
+                                        className={`zoom-btn follow ${autoFollowLive ? 'active' : ''}`}
+                                        onClick={handleToggleAutoFollow}
+                                        title={autoFollowLive ? 'Auto-follow latest events (on)' : 'Auto-follow latest events (off)'}
+                                    >
+                                        Follow
+                                    </button>
+                                )}
                             </div>
                         )}
                         {!writesDisabled && (

recording-viewer/src/components/LiveControlBar.tsx

@@ -49,11 +49,11 @@ export function LiveControlBar({
             <div className="live-legend">
                 <strong>Struggle:</strong>
                 {STRUGGLE_LABELS.map((s, i) => (
-                    <span key={s.value} style={{ color: s.color }}>{i + 1}={s.label.split(' ')[0]}</span>
+                    <span key={s.value} style={{ color: s.color }}>{i + 1}={s.label}</span>
                 ))}
                 <strong>Context:</strong>
                 {CONTEXT_LABELS.map((s, i) => (
-                    <span key={s.value} style={{ color: s.color }}>{'qwert'[i]}={s.label.split(' ')[0]}</span>
+                    <span key={s.value} style={{ color: s.color }}>{'qwert'[i]}={s.label}</span>
                 ))}
             </div>
             {toastVisible && (