initial commit

2026-01-30 23:14:06 +01:00
commit 22cb32d56c
20 changed files with 7349 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,54 @@
+# TextDB
+
+TextDB is a **non-destructive**, completely offline, local-first text editor. Its core promise is simple: your edits never overwrite your history. Every manual save is immutable and append-only, and autosaves are kept as a separate draft layer. No accounts, no telemetry, no remote fonts, and no network calls.
+
+## Features
+
+- Non-destructive editing: manual saves are immutable; drafts never overwrite manual versions.
+- Sidebar list of texts with live search (titles + version bodies).
+- Editor with title, content area, and clear save status.
+- Cmd/Ctrl+S creates a new immutable manual version.
+- Autosave draft (debounced) that can be safely discarded.
+- History panel listing versions by timestamp (drafts included when present).
+- Export the current text to a `.txt` file.
+
+## Use cases
+
+- **Non-destructive notepad**: jot ideas without fear of losing earlier thoughts.
+- **Safe editor for authors**: keep every revision and compare or roll back at any time.
+- **Research notes**: maintain evolving notes with an audit trail of changes.
+- **Sensitive drafts**: keep local-only writing with immutable history and zero cloud sync.
+- **Prompt or snippet library**: store and iterate on reusable text safely.
+
+## Tech stack
+
+- Tauri v2
+- React + Vite + TypeScript
+- SQLite via `@tauri-apps/plugin-sql`
+
+## Install & run
+
+1) Install dependencies:
+
+```
+npm install
+```
+
+2) Start the app:
+
+```
+npm run tauri dev
+```
+
+## Autosave + versioning behavior
+
+- Typing triggers a debounced autosave (~600ms) that writes to the draft record.
+- Manual saves (Cmd/Ctrl+S or the button) append a new version and clear any draft.
+- Autosave only overwrites the single draft row; manual versions are never overwritten.
+- History shows all manual versions plus the current draft (if any).
+
+## Local storage
+
+- SQLite is loaded via `Database.load("sqlite:text.db")`.
+- The database file is stored in the Tauri app data directory.
+- The app is fully offline by design: no telemetry, no external fonts, no CDNs.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TextDB</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "textdb",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/plugin-dialog": "^2.0.0",
+    "@tauri-apps/plugin-fs": "^2.0.0",
+    "@tauri-apps/plugin-sql": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2.0.0",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "textdb"
+version = "0.1.0"
+description = "TextDB"
+edition = "2021"
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tauri = { version = "2", features = [] }
+tauri-plugin-dialog = { version = "2" }
+tauri-plugin-fs = { version = "2" }
+tauri-plugin-sql = { version = "2", features = ["sqlite"] }
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+  tauri_build::build();
+}
--- a/src-tauri/capabilities/main.json
+++ b/src-tauri/capabilities/main.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "main",
+  "description": "Default capabilities for TextDB",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "sql:default",
+    "sql:allow-execute",
+    "dialog:default",
+    "fs:default",
+    "fs:allow-write-file",
+    "fs:allow-write-text-file",
+    "fs:allow-home-write-recursive"
+  ]
+}
--- a/src-tauri/icons/history.png
+++ b/src-tauri/icons/history.png
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -0,0 +1,10 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+  tauri::Builder::default()
+    .plugin(tauri_plugin_dialog::init())
+    .plugin(tauri_plugin_fs::init())
+    .plugin(tauri_plugin_sql::Builder::default().build())
+    .run(tauri::generate_context!())
+    .expect("error while running tauri application");
+}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "./gen/schemas/desktop-schema.json",
+  "productName": "TextDB",
+  "version": "0.1.0",
+  "identifier": "com.textdb.app",
+  "build": {
+    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "npm run build",
+    "devUrl": "http://localhost:5173",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "withGlobalTauri": false,
+    "windows": [
+      {
+        "label": "main",
+        "title": "TextDB",
+        "width": 1100,
+        "height": 720,
+        "minWidth": 980,
+        "minHeight": 640,
+        "resizable": true
+      }
+    ],
+    "security": {
+      "csp": null,
+      "capabilities": ["main"]
+    }
+  },
+  "plugins": {
+    "sql": {
+      "preload": ["sqlite:text.db"]
+    }
+  }
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,782 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { save } from "@tauri-apps/plugin-dialog";
+import { writeTextFile } from "@tauri-apps/plugin-fs";
+import historyIcon from "./assets/history.png";
+import {
+  createText,
+  deleteText,
+  deleteTextVersion,
+  discardDraft,
+  getDraft,
+  getLatestManualVersion,
+  getText,
+  listTexts,
+  listVersions,
+  searchTexts,
+  saveManualVersion,
+  updateTextTitle,
+  upsertDraft,
+  type Text,
+} from "./lib/db";
+
+const formatDate = (timestamp: number) => {
+  if (!timestamp) return "";
+  return new Date(timestamp).toLocaleString();
+};
+
+type HistorySnapshot = {
+  body: string;
+  lastPersistedBody: string;
+  lastPersistedTitle: string;
+  hasDraft: boolean;
+  restoredDraft: boolean;
+  draftBaseVersionId: string | null;
+  latestManualVersionId: string | null;
+};
+
+type ConfirmState = {
+  title: string;
+  message: string;
+  actionLabel?: string;
+  onConfirm: () => Promise<void> | void;
+};
+
+type HistoryEntry = {
+  id: string;
+  created_at: number;
+  kind: "manual" | "draft";
+  body: string;
+  baseVersionId?: string | null;
+};
+
+const DEFAULT_TITLE = "Untitled Text";
+
+export default function App() {
+  const [texts, setTexts] = useState<Text[]>([]);
+  const [selectedTextId, setSelectedTextId] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [loadingTexts, setLoadingTexts] = useState(true);
+
+  const [title, setTitle] = useState("");
+  const [lastPersistedTitle, setLastPersistedTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [lastPersistedBody, setLastPersistedBody] = useState("");
+  const [hasDraft, setHasDraft] = useState(false);
+  const [restoredDraft, setRestoredDraft] = useState(false);
+  const [latestManualVersionId, setLatestManualVersionId] = useState<string | null>(null);
+  const [draftBaseVersionId, setDraftBaseVersionId] = useState<string | null>(null);
+
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [historyItems, setHistoryItems] = useState<HistoryEntry[]>([]);
+  const [viewingVersion, setViewingVersion] = useState<HistoryEntry | null>(null);
+  const [selectedHistoryId, setSelectedHistoryId] = useState<string | null>(null);
+  const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
+
+  const bodyRef = useRef(body);
+  const historySnapshotRef = useRef<HistorySnapshot | null>(null);
+
+  useEffect(() => {
+    bodyRef.current = body;
+  }, [body]);
+
+  const isViewingHistory = viewingVersion !== null;
+  const isDirty = !isViewingHistory && body !== lastPersistedBody;
+  const hasText = body.trim().length > 0;
+
+  const statusKey = useMemo(() => {
+    if (isViewingHistory) return "history";
+    if (isDirty) return "unsaved";
+    if (hasDraft) return "draft";
+    return "saved";
+  }, [hasDraft, isDirty, isViewingHistory]);
+
+  const canSave = !isViewingHistory && (isDirty || hasDraft);
+
+  const statusLabel = useMemo(() => {
+    switch (statusKey) {
+      case "history":
+        return "Viewing history";
+      case "unsaved":
+        return "Unsaved";
+      case "draft":
+        return "Draft autosaved";
+      default:
+        return "Saved";
+    }
+  }, [statusKey]);
+
+  const refreshTexts = useCallback(async () => {
+    setLoadingTexts(true);
+    try {
+      const trimmed = search.trim();
+      const rows = trimmed ? await searchTexts(trimmed) : await listTexts();
+      setTexts(rows);
+    } finally {
+      setLoadingTexts(false);
+    }
+  }, [search]);
+
+  const refreshVersions = useCallback(async () => {
+    if (!selectedTextId || !historyOpen) return;
+    const [manualRows, draft] = await Promise.all([
+      listVersions(selectedTextId),
+      getDraft(selectedTextId)
+    ]);
+    const manualItems: HistoryEntry[] = manualRows.map((row) => ({
+      id: row.id,
+      created_at: row.created_at,
+      kind: "manual",
+      body: row.body
+    }));
+    const draftItem: HistoryEntry[] = draft
+      ? [
+          {
+            id: `draft:${selectedTextId}`,
+            created_at: draft.updated_at,
+            kind: "draft",
+            body: draft.body,
+            baseVersionId: draft.base_version_id ?? null
+          }
+        ]
+      : [];
+    const combined = [...draftItem, ...manualItems].sort(
+      (a, b) => b.created_at - a.created_at
+    );
+    setHistoryItems(combined);
+  }, [historyOpen, selectedTextId]);
+
+  useEffect(() => {
+    refreshTexts().catch((error) => {
+      console.error("Failed to load texts", error);
+    });
+  }, [refreshTexts]);
+
+  useEffect(() => {
+    if (!selectedTextId && texts.length > 0) {
+      setSelectedTextId(texts[0].id);
+    }
+  }, [selectedTextId, texts]);
+
+  useEffect(() => {
+    if (!historyOpen) {
+      setHistoryItems([]);
+      return;
+    }
+    refreshVersions().catch((error) => {
+      console.error("Failed to load versions", error);
+    });
+  }, [historyOpen, refreshVersions]);
+
+  useEffect(() => {
+    if (!selectedTextId) {
+      setTitle("");
+      setLastPersistedTitle("");
+      setBody("");
+      setLastPersistedBody("");
+      setHasDraft(false);
+      setRestoredDraft(false);
+      setLatestManualVersionId(null);
+      setDraftBaseVersionId(null);
+      setViewingVersion(null);
+      setSelectedHistoryId(null);
+      historySnapshotRef.current = null;
+      return;
+    }
+
+    let cancelled = false;
+    const loadText = async () => {
+      const [text, manualVersion, draft] = await Promise.all([
+        getText(selectedTextId),
+        getLatestManualVersion(selectedTextId),
+        getDraft(selectedTextId)
+      ]);
+
+      if (cancelled) return;
+
+      if (!text) {
+        setSelectedTextId(null);
+        return;
+      }
+
+      const resolvedTitle = text.title || DEFAULT_TITLE;
+      const resolvedBody = draft?.body ?? manualVersion?.body ?? "";
+      const baseVersionId = draft?.base_version_id ?? manualVersion?.id ?? null;
+
+      setTitle(resolvedTitle);
+      setLastPersistedTitle(resolvedTitle);
+      setBody(resolvedBody);
+      setLastPersistedBody(resolvedBody);
+      setHasDraft(Boolean(draft));
+      setRestoredDraft(Boolean(draft));
+      setLatestManualVersionId(manualVersion?.id ?? null);
+      setDraftBaseVersionId(baseVersionId);
+      setViewingVersion(null);
+      setSelectedHistoryId(
+        draft ? `draft:${selectedTextId}` : manualVersion?.id ?? null
+      );
+      historySnapshotRef.current = null;
+    };
+
+    loadText().catch((error) => {
+      console.error("Failed to load text", error);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedTextId]);
+
+  useEffect(() => {
+    if (!selectedTextId || !isDirty || isViewingHistory) return;
+
+    const currentBody = body;
+    const handle = window.setTimeout(() => {
+      upsertDraft(selectedTextId, currentBody, draftBaseVersionId)
+        .then(() => {
+          if (bodyRef.current !== currentBody) return;
+          setHasDraft(true);
+          setLastPersistedBody(currentBody);
+          setSelectedHistoryId(`draft:${selectedTextId}`);
+          if (historyOpen) {
+            refreshVersions().catch((error) => {
+              console.error("Failed to refresh history", error);
+            });
+          }
+        })
+        .catch((error) => {
+          console.error("Failed to autosave draft", error);
+        });
+    }, 600);
+
+    return () => window.clearTimeout(handle);
+  }, [
+    body,
+    draftBaseVersionId,
+    historyOpen,
+    isDirty,
+    isViewingHistory,
+    refreshVersions,
+    selectedTextId
+  ]);
+
+  const handleNewText = useCallback(async () => {
+    const { textId } = await createText(DEFAULT_TITLE, "");
+    await refreshTexts();
+    setSelectedTextId(textId);
+  }, [refreshTexts]);
+
+  const handleDeleteText = useCallback(
+    async (promptId: string) => {
+      await deleteText(promptId);
+      await refreshTexts();
+      if (selectedTextId === promptId) {
+        setSelectedTextId(null);
+      }
+    },
+    [refreshTexts, selectedTextId]
+  );
+
+  const handleSaveVersion = useCallback(async () => {
+    if (!selectedTextId || !canSave) return;
+    const normalizedTitle = title.trim() || DEFAULT_TITLE;
+    if (normalizedTitle !== title) {
+      setTitle(normalizedTitle);
+    }
+    const result = await saveManualVersion(selectedTextId, normalizedTitle, body);
+    setLastPersistedBody(body);
+    setLastPersistedTitle(normalizedTitle);
+    setHasDraft(false);
+    setRestoredDraft(false);
+    setLatestManualVersionId(result.versionId);
+    setDraftBaseVersionId(result.versionId);
+    setSelectedHistoryId(result.versionId);
+    await refreshTexts();
+    await refreshVersions();
+  }, [body, canSave, refreshTexts, refreshVersions, selectedTextId, title]);
+
+  const applyTitleUpdate = useCallback((promptId: string, nextTitle: string) => {
+    const now = Date.now();
+    setTexts((prev) => {
+      let updated: Text | null = null;
+      const remaining: Text[] = [];
+      for (const text of prev) {
+        if (text.id === promptId) {
+          updated = { ...text, title: nextTitle, updated_at: now };
+        } else {
+          remaining.push(text);
+        }
+      }
+      if (!updated) return prev;
+      return [updated, ...remaining];
+    });
+  }, []);
+
+  const handleTitleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const nextTitle = event.target.value;
+      setTitle(nextTitle);
+      if (!selectedTextId || isViewingHistory) return;
+      applyTitleUpdate(selectedTextId, nextTitle);
+      setLastPersistedTitle(nextTitle);
+      updateTextTitle(selectedTextId, nextTitle).catch((error) => {
+        console.error("Failed to update title", error);
+      });
+    },
+    [applyTitleUpdate, isViewingHistory, selectedTextId]
+  );
+
+  const handleDiscardDraft = useCallback(async () => {
+    if (!selectedTextId || isViewingHistory) return;
+    await discardDraft(selectedTextId);
+    const manualVersion = await getLatestManualVersion(selectedTextId);
+    const resolvedBody = manualVersion?.body ?? "";
+    setBody(resolvedBody);
+    setLastPersistedBody(resolvedBody);
+    setHasDraft(false);
+    setRestoredDraft(false);
+    setLatestManualVersionId(manualVersion?.id ?? null);
+    setDraftBaseVersionId(manualVersion?.id ?? null);
+    setSelectedHistoryId(manualVersion?.id ?? null);
+    await refreshVersions();
+  }, [isViewingHistory, refreshVersions, selectedTextId]);
+
+  const handleExportText = useCallback(async () => {
+    if (!hasText) return;
+    const filename = `${title.trim() || DEFAULT_TITLE}.txt`;
+    const path = await save({
+      defaultPath: filename,
+      filters: [{ name: "Text", extensions: ["txt"] }]
+    });
+    if (!path) return;
+    const finalPath = path.endsWith(".txt") ? path : `${path}.txt`;
+    await writeTextFile(finalPath, body);
+  }, [body, hasText, title]);
+
+  const handleExitHistory = useCallback(() => {
+    const snapshot = historySnapshotRef.current;
+    if (snapshot) {
+      setBody(snapshot.body);
+      setLastPersistedBody(snapshot.lastPersistedBody);
+      setLastPersistedTitle(snapshot.lastPersistedTitle);
+      setHasDraft(snapshot.hasDraft);
+      setRestoredDraft(snapshot.restoredDraft);
+      setDraftBaseVersionId(snapshot.draftBaseVersionId);
+      setLatestManualVersionId(snapshot.latestManualVersionId);
+    }
+    setViewingVersion(null);
+    setSelectedHistoryId(null);
+    historySnapshotRef.current = null;
+  }, []);
+
+  const applyVersionAsCurrent = useCallback(
+    (version: HistoryEntry) => {
+      const snapshot = historySnapshotRef.current;
+      if (snapshot) {
+        setLastPersistedBody(snapshot.lastPersistedBody);
+        setLastPersistedTitle(snapshot.lastPersistedTitle);
+        setHasDraft(snapshot.hasDraft);
+        setRestoredDraft(snapshot.restoredDraft);
+        setLatestManualVersionId(snapshot.latestManualVersionId);
+      }
+      setDraftBaseVersionId(
+        version.kind === "manual" ? version.id : version.baseVersionId ?? null
+      );
+      setBody(version.body);
+      setLastPersistedBody(version.body);
+      setViewingVersion(null);
+      setSelectedHistoryId(version.id);
+      historySnapshotRef.current = null;
+    },
+    []
+  );
+
+  const handleDeleteVersion = useCallback(
+    async (version: HistoryEntry) => {
+      if (!selectedTextId) return;
+
+      const currentItems = historyItems;
+      const index = currentItems.findIndex((item) => item.id === version.id);
+      const olderCandidate =
+        index >= 0 ? currentItems[index + 1] ?? null : null;
+      const fallbackCandidate =
+        index > 0 ? currentItems[index - 1] ?? null : null;
+      const shouldAutoSelect =
+        historyOpen && (!viewingVersion || viewingVersion.id === version.id);
+
+      if (version.kind === "draft") {
+        await discardDraft(selectedTextId);
+        setHasDraft(false);
+        setRestoredDraft(false);
+        setDraftBaseVersionId(latestManualVersionId ?? null);
+        if (historySnapshotRef.current) {
+          historySnapshotRef.current.hasDraft = false;
+          historySnapshotRef.current.restoredDraft = false;
+          historySnapshotRef.current.draftBaseVersionId =
+            latestManualVersionId ?? null;
+        }
+      } else {
+        await deleteTextVersion(selectedTextId, version.id);
+      }
+      await refreshVersions();
+
+      if (version.kind === "manual" && latestManualVersionId === version.id) {
+        const manualVersion = await getLatestManualVersion(selectedTextId);
+        const resolvedBody = manualVersion?.body ?? "";
+        const nextManualId = manualVersion?.id ?? null;
+        setLatestManualVersionId(nextManualId);
+        setDraftBaseVersionId(nextManualId);
+        if (historySnapshotRef.current) {
+          historySnapshotRef.current.latestManualVersionId = nextManualId;
+          historySnapshotRef.current.draftBaseVersionId = nextManualId;
+        }
+        if (!hasDraft && !isViewingHistory) {
+          setBody(resolvedBody);
+          setLastPersistedBody(resolvedBody);
+        }
+      }
+
+      if (shouldAutoSelect) {
+        if (olderCandidate) {
+          applyVersionAsCurrent(olderCandidate);
+        } else if (fallbackCandidate) {
+          applyVersionAsCurrent(fallbackCandidate);
+        } else {
+          handleExitHistory();
+        }
+      }
+    },
+    [
+      applyVersionAsCurrent,
+      handleExitHistory,
+      hasDraft,
+      isViewingHistory,
+      historyOpen,
+      latestManualVersionId,
+      refreshVersions,
+      selectedTextId,
+      historyItems,
+      viewingVersion
+    ]
+  );
+
+  const handleConfirm = useCallback(async () => {
+    if (!confirmState) return;
+    const action = confirmState.onConfirm;
+    setConfirmState(null);
+    try {
+      await action();
+    } catch (error) {
+      console.error("Delete failed", error);
+    }
+  }, [confirmState]);
+
+  const handleTitleBlur = useCallback(async () => {
+    if (!selectedTextId || isViewingHistory) return;
+    const normalizedTitle = title.trim() || DEFAULT_TITLE;
+    if (normalizedTitle !== title) {
+      setTitle(normalizedTitle);
+      applyTitleUpdate(selectedTextId, normalizedTitle);
+    }
+    if (normalizedTitle === lastPersistedTitle) return;
+    await updateTextTitle(selectedTextId, normalizedTitle);
+    setLastPersistedTitle(normalizedTitle);
+    await refreshTexts();
+  }, [
+    applyTitleUpdate,
+    isViewingHistory,
+    lastPersistedTitle,
+    refreshTexts,
+    selectedTextId,
+    title
+  ]);
+
+  const handleToggleHistory = useCallback(() => {
+    if (historyOpen && viewingVersion) {
+      const snapshot = historySnapshotRef.current;
+      if (snapshot) {
+        setBody(snapshot.body);
+        setLastPersistedBody(snapshot.lastPersistedBody);
+        setLastPersistedTitle(snapshot.lastPersistedTitle);
+        setHasDraft(snapshot.hasDraft);
+        setRestoredDraft(snapshot.restoredDraft);
+        setDraftBaseVersionId(snapshot.draftBaseVersionId);
+        setLatestManualVersionId(snapshot.latestManualVersionId);
+      }
+      setViewingVersion(null);
+      historySnapshotRef.current = null;
+    }
+    setHistoryOpen((prev) => !prev);
+  }, [historyOpen, viewingVersion]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isSave =
+        (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s";
+      if (!isSave) return;
+      event.preventDefault();
+      handleSaveVersion().catch((error) => {
+        console.error("Failed to save version", error);
+      });
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleSaveVersion]);
+
+  return (
+    <div className="app">
+      <aside className="sidebar">
+        <div className="sidebar__header">
+          <div className="app-title">TextDB</div>
+          <input
+            className="search"
+            placeholder="Search texts"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+          />
+        </div>
+        <div className="prompt-list">
+          <div className="prompt-list__inner">
+            {loadingTexts ? (
+              <div className="empty">Loading texts…</div>
+            ) : texts.length === 0 ? (
+              <div className="empty">No texts yet.</div>
+            ) : (
+              texts.map((text) => (
+                <div
+                  key={text.id}
+                  className={`prompt-item${
+                    text.id === selectedTextId ? " is-active" : ""
+                  }`}
+                  onClick={() => setSelectedTextId(text.id)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      setSelectedTextId(text.id);
+                    }
+                  }}
+                >
+                  <div className="prompt-item__content">
+                    <div className="prompt-item__title">{text.title}</div>
+                    <div className="prompt-item__meta">
+                      Updated {formatDate(text.updated_at)}
+                    </div>
+                  </div>
+                  <button
+                    className="prompt-item__delete"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      setConfirmState({
+                        title: "Delete text",
+                        message: `Delete \"${text.title}\"? This removes all versions and drafts.`,
+                        actionLabel: "Delete text",
+                        onConfirm: () => handleDeleteText(text.id)
+                      });
+                    }}
+                    aria-label="Delete text"
+                    title="Delete text"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+        <div className="sidebar__footer">
+          <button className="button button--primary" onClick={handleNewText}>
+            New Text
+          </button>
+        </div>
+      </aside>
+
+      <main className="workspace">
+        {!selectedTextId ? (
+          <div className="empty-state">
+            <div className="empty-state__title">Create your first text</div>
+            <div className="empty-state__subtitle">
+              Everything stays offline in a single SQLite database.
+            </div>
+            <button className="button button--primary" onClick={handleNewText}>
+              New Text
+            </button>
+          </div>
+        ) : (
+          <div
+            className={`workspace__content${
+              historyOpen ? " workspace__content--history" : ""
+            }`}
+          >
+            <section className="editor">
+              <div className="editor__header">
+                <input
+                  className="title-input"
+                  value={title}
+                  onChange={handleTitleChange}
+                  onBlur={handleTitleBlur}
+                  placeholder="Text title"
+                  disabled={isViewingHistory}
+                />
+                <div className="editor__status-row">
+                  <div className="status-line">
+                    <span className={`status status--${statusKey}`}></span>
+                    {statusLabel}
+                  </div>
+                  <button
+                    className={`icon-button${historyOpen ? " is-active" : ""}`}
+                    onClick={handleToggleHistory}
+                    aria-label={historyOpen ? "Close history" : "Open history"}
+                    title={historyOpen ? "Close history" : "Open history"}
+                    type="button"
+                  >
+                    <img src={historyIcon} alt="" className="icon-button__img" />
+                  </button>
+                </div>
+              </div>
+
+              <textarea
+                className="editor__textarea"
+                value={body}
+                onChange={(event) => setBody(event.target.value)}
+                placeholder="Write your text here…"
+                readOnly={isViewingHistory}
+              />
+
+              <div className="editor__footer">
+                {hasText ? (
+                  <button className="button" onClick={handleExportText}>
+                    Export Text
+                  </button>
+                ) : null}
+                {hasDraft && !isViewingHistory ? (
+                  <button
+                    className="button"
+                    onClick={() =>
+                      setConfirmState({
+                        title: "Discard draft",
+                        message: "Discard this draft? This cannot be undone.",
+                        actionLabel: "Discard draft",
+                        onConfirm: handleDiscardDraft
+                      })
+                    }
+                  >
+                    Discard Draft
+                  </button>
+                ) : null}
+                <button
+                  className="button button--primary button--save"
+                  onClick={handleSaveVersion}
+                  disabled={!canSave}
+                >
+                  Save Version (⌘S)
+                </button>
+              </div>
+            </section>
+
+            {historyOpen ? (
+              <aside className="history">
+                <div className="history__header">
+                  <span>History</span>
+                  <button
+                    className="history__close"
+                    onClick={handleToggleHistory}
+                    aria-label="Close history"
+                    title="Close history"
+                    type="button"
+                  >
+                    ×
+                  </button>
+                </div>
+                <div className="history__list">
+                  {historyItems.length === 0 ? (
+                    <div className="empty">No versions yet.</div>
+                  ) : (
+                    historyItems.map((version) => (
+                      <div
+                        key={version.id}
+                        className={`history__item${
+                          selectedHistoryId === version.id ? " is-active" : ""
+                        }`}
+                        onClick={() => applyVersionAsCurrent(version)}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            applyVersionAsCurrent(version);
+                          }
+                        }}
+                      >
+                        <div className="history__item-content">
+                          <div className="history__item-title">
+                            {formatDate(version.created_at)}
+                          </div>
+                          <div className="history__item-meta">
+                            {version.kind === "draft" ? "Draft" : "Manual save"}
+                          </div>
+                        </div>
+                        <button
+                          className="history__item-delete"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setConfirmState({
+                              title:
+                                version.kind === "draft"
+                                  ? "Discard draft"
+                                  : "Delete version",
+                              message:
+                                version.kind === "draft"
+                                  ? "Discard this draft? This cannot be undone."
+                                  : "Delete this version? This cannot be undone.",
+                              actionLabel:
+                                version.kind === "draft"
+                                  ? "Discard draft"
+                                  : "Delete version",
+                              onConfirm: () => handleDeleteVersion(version)
+                            });
+                          }}
+                          aria-label={
+                            version.kind === "draft"
+                              ? "Discard draft"
+                              : "Delete version"
+                          }
+                          title={
+                            version.kind === "draft"
+                              ? "Discard draft"
+                              : "Delete version"
+                          }
+                        >
+                          ×
+                        </button>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </aside>
+            ) : null}
+          </div>
+        )}
+      </main>
+
+      {confirmState ? (
+        <div className="modal">
+          <div className="modal__overlay" onClick={() => setConfirmState(null)} />
+          <div className="modal__card" role="dialog" aria-modal="true">
+            <div className="modal__title">{confirmState.title}</div>
+            <div className="modal__message">{confirmState.message}</div>
+            <div className="modal__actions">
+              <button className="button" onClick={() => setConfirmState(null)}>
+                Cancel
+              </button>
+              <button className="button button--danger" onClick={handleConfirm}>
+                {confirmState.actionLabel ?? "Delete"}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/src/assets/history.png
+++ b/src/assets/history.png
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,613 @@
+:root {
+  color-scheme: dark;
+  font-family: "SF Pro Text", "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  --bg: #141414;
+  --bg-elevated: #1b1b1b;
+  --panel: #1b1b1b;
+  --ink: #e5e5e5;
+  --muted: #a0a0a0;
+  --accent: #3a3a3a;
+  --accent-strong: #5a5a5a;
+  --accent-warm: #5a5a5a;
+  --border: #2a2a2a;
+  --shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
+  --radius: 16px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  height: 100vh;
+  overflow: hidden;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--ink);
+}
+
+#root {
+  height: 100vh;
+  min-height: 100vh;
+}
+
+.app {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  height: 100vh;
+  min-height: 100vh;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 0;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sidebar__header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.sidebar__footer {
+  margin-top: auto;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.sidebar__footer .button {
+  width: 100%;
+}
+
+.app-title {
+  font-size: 1.4rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+
+.search {
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  color: var(--ink);
+  font-size: 0.95rem;
+}
+
+.button {
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  padding: 10px 16px;
+  background: var(--bg-elevated);
+  color: var(--ink);
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.button:hover {
+  box-shadow: var(--shadow);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  box-shadow: none;
+}
+
+.button--primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--ink);
+}
+
+.button--primary:hover {
+  border-color: var(--accent-strong);
+}
+
+.button--danger {
+  background: var(--accent-warm);
+  border-color: var(--accent-warm);
+  color: var(--ink);
+}
+
+.button--danger:hover {
+  border-color: #6b6b6b;
+  background: #4f4f4f;
+}
+
+.button--save {
+  margin-left: auto;
+}
+
+.prompt-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto;
+  padding: 0;
+  min-height: 0;
+}
+
+.prompt-list__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 16px 16px 16px;
+}
+
+.prompt-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  text-align: left;
+  position: relative;
+  border-radius: 14px;
+  border: 1px solid transparent;
+  background: var(--bg-elevated);
+  padding: 12px 48px 12px 14px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.prompt-item:hover {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.prompt-item.is-active {
+  border-color: #555;
+  background: #202020;
+}
+
+.prompt-item__content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.prompt-item__delete {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1.1rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+
+.prompt-item__delete:hover {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ink);
+}
+
+.prompt-item__title {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.prompt-item__meta {
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.workspace {
+  padding: 28px 32px;
+  height: 100%;
+  overflow: hidden;
+}
+
+.workspace__content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  height: 100%;
+  min-height: 0;
+}
+
+.workspace__content--history {
+  grid-template-columns: minmax(0, 1fr) 260px;
+}
+
+.editor {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow);
+  min-height: 0;
+  height: 100%;
+}
+
+.editor__header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.editor__status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.title-input {
+  font-size: 1.6rem;
+  border: none;
+  border-bottom: 2px solid var(--border);
+  padding: 6px 2px 8px;
+  background: transparent;
+  color: var(--ink);
+}
+
+.title-input:focus {
+  outline: none;
+  border-bottom-color: #5c5c5c;
+}
+
+.status-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  color: var(--muted);
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.icon-button__img {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+.icon-button:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+  color: var(--ink);
+}
+
+.icon-button.is-active {
+  border-color: #5c5c5c;
+  color: var(--ink);
+  background: #202020;
+}
+
+.status {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #3c3c3c;
+}
+
+.status--saved {
+  background: #b3b3b3;
+}
+
+.status--draft {
+  background: #8f8f8f;
+}
+
+.status--unsaved {
+  background: #d0d0d0;
+}
+
+.status--history {
+  background: #707070;
+}
+
+.editor__textarea {
+  flex: 1;
+  width: 100%;
+  resize: none;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  padding: 14px;
+  font-family: "SF Mono", "Menlo", "Consolas", monospace;
+  font-size: 0.95rem;
+  background: #151515;
+  color: var(--ink);
+}
+
+.editor__textarea:focus {
+  outline: none;
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.editor__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: #1f1f1f;
+}
+
+.banner__actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.banner--draft {
+  border-color: #3a3a3a;
+  background: #1d1d1d;
+}
+
+.banner--history {
+  border-color: #3a3a3a;
+  background: #1d1d1d;
+}
+
+.history {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  background: var(--panel);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  height: 100%;
+  min-height: 0;
+}
+
+.history__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.95rem;
+}
+
+.history__close {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.history__close:hover {
+  color: var(--ink);
+}
+
+.history__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.history__item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  text-align: left;
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: #1f1f1f;
+  padding: 10px 42px 10px 12px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.history__item.is-active {
+  border-color: #555;
+  background: #242424;
+}
+
+.history__item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.history__item-delete {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+
+.history__item-delete:hover {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ink);
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 20;
+}
+
+.modal__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modal__card {
+  position: relative;
+  z-index: 1;
+  width: min(420px, 92vw);
+  padding: 22px;
+  border-radius: 16px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.modal__title {
+  font-size: 1.2rem;
+}
+
+.modal__message {
+  color: var(--muted);
+}
+
+.modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.history__item-title {
+  font-weight: 600;
+}
+
+.history__item-meta {
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.empty {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 32px;
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow);
+  max-width: 520px;
+}
+
+.empty-state__title {
+  font-size: 1.6rem;
+}
+
+.empty-state__subtitle {
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  body {
+    height: auto;
+    overflow: auto;
+  }
+
+  #root {
+    height: auto;
+  }
+
+  .app {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    height: auto;
+  }
+
+  .workspace {
+    padding: 20px;
+    height: auto;
+    overflow: visible;
+  }
+
+  .workspace__content {
+    height: auto;
+  }
+
+  .workspace__content--history {
+    grid-template-columns: 1fr;
+  }
+
+  .editor {
+    height: auto;
+  }
+
+  .history {
+    height: auto;
+  }
+}
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -0,0 +1,255 @@
+import Database from "@tauri-apps/plugin-sql";
+
+export type Text = {
+  id: string;
+  title: string;
+  created_at: number;
+  updated_at: number;
+  last_saved_version_id: string | null;
+};
+
+export type TextVersion = {
+  id: string;
+  prompt_id: string;
+  body: string;
+  created_at: number;
+  kind: "manual" | "autosave";
+  note: string | null;
+};
+
+export type TextDraft = {
+  prompt_id: string;
+  body: string;
+  updated_at: number;
+  base_version_id: string | null;
+};
+
+const MIGRATIONS = [
+  "PRAGMA foreign_keys = ON;",
+  `CREATE TABLE IF NOT EXISTS prompts(
+    id TEXT PRIMARY KEY,
+    title TEXT NOT NULL,
+    created_at INTEGER NOT NULL,
+    updated_at INTEGER NOT NULL,
+    last_saved_version_id TEXT
+  );`,
+  `CREATE TABLE IF NOT EXISTS prompt_versions(
+    id TEXT PRIMARY KEY,
+    prompt_id TEXT NOT NULL,
+    body TEXT NOT NULL,
+    created_at INTEGER NOT NULL,
+    kind TEXT NOT NULL CHECK(kind IN ('manual','autosave')),
+    note TEXT,
+    FOREIGN KEY(prompt_id) REFERENCES prompts(id) ON DELETE CASCADE
+  );`,
+  `CREATE TABLE IF NOT EXISTS prompt_drafts(
+    prompt_id TEXT PRIMARY KEY,
+    body TEXT NOT NULL,
+    updated_at INTEGER NOT NULL,
+    base_version_id TEXT,
+    FOREIGN KEY(prompt_id) REFERENCES prompts(id) ON DELETE CASCADE
+  );`,
+  "CREATE INDEX IF NOT EXISTS idx_prompt_versions_prompt_time ON prompt_versions(prompt_id, created_at DESC);",
+  "CREATE INDEX IF NOT EXISTS idx_prompts_updated ON prompts(updated_at DESC);"
+];
+
+let dbPromise: Promise<Database> | null = null;
+
+async function migrate(db: Database) {
+  for (const statement of MIGRATIONS) {
+    await db.execute(statement);
+  }
+}
+
+export async function getDb(): Promise<Database> {
+  if (!dbPromise) {
+    dbPromise = (async () => {
+      const db = await Database.load("sqlite:text.db");
+      await migrate(db);
+      return db;
+    })();
+  }
+  return dbPromise;
+}
+
+export async function initDb() {
+  await getDb();
+}
+
+export async function listTexts(): Promise<Text[]> {
+  const db = await getDb();
+  const rows = await db.select<Text[]>(
+    "SELECT * FROM prompts ORDER BY updated_at DESC"
+  );
+  return rows;
+}
+
+export async function searchTexts(term: string): Promise<Text[]> {
+  const db = await getDb();
+  const normalized = `%${term.toLowerCase()}%`;
+  const rows = await db.select<Text[]>(
+    `SELECT p.*
+     FROM prompts p
+     WHERE LOWER(p.title) LIKE $1
+        OR EXISTS (
+          SELECT 1
+          FROM prompt_versions v
+          WHERE v.prompt_id = p.id
+            AND LOWER(v.body) LIKE $1
+        )
+     ORDER BY p.updated_at DESC`,
+    [normalized]
+  );
+  return rows;
+}
+
+export async function getText(promptId: string): Promise<Text | null> {
+  const db = await getDb();
+  const rows = await db.select<Text[]>(
+    "SELECT * FROM prompts WHERE id = $1 LIMIT 1",
+    [promptId]
+  );
+  return rows[0] ?? null;
+}
+
+export async function getLatestManualVersion(
+  promptId: string
+): Promise<TextVersion | null> {
+  const db = await getDb();
+  const rows = await db.select<TextVersion[]>(
+    "SELECT * FROM prompt_versions WHERE prompt_id = $1 AND kind = 'manual' ORDER BY created_at DESC LIMIT 1",
+    [promptId]
+  );
+  return rows[0] ?? null;
+}
+
+export async function listVersions(
+  promptId: string
+): Promise<TextVersion[]> {
+  const db = await getDb();
+  return db.select<TextVersion[]>(
+    "SELECT * FROM prompt_versions WHERE prompt_id = $1 ORDER BY created_at DESC",
+    [promptId]
+  );
+}
+
+export async function getDraft(promptId: string): Promise<TextDraft | null> {
+  const db = await getDb();
+  const rows = await db.select<TextDraft[]>(
+    "SELECT * FROM prompt_drafts WHERE prompt_id = $1 LIMIT 1",
+    [promptId]
+  );
+  return rows[0] ?? null;
+}
+
+export async function createText(
+  title: string,
+  body: string
+): Promise<{ textId: string; versionId: string; createdAt: number }> {
+  const db = await getDb();
+  const now = Date.now();
+  const textId = crypto.randomUUID();
+  const versionId = crypto.randomUUID();
+
+  await db.execute(
+    "INSERT INTO prompts(id, title, created_at, updated_at, last_saved_version_id) VALUES($1, $2, $3, $4, $5)",
+    [textId, title, now, now, versionId]
+  );
+
+  await db.execute(
+    "INSERT INTO prompt_versions(id, prompt_id, body, created_at, kind, note) VALUES($1, $2, $3, $4, 'manual', NULL)",
+    [versionId, textId, body, now]
+  );
+
+  await db.execute("DELETE FROM prompt_drafts WHERE prompt_id = $1", [textId]);
+
+  return { textId, versionId, createdAt: now };
+}
+
+export async function saveManualVersion(
+  promptId: string,
+  title: string,
+  body: string
+): Promise<{ versionId: string; savedAt: number }> {
+  const db = await getDb();
+  const now = Date.now();
+  const versionId = crypto.randomUUID();
+
+  await db.execute(
+    "INSERT INTO prompt_versions(id, prompt_id, body, created_at, kind, note) VALUES($1, $2, $3, $4, 'manual', NULL)",
+    [versionId, promptId, body, now]
+  );
+
+  await db.execute(
+    "UPDATE prompts SET title = $1, updated_at = $2, last_saved_version_id = $3 WHERE id = $4",
+    [title, now, versionId, promptId]
+  );
+
+  await db.execute("DELETE FROM prompt_drafts WHERE prompt_id = $1", [promptId]);
+
+  return { versionId, savedAt: now };
+}
+
+export async function updateTextTitle(
+  promptId: string,
+  title: string
+) {
+  const db = await getDb();
+  const now = Date.now();
+  await db.execute("UPDATE prompts SET title = $1, updated_at = $2 WHERE id = $3", [
+    title,
+    now,
+    promptId
+  ]);
+}
+
+export async function upsertDraft(
+  promptId: string,
+  body: string,
+  baseVersionId: string | null
+) {
+  const db = await getDb();
+  const now = Date.now();
+  await db.execute(
+    `INSERT INTO prompt_drafts(prompt_id, body, updated_at, base_version_id)
+     VALUES($1, $2, $3, $4)
+     ON CONFLICT(prompt_id) DO UPDATE SET
+       body = excluded.body,
+       updated_at = excluded.updated_at,
+       base_version_id = excluded.base_version_id`,
+    [promptId, body, now, baseVersionId]
+  );
+}
+
+export async function discardDraft(promptId: string) {
+  const db = await getDb();
+  await db.execute("DELETE FROM prompt_drafts WHERE prompt_id = $1", [promptId]);
+}
+
+export async function deleteText(promptId: string) {
+  const db = await getDb();
+  await db.execute("DELETE FROM prompts WHERE id = $1", [promptId]);
+}
+
+export async function deleteTextVersion(promptId: string, versionId: string) {
+  const db = await getDb();
+  await db.execute("DELETE FROM prompt_versions WHERE id = $1", [versionId]);
+
+  const promptRows = await db.select<{ last_saved_version_id: string | null }[]>(
+    "SELECT last_saved_version_id FROM prompts WHERE id = $1 LIMIT 1",
+    [promptId]
+  );
+  const currentLastSaved = promptRows[0]?.last_saved_version_id ?? null;
+  if (currentLastSaved !== versionId) return;
+
+  const nextRows = await db.select<{ id: string }[]>(
+    "SELECT id FROM prompt_versions WHERE prompt_id = $1 AND kind = 'manual' ORDER BY created_at DESC LIMIT 1",
+    [promptId]
+  );
+  const nextId = nextRows[0]?.id ?? null;
+
+  await db.execute(
+    "UPDATE prompts SET last_saved_version_id = $1 WHERE id = $2",
+    [nextId, promptId]
+  );
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { initDb } from "./lib/db";
+
+const root = document.getElementById("root");
+if (!root) {
+  throw new Error("Root element not found");
+}
+
+initDb()
+  .then(() => {
+    ReactDOM.createRoot(root).render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    );
+  })
+  .catch((error) => {
+    console.error("Failed to initialize database", error);
+    root.innerHTML =
+      '<div style="padding:24px;font-family:sans-serif;">Failed to start TextDB. Check the console for details.</div>';
+  });
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(({ mode }) => ({
+  plugins: [react()],
+  clearScreen: false,
+  server: {
+    port: 5173,
+    strictPort: true
+  },
+  envPrefix: ["VITE_", "TAURI_"],
+  build: {
+    target: "es2021",
+    minify: mode === "development" ? false : "esbuild",
+    sourcemap: mode === "development"
+  }
+}));