From 0e22ec591d1a850d27a10afb605b5fc36a38bce6 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Fri, 17 Apr 2026 13:12:38 +0100
Subject: [PATCH] =?UTF-8?q?ui:=20Day=204=20frontend=20=E2=80=94=20dual-wri?=
 =?UTF-8?q?te=20history=20to=20SQLite=20+=20persist=20History=20rename?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 433 +++++++++++++++++++++----------
 src/lib/stores/page.svelte.js    |  85 +++++-
 2 files changed, 385 insertions(+), 133 deletions(-)

diff --git a/src/lib/pages/HistoryPage.svelte b/src/lib/pages/HistoryPage.svelte
index 6a240b3..c51bd9a 100644
--- a/src/lib/pages/HistoryPage.svelte
+++ b/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) {
-      item.title = name.trim();
-      item.preview = name.trim() ? `${name.trim()} — ${item.text.slice(0, 80)}` : item.text.slice(0, 120);
-      saveHistory();
+    if (name === null) return;
+
+    const trimmed = name.trim();
+    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) {
-      audioEl.currentTime = val;
-      currentTime = val;
-    }
+    currentTime = val; // update UI immediately
+    clearTimeout(seekTimeout);
+    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,137 +347,147 @@
           message={searchQuery ? "No matching transcripts" : "Your transcriptions will be saved here"}
         />
       {:else}
-        <div class="flex-1 overflow-y-auto">
-          {#each filtered as item}
-            <!-- 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"
-              style="transition-duration: var(--duration-ui)"
-              onclick={() => toggleExpand(item.id)}
-              onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleExpand(item.id); } }}
-              role="button"
-              tabindex="0"
-              aria-expanded={expandedId === item.id}
-            >
-              <!-- Play button (if audio exists) -->
-              {#if item.audioPath}
-                <button
-                  class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0
-                    {playingId === item.id ? 'bg-accent/20 text-accent' : 'bg-accent/10 text-accent hover:bg-accent/20'}"
-                  onclick={(e) => { e.stopPropagation(); togglePlay(item); }}
-                  aria-label={playingId === item.id && audioEl && !audioEl.paused ? "Pause" : "Play"}
+        <div bind:this={listEl} class="flex-1 overflow-y-auto" onscroll={onListScroll}>
+          <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"
+                  style="transition-duration: var(--duration-ui)"
+                  onclick={() => toggleExpand(item.id)}
+                  onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleExpand(item.id); } }}
+                  role="button"
+                  tabindex="0"
+                  aria-expanded={expandedId === item.id}
                 >
-                  {#if playingId === item.id && audioEl && !audioEl.paused}
-                    <Pause size={10} aria-hidden="true" />
+                  <!-- Play button (if audio exists) -->
+                  {#if item.audioPath}
+                    <button
+                      class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0
+                        {playingId === item.id ? 'bg-accent/20 text-accent' : 'bg-accent/10 text-accent hover:bg-accent/20'}"
+                      onclick={(e) => { e.stopPropagation(); togglePlay(item); }}
+                      aria-label={playingId === item.id && audioEl && !audioEl.paused ? "Pause" : "Play"}
+                    >
+                      {#if playingId === item.id && audioEl && !audioEl.paused}
+                        <Pause size={10} aria-hidden="true" />
+                      {:else}
+                        <Play size={10} class="ml-0.5" aria-hidden="true" />
+                      {/if}
+                    </button>
                   {:else}
-                    <Play size={10} class="ml-0.5" aria-hidden="true" />
+                    <div class="w-6 h-6 flex-shrink-0"></div>
                   {/if}
-                </button>
-              {:else}
-                <div class="w-6 h-6 flex-shrink-0"></div>
-              {/if}
 
-              <!-- Title / preview text (truncated) -->
-              <span class="flex-1 truncate text-[13px] text-text">
-                {item.title || item.preview || item.text.slice(0, 80)}
-              </span>
+                  <!-- Title / preview text (truncated) -->
+                  <div class="flex-1 min-w-0">
+                    <p
+                      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}
-                <span class="text-[11px] text-text-tertiary flex-shrink-0 tabular-nums">
-                  {formatDuration(item.duration)}
-                </span>
-              {/if}
-
-              <!-- Source icon -->
-              <span class="flex-shrink-0 text-text-tertiary" title={item.source}>
-                {#if item.source && item.source.toLowerCase().includes("file")}
-                  <FileText size={14} aria-hidden="true" />
-                {:else}
-                  <Mic size={14} aria-hidden="true" />
-                {/if}
-              </span>
-
-              <!-- Date (right-aligned) -->
-              <span class="text-[11px] text-text-tertiary flex-shrink-0 text-right min-w-[90px]">
-                {item.date}
-              </span>
-
-              <!-- Expand chevron -->
-              <ChevronDown
-                size={14}
-                class="text-text-tertiary flex-shrink-0 {expandedId === item.id ? 'rotate-180' : ''}"
-                style="transition: transform var(--duration-ui)"
-                aria-hidden="true"
-              />
-            </div>
-
-            <!-- Expanded detail -->
-            {#if expandedId === item.id}
-              <div class="px-4 py-4 bg-bg-elevated border-b border-border-subtle animate-slide-up">
-                <!-- Audio player (if playing this item) -->
-                {#if item.audioPath && playingId === item.id}
-                  <div class="flex items-center gap-3 mb-4 px-1">
-                    <span class="text-[10px] text-text-tertiary tabular-nums w-[80px]">
-                      {formatTime(currentTime)} / {formatTime(duration)}
+                  <!-- Duration -->
+                  {#if item.duration}
+                    <span class="text-[11px] text-text-tertiary flex-shrink-0 tabular-nums">
+                      {formatDuration(item.duration)}
                     </span>
-                    <input
-                      type="range"
-                      min="0"
-                      max={duration || 0}
-                      step="0.1"
-                      value={currentTime}
-                      oninput={seekTo}
-                      class="flex-1 accent-accent h-1"
-                      data-no-transition
-                      onclick={(e) => e.stopPropagation()}
-                    />
-                    <div class="flex gap-0.5">
-                      {#each PLAYBACK_SPEEDS as speed}
+                  {/if}
+
+                  <!-- Source icon -->
+                  <span class="flex-shrink-0 text-text-tertiary" title={item.source}>
+                    {#if item.source && item.source.toLowerCase().includes("file")}
+                      <FileText size={14} aria-hidden="true" />
+                    {:else}
+                      <Mic size={14} aria-hidden="true" />
+                    {/if}
+                  </span>
+
+                  <!-- Date (right-aligned) -->
+                  <span class="text-[11px] text-text-tertiary flex-shrink-0 text-right min-w-[90px]">
+                    {item.date}
+                  </span>
+
+                  <!-- Expand chevron -->
+                  <ChevronDown
+                    size={14}
+                    class="text-text-tertiary flex-shrink-0 {expandedId === item.id ? 'rotate-180' : ''}"
+                    style="transition: transform var(--duration-ui)"
+                    aria-hidden="true"
+                  />
+                </div>
+
+                <!-- Expanded detail -->
+                {#if expandedId === item.id}
+                  <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">
+                        <span class="text-[10px] text-text-tertiary tabular-nums w-[80px]">
+                          {formatTime(currentTime)} / {formatTime(duration)}
+                        </span>
+                        <input
+                          type="range"
+                          min="0"
+                          max={duration || 0}
+                          step="0.1"
+                          value={currentTime}
+                          oninput={seekTo}
+                          class="flex-1 accent-accent h-1"
+                          data-no-transition
+                          onclick={(e) => e.stopPropagation()}
+                        />
+                        <div class="flex gap-0.5">
+                          {#each PLAYBACK_SPEEDS as speed}
+                            <button
+                              class="text-[9px] px-1.5 py-0.5 rounded-full
+                                {playbackRate === speed
+                                  ? 'bg-accent/15 text-accent font-medium'
+                                  : 'text-text-tertiary hover:text-text-secondary'}"
+                              onclick={(e) => { e.stopPropagation(); setSpeed(speed); }}
+                            >{speed}x</button>
+                          {/each}
+                        </div>
+                      </div>
+                    {/if}
+
+                    <!-- Full transcript -->
+                    <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">
+                      <button
+                        class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-text"
+                        style="transition-duration: var(--duration-ui)"
+                        onclick={(e) => { e.stopPropagation(); renameItem(item); }}
+                      >Rename</button>
+                      <button
+                        class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-text"
+                        style="transition-duration: var(--duration-ui)"
+                        onclick={(e) => { e.stopPropagation(); copyItem(item); }}
+                      >Copy</button>
+                      {#if item.audioPath && item.segments && item.segments.length > 0}
                         <button
-                          class="text-[9px] px-1.5 py-0.5 rounded-full
-                            {playbackRate === speed
-                              ? 'bg-accent/15 text-accent font-medium'
-                              : 'text-text-tertiary hover:text-text-secondary'}"
-                          onclick={(e) => { e.stopPropagation(); setSpeed(speed); }}
-                        >{speed}x</button>
-                      {/each}
+                          class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-accent hover:text-accent-hover"
+                          style="transition-duration: var(--duration-ui)"
+                          onclick={(e) => { e.stopPropagation(); openViewer(item); }}
+                        >Open viewer</button>
+                      {/if}
+                      <div class="flex-1"></div>
+                      <button
+                        class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-danger"
+                        style="transition-duration: var(--duration-ui)"
+                        onclick={(e) => { e.stopPropagation(); removeItem(item); }}
+                      >Delete</button>
                     </div>
                   </div>
                 {/if}
-
-                <!-- Full transcript -->
-                <p class="text-[13px] text-text leading-relaxed whitespace-pre-wrap mb-4">{item.text}</p>
-
-                <!-- Action buttons -->
-                <div class="flex items-center gap-2 flex-wrap">
-                  <button
-                    class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-text"
-                    style="transition-duration: var(--duration-ui)"
-                    onclick={(e) => { e.stopPropagation(); renameItem(item); }}
-                  >Rename</button>
-                  <button
-                    class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-text"
-                    style="transition-duration: var(--duration-ui)"
-                    onclick={(e) => { e.stopPropagation(); copyItem(item); }}
-                  >Copy</button>
-                  {#if item.audioPath && item.segments && item.segments.length > 0}
-                    <button
-                      class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-accent hover:text-accent-hover"
-                      style="transition-duration: var(--duration-ui)"
-                      onclick={(e) => { e.stopPropagation(); openViewer(item); }}
-                    >Open viewer</button>
-                  {/if}
-                  <div class="flex-1"></div>
-                  <button
-                    class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-danger"
-                    style="transition-duration: var(--duration-ui)"
-                    onclick={(e) => { e.stopPropagation(); removeItem(item); }}
-                  >Delete</button>
-                </div>
               </div>
-            {/if}
-          {/each}
+            {/each}
+          </div>
         </div>
       {/if}
     </Card>
diff --git a/src/lib/stores/page.svelte.js b/src/lib/stores/page.svelte.js
index 18ee0da..800683e 100644
--- a/src/lib/stores/page.svelte.js
+++ b/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) ----