sqlite-hub 2.0.1 → 2.2.0

package/README.md

@@ -39,6 +39,7 @@ SQLite Hub keeps that workflow sharp:
 - inspect database health, storage metrics, and schema connectivity from one overview
 - filter, sort, page through, and export table data
 - inspect schema, structure, and relationships
+- recognize virtual and shadow tables with visual badges and Structure graph links
 - analyze individual tables with a deterministic local advisor
 - generate TypeScript, Rust, Kotlin, or Swift types from table schemas
 - edit records in place with typed value previews and an SQL diff preview before saving
@@ -59,7 +60,7 @@ SQLite Hub keeps that workflow sharp:
 
 [![SQLite Hub relationship graph](./frontend/assets/mockups/structure_1_1920.webp)](./frontend/assets/mockups/structure_1_1920.webp)
 
-Inspect tables, views, indexes, triggers, columns, declared types, primary keys, nullability, foreign keys, and DDL without losing pace. The searchable object list and relationship graph support fit, relayout, selection clearing, direct navigation to table data, and a hideable inspector/sidebar. Clicking a relationship edge opens a join preview with the mapped columns and a copyable SQL `JOIN` snippet.
+Inspect tables, views, indexes, triggers, columns, declared types, primary keys, nullability, foreign keys, and DDL without losing pace. The searchable object list and relationship graph support fit, relayout, selection clearing, direct navigation to table data, and a hideable inspector/sidebar. Virtual tables and SQLite shadow tables are visually marked; shadow tables are grouped separately and connected to their owning virtual table in the graph. Clicking a relationship edge opens a join preview with the mapped columns and a copyable SQL `JOIN` snippet.
 
 ### Generate Types
 
@@ -84,15 +85,17 @@ For each table, SQLite Hub calculates a score, lists findings by severity, shows
 
 [![SQLite Hub data browser](./frontend/assets/mockups/data_1_1920.webp)](./frontend/assets/mockups/data_1_1920.webp)
 
-Scan rows, sort columns, move through local data quickly, and export full tables as CSV, TSV, Markdown, JSON, or Parquet.
+Scan rows, sort columns, move through local data quickly, and export full tables as CSV, TSV, Markdown, JSON, or Parquet. Virtual and shadow tables are tagged in the table list, and shadow tables open read-only.
 
 Use `Generate` in the Data browser to create local synthetic test rows from the current table schema. The generator respects required columns, foreign keys, simple `CHECK` constraints, and shows a preview before insertion.
 
+[![SQLite Hub synthetic data generator](./frontend/assets/mockups/data_3_generate_data_modal_1920.webp)](./frontend/assets/mockups/data_3_generate_data_modal_1920.webp)
+
 The Data browser also supports duplicating exports as a new table, searchable and hideable table navigation, page sizes up to 250 rows, and advanced filters with column/operator/value controls. Text filters support case-insensitive `contains`, `not contains`, and exact `equals` matching.
 
 Wide tables keep their horizontal scroll position when sorting causes the grid to re-render. Cells use compact previews for long values, BLOBs, and detected file paths, while exports retain complete BLOB content.
 
-[![SQLite Hub data export modal](./frontend/assets/mockups/data_3_data_export_modal_1920.webp)](./frontend/assets/mockups/data_3_data_export_modal_1920.webp)
+[![SQLite Hub data export modal](./frontend/assets/mockups/data_4_data_export_modal_1920.webp)](./frontend/assets/mockups/data_4_data_export_modal_1920.webp)
 
 ### Row editing
 
@@ -151,6 +154,13 @@ The preview supports regular Markdown, ordered and unordered lists, tables, code
 - Insert Note opens saved queries that have notes and inserts the selected note directly into the document.
 - Markdown Todo column exports from query results can create a new document without embedding the original SQL query.
 
+Documents also support Magic Snippets from the Insert menu:
+
+- Insert Time Metadata adds `created at` and `last modified` lines for the document.
+- Insert Database Info adds current database size, estimated pages, table count, and journal mode.
+
+Magic Snippets are managed blocks. When a document is opened, SQLite Hub refreshes existing Time Metadata and Database Info snippets with the latest document/database values.
+
 <p>
   <a href="./frontend/assets/mockups/documents_2_document_insert_table_modal_1920.webp"><img src="./frontend/assets/mockups/documents_2_document_insert_table_modal_1920.webp" alt="SQLite Hub insert saved query table into a document" width="49%"></a>
   <a href="./frontend/assets/mockups/documents_3_document_insert_note_modal_1920.webp"><img src="./frontend/assets/mockups/documents_3_document_insert_note_modal_1920.webp" alt="SQLite Hub insert saved query note into a document" width="49%"></a>
@@ -180,7 +190,7 @@ Create bar, line, pie/donut, and scatter charts from chartable `SELECT` query-hi
 
 Create and edit SQLite tables from the UI. The Table Designer includes a searchable table list, validation and migration warnings, and controls for column names, SQLite types, `NOT NULL`, `UNIQUE`, primary keys, SQL defaults, foreign-key tables/columns, and check constraints. Existing composite unique constraints are surfaced as schema metadata.
 
-CSV files can seed a new table draft and optionally fill the created table with imported rows. Every change produces a copyable live SQL preview that can be hidden or shown before the schema operation is applied.
+CSV, TSV, and JSON files can seed a new table draft and optionally fill the created table with imported rows. Every change produces a copyable live SQL preview that can be hidden or shown before the schema operation is applied.
 
 [![SQLite Hub Table Designer constraints](./frontend/assets/mockups/table_designer_2_table_designer_constraints_modal_1920.webp)](./frontend/assets/mockups/table_designer_2_table_designer_constraints_modal_1920.webp)
 
@@ -209,7 +219,9 @@ The Settings view reports the installed SQLite Hub version and the actual SQLite
 
 [![SQLite Hub backups](./frontend/assets/mockups/backups_1_1920.webp)](./frontend/assets/mockups/backups_1_1920.webp)
 
-Create verified local backups of the active SQLite database, review backup metadata, edit backup notes, download backup files, restore verified backups, and delete managed backups from the Backups view. SQLite Hub stores backup files under its local app-state backup directory by connection id and keeps a `manifest.json` beside each database's backup files. Each backup is created through SQLite's backup API, hashed with SHA-256, and verified with `PRAGMA quick_check` before it is marked as verified.
+Create verified local backups of the active SQLite database, compare backup contents with the current database, review backup metadata, edit backup notes, download backup files, restore verified backups, and delete managed backups from the Backups view. SQLite Hub stores backup files under its local app-state backup directory by connection id and keeps a `manifest.json` beside each database's backup files. Each backup is created through SQLite's backup API, hashed with SHA-256, and verified with `PRAGMA quick_check` before it is marked as verified.
+
+[![SQLite Hub backup compare drawer](./frontend/assets/mockups/backups_2_compare_drawer_1920.webp)](./frontend/assets/mockups/backups_2_compare_drawer_1920.webp)
 
 SQLite Hub also proposes a safety backup before operations that can be hard to undo:
 
@@ -221,13 +233,13 @@ SQLite Hub also proposes a safety backup before operations that can be hard to u
 The safety dialog lets you create the backup and continue, continue without creating one, or cancel the operation.
 
 <p>
-  <a href="./frontend/assets/mockups/backups_2_create_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_2_create_backup_modal_1920.webp" alt="SQLite Hub create backup modal" width="49%"></a>
-  <a href="./frontend/assets/mockups/backups_3_edit_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_3_edit_backup_modal_1920.webp" alt="SQLite Hub edit backup modal" width="49%"></a>
+  <a href="./frontend/assets/mockups/backups_3_create_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_3_create_backup_modal_1920.webp" alt="SQLite Hub create backup modal" width="49%"></a>
+  <a href="./frontend/assets/mockups/backups_4_edit_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_4_edit_backup_modal_1920.webp" alt="SQLite Hub edit backup modal" width="49%"></a>
 </p>
 
 <p>
-  <a href="./frontend/assets/mockups/backups_4_restore_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_4_restore_backup_modal_1920.webp" alt="SQLite Hub restore backup modal" width="49%"></a>
-  <a href="./frontend/assets/mockups/backups_5_delete_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_5_delete_backup_modal_1920.webp" alt="SQLite Hub delete backup modal" width="49%"></a>
+  <a href="./frontend/assets/mockups/backups_5_restore_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_5_restore_backup_modal_1920.webp" alt="SQLite Hub restore backup modal" width="49%"></a>
+  <a href="./frontend/assets/mockups/backups_6_delete_backup_modal_1920.webp"><img src="./frontend/assets/mockups/backups_6_delete_backup_modal_1920.webp" alt="SQLite Hub delete backup modal" width="49%"></a>
 </p>
 
 ### Overview

package/docs/MCP.md

@@ -58,11 +58,13 @@ Read-only and safe tools:
 - `get_indexes`: return all indexes or indexes for one table.
 - `get_foreign_keys`: return all foreign keys or foreign keys for one table.
 - `run_readonly_query`: execute a read-only `SELECT`, `PRAGMA`, or `EXPLAIN` query.
+- `get_saved_queries`: list saved SQL Editor queries for a database, equivalent to `sqlite-hub --database:name --queries`.
 - `explain_query_plan`: run `EXPLAIN QUERY PLAN` and return structured plan rows plus index hints when a table scan appears.
 - `read_documents`: read database-scoped Markdown documents.
 
 Controlled write tools:
 
+- `execute_stored_query`: execute a saved SQL Editor query by id, title, display title, or SQL fragment, equivalent to `sqlite-hub --database:name --execute:"query"`.
 - `create_backup`: create a verified backup through SQLite Hub's existing backup mechanism.
 - `generate_types`: generate TypeScript, Rust, Kotlin, or Swift types from one table or all tables.
 - `create_chart_from_query`: create a saved chart from a read-only `SELECT` query. It writes chart metadata to SQLite Hub but does not export files.
@@ -86,6 +88,8 @@ These statements are blocked in `run_readonly_query`:
 
 Backups are always created through SQLite Hub's managed backup service. Chart creation stores chart metadata only. The MCP server does not write arbitrary local files.
 
+`execute_stored_query` intentionally follows the same behavior as the CLI and external API saved-query execution path. It executes the stored SQL as-is and records the run in Query History with `executedBy: "mcp"`.
+
 The HTTP MCP endpoint runs on SQLite Hub's existing loopback server. It is local-only and uses the same localhost request guard as the internal API. API tokens are not exposed through MCP tool responses.
 
 ## Settings Status
@@ -107,3 +111,7 @@ Use SQLite Hub MCP to create a backup before generating TypeScript types.
 ```text
 Use SQLite Hub MCP to explain the query plan for this SQL query.
 ```
+
+```text
+Use SQLite Hub MCP to list my saved queries and execute the one named "Company List".
+```

package/docs/changelog.md

@@ -1,3 +1,19 @@
+# v2.2.0
+
+- better documents features, magic snippets, better auto save, complette overhaul
+- directories for documents
+- better logging
+
+# v2.1.0
+
+- tags for databases
+- search for database
+- table designer accepts json, csv, tsv
+- drawer headers are unified
+- more mcp functions
+- badges for shadow and virtual tables
+- structure visual support for shadow tables
+
 # v2.0.0
 
 - mcp

package/docs/guidelines/DESIGN.md

@@ -39,6 +39,22 @@ Follow these rules exactly when creating or modifying UI controls.
 - Prefer migration over local override.
 - Prefer shared component updates over per-view fixes.
 
+## Multi-Pick Dropdowns
+
+- Use this pattern for compact filters where the user can select multiple values, such as `TAGS`.
+- Use `details.dropdown-button` with a `standard-button dropdown-button__toggle` summary.
+- The toggle must have a fixed or bounded responsive width; it must not grow with long selected values.
+- The toggle label must be wrapped in its own label span with `min-width: 0`, `overflow: hidden`, `text-overflow: ellipsis`, and `white-space: nowrap`.
+- The toggle must keep a mandatory left inset. Do not rely only on inherited button padding; set explicit left padding on the pattern class when needed.
+- The chevron must remain visible for all selected labels.
+- Put the full selected label in `title` when the visible label may truncate.
+- The dropdown panel must have visible inner padding. Header text, checkbox rows, and footer actions must never touch the panel edge.
+- Multi-pick rows must use a stable grid: checkbox, truncated label, optional count.
+- Row labels should follow the existing technical style: mono, uppercase, compact, and muted until hover or active state.
+- Counts belong on the right edge and must not compress the label into the checkbox.
+- The reset action belongs in a compact footer row, visually secondary to the selected values.
+- Do not use native `<select multiple>` for this app UI.
+
 ## UX behavior
 
 - All drawers must close with `Escape`.
@@ -49,6 +65,54 @@ Follow these rules exactly when creating or modifying UI controls.
 - Do not clear multiline textareas with `Escape` unless the textarea is explicitly built as a search field.
 - If an input is already empty, `Escape` may continue to the next applicable close/clear behavior.
 
+## Drawer Inventory
+
+- Backup Compare Drawer
+- Charts Query Detail Drawer
+- Table Designer Check Constraints Drawer
+- SQL Editor Query History Drawer
+- Data Row Editor Drawer
+
+## Drawer Header Pattern
+
+- Every drawer header must use one small mono eyebrow followed directly by one `h2`.
+- The eyebrow uses `font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70`.
+- The `h2` uses `mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface`.
+- Drawer context belongs in the eyebrow as `Feature // Context`.
+- Do not add a third subtitle line under the `h2`.
+- Drawer badges must use `status-badge status-badge--muted`.
+
+## Modal Inventory
+
+All app modals use the shared shell in `frontend/js/components/modal.js` through `renderModal(state)` and its `contentByKind` map. The single modal state lives at `state.modal`. The generic opener is `openModal(kind, options)` in `frontend/js/store.js`; generic `data-action="open-modal"` dispatch is handled in `frontend/js/app.js`.
+
+| Modal kind                           | Where it appears                                                                                                       | Open/state owner                                                                                                                                                                           | Body renderer                                |
+| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- |
+| `open-connection`                    | Landing and Connections entry actions in `frontend/js/components/emptyState.js` and `frontend/js/views/connections.js` | Generic `openModal()` with `data-modal="open-connection"`                                                                                                                                  | `renderOpenConnectionForm()`                 |
+| `create-connection`                  | Landing and Connections entry actions in `frontend/js/components/emptyState.js` and `frontend/js/views/connections.js` | Generic `openModal()` with `data-modal="create-connection"`                                                                                                                                | `renderCreateDatabaseForm()`                 |
+| `import-sql`                         | Existing import modal path; no current visible opener found                                                            | Generic `openModal('import-sql')` if a trigger is added; submitted by `submitImportSql()` in `frontend/js/store.js`                                                                        | `renderImportSqlForm()`                      |
+| `edit-connection`                    | Connection cards in `frontend/js/components/connectionCard.js`                                                         | `openEditConnectionModal()` in `frontend/js/store.js`; `edit-connection` action in `frontend/js/app.js`                                                                                    | `renderEditConnectionForm()`                 |
+| `create-backup`                      | Backups route actions in `frontend/js/views/backups.js`                                                                | `openCreateBackupModal()` in `frontend/js/store.js`; `open-create-backup-modal` action in `frontend/js/app.js`                                                                             | `renderCreateBackupForm()`                   |
+| `edit-backup`                        | Backup row actions in `frontend/js/views/backups.js`                                                                   | `openEditBackupModal()` in `frontend/js/store.js`; `open-edit-backup-modal` action in `frontend/js/app.js`                                                                                 | `renderEditBackupForm()`                     |
+| `delete-backup`                      | Backup row actions in `frontend/js/views/backups.js`                                                                   | `openDeleteBackupModal()` in `frontend/js/store.js`; `open-delete-backup-modal` action in `frontend/js/app.js`                                                                             | `renderDeleteBackupForm()`                   |
+| `backup-safety`                      | Restore, SQL execution, and import safety flows                                                                        | `openRestoreBackupModal()` plus safety branches in `frontend/js/store.js`; `backup-safety-create`, `backup-safety-continue`, and `backup-safety-cancel` actions in `frontend/js/app.js`    | `renderBackupSafetyForm()`                   |
+| `generate-types`                     | Structure/Table tooling via `frontend/js/components/generateTypesDropdown.js`                                          | `openGenerateTypesModal()` in `frontend/js/store.js`; `open-generate-types-modal` action in `frontend/js/app.js`                                                                           | `renderGenerateTypesForm()`                  |
+| `generate-data`                      | Data Browser actions in `frontend/js/views/data.js`                                                                    | `openGenerateDataModal()` in `frontend/js/store.js`; `open-generate-data-modal` action in `frontend/js/app.js`                                                                             | `renderGenerateDataForm()`                   |
+| `delete-row`                         | Data Browser rows and SQL Editor editable result rows                                                                  | `openDeleteDataRowModal()` and `openDeleteEditorRowModal()` in `frontend/js/store.js`; `delete-data-row` and `delete-editor-row` actions in `frontend/js/app.js`                           | `renderDeleteRowConfirmForm()`               |
+| `row-update-preview`                 | Data Browser and SQL Editor row edit preview flow                                                                      | Row update preview state branches in `frontend/js/store.js`; `apply-row-update-preview` action in `frontend/js/app.js`                                                                     | `renderRowUpdatePreviewForm()`               |
+| `chart-editor`                       | Charts detail actions in `frontend/js/views/charts.js`                                                                 | `openCreateQueryChartModal()` and `openEditQueryChartModal()` in `frontend/js/store.js`; `open-create-query-chart-modal` and `open-edit-query-chart-modal` actions in `frontend/js/app.js` | `renderChartEditorForm()`                    |
+| `delete-chart`                       | Charts detail chart actions in `frontend/js/views/charts.js`                                                           | `openDeleteQueryChartModal()` in `frontend/js/store.js`; `open-delete-query-chart-modal` action in `frontend/js/app.js`                                                                    | `renderDeleteChartForm()`                    |
+| `delete-query-history`               | Query history detail/actions in `frontend/js/components/queryHistoryDetail.js`                                         | `openDeleteQueryHistoryModal()` in `frontend/js/store.js`; `open-delete-query-history-modal` action in `frontend/js/app.js`                                                                | `renderDeleteQueryHistoryForm()`             |
+| `delete-document`                    | Documents route actions in `frontend/js/views/documents.js`                                                            | `openDeleteDocumentModal()` in `frontend/js/store.js`; `delete-document` action in `frontend/js/app.js`                                                                                    | `renderDeleteDocumentForm()`                 |
+| `delete-api-token`                   | Settings API token actions in `frontend/js/views/settings.js`                                                          | `openDeleteSettingsApiTokenModal()` in `frontend/js/store.js`; `open-delete-api-token-modal` action in `frontend/js/app.js`                                                                | `renderDeleteApiTokenForm()`                 |
+| `document-insert-table`              | Documents editor insert menu in `frontend/js/views/documents.js`                                                       | `openDocumentInsertTableModal()` in `frontend/js/store.js`; `open-document-insert-table-modal` action in `frontend/js/app.js`                                                              | `renderDocumentInsertTableForm()`            |
+| `document-insert-note`               | Documents editor insert menu in `frontend/js/views/documents.js`                                                       | `openDocumentInsertNoteModal()` in `frontend/js/store.js`; `open-document-insert-note-modal` action in `frontend/js/app.js`                                                                | `renderDocumentInsertNoteForm()`             |
+| `query-export`                       | SQL Editor toolbar in `frontend/js/components/queryEditor.js`                                                          | `openQueryExportModal()` in `frontend/js/store.js`; `open-query-export-modal` action in `frontend/js/app.js`                                                                               | `renderQueryExportModal()`                   |
+| `data-export`                        | Data Browser actions in `frontend/js/views/data.js`                                                                    | `openDataExportModal()` in `frontend/js/store.js`; `open-data-export-modal` action in `frontend/js/app.js`                                                                                 | `renderDataExportModal()`                    |
+| `copy-column`                        | Query/Data result column actions in `frontend/js/components/queryResults.js`                                           | `openCopyColumnModal()` in `frontend/js/store.js`; `open-copy-column-modal` action in `frontend/js/app.js`                                                                                 | `renderCopyColumnModal()`                    |
+| `create-media-tagging-tag-table`     | Media Tagging setup in `frontend/js/views/mediaTagging.js`                                                             | Generic `openModal()` with `data-modal="create-media-tagging-tag-table"`; submitted by `submitCreateMediaTaggingTagTable()` in `frontend/js/store.js`                                      | `renderCreateMediaTaggingTagTableForm()`     |
+| `create-media-tagging-mapping-table` | Media Tagging setup in `frontend/js/views/mediaTagging.js`                                                             | Generic `openModal()` with `data-modal="create-media-tagging-mapping-table"`; submitted by `submitCreateMediaTaggingMappingTable()` in `frontend/js/store.js`                              | `renderCreateMediaTaggingMappingTableForm()` |
+
 ## History elements
 
 - Query history panels, such as SQL Editor and Charts history, are always placed on the right side.

package/docs/todo.md

@@ -1,3 +1,5 @@
 # Maybe
 
 - Data Pipeline Light/hook, programmable triggers?
+- autocomplete in sql editor (Schema-aware autocomplete)
+- CLI overhaul

package/frontend/js/api.js

@@ -68,6 +68,10 @@ export function getRecentConnections() {
   return request("/api/connections/recent");
 }
 
+export function getConnectionTags() {
+  return request("/api/connections/tags");
+}
+
 export function getActiveConnection() {
   return request("/api/connections/active");
 }
@@ -400,6 +404,13 @@ export function saveTableDesignerDraft(payload) {
   });
 }
 
+export function validateTableDesignerCheck(payload) {
+  return request("/api/table-designer/validate-check", {
+    method: "POST",
+    body: payload,
+  });
+}
+
 export function getMediaTaggingState() {
   return request("/api/media-tagging");
 }
@@ -660,6 +671,13 @@ export function createDocument(payload = {}) {
   });
 }
 
+export function createDocumentFolder(payload = {}) {
+  return request("/api/documents/folders", {
+    method: "POST",
+    body: payload,
+  });
+}
+
 export function getDocument(documentId) {
   return request(`/api/documents/${encodeURIComponent(documentId)}`);
 }