@aiot-nexus/plugin-sdk 2.0.2 → 2.1.0

package/templates/sqlite/src/renderer/app.ts.tmpl

@@ -1,66 +1,152 @@
 import { createPluginFrameClient } from "@aiot-nexus/plugin-sdk/browser";
 
+type DatabaseSource = "default" | "external";
+type SqliteAffinity = "integer" | "real" | "text" | "blob" | "numeric";
+type LocatorKind = "primaryKey" | "rowid";
+type EditorMode = "insert" | "update";
+type SupportedLanguage = "en-US" | "zh-CN";
+type ThemeMode = "light" | "dark" | "system";
+type MessageParams = Record<string, string | number>;
+
 interface DatabaseInfo {
   databaseName: string;
   databasePath: string;
-  tableName: string;
-  recordCount: number;
+  source: DatabaseSource;
   databaseReady: boolean;
+  notice?: string;
 }
 
-interface SqliteRecord {
-  id: number;
-  title: string;
-  note: string;
-  createdAt: string;
+interface TableSummary {
+  name: string;
+  columnCount: number;
+  withoutRowid: boolean;
+  strict: boolean;
 }
 
-type SupportedLanguage = "en-US" | "zh-CN";
-type ThemeMode = "light" | "dark" | "system";
-type MessageParams = Record<string, string | number>;
+interface ColumnInfo {
+  name: string;
+  declaredType: string;
+  affinity: SqliteAffinity;
+  nullable: boolean;
+  defaultSql: string | null;
+  primaryKeyOrder: number;
+  generated: boolean;
+  hidden: boolean;
+  insertable: boolean;
+  requiredOnInsert: boolean;
+  autoIntegerPrimaryKey: boolean;
+}
+
+type WireValue =
+  | { kind: "null" }
+  | { kind: "integer"; value: string }
+  | { kind: "real"; value: number }
+  | { kind: "text"; value: string; length: number; truncated: boolean }
+  | { kind: "blob"; hex: string; byteLength: number; truncated: boolean };
+
+interface RowLocator {
+  kind: LocatorKind;
+  values: Array<{ column: string; value: WireValue }>;
+}
+
+interface TableRow {
+  cells: Array<{ column: string; value: WireValue }>;
+  locator?: RowLocator;
+}
+
+interface TableData {
+  table: TableSummary;
+  columns: ColumnInfo[];
+  rows: TableRow[];
+  totalRows: string;
+  offset: number;
+  limit: number;
+  hasPrevious: boolean;
+  hasNext: boolean;
+  writable: boolean;
+  locatorKind?: LocatorKind;
+}
+
+interface EditorDraftValue {
+  mode: string;
+  value: string;
+}
 
 const englishMessages = {
-  "document.title": "Plugin SQLite",
-  "heading.records": "SQLite Records",
+  "document.title": "SQLite Browser",
+  "heading.browser": "SQLite Browser",
+  "toolbar.databaseActions": "Database actions",
   "summary.aria": "Database summary",
   "summary.database": "Database",
+  "summary.source": "Source",
   "summary.table": "Table",
+  "summary.columns": "Columns",
   "summary.rows": "Rows",
   "summary.status": "Status",
-  "form.insertRow": "Insert Row",
-  "form.editRow": "Edit Row",
-  "field.title": "Title",
-  "field.note": "Note",
-  "section.recentRows": "Recent Rows",
-  "table.id": "ID",
-  "table.title": "Title",
-  "table.note": "Note",
-  "table.created": "Created",
-  "table.actions": "Actions",
+  "source.default": "Sample",
+  "source.external": "External",
+  "section.rows": "Table Rows",
+  "editor.insert": "Insert Row",
+  "editor.update": "Edit Row",
+  "editor.help": "Choose how each SQLite column should be written.",
+  "editor.current": "Current: {value}",
+  "column.untyped": "UNTYPED",
+  "column.primaryKey": "PK {order}",
+  "column.notNull": "NOT NULL",
+  "column.default": "DEFAULT {value}",
+  "column.generated": "GENERATED",
+  "column.required": "Required",
+  "mode.default": "Use default",
+  "mode.unchanged": "Do not change",
+  "mode.null": "NULL",
+  "mode.value": "Value",
+  "action.openDatabase": "Open Database",
+  "action.useDefault": "Use Sample",
   "action.refresh": "Refresh",
+  "action.addRow": "Add Row",
   "action.insert": "Insert",
   "action.save": "Save",
   "action.cancel": "Cancel",
-  "action.confirm": "Confirm",
+  "action.close": "Close",
   "action.edit": "Edit",
   "action.delete": "Delete",
+  "action.confirm": "Confirm",
+  "action.previous": "Previous",
+  "action.next": "Next",
+  "table.actions": "Actions",
+  "pager.aria": "Pagination",
+  "pager.pageSize": "Rows per page",
+  "pager.range": "{start}-{end} / {total}",
   "status.connecting": "Connecting",
   "status.waiting": "Waiting",
   "status.idle": "Idle",
   "status.loading": "Loading",
   "status.ready": "Ready",
   "status.unavailable": "Unavailable",
-  "status.updating": "Updating",
-  "status.inserting": "Inserting",
-  "status.deleting": "Deleting",
-  "status.updatedRow": "Updated row #{id}.",
-  "status.insertedRow": "Inserted row #{id}.",
-  "status.deletedRow": "Deleted row #{id}.",
-  "empty.noRows": "No rows yet.",
-  "validation.titleRequired": "Title is required.",
+  "status.opening": "Opening database",
+  "status.switching": "Switching database",
+  "status.inserting": "Inserting row",
+  "status.updating": "Updating row",
+  "status.deleting": "Deleting row",
+  "status.databaseOpened": "Opened {name}.",
+  "status.defaultOpened": "Using the sample database.",
+  "status.selectionCanceled": "Database selection canceled.",
+  "status.insertedRow": "Inserted row into {table}.",
+  "status.updatedRow": "Updated row in {table}.",
+  "status.deletedRow": "Deleted row from {table}.",
+  "status.writeSucceededRefreshFailed": "{operation} Rows could not be refreshed: {message}",
+  "empty.noTables": "No user tables were found in this database.",
+  "empty.noRows": "No rows in this table.",
+  "empty.noWritableColumns": "This table has no writable columns.",
+  "empty.noLocator": "This row has no stable primary-key or rowid locator.",
+  "value.null": "NULL",
+  "value.blob": "BLOB · {bytes} bytes · {preview}",
+  "value.truncated": "{value}… ({length} chars)",
+  "placeholder.value": "Enter value",
+  "placeholder.hex": "Hexadecimal bytes, for example 89504e47",
   "error.initializationFailed": "Initialization failed: {message}",
   "error.refreshFailed": "Refresh failed: {message}",
-  "error.deleteFailed": "Delete failed: {message}"
+  "error.operationFailed": "Operation failed: {message}"
 } as const;
 
 type MessageKey = keyof typeof englishMessages;
@@ -68,47 +154,80 @@ type MessageKey = keyof typeof englishMessages;
 const messages: Record<SupportedLanguage, Record<MessageKey, string>> = {
   "en-US": englishMessages,
   "zh-CN": {
-    "document.title": "插件 SQLite",
-    "heading.records": "SQLite 记录",
+    "document.title": "SQLite 数据库浏览器",
+    "heading.browser": "SQLite 数据库浏览器",
+    "toolbar.databaseActions": "数据库操作",
     "summary.aria": "数据库摘要",
     "summary.database": "数据库",
+    "summary.source": "来源",
     "summary.table": "数据表",
+    "summary.columns": "数据列",
     "summary.rows": "记录数",
     "summary.status": "状态",
-    "form.insertRow": "新增记录",
-    "form.editRow": "编辑记录",
-    "field.title": "标题",
-    "field.note": "备注",
-    "section.recentRows": "最近记录",
-    "table.id": "ID",
-    "table.title": "标题",
-    "table.note": "备注",
-    "table.created": "创建时间",
-    "table.actions": "操作",
+    "source.default": "示例库",
+    "source.external": "外部文件",
+    "section.rows": "表数据",
+    "editor.insert": "新增记录",
+    "editor.update": "编辑记录",
+    "editor.help": "为每个 SQLite 数据列选择写入方式。",
+    "editor.current": "当前值：{value}",
+    "column.untyped": "未声明类型",
+    "column.primaryKey": "主键 {order}",
+    "column.notNull": "非空",
+    "column.default": "默认 {value}",
+    "column.generated": "生成列",
+    "column.required": "必填",
+    "mode.default": "使用默认值",
+    "mode.unchanged": "不修改",
+    "mode.null": "NULL",
+    "mode.value": "输入值",
+    "action.openDatabase": "打开数据库",
+    "action.useDefault": "使用示例库",
     "action.refresh": "刷新",
+    "action.addRow": "新增记录",
     "action.insert": "新增",
     "action.save": "保存",
     "action.cancel": "取消",
-    "action.confirm": "确认",
+    "action.close": "关闭",
     "action.edit": "编辑",
     "action.delete": "删除",
+    "action.confirm": "确认",
+    "action.previous": "上一页",
+    "action.next": "下一页",
+    "table.actions": "操作",
+    "pager.aria": "分页",
+    "pager.pageSize": "每页记录",
+    "pager.range": "{start}-{end} / {total}",
     "status.connecting": "正在连接",
     "status.waiting": "等待中",
     "status.idle": "空闲",
     "status.loading": "正在加载",
     "status.ready": "已就绪",
     "status.unavailable": "不可用",
-    "status.updating": "正在更新",
-    "status.inserting": "正在新增",
-    "status.deleting": "正在删除",
-    "status.updatedRow": "已更新第 #{id} 条记录。",
-    "status.insertedRow": "已新增第 #{id} 条记录。",
-    "status.deletedRow": "已删除第 #{id} 条记录。",
-    "empty.noRows": "暂无记录。",
-    "validation.titleRequired": "标题不能为空。",
+    "status.opening": "正在打开数据库",
+    "status.switching": "正在切换数据库",
+    "status.inserting": "正在新增记录",
+    "status.updating": "正在更新记录",
+    "status.deleting": "正在删除记录",
+    "status.databaseOpened": "已打开 {name}。",
+    "status.defaultOpened": "正在使用示例数据库。",
+    "status.selectionCanceled": "已取消数据库选择。",
+    "status.insertedRow": "已向 {table} 新增记录。",
+    "status.updatedRow": "已更新 {table} 中的记录。",
+    "status.deletedRow": "已删除 {table} 中的记录。",
+    "status.writeSucceededRefreshFailed": "{operation} 但表格刷新失败：{message}",
+    "empty.noTables": "数据库中没有可浏览的用户表。",
+    "empty.noRows": "当前数据表没有记录。",
+    "empty.noWritableColumns": "当前数据表没有可写数据列。",
+    "empty.noLocator": "当前记录没有稳定的主键或 rowid 定位信息。",
+    "value.null": "NULL",
+    "value.blob": "BLOB · {bytes} 字节 · {preview}",
+    "value.truncated": "{value}…（共 {length} 个字符）",
+    "placeholder.value": "请输入值",
+    "placeholder.hex": "十六进制字节，例如 89504e47",
     "error.initializationFailed": "初始化失败：{message}",
     "error.refreshFailed": "刷新失败：{message}",
-    "error.deleteFailed": "删除失败：{message}"
+    "error.operationFailed": "操作失败：{message}"
   }
 };
 
@@ -120,45 +239,77 @@ const client = createPluginFrameClient();
 const elements = {
   databasePath: requireElement<HTMLElement>("databasePath"),
   databaseName: requireElement<HTMLElement>("databaseName"),
-  tableName: requireElement<HTMLElement>("tableName"),
+  databaseSource: requireElement<HTMLElement>("databaseSource"),
+  tableSelect: requireElement<HTMLSelectElement>("tableSelect"),
+  columnCount: requireElement<HTMLElement>("columnCount"),
   recordCount: requireElement<HTMLElement>("recordCount"),
   loadingState: requireElement<HTMLElement>("loadingState"),
+  openDatabaseButton: requireElement<HTMLButtonElement>("openDatabaseButton"),
+  useDefaultDatabaseButton: requireElement<HTMLButtonElement>("useDefaultDatabaseButton"),
   refreshButton: requireElement<HTMLButtonElement>("refreshButton"),
-  entryFormTitle: requireElement<HTMLElement>("entryFormTitle"),
-  titleInput: requireElement<HTMLInputElement>("titleInput"),
-  noteInput: requireElement<HTMLTextAreaElement>("noteInput"),
-  insertButton: requireElement<HTMLButtonElement>("insertButton"),
-  cancelEditButton: requireElement<HTMLButtonElement>("cancelEditButton"),
+  addRowButton: requireElement<HTMLButtonElement>("addRowButton"),
+  editorPanel: requireElement<HTMLElement>("editorPanel"),
+  editorTitle: requireElement<HTMLElement>("editorTitle"),
+  editorFields: requireElement<HTMLElement>("editorFields"),
+  saveRowButton: requireElement<HTMLButtonElement>("saveRowButton"),
+  cancelEditorButton: requireElement<HTMLButtonElement>("cancelEditorButton"),
+  closeEditorButton: requireElement<HTMLButtonElement>("closeEditorButton"),
   formError: requireElement<HTMLElement>("formError"),
   emptyState: requireElement<HTMLElement>("emptyState"),
+  recordsHead: requireElement<HTMLTableRowElement>("recordsHead"),
   recordsBody: requireElement<HTMLTableSectionElement>("recordsBody"),
-  statusLog: requireElement<HTMLElement>("statusLog")
+  statusLog: requireElement<HTMLElement>("statusLog"),
+  pageSizeSelect: requireElement<HTMLSelectElement>("pageSizeSelect"),
+  pageLabel: requireElement<HTMLElement>("pageLabel"),
+  previousPageButton: requireElement<HTMLButtonElement>("previousPageButton"),
+  nextPageButton: requireElement<HTMLButtonElement>("nextPageButton")
 };
 const systemDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
 
 let language: SupportedLanguage = "en-US";
 let themeMode: ThemeMode = "system";
-let records: SqliteRecord[] = [];
-let editingRecord: SqliteRecord | undefined;
-let pendingDeleteId: number | undefined;
-let databasePath = "";
+let databaseInfo: DatabaseInfo | undefined;
+let tables: TableSummary[] = [];
+let tableData: TableData | undefined;
+let selectedTable = "";
+let offset = 0;
+let pageSize = 50;
+let editorMode: EditorMode | undefined;
+let editingRow: TableRow | undefined;
+let pendingDeleteLocator = "";
 let busy = false;
 let busyLabelKey: MessageKey = "status.waiting";
 let statusState: LocalizedState = { kind: "message", key: "status.idle" };
 let formErrorState: LocalizedState | undefined;
 
-elements.refreshButton.addEventListener("click", () => void refreshAll());
-elements.insertButton.addEventListener("click", () => void saveRecord());
-elements.cancelEditButton.addEventListener("click", resetEntryForm);
-elements.titleInput.addEventListener("keydown", (event) => {
-  if (event.key === "Enter") {
-    event.preventDefault();
-    void saveRecord();
-  }
+elements.openDatabaseButton.addEventListener("click", () => void openDatabase());
+elements.useDefaultDatabaseButton.addEventListener("click", () => void useDefaultDatabase());
+elements.refreshButton.addEventListener("click", () => void refreshDatabase(true));
+elements.addRowButton.addEventListener("click", () => openEditor("insert"));
+elements.saveRowButton.addEventListener("click", () => void saveRow());
+elements.cancelEditorButton.addEventListener("click", closeEditor);
+elements.closeEditorButton.addEventListener("click", closeEditor);
+elements.tableSelect.addEventListener("change", () => {
+  selectedTable = elements.tableSelect.value;
+  offset = 0;
+  closeEditor();
+  void loadSelectedTable();
 });
-const stopContextUpdates = client.onContextChanged((context) => {
-  applyContext(context);
+elements.pageSizeSelect.addEventListener("change", () => {
+  pageSize = Number(elements.pageSizeSelect.value);
+  offset = 0;
+  void loadSelectedTable();
+});
+elements.previousPageButton.addEventListener("click", () => {
+  offset = Math.max(0, offset - pageSize);
+  void loadSelectedTable();
 });
+elements.nextPageButton.addEventListener("click", () => {
+  offset += pageSize;
+  void loadSelectedTable();
+});
+
+const stopContextUpdates = client.onContextChanged(applyContext);
 systemDarkMode.addEventListener("change", handleSystemThemeChange);
 window.addEventListener("beforeunload", () => {
   stopContextUpdates();
@@ -168,7 +319,7 @@ window.addEventListener("beforeunload", () => {
 
 void client.waitForContext().then((context) => {
   applyContext(context);
-  return refreshAll();
+  return refreshDatabase(false);
 }).catch((error: unknown) => {
   applyLanguage(language);
   applyTheme(themeMode);
@@ -176,121 +327,472 @@ void client.waitForContext().then((context) => {
   writeStatusMessage("error.initializationFailed", { message: errorMessage(error) });
 });
 
-async function refreshAll(): Promise<void> {
+async function refreshDatabase(preserveSelection: boolean): Promise<void> {
   setBusy(true, "status.loading");
   try {
-    const [info, list] = await Promise.all([
-      invoke<DatabaseInfo>("sqlite.getInfo"),
-      invoke<{ records: SqliteRecord[] }>("sqlite.listRecords")
+    const [info, tableList] = await Promise.all([
+      invoke<DatabaseInfo>("sqlite.getDatabaseInfo"),
+      invoke<{ tables: TableSummary[] }>("sqlite.listTables")
     ]);
-    elements.databaseName.textContent = info.databaseName;
-    databasePath = info.databasePath;
-    renderDatabasePath();
-    elements.tableName.textContent = info.tableName;
-    elements.recordCount.textContent = String(info.recordCount);
-    records = list.records;
-    renderRecords();
-    writeStatusMessage(info.databaseReady ? "status.ready" : "status.unavailable");
+    databaseInfo = info;
+    tables = tableList.tables;
+    renderDatabaseInfo();
+    const previous = preserveSelection ? selectedTable : "";
+    selectedTable = tables.some((table) => table.name === previous)
+      ? previous
+      : tables.some((table) => table.name === "plugin_records")
+        ? "plugin_records"
+        : tables[0]?.name || "";
+    offset = preserveSelection && selectedTable === previous ? offset : 0;
+    renderTableSelector();
+    await readSelectedTable();
+    if (info.notice) {
+      writeStatusLiteral(info.notice);
+    } else {
+      writeStatusMessage("status.ready");
+    }
   } catch (error: unknown) {
+    tableData = undefined;
+    renderTableData();
     writeStatusMessage("error.refreshFailed", { message: errorMessage(error) });
   } finally {
     setBusy(false, "status.idle");
   }
 }
 
-async function saveRecord(): Promise<void> {
-  clearFormError();
-  const title = elements.titleInput.value.trim();
-  const note = elements.noteInput.value.trim();
-  if (!title) {
-    showFormErrorMessage("validation.titleRequired");
-    return;
-  }
-  setBusy(true, editingRecord ? "status.updating" : "status.inserting");
+async function openDatabase(): Promise<void> {
+  setBusy(true, "status.opening");
   try {
-    if (editingRecord) {
-      await invoke<{ record: SqliteRecord }>("sqlite.updateRecord", { id: editingRecord.id, title, note });
-      writeStatusMessage("status.updatedRow", { id: editingRecord.id });
-    } else {
-      const inserted = await invoke<{ record: SqliteRecord }>("sqlite.insertRecord", { title, note });
-      writeStatusMessage("status.insertedRow", { id: inserted.record.id });
+    const result = await invoke<{ canceled: boolean; database: DatabaseInfo }>("sqlite.chooseDatabase");
+    if (result.canceled) {
+      writeStatusMessage("status.selectionCanceled");
+      return;
     }
-    resetEntryForm();
-    await refreshAll();
+    closeEditor();
+    selectedTable = "";
+    offset = 0;
+    await refreshDatabase(false);
+    writeStatusMessage("status.databaseOpened", { name: result.database.databaseName });
+  } catch (error: unknown) {
+    writeStatusMessage("error.operationFailed", { message: errorMessage(error) });
+  } finally {
+    setBusy(false, "status.idle");
+  }
+}
+
+async function useDefaultDatabase(): Promise<void> {
+  setBusy(true, "status.switching");
+  try {
+    await invoke<{ database: DatabaseInfo }>("sqlite.useDefaultDatabase");
+    closeEditor();
+    selectedTable = "plugin_records";
+    offset = 0;
+    await refreshDatabase(true);
+    writeStatusMessage("status.defaultOpened");
   } catch (error: unknown) {
-    showFormErrorLiteral(errorMessage(error));
+    writeStatusMessage("error.operationFailed", { message: errorMessage(error) });
   } finally {
     setBusy(false, "status.idle");
   }
 }
 
-function startEdit(record: SqliteRecord): void {
-  editingRecord = record;
-  pendingDeleteId = undefined;
-  elements.titleInput.value = record.title;
-  elements.noteInput.value = record.note;
-  elements.cancelEditButton.hidden = false;
-  elements.titleInput.focus();
-  renderEntryForm();
-  renderRecords();
+async function loadSelectedTable(): Promise<void> {
+  setBusy(true, "status.loading");
+  try {
+    await readSelectedTable();
+    writeStatusMessage("status.ready");
+  } catch (error: unknown) {
+    tableData = undefined;
+    renderTableData();
+    writeStatusMessage("error.refreshFailed", { message: errorMessage(error) });
+  } finally {
+    setBusy(false, "status.idle");
+  }
 }
 
-function requestDelete(record: SqliteRecord): void {
-  pendingDeleteId = record.id;
-  renderRecords();
+async function readSelectedTable(): Promise<void> {
+  if (!selectedTable) {
+    tableData = undefined;
+    renderTableData();
+    return;
+  }
+  tableData = await invoke<TableData>("sqlite.readTable", {
+    table: selectedTable,
+    offset,
+    limit: pageSize
+  });
+  offset = tableData.offset;
+  renderTableData();
 }
 
-async function deleteRecord(record: SqliteRecord): Promise<void> {
+function openEditor(mode: EditorMode, row?: TableRow): void {
+  if (!tableData || !tableData.writable) {
+    writeStatusMessage("empty.noWritableColumns");
+    return;
+  }
+  if (mode === "update" && !row?.locator) {
+    writeStatusMessage("empty.noLocator");
+    return;
+  }
+  editorMode = mode;
+  editingRow = row;
+  pendingDeleteLocator = "";
+  clearFormError();
+  renderEditor();
+  elements.editorPanel.hidden = false;
+  elements.editorPanel.scrollIntoView({ block: "nearest" });
+  client.notifyResize();
+}
+
+function closeEditor(): void {
+  editorMode = undefined;
+  editingRow = undefined;
+  clearFormError();
+  elements.editorPanel.hidden = true;
+  elements.editorFields.replaceChildren();
+  client.notifyResize();
+}
+
+async function saveRow(): Promise<void> {
+  if (!tableData || !editorMode) {
+    return;
+  }
+  clearFormError();
+  const values = readEditorValues();
+  setBusy(true, editorMode === "insert" ? "status.inserting" : "status.updating");
+  try {
+    let successKey: MessageKey;
+    try {
+      if (editorMode === "insert") {
+        await invoke("sqlite.insertRow", { table: selectedTable, values });
+        successKey = "status.insertedRow";
+      } else {
+        if (!editingRow?.locator) {
+          throw new Error(text("empty.noLocator"));
+        }
+        await invoke("sqlite.updateRow", { table: selectedTable, locator: editingRow.locator, values });
+        successKey = "status.updatedRow";
+      }
+    } catch (error: unknown) {
+      showFormErrorLiteral(errorMessage(error));
+      return;
+    }
+    closeEditor();
+    await refreshAfterMutation(successKey, { table: selectedTable });
+  } finally {
+    setBusy(false, "status.idle");
+  }
+}
+
+async function deleteRow(row: TableRow): Promise<void> {
+  if (!row.locator) {
+    writeStatusMessage("empty.noLocator");
+    return;
+  }
   setBusy(true, "status.deleting");
   try {
-    await invoke<{ deletedId: number }>("sqlite.deleteRecord", { id: record.id });
-    if (editingRecord?.id === record.id) {
-      resetEntryForm();
+    try {
+      await invoke("sqlite.deleteRow", { table: selectedTable, locator: row.locator });
+    } catch (error: unknown) {
+      writeStatusMessage("error.operationFailed", { message: errorMessage(error) });
+      return;
     }
-    pendingDeleteId = undefined;
-    writeStatusMessage("status.deletedRow", { id: record.id });
-    await refreshAll();
-  } catch (error: unknown) {
-    writeStatusMessage("error.deleteFailed", { message: errorMessage(error) });
+    pendingDeleteLocator = "";
+    if (editingRow && locatorKey(editingRow.locator) === locatorKey(row.locator)) {
+      closeEditor();
+    }
+    await refreshAfterMutation("status.deletedRow", { table: selectedTable });
   } finally {
     setBusy(false, "status.idle");
   }
 }
 
-function renderRecords(): void {
-  const rows = records.map((record) => {
-    const row = document.createElement("tr");
-    appendCell(row, String(record.id));
-    appendCell(row, record.title);
-    appendCell(row, record.note);
-    appendCell(row, new Date(record.createdAt).toLocaleString(language));
-    const actions = document.createElement("td");
-    actions.className = "record-actions";
-    if (pendingDeleteId === record.id) {
-      actions.append(
-        actionButton(text("action.confirm"), "button-danger", () => void deleteRecord(record)),
-        actionButton(text("action.cancel"), "button-secondary", () => {
-          pendingDeleteId = undefined;
-          renderRecords();
-        })
-      );
-    } else {
-      actions.append(
-        actionButton(text("action.edit"), "button-secondary", () => startEdit(record)),
-        actionButton(text("action.delete"), "button-secondary", () => requestDelete(record))
-      );
+async function refreshAfterMutation(successKey: MessageKey, params: MessageParams): Promise<void> {
+  const operation = text(successKey, params);
+  try {
+    await readSelectedTable();
+    writeStatusMessage(successKey, params);
+  } catch (error: unknown) {
+    writeStatusMessage("status.writeSucceededRefreshFailed", {
+      operation,
+      message: errorMessage(error)
+    });
+  }
+}
+
+function renderDatabaseInfo(): void {
+  elements.databaseName.textContent = databaseInfo?.databaseName || "-";
+  elements.databaseSource.textContent = databaseInfo ? text(databaseInfo.source === "default" ? "source.default" : "source.external") : "-";
+  elements.databasePath.textContent = databaseInfo?.databasePath || text("status.connecting");
+  elements.databasePath.title = databaseInfo?.databasePath || "";
+}
+
+function renderTableSelector(): void {
+  const options = tables.map((table) => {
+    const option = document.createElement("option");
+    option.value = table.name;
+    option.textContent = table.name;
+    option.selected = table.name === selectedTable;
+    return option;
+  });
+  elements.tableSelect.replaceChildren(...options);
+  elements.tableSelect.disabled = busy || tables.length === 0;
+}
+
+function renderTableData(): void {
+  const data = tableData;
+  elements.columnCount.textContent = data ? String(data.columns.filter((column) => !column.hidden).length) : "0";
+  elements.recordCount.textContent = data?.totalRows || "0";
+  renderTableHeader();
+  renderRows();
+  renderPager();
+  elements.addRowButton.disabled = busy || !data?.writable;
+  if (!selectedTable) {
+    elements.emptyState.textContent = text("empty.noTables");
+    elements.emptyState.hidden = false;
+  } else {
+    elements.emptyState.textContent = text("empty.noRows");
+    elements.emptyState.hidden = Boolean(data && data.rows.length > 0);
+  }
+  client.notifyResize();
+}
+
+function renderTableHeader(): void {
+  if (!tableData) {
+    elements.recordsHead.replaceChildren();
+    return;
+  }
+  const headers = tableData.columns.filter((column) => !column.hidden).map((column) => {
+    const header = document.createElement("th");
+    const title = document.createElement("div");
+    title.className = "column-title";
+    const name = document.createElement("strong");
+    name.textContent = column.name;
+    title.append(name, badge(column.declaredType || text("column.untyped")));
+    if (column.primaryKeyOrder > 0) {
+      title.append(badge(text("column.primaryKey", { order: column.primaryKeyOrder })));
+    }
+    if (!column.nullable) {
+      title.append(badge(text("column.notNull")));
+    }
+    if (column.defaultSql !== null) {
+      title.append(badge(text("column.default", { value: column.defaultSql })));
     }
-    row.append(actions);
-    return row;
+    if (column.generated) {
+      title.append(badge(text("column.generated")));
+    }
+    header.append(title);
+    return header;
+  });
+  if (tableData.locatorKind) {
+    const actions = document.createElement("th");
+    actions.className = "actions-column";
+    actions.textContent = text("table.actions");
+    headers.push(actions);
+  }
+  elements.recordsHead.replaceChildren(...headers);
+}
+
+function renderRows(): void {
+  if (!tableData) {
+    elements.recordsBody.replaceChildren();
+    return;
+  }
+  const rows = tableData.rows.map((row) => {
+    const tableRow = document.createElement("tr");
+    for (const cell of row.cells) {
+      tableRow.append(renderCell(cell.value));
+    }
+    if (tableData?.locatorKind) {
+      tableRow.append(renderRowActions(row));
+    }
+    return tableRow;
   });
   elements.recordsBody.replaceChildren(...rows);
-  elements.emptyState.hidden = rows.length > 0;
 }
 
-function appendCell(row: HTMLTableRowElement, value: string): void {
+function renderCell(value: WireValue): HTMLTableCellElement {
   const cell = document.createElement("td");
-  cell.textContent = value;
-  row.append(cell);
+  const display = displayValue(value);
+  cell.textContent = display;
+  cell.title = display;
+  if (value.kind === "null") {
+    cell.className = "cell-null";
+  } else if (value.kind === "blob") {
+    cell.className = "cell-blob";
+  } else if (value.kind === "text" && value.truncated) {
+    cell.className = "cell-truncated";
+  }
+  return cell;
+}
+
+function renderRowActions(row: TableRow): HTMLTableCellElement {
+  const cell = document.createElement("td");
+  cell.className = "row-actions-cell";
+  const actions = document.createElement("div");
+  actions.className = "row-actions";
+  if (!row.locator) {
+    actions.textContent = text("empty.noLocator");
+    cell.append(actions);
+    return cell;
+  }
+  const key = locatorKey(row.locator);
+  if (pendingDeleteLocator === key) {
+    actions.append(
+      actionButton(text("action.confirm"), "button-danger compact-button", () => void deleteRow(row)),
+      actionButton(text("action.cancel"), "button-secondary compact-button", () => {
+        pendingDeleteLocator = "";
+        renderRows();
+      })
+    );
+  } else {
+    actions.append(
+      actionButton(text("action.edit"), "button-secondary compact-button", () => openEditor("update", row)),
+      actionButton(text("action.delete"), "button-secondary compact-button", () => {
+        pendingDeleteLocator = key;
+        renderRows();
+      })
+    );
+  }
+  cell.append(actions);
+  return cell;
+}
+
+function renderPager(): void {
+  const data = tableData;
+  const total = data?.totalRows || "0";
+  const start = data && data.rows.length > 0 ? data.offset + 1 : 0;
+  const end = data ? data.offset + data.rows.length : 0;
+  elements.pageLabel.textContent = text("pager.range", { start, end, total });
+  elements.previousPageButton.disabled = busy || !data?.hasPrevious;
+  elements.nextPageButton.disabled = busy || !data?.hasNext;
+  elements.pageSizeSelect.disabled = busy || !data;
+}
+
+function renderEditor(draft: Map<string, EditorDraftValue> = readEditorDraft()): void {
+  if (!editorMode || !tableData) {
+    return;
+  }
+  elements.editorTitle.textContent = text(editorMode === "insert" ? "editor.insert" : "editor.update");
+  elements.saveRowButton.textContent = text(editorMode === "insert" ? "action.insert" : "action.save");
+  const currentValues = new Map((editingRow?.cells || []).map((cell) => [cell.column, cell.value]));
+  const fields = tableData.columns.filter((column) => column.insertable).map((column) => {
+    const field = document.createElement("div");
+    field.className = "editor-field";
+    field.dataset.column = column.name;
+    const heading = document.createElement("div");
+    heading.className = "field-heading";
+    const name = document.createElement("strong");
+    name.textContent = column.name;
+    heading.append(name, badge(column.declaredType || text("column.untyped")));
+    if (column.requiredOnInsert && editorMode === "insert") {
+      heading.append(badge(text("column.required")));
+    }
+    const modeSelect = document.createElement("select");
+    modeSelect.className = "field-mode";
+    modeSelect.setAttribute("aria-label", column.name + " mode");
+    const availableModes = editorMode === "insert"
+      ? (["default", ...(column.nullable ? ["null"] : []), "value"] as string[])
+      : (["unchanged", ...(column.nullable ? ["null"] : []), "value"] as string[]);
+    const defaultMode = editorMode === "insert" && column.requiredOnInsert ? "value" : availableModes[0];
+    const savedDraft = draft.get(column.name);
+    const selectedMode = savedDraft && availableModes.includes(savedDraft.mode) ? savedDraft.mode : defaultMode;
+    for (const mode of availableModes) {
+      const option = document.createElement("option");
+      option.value = mode;
+      option.textContent = text(("mode." + mode) as MessageKey);
+      option.selected = mode === selectedMode;
+      modeSelect.append(option);
+    }
+    const input = column.affinity === "text" || column.affinity === "blob"
+      ? document.createElement("textarea")
+      : document.createElement("input");
+    input.className = "field-input";
+    input.setAttribute("aria-label", column.name + " value");
+    input.dataset.affinity = column.affinity;
+    input.placeholder = text(column.affinity === "blob" ? "placeholder.hex" : "placeholder.value");
+    const currentValue = currentValues.get(column.name);
+    input.value = savedDraft?.value ?? editableValue(currentValue);
+    input.disabled = selectedMode !== "value" || busy;
+    modeSelect.disabled = busy;
+    modeSelect.addEventListener("change", () => {
+      input.disabled = modeSelect.value !== "value" || busy;
+      if (!input.disabled) {
+        input.focus();
+      }
+    });
+    field.append(heading, modeSelect, input);
+    if (editorMode === "update" && currentValue) {
+      const current = document.createElement("div");
+      current.className = "field-current";
+      current.textContent = text("editor.current", { value: displayValue(currentValue) });
+      current.title = displayValue(currentValue);
+      field.append(current);
+    }
+    return field;
+  });
+  elements.editorFields.replaceChildren(...fields);
+  renderBusyState();
+}
+
+function readEditorValues(): Record<string, { mode: string; value?: string }> {
+  const values: Record<string, { mode: string; value?: string }> = Object.create(null) as Record<string, { mode: string; value?: string }>;
+  elements.editorFields.querySelectorAll<HTMLElement>(".editor-field").forEach((field) => {
+    const column = field.dataset.column;
+    const mode = field.querySelector<HTMLSelectElement>(".field-mode");
+    const input = field.querySelector<HTMLInputElement | HTMLTextAreaElement>(".field-input");
+    if (column && mode && input) {
+      values[column] = mode.value === "value" ? { mode: mode.value, value: input.value } : { mode: mode.value };
+    }
+  });
+  return values;
+}
+
+function readEditorDraft(): Map<string, EditorDraftValue> {
+  const result = new Map<string, EditorDraftValue>();
+  elements.editorFields.querySelectorAll<HTMLElement>(".editor-field").forEach((field) => {
+    const column = field.dataset.column;
+    const mode = field.querySelector<HTMLSelectElement>(".field-mode");
+    const input = field.querySelector<HTMLInputElement | HTMLTextAreaElement>(".field-input");
+    if (column && mode && input) {
+      result.set(column, { mode: mode.value, value: input.value });
+    }
+  });
+  return result;
+}
+
+function editableValue(value: WireValue | undefined): string {
+  if (!value || value.kind === "null") {
+    return "";
+  }
+  if (value.kind === "integer" || value.kind === "real") {
+    return String(value.value);
+  }
+  if (value.kind === "text") {
+    return value.truncated ? "" : value.value;
+  }
+  return value.truncated ? "" : value.hex;
+}
+
+function displayValue(value: WireValue): string {
+  if (value.kind === "null") {
+    return text("value.null");
+  }
+  if (value.kind === "integer" || value.kind === "real") {
+    return String(value.value);
+  }
+  if (value.kind === "blob") {
+    return text("value.blob", { bytes: value.byteLength, preview: value.hex + (value.truncated ? "…" : "") });
+  }
+  return value.truncated ? text("value.truncated", { value: value.value, length: value.length }) : value.value;
+}
+
+function badge(value: string): HTMLElement {
+  const element = document.createElement("span");
+  element.className = "column-badge";
+  element.textContent = value;
+  element.title = value;
+  return element;
 }
 
 function actionButton(label: string, className: string, action: () => void): HTMLButtonElement {
@@ -303,18 +805,8 @@ function actionButton(label: string, className: string, action: () => void): HTM
   return button;
 }
 
-function resetEntryForm(): void {
-  editingRecord = undefined;
-  elements.titleInput.value = "";
-  elements.noteInput.value = "";
-  elements.cancelEditButton.hidden = true;
-  clearFormError();
-  renderEntryForm();
-}
-
-function renderEntryForm(): void {
-  elements.entryFormTitle.textContent = text(editingRecord ? "form.editRow" : "form.insertRow");
-  elements.insertButton.textContent = text(editingRecord ? "action.save" : "action.insert");
+function locatorKey(locator: RowLocator | undefined): string {
+  return locator ? JSON.stringify(locator) : "";
 }
 
 function setBusy(nextBusy: boolean, labelKey: MessageKey): void {
@@ -325,18 +817,29 @@ function setBusy(nextBusy: boolean, labelKey: MessageKey): void {
 
 function renderBusyState(): void {
   elements.loadingState.textContent = text(busyLabelKey);
+  elements.openDatabaseButton.disabled = busy;
+  elements.useDefaultDatabaseButton.disabled = busy || databaseInfo?.source === "default";
   elements.refreshButton.disabled = busy;
-  elements.insertButton.disabled = busy;
+  elements.tableSelect.disabled = busy || tables.length === 0;
+  elements.addRowButton.disabled = busy || !tableData?.writable;
+  elements.saveRowButton.disabled = busy;
+  elements.cancelEditorButton.disabled = busy;
+  elements.closeEditorButton.disabled = busy;
+  elements.pageSizeSelect.disabled = busy || !tableData;
+  elements.previousPageButton.disabled = busy || !tableData?.hasPrevious;
+  elements.nextPageButton.disabled = busy || !tableData?.hasNext;
+  elements.editorFields.querySelectorAll<HTMLSelectElement>("select").forEach((select) => {
+    select.disabled = busy;
+  });
+  elements.editorFields.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>("input, textarea").forEach((input) => {
+    const mode = input.closest(".editor-field")?.querySelector<HTMLSelectElement>(".field-mode")?.value;
+    input.disabled = busy || mode !== "value";
+  });
   elements.recordsBody.querySelectorAll<HTMLButtonElement>("button").forEach((button) => {
     button.disabled = busy;
   });
 }
 
-function showFormErrorMessage(key: MessageKey, params?: MessageParams): void {
-  formErrorState = { kind: "message", key, params };
-  renderFormError();
-}
-
 function showFormErrorLiteral(value: string): void {
   formErrorState = { kind: "literal", value };
   renderFormError();
@@ -362,16 +865,17 @@ function writeStatusMessage(key: MessageKey, params?: MessageParams): void {
   renderStatus();
 }
 
-function renderStatus(): void {
-  elements.statusLog.textContent = renderState(statusState);
+function writeStatusLiteral(value: string): void {
+  statusState = { kind: "literal", value };
+  renderStatus();
 }
 
-function renderDatabasePath(): void {
-  elements.databasePath.textContent = databasePath || text("status.connecting");
-  elements.databasePath.title = databasePath;
+function renderStatus(): void {
+  elements.statusLog.textContent = renderState(statusState);
 }
 
 function applyLanguage(nextLanguage: SupportedLanguage): void {
+  const editorDraft = readEditorDraft();
   language = nextLanguage;
   document.documentElement.lang = language;
   document.querySelectorAll<HTMLElement>("[data-i18n]").forEach((element) => {
@@ -386,9 +890,12 @@ function applyLanguage(nextLanguage: SupportedLanguage): void {
       element.setAttribute("aria-label", text(key));
     }
   });
-  renderDatabasePath();
-  renderEntryForm();
-  renderRecords();
+  renderDatabaseInfo();
+  renderTableSelector();
+  renderTableData();
+  if (editorMode) {
+    renderEditor(editorDraft);
+  }
   renderBusyState();
   renderStatus();
   renderFormError();