sqlite-hub 0.12.0 → 0.17.0

package/frontend/js/components/modal.js

@@ -1,4 +1,11 @@
-import { escapeHtml, highlightSql, truncateMiddle } from "../utils/format.js";
+import { escapeHtml, formatNumber, highlightSql, truncateMiddle } from "../utils/format.js";
+import {
+  buildCopyColumnText,
+  buildCopyColumnPreviewText,
+  getCopyColumnActionLabel,
+  getCopyColumnExportMetadata,
+  isMarkdownTodoCopyColumnMode,
+} from "../utils/copyColumnExport.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 import {
   analyzeQueryChartResult,
@@ -164,7 +171,7 @@ function renderOpenConnectionForm(modal) {
         text: "Open read-only",
       })}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -238,7 +245,7 @@ function renderEditConnectionForm(modal) {
         text: "Open read-only",
       })}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -271,7 +278,7 @@ function renderCreateDatabaseForm(modal) {
         placeholder: "Optional display name",
       })}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -357,7 +364,7 @@ function renderImportSqlForm(modal, state) {
         explicit path instead of file upload.
       </p>
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -417,7 +424,7 @@ function renderDeleteRowConfirmForm(modal) {
     rowPreviewMarkup,
     "</div>",
     renderError(modal.error),
-    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<div class="flex items-center justify-between gap-3 pt-2">',
     '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
     '<button class="delete-button" type="submit">',
     modal.submitting ? "Deleting..." : "Delete Row",
@@ -507,7 +514,7 @@ function renderRowUpdatePreviewForm(modal) {
       </div>
       ${paramsMarkup}
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
         <button class="signature-button" type="submit">
           ${modal.submitting ? 'Applying...' : 'Apply Changes'}
@@ -747,7 +754,7 @@ function renderChartEditorForm(modal, state) {
           : ""
       }
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -775,7 +782,7 @@ function renderDeleteChartForm(modal) {
     '<p class="text-sm leading-7 text-on-surface-variant/65">The linked query-history entry stays intact. Only this chart definition is removed.</p>',
     "</div>",
     renderError(modal.error),
-    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<div class="flex items-center justify-between gap-3 pt-2">',
     '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
     '<button class="delete-button" type="submit">',
     modal.submitting ? "Deleting..." : "Delete Chart",
@@ -792,7 +799,7 @@ function renderDeleteQueryHistoryForm(modal) {
     '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the query-history entry and all recorded runs linked to it.</p>',
     "</div>",
     renderError(modal.error),
-    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<div class="flex items-center justify-between gap-3 pt-2">',
     '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
     '<button class="delete-button" type="submit">',
     modal.submitting ? "Deleting..." : "Delete Query",
@@ -800,6 +807,147 @@ function renderDeleteQueryHistoryForm(modal) {
   ].join("");
 }
 
+function renderDeleteDocumentForm(modal) {
+  return [
+    '<form class="space-y-5" data-form="delete-document-confirm"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete document <span class="font-bold text-primary-container">',
+    escapeHtml(modal.filename ?? "document"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the Markdown document from the active database document folder.</p>',
+    '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
+    formatNumber(modal.contentLength ?? 0),
+    " chars</div>",
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-between gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Document",
+    "</button></div></form>",
+  ].join("");
+}
+
+function getDocumentInsertQueryTitle(query) {
+  return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || "Saved query";
+}
+
+function getSelectedDocumentInsertQuery(modal) {
+  const selectedHistoryId = String(modal.selectedHistoryId ?? "");
+
+  return (modal.queries ?? []).find((query) => String(query.id) === selectedHistoryId) ?? null;
+}
+
+function renderDocumentInsertQuerySelect(modal, emptyText) {
+  const queries = modal.queries ?? [];
+
+  if (modal.loading) {
+    return '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">Loading saved queries...</div>';
+  }
+
+  if (!queries.length) {
+    return `<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">${escapeHtml(emptyText)}</div>`;
+  }
+
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Saved Query
+      </span>
+      <select
+        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        data-bind="document-insert-query-select"
+        name="historyId"
+      >
+        ${queries
+          .map(
+            (query) => `
+              <option
+                value="${escapeHtml(query.id)}"
+                ${String(query.id) === String(modal.selectedHistoryId) ? "selected" : ""}
+              >
+                ${escapeHtml(getDocumentInsertQueryTitle(query))}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+    </label>
+  `;
+}
+
+function renderDocumentInsertQueryPreview(query) {
+  if (!query) {
+    return "";
+  }
+
+  return `
+    <div class="space-y-2">
+      <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Query Preview
+      </div>
+      <pre class="max-h-44 overflow-auto border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-xs leading-6 text-on-surface-variant/75 custom-scrollbar">${escapeHtml(
+        query.rawSql || query.previewSql || ""
+      )}</pre>
+    </div>
+  `;
+}
+
+function renderDocumentInsertTableForm(modal) {
+  const selectedQuery = getSelectedDocumentInsertQuery(modal);
+  const disabledAttribute = modal.loading || modal.submitting || !(modal.queries ?? []).length
+    ? 'disabled aria-disabled="true"'
+    : "";
+
+  return `
+    <form class="space-y-5" data-form="document-insert-table">
+      ${renderDocumentInsertQuerySelect(modal, "No saved queries are available for this database.")}
+      ${renderDocumentInsertQueryPreview(selectedQuery)}
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <button class="signature-button" type="submit" ${disabledAttribute}>
+          ${modal.submitting ? "Inserting..." : "Insert Table"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderDocumentInsertNoteForm(modal) {
+  const selectedQuery = getSelectedDocumentInsertQuery(modal);
+  const note = String(selectedQuery?.notes ?? "").trim();
+  const disabledAttribute = modal.loading || modal.submitting || !(modal.queries ?? []).length
+    ? 'disabled aria-disabled="true"'
+    : "";
+
+  return `
+    <form class="space-y-5" data-form="document-insert-note">
+      ${renderDocumentInsertQuerySelect(modal, "No saved queries with notes are available for this database.")}
+      ${
+        note
+          ? `
+            <div class="space-y-2">
+              <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+                Note Preview
+              </div>
+              <pre class="max-h-64 overflow-auto whitespace-pre-wrap border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm leading-6 text-on-surface custom-scrollbar">${escapeHtml(
+                note
+              )}</pre>
+            </div>
+          `
+          : ""
+      }
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <button class="signature-button" type="submit" ${disabledAttribute}>
+          ${modal.submitting ? "Inserting..." : "Insert Note"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
 function renderQueryExportPreview(lines = []) {
   return lines.map((line) => `<span class="block whitespace-pre">${escapeHtml(line)}</span>`).join("");
 }
@@ -829,7 +977,21 @@ function renderTextExportModal(modal, action) {
   const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
 
   return `
-    <div class="space-y-5">
+    <div class="space-y-5" data-export-modal>
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Filename
+        </span>
+        <input
+          autocomplete="off"
+          class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+          name="filename"
+          spellcheck="false"
+          type="text"
+          value="${escapeHtml(modal.filename ?? "")}"
+          ${disabledAttribute}
+        />
+      </label>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         ${getExportOptions()
           .map(
@@ -868,7 +1030,7 @@ function renderTextExportModal(modal, action) {
           .join("")}
       </div>
       ${renderError(modal.error)}
-      <div class="flex justify-end">
+      <div class="flex justify-start">
         <button class="standard-button" data-action="close-modal" type="button">
           Cancel
         </button>
@@ -885,6 +1047,440 @@ function renderDataExportModal(modal) {
   return renderTextExportModal(modal, "export-data-format");
 }
 
+function getCopyColumnResult(state, modal) {
+  return modal.scope === "charts" ? state.charts.result : state.editor.result;
+}
+
+function renderCopyColumnPreview(modal, state) {
+  const result = getCopyColumnResult(state, modal);
+  const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
+  const separator = Boolean(modal.lineBreaks) && !isMarkdownTodoCopyColumnMode(modal.copyMode)
+    ? "\n"
+    : String(modal.separator ?? ",");
+  const wrapper = String(modal.wrapper ?? '"');
+  const preview = isMarkdownTodo
+    ? modal.editedText ?? buildCopyColumnText({
+        result,
+        columnName: modal.columnName,
+        copyMode: modal.copyMode,
+        separator: "\n",
+        wrapper,
+      }).text
+    : buildCopyColumnPreviewText({
+        result,
+        columnName: modal.columnName,
+        copyMode: modal.copyMode,
+        separator,
+        wrapper,
+        maxRows: 4,
+      });
+
+  if (!preview && !isMarkdownTodo) {
+    return "";
+  }
+
+  if (isMarkdownTodo) {
+    return `
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Editable Preview
+        </span>
+        <textarea
+          class="copy-column-preview copy-column-preview--editable custom-scrollbar"
+          name="editedText"
+          spellcheck="true"
+        >${escapeHtml(preview)}</textarea>
+      </label>
+    `;
+  }
+
+  return `
+    <div class="space-y-2">
+      <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Preview
+      </div>
+      <pre class="copy-column-preview custom-scrollbar">${escapeHtml(preview)}</pre>
+    </div>
+  `;
+}
+
+function renderCopyColumnLineBreaksField({ checked = false, disabled = false } = {}) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Format
+      </span>
+      <span class="standard-checkbox ${disabled ? "is-disabled" : ""}">
+        <input
+          ${checked ? "checked" : ""}
+          ${disabled ? "disabled" : ""}
+          data-bind="copy-column-format-field"
+          data-field="lineBreaks"
+          name="lineBreaks"
+          type="checkbox"
+        />
+        <span>Line breaks</span>
+      </span>
+    </label>
+  `;
+}
+
+function renderCopyColumnFormatField({ label, name, value = "" }) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <input
+        class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        data-bind="copy-column-format-field"
+        data-field="${escapeHtml(name)}"
+        name="${escapeHtml(name)}"
+        type="text"
+        value="${escapeHtml(value)}"
+      />
+    </label>
+  `;
+}
+
+export function renderCopyColumnModal(modal, state) {
+  const result = getCopyColumnResult(state, modal);
+  const rows = result?.rows ?? [];
+  const valueCount = modal.copyMode === "first-10" ? Math.min(rows.length, 10) : rows.length;
+  const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
+  const exportMetadata = getCopyColumnExportMetadata(modal.copyMode);
+  const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
+  const lineBreaks = isMarkdownTodo || Boolean(modal.lineBreaks);
+  const formatFieldsMarkup = isMarkdownTodo
+    ? renderCopyColumnLineBreaksField({
+        checked: true,
+        disabled: true,
+      })
+    : `
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        ${renderCopyColumnFormatField({
+          label: "Separator",
+          name: "separator",
+          value: modal.separator ?? ",",
+        })}
+        ${renderCopyColumnFormatField({
+          label: "Wrapper",
+          name: "wrapper",
+          value: modal.wrapper ?? '"',
+        })}
+        ${renderCopyColumnLineBreaksField({
+          checked: lineBreaks,
+        })}
+      </div>
+    `;
+
+  return `
+    <form class="space-y-5" data-form="copy-column">
+      <input name="scope" type="hidden" value="${escapeHtml(modal.scope ?? "editor")}" />
+      <input name="columnName" type="hidden" value="${escapeHtml(modal.columnName ?? "")}" />
+      <input name="copyMode" type="hidden" value="${escapeHtml(modal.copyMode ?? "column")}" />
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Column
+        </div>
+        <div class="mt-2 flex min-w-0 items-center justify-between gap-4">
+          <code class="min-w-0 truncate font-mono text-sm text-primary-container" title="${escapeHtml(
+            modal.columnName ?? ""
+          )}">${escapeHtml(modal.columnName ?? "")}</code>
+          <span class="shrink-0 font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/50">
+            ${escapeHtml(getCopyColumnActionLabel(modal.copyMode))} · ${formatNumber(valueCount)}
+          </span>
+        </div>
+      </div>
+      ${formatFieldsMarkup}
+      ${renderCopyColumnPreview(modal, state)}
+      ${renderError(modal.error)}
+      <div class="flex flex-wrap items-center justify-between gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+          ${disabledAttribute}
+        >
+          Cancel
+        </button>
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          <button
+            class="standard-button"
+            name="intent"
+            type="submit"
+            value="export"
+            ${disabledAttribute}
+          >
+            ${modal.submitting ? "Working..." : `Export as ${exportMetadata.extension.toUpperCase()}`}
+          </button>
+          ${
+            isMarkdownTodo
+              ? `
+          <button
+            class="standard-button"
+            name="intent"
+            type="submit"
+            value="document"
+            ${disabledAttribute}
+          >
+            ${modal.submitting ? "Working..." : "Export to document folder"}
+          </button>
+          `
+              : ""
+          }
+          <button
+            class="signature-button"
+            name="intent"
+            type="submit"
+            value="copy"
+            ${disabledAttribute}
+          >
+            ${modal.submitting ? "Working..." : "Copy"}
+          </button>
+        </div>
+      </div>
+    </form>
+  `;
+}
+
+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);
@@ -923,7 +1519,7 @@ function renderCreateMediaTaggingMappingTableForm(modal, state) {
         ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL)}
       </div>
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -987,7 +1583,7 @@ function renderCreateMediaTaggingTagTableForm(modal, state) {
         ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL)}
       </div>
       ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
+      <div class="flex items-center justify-between gap-3 pt-2">
         <button
           class="standard-button"
           data-action="close-modal"
@@ -1066,6 +1662,21 @@ export function renderModal(state) {
       title: "Delete Query",
       body: renderDeleteQueryHistoryForm(modal),
     },
+    "delete-document": {
+      eyebrow: "Documents // Confirm deletion",
+      title: "Delete Document",
+      body: renderDeleteDocumentForm(modal),
+    },
+    "document-insert-table": {
+      eyebrow: "Documents // Saved query output",
+      title: "Insert Table",
+      body: renderDocumentInsertTableForm(modal),
+    },
+    "document-insert-note": {
+      eyebrow: "Documents // Saved query notes",
+      title: "Insert Note",
+      body: renderDocumentInsertNoteForm(modal),
+    },
     "query-export": {
       eyebrow: "SQL Editor // Export query result",
       title: "Export Query",
@@ -1076,6 +1687,16 @@ export function renderModal(state) {
       title: "Export Table",
       body: renderDataExportModal(modal),
     },
+    "copy-column": {
+      eyebrow: "Results // Copy or export column values",
+      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",
@@ -1096,7 +1717,15 @@ export function renderModal(state) {
 
   return `
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
-      <div class="w-full ${modal.kind === "chart-editor" || modal.kind === "row-update-preview" ? "max-w-3xl" : "max-w-xl"} border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
+      <div class="w-full ${
+        modal.kind === "chart-editor" ||
+        modal.kind === "document-insert-table" ||
+        modal.kind === "document-insert-note" ||
+        modal.kind === "row-update-preview" ||
+        modal.kind === "table-designer-constraints"
+          ? "max-w-3xl"
+          : "max-w-xl"
+      } border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
         <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">