npm - voyageai-cli - Versions diffs - 1.27.0 → 1.28.0 - Mend

voyageai-cli 1.27.0 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/package.json +1 -1
package/src/commands/config.js +33 -0
package/src/commands/mcp-server.js +4 -1
package/src/commands/playground.js +19 -2
package/src/commands/workflow.js +45 -0
package/src/lib/api.js +40 -2
package/src/lib/workflow.js +98 -2
package/src/mcp/server.js +15 -2
package/src/mcp/sse-transport.js +112 -0
package/src/playground/index.html +1197 -232

package/src/playground/index.html CHANGED Viewed

@@ -992,8 +992,9 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .explore-card-icon {
-  font-size: 28px;
   margin-bottom: 8px;
+  color: var(--accent, #00D4AA);
+  opacity: 0.85;
 }
 .explore-card-title {
   font-size: 16px;
@@ -1056,7 +1057,7 @@ select:focus { outline: none; border-color: var(--accent); }
   padding: 24px 28px 16px;
   border-bottom: 1px solid var(--border);
 }
-.explore-modal-icon { font-size: 32px; }
+.explore-modal-icon { color: var(--accent, #00D4AA); }
 .explore-modal-title {
   font-size: 18px;
   font-weight: 600;
@@ -3030,6 +3031,24 @@ select:focus { outline: none; border-color: var(--accent); }
   font-size: 10px; color: var(--text-muted); margin-top: 4px;
   display: flex; gap: 8px;
 }
+/* Collapsible examples section */
+.wf-library-section { padding: 0; margin-top: 4px; }
+.wf-library-section-toggle {
+  display: flex; align-items: center; gap: 6px;
+  width: 100%; padding: 8px 12px; border: none; background: none;
+  color: var(--text-muted); font-size: 11px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;
+  transition: color 0.15s;
+}
+.wf-library-section-toggle:hover { color: var(--text); }
+.wf-library-section-toggle .arrow {
+  font-size: 8px; transition: transform 0.2s; display: inline-block;
+}
+.wf-library-section-toggle.open .arrow { transform: rotate(90deg); }
+.wf-library-category {
+  font-size: 10px; font-weight: 600; color: var(--text-muted);
+  padding: 8px 12px 2px; text-transform: uppercase; letter-spacing: 0.5px;
+}
 .wf-canvas-area {
   flex: 1; position: relative; overflow: hidden;
   background: var(--bg);
@@ -3060,9 +3079,70 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 .wf-canvas-toolbar .wf-run-btn:hover { opacity: 0.9; }
 .wf-canvas-toolbar .wf-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.wf-canvas-toolbar .wf-new-btn {
+  width: auto; padding: 0 12px; gap: 4px;
+  font-weight: 600; font-size: 12px;
+  background: var(--bg-card); border: 1px solid var(--accent);
+  color: var(--accent);
+}
+.wf-canvas-toolbar .wf-new-btn:hover { background: var(--accent); color: #fff; }
+.wf-canvas-toolbar .wf-edit-btn {
+  width: auto; padding: 0 12px; gap: 4px;
+  font-weight: 600; font-size: 12px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  color: var(--text-muted);
+}
+.wf-canvas-toolbar .wf-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
+.wf-canvas-toolbar .wf-edit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.wf-canvas-toolbar .wf-edit-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }
 .wf-toolbar-sep {
   width: 1px; height: 20px; background: var(--border); margin: 0 2px;
 }
+/* Library / Palette tabs */
+.wf-library-tabs {
+  display: flex; gap: 2px; width: 100%;
+  background: var(--bg-input); border-radius: 6px; padding: 2px;
+}
+.wf-lib-tab {
+  flex: 1; padding: 5px 0; border: none; border-radius: 4px;
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  font-size: 11px; font-weight: 600; font-family: var(--font);
+  transition: background 0.15s, color 0.15s; text-align: center;
+}
+.wf-lib-tab.active { background: var(--accent); color: #fff; }
+.wf-lib-tab:hover:not(.active) { color: var(--text); }
+/* Palette items */
+.wf-palette-category { margin-bottom: 8px; }
+.wf-palette-category-title {
+  font-size: 10px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-muted);
+  padding: 4px 12px; margin-bottom: 2px;
+}
+.wf-palette-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 12px; border-radius: 6px; cursor: grab;
+  font-size: 12px; color: var(--text); transition: background 0.15s;
+}
+.wf-palette-item:hover { background: var(--bg-card); }
+.wf-palette-item:active { cursor: grabbing; }
+.wf-palette-icon { width: 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
+.wf-palette-label { font-weight: 500; }
+/* Builder port styles */
+.wf-port-builder { cursor: crosshair; transition: r 0.15s; pointer-events: all !important; }
+.wf-port-builder:hover { r: 9; filter: brightness(1.4); }
+.wf-inspector-delete-btn {
+  width: 100%; padding: 8px 0; border: none; border-radius: 6px;
+  background: var(--error); color: #fff; cursor: pointer;
+  font-size: 12px; font-weight: 600; margin-top: 12px;
+  transition: opacity 0.15s;
+}
+.wf-inspector-delete-btn:hover { opacity: 0.85; }
+.wf-validation-errors {
+  background: rgba(255,105,96,0.08); border: 1px solid var(--error);
+  border-radius: 6px; padding: 10px 12px; margin-bottom: 12px;
+  font-size: 11px; color: var(--error);
+}
+.wf-validation-errors ul { margin: 4px 0 0 16px; }
 /* Dry-run plan overlay */
 .wf-dryrun-overlay {
   position: absolute; top: 0; left: 0; right: 0; bottom: 0;
@@ -3107,7 +3187,7 @@ select:focus { outline: none; border-color: var(--accent); }
   background: var(--bg-card); border: 1px solid var(--border);
   display: flex; align-items: center; gap: 10px; font-size: 12px;
 }
-.wf-dryrun-step-icon { font-size: 16px; flex-shrink: 0; }
+.wf-dryrun-step-icon { flex-shrink: 0; display: flex; align-items: center; }
 .wf-dryrun-step-info { flex: 1; min-width: 0; }
 .wf-dryrun-step-name { font-weight: 600; color: var(--text); }
 .wf-dryrun-step-tool { color: var(--text-muted); font-size: 11px; }
@@ -3195,8 +3275,61 @@ select:focus { outline: none; border-color: var(--accent); }
   transition: color 0.15s, border-color 0.15s;
 }
 .wf-output-expand-btn:hover { color: var(--text); border-color: var(--text-muted); }
+/* Input modal (pre-execution) */
+.wf-input-modal-backdrop {
+  position: fixed; inset: 0; z-index: 9999;
+  background: rgba(0,0,0,0.55); display: flex;
+  align-items: center; justify-content: center;
+}
+.wf-input-modal {
+  background: var(--bg-surface, var(--bg)); border: 1px solid var(--border);
+  border-radius: 10px; width: 440px; max-width: 90vw;
+  max-height: 80vh; display: flex; flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+}
+.wf-input-modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 20px; border-bottom: 1px solid var(--border);
+}
+.wf-input-modal-title { font-weight: 700; font-size: 14px; color: var(--text); }
+.wf-input-modal-body {
+  flex: 1; overflow-y: auto; padding: 16px 20px;
+}
+.wf-input-modal-field { margin-bottom: 14px; }
+.wf-input-modal-label {
+  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px;
+}
+.wf-input-modal-desc {
+  font-size: 11px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.3;
+}
+.wf-input-modal-input {
+  width: 100%; box-sizing: border-box; padding: 6px 10px;
+  border: 1px solid var(--border); border-radius: 6px;
+  background: var(--bg); color: var(--text); font-size: 13px;
+  font-family: inherit; outline: none;
+  transition: border-color 0.15s;
+}
+.wf-input-modal-input:focus { border-color: var(--accent, #6c63ff); }
+.wf-input-modal-input.error { border-color: #e74c3c; }
+.wf-input-modal-error { font-size: 11px; color: #e74c3c; margin-top: 3px; display: none; }
+.wf-input-modal-footer {
+  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
+  padding: 12px 20px; border-top: 1px solid var(--border);
+}
+.wf-input-modal-cancel {
+  padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px;
+  background: transparent; color: var(--text); font-size: 12px; cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.wf-input-modal-cancel:hover { background: var(--bg); border-color: var(--text-muted); }
+.wf-input-modal-run {
+  padding: 6px 16px; border: none; border-radius: 6px;
+  background: var(--accent, #6c63ff); color: #fff; font-size: 12px;
+  font-weight: 600; cursor: pointer; transition: filter 0.15s;
+}
+.wf-input-modal-run:hover { filter: brightness(1.15); }
 #wf-canvas {
-  width: 100%; height: 100%; display: block;
+  width: 100%; height: 100%; display: block; position: relative; z-index: 1;
 }
 /* SVG node styles */
 .wf-node { cursor: pointer; }
@@ -3211,8 +3344,8 @@ select:focus { outline: none; border-color: var(--accent); }
   pointer-events: none; text-anchor: middle; dominant-baseline: central;
 }
 .wf-node-icon {
-  font-size: 16px; pointer-events: none;
-  text-anchor: middle; dominant-baseline: central;
+  pointer-events: none;
+  color: #fff;
 }
 .wf-node-badge {
   font-size: 10px; fill: rgba(255,255,255,0.7);
@@ -3374,7 +3507,7 @@ select:focus { outline: none; border-color: var(--accent); }
 }
 /* Workflow visualizer light mode */
 [data-theme="light"] .wf-node-label { fill: #001E2B; }
-[data-theme="light"] .wf-node-icon { fill: #001E2B; }
+[data-theme="light"] .wf-node-icon { color: #001E2B; }
 [data-theme="light"] .wf-node-badge { fill: rgba(0,30,43,0.55); }
 [data-theme="light"] .wf-node-time { fill: rgba(0,30,43,0.5); }
 [data-theme="light"] .wf-node-condition { fill: #944F01; }
@@ -3396,6 +3529,8 @@ select:focus { outline: none; border-color: var(--accent); }
 [data-theme="light"] .wf-exec-status { box-shadow: 0 2px 8px rgba(0,30,43,0.08); }
 [data-theme="light"] .wf-run-btn { background: var(--accent); }
 [data-theme="light"] .wf-output-modal { box-shadow: 0 8px 32px rgba(0,30,43,0.15); }
+[data-theme="light"] .wf-input-modal { box-shadow: 0 8px 32px rgba(0,30,43,0.15); }
+[data-theme="light"] .wf-input-modal-backdrop { background: rgba(0,0,0,0.3); }
 @keyframes wf-pulse-light {
   0%, 100% { filter: drop-shadow(0 0 4px rgba(0,158,128,0.3)); }
   50% { filter: drop-shadow(0 0 12px rgba(0,158,128,0.6)); }
@@ -3406,61 +3541,78 @@ select:focus { outline: none; border-color: var(--accent); }
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
   text-align: center; color: var(--text-muted); pointer-events: none;
 }
-.wf-canvas-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
+.wf-canvas-empty-icon { margin-bottom: 16px; opacity: 0.15; }
+.wf-canvas-empty-icon img { width: 200px; height: 200px; filter: invert(1); }
+[data-theme="light"] .wf-canvas-empty-icon img { filter: none; opacity: 0.1; }
 .wf-canvas-empty-text { font-size: 14px; }
+/* Persistent watermark behind workflows */
+.wf-canvas-watermark {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  pointer-events: none; z-index: 0; opacity: 0.04;
+}
+.wf-canvas-watermark img { width: 300px; height: 300px; filter: invert(1); }
+[data-theme="light"] .wf-canvas-watermark img { filter: none; }
 </style>
 </head>
 <body>
-<!-- LeafyGreen Icon Sprites (mongodb.design) -->
+<!-- Lucide Icons (lucide.dev) — stroke-based, 16×16 -->
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
-  <symbol id="lg-lightning" viewBox="0 0 16 16">
-    <path d="M9.22274 1.99296C9.22274 1.49561 8.56293 1.31233 8.30107 1.73667L4.07384 8.58696C3.87133 8.91513 4.10921 9.33717 4.49748 9.33717H6.77682L6.77682 14.0066C6.77682 14.504 7.43627 14.6879 7.69813 14.2635L11.9262 7.4118C12.1288 7.08363 11.8903 6.66244 11.5021 6.66244H9.22274V1.99296Z" fill="currentColor"/>
+  <!-- Zap (Embed) -->
+  <symbol id="lg-lightning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
   </symbol>
-  <symbol id="lg-arrows" viewBox="0 0 16 16">
-    <path d="M5 8.57279V13.4272C5 13.9565 4.39241 14.2015 4.0721 13.8014L2.12898 11.3742C1.95701 11.1594 1.95701 10.8406 2.12898 10.6258L4.0721 8.19856C4.39241 7.79846 5 8.04351 5 8.57279Z" fill="currentColor"/>
-    <path d="M5 10H12.5C12.7761 10 13 10.2239 13 10.5V11.5C13 11.7761 12.7761 12 12.5 12H5V10Z" fill="currentColor"/>
-    <path d="M11 7.42721V2.57279C11 2.04351 11.6076 1.79846 11.9279 2.19856L13.871 4.62577C14.043 4.84058 14.043 5.15942 13.871 5.37423L11.9279 7.80144C11.6076 8.20154 11 7.95649 11 7.42721Z" fill="currentColor"/>
-    <path d="M3 4.5C3 4.22386 3.22386 4 3.5 4H11V6H3.5C3.22386 6 3 5.77614 3 5.5V4.5Z" fill="currentColor"/>
+  <!-- Arrow Left Right (Compare) -->
+  <symbol id="lg-arrows" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/>
   </symbol>
-  <symbol id="lg-search" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.3234 9.81874C4.07618 11.5715 6.75062 11.8398 8.78588 10.6244L12.93 14.7685C13.4377 15.2762 14.2608 15.2762 14.7685 14.7685C15.2762 14.2608 15.2762 13.4377 14.7685 12.93L10.6244 8.78588C11.8398 6.75062 11.5715 4.07619 9.81873 2.32341C7.74896 0.253628 4.39318 0.253628 2.3234 2.32341C0.253624 4.39319 0.253624 7.74896 2.3234 9.81874ZM7.98026 4.16188C9.03467 5.2163 9.03467 6.92585 7.98026 7.98026C6.92584 9.03468 5.2163 9.03468 4.16188 7.98026C3.10746 6.92585 3.10746 5.2163 4.16188 4.16188C5.2163 3.10747 6.92584 3.10747 7.98026 4.16188Z" fill="currentColor"/>
+  <!-- Search -->
+  <symbol id="lg-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
   </symbol>
-  <symbol id="lg-gauge" viewBox="0 0 16 16">
-    <path d="M1.041 10.2514C0.996713 10.6632 1.33666 11 1.75088 11H4.2449C4.65912 11 4.98569 10.6591 5.08798 10.2577C5.22027 9.73864 5.49013 9.25966 5.87533 8.87446C6.43906 8.31073 7.20364 7.99403 8.00088 7.99403C8.27011 7.99403 8.53562 8.03015 8.79093 8.0997L11.7818 5.10887C10.6623 4.39046 9.35172 4 8.00088 4C6.14436 4 4.36388 4.7375 3.05113 6.05025C1.91604 7.18534 1.21104 8.67012 1.041 10.2514Z" fill="currentColor"/>
-    <path d="M13.2967 6.42237L10.455 9.26409C10.6678 9.56493 10.8231 9.90191 10.9138 10.2577C11.0161 10.6591 11.3426 11 11.7568 11L14.2509 11C14.6651 11 15.005 10.6632 14.9608 10.2514C14.8087 8.83759 14.229 7.50093 13.2967 6.42237Z" fill="currentColor"/>
+  <!-- Gauge (Benchmark) -->
+  <symbol id="lg-gauge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>
   </symbol>
-  <symbol id="lg-bulb" viewBox="0 0 16 16">
-    <path d="M12.3311 8.5C12.7565 7.76457 13 6.91072 13 6C13 3.23858 10.7614 1 8 1C5.23858 1 3 3.23858 3 6C3 6.94628 3.26287 7.83117 3.71958 8.58561L5.40749 11.501C5.58628 11.8099 5.91607 12 6.27291 12H6.5V6C6.5 5.17157 7.17157 4.5 8 4.5C8.82843 4.5 9.5 5.17157 9.5 6V12H9.72368C10.0793 12 10.4082 11.8111 10.5874 11.5039L12.34 8.5H12.3311Z" fill="currentColor"/>
-    <path d="M7.5 6V12H8.5V6C8.5 5.72386 8.27614 5.5 8 5.5C7.72386 5.5 7.5 5.72386 7.5 6Z" fill="currentColor"/>
-    <path d="M10 14V13H6V14C6 14.5523 6.44772 15 7 15H9C9.55228 15 10 14.5523 10 14Z" fill="currentColor"/>
+  <!-- Lightbulb (Explore) -->
+  <symbol id="lg-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>
   </symbol>
-  <symbol id="lg-info" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z" fill="currentColor"/>
+  <!-- Info (About) -->
+  <symbol id="lg-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>
   </symbol>
-  <symbol id="lg-image" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 3C2 2.44772 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3ZM4 4V9.586L5.793 7.793C6.183 7.403 6.817 7.403 7.207 7.793L8.5 9.086L10.293 7.293C10.683 6.903 11.317 6.903 11.707 7.293L12 7.586V4H4ZM12 10.414L10.5 8.914L8.207 11.207C7.817 11.597 7.183 11.597 6.793 11.207L5.5 9.914L4 11.414V12H12V10.414ZM10 5.5C10 6.328 10.672 7 11.5 7C11.776 7 12 6.776 12 6.5V5C12 4.724 11.776 4.5 11.5 4.5H10.5C10.224 4.5 10 4.724 10 5V5.5Z" fill="currentColor"/>
+  <!-- Image (Multimodal) -->
+  <symbol id="lg-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
   </symbol>
-  <symbol id="lg-config" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.5A.5.5 0 0 1 7 1h2a.5.5 0 0 1 .5.5v1.05a5 5 0 0 1 1.37.57l.74-.74a.5.5 0 0 1 .7 0l1.42 1.42a.5.5 0 0 1 0 .7l-.74.74c.25.43.44.89.57 1.37H14.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1.05a5 5 0 0 1-.57 1.37l.74.74a.5.5 0 0 1 0 .7l-1.42 1.42a.5.5 0 0 1-.7 0l-.74-.74a5 5 0 0 1-1.37.57V14.5a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5v-1.05a5 5 0 0 1-1.37-.57l-.74.74a.5.5 0 0 1-.7 0L2.27 12.2a.5.5 0 0 1 0-.7l.74-.74a5 5 0 0 1-.57-1.37H1.5A.5.5 0 0 1 1 9V7a.5.5 0 0 1 .5-.5h1.05c.13-.48.32-.94.57-1.37l-.74-.74a.5.5 0 0 1 0-.7L3.8 2.27a.5.5 0 0 1 .7 0l.74.74A5 5 0 0 1 6.6 2.44V1.5zM8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="currentColor"/>
+  <!-- Settings (Config) -->
+  <symbol id="lg-config" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>
   </symbol>
-  <symbol id="lg-code" viewBox="0 0 16 16">
-    <path fill="currentColor" d="M5.854 4.146a.5.5 0 0 1 0 .708L2.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm4.292 0a.5.5 0 0 0 0 .708L13.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
+  <!-- Code (Generate) -->
+  <symbol id="lg-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
   </symbol>
-  <symbol id="lg-palette" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C8.55228 15 9 14.5523 9 14V12.5C9 11.6716 9.67157 11 10.5 11H12C13.6569 11 15 9.65685 15 8C15 4.13401 11.866 1 8 1ZM4.5 9C5.32843 9 6 8.32843 6 7.5C6 6.67157 5.32843 6 4.5 6C3.67157 6 3 6.67157 3 7.5C3 8.32843 3.67157 9 4.5 9ZM7 5.5C7 6.32843 6.32843 7 5.5 7C4.67157 7 4 6.32843 4 5.5C4 4.67157 4.67157 4 5.5 4C6.32843 4 7 4.67157 7 5.5ZM9.5 6C10.3284 6 11 5.32843 11 4.5C11 3.67157 10.3284 3 9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6ZM13 7.5C13 8.32843 12.3284 9 11.5 9C10.6716 9 10 8.32843 10 7.5C10 6.67157 10.6716 6 11.5 6C12.3284 6 13 6.67157 13 7.5Z" fill="currentColor"/>
+  <!-- Palette (Theme) -->
+  <symbol id="lg-palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
   </symbol>
-  <symbol id="lg-cube" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 1.18a.75.75 0 0 0-.7 0l-6 3.25A.75.75 0 0 0 1.25 5v6a.75.75 0 0 0 .4.66l6 3.25a.75.75 0 0 0 .7 0l6-3.25a.75.75 0 0 0 .4-.66V5a.75.75 0 0 0-.4-.66l-6-3.16zM8 3.2 3.47 5.65 8 7.82l4.53-2.17L8 3.2zM2.75 6.8v3.82L7.25 12.8V8.97L2.75 6.8zm5.5 6 4.5-2.18V6.8L8.25 8.97V12.8z" fill="currentColor"/>
+  <!-- Box (Cube) -->
+  <symbol id="lg-cube" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
   </symbol>
-  <symbol id="lg-chat" viewBox="0 0 16 16">
-    <path d="M2 2h12v9H5l-3 3V2z" fill="none" stroke="currentColor" stroke-width="1.5"/>
+  <!-- Message Square (Chat) -->
+  <symbol id="lg-chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
   </symbol>
-  <symbol id="lg-shield" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 1.18a.75.75 0 0 0-.7 0l-5 2.7A.75.75 0 0 0 2.25 4.5V8c0 2.9 2.1 5.5 5.5 6.95a.75.75 0 0 0 .5 0C11.65 13.5 13.75 10.9 13.75 8V4.5a.75.75 0 0 0-.4-.62l-5-2.7zM8 3.2 3.75 5.5V8c0 2.2 1.6 4.2 4.25 5.45C10.65 12.2 12.25 10.2 12.25 8V5.5L8 3.2z" fill="currentColor"/>
+  <!-- Shield -->
+  <symbol id="lg-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .5-.87l7-4a1 1 0 0 1 1 0l7 4A1 1 0 0 1 20 6z"/>
   </symbol>
-  <symbol id="lg-pulse" viewBox="0 0 16 16">
-    <path d="M1 8h3l2-5 2 10 2-5h5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Activity (Pulse) -->
+  <symbol id="lg-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36-3.18-19.64A2 2 0 0 0 10.12 1h-.24a2 2 0 0 0-1.94 1.55L5.18 12H2"/>
   </symbol>
 </svg>
@@ -3471,7 +3623,7 @@ select:focus { outline: none; border-color: var(--accent); }
   <div class="sidebar-drag-region">
     <img class="sidebar-logo" id="sidebarLogo" src="/icons/dark/64.png" alt="Vai">
     <span class="sidebar-title">Vai</span>
-    <button class="sidebar-settings-btn" data-tab="settings" title="Settings"><svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-config"/></svg></button>
+    <button class="sidebar-settings-btn" data-tab="settings" title="Settings"><svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-config"/></svg></button>
   </div>
   <nav class="sidebar-nav">
     <div class="sidebar-nav-group" role="tablist" aria-label="Tools">
@@ -3481,8 +3633,8 @@ select:focus { outline: none; border-color: var(--accent); }
       <button class="tab-btn" data-tab="search" role="tab" aria-selected="false" aria-controls="tab-search" id="tab-btn-search"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-search"/></svg></span><span>Search</span></button>
       <button class="tab-btn" data-tab="multimodal" role="tab" aria-selected="false" aria-controls="tab-multimodal" id="tab-btn-multimodal"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-image"/></svg></span><span>Multimodal</span></button>
       <button class="tab-btn" data-tab="generate" role="tab" aria-selected="false" aria-controls="tab-generate" id="tab-btn-generate"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-code"/></svg></span><span>Generate</span></button>
-      <button class="tab-btn" data-tab="chat" role="tab" aria-selected="false" aria-controls="tab-chat" id="tab-btn-chat"><span class="tab-btn-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 2h12v9H5l-3 3V2z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span><span>Chat</span></button>
-      <button class="tab-btn" data-tab="workflows" role="tab" aria-selected="false" aria-controls="tab-workflows" id="tab-btn-workflows"><span class="tab-btn-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="3" cy="8" r="2" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="4" r="2" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="13" cy="12" r="2" fill="none" stroke="currentColor" stroke-width="1.3"/><line x1="5" y1="7" x2="11" y2="4.5" stroke="currentColor" stroke-width="1.3"/><line x1="5" y1="9" x2="11" y2="11.5" stroke="currentColor" stroke-width="1.3"/></svg></span><span>Workflows</span></button>
+      <button class="tab-btn" data-tab="chat" role="tab" aria-selected="false" aria-controls="tab-chat" id="tab-btn-chat"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-chat"/></svg></span><span>Chat</span></button>
+      <button class="tab-btn" data-tab="workflows" role="tab" aria-selected="false" aria-controls="tab-workflows" id="tab-btn-workflows"><span class="tab-btn-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="3"/><circle cx="19" cy="6" r="3"/><circle cx="19" cy="18" r="3"/><line x1="7.7" y1="10.7" x2="16.3" y2="7.3"/><line x1="7.7" y1="13.3" x2="16.3" y2="16.7"/></svg></span><span>Workflows</span></button>
     </div>
     <div class="sidebar-nav-divider"></div>
     <div class="sidebar-nav-group" role="tablist" aria-label="Learn">
@@ -3581,7 +3733,7 @@ select:focus { outline: none; border-color: var(--accent); }
         <option value="ubinary">ubinary (32× smaller)</option>
       </select>
     </div>
-    <button class="btn" id="embedBtn" onclick="doEmbed()">⚡ Embed</button>
+    <button class="btn" id="embedBtn" onclick="doEmbed()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Embed</button>
   </div>
   <div class="error-msg" id="embedError"></div>
@@ -3592,7 +3744,7 @@ select:focus { outline: none; border-color: var(--accent); }
       <div id="embedStats"></div>
       <div class="vector-preview" id="embedVector"></div>
       <div style="margin-top:8px;">
-        <button class="btn btn-secondary btn-small" onclick="copyVector()">📋 Copy Full Vector</button>
+        <button class="btn btn-secondary btn-small" onclick="copyVector()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M9 9V6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-3M3 15a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/></svg>Copy Full Vector</button>
       </div>
       <div class="card-title" style="margin-top:16px;">Vector Heatmap</div>
       <div class="heatmap" id="embedHeatmap"></div>
@@ -3634,7 +3786,7 @@ select:focus { outline: none; border-color: var(--accent); }
         <option value="2048">2048</option>
       </select>
     </div>
-    <button class="btn" id="compareBtn" onclick="doCompare()">⚖️ Compare</button>
+    <button class="btn" id="compareBtn" onclick="doCompare()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4"/></svg>Compare</button>
   </div>
   <div class="error-msg" id="compareError"></div>
@@ -3696,8 +3848,8 @@ Semantic search understands meaning beyond keyword matching</textarea>
         <option value="10">10</option>
       </select>
     </div>
-    <button class="btn" id="searchBtn" onclick="doSearch(false)">🔍 Search</button>
-    <button class="btn btn-secondary" id="searchRerankBtn" onclick="doSearch(true)">🔍+ Rerank</button>
+    <button class="btn" id="searchBtn" onclick="doSearch(false)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/></svg>Search</button>
+    <button class="btn btn-secondary" id="searchRerankBtn" onclick="doSearch(true)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M3 6h18M7 12h10M10 18h4"/></svg>Rerank</button>
   </div>
   <div class="error-msg" id="searchError"></div>
@@ -3756,7 +3908,7 @@ Semantic search understands meaning beyond keyword matching</textarea>
         <option value="2048">2048</option>
       </select>
     </div>
-    <button class="btn" id="mmCompareBtn" onclick="doMultimodalCompare()">🔮 Compare</button>
+    <button class="btn" id="mmCompareBtn" onclick="doMultimodalCompare()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4"/></svg>Compare</button>
   </div>
   <div class="error-msg" id="mmError"></div>
@@ -3794,20 +3946,20 @@ Semantic search understands meaning beyond keyword matching</textarea>
     <div class="card" style="margin-top:12px;">
       <div class="card-title">Search Query</div>
       <div class="mm-search-mode" id="mmSearchMode">
-        <button class="active" data-mode="text" onclick="setMmSearchMode('text')">📝 Text Query</button>
-        <button data-mode="image" onclick="setMmSearchMode('image')">🖼️ Image Query</button>
+        <button class="active" data-mode="text" onclick="setMmSearchMode('text')"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M17 6.1H3M21 12.1H3M15.1 18H3"/></svg>Text Query</button>
+        <button data-mode="image" onclick="setMmSearchMode('image')"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>Image Query</button>
       </div>
       <div id="mmSearchTextWrap">
         <div class="mm-search-row">
           <input type="text" id="mmSearchQuery" placeholder="Enter a search query...">
-          <button class="btn" id="mmSearchBtn" onclick="doMultimodalSearch()">🔮 Search Corpus</button>
+          <button class="btn" id="mmSearchBtn" onclick="doMultimodalSearch()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/></svg>Search Corpus</button>
         </div>
       </div>
       <div id="mmSearchImageWrap" style="display:none;">
         <p style="font-size:13px;color:var(--text-dim);margin-bottom:8px;">Click an image in the corpus above to use it as the search query, then:</p>
         <div style="display:flex;gap:8px;align-items:center;">
           <span id="mmSearchImageLabel" style="font-size:13px;color:var(--text-muted);">No image selected</span>
-          <button class="btn" id="mmSearchImgBtn" onclick="doMultimodalSearch()">🔮 Search Corpus</button>
+          <button class="btn" id="mmSearchImgBtn" onclick="doMultimodalSearch()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/></svg>Search Corpus</button>
         </div>
       </div>
     </div>
@@ -3834,12 +3986,12 @@ Semantic search understands meaning beyond keyword matching</textarea>
   <!-- Sub-panel switcher -->
   <div class="bench-panels">
-    <button class="bench-panel-btn active" data-bench="latency">⚡ Latency</button>
-    <button class="bench-panel-btn" data-bench="ranking">🏆 Ranking</button>
-    <button class="bench-panel-btn" data-bench="competitors">⚔️ vs Competitors</button>
-    <button class="bench-panel-btn" data-bench="quantization">⚗️ Quantization</button>
-    <button class="bench-panel-btn" data-bench="cost">💰 Cost</button>
-    <button class="bench-panel-btn" data-bench="history">📊 History</button>
+    <button class="bench-panel-btn active" data-bench="latency"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Latency</button>
+    <button class="bench-panel-btn" data-bench="ranking"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>Ranking</button>
+    <button class="bench-panel-btn" data-bench="competitors"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M16 3h5v5M8 3H3v5M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3M21 3l-7.828 7.828A4 4 0 0 0 12 13.7V22"/></svg>vs Competitors</button>
+    <button class="bench-panel-btn" data-bench="quantization"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10"/></svg>Quantization</button>
+    <button class="bench-panel-btn" data-bench="cost"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Cost</button>
+    <button class="bench-panel-btn" data-bench="history"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>History</button>
   </div>
   <!-- ── Latency Panel ── -->
@@ -3861,7 +4013,7 @@ Semantic search understands meaning beyond keyword matching</textarea>
             <option value="10">10</option>
           </select>
         </div>
-        <button class="btn" id="benchLatencyBtn" onclick="doBenchLatency()">⚡ Run Benchmark</button>
+        <button class="btn" id="benchLatencyBtn" onclick="doBenchLatency()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Run Benchmark</button>
       </div>
     </div>
@@ -3915,7 +4067,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
             <option value="8">8</option>
           </select>
         </div>
-        <button class="btn" id="benchRankBtn" onclick="doBenchRanking()">🏆 Compare Rankings</button>
+        <button class="btn" id="benchRankBtn" onclick="doBenchRanking()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>Compare Rankings</button>
       </div>
     </div>
@@ -3991,7 +4143,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
     <!-- Cost Comparison -->
     <div class="card" style="margin-top:16px;">
-      <div class="card-title">💰 Cost per Million Tokens</div>
+      <div class="card-title"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px;"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Cost per Million Tokens</div>
       <p style="color:var(--text-dim);font-size:13px;margin-bottom:16px;">
         Voyage AI offers significant cost savings, especially with asymmetric retrieval strategies.
       </p>
@@ -4152,7 +4304,7 @@ Approximate nearest neighbor algorithms like HNSW enable fast similarity search
 Reranking models rescore initial search results to improve relevance ordering.</textarea>
       </div>
       <div style="margin-top:12px;">
-        <button class="btn" id="quantBtn" onclick="doBenchQuantization()">⚗️ Run Quantization Benchmark</button>
+        <button class="btn" id="quantBtn" onclick="doBenchQuantization()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10"/></svg>Run Quantization Benchmark</button>
       </div>
     </div>
@@ -4180,7 +4332,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <!-- ── Cost Panel ── -->
   <div class="bench-view" id="bench-cost">
     <div class="card">
-      <div class="card-title">💰 RAG Cost Calculator <button class="cost-help-btn" id="costHelpBtn" title="How the math works">?</button></div>
+      <div class="card-title"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>RAG Cost Calculator <button class="cost-help-btn" id="costHelpBtn" title="How the math works">?</button></div>
       <!-- Mode toggle -->
       <div style="margin-bottom: 20px;">
@@ -4301,7 +4453,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <div class="history-empty">No benchmarks recorded yet. Run a latency benchmark to start tracking.</div>
       </div>
       <div style="margin-top:12px;text-align:right;">
-        <button class="btn btn-secondary btn-small" onclick="clearHistory()">🗑 Clear History</button>
+        <button class="btn btn-secondary btn-small" onclick="clearHistory()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>Clear History</button>
       </div>
     </div>
   </div>
@@ -4318,7 +4470,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <span id="chatStatusDb">No database</span>
       </div>
       <button class="chat-config-toggle" id="chatOpenSettings" onclick="openChatSettings()" title="Configure in Settings">
-        <svg width="14" height="14" viewBox="0 0 16 16"><use href="#lg-config"/></svg>
+        <svg width="14" height="14" viewBox="0 0 24 24"><use href="#lg-config"/></svg>
         Configure
       </button>
     </div>
@@ -4342,11 +4494,15 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <div class="wf-container">
     <div class="wf-library">
       <div class="wf-library-header">
-        <span>Workflows</span>
+        <div class="wf-library-tabs">
+          <button class="wf-lib-tab active" data-lib-tab="library" onclick="wfSwitchLibTab('library')">Library</button>
+          <button class="wf-lib-tab" data-lib-tab="palette" onclick="wfSwitchLibTab('palette')">Palette</button>
+        </div>
       </div>
       <div class="wf-library-list" id="wfLibraryList">
         <div style="padding: 16px; color: var(--text-muted); font-size: 12px;">Loading...</div>
       </div>
+      <div class="wf-palette-list" id="wfPaletteList" style="display:none; flex:1; overflow-y:auto; padding:8px;"></div>
       <div class="wf-library-footer">
         <button class="wf-load-file-btn" onclick="wfLoadFromFile()" title="Load workflow JSON from file">
           <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 14h10M8 2v9M5 8l3 3 3-3"/></svg>
@@ -4357,6 +4513,9 @@ Reranking models rescore initial search results to improve relevance ordering.</
     </div>
     <div class="wf-canvas-area">
       <div class="wf-canvas-toolbar" id="wfToolbar">
+        <button class="wf-new-btn" onclick="wfNewWorkflow()" title="Create new workflow">+ New</button>
+        <button class="wf-edit-btn" id="wfEditBtn" onclick="wfEditWorkflow()" disabled title="Edit current workflow">&#9998; Edit</button>
+        <span class="wf-toolbar-sep"></span>
         <button onclick="wfZoom(1)" title="Zoom in">+</button>
         <button onclick="wfZoom(-1)" title="Zoom out">&minus;</button>
         <button onclick="wfFitToView()" title="Fit to view">&#8862;</button>
@@ -4377,10 +4536,11 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <span class="wf-exec-status-time" id="wfExecStatusTime"></span>
       </div>
       <div class="wf-canvas-empty" id="wfCanvasEmpty">
-        <div class="wf-canvas-empty-icon">&#9881;</div>
+        <div class="wf-canvas-empty-icon"><img src="/icons/watermark.png" alt="Vai"></div>
         <div class="wf-canvas-empty-text">Select a workflow from the library</div>
       </div>
-      <svg id="wf-canvas" xmlns="http://www.w3.org/2000/svg"></svg>
+      <div class="wf-canvas-watermark" id="wfCanvasWatermark"><img src="/icons/watermark.png" alt=""></div>
+      <svg id="wf-canvas" xmlns="http://www.w3.org/2000/svg" ondragover="event.preventDefault()" ondrop="wfCanvasDrop(event)"></svg>
     </div>
     <div class="wf-inspector collapsed" id="wfInspector">
       <button class="wf-inspector-toggle" id="wfInspectorToggle" onclick="wfToggleInspector()" title="Toggle inspector">&lsaquo;</button>
@@ -4411,6 +4571,21 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
+<!-- ── Workflow Input Modal (pre-execution) ── -->
+<div class="wf-input-modal-backdrop" id="wfInputModalBackdrop" style="display:none;" onclick="wfCloseInputModal()">
+  <div class="wf-input-modal" onclick="event.stopPropagation()">
+    <div class="wf-input-modal-header">
+      <span class="wf-input-modal-title" id="wfInputModalTitle">Workflow Inputs</span>
+      <button class="wf-output-modal-btn close" onclick="wfCloseInputModal()" title="Close">&times;</button>
+    </div>
+    <div class="wf-input-modal-body" id="wfInputModalBody"></div>
+    <div class="wf-input-modal-footer">
+      <button class="wf-input-modal-cancel" onclick="wfCloseInputModal()">Cancel</button>
+      <button class="wf-input-modal-run" onclick="wfInputModalSubmit()">Run Workflow</button>
+    </div>
+  </div>
+</div>
 <!-- ========== ABOUT TAB ========== -->
 <div class="tab-panel" id="tab-about" role="tabpanel" aria-labelledby="tab-btn-about" tabindex="0">
   <div class="about-container">
@@ -4421,9 +4596,9 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <div class="about-name">Michael Lynn</div>
           <div class="about-role">Principal Staff Developer Advocate · MongoDB</div>
           <div class="about-links">
-            <a href="https://github.com/mrlynn" target="_blank" rel="noopener">🔗 GitHub</a>
-            <a href="https://mlynn.org" target="_blank" rel="noopener">🌐 mlynn.org</a>
-            <a href="https://www.npmjs.com/package/voyageai-cli" target="_blank" rel="noopener">📦 npm</a>
+            <a href="https://github.com/mrlynn" target="_blank" rel="noopener"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>GitHub</a>
+            <a href="https://mlynn.org" target="_blank" rel="noopener"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>mlynn.org</a>
+            <a href="https://www.npmjs.com/package/voyageai-cli" target="_blank" rel="noopener"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16zM3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"/></svg>npm</a>
           </div>
         </div>
       </div>
@@ -4519,11 +4694,11 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <!-- Mode Toggle -->
   <div class="subtabs" role="tablist">
     <button class="subtab active" id="genModeCode" onclick="setGenerateMode('code')" role="tab" aria-selected="true">
-      <svg viewBox="0 0 16 16"><path fill="currentColor" d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
       Generate Code
     </button>
     <button class="subtab" id="genModeScaffold" onclick="setGenerateMode('scaffold')" role="tab" aria-selected="false">
-      <svg viewBox="0 0 16 16"><path fill="currentColor" d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path fill="currentColor" d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 13h4"/><path d="M10 17h4"/><path d="M10 9h1"/></svg>
       Scaffold Project
     </button>
   </div>
@@ -4665,7 +4840,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
         </div>
         <div id="scaffoldWebButtons" style="display:none;">
           <button class="btn btn-primary" onclick="downloadScaffoldZip()" id="scaffoldDownloadBtn">
-            <svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
             Download ZIP
           </button>
         </div>
@@ -4722,31 +4897,31 @@ Reranking models rescore initial search results to improve relevance ordering.</
     <nav class="settings-nav">
       <div class="settings-nav-header">Settings</div>
       <button class="settings-nav-item active" data-settings-section="general">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-config"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-config"/></svg>
         <span>General</span>
       </button>
       <button class="settings-nav-item" data-settings-section="appearance">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-palette"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-palette"/></svg>
         <span>Appearance</span>
       </button>
       <button class="settings-nav-item" data-settings-section="models">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-cube"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-cube"/></svg>
         <span>Models</span>
       </button>
       <button class="settings-nav-item" data-settings-section="chat">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-chat"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-chat"/></svg>
         <span>Chat</span>
       </button>
       <button class="settings-nav-item" data-settings-section="benchmark">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-gauge"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-gauge"/></svg>
         <span>Benchmark</span>
       </button>
       <button class="settings-nav-item" data-settings-section="privacy">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-shield"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-shield"/></svg>
         <span>Data &amp; Privacy</span>
       </button>
       <button class="settings-nav-item" data-settings-section="health">
-        <svg width="16" height="16" viewBox="0 0 16 16"><use href="#lg-pulse"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24"><use href="#lg-pulse"/></svg>
         <span>Health Check</span>
       </button>
     </nav>
@@ -4768,12 +4943,12 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <div class="settings-row">
             <div class="settings-label">
               <span class="settings-label-text">API Key <span class="settings-origin" data-origin-key="apiKey"></span></span>
-              <span class="settings-label-hint">Encrypted via OS keychain · <a href="https://dash.voyageai.com" target="_blank" class="settings-key-link">🔑 Get a key</a></span>
+              <span class="settings-label-hint">Encrypted via OS keychain · <a href="https://dash.voyageai.com" target="_blank" class="settings-key-link"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:2px;"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>Get a key</a></span>
             </div>
             <div class="settings-control" style="min-width:260px;">
               <div class="settings-api-field">
                 <input type="password" id="settingsApiKey" placeholder="pa-..." autocomplete="off" spellcheck="false">
-                <button type="button" id="settingsApiKeyToggle" title="Show/hide key">👁</button>
+                <button type="button" id="settingsApiKeyToggle" title="Show/hide key"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg></button>
                 <button type="button" id="settingsApiKeySave" class="save-btn" title="Save key">Save</button>
               </div>
             </div>
@@ -4927,7 +5102,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
                 title="Show/hide API key"
                 style="padding:8px 12px;min-width:auto"
               >
-                👁️
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
               </button>
               <button
                 class="btn"
@@ -4936,7 +5111,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
                 title="Save API key"
                 style="padding:8px 12px;min-width:auto"
               >
-                💾
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>
               </button>
             </div>
           </div>
@@ -5952,12 +6127,12 @@ async function downloadScaffoldZip() {
     // Show success
     btn.innerHTML = '<span style="margin-right:6px;">✓</span> Downloaded!';
     setTimeout(() => {
-      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg> Download ZIP';
+      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Download ZIP';
       btn.disabled = false;
     }, 2000);
   } catch (err) {
     alert('Error: ' + err.message);
-    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" style="margin-right:6px;"><path fill="currentColor" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill="currentColor" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg> Download ZIP';
+    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Download ZIP';
     btn.disabled = false;
   }
 }
@@ -6053,37 +6228,73 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 // ── Explore: icons and tab mappings per concept ──
+// Lucide SVG icon helper — returns an inline <svg> string
+function lucideIcon(d, size = 16) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
+}
+// Lucide path constants for concept/button icons
+const LI = {
+  zap:        'M13 2 3 14h9l-1 8 10-12h-9l1-8z',
+  search:     'M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z',
+  trophy:     'M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2z',
+  bot:        'M12 8V4H8M8 2h8M2 14a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zM6 14v4M10 14v4M14 14v4M18 14v4',
+  ruler:      'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z M15 5l4 4',
+  target:     'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0M12 12m-6 0a6 6 0 1 0 12 0 6 6 0 1 0-12 0M12 12m-2 0a2 2 0 1 0 4 0 2 2 0 1 0-4 0',
+  tag:        'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42zM7.5 7.5m-.5 0a.5.5 0 1 0 1 0 .5.5 0 1 0-1 0',
+  brain:      'M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2zM14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2z',
+  key:        'M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4zM16.5 7.5m-.5 0a.5.5 0 1 0 1 0 .5.5 0 1 0-1 0',
+  globe:      'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z',
+  package:    'M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16zM3.27 6.96 12 12.01l8.73-5.05M12 22.08V12',
+  timer:      'M10 2h4M12 14l3-3M12 22a8 8 0 1 0 0-16 8 8 0 0 0 0 16z',
+  flask:      'M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10',
+  puzzle:     'M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 2c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.878.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.968 1.02z',
+  link:       'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+  barChart:   'M12 20V10M18 20V4M6 20v-4',
+  microscope: 'M6 18h8M3 22h18M14 22a7 7 0 1 0 0-14h-1M9 14h2M9 12a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2z',
+  image:      'M3 3h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21',
+  shuffle:    'M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22M18 2l4 4-4 4M2 6h1.9c1.5 0 2.9.9 3.6 2.2M22 18l-4 4-4-4M19 14h3',
+  circle:     'M12 12m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0',
+  fileTxt:    'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7zM14 2v4a2 2 0 0 0 2 2h4M10 13h4M10 17h4M10 9h1',
+  scale:      'M16 3h5v5M8 3H3v5M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3M21 3l-7.828 7.828A4 4 0 0 0 12 13.7V22',
+  laptop:     'M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9M2 20h20M12 12h.01',
+  blocks:     'M2 12h10v10H2zM14 4l6 3.5v7L14 18l-6-3.5v-7zM12 2l10 6',
+  refresh:    'M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16',
+  sparkle:    'M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z',
+  download:   'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3',
+  copy:       'M9 9V6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-3M3 15a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z',
+  filter:     'M3 6h18M7 12h10M10 18h4',
+};
 const CONCEPT_META = {
-  embeddings:          { icon: '🧮', tab: 'embed' },
-  reranking:           { icon: '🏆', tab: 'search' },
-  'vector-search':     { icon: '🔎', tab: 'search' },
-  rag:                 { icon: '🤖', tab: 'search' },
-  'cosine-similarity': { icon: '📐', tab: 'compare' },
-  'two-stage-retrieval': { icon: '🎯', tab: 'search' },
-  'input-type':        { icon: '🏷️', tab: 'embed' },
-  models:              { icon: '🧠', tab: 'embed' },
-  'api-keys':          { icon: '🔑', tab: 'embed' },
-  'api-access':        { icon: '🌐', tab: 'embed' },
-  'batch-processing':  { icon: '📦', tab: 'embed' },
-  benchmarking:        { icon: '⏱', tab: 'benchmark' },
-  quantization:        { icon: '⚗️', tab: 'benchmark' },
-  'mixture-of-experts': { icon: '🧩', tab: 'embed' },
-  'shared-embedding-space': { icon: '🔗', tab: 'compare' },
-  'rteb-benchmarks':   { icon: '📊', tab: 'benchmark' },
-  'voyage-4-nano':     { icon: '🔬', tab: 'embed' },
-  'rerank-eval':       { icon: '📐', tab: 'benchmark' },
-  'multimodal-embeddings': { icon: '🖼️', tab: 'multimodal' },
-  'cross-modal-search':    { icon: '🔀', tab: 'multimodal' },
-  'modality-gap':          { icon: '🕳️', tab: 'multimodal' },
-  'multimodal-rag':        { icon: '📄', tab: 'multimodal' },
-  'provider-comparison':   { icon: '⚖️', tab: 'explore' },
-  // Code generation & scaffolding
-  'code-generation':   { icon: '💻', tab: 'explore' },
-  scaffolding:         { icon: '🏗️', tab: 'explore' },
-  'eval-comparison':   { icon: '📊', tab: 'benchmark' },
-  // MongoDB Auto-Embedding
-  'auto-embedding':        { icon: '⚡', tab: 'explore' },
-  'vai-vs-auto-embedding': { icon: '🔄', tab: 'explore' },
+  embeddings:          { icon: LI.zap,        tab: 'embed' },
+  reranking:           { icon: LI.trophy,     tab: 'search' },
+  'vector-search':     { icon: LI.search,     tab: 'search' },
+  rag:                 { icon: LI.bot,        tab: 'search' },
+  'cosine-similarity': { icon: LI.ruler,      tab: 'compare' },
+  'two-stage-retrieval': { icon: LI.target,   tab: 'search' },
+  'input-type':        { icon: LI.tag,        tab: 'embed' },
+  models:              { icon: LI.brain,      tab: 'embed' },
+  'api-keys':          { icon: LI.key,        tab: 'embed' },
+  'api-access':        { icon: LI.globe,      tab: 'embed' },
+  'batch-processing':  { icon: LI.package,    tab: 'embed' },
+  benchmarking:        { icon: LI.timer,      tab: 'benchmark' },
+  quantization:        { icon: LI.flask,      tab: 'benchmark' },
+  'mixture-of-experts': { icon: LI.puzzle,    tab: 'embed' },
+  'shared-embedding-space': { icon: LI.link,  tab: 'compare' },
+  'rteb-benchmarks':   { icon: LI.barChart,   tab: 'benchmark' },
+  'voyage-4-nano':     { icon: LI.microscope, tab: 'embed' },
+  'rerank-eval':       { icon: LI.ruler,      tab: 'benchmark' },
+  'multimodal-embeddings': { icon: LI.image,  tab: 'multimodal' },
+  'cross-modal-search':    { icon: LI.shuffle, tab: 'multimodal' },
+  'modality-gap':          { icon: LI.circle,  tab: 'multimodal' },
+  'multimodal-rag':        { icon: LI.fileTxt, tab: 'multimodal' },
+  'provider-comparison':   { icon: LI.scale,   tab: 'explore' },
+  'code-generation':   { icon: LI.laptop,     tab: 'explore' },
+  scaffolding:         { icon: LI.blocks,     tab: 'explore' },
+  'eval-comparison':   { icon: LI.barChart,   tab: 'benchmark' },
+  'auto-embedding':        { icon: LI.zap,    tab: 'explore' },
+  'vai-vs-auto-embedding': { icon: LI.refresh, tab: 'explore' },
 };
 let exploreConcepts = {};
@@ -6109,13 +6320,13 @@ function buildExploreCards() {
   grid.innerHTML = '';
   for (const [key, concept] of Object.entries(exploreConcepts)) {
-    const meta = CONCEPT_META[key] || { icon: '📚', tab: 'embed' };
+    const meta = CONCEPT_META[key] || { icon: LI.package, tab: 'embed' };
     const card = document.createElement('div');
     card.className = 'explore-card';
     card.dataset.key = key;
     card.innerHTML = `
-      <div class="explore-card-icon">${meta.icon}</div>
+      <div class="explore-card-icon">${lucideIcon(meta.icon, 28)}</div>
       <div class="explore-card-title">${escapeHtml(concept.title)}</div>
       <div class="explore-card-summary">${escapeHtml(concept.summary)}</div>
     `;
@@ -6142,12 +6353,12 @@ let exploreModalPreviousFocus = null;
 function openExploreModal(key) {
   const concept = exploreConcepts[key];
   if (!concept) return;
-  const meta = CONCEPT_META[key] || { icon: '📚', tab: 'embed' };
+  const meta = CONCEPT_META[key] || { icon: LI.package, tab: 'embed' };
   // Save the currently focused element to restore when modal closes
   exploreModalPreviousFocus = document.activeElement;
-  document.getElementById('exploreModalIcon').textContent = meta.icon;
+  document.getElementById('exploreModalIcon').innerHTML = lucideIcon(meta.icon, 32);
   document.getElementById('exploreModalTitle').textContent = concept.title;
   document.getElementById('exploreModalSummary').textContent = concept.summary;
@@ -9790,19 +10001,26 @@ const WF_NODE_META = {
   search:      { icon: '\u{1F50E}', label: 'Vector Search',   color: '#40E0FF', category: 'retrieval' },
   rerank:      { icon: '\u{1F3C6}', label: 'Rerank',          color: '#40E0FF', category: 'retrieval' },
   ingest:      { icon: '\u{1F4E5}', label: 'Ingest',          color: '#40E0FF', category: 'retrieval' },
-  embed:       { icon: '\u{1F4D0}', label: 'Embed',           color: '#B388FF', category: 'embedding' },
-  similarity:  { icon: '\u{1F517}', label: 'Similarity',      color: '#B388FF', category: 'embedding' },
-  collections: { icon: '\u{1F5C4}', label: 'Collections',     color: '#00D4AA', category: 'management' },
-  models:      { icon: '\u{1F4CB}', label: 'Models',          color: '#00D4AA', category: 'management' },
-  estimate:    { icon: '\u{1F4B0}', label: 'Cost Estimate',   color: '#FFB74D', category: 'utility' },
-  explain:     { icon: '\u{1F4D6}', label: 'Explain',         color: '#FFB74D', category: 'utility' },
-  topics:      { icon: '\u{1F5C2}', label: 'Topics',          color: '#FFB74D', category: 'utility' },
-  merge:       { icon: '\u{1F500}', label: 'Merge',           color: '#90A4AE', category: 'control' },
-  filter:      { icon: '\u{1F9F9}', label: 'Filter',          color: '#90A4AE', category: 'control' },
-  transform:   { icon: '\u{1F504}', label: 'Transform',       color: '#90A4AE', category: 'control' },
-  generate:    { icon: '\u2728',    label: 'Generate',        color: '#69F0AE', category: 'generation' },
+  embed:       { icon: 'M13 2 3 14h9l-1 8 10-12h-9l1-8z', label: 'Embed',           color: '#B388FF', category: 'embedding' },
+  similarity:  { icon: 'M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4', label: 'Similarity',      color: '#B388FF', category: 'embedding' },
+  collections: { icon: 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z', label: 'Collections',     color: '#00D4AA', category: 'management' },
+  models:      { icon: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 5h6M9 14l2 2 4-4', label: 'Models',          color: '#00D4AA', category: 'management' },
+  estimate:    { icon: 'M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6', label: 'Cost Estimate',   color: '#FFB74D', category: 'utility' },
+  explain:     { icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z', label: 'Explain',         color: '#FFB74D', category: 'utility' },
+  topics:      { icon: 'M12 6V2M8 18H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4M12 18v4M8 22h8', label: 'Topics',          color: '#FFB74D', category: 'utility' },
+  merge:       { icon: 'M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9v6M18 15l-6-6-6 6', label: 'Merge',           color: '#90A4AE', category: 'control' },
+  filter:      { icon: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z', label: 'Filter',          color: '#90A4AE', category: 'control' },
+  transform:   { icon: 'M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16', label: 'Transform',       color: '#90A4AE', category: 'control' },
+  generate:    { icon: 'M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z', label: 'Generate', color: '#69F0AE', category: 'generation' },
+  query:       { icon: 'M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', label: 'Query',           color: '#64B5F6', category: 'retrieval' },
+  rerank:      { icon: 'M3 6h18M7 12h10M10 18h4', label: 'Rerank',          color: '#CE93D8', category: 'retrieval' },
+  search:      { icon: 'M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', label: 'Search',          color: '#64B5F6', category: 'retrieval' },
+  ingest:      { icon: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3', label: 'Ingest',          color: '#4DB6AC', category: 'management' },
 };
+// Fallback icon (gear) for unknown workflow node types
+const WF_FALLBACK_ICON = 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2zM12 12m-3 0a3 3 0 1 0 6 0 3 3 0 1 0-6 0';
 const WF_NODE_W = 180;
 const WF_NODE_H = 64;
 const WF_LAYER_GAP = 260;
@@ -9812,6 +10030,7 @@ const WF_PORT_R = 5; // Port circle radius
 let wfState = {
   workflows: [],
+  examples: [],
   activeWorkflow: null,
   selectedNodeId: null,
   executionState: {},
@@ -9825,14 +10044,24 @@ let wfState = {
   isPanning: false,
   panStart: { x: 0, y: 0 },
   executing: false,
+  // Builder state
+  builderMode: false,
+  draggingEdge: null,
+  dragNode: null,
+  dirtyFlag: false,
 };
 // ── Library ──
 async function wfLoadLibrary() {
   try {
-    const res = await fetch('/api/workflows');
-    const data = await res.json();
-    wfState.workflows = data.workflows || [];
+    const [wfRes, exRes] = await Promise.all([
+      fetch('/api/workflows'),
+      fetch('/api/workflows/examples'),
+    ]);
+    const wfData = await wfRes.json();
+    const exData = await exRes.json();
+    wfState.workflows = wfData.workflows || [];
+    wfState.examples = exData.examples || [];
     wfRenderLibrary();
   } catch (err) {
     const list = document.getElementById('wfLibraryList');
@@ -9843,19 +10072,53 @@ async function wfLoadLibrary() {
 function wfRenderLibrary() {
   const list = document.getElementById('wfLibraryList');
   if (!list) return;
-  if (wfState.workflows.length === 0) {
+  if (wfState.workflows.length === 0 && (!wfState.examples || wfState.examples.length === 0)) {
     list.innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:12px;">No workflows found</div>';
     return;
   }
-  list.innerHTML = wfState.workflows.map(w => {
-    // w.name is the file stem (e.g., "multi-collection-search")
-    // w.description comes from the workflow JSON's description field
+  // Built-in templates
+  let html = wfState.workflows.map(w => {
     const displayName = w.name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
     return `<div class="wf-library-item" data-wf-name="${w.name}" onclick="wfSelectWorkflow('${w.name}')">
       <div class="wf-library-item-name">${displayName}</div>
       <div class="wf-library-item-desc">${w.description || ''}</div>
     </div>`;
   }).join('');
+  // Collapsible examples section
+  const examples = wfState.examples || [];
+  if (examples.length > 0) {
+    html += `<div class="wf-library-section">
+      <button class="wf-library-section-toggle" onclick="wfToggleExamples(this)">
+        <span class="arrow">&#9654;</span> Examples (${examples.length})
+      </button>
+      <div class="wf-examples-content" style="display:none;">`;
+    const categories = ['Retrieval', 'RAG', 'Ingestion', 'Analysis', 'Other'];
+    for (const cat of categories) {
+      const items = examples.filter(e => e.category === cat);
+      if (items.length === 0) continue;
+      html += `<div class="wf-library-category">${cat}</div>`;
+      html += items.map(w => {
+        const displayName = w.name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        return `<div class="wf-library-item" data-wf-name="${w.name}" onclick="wfSelectWorkflow('${w.name}')">
+          <div class="wf-library-item-name">${displayName}</div>
+          <div class="wf-library-item-desc">${w.description || ''}</div>
+        </div>`;
+      }).join('');
+    }
+    html += '</div></div>';
+  }
+  list.innerHTML = html;
+}
+function wfToggleExamples(btn) {
+  const content = btn.nextElementSibling;
+  const isOpen = content.style.display !== 'none';
+  content.style.display = isOpen ? 'none' : '';
+  btn.classList.toggle('open', !isOpen);
 }
 async function wfSelectWorkflow(name) {
@@ -9868,12 +10131,14 @@ async function wfSelectWorkflow(name) {
     const res = await fetch('/api/workflows/' + encodeURIComponent(name));
     const data = await res.json();
     wfState.activeWorkflow = data.definition;
+    wfState.builderMode = false;
     wfState.selectedNodeId = null;
     wfState.executionState = {};
     wfState.executionResults = {};
     wfSetToolbarEnabled(true);
     document.getElementById('wfCanvasEmpty').style.display = 'none';
     await wfRenderWorkflow(data.definition);
+    wfSwitchLibTab('library');
     wfOpenInspector();
     wfUpdateInspector();
   } catch (err) {
@@ -10024,7 +10289,7 @@ async function wfRenderWorkflow(definition) {
 }
 function wfDrawNode(step, x, y, state, hasDeps, hasDependents) {
-  const meta = WF_NODE_META[step.tool] || { icon: '\u2699', label: step.tool, color: '#666', category: 'unknown' };
+  const meta = WF_NODE_META[step.tool] || { icon: WF_FALLBACK_ICON, label: step.tool, color: '#666', category: 'unknown' };
   const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   g.classList.add('wf-node');
   if (state !== 'idle') g.classList.add('wf-node--' + state);
@@ -10036,6 +10301,39 @@ function wfDrawNode(step, x, y, state, hasDeps, hasDependents) {
     wfSelectNode(step.id);
   });
+  // Builder: node drag
+  if (wfState.builderMode) {
+    g.style.cursor = 'move';
+    g.addEventListener('mousedown', (e) => {
+      // Don't drag if clicking a port
+      if (e.target.classList.contains('wf-port')) return;
+      e.stopPropagation();
+      const svg = document.getElementById('wf-canvas');
+      const rect = svg.getBoundingClientRect();
+      const startSvgX = (e.clientX - rect.left) / wfState.zoom + wfState.panX;
+      const startSvgY = (e.clientY - rect.top) / wfState.zoom + wfState.panY;
+      const pos = wfState.nodePositions[step.id];
+      if (!pos) return;
+      const offX = startSvgX - pos.x;
+      const offY = startSvgY - pos.y;
+      wfState.dragNode = step.id;
+      function onMove(ev) {
+        const mx = (ev.clientX - rect.left) / wfState.zoom + wfState.panX;
+        const my = (ev.clientY - rect.top) / wfState.zoom + wfState.panY;
+        wfState.nodePositions[step.id] = { x: mx - offX, y: my - offY };
+        wfRefreshNodes();
+      }
+      function onUp() {
+        wfState.dragNode = null;
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+      }
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    });
+  }
   // Background rect
   const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
   rect.setAttribute('width', WF_NODE_W);
@@ -10045,37 +10343,66 @@ function wfDrawNode(step, x, y, state, hasDeps, hasDependents) {
   rect.setAttribute('opacity', '0.85');
   g.appendChild(rect);
-  // Input port (left side): only if this node has dependencies
-  if (hasDeps) {
+  // Input port (left side): show in builder mode always, otherwise only if has deps
+  const showInPort = wfState.builderMode || hasDeps;
+  if (showInPort) {
     const inPort = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     inPort.classList.add('wf-port', 'wf-port-in');
+    if (wfState.builderMode) inPort.classList.add('wf-port-builder');
     inPort.setAttribute('cx', 0);
     inPort.setAttribute('cy', WF_NODE_H / 2);
-    inPort.setAttribute('r', WF_PORT_R);
+    inPort.setAttribute('r', wfState.builderMode ? 7 : WF_PORT_R);
     inPort.setAttribute('stroke', meta.color);
     inPort.setAttribute('stroke-width', '2');
+    inPort.setAttribute('pointer-events', 'all');
+    if (wfState.builderMode) {
+      inPort.addEventListener('mouseup', () => {
+        if (wfState.draggingEdge) wfEdgeDropOnInput(step.id);
+      });
+    }
     g.appendChild(inPort);
   }
-  // Output port (right side): only if other nodes depend on this one
-  if (hasDependents) {
+  // Output port (right side): show in builder mode always, otherwise only if has dependents
+  const showOutPort = wfState.builderMode || hasDependents;
+  if (showOutPort) {
     const outPort = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     outPort.classList.add('wf-port', 'wf-port-out');
+    if (wfState.builderMode) outPort.classList.add('wf-port-builder');
     outPort.setAttribute('cx', WF_NODE_W);
     outPort.setAttribute('cy', WF_NODE_H / 2);
-    outPort.setAttribute('r', WF_PORT_R);
+    outPort.setAttribute('r', wfState.builderMode ? 7 : WF_PORT_R);
     outPort.setAttribute('fill', meta.color);
     outPort.setAttribute('stroke-width', '2');
+    outPort.setAttribute('pointer-events', 'all');
+    if (wfState.builderMode) {
+      outPort.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+        const pos = wfState.nodePositions[step.id];
+        if (!pos) return;
+        wfEdgeDragStart(step.id, pos.x + WF_NODE_W, pos.y + WF_NODE_H / 2);
+      });
+    }
     g.appendChild(outPort);
   }
-  // Icon
-  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-  icon.classList.add('wf-node-icon');
-  icon.setAttribute('x', 22);
-  icon.setAttribute('y', WF_NODE_H / 2);
-  icon.textContent = meta.icon;
-  g.appendChild(icon);
+  // Icon (Lucide SVG)
+  const iconG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  iconG.classList.add('wf-node-icon');
+  const iconSize = 18;
+  const ix = 22 - iconSize / 2;
+  const iy = WF_NODE_H / 2 - iconSize / 2;
+  iconG.setAttribute('transform', `translate(${ix},${iy}) scale(${iconSize / 24})`);
+  const fullD = meta.icon || WF_FALLBACK_ICON;
+  const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  iconPath.setAttribute('d', fullD);
+  iconPath.setAttribute('fill', 'none');
+  iconPath.setAttribute('stroke', 'currentColor');
+  iconPath.setAttribute('stroke-width', '1.75');
+  iconPath.setAttribute('stroke-linecap', 'round');
+  iconPath.setAttribute('stroke-linejoin', 'round');
+  iconG.appendChild(iconPath);
+  g.appendChild(iconG);
   // Label (step name, truncated)
   const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
@@ -10242,44 +10569,69 @@ function wfUpdateInspector() {
     header.textContent = def.name || 'Workflow';
     let html = '';
-    // Description
-    if (def.description) {
+    if (wfState.builderMode) {
+      // Builder: editable workflow fields
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Name</div>
+        <input class="wf-inspector-input" value="${escapeHtml(def.name || '')}" onchange="wfEditWorkflowField('name', this.value); document.getElementById('wfInspectorHeader').textContent = this.value || 'Workflow';">
+      </div>`;
       html += `<div class="wf-inspector-section">
         <div class="wf-inspector-section-title">Description</div>
-        <div style="font-size:12px;color:var(--text);line-height:1.4;">${escapeHtml(def.description)}</div>
+        <textarea class="wf-inspector-input" rows="2" style="resize:vertical;" onchange="wfEditWorkflowField('description', this.value)">${escapeHtml(def.description || '')}</textarea>
       </div>`;
-    }
-    // Inputs
-    if (def.inputs && Object.keys(def.inputs).length > 0) {
-      html += '<div class="wf-inspector-section"><div class="wf-inspector-section-title">Inputs</div>';
-      for (const [key, spec] of Object.entries(def.inputs)) {
-        const req = spec.required ? ' <span style="color:#e74c3c">*</span>' : '';
-        const defVal = spec.default !== undefined ? ` (default: ${spec.default})` : '';
-        html += `<div style="margin-bottom:8px;">
-          <div style="font-size:12px;font-weight:600;color:var(--text);">${escapeHtml(key)}${req}</div>
-          <div style="font-size:11px;color:var(--text-muted);">${escapeHtml(spec.description || spec.type || '')}${defVal}</div>
-          <input class="wf-inspector-input" id="wf-input-${key}" placeholder="${escapeHtml(key)}" value="${spec.default !== undefined ? spec.default : ''}">
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Steps</div>
+        <div style="font-size:12px;color:var(--text);">${def.steps.length} step${def.steps.length !== 1 ? 's' : ''}</div>
+      </div>`;
+      if (def.steps.length > 0) {
+        html += `<div class="wf-inspector-section">
+          <div class="wf-inspector-section-title">Output Mapping</div>
+          <textarea class="wf-inspector-input" rows="3" style="resize:vertical;font-family:monospace;font-size:11px;" onchange="try { wfEditWorkflowField('output', JSON.parse(this.value)); } catch(e) {}">${escapeHtml(JSON.stringify(def.output || {}, null, 2))}</textarea>
+        </div>`;
+      }
+      html += `<div class="wf-inspector-section" style="margin-top:8px;">
+        <div style="font-size:10px;color:var(--text-muted);">Add steps from the Palette tab, then drag between ports to connect them.</div>
+      </div>`;
+    } else {
+      // Read-only: Description
+      if (def.description) {
+        html += `<div class="wf-inspector-section">
+          <div class="wf-inspector-section-title">Description</div>
+          <div style="font-size:12px;color:var(--text);line-height:1.4;">${escapeHtml(def.description)}</div>
         </div>`;
       }
-      html += '</div>';
-    }
-    // Steps summary
-    html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">Steps</div>
-      <div style="font-size:12px;color:var(--text);">${def.steps.length} step${def.steps.length !== 1 ? 's' : ''}${wfState.layers ? ' in ' + wfState.layers.length + ' layer' + (wfState.layers.length !== 1 ? 's' : '') : ''}</div>
-    </div>`;
+      // Read-only: Inputs
+      if (def.inputs && Object.keys(def.inputs).length > 0) {
+        html += '<div class="wf-inspector-section"><div class="wf-inspector-section-title">Inputs</div>';
+        for (const [key, spec] of Object.entries(def.inputs)) {
+          const req = spec.required ? ' <span style="color:#e74c3c">*</span>' : '';
+          const defVal = spec.default !== undefined ? ` (default: ${spec.default})` : '';
+          html += `<div style="margin-bottom:8px;">
+            <div style="font-size:12px;font-weight:600;color:var(--text);">${escapeHtml(key)}${req}</div>
+            <div style="font-size:11px;color:var(--text-muted);">${escapeHtml(spec.description || spec.type || '')}${defVal}</div>
+            <input class="wf-inspector-input" id="wf-input-${key}" placeholder="${escapeHtml(key)}" value="${spec.default !== undefined ? spec.default : ''}">
+          </div>`;
+        }
+        html += '</div>';
+      }
-    // Output mapping
-    if (def.output) {
+      // Steps summary
       html += `<div class="wf-inspector-section">
-        <div class="wf-inspector-section-title">Output</div>
-        <div class="wf-inspector-code">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>
+        <div class="wf-inspector-section-title">Steps</div>
+        <div style="font-size:12px;color:var(--text);">${def.steps.length} step${def.steps.length !== 1 ? 's' : ''}${wfState.layers ? ' in ' + wfState.layers.length + ' layer' + (wfState.layers.length !== 1 ? 's' : '') : ''}</div>
       </div>`;
+      // Output mapping
+      if (def.output) {
+        html += `<div class="wf-inspector-section">
+          <div class="wf-inspector-section-title">Output</div>
+          <div class="wf-inspector-code">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>
+        </div>`;
+      }
     }
-    // Execution result
+    // Execution result (shown in both modes)
     if (wfState.executionResults._done) {
       const r = wfState.executionResults._done;
       const doneJson = JSON.stringify(r.output, null, 2);
@@ -10305,54 +10657,109 @@ function wfUpdateInspector() {
     return;
   }
-  const meta = WF_NODE_META[step.tool] || { icon: '\u2699', label: step.tool, color: '#666' };
+  const meta = WF_NODE_META[step.tool] || { icon: WF_FALLBACK_ICON, label: step.tool, color: '#666' };
   header.textContent = step.name || step.id;
   let html = '';
-  // Tool badge
+  // Tool badge (always shown)
   html += `<div class="wf-inspector-section">
     <div class="wf-inspector-section-title">Tool</div>
-    <span class="wf-tool-badge" style="background:${meta.color}">${meta.icon} ${meta.label}</span>
+    <span class="wf-tool-badge" style="background:${meta.color}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><path d="${meta.icon || WF_FALLBACK_ICON}"/></svg>${meta.label}</span>
   </div>`;
-  // Step ID
-  html += `<div class="wf-inspector-section">
-    <div class="wf-inspector-section-title">ID</div>
-    <div style="font-size:12px;color:var(--text);font-family:monospace;">${escapeHtml(step.id)}</div>
-  </div>`;
-  // Inputs
-  if (step.inputs) {
+  if (wfState.builderMode) {
+    // Builder: editable step fields
+    const sid = escapeHtml(step.id);
     html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">Inputs</div>`;
-    for (const [key, val] of Object.entries(step.inputs)) {
-      const display = typeof val === 'string' ? val : JSON.stringify(val);
-      html += `<div class="wf-inspector-field">
-        <span class="wf-inspector-field-label">${escapeHtml(key)}</span>
-        <span class="wf-inspector-field-value" style="font-family:monospace;font-size:11px;">${escapeHtml(display)}</span>
-      </div>`;
+      <div class="wf-inspector-section-title">Step ID</div>
+      <input class="wf-inspector-input" value="${sid}" style="font-family:monospace;" onchange="wfEditStepId('${sid}', this.value)">
+    </div>`;
+    html += `<div class="wf-inspector-section">
+      <div class="wf-inspector-section-title">Name</div>
+      <input class="wf-inspector-input" value="${escapeHtml(step.name || '')}" onchange="wfEditStepField('${sid}', 'name', this.value)">
+    </div>`;
+    // Inputs from WF_INPUT_DEFS
+    const inputDefs = WF_INPUT_DEFS[step.tool] || [];
+    if (inputDefs.length > 0) {
+      html += `<div class="wf-inspector-section"><div class="wf-inspector-section-title">Inputs</div>`;
+      for (const d of inputDefs) {
+        const val = step.inputs?.[d.key] ?? '';
+        const display = typeof val === 'string' ? val : JSON.stringify(val);
+        const req = d.required ? ' <span style="color:#e74c3c;font-size:10px;">required</span>' : '';
+        html += `<div style="margin-bottom:8px;">
+          <div style="font-size:11px;font-weight:600;color:var(--text);">${escapeHtml(d.key)}${req}</div>`;
+        if (d.type === 'textarea' || d.type === 'json') {
+          html += `<textarea class="wf-inspector-input" rows="2" style="resize:vertical;font-family:monospace;font-size:11px;" placeholder="${escapeHtml(d.placeholder || '')}" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">${escapeHtml(display)}</textarea>`;
+        } else if (d.type === 'select' && d.options) {
+          html += `<select class="wf-inspector-input" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">
+            <option value="">--</option>`;
+          for (const opt of d.options) {
+            html += `<option value="${escapeHtml(opt)}" ${val === opt ? 'selected' : ''}>${escapeHtml(opt)}</option>`;
+          }
+          html += `</select>`;
+        } else if (d.type === 'number') {
+          html += `<input class="wf-inspector-input" type="number" value="${escapeHtml(String(val))}" placeholder="${escapeHtml(d.placeholder || '')}" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">`;
+        } else {
+          html += `<input class="wf-inspector-input" value="${escapeHtml(display)}" placeholder="${escapeHtml(d.placeholder || '')}" onchange="wfEditStepInput('${sid}','${d.key}',this.value)">`;
+        }
+        html += `</div>`;
+      }
+      html += '</div>';
     }
-    html += '</div>';
-  }
-  // Condition
-  if (step.condition) {
+    // Condition
     html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">Condition \u26A1</div>
-      <div class="wf-inspector-code">${escapeHtml(step.condition)}</div>
+      <div class="wf-inspector-section-title">Condition <span style="font-size:10px;color:var(--text-muted)">(optional)</span></div>
+      <input class="wf-inspector-input" value="${escapeHtml(step.condition || '')}" placeholder="e.g. results.length > 0" onchange="wfEditStepField('${sid}', 'condition', this.value || undefined)">
     </div>`;
-  }
-  // ForEach
-  if (step.forEach) {
+    // continueOnError toggle
+    html += `<div class="wf-inspector-section" style="display:flex;align-items:center;gap:8px;">
+      <input type="checkbox" id="wf-coe-${sid}" ${step.continueOnError ? 'checked' : ''} onchange="wfEditStepField('${sid}', 'continueOnError', this.checked)">
+      <label for="wf-coe-${sid}" style="font-size:11px;color:var(--text);cursor:pointer;">Continue on error</label>
+    </div>`;
+    // Delete button
+    html += `<button class="wf-inspector-delete-btn" onclick="if(confirm('Delete step ${sid}?')) wfDeleteStep('${sid}')">Delete Step</button>`;
+  } else {
+    // Read-only step view
     html += `<div class="wf-inspector-section">
-      <div class="wf-inspector-section-title">ForEach</div>
-      <div class="wf-inspector-code">${escapeHtml(JSON.stringify(step.forEach, null, 2))}</div>
+      <div class="wf-inspector-section-title">ID</div>
+      <div style="font-size:12px;color:var(--text);font-family:monospace;">${escapeHtml(step.id)}</div>
     </div>`;
+    if (step.inputs) {
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Inputs</div>`;
+      for (const [key, val] of Object.entries(step.inputs)) {
+        const display = typeof val === 'string' ? val : JSON.stringify(val);
+        html += `<div class="wf-inspector-field">
+          <span class="wf-inspector-field-label">${escapeHtml(key)}</span>
+          <span class="wf-inspector-field-value" style="font-family:monospace;font-size:11px;">${escapeHtml(display)}</span>
+        </div>`;
+      }
+      html += '</div>';
+    }
+    if (step.condition) {
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Condition \u26A1</div>
+        <div class="wf-inspector-code">${escapeHtml(step.condition)}</div>
+      </div>`;
+    }
+    if (step.forEach) {
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">ForEach</div>
+        <div class="wf-inspector-code">${escapeHtml(JSON.stringify(step.forEach, null, 2))}</div>
+      </div>`;
+    }
   }
-  // Execution result for this step
+  // Execution result for this step (shown in both modes)
   const result = wfState.executionResults[step.id];
   const state = wfState.executionState[step.id];
   if (state === 'completed' && result) {
@@ -10416,6 +10823,7 @@ function wfSetToolbarEnabled(enabled) {
   document.getElementById('wfRunBtn').disabled = !enabled;
   document.getElementById('wfDryRunBtn').disabled = !enabled;
   document.getElementById('wfExportBtn').disabled = !enabled;
+  document.getElementById('wfEditBtn').disabled = !enabled;
 }
 // ── Export workflow JSON ──
@@ -10461,9 +10869,9 @@ function wfDryRun() {
       const step = stepMap[stepId];
       if (!step) return;
       totalSteps++;
-      const meta = WF_NODE_META[step.tool] || { icon: '\u2699', label: step.tool, color: '#666' };
+      const meta = WF_NODE_META[step.tool] || { icon: WF_FALLBACK_ICON, label: step.tool, color: '#666' };
       layersHtml += '<div class="wf-dryrun-step">';
-      layersHtml += '<span class="wf-dryrun-step-icon">' + meta.icon + '</span>';
+      layersHtml += '<span class="wf-dryrun-step-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="' + (meta.icon || WF_FALLBACK_ICON) + '"/></svg></span>';
       layersHtml += '<div class="wf-dryrun-step-info">';
       layersHtml += '<div class="wf-dryrun-step-name">' + escapeHtml(step.name || step.id) + '</div>';
       layersHtml += '<div class="wf-dryrun-step-tool">' + escapeHtml(meta.label) + ' (' + escapeHtml(step.id) + ')</div>';
@@ -10601,27 +11009,128 @@ function wfStopExecution(reason) {
   wfUpdateInspector();
 }
-async function wfExecute() {
+// ── Input Modal (pre-execution) ──
+function wfShowInputModal() {
   const def = wfState.activeWorkflow;
-  if (!def || wfState.executing) return;
+  if (!def || !def.inputs) return;
+  const entries = Object.entries(def.inputs);
+  if (entries.length === 0) { wfExecuteWithInputs({}); return; }
+  document.getElementById('wfInputModalTitle').textContent = (def.name || 'Workflow') + ' Inputs';
+  let html = '';
+  for (const [key, spec] of entries) {
+    const req = spec.required ? ' <span style="color:#e74c3c">*</span>' : '';
+    const desc = spec.description ? `<div class="wf-input-modal-desc">${escapeHtml(spec.description)}</div>` : '';
+    // Pre-fill from inspector fields if available, then from defaults
+    const inspectorEl = document.getElementById('wf-input-' + key);
+    let prefill = inspectorEl ? inspectorEl.value : '';
+    if (!prefill && spec.default !== undefined) prefill = String(spec.default);
+    const placeholder = spec.type === 'number' ? 'number' : (spec.type || 'string');
+    html += `<div class="wf-input-modal-field">
+      <div class="wf-input-modal-label">${escapeHtml(key)}${req}</div>
+      ${desc}
+      <input class="wf-input-modal-input" id="wf-modal-input-${key}" placeholder="${escapeHtml(placeholder)}" value="${escapeHtml(prefill)}" data-key="${escapeHtml(key)}" data-type="${spec.type || 'string'}" data-required="${!!spec.required}">
+      <div class="wf-input-modal-error" id="wf-modal-err-${key}">This field is required</div>
+    </div>`;
+  }
+  document.getElementById('wfInputModalBody').innerHTML = html;
+  document.getElementById('wfInputModalBackdrop').style.display = '';
+  // Focus first empty required field, or first field
+  const firstEmpty = entries.find(([k, s]) => {
+    const el = document.getElementById('wf-modal-input-' + k);
+    return s.required && el && !el.value;
+  });
+  const focusKey = firstEmpty ? firstEmpty[0] : entries[0][0];
+  const focusEl = document.getElementById('wf-modal-input-' + focusKey);
+  if (focusEl) setTimeout(() => focusEl.focus(), 50);
+}
+function wfCloseInputModal() {
+  document.getElementById('wfInputModalBackdrop').style.display = 'none';
+}
+function wfInputModalSubmit() {
+  const def = wfState.activeWorkflow;
+  if (!def || !def.inputs) return;
-  // Collect inputs
   const inputs = {};
-  if (def.inputs) {
-    for (const [key, spec] of Object.entries(def.inputs)) {
-      const el = document.getElementById('wf-input-' + key);
-      let val = el ? el.value : (spec.default !== undefined ? spec.default : undefined);
-      if (val === '' && spec.default !== undefined) val = spec.default;
-      if (val === '' && spec.required) {
-        alert('Input "' + key + '" is required');
-        return;
-      }
-      // Type coerce
-      if (spec.type === 'number' && val !== undefined && val !== '') val = Number(val);
-      if (val !== undefined && val !== '') inputs[key] = val;
+  let hasError = false;
+  for (const [key, spec] of Object.entries(def.inputs)) {
+    const el = document.getElementById('wf-modal-input-' + key);
+    const errEl = document.getElementById('wf-modal-err-' + key);
+    if (!el) continue;
+    let val = el.value.trim();
+    // Clear previous error
+    el.classList.remove('error');
+    if (errEl) errEl.style.display = 'none';
+    // Required check
+    if (!val && spec.required && spec.default === undefined) {
+      el.classList.add('error');
+      if (errEl) { errEl.textContent = 'This field is required'; errEl.style.display = ''; }
+      hasError = true;
+      continue;
+    }
+    // Use default if empty
+    if (!val && spec.default !== undefined) val = String(spec.default);
+    // Type validation
+    if (spec.type === 'number' && val && isNaN(Number(val))) {
+      el.classList.add('error');
+      if (errEl) { errEl.textContent = 'Must be a number'; errEl.style.display = ''; }
+      hasError = true;
+      continue;
     }
+    // Coerce
+    if (spec.type === 'number' && val) val = Number(val);
+    if (val !== undefined && val !== '') inputs[key] = val;
+  }
+  if (hasError) return;
+  // Also update inspector fields to keep them in sync
+  for (const [key, val] of Object.entries(inputs)) {
+    const inspEl = document.getElementById('wf-input-' + key);
+    if (inspEl) inspEl.value = typeof val === 'number' ? String(val) : val;
+  }
+  wfCloseInputModal();
+  wfExecuteWithInputs(inputs);
+}
+// Keyboard handler for input modal
+document.addEventListener('keydown', (e) => {
+  const backdrop = document.getElementById('wfInputModalBackdrop');
+  if (!backdrop || backdrop.style.display === 'none') return;
+  if (e.key === 'Escape') { wfCloseInputModal(); e.preventDefault(); }
+  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { wfInputModalSubmit(); e.preventDefault(); }
+});
+async function wfExecute() {
+  const def = wfState.activeWorkflow;
+  if (!def || wfState.executing) return;
+  // If workflow has inputs, show the input modal instead of executing directly
+  if (def.inputs && Object.keys(def.inputs).length > 0) {
+    wfShowInputModal();
+    return;
   }
+  // No inputs needed, execute directly
+  wfExecuteWithInputs({});
+}
+async function wfExecuteWithInputs(inputs) {
+  const def = wfState.activeWorkflow;
+  if (!def || wfState.executing) return;
   wfState.executing = true;
   wfState.executionResults = {};
   wfAbortController = new AbortController();
@@ -10907,7 +11416,7 @@ function wfInitPan() {
   // Scroll wheel zoom, centered on cursor position
   svg.addEventListener('wheel', (e) => {
     e.preventDefault();
-    const factor = e.deltaY < 0 ? 1.08 : 1 / 1.08;
+    const factor = e.deltaY < 0 ? 1.03 : 1 / 1.03;
     const oldZoom = wfState.zoom;
     const newZoom = Math.max(0.2, Math.min(5, oldZoom * factor));
     // Zoom toward cursor: keep the SVG point under the mouse fixed
@@ -10928,6 +11437,446 @@ function wfInitPan() {
   });
 }
+// ── Builder: Input Definitions ──
+const WF_INPUT_DEFS = {
+  query:       [{ key: 'query', type: 'text', required: true, placeholder: 'Search query' }, { key: 'collection', type: 'text', required: false, placeholder: 'Collection name' }, { key: 'db', type: 'text', required: false, placeholder: 'Database name' }, { key: 'limit', type: 'number', required: false, placeholder: '5' }, { key: 'filter', type: 'json', required: false, placeholder: '{}' }],
+  search:      [{ key: 'query', type: 'text', required: true, placeholder: 'Search query' }, { key: 'collection', type: 'text', required: false }, { key: 'db', type: 'text', required: false }, { key: 'limit', type: 'number', required: false, placeholder: '10' }, { key: 'filter', type: 'json', required: false, placeholder: '{}' }],
+  rerank:      [{ key: 'query', type: 'text', required: true }, { key: 'documents', type: 'json', required: true, placeholder: '["doc1","doc2"]' }, { key: 'model', type: 'text', required: false, placeholder: 'rerank-2.5' }],
+  ingest:      [{ key: 'text', type: 'textarea', required: true }, { key: 'collection', type: 'text', required: false }, { key: 'db', type: 'text', required: false }, { key: 'source', type: 'text', required: false }, { key: 'chunkSize', type: 'number', required: false, placeholder: '512' }, { key: 'chunkStrategy', type: 'select', required: false, options: ['fixed','sentence','paragraph','recursive','markdown'] }],
+  embed:       [{ key: 'text', type: 'text', required: true, placeholder: 'Text to embed' }, { key: 'model', type: 'text', required: false, placeholder: 'voyage-3-large' }, { key: 'inputType', type: 'select', required: false, options: ['document','query'] }],
+  similarity:  [{ key: 'text1', type: 'text', required: true }, { key: 'text2', type: 'text', required: true }, { key: 'model', type: 'text', required: false }],
+  collections: [{ key: 'db', type: 'text', required: false }],
+  models:      [{ key: 'category', type: 'select', required: false, options: ['embedding','rerank','all'] }],
+  estimate:    [{ key: 'docs', type: 'number', required: true, placeholder: '1000' }, { key: 'queries', type: 'number', required: false, placeholder: '0' }, { key: 'months', type: 'number', required: false, placeholder: '12' }],
+  explain:     [{ key: 'topic', type: 'text', required: true }],
+  topics:      [{ key: 'search', type: 'text', required: false }],
+  merge:       [{ key: 'sources', type: 'json', required: true, placeholder: '["step1.output","step2.output"]' }, { key: 'strategy', type: 'select', required: false, options: ['concat','interleave','unique'] }],
+  filter:      [{ key: 'input', type: 'text', required: true, placeholder: '{{ step.output }}' }, { key: 'condition', type: 'text', required: true, placeholder: 'item.score > 0.5' }],
+  transform:   [{ key: 'input', type: 'text', required: true, placeholder: '{{ step.output }}' }, { key: 'expression', type: 'text', required: true, placeholder: 'item.text' }],
+  generate:    [{ key: 'prompt', type: 'textarea', required: true, placeholder: 'Generate a summary of...' }, { key: 'context', type: 'text', required: false, placeholder: '{{ step.output }}' }],
+};
+const WF_CATEGORY_ORDER = ['retrieval', 'embedding', 'management', 'utility', 'control', 'generation'];
+const WF_CATEGORY_LABELS = { retrieval: 'Retrieval', embedding: 'Embedding', management: 'Management', utility: 'Utility', control: 'Control Flow', generation: 'Generation' };
+// ── Builder: Library/Palette tab toggle ──
+function wfSwitchLibTab(tab) {
+  const libraryList = document.getElementById('wfLibraryList');
+  const paletteList = document.getElementById('wfPaletteList');
+  document.querySelectorAll('.wf-lib-tab').forEach(b => b.classList.toggle('active', b.dataset.libTab === tab));
+  if (libraryList) libraryList.style.display = tab === 'library' ? '' : 'none';
+  if (paletteList) paletteList.style.display = tab === 'palette' ? '' : 'none';
+  if (tab === 'palette') wfRenderPalette();
+}
+// ── Builder: Palette rendering ──
+function wfRenderPalette() {
+  const container = document.getElementById('wfPaletteList');
+  if (!container) return;
+  const grouped = {};
+  for (const [tool, meta] of Object.entries(WF_NODE_META)) {
+    const cat = meta.category || 'unknown';
+    if (!grouped[cat]) grouped[cat] = [];
+    grouped[cat].push({ tool, ...meta });
+  }
+  let html = '';
+  for (const cat of WF_CATEGORY_ORDER) {
+    const items = grouped[cat];
+    if (!items) continue;
+    html += `<div class="wf-palette-category"><div class="wf-palette-category-title">${WF_CATEGORY_LABELS[cat] || cat}</div>`;
+    for (const item of items) {
+      html += `<div class="wf-palette-item" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','${item.tool}')" onclick="wfAddNodeFromPalette('${item.tool}')">
+        <span class="wf-palette-icon" style="color:${item.color}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${item.icon || WF_FALLBACK_ICON}"/></svg></span>
+        <span class="wf-palette-label">${item.label}</span>
+      </div>`;
+    }
+    html += '</div>';
+  }
+  container.innerHTML = html;
+}
+// ── Builder: New Workflow ──
+function wfNewWorkflow() {
+  wfState.activeWorkflow = {
+    name: 'Untitled Workflow',
+    description: '',
+    steps: [],
+    inputs: {},
+    defaults: {},
+    output: {}
+  };
+  wfState.builderMode = true;
+  wfState.dirtyFlag = false;
+  wfState.selectedNodeId = null;
+  wfState.executionState = {};
+  wfState.executionResults = {};
+  wfState.nodePositions = {};
+  wfState.layers = [];
+  wfState.graph = {};
+  wfState.zoom = 1;
+  wfState.panX = 0;
+  wfState.panY = 0;
+  wfState.draggingEdge = null;
+  wfState.dragNode = null;
+  // Clear canvas
+  const svg = document.getElementById('wf-canvas');
+  if (svg) svg.querySelectorAll('.wf-node, .wf-edge-group').forEach(el => el.remove());
+  document.getElementById('wfCanvasEmpty').style.display = 'none';
+  svg.style.display = '';
+  // Enable toolbar buttons
+  document.getElementById('wfDryRunBtn').disabled = false;
+  document.getElementById('wfRunBtn').disabled = false;
+  document.getElementById('wfExportBtn').disabled = false;
+  // Switch to palette tab
+  wfSwitchLibTab('palette');
+  // Open inspector for workflow-level editing
+  wfOpenInspector();
+  wfUpdateInspector();
+  // Set viewBox
+  wfApplyViewBox();
+}
+// ── Builder: Edit current workflow ──
+function wfEditWorkflow() {
+  if (!wfState.activeWorkflow) return;
+  wfState.builderMode = true;
+  wfState.dirtyFlag = false;
+  wfState.selectedNodeId = null;
+  wfState.draggingEdge = null;
+  wfState.dragNode = null;
+  // Re-render nodes with builder ports and drag handles
+  wfRefreshNodes();
+  // Switch to palette tab and open inspector for workflow-level editing
+  wfSwitchLibTab('palette');
+  wfOpenInspector();
+  wfUpdateInspector();
+}
+// ── Builder: Add node from palette ──
+function wfAddNodeFromPalette(tool) {
+  if (!wfState.activeWorkflow) wfNewWorkflow();
+  wfState.builderMode = true;
+  const def = wfState.activeWorkflow;
+  // Generate unique step ID
+  let baseId = tool;
+  let id = baseId;
+  let counter = 2;
+  const existingIds = new Set(def.steps.map(s => s.id));
+  while (existingIds.has(id)) { id = baseId + '_' + counter; counter++; }
+  // Build default inputs
+  const inputDefs = WF_INPUT_DEFS[tool] || [];
+  const inputs = {};
+  for (const d of inputDefs) {
+    if (d.required) inputs[d.key] = '';
+  }
+  const meta = WF_NODE_META[tool] || {};
+  const step = {
+    id,
+    name: meta.label || tool,
+    tool,
+    inputs,
+  };
+  def.steps.push(step);
+  // Position: place to the right of all existing nodes
+  let maxX = WF_PAD;
+  for (const pos of Object.values(wfState.nodePositions)) {
+    if (pos.x + WF_NODE_W + WF_LAYER_GAP > maxX) maxX = pos.x + WF_NODE_W + WF_LAYER_GAP;
+  }
+  let y = WF_PAD;
+  // Stack vertically if there are nodes in the same column
+  const nodesAtX = Object.values(wfState.nodePositions).filter(p => Math.abs(p.x - maxX) < 20);
+  if (nodesAtX.length > 0) {
+    y = Math.max(...nodesAtX.map(p => p.y)) + WF_NODE_H + WF_NODE_GAP;
+  }
+  wfState.nodePositions[id] = { x: maxX, y };
+  // Rebuild graph
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfSelectNode(id);
+  wfState.dirtyFlag = true;
+}
+// ── Builder: Build graph from step inputs (template references) ──
+function wfBuildGraph() {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  const graph = {};
+  const stepIds = new Set(def.steps.map(s => s.id));
+  for (const step of def.steps) {
+    const deps = new Set();
+    // Scan all input values for {{ stepId.xxx }} references
+    for (const val of Object.values(step.inputs || {})) {
+      const str = typeof val === 'string' ? val : JSON.stringify(val);
+      const matches = str.matchAll(/\{\{\s*([a-zA-Z_][a-zA-Z0-9_]*)\./g);
+      for (const m of matches) {
+        if (stepIds.has(m[1]) && m[1] !== step.id) deps.add(m[1]);
+      }
+    }
+    graph[step.id] = Array.from(deps);
+  }
+  wfState.graph = graph;
+}
+// ── Builder: Canvas drop (from palette drag) ──
+function wfCanvasDrop(e) {
+  e.preventDefault();
+  const tool = e.dataTransfer.getData('text/plain');
+  if (!tool || !WF_NODE_META[tool]) return;
+  if (!wfState.activeWorkflow) wfNewWorkflow();
+  wfState.builderMode = true;
+  const def = wfState.activeWorkflow;
+  // Generate unique ID
+  let id = tool;
+  let counter = 2;
+  const existingIds = new Set(def.steps.map(s => s.id));
+  while (existingIds.has(id)) { id = tool + '_' + counter; counter++; }
+  // Inputs
+  const inputDefs = WF_INPUT_DEFS[tool] || [];
+  const inputs = {};
+  for (const d of inputDefs) { if (d.required) inputs[d.key] = ''; }
+  const meta = WF_NODE_META[tool] || {};
+  const step = { id, name: meta.label || tool, tool, inputs };
+  def.steps.push(step);
+  // Convert drop coordinates to SVG space
+  const svg = document.getElementById('wf-canvas');
+  const rect = svg.getBoundingClientRect();
+  const svgX = (e.clientX - rect.left) / wfState.zoom + wfState.panX;
+  const svgY = (e.clientY - rect.top) / wfState.zoom + wfState.panY;
+  wfState.nodePositions[id] = { x: svgX, y: svgY };
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfSelectNode(id);
+  wfState.dirtyFlag = true;
+}
+// ── Builder: Mutation helpers ──
+function wfEditStepField(stepId, field, value) {
+  const step = wfState.activeWorkflow?.steps.find(s => s.id === stepId);
+  if (!step) return;
+  step[field] = value;
+  wfState.dirtyFlag = true;
+  if (field === 'name') wfRefreshNodes();
+}
+function wfEditStepInput(stepId, key, value) {
+  const step = wfState.activeWorkflow?.steps.find(s => s.id === stepId);
+  if (!step) return;
+  if (!step.inputs) step.inputs = {};
+  step.inputs[key] = value;
+  wfState.dirtyFlag = true;
+  // Rebuild graph in case template refs changed
+  wfBuildGraph();
+  wfRefreshNodes();
+}
+function wfEditStepId(oldId, newId) {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  newId = newId.trim().replace(/[^a-zA-Z0-9_]/g, '_');
+  if (!newId || newId === oldId) return;
+  if (def.steps.some(s => s.id === newId)) return; // duplicate
+  const step = def.steps.find(s => s.id === oldId);
+  if (!step) return;
+  step.id = newId;
+  // Update position map
+  if (wfState.nodePositions[oldId]) {
+    wfState.nodePositions[newId] = wfState.nodePositions[oldId];
+    delete wfState.nodePositions[oldId];
+  }
+  // Update template references in other steps
+  for (const s of def.steps) {
+    for (const [k, v] of Object.entries(s.inputs || {})) {
+      if (typeof v === 'string' && v.includes('{{ ' + oldId + '.')) {
+        s.inputs[k] = v.replaceAll('{{ ' + oldId + '.', '{{ ' + newId + '.');
+      }
+    }
+  }
+  if (wfState.selectedNodeId === oldId) wfState.selectedNodeId = newId;
+  wfState.dirtyFlag = true;
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfUpdateInspector();
+}
+function wfDeleteStep(stepId) {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  def.steps = def.steps.filter(s => s.id !== stepId);
+  delete wfState.nodePositions[stepId];
+  if (wfState.selectedNodeId === stepId) wfState.selectedNodeId = null;
+  wfState.dirtyFlag = true;
+  wfBuildGraph();
+  wfRefreshNodes();
+  wfUpdateInspector();
+}
+function wfEditWorkflowField(field, value) {
+  if (!wfState.activeWorkflow) return;
+  wfState.activeWorkflow[field] = value;
+  wfState.dirtyFlag = true;
+}
+// ── Builder: Validate ──
+async function wfValidateBuilder() {
+  const def = wfState.activeWorkflow;
+  if (!def) return null;
+  try {
+    const res = await fetch('/api/workflows/validate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(def),
+    });
+    return await res.json();
+  } catch (err) {
+    return { valid: false, errors: [err.message] };
+  }
+}
+// ── Builder: Edge drag ──
+function wfEdgeDragStart(fromId, fromX, fromY) {
+  const svg = document.getElementById('wf-canvas');
+  if (!svg) return;
+  wfState.draggingEdge = { fromId, fromX, fromY };
+  // Create temp edge (dashed bezier), pointer-events: none so it doesn't block port hit-testing
+  const tempPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  tempPath.setAttribute('id', 'wf-temp-edge');
+  tempPath.setAttribute('fill', 'none');
+  tempPath.setAttribute('stroke', 'var(--accent)');
+  tempPath.setAttribute('stroke-width', '2');
+  tempPath.setAttribute('stroke-dasharray', '6 4');
+  tempPath.setAttribute('pointer-events', 'none');
+  tempPath.setAttribute('d', `M${fromX},${fromY} L${fromX},${fromY}`);
+  svg.appendChild(tempPath);
+  function onMove(e) {
+    const rect = svg.getBoundingClientRect();
+    const mx = (e.clientX - rect.left) / wfState.zoom + wfState.panX;
+    const my = (e.clientY - rect.top) / wfState.zoom + wfState.panY;
+    const dx = Math.abs(mx - fromX) * 0.5;
+    tempPath.setAttribute('d', `M${fromX},${fromY} C${fromX + dx},${fromY} ${mx - dx},${my} ${mx},${my}`);
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    const el = document.getElementById('wf-temp-edge');
+    if (el) el.remove();
+    wfState.draggingEdge = null;
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+function wfEdgeDropOnInput(toId) {
+  if (!wfState.draggingEdge) return;
+  const fromId = wfState.draggingEdge.fromId;
+  if (fromId === toId) return; // no self-connections
+  // Add template reference to the target step's first empty required input
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  const targetStep = def.steps.find(s => s.id === toId);
+  if (!targetStep) return;
+  const inputDefs = WF_INPUT_DEFS[targetStep.tool] || [];
+  let connected = false;
+  // Try to fill the first empty required input with a template reference
+  for (const d of inputDefs) {
+    if (!targetStep.inputs) targetStep.inputs = {};
+    const current = targetStep.inputs[d.key];
+    if (!current || current === '') {
+      targetStep.inputs[d.key] = `{{ ${fromId}.output }}`;
+      connected = true;
+      break;
+    }
+  }
+  // If no empty required input, try first empty optional input
+  if (!connected) {
+    for (const d of inputDefs) {
+      const current = targetStep.inputs?.[d.key];
+      if (!current || current === '') {
+        if (!targetStep.inputs) targetStep.inputs = {};
+        targetStep.inputs[d.key] = `{{ ${fromId}.output }}`;
+        connected = true;
+        break;
+      }
+    }
+  }
+  if (connected) {
+    wfState.dirtyFlag = true;
+    wfBuildGraph();
+    wfRelayout();
+    wfRefreshNodes();
+    if (wfState.selectedNodeId === toId) wfUpdateInspector();
+  }
+  // Clean up drag state
+  wfState.draggingEdge = null;
+  const el = document.getElementById('wf-temp-edge');
+  if (el) el.remove();
+}
+// ── Builder: Relayout via topological sort ──
+async function wfRelayout() {
+  const def = wfState.activeWorkflow;
+  if (!def || def.steps.length === 0) return;
+  try {
+    const res = await fetch('/api/workflows/plan', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(def),
+    });
+    const data = await res.json();
+    if (data.layers && data.layers.length > 0) {
+      wfState.layers = data.layers;
+      // Reposition nodes based on layers
+      const positions = {};
+      data.layers.forEach((layer, li) => {
+        layer.forEach((stepId, ni) => {
+          positions[stepId] = {
+            x: WF_PAD + li * WF_LAYER_GAP,
+            y: WF_PAD + ni * (WF_NODE_H + WF_NODE_GAP),
+          };
+        });
+      });
+      // Keep orphan nodes (not in any layer) at their current position
+      for (const step of def.steps) {
+        if (!positions[step.id] && wfState.nodePositions[step.id]) {
+          positions[step.id] = wfState.nodePositions[step.id];
+        }
+      }
+      wfState.nodePositions = positions;
+    }
+  } catch (err) {
+    console.warn('Relayout failed:', err.message);
+  }
+}
 // ── Docs shortcut (F1) ──
 const DOCS_URLS = {
   embed:      'https://docs.vaicli.com/docs/commands/embeddings/embed',
@@ -10956,6 +11905,22 @@ document.addEventListener('keydown', (e) => {
 document.addEventListener('keydown', (e) => {
   const activeTab = document.querySelector('.tab-btn.active');
   if (!activeTab || activeTab.dataset.tab !== 'workflows') return;
+  // Ctrl/Cmd+S to save/export in builder mode (works even in inputs)
+  if ((e.ctrlKey || e.metaKey) && e.key === 's' && wfState.builderMode) {
+    e.preventDefault();
+    wfExportJson();
+    return;
+  }
+  // Delete/Backspace to remove selected node in builder mode
+  if ((e.key === 'Delete' || e.key === 'Backspace') && wfState.builderMode && wfState.selectedNodeId) {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+    e.preventDefault();
+    wfDeleteStep(wfState.selectedNodeId);
+    return;
+  }
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   const PAN_STEP = 40;