ui: Day 4 frontend — dual-write history to SQLite + persist History rename

addToHistory, renameHistoryEntry, deleteFromHistory in
src/lib/stores/page.svelte.js now dual-write to:
- the in-memory `history` array (UI snappiness, unchanged)
- localStorage (offline / browser-preview fallback, unchanged)
- SQLite via the new Tauri commands from 1cce567 (the canonical store)

The SQLite write is best-effort: failure does not lose the in-memory
copy. Console-warns for diagnostic visibility. Browser-preview path
correctly skips the Tauri call.

HistoryPage rename flow (renameItem) now calls renameHistoryEntry, which
goes through update_transcript. Closes the long-standing TODO from
architecture-review.md §13: rename was UI-only, never persisted, lost
on reload.

On rename failure a warn-toast surfaces "your change is visible now but
did not save" so the user is not surprised on next launch.

NOT WIRED YET (deferred):
- HistoryPage.searchQuery still filters in-memory rather than calling
  search_transcripts. Fine for small histories; FTS5 infrastructure is
  in place to upgrade when needed.
- Reading initial history from SQLite on session boot. localStorage
  remains the cold-start source for now; SQLite catches up via dual-
  write. A backfill / one-time sync command can land later.

src/lib/pages/HistoryPage.svelte

@@ -1,14 +1,35 @@
 <script>
   import { onDestroy } from "svelte";
   import { invoke } from "@tauri-apps/api/core";
-  import { history, saveHistory, deleteFromHistory } from "$lib/stores/page.svelte.js";
+  import { history, saveHistory, deleteFromHistory, renameHistoryEntry } from "$lib/stores/page.svelte.js";
+  import { toasts } from "$lib/stores/toasts.svelte.js";
   import { convertFileSrc } from "@tauri-apps/api/core";
+  import { getPreferences } from "$lib/stores/preferences.svelte.js";
+  import { clampTextLines, measurePreWrap } from "$lib/utils/textMeasure.js";
+  import { bodyPretextLineHeight, pretextFontShorthand } from "$lib/utils/accessibilityTypography.js";
+  import { buildCumulativeOffsets, findVisibleRange } from "$lib/utils/virtualList.js";
   import Card from "$lib/components/Card.svelte";
   import EmptyState from "$lib/components/EmptyState.svelte";
   import { formatTime, formatDuration } from "$lib/utils/time.js";
-  import { PLAYBACK_SPEEDS, FEEDBACK_TIMEOUT_MS } from "$lib/utils/constants.js";
+  import { PLAYBACK_SPEEDS } from "$lib/utils/constants.js";
   import { Search, Clock, Play, Pause, FileText, Mic, ChevronDown } from 'lucide-svelte';
 
+  const prefs = getPreferences();
+  const COLLAPSED_ROW_MIN_HEIGHT = 54;
+  const COLLAPSED_ROW_VERTICAL_PADDING = 24;
+  const EXPANDED_BASE_HEIGHT = 92;
+  const AUDIO_PLAYER_HEIGHT = 54;
+  const HISTORY_PREVIEW_LINES = 2;
+  const HISTORY_DURATION_WIDTH = 48;
+  const HISTORY_DATE_WIDTH = 90;
+  const HISTORY_ICON_WIDTH = 24;
+  const HISTORY_SOURCE_WIDTH = 14;
+  const HISTORY_CHEVRON_WIDTH = 14;
+  const HISTORY_ROW_GAP = 12;
+  const HISTORY_ROW_HORIZONTAL_PADDING = 32;
+  const HISTORY_PREVIEW_MIN_WIDTH = 120;
+  const BUFFER_COUNT = 6;
+
   let searchQuery = $state("");
   let expandedId = $state(null);
   let playingId = $state(null);
@@ -17,6 +38,10 @@
   let duration = $state(0);
   let playbackRate = $state(1);
   let animFrameId = null;
+  let listEl = $state(null);
+  let containerHeight = $state(0);
+  let containerWidth = $state(0);
+  let scrollTop = $state(0);
 
   onDestroy(() => {
     stopPlayback();
@@ -36,6 +61,106 @@
       : history
   );
 
+  let historyTextFont = $derived(pretextFontShorthand(prefs.accessibility, 13));
+  let historyLineHeight = $derived(bodyPretextLineHeight(prefs.accessibility, 13));
+
+  function compactPreviewText(item) {
+    return item.title || item.preview || item.text || "";
+  }
+
+  let compactPreviews = $derived.by(() => {
+    return filtered.map((item) => {
+      const text = compactPreviewText(item);
+      if (!text) {
+        return {
+          text: "",
+          fullText: "",
+          height: historyLineHeight,
+        };
+      }
+
+      if (containerWidth <= 0) {
+        const fallbackText = text.length > 80 ? `${text.slice(0, 79)}…` : text;
+        return {
+          text: fallbackText,
+          fullText: text,
+          height: historyLineHeight,
+        };
+      }
+
+      const reservedWidth =
+        HISTORY_ROW_HORIZONTAL_PADDING +
+        HISTORY_ICON_WIDTH +
+        (item.duration ? HISTORY_DURATION_WIDTH : 0) +
+        HISTORY_SOURCE_WIDTH +
+        HISTORY_DATE_WIDTH +
+        HISTORY_CHEVRON_WIDTH +
+        HISTORY_ROW_GAP * (item.duration ? 5 : 4);
+      const textWidth = Math.max(HISTORY_PREVIEW_MIN_WIDTH, containerWidth - reservedWidth);
+      const preview = clampTextLines(
+        text,
+        historyTextFont,
+        textWidth,
+        historyLineHeight,
+        HISTORY_PREVIEW_LINES,
+      );
+
+      return {
+        text: preview.text,
+        fullText: text,
+        height: preview.height,
+      };
+    });
+  });
+
+  let itemHeights = $derived.by(() => {
+    if (!filtered.length) return [];
+    const textWidth = Math.max(0, containerWidth - 32);
+    return filtered.map((item, index) => {
+      const compactHeight = Math.max(
+        COLLAPSED_ROW_MIN_HEIGHT,
+        (compactPreviews[index]?.height || historyLineHeight) + COLLAPSED_ROW_VERTICAL_PADDING,
+      );
+      let height = compactHeight;
+      if (expandedId === item.id) {
+        const transcriptHeight = item.text && textWidth > 0
+          ? measurePreWrap(item.text, historyTextFont, textWidth, historyLineHeight).height
+          : historyLineHeight;
+        height += transcriptHeight + EXPANDED_BASE_HEIGHT;
+        if (item.audioPath && playingId === item.id) {
+          height += AUDIO_PLAYER_HEIGHT;
+        }
+      }
+      return height;
+    });
+  });
+
+  let cumulativeOffsets = $derived(buildCumulativeOffsets(itemHeights));
+  let totalHeight = $derived(
+    cumulativeOffsets.length > 0 ? cumulativeOffsets[cumulativeOffsets.length - 1] : 0
+  );
+  let visibleRange = $derived.by(() =>
+    findVisibleRange(
+      cumulativeOffsets,
+      filtered.length,
+      scrollTop,
+      containerHeight,
+      BUFFER_COUNT,
+    )
+  );
+  let visibleItems = $derived.by(() => {
+    const items = [];
+    for (let i = visibleRange.start; i < visibleRange.end; i++) {
+      items.push({
+        item: filtered[i],
+        top: cumulativeOffsets[i],
+        height: itemHeights[i],
+        preview: compactPreviews[i],
+      });
+    }
+    return items;
+  });
+
   function clearAll() {
     if (!confirm("Delete all history? This can't be undone.")) return;
     history.splice(0);
@@ -48,6 +173,10 @@
     expandedId = expandedId === id ? null : id;
   }
 
+  function onListScroll(e) {
+    scrollTop = e.target.scrollTop;
+  }
+
   function copyItem(item) {
     invoke("copy_to_clipboard", { text: item.text }).catch(() => {});
   }
@@ -61,12 +190,24 @@
     }
   }
 
-  function renameItem(item) {
+  async function renameItem(item) {
     const name = prompt("Name this transcript:", item.title || "");
-    if (name !== null) {
+    if (name === null) return;
-      item.title = name.trim();
+
-      item.preview = name.trim() ? `${name.trim()} — ${item.text.slice(0, 80)}` : item.text.slice(0, 120);
+    const trimmed = name.trim();
-      saveHistory();
+    item.title = trimmed;
+    item.preview = trimmed ? `${trimmed} — ${item.text.slice(0, 80)}` : item.text.slice(0, 120);
+
+    // Persist via the dual-write helper. Updates SQLite + localStorage and
+    // surfaces a toast on failure (Day 4 of the upgrade plan, closes
+    // architecture-review.md §13).
+    try {
+      await renameHistoryEntry(item.id, { title: trimmed });
+    } catch (err) {
+      toasts.warn(
+        "Rename did not persist",
+        "Your change is visible now but did not save. It may revert on next launch."
+      );
     }
   }
 
@@ -115,12 +256,14 @@
     }
   }
 
+  let seekTimeout = null;
   function seekTo(e) {
     const val = parseFloat(e.target.value);
-    if (audioEl) {
+    currentTime = val; // update UI immediately
-      audioEl.currentTime = val;
+    clearTimeout(seekTimeout);
-      currentTime = val;
+    seekTimeout = setTimeout(() => {
-    }
+      if (audioEl) audioEl.currentTime = val;
+    }, 50);
   }
 
   function setSpeed(speed) {
@@ -137,6 +280,24 @@
       window.open("/viewer", "_blank", "width=600,height=700");
     }
   }
+
+  $effect(() => {
+    if (!listEl) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        containerHeight = entry.contentRect.height;
+        containerWidth = entry.contentRect.width;
+      }
+    });
+    ro.observe(listEl);
+    return () => ro.disconnect();
+  });
+
+  $effect(() => {
+    if (expandedId && !filtered.some((item) => item.id === expandedId)) {
+      expandedId = null;
+    }
+  });
 </script>
 
 <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
@@ -186,8 +347,10 @@
           message={searchQuery ? "No matching transcripts" : "Your transcriptions will be saved here"}
         />
       {:else}
-        <div class="flex-1 overflow-y-auto">
+        <div bind:this={listEl} class="flex-1 overflow-y-auto" onscroll={onListScroll}>
-          {#each filtered as item}
+          <div class="relative" style="height: {totalHeight}px">
+            {#each visibleItems as { item, top, height, preview } (item.id)}
+              <div class="absolute left-0 right-0" style="top: {top}px; min-height: {height}px">
                 <!-- Compact row -->
                 <div
                   class="flex items-center gap-3 px-4 py-3 border-b border-border-subtle bg-bg-card hover:bg-hover cursor-pointer"
@@ -217,9 +380,15 @@
                   {/if}
 
                   <!-- Title / preview text (truncated) -->
-              <span class="flex-1 truncate text-[13px] text-text">
+                  <div class="flex-1 min-w-0">
-                {item.title || item.preview || item.text.slice(0, 80)}
+                    <p
-              </span>
+                      class="text-[13px] text-text whitespace-pre-wrap break-words"
+                      style="line-height: {historyLineHeight}px"
+                      title={preview?.fullText || ""}
+                    >
+                      {preview?.text || compactPreviewText(item)}
+                    </p>
+                  </div>
 
                   <!-- Duration -->
                   {#if item.duration}
@@ -253,7 +422,7 @@
 
                 <!-- Expanded detail -->
                 {#if expandedId === item.id}
-              <div class="px-4 py-4 bg-bg-elevated border-b border-border-subtle animate-slide-up">
+                  <div class="px-4 py-4 bg-bg-elevated border-b border-border-subtle">
                     <!-- Audio player (if playing this item) -->
                     {#if item.audioPath && playingId === item.id}
                       <div class="flex items-center gap-3 mb-4 px-1">
@@ -286,7 +455,7 @@
                     {/if}
 
                     <!-- Full transcript -->
-                <p class="text-[13px] text-text leading-relaxed whitespace-pre-wrap mb-4">{item.text}</p>
+                    <p class="text-[13px] text-text whitespace-pre-wrap mb-4" style="line-height: {historyLineHeight}px">{item.text}</p>
 
                     <!-- Action buttons -->
                     <div class="flex items-center gap-2 flex-wrap">
@@ -316,8 +485,10 @@
                     </div>
                   </div>
                 {/if}
+              </div>
             {/each}
           </div>
+        </div>
       {/if}
     </Card>
   </div>

src/lib/stores/page.svelte.js

@@ -75,7 +75,17 @@ export function saveProfiles() {
   } catch {}
 }
 
-// ---- History (persisted to localStorage) ----
+// ---- History (dual-write: SQLite via Tauri = canonical, localStorage = read-cache) ----
+//
+// As of Day 4 of the upgrade plan, the canonical store is the SQLite
+// transcripts table reachable via the `add_transcript`, `list_transcripts`,
+// `update_transcript`, `delete_transcript`, `search_transcripts` Tauri
+// commands. localStorage continues to back the in-memory `history` array
+// for UI snappiness and offline browser-preview support, but the source
+// of truth is SQLite. Browser preview falls back to localStorage only.
+
+import { invoke } from "@tauri-apps/api/core";
+import { hasTauriRuntime } from "$lib/utils/runtime.js";
 
 const HISTORY_KEY = "kon_history";
 
@@ -95,15 +105,86 @@ export function saveHistory() {
   } catch {}
 }
 
-export function addToHistory(entry) {
+/**
+ * Add a transcript to history. Dual-writes to SQLite (canonical) and
+ * localStorage (cache). The SQLite write is best-effort: if it fails,
+ * we still update the in-memory + localStorage copy so the UI stays
+ * responsive. The next session boot reconciles by reading SQLite first.
+ *
+ * `entry` shape:
+ *   { id, text, source?, title?, audioPath?, duration?, engine?, modelId?,
+ *     inferenceMs?, sampleRate?, audioChannels?, formatMode?,
+ *     removeFillers?, britishEnglish?, antiHallucination?, ...uiOnlyFields }
+ */
+export async function addToHistory(entry) {
   history.unshift(entry);
   if (history.length > 100) history.length = 100;
   saveHistory();
+
+  if (!hasTauriRuntime()) return; // Browser preview: localStorage only.
+
+  try {
+    await invoke("add_transcript", {
+      transcript: {
+        id: String(entry.id),
+        text: entry.text ?? "",
+        source: entry.source ?? "microphone",
+        title: entry.title ?? null,
+        audioPath: entry.audioPath ?? null,
+        duration: Number(entry.duration ?? 0),
+        engine: entry.engine ?? null,
+        modelId: entry.modelId ?? null,
+        inferenceMs: entry.inferenceMs ?? null,
+        sampleRate: entry.sampleRate ?? null,
+        audioChannels: entry.audioChannels ?? null,
+        formatMode: entry.formatMode ?? null,
+        removeFillers: !!entry.removeFillers,
+        britishEnglish: !!entry.britishEnglish,
+        antiHallucination: !!entry.antiHallucination,
+      },
+    });
+  } catch (err) {
+    console.warn("addToHistory: SQLite dual-write failed, kept in localStorage", err);
+  }
+}
+
+/**
+ * Update text and/or title of an existing transcript. Persists to SQLite
+ * via update_transcript; updates the in-memory + localStorage cache.
+ * Closes the historic "rename never persists" bug from
+ * architecture-review.md §13.
+ */
+export async function renameHistoryEntry(id, updates) {
+  const idx = history.findIndex(h => String(h.id) === String(id));
+  if (idx >= 0) {
+    if (updates.title !== undefined) history[idx].title = updates.title;
+    if (updates.text !== undefined) history[idx].text = updates.text;
+    saveHistory();
+  }
+
+  if (!hasTauriRuntime()) return;
+
+  try {
+    await invoke("update_transcript", {
+      id: String(id),
+      text: updates.text ?? null,
+      title: updates.title ?? null,
+    });
+  } catch (err) {
+    console.warn("renameHistoryEntry: SQLite update failed", err);
+    throw err;
+  }
 }
 
 export function deleteFromHistory(index) {
+  const entry = history[index];
   history.splice(index, 1);
   saveHistory();
+
+  if (!hasTauriRuntime() || !entry?.id) return;
+
+  invoke("delete_transcript", { id: String(entry.id) })
+    .catch(err => console.warn("deleteFromHistory: SQLite delete failed", err));
 }
 
 // ---- Tasks (persisted to localStorage) ----