sqlite-hub 2.0.1 → 2.1.0

package/frontend/js/views/backups.js

@@ -687,14 +687,11 @@ export function renderBackupDiffDrawer(state) {
         <div class="flex items-center justify-between gap-3">
           <div class="min-w-0">
             <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
-              Backup Compare
+              Backup Compare // ${escapeHtml(currentLabel)}
             </div>
             <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(title)}
             </h2>
-            <div class="mt-1 truncate text-xs text-on-surface-variant/60">
-              Current // ${escapeHtml(currentLabel)}
-            </div>
           </div>
           <button
             class="query-history-icon-button"
@@ -708,7 +705,7 @@ export function renderBackupDiffDrawer(state) {
         <div class="mt-4 flex flex-wrap gap-2">
           ${renderStatusBadge('read only', 'muted')}
           ${diffState.loading ? renderStatusBadge('loading', 'muted') : ''}
-          ${diffState.error ? renderStatusBadge('error', 'alert') : ''}
+          ${diffState.error ? renderStatusBadge('error', 'muted') : ''}
         </div>
       </div>
       ${renderBackupDiffDrawerBody(diffState)}

package/frontend/js/views/charts.js

@@ -339,9 +339,14 @@ 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-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
-              Chart Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                Charts // Query Detail
+              </div>
+              <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
+                Loading
+              </h2>
+            </div>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
               <span class="material-symbols-outlined text-[18px]">close</span>
             </button>
@@ -359,9 +364,14 @@ 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-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
-              Chart Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                Charts // Query Detail
+              </div>
+              <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
+                Error
+              </h2>
+            </div>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
               <span class="material-symbols-outlined text-[18px]">close</span>
             </button>
@@ -383,7 +393,7 @@ export function renderChartsDetailDrawer(state) {
     const charts = detail.charts ?? [];
     const result = state.charts.result;
     const chartTypeBadges = charts.length
-        ? charts.map(chart => renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary')).join('')
+        ? charts.map(chart => renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'muted')).join('')
         : renderStatusBadge('no charts', 'muted');
     const savedBadgeMarkup = `
       <span
@@ -391,12 +401,12 @@ export function renderChartsDetailDrawer(state) {
         data-history-id="${escapeHtml(detail.item.id)}"
         ${detail.item.isSaved ? '' : 'hidden'}
       >
-        ${renderStatusBadge('saved', 'primary')}
+        ${renderStatusBadge('saved', 'muted')}
       </span>
     `;
     const statusMarkup = [
         savedBadgeMarkup,
-        state.charts.resultError ? renderStatusBadge('result error', 'alert') : '',
+        state.charts.resultError ? renderStatusBadge('result error', 'muted') : '',
         state.charts.resultLoading ? renderStatusBadge('loading result', 'muted') : '',
         chartTypeBadges,
     ].join('');
@@ -413,7 +423,7 @@ export function renderChartsDetailDrawer(state) {
         <div class="flex items-center justify-between gap-3">
           <div class="min-w-0">
             <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
-              Chart Detail
+              Charts // Query Detail
             </div>
             <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(detail.item.displayTitle)}

package/frontend/js/views/connections.js

@@ -1,6 +1,10 @@
 import { renderConnectionCard } from '../components/connectionCard.js';
 import { renderPageHeader } from '../components/pageHeader.js';
 import { escapeHtml } from '../utils/format.js';
+import {
+    filterConnections,
+    getConnectionTagCounts,
+} from '../utils/connectionRegistry.js';
 
 function renderConnectionsActionButton({
     label,
@@ -28,7 +32,88 @@ function renderConnectionsActionButton({
   `;
 }
 
-function renderConnectionsBody(state) {
+function renderConnectionsToolbar(state, visibleCount) {
+    if (!state.connections.recent.length) {
+        return '';
+    }
+
+    const searchQuery = state.connections.searchQuery ?? '';
+    const selectedTagIds = new Set((state.connections.selectedTagIds ?? []).map(tagId => String(tagId)));
+    const selectedTags = (state.connections.tags ?? []).filter(tag => selectedTagIds.has(String(tag.id)));
+    const tagCounts = getConnectionTagCounts(state.connections.recent);
+    const filterLabel =
+        selectedTags.length === 0
+            ? 'TAGS: ALL'
+            : selectedTags.length === 1
+              ? `TAGS: ${selectedTags[0].name}`
+              : `TAGS: ${selectedTags.length}`;
+    const tagRows = (state.connections.tags ?? [])
+        .map(tag => {
+            const tagId = String(tag.id);
+            const isSelected = selectedTagIds.has(tagId);
+
+            return `
+              <label class="connection-tag-filter-row">
+                <input
+                  ${isSelected ? 'checked' : ''}
+                  data-bind="connection-tag-filter"
+                  data-tag-id="${escapeHtml(tagId)}"
+                  type="checkbox"
+                />
+                <span class="connection-tag-filter-row__name">${escapeHtml(tag.name)}</span>
+                <span class="connection-tag-filter-row__count">${escapeHtml(String(tagCounts.get(tagId) ?? tag.connectionCount ?? 0))}</span>
+              </label>
+            `;
+        })
+        .join('');
+
+    return `
+    <div class="connection-registry-toolbar" data-connection-registry-toolbar>
+      <label class="connection-registry-search">
+        <span class="sr-only">Search connections</span>
+        <span class="material-symbols-outlined connection-registry-search__icon" aria-hidden="true">search</span>
+        <input
+          autocomplete="off"
+          class="connection-registry-search__input"
+          data-bind="connections-search"
+          data-connections-search-input
+          placeholder="SEARCH_CONNECTIONS..."
+          spellcheck="false"
+          type="search"
+          value="${escapeHtml(searchQuery)}"
+        />
+        <span class="connection-registry-search__shortcut" aria-hidden="true">/</span>
+      </label>
+      <details class="dropdown-button dropdown-button--align-right connection-tag-filter" data-dropdown-button>
+        <summary class="standard-button dropdown-button__toggle connection-tag-filter__toggle" title="${escapeHtml(filterLabel)}">
+          <span class="connection-tag-filter__toggle-label">${escapeHtml(filterLabel)}</span>
+          <span class="material-symbols-outlined dropdown-button__chevron" aria-hidden="true">expand_more</span>
+        </summary>
+        <div class="dropdown-button__panel connection-tag-filter__panel">
+          <div class="connection-tag-filter__header">
+            <span>FILTER_BY_TAG</span>
+            <span>${escapeHtml(String(visibleCount))}</span>
+          </div>
+          ${
+              tagRows
+                  ? `<div class="connection-tag-filter__list custom-scrollbar">${tagRows}</div>`
+                  : '<div class="connection-tag-filter__empty">NO_TAGS_AVAILABLE</div>'
+          }
+          <button
+            class="standard-button connection-tag-filter__reset"
+            data-action="clear-connection-tag-filters"
+            type="button"
+            ${selectedTagIds.size ? '' : 'disabled'}
+          >
+            RESET_FILTER
+          </button>
+        </div>
+      </details>
+    </div>
+  `;
+}
+
+function renderConnectionsBody(state, visibleConnections) {
     if (state.connections.loading && !state.connections.recent.length) {
         return `
       <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
@@ -78,9 +163,19 @@ function renderConnectionsBody(state) {
     `;
     }
 
+    if (!visibleConnections.length) {
+        return `
+      <div class="connection-filter-empty">
+        <span class="material-symbols-outlined connection-filter-empty__icon">search_off</span>
+        <p class="connection-filter-empty__title">NO_CONNECTIONS_FOUND</p>
+        <p class="connection-filter-empty__hint">TRY_ANOTHER_SEARCH_OR_FILTER</p>
+      </div>
+    `;
+    }
+
     return `
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
-      ${state.connections.recent
+      ${visibleConnections
           .map(connection => renderConnectionCard(connection, state.connections.active?.id))
           .join('')}
     </div>
@@ -88,6 +183,10 @@ function renderConnectionsBody(state) {
 }
 
 export function renderConnectionsView(state) {
+    const visibleConnections = filterConnections(state.connections.recent, {
+        searchQuery: state.connections.searchQuery,
+        selectedTagIds: state.connections.selectedTagIds,
+    });
     const actions = `
     ${
         state.connections.active
@@ -122,7 +221,8 @@ export function renderConnectionsView(state) {
               subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, '0')}`,
               actions,
           })}
-          ${renderConnectionsBody(state)}
+          ${renderConnectionsToolbar(state, visibleConnections.length)}
+          ${renderConnectionsBody(state, visibleConnections)}
         </div>
       </section>
     `,

package/frontend/js/views/data.js

@@ -1,5 +1,6 @@
 import { renderDataGrid } from '../components/dataGrid.js';
 import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
+import { renderVirtualTableBadge } from '../components/badges.js';
 import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
 import { escapeHtml, formatCellValue, formatNumber, isBlobPreview, truncateMiddle } from '../utils/format.js';
 import { detectEmailValue } from '../utils/emailPreview.js';
@@ -94,8 +95,13 @@ function renderTableList(state) {
               data-to="/data/${encodeURIComponent(table.name)}"
               type="button"
             >
-              <div class="table-designer-sidebar__item-name ${table.name === activeName ? 'is-active' : ''}">
-                ${escapeHtml(table.name)}
+              <div class="flex min-w-0 items-center gap-2">
+                <div class="table-designer-sidebar__item-name min-w-0 flex-1 ${
+                    table.name === activeName ? 'is-active' : ''
+                }">
+                  ${escapeHtml(table.name)}
+                </div>
+                ${renderVirtualTableBadge(table)}
               </div>
               <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
                 ${escapeHtml(formatNumber(table.columnCount ?? 0))} column${
@@ -113,6 +119,12 @@ function renderTableList(state) {
 function renderWorkspaceHeader(state) {
     const table = state.dataBrowser.table;
     const tablesVisible = state.dataBrowser.tablesVisible !== false;
+    const generateDisabled = !table || table.isShadow;
+    const generateTitle = !table
+        ? 'Select a table before generating rows'
+        : table.isShadow
+          ? 'Shadow tables are read-only in Data'
+          : 'Generate synthetic test rows for this table';
 
     return `
     <header class="workspace-header">
@@ -140,9 +152,9 @@ function renderWorkspaceHeader(state) {
           <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'}"
+            title="${escapeHtml(generateTitle)}"
             type="button"
-            ${table ? '' : 'disabled aria-disabled="true"'}
+            ${generateDisabled ? 'disabled aria-disabled="true"' : ''}
           >
             <span class="material-symbols-outlined text-sm">auto_awesome</span>
             Generate
@@ -628,6 +640,8 @@ export function renderDataRowEditorPanel(state) {
             : [{ name: 'rowIdentity', value: JSON.stringify(row.__identity ?? null) }],
         disabledMessage: state.connections.active?.readOnly
             ? 'The active database is opened read-only, so row editing is disabled.'
+            : table.isShadow
+              ? 'Shadow tables are read-only in Data.'
             : table.notSafelyUpdatable
               ? 'This table has no stable identity column, so SQLite Hub cannot safely update rows.'
               : '',
@@ -663,7 +677,7 @@ export function renderDataRowEditorPanel(state) {
         deleting: state.dataBrowser.deleting,
         deleteAction: 'delete-data-row',
         deleteRowIndex: isIndexedRow ? rowIndex : null,
-        deleteEnabled: Boolean(row.__identity),
+        deleteEnabled: Boolean(row.__identity) && !table.isShadow,
         reloadAction: 'reload-data-route',
         jsonActionsEnabled: true,
     });

package/frontend/js/views/structure.js

@@ -1,4 +1,5 @@
 import { clearInspector, renderDdlSection, renderInspector } from '../components/structureGraph.js';
+import { renderVirtualTableBadge } from '../components/badges.js';
 import { renderDropdownButton } from '../components/dropdownButton.js';
 import { renderGenerateTypesDropdown } from '../components/generateTypesDropdown.js';
 import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
@@ -36,11 +37,14 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
                           '" ',
                           entryAttributes,
                           ' type="button">',
-                          '<div class="font-mono text-xs ',
+                          '<div class="flex min-w-0 items-center gap-2">',
+                          '<div class="min-w-0 flex-1 truncate font-mono text-xs ',
                           isActive ? 'text-primary-container' : 'text-on-surface',
                           '">',
                           escapeHtml(entry.name),
                           '</div>',
+                          renderVirtualTableBadge(entry),
+                          '</div>',
                           metaMarkup,
                           '</button>',
                       ].join('');
@@ -76,6 +80,10 @@ function getFilteredTables(tables, searchQuery) {
     return tables.filter(table => table.name.toLowerCase().includes(normalizedSearch));
 }
 
+function isShadowTable(table) {
+    return Boolean(table?.isShadow);
+}
+
 function renderStructureTableSearch(state) {
     return `
     <label class="table-designer-sidebar__search">
@@ -129,7 +137,10 @@ function renderObjectInspector(detail) {
             <span class="material-symbols-outlined text-[18px]">close</span>
           </button>
         </div>
-        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
+        <div class="flex min-w-0 flex-wrap items-center gap-2">
+          <div class="structure-graph__title min-w-0">${escapeHtml(detail.name)}</div>
+          ${renderVirtualTableBadge(detail)}
+        </div>
         ${
             detail.tableName
                 ? `
@@ -336,9 +347,10 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
 
 export function renderStructureView(state) {
     const structure = state.structure.data;
-    const filteredTables = structure
-        ? getFilteredTables(structure.grouped.tables ?? [], state.structure.tableSearchQuery)
-        : [];
+    const regularTables = (structure?.grouped.tables ?? []).filter(table => !isShadowTable(table));
+    const shadowTables = (structure?.grouped.tables ?? []).filter(isShadowTable);
+    const filteredTables = structure ? getFilteredTables(regularTables, state.structure.tableSearchQuery) : [];
+    const filteredShadowTables = structure ? getFilteredTables(shadowTables, state.structure.tableSearchQuery) : [];
     const detail = state.structure.detail?.name === state.structure.selectedName ? state.structure.detail : null;
     const tablesVisible = state.structure.tablesVisible !== false;
 
@@ -376,6 +388,17 @@ export function renderStructureView(state) {
                                   ? 'tables match the current search.'
                                   : null,
                           })}
+                          ${
+                              shadowTables.length
+                                  ? renderEntryGroup('Shadow Tables', filteredShadowTables, state.structure.selectedName, {
+                                        compact: true,
+                                        showMeta: false,
+                                        emptyMessage: state.structure.tableSearchQuery
+                                            ? 'shadow tables match the current search.'
+                                            : null,
+                                    })
+                                  : ''
+                          }
                           ${renderEntryGroup('Views', structure.grouped.views, state.structure.selectedName)}
                           ${renderEntryGroup('Indexes', structure.grouped.indexes, state.structure.selectedName, {
                               compact: true,

package/frontend/js/views/tableAdvisor.js

@@ -5,6 +5,7 @@ import {
     highlightSql,
     truncateMiddle,
 } from '../utils/format.js';
+import { renderVirtualTableBadge } from '../components/badges.js';
 import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
 
 const CATEGORY_LABELS = {
@@ -73,7 +74,8 @@ function renderRiskBadge(risk = 'low') {
 }
 
 function renderTableList(state) {
-    const { tables = [], selectedTableName } = state.tableAdvisor;
+    const { selectedTableName } = state.tableAdvisor;
+    const tables = (state.tableAdvisor.tables ?? []).filter(table => !table?.isShadow);
 
     if (state.tableAdvisor.loading && !tables.length) {
         return `
@@ -107,8 +109,11 @@ function renderTableList(state) {
                     href="#/table-advisor/${encodeURIComponent(table.name)}"
                     title="${escapeHtml(table.name)}"
                   >
-                    <div class="table-designer-sidebar__item-name ${isActive ? 'is-active' : ''}">
-                      ${escapeHtml(table.name)}
+                    <div class="flex min-w-0 items-center gap-2">
+                      <div class="table-designer-sidebar__item-name min-w-0 flex-1 ${isActive ? 'is-active' : ''}">
+                        ${escapeHtml(table.name)}
+                      </div>
+                      ${renderVirtualTableBadge(table)}
                     </div>
                     <div class="table-designer-sidebar__item-meta">
                       ${escapeHtml(formatNumber(table.columnCount ?? 0))} columns
@@ -128,9 +133,12 @@ function renderSummary(result = {}) {
       <div class="grid grid-cols-1 gap-3 md:grid-cols-4">
         <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
           <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Table</div>
-          <div class="mt-2 min-w-0 truncate text-lg font-black text-on-surface" title="${escapeHtml(
-              result.tableName ?? '',
-          )}">${escapeHtml(result.tableName ?? 'Unknown')}</div>
+          <div class="mt-2 flex min-w-0 items-center gap-2">
+            <div class="min-w-0 truncate text-lg font-black text-on-surface" title="${escapeHtml(
+                result.tableName ?? '',
+            )}">${escapeHtml(result.tableName ?? 'Unknown')}</div>
+            ${renderVirtualTableBadge(result)}
+          </div>
         </div>
         <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
           <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Score</div>

package/frontend/js/views/tableDesigner.js

@@ -1,6 +1,8 @@
 import { renderTableDesignerEditor } from "../components/tableDesignerEditor.js";
+import { renderTableDesignerConstraintsDrawer } from "../components/tableDesignerConstraintsDrawer.js";
 import { renderTableDesignerSidebar } from "../components/tableDesignerSidebar.js";
 import { renderTableDesignerSqlPreview } from "../components/tableDesignerSqlPreview.js";
+import { renderDropdownButton } from "../components/dropdownButton.js";
 import { renderWorkspaceOpenDropdown } from "../components/workspaceOpenDropdown.js";
 import { escapeHtml } from "../utils/format.js";
 
@@ -17,6 +19,44 @@ function renderRouteError(error) {
   `;
 }
 
+function renderImportDropdown() {
+  return renderDropdownButton({
+    align: "right",
+    icon: "upload_file",
+    label: "Import",
+    title: "Import data",
+    items: [
+      {
+        action: "import-table-designer-data",
+        dataAttributes: {
+          importFormat: "csv",
+          importAccept: ".csv,text/csv",
+        },
+        icon: "table_chart",
+        label: "CSV",
+      },
+      {
+        action: "import-table-designer-data",
+        dataAttributes: {
+          importFormat: "tsv",
+          importAccept: ".tsv,text/tab-separated-values",
+        },
+        icon: "table_rows",
+        label: "TSV",
+      },
+      {
+        action: "import-table-designer-data",
+        dataAttributes: {
+          importFormat: "json",
+          importAccept: ".json,application/json",
+        },
+        icon: "data_object",
+        label: "JSON",
+      },
+    ],
+  });
+}
+
 function renderWorkspaceToolbar(state) {
   const tablesVisible = state.tableDesigner.tablesVisible !== false;
   const tableName = state.tableDesigner.selectedTableName ?? state.tableDesigner.draft?.tableName ?? "";
@@ -62,17 +102,12 @@ function renderWorkspaceToolbar(state) {
             },
           ],
         })}
-        <button
-          class="standard-button"
-          data-action="import-table-designer-csv"
-          type="button"
-        >
-          Import CSV
-        </button>
+        ${renderImportDropdown()}
         <input
-          accept=".csv,text/csv"
+          accept=".csv,text/csv,.tsv,text/tab-separated-values,.json,application/json"
           class="table-designer-workspace__file-input"
           data-bind="table-designer-import-file"
+          data-import-format="csv"
           type="file"
         />
         <button
@@ -110,6 +145,6 @@ export function renderTableDesignerView(state) {
         </div>
       </section>
     `,
-    panel: "",
+    panel: renderTableDesignerConstraintsDrawer(state),
   };
 }