sqlite-hub 2.0.1 → 2.1.0

package/frontend/js/components/modal.js

@@ -18,6 +18,11 @@ import {
     MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL,
 } from '../lib/mediaTaggingDefaults.js';
 import { SYNTHETIC_GENERATOR_TYPES, getSyntheticGeneratorLabel } from '../utils/syntheticData.js';
+import {
+    MAX_CONNECTION_TAG_NAME_LENGTH,
+    normalizeConnectionTagKey,
+    normalizeConnectionTagName,
+} from '../utils/connectionRegistry.js';
 
 function renderField({ label, name, type = 'text', placeholder = '', value = '' }) {
     return `
@@ -192,7 +197,114 @@ export function renderOpenConnectionForm(modal) {
   `;
 }
 
-function renderEditConnectionForm(modal) {
+function renderEditConnectionTagEditor(modal, state) {
+    const assignedTags = Array.isArray(modal.assignedTags) ? modal.assignedTags : [];
+    const assignedKeys = new Set(assignedTags.map(tag => normalizeConnectionTagKey(tag.name)));
+    const tagQuery = String(modal.tagQuery ?? '');
+    const normalizedQuery = normalizeConnectionTagName(tagQuery);
+    const queryKey = normalizeConnectionTagKey(normalizedQuery);
+    const matchingTags = (state.connections.tags ?? [])
+        .filter(tag => !assignedKeys.has(normalizeConnectionTagKey(tag.name)))
+        .filter(tag => {
+            if (!queryKey) {
+                return true;
+            }
+
+            return normalizeConnectionTagKey(tag.name).includes(queryKey);
+        })
+        .slice(0, 6);
+    const exactMatch = (state.connections.tags ?? []).some(tag => normalizeConnectionTagKey(tag.name) === queryKey);
+    const canCreate = Boolean(normalizedQuery && !exactMatch);
+    const assignedMarkup = assignedTags.length
+        ? assignedTags
+              .map(
+                  tag => `
+                    <span class="connection-edit-tag-chip">
+                      <span class="connection-edit-tag-chip__label">${escapeHtml(tag.name)}</span>
+                      <button
+                        aria-label="Remove ${escapeHtml(tag.name)} tag"
+                        class="connection-edit-tag-chip__remove"
+                        data-action="remove-edit-connection-tag"
+                        data-tag-name="${escapeHtml(tag.name)}"
+                        type="button"
+                        title="Remove tag"
+                      >
+                        <span aria-hidden="true">×</span>
+                      </button>
+                      <input name="tags" type="hidden" value="${escapeHtml(tag.name)}" />
+                    </span>
+                  `,
+              )
+              .join('')
+        : '<div class="connection-edit-tags__empty">NO_TAGS_ASSIGNED</div>';
+    const matchMarkup = matchingTags
+        .map(
+            tag => `
+              <button
+                class="connection-edit-tag-option"
+                data-action="add-edit-connection-tag"
+                data-tag-name="${escapeHtml(tag.name)}"
+                type="button"
+              >
+                <span>${escapeHtml(tag.name)}</span>
+                <span>${escapeHtml(String(tag.connectionCount ?? 0))}</span>
+              </button>
+            `,
+        )
+        .join('');
+
+    return `
+      <div class="connection-edit-tags">
+        <div class="connection-edit-tags__label">Tags</div>
+        <div class="connection-edit-tags__assigned">
+          ${assignedMarkup}
+        </div>
+        <label class="connection-edit-tags__input-shell">
+          <span class="sr-only">Add or create tag</span>
+          <input
+            autocomplete="off"
+            class="control-input connection-edit-tags__input"
+            data-bind="edit-connection-tag-query"
+            maxlength="${MAX_CONNECTION_TAG_NAME_LENGTH}"
+            placeholder="ADD_OR_CREATE_TAG..."
+            spellcheck="false"
+            type="text"
+            value="${escapeHtml(tagQuery)}"
+          />
+        </label>
+        ${
+            modal.tagError
+                ? `<div class="connection-edit-tags__error">${escapeHtml(modal.tagError)}</div>`
+                : ''
+        }
+        <div class="connection-edit-tag-options">
+          ${
+              matchMarkup
+                  ? `<div class="connection-edit-tag-options__section">MATCHING_TAGS</div>${matchMarkup}`
+                  : ''
+          }
+          ${
+              canCreate
+                  ? `
+                    <div class="connection-edit-tag-options__section">CREATE_NEW</div>
+                    <button
+                      class="connection-edit-tag-option connection-edit-tag-option--create"
+                      data-action="create-edit-connection-tag"
+                      data-edit-connection-tag-primary
+                      data-tag-name="${escapeHtml(normalizedQuery)}"
+                      type="button"
+                    >
+                      <span>CREATE "${escapeHtml(normalizedQuery)}"</span>
+                    </button>
+                  `
+                  : ''
+          }
+        </div>
+      </div>
+    `;
+}
+
+function renderEditConnectionForm(modal, state) {
     const connection = modal.connection ?? {};
 
     return `
@@ -246,6 +358,7 @@ function renderEditConnectionForm(modal) {
           checked: Boolean(connection.readOnly),
           text: 'Open read-only',
       })}
+      ${renderEditConnectionTagEditor(modal, state)}
       ${renderError(modal.error)}
       <div class="flex items-center justify-between gap-3 pt-2">
         <button
@@ -1926,242 +2039,6 @@ export function renderCopyColumnModal(modal, state) {
   `;
 }
 
-function getTableDesignerUniqueConstraintTypeLabel(constraint) {
-    if (constraint.partial) {
-        return 'Partial unique index';
-    }
-
-    if ((constraint.columns?.length ?? 0) > 1) {
-        return 'Multi-column unique';
-    }
-
-    return 'Unique constraint';
-}
-
-function renderTableDesignerUniqueConstraintExpression(constraint) {
-    const expression = String(constraint.expression || constraint.sql || '').trim();
-
-    if (expression) {
-        return expression;
-    }
-
-    const columns = (constraint.columns ?? []).map(column => column.name).filter(Boolean);
-    return columns.length ? `UNIQUE (${columns.join(', ')})` : 'UNIQUE constraint';
-}
-
-function renderTableDesignerCheckConstraintExpression(constraint) {
-    return String(constraint.expression || '').trim() || 'CHECK constraint';
-}
-
-function normalizeTableDesignerConstraintColumnName(name) {
-    return String(name ?? '')
-        .trim()
-        .toLowerCase();
-}
-
-function tableDesignerConstraintIncludesColumn(constraint, columnName) {
-    const normalizedColumn = normalizeTableDesignerConstraintColumnName(columnName);
-
-    if (!normalizedColumn) {
-        return false;
-    }
-
-    return (constraint.columns ?? []).some(
-        constraintColumn => normalizeTableDesignerConstraintColumnName(constraintColumn.name) === normalizedColumn,
-    );
-}
-
-function renderTableDesignerUniqueConstraintEditor(constraint) {
-    const columns = (constraint.columns ?? []).map(column => column.name).filter(Boolean);
-
-    return `
-    <article class="table-designer-constraint-editor">
-      <div class="table-designer-constraint-editor__header">
-        <div class="min-w-0">
-          <div class="table-designer-constraint-editor__type">
-            ${escapeHtml(getTableDesignerUniqueConstraintTypeLabel(constraint))}
-            ${constraint.origin ? ` // origin ${escapeHtml(constraint.origin)}` : ''}
-          </div>
-          <input
-            class="table-designer-field table-designer-constraint-editor__name"
-            data-bind="table-designer-constraint-field"
-            data-constraint-id="${escapeHtml(constraint.id)}"
-            data-constraint-kind="unique"
-            data-field="name"
-            spellcheck="false"
-            type="text"
-            value="${escapeHtml(constraint.name || 'UNIQUE constraint')}"
-          />
-        </div>
-        <div class="status-badge status-badge--muted">Rebuild</div>
-      </div>
-      ${
-          columns.length
-              ? `
-            <div class="table-designer-constraint__columns">
-              ${columns.map(column => `<span>${escapeHtml(column)}</span>`).join('')}
-            </div>
-          `
-              : ''
-      }
-      <textarea
-        class="table-designer-constraint-editor__sql custom-scrollbar"
-        data-bind="table-designer-constraint-field"
-        data-constraint-id="${escapeHtml(constraint.id)}"
-        data-constraint-kind="unique"
-        data-field="expression"
-        spellcheck="false"
-      >${escapeHtml(renderTableDesignerUniqueConstraintExpression(constraint))}</textarea>
-    </article>
-  `;
-}
-
-function renderTableDesignerCheckConstraintEditor(constraint) {
-    const columns = constraint.columns ?? [];
-    const allowedValues = columns.flatMap(column =>
-        (column.allowedValues ?? []).map(value => ({
-            columnName: column.name,
-            value,
-        })),
-    );
-
-    return `
-    <article class="table-designer-constraint-editor">
-      <div class="table-designer-constraint-editor__header">
-        <div class="min-w-0">
-          <div class="table-designer-constraint-editor__type">
-            ${columns.length ? escapeHtml(columns.map(column => column.name).join(', ')) : 'Table check'}
-          </div>
-          <input
-            class="table-designer-field table-designer-constraint-editor__name"
-            data-bind="table-designer-constraint-field"
-            data-constraint-id="${escapeHtml(constraint.id)}"
-            data-constraint-kind="check"
-            data-field="name"
-            spellcheck="false"
-            type="text"
-            value="${escapeHtml(constraint.name || 'CHECK constraint')}"
-          />
-        </div>
-        <div class="status-badge status-badge--muted">Rebuild</div>
-      </div>
-      ${
-          allowedValues.length
-              ? `
-            <div class="table-designer-constraint__values custom-scrollbar">
-              ${allowedValues
-                  .map(
-                      entry => `
-                    <span title="${escapeHtml(entry.columnName)}">${escapeHtml(entry.value)}</span>
-                  `,
-                  )
-                  .join('')}
-            </div>
-          `
-              : ''
-      }
-      <textarea
-        class="table-designer-constraint-editor__sql custom-scrollbar"
-        data-bind="table-designer-constraint-field"
-        data-constraint-id="${escapeHtml(constraint.id)}"
-        data-constraint-kind="check"
-        data-field="expression"
-        spellcheck="false"
-      >${escapeHtml(renderTableDesignerCheckConstraintExpression(constraint))}</textarea>
-    </article>
-  `;
-}
-
-function renderTableDesignerConstraintSection({ title, count, emptyText, body }) {
-    return `
-    <section class="table-designer-constraints-modal__section">
-      <div class="table-designer-constraints-modal__section-header">
-        <div class="table-designer-constraints-modal__section-title">${escapeHtml(title)}</div>
-        <div class="status-badge status-badge--muted">${formatNumber(count)}</div>
-      </div>
-      ${
-          count
-              ? `<div class="table-designer-constraints__list">${body}</div>`
-              : `<div class="table-designer-constraints-modal__empty">${escapeHtml(emptyText)}</div>`
-      }
-    </section>
-  `;
-}
-
-function renderTableDesignerConstraintsModal(modal, state) {
-    const draft = state.tableDesigner?.draft;
-
-    if (!draft) {
-        return `
-      <div class="table-designer-constraints-modal__empty">
-        No active table designer draft.
-      </div>
-      <div class="flex items-center justify-between gap-3 pt-2">
-        <button class="standard-button" data-action="close-modal" type="button">Close</button>
-      </div>
-    `;
-    }
-
-    const selectedColumn = modal.columnId ? (draft.columns ?? []).find(column => column.id === modal.columnId) : null;
-    const selectedColumnName = String(modal.columnName ?? selectedColumn?.name ?? '').trim();
-    const hasSelectedColumn = Boolean(modal.columnId || selectedColumnName);
-    const selectedColumnLabel = selectedColumnName || 'Unnamed column';
-    const allUniqueConstraints = draft.mode === 'edit' ? (draft.uniqueConstraints ?? []) : [];
-    const allCheckConstraints = draft.mode === 'edit' ? (draft.checkConstraints ?? []) : [];
-    const uniqueConstraints = hasSelectedColumn
-        ? allUniqueConstraints.filter(constraint =>
-              tableDesignerConstraintIncludesColumn(constraint, selectedColumnName),
-          )
-        : allUniqueConstraints;
-    const checkConstraints = hasSelectedColumn
-        ? allCheckConstraints.filter(constraint =>
-              tableDesignerConstraintIncludesColumn(constraint, selectedColumnName),
-          )
-        : allCheckConstraints;
-    const totalCount = uniqueConstraints.length + checkConstraints.length;
-
-    return `
-    <div class="table-designer-constraints-modal">
-      <div class="table-designer-constraints-modal__summary">
-        <div class="min-w-0">
-          <div class="table-designer-constraints-modal__label">Table</div>
-          <code title="${escapeHtml(draft.tableName ?? '')}">${escapeHtml(draft.tableName ?? '')}</code>
-        </div>
-        ${
-            hasSelectedColumn
-                ? `
-              <div class="min-w-0">
-                <div class="table-designer-constraints-modal__label">Column</div>
-                <code title="${escapeHtml(selectedColumnLabel)}">${escapeHtml(selectedColumnLabel)}</code>
-              </div>
-            `
-                : ''
-        }
-        <div class="status-badge status-badge--primary">V2 · ${formatNumber(totalCount)}</div>
-      </div>
-      ${renderTableDesignerConstraintSection({
-          title: 'Check constraints',
-          count: checkConstraints.length,
-          emptyText: hasSelectedColumn
-              ? 'No check constraints detected for this column.'
-              : 'No check constraints detected.',
-          body: checkConstraints.map(renderTableDesignerCheckConstraintEditor).join(''),
-      })}
-      ${renderTableDesignerConstraintSection({
-          title: hasSelectedColumn ? 'Related unique constraints' : 'Unique constraints',
-          count: uniqueConstraints.length,
-          emptyText: hasSelectedColumn
-              ? 'No related multi-column or partial unique constraints detected.'
-              : 'No multi-column or partial unique constraints detected.',
-          body: uniqueConstraints.map(renderTableDesignerUniqueConstraintEditor).join(''),
-      })}
-      <div class="flex items-center justify-between gap-3 pt-2">
-        <button class="standard-button" data-action="close-modal" type="button">Close</button>
-      </div>
-    </div>
-  `;
-}
-
 function renderCreateMediaTaggingMappingTableForm(modal, state) {
     const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
     const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
@@ -2346,7 +2223,7 @@ export function renderModal(state) {
         'edit-connection': {
             eyebrow: 'Registry // Update saved SQLite target',
             title: 'Edit Connection',
-            body: renderEditConnectionForm(modal),
+            body: renderEditConnectionForm(modal, state),
         },
         'delete-row': {
             eyebrow: 'Mutation // Confirm row deletion',
@@ -2408,11 +2285,6 @@ export function renderModal(state) {
             title: isMarkdownTodoCopyColumnMode(modal.copyMode) ? 'Export Markdown Todo' : 'Copy column',
             body: renderCopyColumnModal(modal, state),
         },
-        'table-designer-constraints': {
-            eyebrow: 'Table Designer // Constraints',
-            title: 'Checks',
-            body: renderTableDesignerConstraintsModal(modal, state),
-        },
         'create-media-tagging-tag-table': {
             eyebrow: 'Media Tagging // Create default tag table',
             title: 'Create Tag Table',
@@ -2442,8 +2314,7 @@ export function renderModal(state) {
           modal.kind === 'chart-editor' ||
           modal.kind === 'document-insert-table' ||
           modal.kind === 'document-insert-note' ||
-          modal.kind === 'row-update-preview' ||
-          modal.kind === 'table-designer-constraints'
+          modal.kind === 'row-update-preview'
               ? 'max-w-3xl'
               : modal.kind === 'generate-types' || modal.kind === 'generate-data'
                 ? 'max-w-6xl'

package/frontend/js/components/queryHistoryDetail.js

@@ -23,42 +23,14 @@ function canOpenQueryHistoryInCharts(item) {
   return Boolean(item?.chartsEligible);
 }
 
-function getQueryTypeTone(queryType) {
-  if (queryType === "select" || queryType === "update") {
-    return "success";
-  }
-
-  if (queryType === "pragma") {
-    return "primary";
-  }
-
-  return "muted";
-}
-
-function getExecutionSourceTone(source) {
-  if (source === "api") {
-    return "primary";
-  }
-
-  if (source === "cli") {
-    return "warning";
-  }
-
-  if (source === "mcp") {
-    return "muted";
-  }
-
-  return "success";
-}
-
 function renderRunItem(run) {
   const executedBy = String(run.executedBy ?? "user").trim().toLowerCase() || "user";
 
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
       <div class="flex flex-wrap items-center gap-2">
-        ${renderStatusBadge(run.status, run.status === "error" ? "alert" : "success")}
-        ${renderStatusBadge(executedBy, getExecutionSourceTone(executedBy))}
+        ${renderStatusBadge(run.status, "muted")}
+        ${renderStatusBadge(executedBy, "muted")}
         <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
           ${escapeHtml(formatCompactDateTime(run.executedAt))}
         </span>
@@ -100,9 +72,14 @@ export function renderQueryHistoryDetail({
       <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">
-              Query Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                SQL Editor // Query History
+              </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="clear-query-history-selection"
@@ -124,9 +101,14 @@ export function renderQueryHistoryDetail({
       <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">
-              Query Detail
-            </span>
+            <div class="min-w-0">
+              <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+                SQL Editor // Query History
+              </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="clear-query-history-selection"
@@ -153,12 +135,10 @@ export function renderQueryHistoryDetail({
       ].join("")
     : "";
   const statusMarkup = [
-    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
-    item.isSaved ? renderStatusBadge("saved", "primary") : "",
-    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
-    item.lastRun
-      ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success")
-      : "",
+    renderStatusBadge(item.queryType, "muted"),
+    item.isSaved ? renderStatusBadge("saved", "muted") : "",
+    item.isDestructive ? renderStatusBadge("destructive", "muted") : "",
+    item.lastRun ? renderStatusBadge(item.lastRun.status, "muted") : "",
   ].join("");
   const metaMarkup = [
     renderDetailMetaItem("Last Used", formatDateTime(item.lastUsedAt)),
@@ -176,9 +156,9 @@ export function renderQueryHistoryDetail({
   return [
     '<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"><div>',
-    '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">Query Detail</div>',
-    '<h2 class="mt-1 font-body text-lg font-black uppercase tracking-tight text-on-surface">',
+    '<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">SQL Editor // Query History</div>',
+    '<h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">',
     escapeHtml(item.displayTitle),
     "</h2></div>",
     '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',

package/frontend/js/components/rowEditorPanel.js

@@ -215,7 +215,7 @@ function renderTextCharacterCountBadge(value) {
 
   return `
     <span
-      class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName("char-count")}"
+      class="status-badge status-badge--muted"
       data-row-editor-char-count
       ${count === null ? "hidden" : ""}
     >
@@ -337,22 +337,10 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   `;
 }
 
-function getValueStateBadgeClassName(state) {
-  if (state === "null") {
-    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
-  }
-
-  if (state === "empty") {
-    return "border-outline-variant/35 bg-surface-container-high text-on-surface-variant";
-  }
-
-  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
-}
-
 function renderValueStateBadge(state) {
   return `
     <span
-      class="border px-2 py-1 text-[9px] ${getValueStateBadgeClassName(state)}"
+      class="status-badge status-badge--muted"
       data-row-editor-value-state
       data-value-state="${escapeHtml(state)}"
     >${escapeHtml(getRowEditorValueStateLabel(state))}</span>
@@ -447,44 +435,11 @@ function renderEditableField(field, tableMeta = {}) {
   `;
 }
 
-function getFieldBadgeClassName(tone) {
-  if (tone === "primary-key") {
-    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
-  }
-
-  if (tone === "foreign-key") {
-    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
-  }
-
-  if (tone === "url") {
-    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
-  }
-
-  if (tone === "email") {
-    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
-  }
-
-  if (tone === "check") {
-    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
-  }
-
-  if (tone === "filepath") {
-    return "border-outline-variant/30 bg-surface-container-high text-on-surface";
-  }
-
-  if (tone === "char-count") {
-    return "border-outline-variant/25 bg-surface-container text-on-surface-variant";
-  }
-
-  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
-}
-
 function renderFieldBadge(badge) {
   const label = typeof badge === "object" ? badge.label : badge;
-  const tone = typeof badge === "object" ? badge.tone : "";
 
   return `
-    <span class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName(tone)}">
+    <span class="status-badge status-badge--muted">
       ${escapeHtml(label)}
     </span>
   `;
@@ -578,27 +533,19 @@ export function renderRowEditorPanel({
   ]
     .filter(Boolean)
     .join("");
+  const eyebrow = [sectionLabel, subtitle].filter(Boolean).join(" // ");
 
   return `
     <section class="flex h-full min-h-0 flex-col bg-surface-low">
       <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
         <div class="flex items-start justify-between gap-4">
           <div class="min-w-0 flex-1">
-            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-              ${escapeHtml(sectionLabel)}
+            <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container/70">
+              ${escapeHtml(eyebrow)}
             </div>
-            <h2 class="mt-2 font-body text-3xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(title)}
             </h2>
-            ${
-              subtitle
-                ? `
-                    <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-                      ${escapeHtml(subtitle)}
-                    </div>
-                  `
-                : ""
-            }
           </div>
           <button
             aria-label="Close panel"