@aiot-nexus/plugin-sdk 1.0.0

package/templates/sqlite/src/main.ts.tmpl

@@ -0,0 +1,190 @@
+import Database = require("better-sqlite3");
+import type {
+  NexusResult,
+  PluginMainActivationContext,
+  PluginRendererOperationHandler,
+  PluginRendererOperationRequest
+} from "@aiot-nexus/plugin-sdk";
+
+interface SqliteRecord {
+  id: number;
+  title: string;
+  note: string;
+  createdAt: string;
+}
+
+const databaseName = "plugin.db";
+const tableName = "plugin_records";
+let database: Database | undefined;
+let databasePath = "";
+let databaseCreated = false;
+
+export function activate(context: PluginMainActivationContext): void {
+  const fs = require("fs") as typeof import("fs");
+  const path = require("path") as typeof import("path");
+  fs.mkdirSync(context.host.pluginDataDirectory, { recursive: true });
+  databasePath = path.join(context.host.pluginDataDirectory, databaseName);
+  databaseCreated = !fs.existsSync(databasePath);
+  database = new Database(databasePath);
+  database.pragma("journal_mode = DELETE");
+  database.prepare(
+    "CREATE TABLE IF NOT EXISTS " + tableName + " ("+
+      "id INTEGER PRIMARY KEY AUTOINCREMENT, "+
+      "title TEXT NOT NULL, "+
+      "note TEXT NOT NULL DEFAULT '', "+
+      "created_at TEXT NOT NULL"+
+    ")"
+  ).run();
+
+  register(context, "sqlite.getInfo", getInfo);
+  register(context, "sqlite.listRecords", listRecords);
+  register(context, "sqlite.insertRecord", insertRecord);
+  register(context, "sqlite.updateRecord", updateRecord);
+  register(context, "sqlite.deleteRecord", deleteRecord);
+  context.host.log("info", "__PLUGIN_ID__ database " + (databaseCreated ? "created" : "loaded") + ": " + databasePath);
+}
+
+function register(context: PluginMainActivationContext, name: string, handler: PluginRendererOperationHandler): void {
+  const result = context.host.registerRendererMethod(name, handler);
+  if (!result.ok) {
+    throw new Error(result.error.message);
+  }
+}
+
+function getInfo(): Record<string, unknown> {
+  const activeDatabase = requireDatabase();
+  const countRow = requireObject(activeDatabase.prepare("SELECT COUNT(*) AS count FROM " + tableName).get(), "count row");
+  const latestRow = requireObject(activeDatabase.prepare("SELECT MAX(created_at) AS latest FROM " + tableName).get(), "latest row");
+  return {
+    databaseName,
+    databasePath,
+    databaseCreated,
+    tableName,
+    recordCount: typeof countRow.count === "number" ? countRow.count : 0,
+    databaseReady: true,
+    latestCreatedAt: typeof latestRow.latest === "string" ? latestRow.latest : null
+  };
+}
+
+function listRecords(): { records: SqliteRecord[] } {
+  const rows = requireDatabase().prepare(
+    "SELECT id, title, note, created_at AS createdAt FROM " + tableName + " ORDER BY id DESC LIMIT 100"
+  ).all();
+  return { records: rows.map(readRecordRow) };
+}
+
+function insertRecord(request: PluginRendererOperationRequest): NexusResult<never> | { record: SqliteRecord } {
+  const inputResult = readRecordInput(request.input, "Insert");
+  if (!inputResult.ok) {
+    return inputResult;
+  }
+  const createdAt = new Date().toISOString();
+  const activeDatabase = requireDatabase();
+  const insertResult = activeDatabase.prepare(
+    "INSERT INTO " + tableName + " (title, note, created_at) VALUES (?, ?, ?)"
+  ).run(inputResult.value.title, inputResult.value.note, createdAt);
+  const id = Number(insertResult.lastInsertRowid);
+  const record = readRecord(id);
+  if (!record) {
+    throw new Error("Inserted SQLite record could not be read.");
+  }
+  return { record };
+}
+
+function updateRecord(request: PluginRendererOperationRequest): NexusResult<never> | { record: SqliteRecord } {
+  const idResult = readRecordId(request.input, "Update");
+  if (!idResult.ok) {
+    return idResult;
+  }
+  const inputResult = readRecordInput(request.input, "Update");
+  if (!inputResult.ok) {
+    return inputResult;
+  }
+  const updateResult = requireDatabase().prepare(
+    "UPDATE " + tableName + " SET title = ?, note = ? WHERE id = ?"
+  ).run(inputResult.value.title, inputResult.value.note, idResult.value);
+  if (updateResult.changes === 0) {
+    return fail("NotFound", "Record was not found.");
+  }
+  const record = readRecord(idResult.value);
+  if (!record) {
+    throw new Error("Updated SQLite record could not be read.");
+  }
+  return { record };
+}
+
+function deleteRecord(request: PluginRendererOperationRequest): NexusResult<never> | { deletedId: number; record: SqliteRecord } {
+  const idResult = readRecordId(request.input, "Delete");
+  if (!idResult.ok) {
+    return idResult;
+  }
+  const record = readRecord(idResult.value);
+  if (!record) {
+    return fail("NotFound", "Record was not found.");
+  }
+  requireDatabase().prepare("DELETE FROM " + tableName + " WHERE id = ?").run(idResult.value);
+  return { deletedId: idResult.value, record };
+}
+
+function readRecord(id: number): SqliteRecord | undefined {
+  const row = requireDatabase().prepare(
+    "SELECT id, title, note, created_at AS createdAt FROM " + tableName + " WHERE id = ?"
+  ).get(id);
+  return row === undefined ? undefined : readRecordRow(row);
+}
+
+function readRecordRow(value: unknown): SqliteRecord {
+  const row = requireObject(value, "record row");
+  if (!Number.isSafeInteger(row.id) || typeof row.title !== "string" || typeof row.note !== "string" || typeof row.createdAt !== "string") {
+    throw new Error("SQLite record row is malformed.");
+  }
+  return { id: row.id as number, title: row.title, note: row.note, createdAt: row.createdAt };
+}
+
+function readRecordInput(input: Record<string, unknown> | undefined, action: string): NexusResult<{ title: string; note: string }> {
+  if (!input) {
+    return fail("InvalidRequest", action + " input must be an object.");
+  }
+  const title = typeof input.title === "string" ? input.title.trim() : "";
+  const note = typeof input.note === "string" ? input.note.trim() : "";
+  if (title.length < 1 || title.length > 80) {
+    return fail("InvalidRequest", "Title must be 1 to 80 characters.");
+  }
+  if (note.length > 500) {
+    return fail("InvalidRequest", "Note must be 500 characters or fewer.");
+  }
+  return { ok: true, value: { title, note } };
+}
+
+function readRecordId(input: Record<string, unknown> | undefined, action: string): NexusResult<number> {
+  if (!input) {
+    return fail("InvalidRequest", action + " input must be an object.");
+  }
+  const id = typeof input.id === "number"
+    ? input.id
+    : typeof input.id === "string"
+      ? Number(input.id.trim())
+      : Number.NaN;
+  if (!Number.isSafeInteger(id) || id < 1) {
+    return fail("InvalidRequest", action + " record id must be a positive integer.");
+  }
+  return { ok: true, value: id };
+}
+
+function requireDatabase(): Database {
+  if (!database) {
+    throw new Error("SQLite database is not initialized.");
+  }
+  return database;
+}
+
+function requireObject(value: unknown, label: string): Record<string, unknown> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new Error("SQLite " + label + " is malformed.");
+  }
+  return value as Record<string, unknown>;
+}
+
+function fail<T = never>(code: string, message: string): NexusResult<T> {
+  return { ok: false, error: { code, message } };
+}

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

@@ -0,0 +1,428 @@
+import { createPluginFrameClient } from "@aiot-nexus/plugin-sdk/browser";
+
+interface DatabaseInfo {
+  databaseName: string;
+  databasePath: string;
+  tableName: string;
+  recordCount: number;
+  databaseReady: boolean;
+}
+
+interface SqliteRecord {
+  id: number;
+  title: string;
+  note: string;
+  createdAt: string;
+}
+
+type SupportedLanguage = "en-US" | "zh-CN";
+type MessageParams = Record<string, string | number>;
+
+const englishMessages = {
+  "document.title": "Plugin SQLite",
+  "heading.records": "SQLite Records",
+  "summary.aria": "Database summary",
+  "summary.database": "Database",
+  "summary.table": "Table",
+  "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",
+  "action.refresh": "Refresh",
+  "action.insert": "Insert",
+  "action.save": "Save",
+  "action.cancel": "Cancel",
+  "action.confirm": "Confirm",
+  "action.edit": "Edit",
+  "action.delete": "Delete",
+  "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.",
+  "error.initializationFailed": "Initialization failed: {message}",
+  "error.refreshFailed": "Refresh failed: {message}",
+  "error.deleteFailed": "Delete failed: {message}"
+} as const;
+
+type MessageKey = keyof typeof englishMessages;
+
+const messages: Record<SupportedLanguage, Record<MessageKey, string>> = {
+  "en-US": englishMessages,
+  "zh-CN": {
+    "document.title": "插件 SQLite",
+    "heading.records": "SQLite 记录",
+    "summary.aria": "数据库摘要",
+    "summary.database": "数据库",
+    "summary.table": "数据表",
+    "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": "操作",
+    "action.refresh": "刷新",
+    "action.insert": "新增",
+    "action.save": "保存",
+    "action.cancel": "取消",
+    "action.confirm": "确认",
+    "action.edit": "编辑",
+    "action.delete": "删除",
+    "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": "标题不能为空。",
+    "error.initializationFailed": "初始化失败：{message}",
+    "error.refreshFailed": "刷新失败：{message}",
+    "error.deleteFailed": "删除失败：{message}"
+  }
+};
+
+type LocalizedState =
+  | { kind: "message"; key: MessageKey; params?: MessageParams }
+  | { kind: "literal"; value: string };
+
+const client = createPluginFrameClient();
+const elements = {
+  databasePath: requireElement<HTMLElement>("databasePath"),
+  databaseName: requireElement<HTMLElement>("databaseName"),
+  tableName: requireElement<HTMLElement>("tableName"),
+  recordCount: requireElement<HTMLElement>("recordCount"),
+  loadingState: requireElement<HTMLElement>("loadingState"),
+  refreshButton: requireElement<HTMLButtonElement>("refreshButton"),
+  entryFormTitle: requireElement<HTMLElement>("entryFormTitle"),
+  titleInput: requireElement<HTMLInputElement>("titleInput"),
+  noteInput: requireElement<HTMLTextAreaElement>("noteInput"),
+  insertButton: requireElement<HTMLButtonElement>("insertButton"),
+  cancelEditButton: requireElement<HTMLButtonElement>("cancelEditButton"),
+  formError: requireElement<HTMLElement>("formError"),
+  emptyState: requireElement<HTMLElement>("emptyState"),
+  recordsBody: requireElement<HTMLTableSectionElement>("recordsBody"),
+  statusLog: requireElement<HTMLElement>("statusLog")
+};
+
+let language: SupportedLanguage = "en-US";
+let records: SqliteRecord[] = [];
+let editingRecord: SqliteRecord | undefined;
+let pendingDeleteId: number | undefined;
+let databasePath = "";
+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();
+  }
+});
+const stopContextUpdates = client.onContextChanged((context) => {
+  applyLanguage(resolveLanguage(context.language));
+});
+window.addEventListener("beforeunload", () => {
+  stopContextUpdates();
+  client.dispose();
+});
+
+applyLanguage(language);
+
+void client.waitForContext().then((context) => {
+  applyLanguage(resolveLanguage(context.language));
+  return refreshAll();
+}).catch((error: unknown) => {
+  writeStatusMessage("error.initializationFailed", { message: errorMessage(error) });
+});
+
+async function refreshAll(): Promise<void> {
+  setBusy(true, "status.loading");
+  try {
+    const [info, list] = await Promise.all([
+      invoke<DatabaseInfo>("sqlite.getInfo"),
+      invoke<{ records: SqliteRecord[] }>("sqlite.listRecords")
+    ]);
+    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");
+  } catch (error: unknown) {
+    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");
+  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 });
+    }
+    resetEntryForm();
+    await refreshAll();
+  } catch (error: unknown) {
+    showFormErrorLiteral(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();
+}
+
+function requestDelete(record: SqliteRecord): void {
+  pendingDeleteId = record.id;
+  renderRecords();
+}
+
+async function deleteRecord(record: SqliteRecord): Promise<void> {
+  setBusy(true, "status.deleting");
+  try {
+    await invoke<{ deletedId: number }>("sqlite.deleteRecord", { id: record.id });
+    if (editingRecord?.id === record.id) {
+      resetEntryForm();
+    }
+    pendingDeleteId = undefined;
+    writeStatusMessage("status.deletedRow", { id: record.id });
+    await refreshAll();
+  } catch (error: unknown) {
+    writeStatusMessage("error.deleteFailed", { message: errorMessage(error) });
+  } 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))
+      );
+    }
+    row.append(actions);
+    return row;
+  });
+  elements.recordsBody.replaceChildren(...rows);
+  elements.emptyState.hidden = rows.length > 0;
+}
+
+function appendCell(row: HTMLTableRowElement, value: string): void {
+  const cell = document.createElement("td");
+  cell.textContent = value;
+  row.append(cell);
+}
+
+function actionButton(label: string, className: string, action: () => void): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = className;
+  button.textContent = label;
+  button.disabled = busy;
+  button.addEventListener("click", action);
+  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 setBusy(nextBusy: boolean, labelKey: MessageKey): void {
+  busy = nextBusy;
+  busyLabelKey = labelKey;
+  renderBusyState();
+}
+
+function renderBusyState(): void {
+  elements.loadingState.textContent = text(busyLabelKey);
+  elements.refreshButton.disabled = busy;
+  elements.insertButton.disabled = busy;
+  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();
+}
+
+function renderFormError(): void {
+  if (!formErrorState) {
+    elements.formError.textContent = "";
+    elements.formError.hidden = true;
+    return;
+  }
+  elements.formError.textContent = renderState(formErrorState);
+  elements.formError.hidden = false;
+}
+
+function clearFormError(): void {
+  formErrorState = undefined;
+  renderFormError();
+}
+
+function writeStatusMessage(key: MessageKey, params?: MessageParams): void {
+  statusState = { kind: "message", key, params };
+  renderStatus();
+}
+
+function renderStatus(): void {
+  elements.statusLog.textContent = renderState(statusState);
+}
+
+function renderDatabasePath(): void {
+  elements.databasePath.textContent = databasePath || text("status.connecting");
+  elements.databasePath.title = databasePath;
+}
+
+function applyLanguage(nextLanguage: SupportedLanguage): void {
+  language = nextLanguage;
+  document.documentElement.lang = language;
+  document.querySelectorAll<HTMLElement>("[data-i18n]").forEach((element) => {
+    const key = element.dataset.i18n;
+    if (key && isMessageKey(key)) {
+      element.textContent = text(key);
+    }
+  });
+  document.querySelectorAll<HTMLElement>("[data-i18n-aria-label]").forEach((element) => {
+    const key = element.dataset.i18nAriaLabel;
+    if (key && isMessageKey(key)) {
+      element.setAttribute("aria-label", text(key));
+    }
+  });
+  renderDatabasePath();
+  renderEntryForm();
+  renderRecords();
+  renderBusyState();
+  renderStatus();
+  renderFormError();
+  client.notifyResize();
+}
+
+function renderState(state: LocalizedState): string {
+  return state.kind === "message" ? text(state.key, state.params) : state.value;
+}
+
+function resolveLanguage(value: string): SupportedLanguage {
+  return value.toLowerCase().startsWith("zh") ? "zh-CN" : "en-US";
+}
+
+function text(key: MessageKey, params: MessageParams = {}): string {
+  return messages[language][key].replace(/\{([a-zA-Z0-9_]+)\}/g, (match, paramKey: string) => {
+    return Object.prototype.hasOwnProperty.call(params, paramKey) ? String(params[paramKey]) : match;
+  });
+}
+
+function isMessageKey(value: string): value is MessageKey {
+  return Object.prototype.hasOwnProperty.call(englishMessages, value);
+}
+
+async function invoke<TResult>(operation: string, input: Record<string, unknown> = {}): Promise<TResult> {
+  const result = await client.invokeMain<Record<string, unknown>, TResult>(operation, input);
+  if (!result.ok) {
+    throw new Error(result.error.code + ": " + result.error.message);
+  }
+  return result.value;
+}
+
+function requireElement<T extends HTMLElement>(id: string): T {
+  const element = document.getElementById(id);
+  if (!element) {
+    throw new Error("Required element is missing: " + id);
+  }
+  return element as T;
+}
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}

package/templates/sqlite/src/renderer/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title data-i18n="document.title">Plugin SQLite</title>
+    <link rel="stylesheet" href="assets/plugin.css">
+  </head>
+  <body>
+    <main class="plugin-shell">
+      <header class="plugin-header">
+        <div>
+          <h1 data-i18n="heading.records">SQLite Records</h1>
+          <p id="databasePath" data-i18n="status.connecting">Connecting</p>
+        </div>
+        <button id="refreshButton" class="button-secondary" type="button" data-i18n="action.refresh">Refresh</button>
+      </header>
+
+      <section class="summary" aria-label="Database summary" data-i18n-aria-label="summary.aria">
+        <div><span data-i18n="summary.database">Database</span><strong id="databaseName">plugin.db</strong></div>
+        <div><span data-i18n="summary.table">Table</span><strong id="tableName">plugin_records</strong></div>
+        <div><span data-i18n="summary.rows">Rows</span><strong id="recordCount">0</strong></div>
+        <div><span data-i18n="summary.status">Status</span><strong id="loadingState" data-i18n="status.waiting">Waiting</strong></div>
+      </section>
+
+      <section class="panel">
+        <h2 id="entryFormTitle" data-i18n="form.insertRow">Insert Row</h2>
+        <div class="entry-form">
+          <label><span data-i18n="field.title">Title</span><input id="titleInput" type="text" maxlength="80" autocomplete="off"></label>
+          <label><span data-i18n="field.note">Note</span><textarea id="noteInput" maxlength="500" rows="2"></textarea></label>
+          <div class="entry-actions">
+            <button id="insertButton" type="button" data-i18n="action.insert">Insert</button>
+            <button id="cancelEditButton" class="button-secondary" type="button" data-i18n="action.cancel" hidden>Cancel</button>
+          </div>
+        </div>
+        <p id="formError" class="error" hidden></p>
+      </section>
+
+      <section class="panel">
+        <div class="panel-heading">
+          <h2 data-i18n="section.recentRows">Recent Rows</h2>
+          <span id="statusLog" data-i18n="status.idle">Idle</span>
+        </div>
+        <div id="emptyState" class="empty-state" data-i18n="empty.noRows" hidden>No rows yet.</div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr><th data-i18n="table.id">ID</th><th data-i18n="table.title">Title</th><th data-i18n="table.note">Note</th><th data-i18n="table.created">Created</th><th class="actions-column" data-i18n="table.actions">Actions</th></tr>
+            </thead>
+            <tbody id="recordsBody"></tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+    <script type="module" src="assets/app.js"></script>
+  </body>
+</html>