admindb 2.2.1 → 2.3.0

package/dist/views/pages/seed.hbs

@@ -1,465 +1,307 @@
-<div class="max-w-5xl mx-auto space-y-8 pb-24">
-  <div class="flex items-center gap-4">
-    <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost bg-base-200 hover:bg-base-300 transition-colors">
-      {{{icon "arrowLeft" class="h-5 w-5"}}}
-    </a>
-    <div class="flex-1 min-w-0">
-      <div class="flex items-center gap-3 flex-wrap">
-        <div class="p-2 rounded-xl bg-gradient-to-br from-primary/20 to-secondary/20 text-primary shadow-soft">
-          {{{icon "seed" class="h-6 w-6"}}}
-        </div>
-        <div>
-          <h1 class="text-2xl font-bold font-mono tracking-tight">Seed Generator <span class="text-primary">{{table}}</span></h1>
-          <p class="text-sm text-base-content/50 mt-0.5">Generate realistic mock data in three easy steps.</p>
+<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 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>
+        {{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>
-  <div class="app-card p-4">
-    <div class="flex items-center justify-between relative">
-      <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-0.5 bg-base-300 mx-16 z-0">
-        <div id="wizard-progress-bar" class="h-full bg-gradient-to-r from-primary to-secondary transition-all duration-500 ease-out" style="width: 0%"></div>
-      </div>
-      <div id="step-nav-1" class="seed-step relative z-10 flex flex-col items-center gap-2 cursor-pointer group">
-        <div class="seed-step-circle w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300 bg-primary border-primary text-primary-content shadow-[0_0_12px_rgba(109,93,246,0.4)]">
-          <span class="seed-step-num">1</span>
-          <span class="seed-step-check hidden">{{{icon "check" class="h-4 w-4"}}}</span>
-        </div>
-        <span class="text-xs font-semibold text-primary">Choose Mode</span>
+    <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>
       </div>
-      <div id="step-nav-2" class="seed-step relative z-10 flex flex-col items-center gap-2 cursor-pointer group">
-        <div class="seed-step-circle w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300 bg-base-200 border-base-300 text-base-content/40">
-          <span class="seed-step-num">2</span>
-          <span class="seed-step-check hidden">{{{icon "check" class="h-4 w-4"}}}</span>
+      <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>
-        <span class="text-xs font-semibold text-base-content/40">Configure</span>
+        <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 id="step-nav-3" class="seed-step relative z-10 flex flex-col items-center gap-2 cursor-pointer group">
-        <div class="seed-step-circle w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300 bg-base-200 border-base-300 text-base-content/40">
-          <span class="seed-step-num">3</span>
-          <span class="seed-step-check hidden">{{{icon "check" class="h-4 w-4"}}}</span>
-        </div>
-        <span class="text-xs font-semibold text-base-content/40">Preview & Run</span>
+      <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>
+        <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 id="step-content-1" class="space-y-6">
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <button id="btn-select-single" class="seed-mode-card app-card p-6 text-left group transition-all duration-200 border-2 border-transparent hover:border-primary/40 hover:-translate-y-0.5">
-        <div class="flex items-start gap-4 mb-5">
-          <div class="relative shrink-0">
-            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center text-primary group-hover:scale-110 transition-transform duration-200 shadow-soft">
-              {{{icon "table" class="h-7 w-7"}}}
+  <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="min-w-0">
-            <h3 class="text-lg font-bold leading-tight">Single Table</h3>
-            <p class="text-xs text-base-content/50 mt-1">Generate data for this table only</p>
-          </div>
-          <div class="ml-auto shrink-0 w-5 h-5 rounded-full border-2 border-base-300 transition-all duration-200 seed-mode-radio flex items-center justify-center">
-            <div class="w-2.5 h-2.5 rounded-full bg-primary scale-0 transition-transform duration-200 seed-mode-dot"></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>
-        <p class="text-sm text-base-content/60 leading-relaxed mb-5">
-          Manually control mock values for each column with full strategy control.
-        </p>
-        <ul class="space-y-1.5">
-          <li class="flex items-center gap-2 text-xs text-base-content/60">
-            <span class="w-4 h-4 rounded-full bg-success/15 text-success flex items-center justify-center shrink-0">{{{icon "check" class="h-2.5 w-2.5"}}}</span>
-            Manual column strategies (fixed, list, pattern, etc.)
-          </li>
-          <li class="flex items-center gap-2 text-xs text-base-content/60">
-            <span class="w-4 h-4 rounded-full bg-success/15 text-success flex items-center justify-center shrink-0">{{{icon "check" class="h-2.5 w-2.5"}}}</span>
-            Live sample value preview per column
-          </li>
-          <li class="flex items-center gap-2 text-xs text-base-content/60">
-            <span class="w-4 h-4 rounded-full bg-success/15 text-success flex items-center justify-center shrink-0">{{{icon "check" class="h-2.5 w-2.5"}}}</span>
-            Up to 5,000 rows in one pass
-          </li>
-        </ul>
-      </button>
-      <button id="btn-select-chain" class="seed-mode-card app-card p-6 text-left group transition-all duration-200 border-2 border-transparent hover:border-secondary/40 hover:-translate-y-0.5">
-        <div class="flex items-start gap-4 mb-5">
-          <div class="relative shrink-0">
-            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-secondary/20 to-secondary/5 flex items-center justify-center text-secondary group-hover:scale-110 transition-transform duration-200 shadow-soft">
-              {{{icon "diagram" class="h-7 w-7"}}}
-            </div>
-          </div>
-          <div class="min-w-0">
-            <h3 class="text-lg font-bold leading-tight">ER Relational Chain</h3>
-            <p class="text-xs text-base-content/50 mt-1">Synchronized relational seeding</p>
+        <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 class="ml-auto shrink-0 w-5 h-5 rounded-full border-2 border-base-300 transition-all duration-200 seed-mode-radio flex items-center justify-center">
-            <div class="w-2.5 h-2.5 rounded-full bg-secondary scale-0 transition-transform duration-200 seed-mode-dot"></div>
+          <div id="seed-columns" class="space-y-2.5">
           </div>
         </div>
-        <p class="text-sm text-base-content/60 leading-relaxed mb-5">
-          Builds a dependency graph and inserts parent records before children to prevent FK errors.
-        </p>
-        <ul class="space-y-1.5">
-          <li class="flex items-center gap-2 text-xs text-base-content/60">
-            <span class="w-4 h-4 rounded-full bg-success/15 text-success flex items-center justify-center shrink-0">{{{icon "check" class="h-2.5 w-2.5"}}}</span>
-            Auto FK dependency resolution
-          </li>
-          <li class="flex items-center gap-2 text-xs text-base-content/60">
-            <span class="w-4 h-4 rounded-full bg-success/15 text-success flex items-center justify-center shrink-0">{{{icon "check" class="h-2.5 w-2.5"}}}</span>
-            Topologically-ordered execution pipeline
-          </li>
-          <li class="flex items-center gap-2 text-xs text-base-content/60">
-            <span class="w-4 h-4 rounded-full bg-success/15 text-success flex items-center justify-center shrink-0">{{{icon "check" class="h-2.5 w-2.5"}}}</span>
-            Configurable per-table row counts
-          </li>
-        </ul>
-      </button>
-    </div>
-    <div class="flex justify-end pt-2">
-      <button id="btn-next-1" class="btn btn-primary gap-2 px-8 transition-all duration-200" disabled>
-        Next Step
-        {{{icon "arrowRight" class="h-4 w-4"}}}
-      </button>
-    </div>
-  </div>
-  <div id="step-content-2" class="hidden space-y-6">
-    <div id="config-single" class="hidden space-y-5">
-      <div class="app-card p-5">
-        <div class="flex flex-wrap gap-6 items-end justify-between">
-          <div class="flex items-end gap-4">
-            <div>
-              <label class="block text-xs font-bold uppercase tracking-wider text-base-content/50 mb-2">Rows to Generate</label>
-              <div class="flex items-center gap-0">
-                <button type="button" id="seed-count-dec" class="btn btn-sm btn-outline rounded-r-none border-r-0 px-3 font-mono text-lg leading-none hover:bg-primary hover:text-primary-content hover:border-primary transition-colors">−</button>
-                <input id="seed-count" type="number" value="10" min="1" max="5000"
-                  class="field-input !rounded-none border-x-0 !py-1.5 font-mono w-24 font-bold text-lg 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-sm btn-outline rounded-l-none border-l-0 px-3 font-mono text-lg leading-none hover:bg-primary hover:text-primary-content hover:border-primary transition-colors">+</button>
-              </div>
-            </div>
+      </div>
+      <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-end gap-3">
-            <div>
-              <span class="block text-xs font-bold uppercase tracking-wider text-base-content/50 mb-2">Quick Presets</span>
-              <div class="flex gap-2">
-                <button type="button" class="preset-pill btn btn-sm btn-outline rounded-full gap-1.5" id="preset-realistic" data-count="50">
-                  <span class="w-1.5 h-1.5 rounded-full bg-success"></span>
-                  Realistic
-                </button>
-                <button type="button" class="preset-pill btn btn-sm btn-outline rounded-full gap-1.5" id="preset-minimal" data-count="5">
-                  <span class="w-1.5 h-1.5 rounded-full bg-info"></span>
-                  Minimal
-                </button>
-              </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>
-      <div class="app-card p-6">
-        <div class="flex items-center justify-between mb-5">
-          <h3 class="text-base font-bold">Column Strategies</h3>
-          <span class="badge badge-ghost text-xs">Configure per column</span>
-        </div>
-        <div id="seed-columns" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <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>
+      <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>
+          <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 id="config-chain" class="hidden space-y-5">
-      <div class="app-card p-5">
-        <div class="flex flex-wrap gap-6 items-end justify-between">
-          <div>
-            <label class="block text-xs font-bold uppercase tracking-wider text-base-content/50 mb-2">Scope</label>
-            <select id="chain-scope" class="field-select !py-1.5 w-64 font-medium">
-              <option value="chain">Full Connected Chain</option>
-              <option value="ancestors">Parents Only</option>
-              <option value="descendants">Children Only</option>
-            </select>
+    <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>
-          <div>
-            <span class="block text-xs font-bold uppercase tracking-wider text-base-content/50 mb-2">Scale Multiplier</span>
-            <div class="join shadow-soft">
-              <button type="button" class="chain-scale-btn btn btn-sm join-item font-mono" data-scale="0.5">0.5×</button>
-              <button type="button" class="chain-scale-btn btn btn-sm join-item btn-neutral font-mono" data-scale="1">1×</button>
-              <button type="button" class="chain-scale-btn btn btn-sm join-item font-mono" data-scale="2">2×</button>
-            </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 class="app-card p-6">
-        <div class="flex items-center justify-between mb-5 pb-4 border-b border-base-200">
-          <div>
-            <h3 class="text-base font-bold">Execution Pipeline</h3>
-            <p class="text-xs text-base-content/50 mt-0.5">Tables are inserted in topological order</p>
+      <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>
-          <div class="flex items-center gap-2">
-            <div class="w-2 h-2 rounded-full bg-success animate-pulse"></div>
-            <span id="chain-summary-badge" class="badge badge-primary font-bold">0 Tables</span>
+          <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>
+        <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="chain-pipeline-container" class="space-y-3">
+        <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>
-    <div class="flex justify-between pt-2">
-      <button id="btn-prev-2" type="button" class="btn btn-ghost gap-2 px-6">
-        {{{icon "arrowLeft" class="h-4 w-4"}}}
-        Back
-      </button>
-      <button id="btn-next-2" type="button" class="btn btn-primary gap-2 px-8">
-        Preview Data
-        {{{icon "arrowRight" class="h-4 w-4"}}}
-      </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 id="seed-execute-bar" class="hidden"></div>
+      <div id="seed-feedback" class="hidden"></div>
     </div>
   </div>
-  <div id="step-content-3" class="hidden space-y-5">
-    <div class="app-card overflow-hidden">
-      <div class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-base-200">
-        <div>
-          <h3 class="text-base font-bold">Data Preview</h3>
-          <p class="text-xs text-base-content/50 mt-0.5">Sample of what will be inserted</p>
-        </div>
-        <button id="seed-refresh-preview" type="button" class="btn btn-sm btn-ghost gap-1.5 hover:bg-primary/10 hover:text-primary transition-colors">
-          {{{icon "refresh" class="h-4 w-4"}}}
-          Regenerate
-        </button>
-      </div>
-      <div class="w-full overflow-x-auto border-b border-base-200 bg-base-200/30">
-        <div id="seed-chain-table-tabs" class="tabs tabs-bordered flex-nowrap w-max min-w-full hidden px-4"></div>
-      </div>
-      <div class="px-4 pt-3 pb-1 flex items-center justify-between">
-        <span id="seed-row-count-badge" class="text-xs text-base-content/40 font-mono"></span>
-      </div>
-      <div class="overflow-x-auto max-h-[460px] shadow-inner">
-        <table class="table table-zebra table-pin-rows table-sm w-full">
-          <thead id="seed-preview-thead" class="bg-base-200/80 text-[10px] uppercase tracking-widest font-bold text-base-content/60 backdrop-blur sticky top-0 z-10"></thead>
-          <tbody id="seed-preview-tbody" class="font-mono text-[11px] leading-relaxed">
-            <tr>
-              <td colspan="100" class="text-center py-16 opacity-40">
-                <div class="flex flex-col items-center gap-3">
-                  <span class="loading loading-spinner loading-md"></span>
-                  <span class="text-xs">Generating preview…</span>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+</div>
+<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 id="seed-execute-bar" class="app-card overflow-hidden transition-all duration-300">
-      <div id="seed-truncate-banner" class="hidden px-6 py-3 bg-error/10 border-b border-error/20 flex items-center gap-3">
-        <span class="text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
-        <p class="text-xs font-semibold text-error/80">
-          <strong>Destructive action:</strong> Existing rows will be permanently deleted before new data is inserted.
-        </p>
+    <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="flex flex-wrap items-center justify-between gap-4 p-5">
-        <button id="btn-prev-3" type="button" class="btn btn-ghost gap-2 px-5">
-          {{{icon "arrowLeft" class="h-4 w-4"}}}
-          Back to Config
-        </button>
-        <div class="flex items-center gap-5">
-          <label class="cursor-pointer flex items-center gap-2.5 group select-none" for="seed-truncate">
-            <input id="seed-truncate" type="checkbox" class="checkbox checkbox-error checkbox-sm" />
-            <span class="text-sm font-semibold text-base-content/70 group-hover:text-error transition-colors">
-              Clear tables first
-            </span>
-          </label>
-          <button id="seed-insert" type="button"
-            class="btn btn-primary btn-lg gap-2 px-10 shadow-lg hover:shadow-primary/30 hover:shadow-xl transition-all duration-200 hover:scale-[1.02] active:scale-100">
-            {{{icon "play" class="h-5 w-5"}}}
-            Execute Seed
-          </button>
+      <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 id="seed-feedback" class="hidden"></div>
   </div>
-</div>
+  <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 p-0 overflow-hidden max-w-md">
-    <div class="px-6 pt-6 pb-4 bg-error/5 border-b border-error/15">
-      <div class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-xl bg-error/15 flex items-center justify-center text-error shrink-0">
-          {{{icon "warning" class="h-5 w-5"}}}
-        </div>
-        <div>
-          <h3 class="font-bold text-lg text-error leading-tight">Confirm Destructive Action</h3>
-          <p class="text-xs text-base-content/50 mt-0.5">This operation cannot be undone</p>
-        </div>
-      </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>
-    <div class="px-6 py-5 space-y-4">
-      <p class="text-sm text-base-content/80 leading-relaxed">
-        You have selected to <strong class="text-error">clear the tables</strong> before generating mock data.
-        This will <strong>permanently delete all existing rows</strong> in the affected tables.
+    <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 class="rounded-xl bg-base-200 border border-base-300 p-4">
-        <p class="text-xs font-bold uppercase tracking-wider text-base-content/40 mb-2">What will happen</p>
-        <ul class="space-y-1.5">
-          <li class="flex items-center gap-2 text-xs text-base-content/70">
-            <span class="text-error">{{{icon "warning" class="h-3.5 w-3.5"}}}</span>
-            All existing rows will be truncated
-          </li>
-          <li class="flex items-center gap-2 text-xs text-base-content/70">
-            <span class="text-primary">{{{icon "play" class="h-3.5 w-3.5"}}}</span>
-            New mock data will be inserted
-          </li>
-          <li class="flex items-center gap-2 text-xs text-base-content/70">
-            <span class="text-error">{{{icon "warning" class="h-3.5 w-3.5"}}}</span>
-            This action is irreversible
-          </li>
-        </ul>
-      </div>
     </div>
-    <div class="px-6 pb-6 flex items-center justify-end gap-3">
-      <button type="button" class="btn btn-ghost" id="seed-truncate-cancel">Cancel</button>
-      <button type="button" class="btn btn-error gap-2" id="seed-truncate-confirm">
-        {{{icon "warning" class="h-4 w-4"}}}
-        Yes, Delete & Seed
+    <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 bg-base-300/80 backdrop-blur-sm"><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>
-<script>
-(function () {
-  document.addEventListener('DOMContentLoaded', function () {
-    // +/- count buttons
-    var countInput = document.getElementById('seed-count');
-    var decBtn = document.getElementById('seed-count-dec');
-    var incBtn = document.getElementById('seed-count-inc');
-    if (decBtn && incBtn && countInput) {
-      decBtn.addEventListener('click', function () {
-        var v = Math.max(1, (parseInt(countInput.value, 10) || 10) - 1);
-        countInput.value = v;
-        countInput.dispatchEvent(new Event('input'));
-      });
-      incBtn.addEventListener('click', function () {
-        var v = Math.min(5000, (parseInt(countInput.value, 10) || 10) + 1);
-        countInput.value = v;
-        countInput.dispatchEvent(new Event('input'));
-      });
-    }
-    // Preset pills: sync count
-    document.querySelectorAll('.preset-pill').forEach(function (pill) {
-      pill.addEventListener('click', function () {
-        document.querySelectorAll('.preset-pill').forEach(function (p) {
-          p.classList.remove('btn-primary', 'btn-secondary');
-          p.classList.add('btn-outline');
-        });
-        pill.classList.remove('btn-outline');
-        pill.classList.add('btn-primary');
-        if (countInput && pill.dataset.count) {
-          countInput.value = pill.dataset.count;
-          countInput.dispatchEvent(new Event('input'));
-        }
-      });
-    });
-    // Truncate checkbox → warning banner toggle
-    var truncateChk = document.getElementById('seed-truncate');
-    var truncateBanner = document.getElementById('seed-truncate-banner');
-    if (truncateChk && truncateBanner) {
-      truncateChk.addEventListener('change', function () {
-        if (truncateChk.checked) {
-          truncateBanner.classList.remove('hidden');
-          truncateBanner.classList.add('flex');
-        } else {
-          truncateBanner.classList.add('hidden');
-          truncateBanner.classList.remove('flex');
-        }
-      });
-    }
-    // Wizard progress bar + step label color sync (mirrors seed.js goToStep)
-    var progressBar = document.getElementById('wizard-progress-bar');
-    var stepNavEls = [
-      document.getElementById('step-nav-1'),
-      document.getElementById('step-nav-2'),
-      document.getElementById('step-nav-3')
-    ];
-    function syncStepStyles(activeStep) {
-      var pct = { 1: '0%', 2: '50%', 3: '100%' };
-      if (progressBar) progressBar.style.width = pct[activeStep] || '0%';
-      stepNavEls.forEach(function (el, i) {
-        if (!el) return;
-        var stepNum = i + 1;
-        var circle = el.querySelector('.seed-step-circle');
-        var numSpan = el.querySelector('.seed-step-num');
-        var checkSpan = el.querySelector('.seed-step-check');
-        var label = el.querySelector('span:last-child');
-        if (stepNum < activeStep) {
-          // Completed
-          circle.className = 'seed-step-circle w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300 bg-success border-success text-success-content';
-          if (numSpan) numSpan.classList.add('hidden');
-          if (checkSpan) checkSpan.classList.remove('hidden');
-          if (label) label.className = 'text-xs font-semibold text-success';
-        } else if (stepNum === activeStep) {
-          // Active
-          circle.className = 'seed-step-circle w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300 bg-primary border-primary text-primary-content shadow-[0_0_12px_rgba(109,93,246,0.4)]';
-          if (numSpan) numSpan.classList.remove('hidden');
-          if (checkSpan) checkSpan.classList.add('hidden');
-          if (label) label.className = 'text-xs font-semibold text-primary';
-        } else {
-          // Inactive
-          circle.className = 'seed-step-circle w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300 bg-base-200 border-base-300 text-base-content/40';
-          if (numSpan) numSpan.classList.remove('hidden');
-          if (checkSpan) checkSpan.classList.add('hidden');
-          if (label) label.className = 'text-xs font-semibold text-base-content/40';
-        }
-      });
-    }
-    // Patch seed.js goToStep to also sync our UI
-    var origGoToStep = window._seedGoToStep;
-    // We'll observe mutation / use a MutationObserver on step content visibility
-    var observer = new MutationObserver(function () {
-      var contents = [
-        document.getElementById('step-content-1'),
-        document.getElementById('step-content-2'),
-        document.getElementById('step-content-3')
-      ];
-      for (var i = 0; i < contents.length; i++) {
-        if (contents[i] && !contents[i].classList.contains('hidden')) {
-          syncStepStyles(i + 1);
-          return;
-        }
-      }
-    });
-    ['step-content-1', 'step-content-2', 'step-content-3'].forEach(function (id) {
-      var el = document.getElementById(id);
-      if (el) observer.observe(el, { attributes: true, attributeFilter: ['class'] });
-    });
-    // Initial sync
-    syncStepStyles(1);
-    // Mode card radio dot sync (complement seed.js selectMode)
-    var btnSingle = document.getElementById('btn-select-single');
-    var btnChain  = document.getElementById('btn-select-chain');
-    function syncModeCards(selected) {
-      [btnSingle, btnChain].forEach(function (btn) {
-        if (!btn) return;
-        var radio = btn.querySelector('.seed-mode-radio');
-        var dot   = btn.querySelector('.seed-mode-dot');
-        var isSelected = btn === selected;
-        if (radio) radio.classList.toggle('border-primary', isSelected && btn === btnSingle);
-        if (radio) radio.classList.toggle('border-secondary', isSelected && btn === btnChain);
-        if (radio) radio.classList.toggle('border-base-300', !isSelected);
-        if (dot) dot.classList.toggle('scale-100', isSelected);
-        if (dot) dot.classList.toggle('scale-0', !isSelected);
-        btn.classList.toggle('seed-mode-card--selected-single', isSelected && btn === btnSingle);
-        btn.classList.toggle('seed-mode-card--selected-chain', isSelected && btn === btnChain);
-      });
-    }
-    if (btnSingle) btnSingle.addEventListener('click', function () { syncModeCards(btnSingle); });
-    if (btnChain)  btnChain.addEventListener('click',  function () { syncModeCards(btnChain); });
-    // Row count badge updater for step 3
-    var origTbody = document.getElementById('seed-preview-tbody');
-    if (origTbody) {
-      var rowObserver = new MutationObserver(function () {
-        var badge = document.getElementById('seed-row-count-badge');
-        if (!badge) return;
-        var rows = origTbody.querySelectorAll('tr');
-        var isPlaceholder = origTbody.querySelector('td[colspan]');
-        if (isPlaceholder) { badge.textContent = ''; return; }
-        badge.textContent = rows.length + ' row' + (rows.length !== 1 ? 's' : '') + ' generated';
-      });
-      rowObserver.observe(origTbody, { childList: true, subtree: true });
-    }
-  });
-})();
-</script>