fix(stt+ui): Soniox auto-reconnect + transcript load-more pagination

- Soniox realtime: auto-reconnect after server-side session cap (default
  ~1h per plan). Refactor SonioxStreamingSTT with _open_session /
  _close_session helpers; wrap results() in outer reconnect loop with
  exponential backoff (cap 5s, 8 attempts). Track cumulative_offset_ms
  to keep start_ms/end_ms continuous across reconnects. Emit info
  heartbeat to frontend during reconnect.
- Frontend: handle info heartbeat (🔄 status banner) + show real error
  message instead of swallowing it.
- MeetingDetail: load-more pagination — render last 200 parts by default,
  '↑ Tải thêm' button reveals 200 more with scroll preservation. Store
  still holds full array so export/copy/minutes see EVERYTHING. Auto-
  scroll only when user is near bottom (80px tolerance) — no more yank
  when reading older parts.
- Bump 1.2.9 → 1.2.10.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: luongnd

package.json

@@ -1,7 +1,7 @@
 {
   "name": "voicescribe",
   "private": true,
-  "version": "1.2.9",
+  "version": "1.2.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-python/stt.py

@@ -1,6 +1,6 @@
 [package]
 name = "voicescribe"
-version = "1.2.9"
+version = "1.2.10"
 description = "Scribble - Meeting Minutes"
 authors = ["you"]
 edition = "2021"

src-tauri/Cargo.lock

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Scribble",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "identifier": "com.scribble.app",
   "build": {
     "beforeDevCommand": "pnpm dev",

src-tauri/Cargo.toml

@@ -446,6 +446,51 @@ export function MeetingDetail() {
     const [editingMinutes, setEditingMinutes] = useState(false);
     const minutesEditRef = useRef<HTMLDivElement>(null);
 
+    // ── Load-more pagination ─────────────────────────────────────────────
+    // Long sessions (4h+) can produce 500+ transcript parts. Rendering them
+    // all at once tanks the DOM. We render only the tail by default; the
+    // user clicks "Load older" to reveal more. The store still holds the
+    // full array → export / copy / minutes-generation see EVERYTHING. This
+    // is purely a render-layer optimization.
+    const TRANSCRIPT_PAGE_SIZE = 200;
+    const [visibleCount, setVisibleCount] = useState<number>(TRANSCRIPT_PAGE_SIZE);
+    // When switching meetings, reset the window so we don't show 200 parts
+    // of the previous meeting on the new one.
+    const prevMeetingKeyRef = useRef<string | number | null>(null);
+    useEffect(() => {
+        const key = currentMeetingId || draftId || null;
+        if (prevMeetingKeyRef.current !== key) {
+            prevMeetingKeyRef.current = key;
+            setVisibleCount(TRANSCRIPT_PAGE_SIZE);
+        }
+    }, [currentMeetingId, draftId]);
+
+    // Visible slice: always include the most recent N parts so live
+    // transcription stays visible. Absolute index = transcriptParts.length
+    // - visibleParts.length + visibleIdx. Used for callbacks that mutate
+    // the full array (edit speaker, delete, edit text).
+    const hasOlderParts = transcriptParts.length > visibleCount;
+    const visibleParts = useMemo(
+        () => (hasOlderParts ? transcriptParts.slice(-visibleCount) : transcriptParts),
+        [transcriptParts, visibleCount, hasOlderParts],
+    );
+    const visibleStartIdx = transcriptParts.length - visibleParts.length;
+    const handleLoadOlder = () => {
+        // Preserve scroll position so the user stays anchored at the part
+        // they were reading instead of jumping when older content prepends.
+        const el = transcriptRef.current;
+        const prevScrollHeight = el?.scrollHeight ?? 0;
+        const prevScrollTop = el?.scrollTop ?? 0;
+        setVisibleCount((n) => n + TRANSCRIPT_PAGE_SIZE);
+        // After render, restore so visual position relative to previously
+        // visible items doesn't change.
+        requestAnimationFrame(() => {
+            if (!el) return;
+            const delta = el.scrollHeight - prevScrollHeight;
+            el.scrollTop = prevScrollTop + delta;
+        });
+    };
+
     const persistTranscriptParts = async (parts: TranscriptPart[]) => {
         const meetingId = currentMeetingId || draftId;
         if (!meetingId) return;
@@ -688,9 +733,16 @@ export function MeetingDetail() {
         };
     }, [viewingMeetingId, recording, setTranscriptParts]);
 
-    // Auto-scroll
+    // Auto-scroll: only when the user is near the bottom (so we don't yank
+    // them away while they're reading older parts after "Load older"). 80px
+    // tolerance = roughly one transcript row.
     useEffect(() => {
-        transcriptRef.current?.scrollTo({ top: transcriptRef.current.scrollHeight, behavior: 'smooth' });
+        const el = transcriptRef.current;
+        if (!el) return;
+        const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        if (distanceFromBottom < 80) {
+            el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+        }
     }, [transcriptParts, isTranscribing]);
 
 
@@ -856,15 +908,31 @@ export function MeetingDetail() {
                     </div>
                 ) : (
                     <div className={`transcript-list ${translationEnabled ? 'with-translation' : ''}`} ref={transcriptRef}>
-                        {transcriptParts.map((part, i) => {
+                        {hasOlderParts && (
+                            <button
+                                className="transcript-load-more"
+                                onClick={handleLoadOlder}
+                                aria-label={lang === 'vi' ? 'Tải thêm transcript cũ hơn' : 'Load older transcript'}
+                            >
+                                {lang === 'vi'
+                                    ? `↑ Tải thêm ${Math.min(TRANSCRIPT_PAGE_SIZE, visibleStartIdx)} đoạn cũ hơn (đang ẩn ${visibleStartIdx} / tổng ${transcriptParts.length})`
+                                    : `↑ Load ${Math.min(TRANSCRIPT_PAGE_SIZE, visibleStartIdx)} older parts (${visibleStartIdx} hidden of ${transcriptParts.length} total)`}
+                            </button>
+                        )}
+                        {visibleParts.map((part, visibleIdx) => {
+                            // Absolute index in the full transcriptParts array — used
+                            // for callbacks that mutate the full store (edit / delete /
+                            // speaker rename). `visibleIdx` alone would mis-target items
+                            // whenever `hasOlderParts` is true.
+                            const absoluteIdx = visibleStartIdx + visibleIdx;
                             const speakerColor = SPEAKER_COLORS[part.speakerId % SPEAKER_COLORS.length];
-                            const isLive = i === transcriptParts.length - 1 && recording;
+                            const isLive = absoluteIdx === transcriptParts.length - 1 && recording;
                             return (
-                                <div className={`transcript-item ${isLive ? 'live' : ''}`} key={i}>
+                                <div className={`transcript-item ${isLive ? 'live' : ''}`} key={part.chunkId || `t-${absoluteIdx}`}>
                                     <div className="transcript-actions">
                                         <button
                                             className="transcript-action-btn"
-                                            onClick={() => startEditSpeaker(part.speakerId, i)}
+                                            onClick={() => startEditSpeaker(part.speakerId, absoluteIdx)}
                                             title={lang === 'vi' ? 'Đổi tên speaker (áp dụng toàn bộ)' : 'Rename speaker (apply all)'}
                                             aria-label={lang === 'vi' ? 'Đổi tên speaker' : 'Rename speaker'}
                                         >
@@ -875,7 +943,7 @@ export function MeetingDetail() {
                                         </button>
                                         <button
                                             className="transcript-action-btn t-delete-btn"
-                                            onClick={() => deleteTranscriptAt(i)}
+                                            onClick={() => deleteTranscriptAt(absoluteIdx)}
                                             title={lang === 'vi' ? 'Xóa đoạn này' : 'Delete this item'}
                                             aria-label={lang === 'vi' ? 'Xóa đoạn này' : 'Delete this item'}
                                         >
@@ -887,7 +955,7 @@ export function MeetingDetail() {
                                         </button>
                                     </div>
                                     <div className="transcript-time">
-                                        {editingSpeakerId === part.speakerId && editingSpeakerAnchorIdx === i ? (
+                                        {editingSpeakerId === part.speakerId && editingSpeakerAnchorIdx === absoluteIdx ? (
                                             <div className="speaker-edit-wrap">
                                                 <input
                                                     className="speaker-edit-input"
@@ -916,7 +984,7 @@ export function MeetingDetail() {
                                         liveTranslationRef={liveTranslationRef}
                                         onSave={(newText) => {
                                             const next = transcriptParts.map((p, j) =>
-                                                j === i ? { ...p, text: newText, translation: '' } : p
+                                                j === absoluteIdx ? { ...p, text: newText, translation: '' } : p
                                             );
                                             void applyTranscriptUpdate(next);
                                         }}

src-tauri/tauri.conf.json

@@ -61,9 +61,19 @@ export function attachSocketHandlers(
         try {
             const data = JSON.parse(event.data);
             if (data.error) {
-                console.error("[stt-ws]", data.error);
+                // Surface the actual message (Soniox sends error: true + text: "..."),
+                // not the boolean flag, so the user sees what went wrong.
+                const msg = (typeof data.error === "string" ? data.error : "") || data.text || "STT error";
+                console.error("[stt-ws]", msg);
                 setIsTranscribing(false);
-                useAppStore.getState().setInterimText("");
+                useAppStore.getState().setInterimText(`⚠ ${msg}`);
+                return;
+            }
+            // Backend reconnect heartbeat (Soniox auto-reconnect after server
+            // closed the WS due to its ~1h session-duration cap). Show as
+            // interim status; do NOT add to transcriptParts.
+            if (data.info || data.type === "info") {
+                useAppStore.getState().setInterimText(`🔄 ${data.text || "Reconnecting..."}`);
                 return;
             }
             if (data.type === "speaker_correction" && data.chunk_id) {

src/components/MeetingDetail.tsx

@@ -1147,6 +1147,29 @@ body.electron-app .sub-tabs {
   transition: background 150ms var(--ease);
 }
 
+/* Load-more button shown above the visible transcript window when there
+   are older parts hidden (typical for 4h+ sessions). Keeps the DOM small
+   so a long recording doesn't lag the render. */
+.transcript-load-more {
+  align-self: center;
+  margin: 8px 0 12px;
+  padding: 6px 14px;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: rgba(99, 102, 241, 0.08);
+  border: 1px dashed rgba(99, 102, 241, 0.3);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
+}
+
+.transcript-load-more:hover {
+  background: rgba(99, 102, 241, 0.16);
+  color: var(--text);
+  border-color: rgba(99, 102, 241, 0.55);
+}
+
 .transcript-item:hover {
   background: rgba(0, 0, 0, 0.02);
 }

src/components/recording/use-streaming-stt.ts

@@ -23,7 +23,14 @@ export interface SttWsMessage {
     chunk_id?: string;
     translation?: string;
     append?: boolean;
-    error?: string;
+    /** When the backend hits a terminal STT error (billing, auth, etc.) it
+     *  may send either `error: "<message string>"` (legacy shape) or
+     *  `error: true` alongside `text: "..."` (Soniox path). Accept both. */
+    error?: string | boolean;
+    /** Non-terminal status heartbeat from backend (e.g. Soniox auto-reconnect
+     *  after a session-duration cap). Render as interim banner, NOT as a
+     *  transcript part. */
+    info?: boolean;
     segments?: SttSegment[];
     /** Soniox token-level offsets (ms from stream start). Present on
      *  real-time STT events when the upstream tokens carry timestamps. */