sqlite-hub 1.2.0 → 1.5.0

package/frontend/js/views/charts.js

@@ -16,7 +16,7 @@ function renderMissingDatabase() {
     <section class="flex flex-1 items-center justify-center px-8 text-center">
       <div class="max-w-xl">
         <span class="material-symbols-outlined mb-4 text-5xl text-on-surface-variant/20">database_off</span>
-        <h1 class="font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+        <h1 class="font-body text-3xl font-black uppercase tracking-tight text-primary-container">
           No Active SQLite Database
         </h1>
         <p class="mt-3 text-sm leading-7 text-on-surface-variant/65">
@@ -154,7 +154,7 @@ function renderChartsList(state) {
           <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">${
               hasSearch ? 'manage_search' : isSavedTab ? 'bookmark' : isUnsavedTab ? 'bookmark_border' : 'query_stats'
           }</span>
-          <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+          <p class="font-body text-lg font-black uppercase tracking-tight text-on-surface">
             ${
                 hasSearch
                     ? 'No Matching Queries'
@@ -220,7 +220,7 @@ function renderEmptyChartDetail() {
     <div class="flex flex-1 items-center justify-center px-8 py-10 text-center">
       <div class="max-w-lg">
         <span class="material-symbols-outlined mb-4 text-5xl text-on-surface-variant/20">bar_chart</span>
-        <h2 class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+        <h2 class="font-body text-2xl font-black uppercase tracking-tight text-primary-container">
           Select A Query
         </h2>
         <p class="mt-3 text-sm leading-7 text-on-surface-variant/65">
@@ -339,7 +339,7 @@ export function renderChartsDetailDrawer(state) {
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Chart Detail
             </span>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
@@ -359,7 +359,7 @@ export function renderChartsDetailDrawer(state) {
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Chart Detail
             </span>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
@@ -415,7 +415,7 @@ export function renderChartsDetailDrawer(state) {
             <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
               Chart Detail
             </div>
-            <h2 class="mt-1 truncate font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+            <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(detail.item.displayTitle)}
             </h2>
           </div>
@@ -547,7 +547,7 @@ function renderChartCard(chart, state, analysis) {
         sizeClass,
         '"><header class="query-chart-card__header"><div class="min-w-0">',
         '<div class="flex flex-wrap items-center gap-2">',
-        '<h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">',
+        '<h3 class="truncate font-body text-xl font-black uppercase tracking-tight text-on-surface">',
         escapeHtml(chart.name),
         '</h3>',
         renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary'),
@@ -609,7 +609,7 @@ export function renderChartsDetail(state) {
       <div class="charts-detail-shell">
         <header class="charts-detail-shell__header" data-charts-detail-header>
           <div class="charts-detail-shell__title">
-            <h1 class="mt-2 truncate font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+            <h1 class="mt-2 truncate font-body text-4xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(detail.item.displayTitle)}
             </h1>
           </div>
@@ -659,7 +659,7 @@ export function renderChartsDetail(state) {
                   <div class="flex min-h-[240px] items-center justify-center border border-dashed border-outline-variant/20 bg-surface-container-low px-8 text-center">
                     <div>
                       <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">add_chart</span>
-                      <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+                      <p class="font-body text-lg font-black uppercase tracking-tight text-on-surface">
                         No Charts Yet
                       </p>
                       <p class="mt-2 max-w-md text-sm leading-6 text-on-surface-variant/60">

package/frontend/js/views/connections.js

@@ -43,7 +43,7 @@ function renderConnectionsBody(state) {
     if (state.connections.error) {
         return `
       <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
-        <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+        <div class="font-body text-xs font-bold uppercase tracking-[0.18em] text-error">
           ${escapeHtml(state.connections.error.code)}
         </div>
         <div class="mt-2">${escapeHtml(state.connections.error.message)}</div>
@@ -55,7 +55,7 @@ function renderConnectionsBody(state) {
         return `
       <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-10 text-center">
         <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
-        <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+        <p class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
           No Recorded SQLite Connections
         </p>
         <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">

package/frontend/js/views/data.js

@@ -137,6 +137,16 @@ function renderWorkspaceHeader(state) {
           }
         </div>
         <div class="flex flex-wrap items-center justify-end gap-3">
+          <button
+            class="standard-button"
+            data-action="open-generate-data-modal"
+            title="${table ? 'Generate synthetic test rows for this table' : 'Select a table before generating rows'}"
+            type="button"
+            ${table ? '' : 'disabled aria-disabled="true"'}
+          >
+            <span class="material-symbols-outlined text-sm">auto_awesome</span>
+            Generate
+          </button>
           ${
               table
                   ? renderWorkspaceOpenDropdown({
@@ -154,6 +164,12 @@ function renderWorkspaceHeader(state) {
                                 label: 'Table Designer',
                                 target: tableName => `/table-designer/${encodeURIComponent(tableName)}`,
                             },
+                            {
+                                icon: 'troubleshoot',
+                                key: 'table-advisor',
+                                label: 'Table Advisor',
+                                target: tableName => `/table-advisor/${encodeURIComponent(tableName)}`,
+                            },
                             {
                                 key: 'sql-editor',
                             },
@@ -193,7 +209,7 @@ function renderWorkspaceError(state) {
 
     return `
     <div class="border-b border-error/20 bg-error-container/10 px-6 py-4 text-sm text-on-surface">
-      <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+      <div class="font-body text-xs font-bold uppercase tracking-[0.18em] text-error">
         ${escapeHtml(state.dataBrowser.error.code)}
       </div>
       <div class="mt-2">${escapeHtml(state.dataBrowser.error.message)}</div>

package/frontend/js/views/documents.js

@@ -8,7 +8,7 @@ function renderMissingDatabase() {
         <div class="view-frame flex min-h-full items-center justify-center">
           <div class="text-center">
             <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
-            <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+            <p class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
               No Active SQLite Database
             </p>
             <p class="mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
@@ -294,7 +294,7 @@ function renderEmptyDocumentsState(documents) {
     return `
       <div class="documents-empty-state">
         <span class="material-symbols-outlined">description</span>
-        <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+        <p class="font-body text-2xl font-black uppercase tracking-tight text-primary-container">
           No Documents
         </p>
         ${renderNewDocumentDropdown(documents, 'mt-4')}
@@ -309,7 +309,7 @@ function renderDocumentDetail(documents) {
             ${renderDocumentsTitlebar(documents, { showFilename: false })}
             <div class="documents-empty-state">
               <span class="material-symbols-outlined">sync</span>
-              <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+              <p class="font-body text-2xl font-black uppercase tracking-tight text-primary-container">
                 Loading Documents
               </p>
             </div>

package/frontend/js/views/editor.js

@@ -11,7 +11,7 @@ function renderMissingDatabase() {
     return `
     <div class="flex flex-1 flex-col items-center justify-center bg-surface-container-lowest px-8 text-center">
       <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
-      <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+      <p class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
         No Active SQLite Database
       </p>
       <p class="mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
@@ -60,35 +60,35 @@ function renderPerformancePane(state) {
     <div class="performance-metrics-grid grid flex-1 gap-4 bg-surface-container-lowest p-6">
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Exec_Time</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatExecutionTimeMs(metrics.timingMs ?? 0),
         )}</span>
         <span class="text-[10px] text-primary-container">Measured backend execution time</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Statements</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatNumber(metrics.statementCount),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Split and executed by SQLite</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Rows_Returned</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatNumber(metrics.rowCount),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Visible result set size</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Memory_Size</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatBytes(metrics.memoryBytes),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Serialized result payload</span>
       </div>
       <div class="metric-card metric-card--accent">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Rows_Affected</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatNumber(metrics.affectedRowCount),
         )}</span>
         <span class="text-[10px] text-primary-container">INSERT / UPDATE / DELETE impact</span>

package/frontend/js/views/logs.js

@@ -0,0 +1,339 @@
+import { renderStatusBadge } from '../components/badges.js';
+import { renderTextInput } from '../components/formControls.js';
+import { escapeHtml, formatCompactDateTime, formatDurationMs, formatNumber, truncateMiddle } from '../utils/format.js';
+
+const FILTERS = {
+    range: [
+        ['1h', '1H'],
+        ['24h', '24H'],
+        ['7d', '7D'],
+        ['30d', '30D'],
+        ['all', 'ALL'],
+    ],
+    kind: [
+        ['all', 'All'],
+        ['query', 'Query'],
+        ['access', 'Access'],
+    ],
+    actor: [
+        ['all', 'All'],
+        ['user', 'User'],
+        ['cli', 'CLI'],
+        ['api', 'API'],
+        ['mcp', 'MCP'],
+    ],
+    status: [
+        ['all', 'All'],
+        ['success', 'Success'],
+        ['error', 'Error'],
+    ],
+    queryType: [
+        ['all', 'All'],
+        ['select', 'Select'],
+        ['insert', 'Insert'],
+        ['update', 'Update'],
+        ['delete', 'Delete'],
+        ['pragma', 'Pragma'],
+        ['create', 'Create'],
+        ['alter', 'Alter'],
+        ['drop', 'Drop'],
+        ['other', 'Other'],
+    ],
+};
+
+function renderFilterGroup({ label, field, value, items, className = '' }) {
+    return `
+      <div class="${escapeHtml(['min-w-0', className].filter(Boolean).join(' '))}">
+        <div class="mb-2 font-mono text-[9px] font-bold uppercase tracking-[0.18em] text-on-surface-variant/55">
+          ${escapeHtml(label)}
+        </div>
+        <div class="custom-scrollbar max-w-full overflow-x-auto pb-1">
+          <div class="charts-height-toggle" role="group" aria-label="${escapeHtml(label)}">
+            ${items
+                .map(
+                    ([itemValue, itemLabel]) => `
+                      <button
+                        class="standard-button charts-height-toggle__button ${value === itemValue ? 'is-active' : ''}"
+                        aria-pressed="${value === itemValue ? 'true' : 'false'}"
+                        data-action="set-log-filter"
+                        data-field="${escapeHtml(field)}"
+                        data-value="${escapeHtml(itemValue)}"
+                        type="button"
+                      >
+                        ${escapeHtml(itemLabel)}
+                      </button>
+                    `,
+                )
+                .join('')}
+          </div>
+        </div>
+      </div>
+    `;
+}
+
+function renderLogMetaStrip(logs) {
+    const total = formatNumber(logs.total ?? 0);
+    const visible = formatNumber((logs.items ?? []).length);
+    const activeDatabase = logs.metadata?.activeDatabase?.label ?? null;
+    const scope = activeDatabase || 'Active Database';
+    const items = [
+        ['Visible', visible],
+        ['Matched', total],
+        ['Scope', scope],
+    ];
+
+    return `
+      <div class="flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-outline-variant/10 pt-4">
+        ${items
+            .map(
+                ([label, value]) => `
+                  <div class="min-w-0">
+                    <div class="font-mono text-[9px] font-bold uppercase tracking-[0.18em] text-on-surface-variant/50">
+                      ${escapeHtml(label)}
+                    </div>
+                    <div class="mt-1 max-w-[18rem] truncate font-mono text-[11px] font-bold uppercase tracking-[0.12em] text-on-surface" data-logs-meta="${escapeHtml(
+                        label.toLowerCase(),
+                    )}" title="${escapeHtml(value)}">
+                      ${escapeHtml(value)}
+                    </div>
+                  </div>
+                `,
+            )
+            .join('')}
+      </div>
+    `;
+}
+
+function renderLogFilters(logs) {
+    const filters = logs.filters ?? {};
+
+    return `
+      <section class="shell-section p-5">
+        <div class="flex flex-col gap-5">
+          <form class="grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_auto]" data-form="logs-search">
+            ${renderTextInput({
+                dataAttributes: { bind: 'logs-search' },
+                name: 'search',
+                placeholder: 'Search action, target, SQL, table, error...',
+                value: filters.searchInput ?? '',
+            })}
+            <button class="standard-button justify-center" type="submit">
+              <span class="material-symbols-outlined text-sm">search</span>
+              Apply
+            </button>
+          </form>
+          ${renderLogMetaStrip(logs)}
+          <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
+            ${renderFilterGroup({
+                label: 'Time Window',
+                field: 'range',
+                value: filters.range ?? 'all',
+                items: FILTERS.range,
+            })}
+            ${renderFilterGroup({
+                label: 'Log Type',
+                field: 'kind',
+                value: filters.kind ?? 'all',
+                items: FILTERS.kind,
+            })}
+            ${renderFilterGroup({
+                label: 'Executed By',
+                field: 'actor',
+                value: filters.actor ?? 'all',
+                items: FILTERS.actor,
+            })}
+            ${renderFilterGroup({
+                label: 'Status',
+                field: 'status',
+                value: filters.status ?? 'all',
+                items: FILTERS.status,
+            })}
+            ${renderFilterGroup({
+                label: 'Query Type',
+                field: 'queryType',
+                value: filters.queryType ?? 'all',
+                items: FILTERS.queryType,
+                className: 'xl:col-span-2',
+            })}
+          </div>
+        </div>
+      </section>
+    `;
+}
+
+function renderLogPreview(item) {
+    if (item.kind === 'query') {
+        return `
+          <div class="mt-2 max-w-2xl truncate font-mono text-[11px] text-on-surface-variant/60" title="${escapeHtml(
+              item.rawSql ?? '',
+          )}">
+            ${escapeHtml(item.preview || item.rawSql || 'SQL query')}
+          </div>
+        `;
+    }
+
+    const metadata = item.metadata ?? {};
+    const method = metadata.method ? `${metadata.method} ` : '';
+    const path = metadata.path ?? '';
+
+    return `
+      <div class="mt-2 max-w-4xl truncate font-mono text-[11px] text-on-surface-variant/60" title="${escapeHtml(path)}">
+        ${escapeHtml(`${method}${path || item.action || 'access'}`)}
+      </div>
+    `;
+}
+
+function getActorTextClass(actor) {
+    return ['api', 'cli', 'mcp'].includes(
+        String(actor ?? '')
+            .trim()
+            .toLowerCase(),
+    )
+        ? 'text-primary-container'
+        : 'text-on-surface-variant/70';
+}
+
+function renderLogRow(item) {
+    const actor = item.executedBy || item.source || 'n/a';
+    const source = item.kind || 'log';
+    const status = item.status || 'unknown';
+    const target = [item.targetType, item.targetName].filter(Boolean).join(' // ') || 'n/a';
+    const detailBadges = [
+        item.queryType && renderStatusBadge(item.queryType, 'muted'),
+        item.destructive === true && renderStatusBadge('destructive', 'alert'),
+        item.kind === 'query' && item.rowCount !== null && item.rowCount !== undefined
+            ? renderStatusBadge(`${formatNumber(item.rowCount)} rows`, 'muted')
+            : '',
+        item.kind === 'query' && item.affectedRows
+            ? renderStatusBadge(`${formatNumber(item.affectedRows)} affected`, 'muted')
+            : '',
+    ]
+        .filter(Boolean)
+        .join('');
+
+    return `
+      <tr class="border-b border-outline-variant/5 bg-surface-container-lowest/60 align-top">
+        <td class="px-4 py-4 font-mono text-[11px] text-on-surface-variant/75">
+          ${escapeHtml(formatCompactDateTime(item.occurredAt))}
+        </td>
+        <td class="px-4 py-4 font-mono text-[11px] font-bold uppercase tracking-[0.12em] text-on-surface-variant/70">
+          ${escapeHtml(source)}
+        </td>
+        <td class="px-4 py-4 font-mono text-[11px] font-bold uppercase tracking-[0.12em] ${getActorTextClass(actor)}">
+          ${escapeHtml(actor)}
+        </td>
+        <td class="px-4 py-4">
+          <div class="font-body text-sm font-black uppercase text-on-surface">
+            ${escapeHtml(truncateMiddle(item.action ?? 'log', 44))}
+          </div>
+          ${renderLogPreview(item)}
+          ${
+              detailBadges
+                  ? `<div class="query-history-badge-row query-history-badge-row--compact logs-detail-badge-row mt-3">${detailBadges}</div>`
+                  : ''
+          }
+          ${item.errorMessage ? `<div class="mt-2 text-xs text-error">${escapeHtml(item.errorMessage)}</div>` : ''}
+        </td>
+        <td class="px-4 py-4 font-mono text-[11px] text-on-surface-variant/70" title="${escapeHtml(target)}">
+          ${escapeHtml(truncateMiddle(target, 42))}
+        </td>
+        <td class="px-4 py-4 font-mono text-[11px] font-bold uppercase tracking-[0.12em] ${
+            status === 'error' ? 'text-error' : 'text-on-surface-variant/70'
+        }">
+          ${escapeHtml(status)}
+        </td>
+        <td class="px-4 py-4 font-mono text-[11px] text-on-surface-variant/70">
+          ${escapeHtml(formatDurationMs(item.durationMs))}
+        </td>
+      </tr>
+    `;
+}
+
+export function renderLogTable(logs) {
+    if (logs.loading && !(logs.items ?? []).length) {
+        return `
+          <section class="shell-section flex min-h-0 flex-1 items-center justify-center overflow-hidden" data-logs-table>
+            <div class="text-center text-on-surface-variant/45">
+              <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+              <div class="font-mono text-[10px] uppercase tracking-[0.2em]">Loading Logs</div>
+            </div>
+          </section>
+        `;
+    }
+
+    if (logs.error) {
+        return `
+          <section class="shell-section custom-scrollbar min-h-0 flex-1 overflow-auto border-error/20 bg-error-container/10 px-6 py-5" data-logs-table>
+            <div class="font-body text-xs font-bold uppercase tracking-[0.18em] text-error">
+              ${escapeHtml(logs.error.code)}
+            </div>
+            <div class="mt-2 text-sm text-on-surface">${escapeHtml(logs.error.message)}</div>
+          </section>
+        `;
+    }
+
+    if (!(logs.items ?? []).length) {
+        return `
+          <section class="shell-section flex min-h-0 flex-1 items-center justify-center overflow-hidden" data-logs-table>
+            <div class="text-center text-on-surface-variant/45">
+              <span class="material-symbols-outlined mb-3 text-5xl">receipt_long</span>
+              <div class="font-body text-xl font-black uppercase text-on-surface">No Logs Found</div>
+              <div class="mt-2 font-mono text-[10px] uppercase tracking-[0.18em]">Adjust filters or time window</div>
+            </div>
+          </section>
+        `;
+    }
+
+    return `
+      <section class="shell-section flex min-h-0 flex-1 flex-col overflow-hidden" data-logs-table>
+        <div class="custom-scrollbar min-h-0 flex-1 overflow-auto" data-logs-table-scroll>
+          <table class="w-full min-w-[1080px] text-left">
+            <thead class="sticky top-0 z-10 bg-surface-container-highest">
+              <tr class="border-b border-outline-variant/10 font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/60">
+                <th class="px-4 py-3 font-normal">Time</th>
+                <th class="px-4 py-3 font-normal">Source</th>
+                <th class="px-4 py-3 font-normal">Executed By</th>
+                <th class="px-4 py-3 font-normal">Action</th>
+                <th class="px-4 py-3 font-normal">Target</th>
+                <th class="px-4 py-3 font-normal">Status</th>
+                <th class="px-4 py-3 font-normal">Duration</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${(logs.items ?? []).map(renderLogRow).join('')}
+            </tbody>
+          </table>
+        </div>
+        ${
+            logs.hasMore
+                ? `
+                  <div class="border-t border-outline-variant/10 px-4 py-3">
+                    <button class="standard-button" data-action="load-more-logs" type="button" ${
+                        logs.loadingMore ? 'disabled' : ''
+                    }>
+                      ${logs.loadingMore ? 'Loading...' : 'Load More'}
+                    </button>
+                  </div>
+                `
+                : ''
+        }
+      </section>
+    `;
+}
+
+export function renderLogsView(state) {
+    const logs = state.logs ?? {};
+    const activeDatabaseId = state.connections?.active?.id ?? logs.metadata?.activeDatabase?.id ?? '';
+
+    return {
+        main: `
+          <main class="view-surface flex h-full min-h-0 flex-col" data-logs-view data-logs-active-database-id="${escapeHtml(activeDatabaseId)}">
+            <div class="view-frame flex h-full min-h-0 flex-col gap-6">
+              ${renderLogFilters(logs)}
+              ${renderLogTable(logs)}
+            </div>
+          </main>
+        `,
+        panel: '',
+    };
+}

package/frontend/js/views/mediaTagging.js

@@ -301,9 +301,11 @@ function renderCreatedTagList(tags = [], { canRemove = false, removingTagKey = n
                   escapeHtml(tag.key),
                   '" type="button" title="Remove tag" ',
                   canRemove && removingTagKey !== tag.key ? '' : 'disabled',
-                  '><span class="material-symbols-outlined text-[18px]">',
-                  removingTagKey === tag.key ? 'hourglass_top' : 'delete',
-                  '</span></button></article>',
+                  '><span class="material-symbols-outlined text-sm">',
+                  'delete',
+                  '</span>',
+                  removingTagKey === tag.key ? 'Removing...' : 'Delete',
+                  '</button></article>',
               ].join('');
           })
           .join('')}
@@ -319,7 +321,7 @@ function renderPreviewMedia(
         return `
       <div class="media-tagging-preview__empty">
         <span class="material-symbols-outlined text-4xl">photo_size_select_large</span>
-        <div class="mt-3 font-headline text-lg uppercase tracking-[0.06em] text-primary-container">
+        <div class="mt-3 font-body text-lg uppercase tracking-[0.06em] text-primary-container">
           Queue Empty
         </div>
         <div class="mt-2 text-sm text-on-surface-variant/55">
@@ -715,7 +717,7 @@ function renderMappingSection(state) {
       </div>
       <div class="media-tagging-card__body media-tagging-card__body--mapping">
         <article class="media-tagging-mapping-card ${mappingCandidate ? 'is-selected' : ''}">
-          <div class="font-headline text-sm uppercase tracking-[0.08em] text-primary-container">
+          <div class="font-body text-sm uppercase tracking-[0.08em] text-primary-container">
             ${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)}
           </div>
           ${

package/frontend/js/views/overview.js

@@ -7,7 +7,7 @@ function renderMissingDatabase() {
   return `
     <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-12 text-center">
       <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
-      <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+      <p class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
         No Active SQLite Database
       </p>
       <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
@@ -210,7 +210,7 @@ function renderSchemaMapPreview(overview) {
       <div class="space-y-5 p-4">
         <div class="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
           <div>
-            <div class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+            <div class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(narrative.title)}
             </div>
             <p class="mt-2 max-w-3xl text-sm leading-6 text-on-surface-variant/70">
@@ -237,7 +237,7 @@ function renderSchemaMapPreview(overview) {
                   <div class="text-[9px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
                     ${escapeHtml(stat.label)}
                   </div>
-                  <div class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-on-surface">
+                  <div class="mt-2 font-body text-2xl font-black uppercase tracking-tight text-on-surface">
                     ${escapeHtml(stat.value)}
                   </div>
                 </div>