admindb 2.1.1 → 2.3.0

package/dist/views/pages/seed.hbs

@@ -1,201 +1,307 @@
-<div class="space-y-6">
-  <div class="flex flex-wrap items-center justify-between gap-4 border-b border-base-200 pb-5">
-    <div class="flex items-center gap-3">
-      <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
-        {{{icon "arrowLeft" class="h-5 w-5"}}}
+<div class="space-y-4 pb-20">
+  <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
+    <div class="flex items-center gap-3 min-w-0">
+      <a href="{{basePath}}/seed" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Choose table & mode">
+        {{{icon "arrowLeft" class="h-4 w-4"}}}
       </a>
-      <div>
-        <div class="flex flex-wrap items-center gap-2">
-          <h1 class="font-mono text-2xl font-bold tracking-tight">{{table}}</h1>
-          <span class="badge badge-sm badge-neutral font-mono">{{rowCount}} rows in DB</span>
-          <span class="badge badge-sm badge-ghost font-mono">{{colCount}} columns</span>
+      <div class="h-4 w-px bg-base-300"></div>
+      <div class="flex items-center gap-2 flex-wrap">
+        <a href="{{basePath}}/seed" class="text-xs font-semibold text-base-content/50 hover:text-primary transition-colors">Seed Data</a>
+        <span class="text-xs text-base-content/30">/</span>
+        {{#if allTables.length}}
+        <div class="dropdown dropdown-bottom">
+          <label tabindex="0" class="btn btn-xs btn-ghost gap-1 font-mono font-bold text-xs" title="Switch table">
+            <span>{{table}}</span>
+            {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
+          </label>
+          <ul tabindex="0" class="dropdown-content z-30 menu p-1 shadow-lg bg-base-100 border border-base-300 rounded-box w-52 max-h-60 overflow-y-auto">
+            {{#each allTables}}
+              <li>
+                <a href="{{../basePath}}/seed/{{this}}" class="{{#if (eq this ../table)}}active font-bold{{/if}} font-mono text-xs">
+                  {{{icon "table" class="h-3.5 w-3.5"}}}
+                  {{this}}
+                </a>
+              </li>
+            {{/each}}
+          </ul>
         </div>
-        <p class="mt-0.5 text-xs text-base-content/55">Data generator — fill the table with realistic mock data, simulate sparse records, and preview in real time.</p>
+        {{else}}
+        <span class="font-mono font-bold text-sm text-base-content">{{table}}</span>
+        {{/if}}
+        <span class="badge badge-sm badge-ghost font-mono text-[11px] text-base-content/60">{{colCount}} cols</span>
+        {{#if dialect}}
+          <span class="badge badge-sm badge-outline font-mono text-[10px] uppercase text-base-content/50">{{dialect}}</span>
+        {{/if}}
       </div>
     </div>
-    <div class="flex flex-wrap items-center gap-2">
-      <div class="dropdown dropdown-end">
-        <button tabindex="0" type="button" class="btn btn-outline btn-sm gap-1.5">
-          {{{icon "seed" class="h-4 w-4"}}}
-          Presets
-          {{{icon "chevronDown" class="h-3.5 w-3.5 opacity-60"}}}
+    <div class="flex items-center gap-2.5 flex-wrap">
+      <div class="seed-mode-segment">
+        <button type="button" id="btn-select-single" class="seed-mode-btn {{#unless isChainMode}}active{{/unless}}">
+          {{{icon "table" class="h-3.5 w-3.5"}}}
+          <span>Single Table</span>
+        </button>
+        <button type="button" id="btn-select-chain" class="seed-mode-btn {{#if isChainMode}}active{{/if}}">
+          {{{icon "diagram" class="h-3.5 w-3.5"}}}
+          <span>ER Chain</span>
         </button>
-        <ul tabindex="0" class="dropdown-content z-20 menu p-2 shadow-lg bg-base-100 rounded-xl w-56 border border-base-200 text-xs">
-          <li><button type="button" id="preset-realistic" class="py-2">✨ Realistic Mock Data</button></li>
-          <li><button type="button" id="preset-minimal" class="py-2">⚡ Minimal (Required Only)</button></li>
-          <li><button type="button" id="preset-sparse" class="py-2">🎲 Sparse (30% Nullables)</button></li>
-          <li><button type="button" id="preset-numbered" class="py-2">🔢 Sequential & Numbered</button></li>
-          <li class="border-t border-base-200 my-1"></li>
-          <li><button type="button" id="seed-export-config" class="py-2">💾 Export Plan as JSON</button></li>
-          <li><button type="button" id="seed-import-config" class="py-2">📥 Import Plan JSON…</button></li>
-        </ul>
       </div>
-      <button id="seed-preview" type="button" class="btn btn-outline btn-sm gap-1.5">
-        {{{icon "inspect" class="h-4 w-4 text-primary"}}}
-        Preview Data
-      </button>
-      {{#unless readonly}}
-        <button id="seed-insert" type="button" class="btn btn-primary btn-sm gap-1.5 shadow-sm">
-          {{{icon "plus" class="h-4 w-4"}}}
-          Insert Rows
+      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
+      <div class="flex items-center gap-1.5" title="Numeric seed for deterministic generation">
+        <div class="relative">
+          <input id="plan-seed-input" type="number" placeholder="Seed (auto)"
+            class="field-input w-28 font-mono text-xs !py-1 pl-2.5 pr-6" />
+          <span class="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-mono text-base-content/40">#</span>
+        </div>
+        <button type="button" id="btn-random-seed" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Roll random seed">
+          {{{icon "refresh" class="h-3.5 w-3.5"}}}
+        </button>
+      </div>
+      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
+      <div class="flex items-center gap-1">
+        <button type="button" id="btn-profiles-modal" class="btn btn-sm btn-ghost gap-1.5 text-xs text-base-content/80 hover:text-base-content" title="Manage seed profiles">
+          {{{icon "book" class="h-3.5 w-3.5 text-primary"}}}
+          <span class="hidden md:inline">Profiles</span>
         </button>
-      {{else}}
-        <span class="inline-flex items-center gap-1.5 text-xs font-medium text-warning bg-warning/10 px-2.5 py-1.5 rounded-lg">
-          {{{icon "lock" class="h-4 w-4"}}}
-          Read-only database
-        </span>
-      {{/unless}}
+        <button type="button" id="btn-export-plan-json" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Export generation plan JSON">
+          {{{icon "download" class="h-3.5 w-3.5"}}}
+        </button>
+        <label for="input-import-plan-json" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content cursor-pointer" title="Import generation plan JSON">
+          {{{icon "upload" class="h-3.5 w-3.5"}}}
+          <input type="file" id="input-import-plan-json" accept=".json" class="hidden" />
+        </label>
+      </div>
+      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
+      <button id="seed-insert" type="button" class="btn btn-primary btn-sm gap-2 font-bold px-4 shadow-sm">
+        {{{icon "play" class="h-3.5 w-3.5"}}}
+        <span>Execute Seed</span>
+      </button>
     </div>
   </div>
-  <div class="app-card p-5 bg-base-100">
-    <div class="grid grid-cols-1 gap-5 lg:grid-cols-12 lg:items-end">
-      <div class="lg:col-span-4 space-y-1.5">
-        <label class="field-label !mb-0 font-medium" for="seed-count">
-          <span>Rows to generate</span>
-          <span class="text-xs text-base-content/45 font-normal">(max {{maxRows}})</span>
-        </label>
-        <div class="flex items-center gap-2">
-          <input id="seed-count" type="number" min="1" max="{{maxRows}}" value="10" class="field-input w-28 font-mono font-medium" />
-          <div class="flex flex-wrap items-center gap-1">
-            {{#each quickCounts}}
-              <button type="button" class="seed-quick btn btn-outline btn-xs px-2.5" data-n="{{this}}">{{this}}</button>
-            {{/each}}
+  <div id="step-content-1" class="hidden">
+    <button id="btn-next-1" class="hidden"></button>
+  </div>
+  <div id="step-content-2" class="contents">
+    <button id="btn-prev-2" class="hidden"></button>
+    <button id="btn-next-2" class="hidden"></button>
+  </div>
+  <div id="step-content-3" class="contents">
+    <button id="btn-prev-3" class="hidden"></button>
+  </div>
+  <div id="step-nav-1" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
+  <div id="step-nav-2" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
+  <div id="step-nav-3" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
+  <div id="wizard-progress-bar" class="hidden"></div>
+  <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 items-start">
+    <div class="xl:col-span-7 space-y-4">
+      <div id="config-single" class="{{#if isChainMode}}hidden{{/if}} space-y-4">
+        <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
+          <div class="flex items-center gap-3">
+            <div class="flex items-center">
+              <button type="button" id="seed-count-dec" class="btn btn-xs btn-outline rounded-r-none border-r-0 px-2.5 font-mono text-sm hover:bg-primary hover:text-primary-content hover:border-primary">−</button>
+              <input id="seed-count" type="number" value="10" min="1" max="{{maxRows}}"
+                class="field-input !rounded-none border-x-0 !py-0.5 font-mono w-20 font-bold text-xs text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
+              <button type="button" id="seed-count-inc" class="btn btn-xs btn-outline rounded-l-none border-l-0 px-2.5 font-mono text-sm hover:bg-primary hover:text-primary-content hover:border-primary">+</button>
+            </div>
+            <span class="text-[11px] uppercase font-bold text-base-content/50">Rows</span>
+            <div class="h-4 w-px bg-base-200 hidden sm:block"></div>
+            <div class="flex gap-1 flex-wrap">
+              {{#each quickCounts}}
+                <button type="button" class="preset-pill btn btn-xs btn-ghost border border-base-300 font-mono text-[11px] px-2" data-count="{{this}}">{{this}}</button>
+              {{/each}}
+            </div>
+          </div>
+          <div class="flex items-center gap-2 w-full sm:w-auto">
+            <input type="text" id="seed-col-search" placeholder="Filter columns…" class="field-input text-xs !py-1 w-full sm:w-48" />
+            <span id="col-count-badge" class="badge badge-sm badge-ghost font-mono text-[11px] shrink-0">{{colCount}} cols</span>
+          </div>
+        </div>
+        <div class="app-card p-4 space-y-3">
+          <div class="flex items-center justify-between pb-2 border-b border-base-200">
+            <span class="text-xs font-bold uppercase tracking-wider text-base-content/70">Columns Specification</span>
+            <span class="text-[11px] text-base-content/40">Select generator strategy & customize parameters per column</span>
+          </div>
+          <div id="seed-columns" class="space-y-2.5">
           </div>
         </div>
       </div>
-      <div class="lg:col-span-4 space-y-1.5">
-        <label class="field-label !mb-0 font-medium" for="seed-search">
-          <span>Filter columns</span>
-        </label>
-        <div class="relative">
-          <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-base-content/40">
-            {{{icon "search" class="h-4 w-4"}}}
-          </span>
-          <input id="seed-search" type="text" placeholder="Search column by name or type..." class="field-input pl-9 text-xs" />
+      <div id="config-chain" class="{{#unless isChainMode}}hidden{{/unless}} space-y-4">
+        <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
+          <div class="flex items-center gap-3">
+            <label class="text-xs font-bold text-base-content/70">Graph Scope:</label>
+            <select id="chain-scope" class="field-select !py-1 text-xs font-semibold w-52">
+              <option value="chain">Connected Relational Chain</option>
+              <option value="ancestors">Upstream Parents Only</option>
+              <option value="descendants">Downstream Children Only</option>
+              <option value="all">Entire Database (All Tables)</option>
+            </select>
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-bold text-base-content/70">Scale:</span>
+            <div class="join">
+              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="0.5">0.5×</button>
+              <button type="button" class="chain-scale-btn btn btn-xs join-item btn-neutral font-mono" data-scale="1">1×</button>
+              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="2">2×</button>
+              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="5">5×</button>
+            </div>
+            <span id="chain-summary-badge" class="badge badge-sm badge-primary font-mono font-bold ml-2">0 Tables</span>
+          </div>
+        </div>
+        <div class="app-card p-4 space-y-3">
+          <div class="flex items-center justify-between pb-2 border-b border-base-200">
+            <span class="text-xs font-bold uppercase tracking-wider text-base-content/70">Topological Execution Pipeline</span>
+            <span class="text-[11px] text-base-content/40">Dependencies ordered upstream-first</span>
+          </div>
+          <div id="chain-pipeline-container" class="space-y-2.5">
+          </div>
         </div>
       </div>
-      <div class="lg:col-span-4 flex flex-col justify-end space-y-2">
-        {{#unless readonly}}
-          <label class="cursor-pointer flex items-center gap-2 text-xs font-medium text-base-content/80 hover:text-base-content transition-colors">
-            <input id="seed-truncate" type="checkbox" class="checkbox checkbox-xs checkbox-error rounded" />
-            <span class="flex items-center gap-1 text-error/90">
-              {{{icon "trash" class="h-3.5 w-3.5"}}}
-              Clear table before inserting (DELETE all rows)
-            </span>
+      <details class="app-card group">
+        <summary class="p-3.5 flex items-center justify-between cursor-pointer list-none select-none text-xs font-bold text-base-content/70 hover:text-base-content">
+          <div class="flex items-center gap-2">
+            {{{icon "settings" class="h-3.5 w-3.5"}}}
+            <span>Advanced Execution Options</span>
+          </div>
+          <span class="text-xs text-base-content/40 group-open:rotate-180 transition-transform">▼</span>
+        </summary>
+        <div class="p-3.5 pt-0 border-t border-base-200/80 mt-1 flex flex-wrap items-center gap-6 text-xs">
+          <label class="cursor-pointer flex items-center gap-2 select-none group">
+            <input id="plan-transaction-opt" type="checkbox" checked class="checkbox checkbox-primary checkbox-xs" />
+            <span class="font-medium text-base-content/80 group-hover:text-base-content">Wrap in Transaction (BEGIN ... COMMIT)</span>
           </label>
-        {{/unless}}
-        <p class="text-[11px] text-base-content/45 leading-tight">Rows are inserted in a single atomic transaction. Any constraint failure safely rolls back.</p>
-      </div>
+          <label class="cursor-pointer flex items-center gap-2 select-none group">
+            <input id="plan-rollback-opt" type="checkbox" checked class="checkbox checkbox-primary checkbox-xs" />
+            <span class="font-medium text-base-content/80 group-hover:text-base-content">Atomic Rollback on Error</span>
+          </label>
+          <label class="cursor-pointer flex items-center gap-2 select-none group">
+            <input id="seed-truncate" type="checkbox" class="checkbox checkbox-error checkbox-xs" />
+            <span class="font-medium text-error/90 group-hover:text-error">Clear tables before inserting (Truncate)</span>
+          </label>
+        </div>
+      </details>
     </div>
-  </div>
-  <div class="space-y-3">
-    <div class="flex flex-wrap items-center justify-between gap-2">
-      <div class="flex items-center gap-2">
-        <h2 class="text-sm font-semibold uppercase tracking-wider text-base-content/50">Column Strategies</h2>
-        <span id="seed-col-count-badge" class="badge badge-sm badge-ghost font-mono"></span>
-      </div>
-      <div class="flex flex-wrap items-center gap-1.5">
-        <button id="seed-refresh-samples" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60" title="Refresh live sample previews">
-          {{{icon "refresh" class="h-3.5 w-3.5"}}}
-          Refresh Samples
-        </button>
-        <button id="seed-apply-all" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60">
-          {{{icon "duplicate" class="h-3.5 w-3.5"}}}
-          Apply strategy to all…
-        </button>
-        <button id="seed-reset" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60">
-          {{{icon "refresh" class="h-3.5 w-3.5"}}}
-          Reset Defaults
-        </button>
+    <div class="xl:col-span-5 space-y-4 xl:sticky xl:top-4">
+      <div id="validation-report-card" class="app-card p-3.5 space-y-2">
+        <div class="flex items-center justify-between">
+          <div id="validation-summary-pill" class="flex items-center gap-2">
+            <span id="validation-status-dot" class="w-2 h-2 rounded-full bg-success"></span>
+            <span id="validation-status-text" class="text-xs font-mono font-bold text-base-content">Plan Ready</span>
+          </div>
+          <span id="validation-summary-chip" class="badge badge-sm badge-success font-mono text-[10px] font-bold">All Checks Passed</span>
+        </div>
+        <div id="validation-issues-list" class="space-y-1.5 text-xs">
+          <div class="flex items-center gap-2 text-success font-medium text-[11px]">
+            {{{icon "check" class="h-3.5 w-3.5 shrink-0"}}}
+            <span>Primary key & constraint strategies valid</span>
+          </div>
+        </div>
       </div>
-    </div>
-    <div id="seed-columns" class="grid grid-cols-1 gap-3.5 md:grid-cols-2 2xl:grid-cols-3"></div>
-    <div id="seed-empty-search" class="hidden p-8 text-center app-card">
-      <p class="text-sm text-base-content/50">No columns match the current search query.</p>
-    </div>
-  </div>
-  <div id="seed-feedback" class="hidden"></div>
-  <div id="seed-preview-card" class="hidden app-card overflow-hidden transition-all duration-200">
-    <div class="flex flex-wrap items-center justify-between border-b border-base-200 bg-base-200/40 px-5 py-3 gap-3">
-      <div class="flex items-center gap-3">
-        <div class="tabs tabs-boxed bg-base-300/40 p-0.5 rounded-lg">
-          <button id="tab-table-view" type="button" class="tab tab-sm tab-active font-medium gap-1.5">
-            {{{icon "table" class="h-3.5 w-3.5"}}}
-            Table Preview
-          </button>
-          <button id="tab-sql-view" type="button" class="tab tab-sm font-medium gap-1.5">
-            {{{icon "sql" class="h-3.5 w-3.5"}}}
-            SQL Statements
+      <div class="app-card overflow-hidden">
+        <div class="flex items-center justify-between p-3 border-b border-base-200 bg-base-100 gap-2 flex-wrap">
+          <div class="join">
+            <button type="button" id="preview-tab-grid" class="btn btn-xs join-item btn-active font-bold">Table Preview</button>
+            <button type="button" id="preview-tab-sql" class="btn btn-xs join-item font-bold">SQL Script</button>
+          </div>
+          <button id="seed-refresh-preview" type="button" class="btn btn-xs btn-ghost gap-1 text-xs text-base-content/70 hover:text-primary">
+            {{{icon "refresh" class="h-3 w-3"}}}
+            <span>Refresh</span>
           </button>
         </div>
-        <span id="preview-summary-badge" class="badge badge-sm badge-ghost font-mono"></span>
+        <div id="seed-chain-table-tabs" class="tabs tabs-bordered flex-nowrap w-full overflow-x-auto hidden px-3 py-1 bg-base-200/40 border-b border-base-200 text-xs"></div>
+        <div id="preview-view-grid">
+          <div class="overflow-x-auto max-h-[440px]">
+            <table class="table table-zebra table-pin-rows table-xs w-full">
+              <thead id="seed-preview-thead" class="bg-base-200/90 text-[10px] uppercase font-mono tracking-wider text-base-content/70 backdrop-blur sticky top-0 z-10"></thead>
+              <tbody id="seed-preview-tbody" class="font-mono text-[11px]">
+                <tr>
+                  <td colspan="100" class="text-center py-12 opacity-50">
+                    <div class="flex flex-col items-center gap-2">
+                      <span class="loading loading-spinner loading-sm text-primary"></span>
+                      <span class="text-xs">Generating preview…</span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div id="preview-view-sql" class="hidden p-3 bg-base-200/20 space-y-2">
+          <div class="flex items-center justify-between">
+            <span class="text-[11px] font-mono text-base-content/50 uppercase font-bold">Generated SQL (Preview)</span>
+            <button type="button" id="btn-copy-sql" class="btn btn-xs btn-outline gap-1 text-[11px]">
+              {{{icon "copy" class="h-3 w-3"}}}
+              <span>Copy SQL</span>
+            </button>
+          </div>
+          <pre id="preview-sql-code" class="bg-neutral text-neutral-content p-3.5 rounded-lg font-mono text-xs overflow-x-auto max-h-[380px] border border-base-300 leading-relaxed"></pre>
+        </div>
       </div>
-      <div class="flex flex-wrap items-center gap-1.5">
-        <button id="seed-export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-          {{{icon "export" class="h-3.5 w-3.5"}}}
-          Export CSV
-        </button>
-        <button id="seed-export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-          {{{icon "export" class="h-3.5 w-3.5"}}}
-          Export JSON
-        </button>
-        <button id="seed-copy-sql" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-          {{{icon "copy" class="h-3.5 w-3.5"}}}
-          Copy SQL
-        </button>
-        <button id="seed-download-sql" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-          {{{icon "export" class="h-3.5 w-3.5"}}}
-          Download .sql
-        </button>
+      <div id="seed-truncate-banner" class="hidden p-3 rounded-lg bg-error/10 border border-error/20 flex items-center gap-2.5">
+        <span class="text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
+        <p class="text-xs font-bold text-error">
+          Destructive Action: Existing table rows will be truncated before seeding.
+        </p>
       </div>
-    </div>
-    <div id="seed-table-view-container" class="overflow-x-auto max-h-[32rem]">
-      <table class="table table-sm table-pin-rows table-zebra w-full text-xs">
-        <thead id="seed-preview-thead" class="bg-base-200 font-mono text-[11px] text-base-content/70"></thead>
-        <tbody id="seed-preview-tbody"></tbody>
-      </table>
-    </div>
-    <div id="seed-sql-view-container" class="hidden p-4">
-      <pre class="code-panel max-h-[32rem] overflow-auto"><code id="seed-sql-code"></code></pre>
+      <div id="seed-execute-bar" class="hidden"></div>
+      <div id="seed-feedback" class="hidden"></div>
     </div>
   </div>
 </div>
-<dialog id="seed-config-dialog" class="modal">
-  <div class="modal-box app-card max-w-lg">
-    <h3 id="seed-config-dialog-title" class="text-base font-bold">Seed Plan Configuration</h3>
-    <p class="mt-1 text-xs text-base-content/60">Export or paste a JSON configuration for column generator settings.</p>
-    <textarea id="seed-config-textarea" rows="12" class="field-input mt-3 w-full font-mono text-xs" spellcheck="false"></textarea>
-    <div class="mt-4 flex justify-end gap-2">
-      <button id="seed-config-dialog-cancel" type="button" class="btn btn-ghost btn-sm">Close</button>
-      <button id="seed-config-dialog-apply" type="button" class="btn btn-primary btn-sm">Apply Configuration</button>
+<dialog id="seed-profiles-dialog" class="modal">
+  <div class="modal-box p-0 overflow-hidden max-w-lg rounded-2xl border border-base-200 shadow-xl">
+    <div class="px-5 py-4 bg-base-200/50 border-b border-base-200 flex items-center justify-between">
+      <div class="flex items-center gap-2.5">
+        {{{icon "book" class="h-4 w-4 text-primary"}}}
+        <h3 class="font-bold text-sm text-base-content">Seed Profiles & Presets</h3>
+      </div>
+      <button type="button" class="btn btn-xs btn-circle btn-ghost" id="btn-close-profiles">✕</button>
+    </div>
+    <div class="p-5 space-y-4 text-xs">
+      <div>
+        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/50 mb-2">Quick Blueprints</h4>
+        <div class="grid grid-cols-3 gap-2">
+          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="smoke">⚡ Smoke (10)</button>
+          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="realistic">🌱 Standard (100)</button>
+          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="stress">🚀 Stress (1000)</button>
+        </div>
+      </div>
+      <div class="p-3 rounded-lg bg-base-200/40 border border-base-300 space-y-2">
+        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/60">Save Current Configuration</h4>
+        <div class="flex gap-2">
+          <input id="profile-name-input" type="text" placeholder="Profile name (e.g. Test Dataset)"
+            class="field-input flex-1 text-xs !py-1 font-medium" />
+          <button type="button" id="btn-save-profile" class="btn btn-xs btn-primary px-3 font-bold">Save</button>
+        </div>
+      </div>
+      <div>
+        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/50 mb-1.5">Saved Profiles</h4>
+        <div id="profiles-list-container" class="space-y-1.5 max-h-48 overflow-y-auto pr-1">
+          <div class="py-4 text-center text-xs text-base-content/40">No saved profiles yet.</div>
+        </div>
+      </div>
     </div>
   </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+  <form method="dialog" class="modal-backdrop bg-base-300/60 backdrop-blur-sm"><button>close</button></form>
 </dialog>
 <dialog id="seed-truncate-dialog" class="modal">
-  <div class="modal-box app-card max-w-md border border-error/30">
-    <div class="flex items-center gap-3 text-error">
-      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-error/10">
-        {{{icon "warning" class="h-6 w-6"}}}
-      </span>
-      <div>
-        <h3 class="text-base font-bold text-base-content">Clear table before inserting?</h3>
-        <p class="text-xs text-error font-medium">All existing rows in "{{table}}" will be permanently deleted.</p>
-      </div>
+  <div class="modal-box p-0 overflow-hidden max-w-md rounded-2xl border border-error/20 shadow-xl">
+    <div class="px-5 py-4 bg-error/5 border-b border-error/15 flex items-center gap-2.5">
+      <span class="text-error">{{{icon "warning" class="h-5 w-5"}}}</span>
+      <h3 class="font-bold text-sm text-error">Confirm Truncate Action</h3>
     </div>
-    <p class="mt-3 text-xs text-base-content/60 leading-relaxed">
-      This will execute <code>DELETE FROM "{{table}}"</code> before inserting the newly generated seed rows. This action cannot be undone.
-    </p>
-    <div class="mt-5 flex justify-end gap-2">
-      <button id="seed-truncate-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
-      <button id="seed-truncate-confirm" type="button" class="btn btn-error btn-sm">Yes, Clear & Insert</button>
+    <div class="p-5 space-y-3 text-xs text-base-content/80 leading-relaxed">
+      <p>
+        You have enabled <strong class="text-error">Clear tables before inserting</strong>. All existing records in affected tables will be permanently deleted in reverse topological order before new rows are inserted.
+      </p>
+    </div>
+    <div class="px-5 pb-4 flex items-center justify-end gap-2">
+      <button type="button" class="btn btn-ghost btn-xs" id="seed-truncate-cancel">Cancel</button>
+      <button type="button" class="btn btn-error btn-xs font-bold gap-1.5" id="seed-truncate-confirm">
+        {{{icon "warning" class="h-3.5 w-3.5"}}}
+        <span>Yes, Truncate & Seed</span>
+      </button>
     </div>
   </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+  <form method="dialog" class="modal-backdrop bg-base-300/60 backdrop-blur-sm"><button>close</button></form>
 </dialog>
 <script id="seed-config" type="application/json">{{{json seedConfig}}}</script>
 <script src="{{basePath}}/js/seed.js" defer></script>