voyageai-cli 1.26.1 → 1.28.0

package/src/playground/index.html

@@ -573,7 +573,7 @@ body:not(.is-electron) .sidebar-drag-region {
   background-repeat: no-repeat;
   opacity: 0.05;
   pointer-events: none;
-  z-index: 0;
+  z-index: -1;
   filter: invert(1);
 }
 
@@ -593,7 +593,7 @@ body:not(.is-electron) .content-drag-region { display: none; }
 body:not(.is-electron) .update-banner { display: none !important; }
 
 /* Main */
-.main { padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }
+.main { padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; flex: 1; overflow-y: auto; min-height: 0; }
 
 /* Legacy compat — hide old horizontal bar (replaced by sidebar) */
 .nav { display: none; }
@@ -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;
@@ -1825,6 +1826,34 @@ select:focus { outline: none; border-color: var(--accent); }
   line-height: 1.5;
 }
 
+/* ── Contextual docs link ── */
+.page-header { position: relative; }
+.page-header-docs {
+  position: absolute; top: 0; right: 0;
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; font-weight: 500;
+  color: var(--text-muted); text-decoration: none;
+  padding: 4px 10px; border-radius: 6px;
+  border: 1px solid var(--border);
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.page-header-docs:hover {
+  color: var(--accent, #6c63ff); border-color: var(--accent, #6c63ff);
+  background: rgba(108,99,255,0.06);
+}
+.page-header-docs svg { opacity: 0.6; }
+.page-header-docs:hover svg { opacity: 1; }
+.sidebar-docs-link {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 10px; color: var(--text-muted); text-decoration: none;
+  padding: 2px 6px; border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+}
+.sidebar-docs-link:hover {
+  color: var(--accent, #6c63ff); background: rgba(108,99,255,0.08);
+}
+.sidebar-docs-link svg { width: 12px; height: 12px; }
+
 /* ── Settings page ── */
 .settings-container { max-width: 640px; margin: 0 auto; }
 .settings-section {
@@ -2052,6 +2081,34 @@ select:focus { outline: none; border-color: var(--accent); }
   transition: opacity 0.3s;
 }
 .settings-saved.show { opacity: 1; }
+.doctor-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+}
+.doctor-check-icon { font-size: 15px; flex-shrink: 0; line-height: 1.4; }
+.doctor-check-body { flex: 1; min-width: 0; }
+.doctor-check-name { font-size: 13px; font-weight: 600; color: var(--text); }
+.doctor-check-msg { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
+.doctor-check-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--mono); }
+.doctor-check-badge {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+  align-self: center;
+}
+.doctor-check-badge.pass { background: rgba(0,212,170,0.12); color: var(--success); }
+.doctor-check-badge.fail { background: rgba(255,105,96,0.12); color: var(--error); }
+.doctor-check-badge.warn { background: rgba(255,192,16,0.12); color: var(--warning); }
+.doctor-check-badge.optional { background: rgba(136,147,151,0.12); color: var(--text-muted); }
 .settings-reset-btn {
   background: transparent;
   border: 1px solid var(--border);
@@ -2316,6 +2373,25 @@ select:focus { outline: none; border-color: var(--accent); }
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-bottom-left-radius: 4px;
+  position: relative;
+}
+.chat-copy-btn {
+  position: absolute; top: 6px; right: 6px;
+  width: 28px; height: 28px; border-radius: 6px;
+  border: 1px solid var(--border); background: var(--bg);
+  color: var(--text-muted); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
+  pointer-events: none; z-index: 1;
+}
+.chat-message.assistant:hover .chat-copy-btn {
+  opacity: 1; pointer-events: auto;
+}
+.chat-copy-btn:hover {
+  background: var(--bg-card); color: var(--text); border-color: var(--text-muted);
+}
+.chat-copy-btn.copied {
+  color: #69F0AE; border-color: #69F0AE;
 }
 .chat-message.system-msg {
   align-self: center;
@@ -2421,21 +2497,160 @@ select:focus { outline: none; border-color: var(--accent); }
   margin: 12px 0;
 }
 
-.chat-tool-calls {
-  display: flex; flex-direction: column; gap: 4px;
-  margin-bottom: 4px; align-self: flex-start; max-width: 85%;
+/* Agent thinking panel */
+.chat-thinking {
+  align-self: flex-start;
+  max-width: 85%;
+  margin-bottom: 2px;
+  font-size: 13px;
 }
-.chat-tool-call {
-  font-size: 12px; color: var(--text-muted);
-  padding: 6px 12px; border-radius: 8px;
-  background: var(--bg-card); border: 1px dashed var(--border);
-  display: flex; align-items: center; gap: 6px;
+.chat-thinking summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 13px;
+  transition: background 0.15s, border-color 0.15s;
+  user-select: none;
+}
+.chat-thinking summary::-webkit-details-marker { display: none; }
+.chat-thinking summary:hover {
+  background: var(--bg-surface);
+  border-color: var(--accent-dim, #009E80);
+}
+.chat-thinking[open] summary {
+  border-radius: 10px 10px 0 0;
+  border-bottom-color: transparent;
+}
+.chat-thinking .thinking-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+.chat-thinking .thinking-label {
+  font-weight: 500;
+}
+.chat-thinking .thinking-chevron {
+  margin-left: auto;
+  font-size: 10px;
+  opacity: 0.5;
+  transition: transform 0.15s;
+}
+.chat-thinking[open] .thinking-chevron {
+  transform: rotate(90deg);
+}
+.chat-thinking .thinking-count {
+  background: var(--bg-input, #112733);
+  color: var(--text-muted);
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 10px;
+  font-weight: 600;
+}
+.chat-thinking .thinking-elapsed {
+  font-size: 11px;
+  opacity: 0.45;
+}
+.chat-thinking .thinking-timeline {
+  border: 1px solid var(--border);
+  border-top: none;
+  border-radius: 0 0 10px 10px;
+  padding: 10px 14px;
+  background: var(--bg-card);
+}
+.thinking-step {
+  display: flex;
+  gap: 10px;
+  padding: 7px 0;
+  position: relative;
+  animation: thinkingSlideIn 0.25s ease-out;
+}
+@keyframes thinkingSlideIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.thinking-step + .thinking-step {
+  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+}
+.thinking-step-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+  background: var(--bg-input, #112733);
+  border: 1px solid var(--border);
+}
+.thinking-step.active .thinking-step-icon {
+  border-color: var(--accent);
+  animation: thinkingPulse 1.2s ease-in-out infinite;
+}
+@keyframes thinkingPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.25); }
+  50% { box-shadow: 0 0 0 6px rgba(0, 212, 170, 0); }
+}
+.thinking-step.error .thinking-step-icon {
+  border-color: #e74c3c;
+  background: rgba(231, 76, 60, 0.08);
+}
+.thinking-step.done .thinking-step-icon {
+  border-color: var(--accent-dim, #009E80);
+  opacity: 0.7;
+}
+.thinking-step-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+}
+.thinking-step-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.thinking-step-name {
+  font-weight: 600;
+  color: var(--text);
+  font-size: 12.5px;
+}
+.thinking-step-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+.thinking-step-time {
+  font-size: 11px;
+  opacity: 0.45;
+  margin-left: auto;
+  white-space: nowrap;
+}
+.thinking-step-detail {
+  font-size: 11.5px;
+  color: var(--text-muted);
+  margin-top: 2px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.thinking-step-detail code {
+  font-size: 11px;
+  background: var(--bg-input, #112733);
+  padding: 1px 4px;
+  border-radius: 3px;
 }
-.chat-tool-call .tool-icon { opacity: 0.5; font-size: 11px; }
-.chat-tool-call .tool-name { font-weight: 600; }
-.chat-tool-call .tool-time { opacity: 0.5; }
-.chat-tool-call.error { border-color: #e74c3c; }
-.chat-tool-call .tool-error { color: #e74c3c; font-size: 11px; }
 .chat-input-area {
   padding: 12px 16px;
   border-top: 1px solid var(--border);
@@ -2750,56 +2965,654 @@ select:focus { outline: none; border-color: var(--accent); }
   .settings-row { flex-direction: column; align-items: flex-start; gap: 8px; }
   .settings-select, .settings-input { min-width: 100%; }
 }
+
+/* ========== WORKFLOW VISUALIZER ========== */
+/* Expand .main when workflows tab is active to fill viewport */
+.main:has(#tab-workflows.active) {
+  max-width: none; padding: 0; overflow: hidden;
+}
+#tab-workflows.tab-panel.active {
+  display: flex; flex-direction: column;
+  height: 100%;
+  /* Fill entire .main which is flex:1 inside the 100vh app-shell */
+}
+.wf-container {
+  display: flex; flex: 1; gap: 0; overflow: hidden;
+  border-radius: 0;
+  background: var(--bg-card);
+  min-height: 0;
+}
+.wf-library {
+  width: 220px; min-width: 180px; flex-shrink: 0;
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  background: var(--bg);
+}
+.wf-library-header {
+  padding: 14px 16px 10px; font-weight: 700; font-size: 13px;
+  color: var(--text); border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.wf-library-list {
+  flex: 1; overflow-y: auto; padding: 8px;
+}
+.wf-library-footer {
+  padding: 8px; border-top: 1px solid var(--border);
+}
+.wf-load-file-btn {
+  width: 100%; padding: 7px 12px; border-radius: 6px;
+  border: 1px dashed var(--border); background: transparent;
+  color: var(--text-muted); cursor: pointer; font-size: 12px;
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.wf-load-file-btn:hover {
+  color: var(--text); border-color: var(--text-muted); background: var(--bg-card);
+}
+.wf-library-item {
+  padding: 10px 12px; border-radius: 8px; cursor: pointer;
+  margin-bottom: 4px; transition: background 0.15s;
+  border: 1px solid transparent;
+}
+.wf-library-item:hover { background: var(--bg-card); }
+.wf-library-item.active {
+  background: var(--bg-card); border-color: var(--accent, #6c63ff);
+}
+.wf-library-item-name {
+  font-weight: 600; font-size: 13px; color: var(--text);
+  margin-bottom: 2px;
+}
+.wf-library-item-desc {
+  font-size: 11px; color: var(--text-muted);
+  line-height: 1.3; display: -webkit-box;
+  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.wf-library-item-meta {
+  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);
+  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+.wf-canvas-toolbar {
+  position: absolute; top: 12px; right: 12px; z-index: 10;
+  display: flex; gap: 4px;
+}
+.wf-canvas-toolbar button {
+  width: 32px; height: 32px; border-radius: 8px;
+  border: 1px solid var(--border); background: var(--bg-card);
+  color: var(--text); cursor: pointer; font-size: 14px;
+  display: flex; align-items: center; justify-content: center;
+  transition: background 0.15s;
+}
+.wf-canvas-toolbar button:hover { background: var(--bg); border-color: var(--text-muted); }
+.wf-canvas-toolbar .wf-plan-btn {
+  width: auto; padding: 0 12px; gap: 4px;
+  font-weight: 600; font-size: 12px;
+}
+.wf-canvas-toolbar .wf-plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.wf-canvas-toolbar .wf-run-btn {
+  width: auto; padding: 0 12px; gap: 4px;
+  background: var(--accent, #6c63ff); color: #fff; border-color: transparent;
+  font-weight: 600; font-size: 12px;
+}
+.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;
+  z-index: 8; background: rgba(0,0,0,0.5);
+  display: flex; align-items: center; justify-content: center;
+  animation: wf-modal-fade-in 0.15s ease;
+}
+.wf-dryrun-panel {
+  width: 90%; max-width: 520px; max-height: 70vh;
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 12px; display: flex; flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+  animation: wf-modal-slide-up 0.2s ease;
+}
+.wf-dryrun-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 20px; border-bottom: 1px solid var(--border);
+}
+.wf-dryrun-title { font-weight: 700; font-size: 14px; color: var(--text); }
+.wf-dryrun-close {
+  border: none; background: none; color: var(--text-muted);
+  cursor: pointer; font-size: 20px; padding: 2px 8px;
+}
+.wf-dryrun-close:hover { color: var(--text); }
+.wf-dryrun-body {
+  flex: 1; overflow-y: auto; padding: 16px 20px;
+}
+.wf-dryrun-layer {
+  margin-bottom: 16px;
+}
+.wf-dryrun-layer-title {
+  font-size: 11px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px;
+  display: flex; align-items: center; gap: 8px;
+}
+.wf-dryrun-layer-badge {
+  font-size: 10px; padding: 1px 6px; border-radius: 10px;
+  background: var(--accent); color: #fff; font-weight: 600;
+}
+.wf-dryrun-step {
+  padding: 8px 12px; border-radius: 6px; margin-bottom: 4px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  display: flex; align-items: center; gap: 10px; font-size: 12px;
+}
+.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; }
+.wf-dryrun-step-cond {
+  font-size: 10px; color: #FFD54F; margin-top: 2px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+.wf-dryrun-summary {
+  padding: 12px 16px; border-radius: 8px; margin-top: 8px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  font-size: 12px; color: var(--text-muted);
+  display: flex; gap: 16px;
+}
+.wf-dryrun-stat { text-align: center; }
+.wf-dryrun-stat-value { font-size: 20px; font-weight: 700; color: var(--text); }
+.wf-dryrun-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
+[data-theme="light"] .wf-dryrun-panel { box-shadow: 0 8px 32px rgba(0,30,43,0.15); }
+[data-theme="light"] .wf-dryrun-step-cond { color: #944F01; }
+.wf-canvas-toolbar .wf-stop-btn {
+  width: auto; padding: 0 12px; gap: 4px;
+  background: #e74c3c; color: #fff; border-color: transparent;
+  font-weight: 600; font-size: 12px;
+}
+.wf-canvas-toolbar .wf-stop-btn:hover { opacity: 0.9; background: #c0392b; }
+/* Execution status bar */
+.wf-exec-status {
+  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
+  z-index: 10; display: flex; align-items: center; gap: 8px;
+  padding: 6px 16px; border-radius: 20px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  font-size: 12px; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+.wf-exec-status-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: #69F0AE; animation: wf-status-blink 1s ease-in-out infinite;
+}
+.wf-exec-status.error .wf-exec-status-dot { background: #e74c3c; animation: none; }
+.wf-exec-status.stopped .wf-exec-status-dot { background: #FFB74D; animation: none; }
+.wf-exec-status.done .wf-exec-status-dot { background: #69F0AE; animation: none; }
+@keyframes wf-status-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+.wf-exec-status-time { color: var(--text-muted); font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; }
+/* Output modal */
+.wf-output-modal-backdrop {
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.6); z-index: 9999;
+  display: flex; align-items: center; justify-content: center;
+  animation: wf-modal-fade-in 0.15s ease;
+}
+@keyframes wf-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
+.wf-output-modal {
+  width: 90%; max-width: 800px; max-height: 80vh;
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 12px; display: flex; flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+  animation: wf-modal-slide-up 0.2s ease;
+}
+@keyframes wf-modal-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+.wf-output-modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 20px; border-bottom: 1px solid var(--border);
+}
+.wf-output-modal-title { font-weight: 700; font-size: 14px; color: var(--text); }
+.wf-output-modal-actions { display: flex; align-items: center; gap: 6px; }
+.wf-output-modal-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 5px 10px; border-radius: 6px;
+  border: 1px solid var(--border); background: var(--bg-card);
+  color: var(--text); cursor: pointer; font-size: 12px;
+  transition: background 0.15s, border-color 0.15s;
+}
+.wf-output-modal-btn:hover { background: var(--bg); border-color: var(--text-muted); }
+.wf-output-modal-btn.close { border: none; font-size: 20px; padding: 2px 8px; }
+.wf-output-modal-body {
+  flex: 1; overflow: auto; padding: 16px 20px;
+  margin: 0; font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px; line-height: 1.5; color: var(--text);
+  white-space: pre-wrap; word-break: break-word;
+}
+/* Expand button for output sections */
+.wf-output-expand-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 8px; border-radius: 4px; margin-top: 6px;
+  border: 1px solid var(--border); background: transparent;
+  color: var(--text-muted); cursor: pointer; font-size: 10px;
+  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; position: relative; z-index: 1;
+}
+/* SVG node styles */
+.wf-node { cursor: pointer; }
+.wf-node rect {
+  rx: 10; ry: 10; stroke-width: 2;
+  transition: stroke 0.2s, filter 0.2s;
+}
+.wf-node:hover rect { filter: brightness(1.1); }
+.wf-node.selected rect { stroke-width: 3; stroke: var(--accent, #6c63ff); }
+.wf-node-label {
+  font-size: 12px; font-weight: 600; fill: #fff;
+  pointer-events: none; text-anchor: middle; dominant-baseline: central;
+}
+.wf-node-icon {
+  pointer-events: none;
+  color: #fff;
+}
+.wf-node-badge {
+  font-size: 10px; fill: rgba(255,255,255,0.7);
+  pointer-events: none; text-anchor: middle; dominant-baseline: central;
+}
+.wf-node-condition {
+  font-size: 10px; fill: #FFD54F;
+  pointer-events: none; text-anchor: end;
+}
+/* Execution states */
+.wf-node--pending rect { opacity: 0.5; }
+.wf-node--running rect {
+  animation: wf-pulse 1.2s ease-in-out infinite;
+}
+@keyframes wf-pulse {
+  0%, 100% { filter: drop-shadow(0 0 4px rgba(108,99,255,0.4)); }
+  50% { filter: drop-shadow(0 0 12px rgba(108,99,255,0.8)); }
+}
+.wf-node--completed rect { opacity: 1; }
+.wf-node--skipped rect { opacity: 0.3; }
+.wf-node--error rect { stroke: #e74c3c !important; stroke-width: 3; }
+.wf-node-status {
+  font-size: 12px; pointer-events: none; fill: #fff;
+  text-anchor: middle; dominant-baseline: central;
+}
+.wf-node--error .wf-node-status { fill: #e74c3c; }
+.wf-node--skipped .wf-node-status { fill: rgba(255,255,255,0.5); }
+.wf-node-time {
+  font-size: 9px; fill: rgba(255,255,255,0.6);
+  pointer-events: none; text-anchor: middle;
+}
+/* Port styles */
+.wf-port { pointer-events: none; transition: fill 0.2s, stroke 0.2s; }
+.wf-port-in { fill: var(--bg-card); }
+.wf-port-out { fill: currentColor; stroke: rgba(255,255,255,0.8); }
+.wf-node:hover .wf-port-out { filter: brightness(1.3); }
+.wf-node--completed .wf-port-out { fill: #69F0AE; stroke: #fff; }
+.wf-node--error .wf-port-in { fill: #e74c3c; }
+/* Edge styles */
+.wf-edge {
+  fill: none; stroke: #6b7b8d; stroke-width: 2;
+  opacity: 0.5; transition: opacity 0.3s, stroke 0.3s;
+  stroke-linecap: round;
+}
+.wf-edge--backward {
+  stroke-dasharray: 6 4; opacity: 0.35;
+}
+.wf-edge--active {
+  stroke: var(--accent, #6c63ff); opacity: 0.85;
+  stroke-dasharray: 8 4;
+  animation: wf-flow 0.6s linear infinite;
+}
+@keyframes wf-flow { to { stroke-dashoffset: -12; } }
+.wf-edge--complete { stroke: var(--accent, #6c63ff); opacity: 0.6; stroke-dasharray: none; }
+/* Inspector */
+.wf-inspector {
+  flex-shrink: 0; position: relative;
+  display: flex; flex-direction: row;
+  background: var(--bg);
+  transition: width 0.25s ease;
+  width: 300px;
+  overflow: hidden;
+  align-self: stretch;
+}
+.wf-inspector.collapsed {
+  width: 28px;
+}
+.wf-inspector-toggle {
+  width: 28px; flex-shrink: 0; align-self: stretch;
+  border: none; border-left: 1px solid var(--border);
+  background: var(--bg); color: var(--text-muted);
+  cursor: pointer; font-size: 14px; padding: 0;
+  display: flex; align-items: center; justify-content: center;
+  transition: color 0.15s, background 0.15s;
+}
+.wf-inspector-toggle:hover {
+  color: var(--text); background: var(--bg-card);
+}
+.wf-inspector.collapsed .wf-inspector-toggle {
+  border-left: 1px solid var(--border);
+}
+.wf-inspector.collapsed .wf-inspector-content {
+  display: none;
+}
+.wf-inspector-content {
+  flex: 1; display: flex; flex-direction: column;
+  border-left: 1px solid var(--border);
+  overflow-y: auto; min-width: 0; height: 100%;
+}
+.wf-inspector-header {
+  padding: 14px 16px 10px; font-weight: 700; font-size: 13px;
+  color: var(--text); border-bottom: 1px solid var(--border);
+}
+.wf-inspector-body {
+  padding: 16px; flex: 1; overflow-y: auto;
+}
+.wf-inspector-empty {
+  color: var(--text-muted); font-size: 13px; text-align: center;
+  padding: 40px 16px;
+}
+.wf-inspector-section {
+  margin-bottom: 16px;
+}
+.wf-inspector-section-title {
+  font-size: 11px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px;
+}
+.wf-inspector-field {
+  font-size: 12px; color: var(--text); margin-bottom: 4px;
+  display: flex; gap: 6px;
+}
+.wf-inspector-field-label {
+  font-weight: 600; min-width: 60px; color: var(--text-muted);
+}
+.wf-inspector-field-value {
+  word-break: break-all;
+}
+.wf-inspector-code {
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 6px; padding: 8px; overflow-x: auto;
+  white-space: pre-wrap; color: var(--text); margin-top: 4px;
+}
+.wf-tool-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-radius: 10px; font-size: 11px;
+  font-weight: 600; color: #fff;
+}
+.wf-inspector-input {
+  width: 100%; padding: 6px 10px; border-radius: 6px;
+  border: 1px solid var(--border); background: var(--bg-card);
+  color: var(--text); font-size: 12px; margin-top: 4px;
+}
+.wf-inspector-input:focus {
+  outline: none; border-color: var(--accent, #6c63ff);
+}
+.wf-inspector-btn {
+  width: 100%; padding: 8px 16px; border-radius: 8px;
+  border: none; background: var(--accent, #6c63ff);
+  color: #fff; font-weight: 600; font-size: 13px;
+  cursor: pointer; margin-top: 12px;
+}
+.wf-inspector-btn:hover { opacity: 0.9; }
+.wf-inspector-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.wf-inspector-result {
+  margin-top: 8px; padding: 8px; border-radius: 6px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  font-size: 11px; max-height: 200px; overflow-y: auto;
+}
+.wf-inspector-result.success { border-color: #69F0AE; }
+.wf-inspector-result.error { border-color: #e74c3c; }
+/* Responsive */
+@media (max-width: 900px) {
+  .wf-library { display: none; }
+  .wf-inspector:not(.collapsed) { width: 240px; }
+}
+@media (max-width: 600px) {
+  .wf-inspector { display: none; }
+}
+/* Workflow visualizer light mode */
+[data-theme="light"] .wf-node-label { 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; }
+[data-theme="light"] .wf-node-status { fill: #001E2B; }
+[data-theme="light"] .wf-node--skipped .wf-node-status { fill: rgba(0,30,43,0.4); }
+[data-theme="light"] .wf-node--error .wf-node-status { fill: #DB3030; }
+[data-theme="light"] .wf-node rect { stroke-opacity: 0.7; }
+[data-theme="light"] .wf-node.selected rect { stroke: var(--accent); }
+[data-theme="light"] .wf-edge { stroke: #889397; opacity: 0.45; }
+[data-theme="light"] .wf-edge--backward { opacity: 0.3; }
+[data-theme="light"] .wf-edge--active { stroke: var(--accent); opacity: 0.7; }
+[data-theme="light"] .wf-edge--complete { stroke: var(--accent); opacity: 0.5; }
+[data-theme="light"] .wf-port-in { fill: var(--bg); }
+[data-theme="light"] .wf-port-out { stroke: rgba(0,30,43,0.3); }
+[data-theme="light"] .wf-node--completed .wf-port-out { fill: #009E80; stroke: var(--bg); }
+[data-theme="light"] .wf-canvas-area { background: var(--bg-surface); }
+[data-theme="light"] .wf-inspector-result.success { border-color: #009E80; }
+[data-theme="light"] .wf-inspector-result.error { border-color: #DB3030; }
+[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)); }
+}
+[data-theme="light"] .wf-node--running rect { animation-name: wf-pulse-light; }
+/* Empty canvas state */
+.wf-canvas-empty {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  text-align: center; color: var(--text-muted); pointer-events: none;
+}
+.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>
+  <!-- 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>
 
@@ -2810,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">
@@ -2820,7 +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="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">
@@ -2840,10 +3654,16 @@ select:focus { outline: none; border-color: var(--accent); }
     </div>
     <div style="display:flex;align-items:center;justify-content:space-between;">
       <div id="appVersionLabel" style="font-size:10px;color:var(--text-muted);"></div>
-      <button class="sidebar-bug-link" id="bugButton" title="Report a Bug">
-        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="9" r="4.5"/><path d="M5.5 5.5L3 3M10.5 5.5L13 3M3 9H1M15 9h-2M5.5 12.5L4 15M10.5 12.5L12 15"/></svg>
-        <span class="sidebar-bug-label">Bug</span>
-      </button>
+      <div style="display:flex;align-items:center;gap:6px;">
+        <a class="sidebar-docs-link" href="https://docs.vaicli.com" target="_blank" rel="noopener" title="Documentation (F1)">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/><path d="M6 8h4M6 10.5h4"/></svg>
+          <span>Docs</span>
+        </a>
+        <button class="sidebar-bug-link" id="bugButton" title="Report a Bug">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="9" r="4.5"/><path d="M5.5 5.5L3 3M10.5 5.5L13 3M3 9H1M15 9h-2M5.5 12.5L4 15M10.5 12.5L12 15"/></svg>
+          <span class="sidebar-bug-label">Bug</span>
+        </button>
+      </div>
     </div>
   </div>
 </aside>
@@ -2873,6 +3693,7 @@ select:focus { outline: none; border-color: var(--accent); }
     <h2 class="page-header-title">Embed</h2>
     <p class="page-header-subtitle">Generate vector embeddings for text</p>
     <p class="page-header-hint">Paste or type text below, choose a model, and hit Embed to see the raw vectors and token usage.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/embed" target="_blank" rel="noopener" title="Embed documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
   <div class="card">
     <div class="card-title">Input Text</div>
@@ -2912,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>
@@ -2923,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>
@@ -2936,7 +3757,8 @@ select:focus { outline: none; border-color: var(--accent); }
   <div class="page-header">
     <h2 class="page-header-title">Compare</h2>
     <p class="page-header-subtitle">Visualize similarity between text pairs</p>
-    <p class="page-header-hint">Enter two texts and compare their embeddings — see cosine similarity, a heatmap of vector dimensions, and a visual diff.</p>
+    <p class="page-header-hint">Enter two texts and compare their embeddings: see cosine similarity, a heatmap of vector dimensions, and a visual diff.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/similarity" target="_blank" rel="noopener" title="Similarity documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
   <div class="compare-grid">
     <div class="card">
@@ -2964,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>
@@ -2990,7 +3812,8 @@ select:focus { outline: none; border-color: var(--accent); }
   <div class="page-header">
     <h2 class="page-header-title">Rerank</h2>
     <p class="page-header-subtitle">Re-order documents by relevance to a query</p>
-    <p class="page-header-hint">Enter a search query and a set of documents — the reranker scores and sorts them by semantic relevance.</p>
+    <p class="page-header-hint">Enter a search query and a set of documents: the reranker scores and sorts them by semantic relevance.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/rerank" target="_blank" rel="noopener" title="Rerank documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
   <div class="card">
     <div class="card-title">Query</div>
@@ -3025,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>
@@ -3041,7 +3864,8 @@ Semantic search understands meaning beyond keyword matching</textarea>
   <div class="page-header">
     <h2 class="page-header-title">Multimodal</h2>
     <p class="page-header-subtitle">Compare images and text in the same vector space</p>
-    <p class="page-header-hint">Voyage AI's multimodal models embed images and text into a unified vector space — so you can compare them directly with cosine similarity.</p>
+    <p class="page-header-hint">Voyage AI's multimodal models embed images and text into a unified vector space, so you can compare them directly with cosine similarity.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/embeddings/embed" target="_blank" rel="noopener" title="Multimodal embedding documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
 
   <!-- Section A: Image ↔ Text Similarity -->
@@ -3051,7 +3875,7 @@ Semantic search understands meaning beyond keyword matching</textarea>
       <div class="mm-drop-zone" id="mmDropZone">
         <div class="mm-drop-icon">🖼️</div>
         <div class="mm-drop-text">Drop an image here or click to browse</div>
-        <div class="mm-drop-hint">PNG, JPEG, WebP, GIF — max 20 MB · Paste from clipboard (⌘V)</div>
+        <div class="mm-drop-hint">PNG, JPEG, WebP, GIF, max 20 MB. Paste from clipboard (⌘V)</div>
       </div>
       <input type="file" id="mmFileInput" accept="image/png,image/jpeg,image/webp,image/gif" style="display:none">
       <div class="mm-preview" id="mmPreview">
@@ -3084,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>
@@ -3122,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>
@@ -3157,16 +3981,17 @@ Semantic search understands meaning beyond keyword matching</textarea>
     <h2 class="page-header-title">Benchmark</h2>
     <p class="page-header-subtitle">Compare model speed, cost, and quality</p>
     <p class="page-header-hint">Run latency tests, compare ranking accuracy, analyze quantization trade-offs, and estimate costs across models.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/evaluation/benchmark" target="_blank" rel="noopener" title="Benchmark documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
 
   <!-- 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 ── -->
@@ -3188,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>
 
@@ -3242,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>
 
@@ -3318,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>
@@ -3479,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>
 
@@ -3507,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;">
@@ -3628,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>
@@ -3645,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>
@@ -3664,6 +4489,103 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
 
+<!-- ========== WORKFLOWS TAB ========== -->
+<div class="tab-panel" id="tab-workflows" role="tabpanel" aria-labelledby="tab-btn-workflows" tabindex="0">
+  <div class="wf-container">
+    <div class="wf-library">
+      <div class="wf-library-header">
+        <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>
+          Load File
+        </button>
+        <input type="file" id="wfFileInput" accept=".json" style="display:none;" onchange="wfHandleFileLoad(event)">
+      </div>
+    </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>
+        <button onclick="wfResetExecution()" title="Reset">&#8635;</button>
+        <span class="wf-toolbar-sep"></span>
+        <button class="wf-plan-btn" onclick="wfDryRun()" id="wfDryRunBtn" disabled title="Dry run: show execution plan">&#9881; Plan</button>
+        <button class="wf-run-btn" id="wfRunBtn" onclick="wfExecute()" disabled title="Run workflow">&#9654; Run</button>
+        <button class="wf-stop-btn" id="wfStopBtn" onclick="wfStopExecution()" style="display:none;" title="Stop workflow">&#9632; Stop</button>
+        <span class="wf-toolbar-sep"></span>
+        <button onclick="wfExportJson()" id="wfExportBtn" disabled title="Export workflow JSON">
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2h10M8 14V5M5 8l3-3 3 3"/></svg>
+        </button>
+      </div>
+      <!-- Execution status bar -->
+      <div class="wf-exec-status" id="wfExecStatus" style="display:none;">
+        <span class="wf-exec-status-dot"></span>
+        <span class="wf-exec-status-text" id="wfExecStatusText">Running...</span>
+        <span class="wf-exec-status-time" id="wfExecStatusTime"></span>
+      </div>
+      <div class="wf-canvas-empty" id="wfCanvasEmpty">
+        <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>
+      <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>
+      <div class="wf-inspector-content">
+        <div class="wf-inspector-header" id="wfInspectorHeader">Inspector</div>
+        <div class="wf-inspector-body" id="wfInspectorBody">
+          <div class="wf-inspector-empty">Click a node to inspect</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ── Workflow Output Modal ── -->
+<div class="wf-output-modal-backdrop" id="wfOutputModalBackdrop" style="display:none;" onclick="wfCloseOutputModal()">
+  <div class="wf-output-modal" onclick="event.stopPropagation()">
+    <div class="wf-output-modal-header">
+      <span class="wf-output-modal-title" id="wfOutputModalTitle">Output</span>
+      <div class="wf-output-modal-actions">
+        <button class="wf-output-modal-btn" onclick="wfCopyOutput()" title="Copy to clipboard" id="wfOutputCopyBtn">
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 0 1 2 9.5V3.5A1.5 1.5 0 0 1 3.5 2h6A1.5 1.5 0 0 1 11 3.5V5"/></svg>
+          <span id="wfOutputCopyLabel">Copy</span>
+        </button>
+        <button class="wf-output-modal-btn close" onclick="wfCloseOutputModal()" title="Close">&times;</button>
+      </div>
+    </div>
+    <pre class="wf-output-modal-body" id="wfOutputModalBody"></pre>
+  </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">
@@ -3674,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>
@@ -3709,8 +4631,11 @@ Reranking models rescore initial search results to improve relevance ordering.</
           <strong>⚖️ Compare</strong> — Measure similarity with cosine, dot product &amp; euclidean distance<br>
           <strong>🔍 Search</strong> — Semantic search with optional reranking<br>
           <strong>🔮 Multimodal</strong> — Compare images and text in the same vector space with voyage-multimodal-3.5<br>
+          <strong>🛠️ Generate</strong> — Generate code snippets and scaffold full projects with templates<br>
+          <strong>💬 Chat</strong> — RAG-powered chat with your documents, configurable system prompts<br>
+          <strong>🔄 Workflows</strong> — Multi-step agent workflows with thinking panels and tool orchestration<br>
           <strong>⏱ Benchmark</strong> — Compare model latency, ranking quality, and costs<br>
-          <strong>📚 Explore</strong> — Learn about embeddings, vector search, multimodal, RAG, and more
+          <strong>📚 Explore</strong> — 22 interactive concepts covering embeddings, vector search, multimodal, RAG, and more
         </div>
       </div>
 
@@ -3741,9 +4666,12 @@ Reranking models rescore initial search results to improve relevance ordering.</
       <div class="about-section" style="padding-bottom:0;">
         <div class="about-section-title">What's New</div>
         <div class="about-text" style="font-size:13px;">
-          <strong>v1.2</strong> — Multimodal tab (image ↔ text similarity, cross-modal gallery search),
-          4 new Explore concepts (multimodal embeddings, cross-modal search, modality gap, multimodal RAG),
-          auto-update with in-app download &amp; restart, and a hidden easter egg 🕹️
+          <strong>v1.26</strong> — Agent workflows with thinking panel &amp; markdown rendering, multi-step tool orchestration<br>
+          <strong>v1.25</strong> — Code generation &amp; project scaffolding tabs<br>
+          <strong>v1.24</strong> — MCP server install/uninstall/status commands, Electron app v1.5<br>
+          <strong>v1.23</strong> — MCP server (expose vai tools to AI agents), HTTP transport, bearer auth, 71+ MCP tests<br>
+          <strong>v1.22</strong> — RAG chat with smart source labels, configurable system prompts, streaming responses<br>
+          <strong>v1.2</strong> — Multimodal tab, 4 new Explore concepts, auto-update, hidden easter egg 🕹️
         </div>
       </div>
     </div>
@@ -3760,16 +4688,17 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <div class="page-header">
     <h2 class="page-header-title">Generate</h2>
     <p class="page-header-subtitle">Generate code and scaffold projects</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/project-setup/generate" target="_blank" rel="noopener" title="Generate documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
 
   <!-- 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>
@@ -3911,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>
@@ -3933,7 +4862,8 @@ Reranking models rescore initial search results to improve relevance ordering.</
   <div class="page-header">
     <h2 class="page-header-title">Explore</h2>
     <p class="page-header-subtitle">Learn embedding and vector search concepts</p>
-    <p class="page-header-hint">Browse interactive explanations of key topics — from cosine similarity to quantization to RAG pipelines.</p>
+    <p class="page-header-hint">Browse interactive explanations of key topics, from cosine similarity to quantization to RAG pipelines.</p>
+    <a class="page-header-docs" href="https://docs.vaicli.com/docs/commands/tools-and-learning/explain" target="_blank" rel="noopener" title="Explore documentation"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 1h7l3 3v11H3z"/><path d="M10 1v3h3"/></svg>Docs</a>
   </div>
   <div style="margin-bottom:16px;">
     <input type="text" id="exploreSearch" placeholder="🔍 Search concepts..." oninput="filterExplore()" style="max-width:400px;" aria-label="Search concepts">
@@ -3967,29 +4897,33 @@ 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 24 24"><use href="#lg-pulse"/></svg>
+        <span>Health Check</span>
+      </button>
     </nav>
 
     <!-- Settings content panels -->
@@ -4009,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>
@@ -4168,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"
@@ -4177,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>
@@ -4349,6 +5283,30 @@ Reranking models rescore initial search results to improve relevance ordering.</
         </div>
       </div>
 
+      <!-- ── Health Check ── -->
+      <div class="settings-panel" id="settings-health">
+        <div class="settings-panel-header">
+          <h3 class="settings-panel-title">Health Check</h3>
+          <p class="settings-panel-subtitle">Validate your vai setup and connectivity</p>
+        </div>
+        <div class="settings-section">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
+            <span class="settings-section-title" style="margin:0;">Diagnostics</span>
+            <button class="btn" id="doctorRunBtn" style="padding:6px 16px;font-size:13px;">Run Health Check</button>
+          </div>
+          <div id="doctorResults" style="display:none;">
+            <div id="doctorCheckList" style="display:flex;flex-direction:column;gap:6px;"></div>
+            <div id="doctorSummary" style="margin-top:16px;padding:12px 16px;border-radius:var(--radius);font-size:13px;"></div>
+          </div>
+          <div id="doctorLoading" style="display:none;text-align:center;padding:24px 0;color:var(--text-muted);font-size:13px;">
+            Running health checks...
+          </div>
+          <div id="doctorEmpty" style="text-align:center;padding:24px 0;color:var(--text-muted);font-size:13px;">
+            Click "Run Health Check" to validate your setup.
+          </div>
+        </div>
+      </div>
+
       <div style="text-align:center;padding:8px 0;">
         <span class="settings-saved" id="settingsSavedMsg">✓ Saved</span>
       </div>
@@ -5169,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;
   }
 }
@@ -5270,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 = {};
@@ -5316,7 +6310,9 @@ async function loadConcepts() {
 }
 
 function escapeHtml(str) {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  if (str == null) return '';
+  const s = typeof str === 'string' ? str : String(str);
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 
 function buildExploreCards() {
@@ -5324,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>
     `;
@@ -5357,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;
 
@@ -6676,6 +7672,95 @@ function initSettings() {
 
   // Set up settings sub-navigation
   setupSettingsNav();
+
+  // Set up doctor health check button
+  setupDoctorPanel();
+}
+
+// ── Doctor Health Check ──
+function setupDoctorPanel() {
+  const runBtn = document.getElementById('doctorRunBtn');
+  if (!runBtn) return;
+  runBtn.addEventListener('click', runDoctorCheck);
+}
+
+async function runDoctorCheck() {
+  const btn = document.getElementById('doctorRunBtn');
+  const loading = document.getElementById('doctorLoading');
+  const results = document.getElementById('doctorResults');
+  const empty = document.getElementById('doctorEmpty');
+  const checkList = document.getElementById('doctorCheckList');
+  const summary = document.getElementById('doctorSummary');
+
+  btn.disabled = true;
+  btn.textContent = 'Running...';
+  empty.style.display = 'none';
+  results.style.display = 'none';
+  loading.style.display = 'block';
+
+  try {
+    const res = await fetch('/api/doctor');
+    const data = await res.json();
+
+    checkList.innerHTML = '';
+    let hasError = false;
+    let hasWarning = false;
+
+    for (const [key, check] of Object.entries(data)) {
+      let icon, badgeClass, badgeText;
+      if (check.ok === true) {
+        icon = '&#x2713;';
+        badgeClass = 'pass';
+        badgeText = 'pass';
+      } else if (check.ok === false) {
+        icon = '&#x2717;';
+        if (check.required) { hasError = true; badgeClass = 'fail'; badgeText = 'fail'; }
+        else { hasWarning = true; badgeClass = 'warn'; badgeText = 'warn'; }
+      } else {
+        icon = '&#x26A0;';
+        hasWarning = true;
+        badgeClass = 'optional';
+        badgeText = 'optional';
+      }
+
+      const el = document.createElement('div');
+      el.className = 'doctor-check';
+      el.innerHTML = `
+        <span class="doctor-check-icon" style="color:var(--${badgeClass === 'pass' ? 'success' : badgeClass === 'fail' ? 'error' : 'warning'})">${icon}</span>
+        <div class="doctor-check-body">
+          <div class="doctor-check-name">${check.name}</div>
+          <div class="doctor-check-msg">${check.message || ''}</div>
+          ${check.hint ? `<div class="doctor-check-hint">${check.hint}</div>` : ''}
+        </div>
+        <span class="doctor-check-badge ${badgeClass}">${badgeText}</span>
+      `;
+      checkList.appendChild(el);
+    }
+
+    if (hasError) {
+      summary.style.background = 'rgba(255,105,96,0.08)';
+      summary.style.color = 'var(--error)';
+      summary.textContent = 'Some required checks failed. Fix the issues above to use vai.';
+    } else if (hasWarning) {
+      summary.style.background = 'rgba(255,192,16,0.08)';
+      summary.style.color = 'var(--warning)';
+      summary.textContent = 'All required checks passed. Some optional features are not configured.';
+    } else {
+      summary.style.background = 'rgba(0,212,170,0.08)';
+      summary.style.color = 'var(--success)';
+      summary.textContent = 'All checks passed. vai is ready to use!';
+    }
+
+    loading.style.display = 'none';
+    results.style.display = 'block';
+  } catch (err) {
+    loading.style.display = 'none';
+    empty.style.display = 'block';
+    empty.textContent = 'Health check failed: ' + err.message;
+  }
+
+  btn.disabled = false;
+  btn.textContent = 'Run Health Check';
 }
 
 // ── Update Checker ──
@@ -6867,6 +7952,13 @@ function initOnboarding() {
       body: '<strong>Chat with your knowledge base</strong> using retrieval-augmented generation. Voyage AI finds relevant documents, then your chosen LLM generates grounded answers with source citations.',
       arrow: 'left',
     },
+    {
+      target: '[data-tab="workflows"]',
+      icon: '\u2699\uFE0F',
+      title: 'Workflow Visualizer',
+      body: '<strong>Visualize and execute workflows</strong> as interactive DAGs. Browse built-in templates, inspect step configuration, and watch execution animate in real time.',
+      arrow: 'left',
+    },
     {
       target: '[data-tab="benchmark"]',
       icon: '⏱️',
@@ -8341,6 +9433,145 @@ function renderMarkdown(md) {
   return result.join('\n');
 }
 
+/**
+ * Tool metadata: icon, label, and a function to summarize the call for the thinking panel.
+ */
+const TOOL_META = {
+  vai_query:       { icon: '\uD83D\uDD0D', label: 'RAG Query',          verb: 'Searching',       descFn: a => a.query ? `"${a.query}"` : '' },
+  vai_search:      { icon: '\uD83D\uDD0E', label: 'Vector Search',      verb: 'Searching vectors', descFn: a => a.query ? `"${a.query}"` : '' },
+  vai_rerank:      { icon: '\u2195\uFE0F', label: 'Rerank',             verb: 'Reranking',       descFn: a => a.query ? `${a.documents?.length || '?'} docs for "${a.query}"` : '' },
+  vai_embed:       { icon: '\uD83E\uDDE0', label: 'Embed',              verb: 'Embedding',       descFn: a => a.text ? `"${a.text.slice(0, 60)}${a.text.length > 60 ? '...' : ''}"` : '' },
+  vai_similarity:  { icon: '\uD83C\uDFAF', label: 'Similarity',         verb: 'Comparing',       descFn: a => a.text1 ? `two texts` : '' },
+  vai_collections: { icon: '\uD83D\uDDC4\uFE0F', label: 'Collections',  verb: 'Discovering',     descFn: a => a.db ? `in ${a.db}` : 'available databases' },
+  vai_models:      { icon: '\uD83E\uDD16', label: 'Models',             verb: 'Listing',         descFn: () => 'available models' },
+  vai_topics:      { icon: '\uD83D\uDCDA', label: 'Topics',             verb: 'Browsing',        descFn: () => 'educational topics' },
+  vai_explain:     { icon: '\uD83D\uDCA1', label: 'Explain',            verb: 'Explaining',      descFn: a => a.topic || '' },
+  vai_estimate:    { icon: '\uD83D\uDCB0', label: 'Cost Estimate',      verb: 'Estimating',      descFn: a => a.docs ? `${a.docs} docs` : '' },
+  vai_ingest:      { icon: '\uD83D\uDCE5', label: 'Ingest',             verb: 'Ingesting',       descFn: a => a.source || 'document' },
+};
+const DEFAULT_TOOL_META = { icon: '\u2699\uFE0F', label: '', verb: 'Running', descFn: () => '' };
+
+/**
+ * Create the thinking panel <details> element.
+ * Returns { panel, timeline, addStep, finalize }.
+ */
+function createThinkingPanel() {
+  const panel = document.createElement('details');
+  panel.className = 'chat-thinking';
+  panel.open = true;
+
+  const summary = document.createElement('summary');
+  summary.innerHTML =
+    '<span class="thinking-icon">\uD83E\uDDE0</span>' +
+    '<span class="thinking-label">Thinking</span>' +
+    '<span class="thinking-count">0</span>' +
+    '<span class="thinking-elapsed"></span>' +
+    '<span class="thinking-chevron">\u25B6</span>';
+  panel.appendChild(summary);
+
+  const timeline = document.createElement('div');
+  timeline.className = 'thinking-timeline';
+  panel.appendChild(timeline);
+
+  let stepCount = 0;
+  let activeStep = null;
+  const startTime = Date.now();
+  let elapsedTimer = null;
+
+  // Update the elapsed time in the summary
+  function tickElapsed() {
+    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+    summary.querySelector('.thinking-elapsed').textContent = elapsed + 's';
+  }
+  elapsedTimer = setInterval(tickElapsed, 200);
+  tickElapsed();
+
+  function addStep(data) {
+    const meta = TOOL_META[data.name] || DEFAULT_TOOL_META;
+    const desc = meta.descFn(data.args || {});
+
+    // Mark previous active step as done
+    if (activeStep) {
+      activeStep.classList.remove('active');
+      activeStep.classList.add('done');
+    }
+
+    stepCount++;
+    summary.querySelector('.thinking-count').textContent = stepCount;
+
+    const step = document.createElement('div');
+    step.className = 'thinking-step active';
+    if (data.error) step.className = 'thinking-step error';
+
+    const iconDiv = document.createElement('div');
+    iconDiv.className = 'thinking-step-icon';
+    iconDiv.textContent = meta.icon;
+    step.appendChild(iconDiv);
+
+    const body = document.createElement('div');
+    body.className = 'thinking-step-body';
+
+    const header = document.createElement('div');
+    header.className = 'thinking-step-header';
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'thinking-step-name';
+    nameSpan.textContent = meta.verb + (desc ? ' ' : '') + (meta.label || data.name);
+    header.appendChild(nameSpan);
+
+    if (data.timeMs !== undefined) {
+      const timeSpan = document.createElement('span');
+      timeSpan.className = 'thinking-step-time';
+      timeSpan.textContent = data.timeMs + 'ms';
+      header.appendChild(timeSpan);
+    }
+    body.appendChild(header);
+
+    if (desc) {
+      const descDiv = document.createElement('div');
+      descDiv.className = 'thinking-step-desc';
+      descDiv.textContent = desc;
+      body.appendChild(descDiv);
+    }
+
+    if (data.error) {
+      const errDiv = document.createElement('div');
+      errDiv.className = 'thinking-step-detail';
+      errDiv.style.color = '#e74c3c';
+      errDiv.textContent = data.error;
+      body.appendChild(errDiv);
+    } else if (data.resultSummary) {
+      const detailDiv = document.createElement('div');
+      detailDiv.className = 'thinking-step-detail';
+      detailDiv.innerHTML = data.resultSummary;
+      body.appendChild(detailDiv);
+    }
+
+    step.appendChild(body);
+    timeline.appendChild(step);
+
+    if (!data.error) activeStep = step;
+
+    return step;
+  }
+
+  function finalize() {
+    clearInterval(elapsedTimer);
+    // Final elapsed
+    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+    summary.querySelector('.thinking-elapsed').textContent = elapsed + 's';
+    summary.querySelector('.thinking-label').textContent = 'Thought for ' + elapsed + 's';
+    summary.querySelector('.thinking-icon').textContent = '\u2728';
+    // Mark last step done and collapse
+    if (activeStep) {
+      activeStep.classList.remove('active');
+      activeStep.classList.add('done');
+    }
+    panel.open = false;
+  }
+
+  return { panel, addStep, finalize };
+}
+
 function addChatMessage(role, content, sources) {
   const container = document.getElementById('chatMessages');
   const div = document.createElement('div');
@@ -8350,6 +9581,26 @@ function addChatMessage(role, content, sources) {
   contentSpan.textContent = content;
   div.appendChild(contentSpan);
 
+  // Add copy button for assistant messages
+  if (role === 'assistant') {
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'chat-copy-btn';
+    copyBtn.title = 'Copy to clipboard';
+    copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 0 1 2 9.5V3.5A1.5 1.5 0 0 1 3.5 2h6A1.5 1.5 0 0 1 11 3.5V5"/></svg>';
+    copyBtn.addEventListener('click', () => {
+      const text = contentSpan.textContent || contentSpan.innerText;
+      navigator.clipboard.writeText(text).then(() => {
+        copyBtn.classList.add('copied');
+        copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8.5l3 3 7-7"/></svg>';
+        setTimeout(() => {
+          copyBtn.classList.remove('copied');
+          copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 0 1 2 9.5V3.5A1.5 1.5 0 0 1 3.5 2h6A1.5 1.5 0 0 1 11 3.5V5"/></svg>';
+        }, 2000);
+      });
+    });
+    div.appendChild(copyBtn);
+  }
+
   if (sources && sources.length > 0) {
     const details = document.createElement('details');
     details.className = 'chat-sources';
@@ -8433,7 +9684,7 @@ async function sendChatMessage() {
     let assistantDiv = null;
     let fullText = '';
     let sources = [];
-    let toolCallsDiv = null;
+    let thinkingPanel = null;
 
     while (true) {
       const { done, value } = await reader.read();
@@ -8457,33 +9708,13 @@ async function sendChatMessage() {
           }
 
           if (currentEvent === 'tool_call') {
-            if (!toolCallsDiv) {
-              toolCallsDiv = document.createElement('div');
-              toolCallsDiv.className = 'chat-tool-calls';
-              document.getElementById('chatMessages').appendChild(toolCallsDiv);
-            }
-            const tc = document.createElement('div');
-            tc.className = 'chat-tool-call' + (data.error ? ' error' : '');
-            const icon = document.createElement('span');
-            icon.className = 'tool-icon';
-            icon.textContent = '\u2699';
-            tc.appendChild(icon);
-            const nameSpan = document.createElement('span');
-            nameSpan.className = 'tool-name';
-            nameSpan.textContent = data.name;
-            tc.appendChild(nameSpan);
-            const timeSpan = document.createElement('span');
-            timeSpan.className = 'tool-time';
-            timeSpan.textContent = (data.timeMs || 0) + 'ms';
-            tc.appendChild(timeSpan);
-            if (data.error) {
-              const errSpan = document.createElement('span');
-              errSpan.className = 'tool-error';
-              errSpan.textContent = data.error;
-              tc.appendChild(errSpan);
+            // Create thinking panel on first tool call
+            if (!thinkingPanel) {
+              typing.remove();
+              thinkingPanel = createThinkingPanel();
+              document.getElementById('chatMessages').appendChild(thinkingPanel.panel);
             }
-            toolCallsDiv.appendChild(tc);
-            typing.textContent = 'Calling ' + data.name + '...';
+            thinkingPanel.addStep(data);
             document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
           }
 
@@ -8498,6 +9729,8 @@ async function sendChatMessage() {
           }
 
           if (currentEvent === 'done') {
+            // Finalize the thinking panel (collapse, show elapsed)
+            if (thinkingPanel) thinkingPanel.finalize();
             // Render accumulated text as markdown for assistant messages
             if (assistantDiv && fullText) {
               const contentEl = assistantDiv.querySelector('.chat-message-content');
@@ -8537,6 +9770,7 @@ async function sendChatMessage() {
 
   } catch (err) {
     if (typing.parentNode) typing.remove();
+    if (thinkingPanel) thinkingPanel.finalize();
     addChatMessage('system-msg', `Error: ${err.message}`);
   } finally {
     sendBtn.disabled = false;
@@ -8751,6 +9985,1981 @@ init();
   </div>
 </div>
 
+<!-- ========== WORKFLOW VISUALIZER JS ========== -->
+<script>
+// ── Workflow Visualizer ──
+
+// escapeHtml is defined in the main IIFE scope and not accessible here — redeclare it
+function escapeHtml(str) {
+  if (str == null) return '';
+  const s = typeof str === 'string' ? str : String(str);
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+const WF_NODE_META = {
+  query:       { icon: '\u{1F50D}', label: 'RAG Query',       color: '#40E0FF', category: 'retrieval' },
+  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: '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;
+const WF_NODE_GAP = 100;
+const WF_PAD = 80;
+const WF_PORT_R = 5; // Port circle radius
+
+let wfState = {
+  workflows: [],
+  examples: [],
+  activeWorkflow: null,
+  selectedNodeId: null,
+  executionState: {},
+  executionResults: {},
+  nodePositions: {},
+  layers: [],
+  graph: {},
+  zoom: 1,
+  panX: 0,
+  panY: 0,
+  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 [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');
+    if (list) list.innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:12px;">Failed to load workflows</div>';
+  }
+}
+
+function wfRenderLibrary() {
+  const list = document.getElementById('wfLibraryList');
+  if (!list) return;
+  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;
+  }
+
+  // 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) {
+  // Highlight in library
+  document.querySelectorAll('.wf-library-item').forEach(el => {
+    el.classList.toggle('active', el.dataset.wfName === name);
+  });
+
+  try {
+    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) {
+    console.error('Failed to load workflow:', err);
+  }
+}
+
+// ── Load workflow from file ──
+function wfLoadFromFile() {
+  document.getElementById('wfFileInput').click();
+}
+
+function wfHandleFileLoad(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = async (e) => {
+    try {
+      const definition = JSON.parse(e.target.result);
+      if (!definition.steps || !Array.isArray(definition.steps)) {
+        alert('Invalid workflow: missing "steps" array');
+        return;
+      }
+      // Validate via server
+      const valRes = await fetch('/api/workflows/validate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ definition }),
+      });
+      const valData = await valRes.json();
+      if (!valData.valid) {
+        alert('Workflow validation failed:\n' + (valData.errors || []).join('\n'));
+        return;
+      }
+      // Deselect any library item
+      document.querySelectorAll('.wf-library-item.active').forEach(el => el.classList.remove('active'));
+      // Load the workflow
+      wfState.activeWorkflow = definition;
+      wfState.selectedNodeId = null;
+      wfState.executionState = {};
+      wfState.executionResults = {};
+      wfSetToolbarEnabled(true);
+      document.getElementById('wfCanvasEmpty').style.display = 'none';
+      wfHideExecStatus();
+      await wfRenderWorkflow(definition);
+      wfOpenInspector();
+      wfUpdateInspector();
+    } catch (err) {
+      alert('Failed to parse workflow file: ' + err.message);
+    }
+  };
+  reader.readAsText(file);
+  // Reset file input so the same file can be re-loaded
+  event.target.value = '';
+}
+
+// ── DAG Layout + SVG Rendering ──
+async function wfRenderWorkflow(definition) {
+  const svg = document.getElementById('wf-canvas');
+  // Clear previous nodes and edges (keep defs)
+  svg.querySelectorAll('.wf-node, .wf-edge-group').forEach(el => el.remove());
+
+  // Get execution plan from server
+  let layers, graph;
+  try {
+    const res = await fetch('/api/workflows/plan', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ definition }),
+    });
+    const data = await res.json();
+    layers = data.layers;
+    graph = data.graph;
+  } catch (err) {
+    console.error('Failed to get execution plan:', err);
+    return;
+  }
+
+  wfState.layers = layers;
+  wfState.graph = graph;
+
+  // Build step lookup
+  const stepMap = {};
+  definition.steps.forEach(s => { stepMap[s.id] = s; });
+
+  // Calculate positions
+  const positions = {};
+  const maxLayerSize = Math.max(...layers.map(l => l.length));
+  const totalW = layers.length * WF_LAYER_GAP;
+  const totalH = maxLayerSize * (WF_NODE_H + WF_NODE_GAP);
+
+  layers.forEach((layer, li) => {
+    const x = WF_PAD + li * WF_LAYER_GAP;
+    const layerH = layer.length * WF_NODE_H + (layer.length - 1) * WF_NODE_GAP;
+    const startY = WF_PAD + (totalH - layerH) / 2;
+    layer.forEach((stepId, ni) => {
+      positions[stepId] = {
+        x,
+        y: startY + ni * (WF_NODE_H + WF_NODE_GAP),
+      };
+    });
+  });
+  wfState.nodePositions = positions;
+
+  // Build port-visibility maps: which nodes have input deps, which have dependents
+  const nodeHasDeps = {};       // node has incoming edges (show input port)
+  const nodeHasDependents = {}; // node has outgoing edges (show output port)
+  for (const [stepId, deps] of Object.entries(graph)) {
+    if (!deps || !Array.isArray(deps)) continue;
+    deps.forEach(rawDepId => {
+      const depId = rawDepId.replace(/^!/, '');
+      if (positions[depId] && positions[stepId]) {
+        nodeHasDeps[stepId] = true;
+        nodeHasDependents[depId] = true;
+      }
+    });
+  }
+
+  // Draw edges first (behind nodes)
+  const edgeGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  edgeGroup.classList.add('wf-edge-group');
+  for (const [stepId, deps] of Object.entries(graph)) {
+    if (!deps || !Array.isArray(deps)) continue;
+    deps.forEach(rawDepId => {
+      // Strip negation prefix (e.g., "!similarity_check" -> "similarity_check")
+      const depId = rawDepId.replace(/^!/, '');
+      if (positions[depId] && positions[stepId]) {
+        const edge = wfDrawEdge(depId, stepId, positions);
+        edgeGroup.appendChild(edge);
+      }
+    });
+  }
+  svg.appendChild(edgeGroup);
+
+  // Draw nodes
+  for (const step of definition.steps) {
+    const pos = positions[step.id];
+    if (!pos) continue;
+    const state = wfState.executionState[step.id] || 'idle';
+    const hasDeps = !!nodeHasDeps[step.id];
+    const hasDependents = !!nodeHasDependents[step.id];
+    const nodeGroup = wfDrawNode(step, pos.x, pos.y, state, hasDeps, hasDependents);
+    svg.appendChild(nodeGroup);
+  }
+
+  // Set viewBox to fit
+  wfFitToView();
+}
+
+function wfDrawNode(step, x, y, state, hasDeps, hasDependents) {
+  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);
+  if (wfState.selectedNodeId === step.id) g.classList.add('selected');
+  g.dataset.stepId = step.id;
+  g.setAttribute('transform', `translate(${x}, ${y})`);
+  g.addEventListener('click', (e) => {
+    e.stopPropagation();
+    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);
+  rect.setAttribute('height', WF_NODE_H);
+  rect.setAttribute('fill', meta.color);
+  rect.setAttribute('stroke', meta.color);
+  rect.setAttribute('opacity', '0.85');
+  g.appendChild(rect);
+
+  // 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', 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): 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', 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 (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');
+  label.classList.add('wf-node-label');
+  label.setAttribute('x', WF_NODE_W / 2 + 10);
+  label.setAttribute('y', WF_NODE_H / 2 - 7);
+  const maxChars = 20;
+  const displayName = (step.name || step.id).length > maxChars
+    ? (step.name || step.id).slice(0, maxChars - 2) + '..'
+    : (step.name || step.id);
+  label.textContent = displayName;
+  g.appendChild(label);
+
+  // Tool badge
+  const badge = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  badge.classList.add('wf-node-badge');
+  badge.setAttribute('x', WF_NODE_W / 2 + 10);
+  badge.setAttribute('y', WF_NODE_H / 2 + 10);
+  badge.textContent = meta.label;
+  g.appendChild(badge);
+
+  // Condition indicator
+  if (step.condition) {
+    const cond = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    cond.classList.add('wf-node-condition');
+    cond.setAttribute('x', WF_NODE_W - 8);
+    cond.setAttribute('y', 14);
+    cond.textContent = '\u26A1';
+    g.appendChild(cond);
+  }
+
+  // Status overlay (for execution)
+  if (state === 'completed') {
+    const check = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    check.classList.add('wf-node-status');
+    check.setAttribute('x', WF_NODE_W - 18);
+    check.setAttribute('y', WF_NODE_H / 2);
+    check.textContent = '\u2713';
+    g.appendChild(check);
+  } else if (state === 'error') {
+    const errIcon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    errIcon.classList.add('wf-node-status');
+    errIcon.setAttribute('x', WF_NODE_W - 18);
+    errIcon.setAttribute('y', WF_NODE_H / 2);
+    errIcon.textContent = '\u2717';
+    g.appendChild(errIcon);
+  } else if (state === 'skipped') {
+    const skip = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    skip.classList.add('wf-node-status');
+    skip.setAttribute('x', WF_NODE_W - 18);
+    skip.setAttribute('y', WF_NODE_H / 2);
+    skip.textContent = '\u2500';
+    g.appendChild(skip);
+  }
+
+  // Time badge (if completed)
+  const result = wfState.executionResults[step.id];
+  if (result && result.timeMs !== undefined) {
+    const time = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    time.classList.add('wf-node-time');
+    time.setAttribute('x', WF_NODE_W / 2);
+    time.setAttribute('y', WF_NODE_H + 16);
+    time.textContent = result.timeMs + 'ms';
+    g.appendChild(time);
+  }
+
+  return g;
+}
+
+function wfDrawEdge(fromId, toId, positions) {
+  const from = positions[fromId];
+  const to = positions[toId];
+  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  g.classList.add('wf-edge-group-item');
+  g.dataset.from = fromId;
+  g.dataset.to = toId;
+
+  // Port positions: output port on right side of source, input port on left side of target
+  const x1 = from.x + WF_NODE_W;
+  const y1 = from.y + WF_NODE_H / 2;
+  const x2 = to.x;
+  const y2 = to.y + WF_NODE_H / 2;
+
+  // Detect backward edges (target is same column or to the left)
+  const isBackward = x2 <= x1;
+
+  let d;
+  if (isBackward) {
+    // Route backward edges: go down from output, loop under/over, come in from left of target
+    const midY = Math.max(from.y + WF_NODE_H, to.y + WF_NODE_H) + 40;
+    d = `M ${x1} ${y1} C ${x1 + 50} ${y1}, ${x1 + 50} ${midY}, ${(x1 + x2) / 2} ${midY} C ${x2 - 50} ${midY}, ${x2 - 50} ${y2}, ${x2} ${y2}`;
+  } else {
+    // Normal left-to-right bezier
+    const dx = Math.abs(x2 - x1);
+    const tension = Math.max(dx * 0.4, 40);
+    d = `M ${x1} ${y1} C ${x1 + tension} ${y1}, ${x2 - tension} ${y2}, ${x2} ${y2}`;
+  }
+
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.classList.add('wf-edge');
+  if (isBackward) path.classList.add('wf-edge--backward');
+  path.setAttribute('d', d);
+
+  // Set state-based classes
+  const fromState = wfState.executionState[fromId];
+  const toState = wfState.executionState[toId];
+  if (toState === 'running') path.classList.add('wf-edge--active');
+  else if (fromState === 'completed' && (toState === 'completed' || toState === 'skipped')) path.classList.add('wf-edge--complete');
+
+  g.appendChild(path);
+  return g;
+}
+
+// ── Inspector Toggle ──
+function wfToggleInspector() {
+  const panel = document.getElementById('wfInspector');
+  const btn = document.getElementById('wfInspectorToggle');
+  if (!panel) return;
+  panel.classList.toggle('collapsed');
+  if (btn) btn.innerHTML = panel.classList.contains('collapsed') ? '&lsaquo;' : '&rsaquo;';
+}
+
+function wfOpenInspector() {
+  const panel = document.getElementById('wfInspector');
+  const btn = document.getElementById('wfInspectorToggle');
+  if (!panel || !panel.classList.contains('collapsed')) return;
+  panel.classList.remove('collapsed');
+  if (btn) btn.innerHTML = '&rsaquo;';
+}
+
+// ── Node Selection ──
+function wfSelectNode(stepId) {
+  wfState.selectedNodeId = stepId;
+  // Update visual selection
+  document.querySelectorAll('.wf-node').forEach(n => {
+    n.classList.toggle('selected', n.dataset.stepId === stepId);
+  });
+  wfOpenInspector();
+  wfUpdateInspector();
+}
+
+function wfDeselectNode() {
+  wfState.selectedNodeId = null;
+  document.querySelectorAll('.wf-node.selected').forEach(n => n.classList.remove('selected'));
+  wfUpdateInspector();
+}
+
+// ── Inspector ──
+function wfUpdateInspector() {
+  const body = document.getElementById('wfInspectorBody');
+  const header = document.getElementById('wfInspectorHeader');
+  if (!body || !header) return;
+
+  const def = wfState.activeWorkflow;
+  if (!def) {
+    header.textContent = 'Inspector';
+    body.innerHTML = '<div class="wf-inspector-empty">Select a workflow to view details</div>';
+    return;
+  }
+
+  try {
+  if (!wfState.selectedNodeId) {
+    // Show workflow-level info
+    header.textContent = def.name || 'Workflow';
+    let html = '';
+
+    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>
+        <textarea class="wf-inspector-input" rows="2" style="resize:vertical;" onchange="wfEditWorkflowField('description', this.value)">${escapeHtml(def.description || '')}</textarea>
+      </div>`;
+      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>`;
+      }
+
+      // 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>';
+      }
+
+      // 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>`;
+
+      // 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 (shown in both modes)
+    if (wfState.executionResults._done) {
+      const r = wfState.executionResults._done;
+      const doneJson = JSON.stringify(r.output, null, 2);
+      html += `<div class="wf-inspector-section">
+        <div class="wf-inspector-section-title">Result</div>
+        <div class="wf-inspector-result success">
+          <div style="font-weight:600;margin-bottom:4px;">Completed in ${r.totalTimeMs}ms</div>
+          <div class="wf-inspector-code" style="max-height:150px;overflow:auto;">${escapeHtml(doneJson)}</div>
+        </div>
+        <button class="wf-output-expand-btn" data-expand-step="_done">&#x2922; Expand</button>
+      </div>`;
+    }
+
+    body.innerHTML = html;
+    wfBindExpandButtons(body);
+    return;
+  }
+
+  // Show step details
+  const step = def.steps.find(s => s.id === wfState.selectedNodeId);
+  if (!step) {
+    body.innerHTML = '<div class="wf-inspector-empty">Step not found: ' + escapeHtml(wfState.selectedNodeId) + '</div>';
+    return;
+  }
+
+  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 (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}"><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>`;
+
+  if (wfState.builderMode) {
+    // Builder: editable step fields
+    const sid = escapeHtml(step.id);
+    html += `<div class="wf-inspector-section">
+      <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>';
+    }
+
+    // Condition
+    html += `<div class="wf-inspector-section">
+      <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>`;
+
+    // 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">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 (shown in both modes)
+  const result = wfState.executionResults[step.id];
+  const state = wfState.executionState[step.id];
+  if (state === 'completed' && result) {
+    const outputJson = result.output ? JSON.stringify(result.output, null, 2) : '';
+    const stepTitle = step.name || step.id;
+    html += `<div class="wf-inspector-section">
+      <div class="wf-inspector-section-title">Result</div>
+      <div class="wf-inspector-result success">
+        <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">${result.timeMs}ms${result.summary ? ', ' + result.summary : ''}</div>
+        ${outputJson ? '<div class="wf-inspector-code" style="max-height:120px;overflow:auto;">' + escapeHtml(outputJson) + '</div>' : ''}
+      </div>
+      ${outputJson ? '<button class="wf-output-expand-btn" data-expand-step="' + escapeHtml(step.id) + '">&#x2922; Expand</button>' : ''}
+    </div>`;
+  } else if (state === 'error' && result) {
+    html += `<div class="wf-inspector-section">
+      <div class="wf-inspector-section-title">Error</div>
+      <div class="wf-inspector-result error">
+        <div style="font-size:12px;margin-bottom:4px;">${escapeHtml(result.error || 'Unknown error')}</div>
+      </div>
+    </div>`;
+  } else if (state === 'skipped' && result) {
+    html += `<div class="wf-inspector-section">
+      <div class="wf-inspector-section-title">Skipped</div>
+      <div style="font-size:12px;color:var(--text-muted);">${escapeHtml(result.reason || 'Condition not met')}</div>
+    </div>`;
+  }
+
+  body.innerHTML = html;
+  wfBindExpandButtons(body);
+  } catch (err) {
+    console.error('Inspector render error:', err);
+    body.innerHTML = '<div class="wf-inspector-empty" style="color:#e74c3c;">Error rendering inspector: ' + escapeHtml(err.message) + '</div>';
+  }
+}
+
+function wfBindExpandButtons(container) {
+  container.querySelectorAll('.wf-output-expand-btn[data-expand-step]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const stepId = btn.dataset.expandStep;
+      const result = wfState.executionResults[stepId];
+      if (!result) return;
+      let title, content;
+      if (stepId === '_done') {
+        title = 'Workflow Output';
+        content = JSON.stringify(result.output, null, 2);
+      } else {
+        const def = wfState.activeWorkflow;
+        const step = def ? def.steps.find(s => s.id === stepId) : null;
+        title = (step ? step.name || step.id : stepId) + ' Output';
+        content = JSON.stringify(result.output, null, 2);
+      }
+      wfOpenOutputModal(title, content);
+    });
+  });
+}
+
+// escapeHtml is already defined globally — reuse it
+
+// ── Toolbar helpers ──
+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 ──
+function wfExportJson() {
+  const def = wfState.activeWorkflow;
+  if (!def) return;
+  const json = JSON.stringify(def, null, 2);
+  const name = (def.name || 'workflow').replace(/\s+/g, '-').toLowerCase();
+  const blob = new Blob([json], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name + '.vai-workflow.json';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// ── Dry Run ──
+function wfDryRun() {
+  const def = wfState.activeWorkflow;
+  if (!def || !wfState.layers) return;
+
+  const layers = wfState.layers;
+  const stepMap = {};
+  def.steps.forEach(s => { stepMap[s.id] = s; });
+
+  // Build layer HTML
+  let layersHtml = '';
+  let totalSteps = 0;
+  let conditionalSteps = 0;
+
+  layers.forEach((layer, i) => {
+    const parallel = layer.length > 1 ? ' (parallel)' : '';
+    layersHtml += '<div class="wf-dryrun-layer">';
+    layersHtml += '<div class="wf-dryrun-layer-title">';
+    layersHtml += '<span class="wf-dryrun-layer-badge">' + (i + 1) + '</span>';
+    layersHtml += ' Layer ' + (i + 1) + parallel;
+    layersHtml += '</div>';
+
+    layer.forEach(stepId => {
+      const step = stepMap[stepId];
+      if (!step) return;
+      totalSteps++;
+      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"><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>';
+      if (step.condition) {
+        conditionalSteps++;
+        layersHtml += '<div class="wf-dryrun-step-cond">\u26A1 ' + escapeHtml(step.condition) + '</div>';
+      }
+      layersHtml += '</div></div>';
+    });
+
+    layersHtml += '</div>';
+  });
+
+  // Summary stats
+  const parallelLayers = layers.filter(l => l.length > 1).length;
+  let summaryHtml = '<div class="wf-dryrun-summary">';
+  summaryHtml += '<div class="wf-dryrun-stat"><div class="wf-dryrun-stat-value">' + totalSteps + '</div><div class="wf-dryrun-stat-label">Steps</div></div>';
+  summaryHtml += '<div class="wf-dryrun-stat"><div class="wf-dryrun-stat-value">' + layers.length + '</div><div class="wf-dryrun-stat-label">Layers</div></div>';
+  summaryHtml += '<div class="wf-dryrun-stat"><div class="wf-dryrun-stat-value">' + parallelLayers + '</div><div class="wf-dryrun-stat-label">Parallel</div></div>';
+  if (conditionalSteps > 0) {
+    summaryHtml += '<div class="wf-dryrun-stat"><div class="wf-dryrun-stat-value">' + conditionalSteps + '</div><div class="wf-dryrun-stat-label">Conditional</div></div>';
+  }
+  summaryHtml += '</div>';
+
+  // Inputs summary
+  let inputsHtml = '';
+  if (def.inputs && Object.keys(def.inputs).length > 0) {
+    inputsHtml += '<div style="margin-bottom:12px;font-size:12px;">';
+    inputsHtml += '<div style="font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);margin-bottom:6px;">Required Inputs</div>';
+    for (const [key, spec] of Object.entries(def.inputs)) {
+      const req = spec.required ? ' *' : '';
+      inputsHtml += '<div style="margin-bottom:2px;"><span style="font-weight:600;color:var(--text);">' + escapeHtml(key) + req + '</span>';
+      inputsHtml += ' <span style="color:var(--text-muted);">(' + escapeHtml(spec.type || 'string') + ')</span></div>';
+    }
+    inputsHtml += '</div>';
+  }
+
+  // Create overlay
+  const canvasArea = document.querySelector('.wf-canvas-area');
+  // Remove any existing overlay
+  canvasArea.querySelectorAll('.wf-dryrun-overlay').forEach(el => el.remove());
+
+  const overlay = document.createElement('div');
+  overlay.className = 'wf-dryrun-overlay';
+  overlay.innerHTML = '<div class="wf-dryrun-panel">' +
+    '<div class="wf-dryrun-header">' +
+      '<span class="wf-dryrun-title">Execution Plan: ' + escapeHtml(def.name || 'Workflow') + '</span>' +
+      '<button class="wf-dryrun-close" onclick="wfCloseDryRun()" title="Close">&times;</button>' +
+    '</div>' +
+    '<div class="wf-dryrun-body">' +
+      inputsHtml +
+      summaryHtml +
+      '<div style="margin-top:16px;">' + layersHtml + '</div>' +
+    '</div>' +
+  '</div>';
+
+  // Click backdrop to close
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) wfCloseDryRun();
+  });
+
+  canvasArea.appendChild(overlay);
+}
+
+function wfCloseDryRun() {
+  document.querySelectorAll('.wf-dryrun-overlay').forEach(el => el.remove());
+}
+
+// ── Execution ──
+let wfAbortController = null;
+let wfExecTimer = null;
+let wfExecStartTime = 0;
+const WF_EXEC_TIMEOUT_MS = 120000; // 2 minute total timeout
+
+function wfShowExecStatus(text, state) {
+  const bar = document.getElementById('wfExecStatus');
+  const textEl = document.getElementById('wfExecStatusText');
+  if (!bar || !textEl) return;
+  bar.style.display = 'flex';
+  bar.className = 'wf-exec-status' + (state ? ' ' + state : '');
+  textEl.textContent = text;
+}
+
+function wfHideExecStatus() {
+  const bar = document.getElementById('wfExecStatus');
+  if (bar) bar.style.display = 'none';
+}
+
+function wfUpdateExecTimer() {
+  const timeEl = document.getElementById('wfExecStatusTime');
+  if (!timeEl || !wfState.executing) return;
+  const elapsed = Date.now() - wfExecStartTime;
+  const secs = (elapsed / 1000).toFixed(1);
+  timeEl.textContent = secs + 's';
+
+  // Check timeout
+  if (elapsed > WF_EXEC_TIMEOUT_MS) {
+    wfStopExecution('Execution timed out after ' + (WF_EXEC_TIMEOUT_MS / 1000) + 's');
+    return;
+  }
+  wfExecTimer = requestAnimationFrame(wfUpdateExecTimer);
+}
+
+function wfStopExecution(reason) {
+  if (!wfState.executing) return;
+  if (wfAbortController) {
+    wfAbortController.abort();
+    wfAbortController = null;
+  }
+  if (wfExecTimer) {
+    cancelAnimationFrame(wfExecTimer);
+    wfExecTimer = null;
+  }
+
+  // Mark any still-running nodes as error
+  const def = wfState.activeWorkflow;
+  if (def) {
+    def.steps.forEach(s => {
+      if (wfState.executionState[s.id] === 'running') {
+        wfState.executionState[s.id] = 'error';
+        wfState.executionResults[s.id] = { error: reason || 'Stopped by user' };
+      } else if (wfState.executionState[s.id] === 'pending') {
+        wfState.executionState[s.id] = 'skipped';
+        wfState.executionResults[s.id] = { reason: reason || 'Stopped by user' };
+      }
+    });
+    wfRefreshNodes();
+  }
+
+  const stopReason = reason || 'Stopped by user';
+  wfShowExecStatus(stopReason, reason && reason.includes('timed out') ? 'error' : 'stopped');
+  wfState.executing = false;
+  wfSetToolbarEnabled(true);
+  document.getElementById('wfStopBtn').style.display = 'none';
+  wfUpdateInspector();
+}
+
+// ── Input Modal (pre-execution) ──
+
+function wfShowInputModal() {
+  const def = wfState.activeWorkflow;
+  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;
+
+  const inputs = {};
+  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();
+  wfExecStartTime = Date.now();
+  wfSetToolbarEnabled(false);
+  document.getElementById('wfStopBtn').style.display = '';
+  wfShowExecStatus('Running...', '');
+  wfExecTimer = requestAnimationFrame(wfUpdateExecTimer);
+
+  // Reset all nodes to pending
+  def.steps.forEach(s => { wfState.executionState[s.id] = 'pending'; });
+  wfRefreshNodes();
+
+  let hasError = false;
+  let errorMessage = '';
+
+  try {
+    const res = await fetch('/api/workflows/execute', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ definition: def, inputs }),
+      signal: wfAbortController.signal,
+    });
+
+    if (!res.ok) {
+      throw new Error('Server returned ' + res.status + ': ' + (await res.text()));
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let currentEvent = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        if (line.startsWith('event: ')) {
+          currentEvent = line.slice(7).trim();
+        } else if (line.startsWith('data: ') && currentEvent) {
+          let data;
+          try { data = JSON.parse(line.slice(6)); } catch { continue; }
+
+          if (currentEvent === 'step_start') {
+            wfState.executionState[data.stepId] = 'running';
+            const stepName = (def.steps.find(s => s.id === data.stepId) || {}).name || data.stepId;
+            wfShowExecStatus('Running: ' + stepName, '');
+            wfRefreshNodes();
+          } else if (currentEvent === 'step_complete') {
+            wfState.executionState[data.stepId] = 'completed';
+            wfState.executionResults[data.stepId] = {
+              output: data.output,
+              timeMs: data.timeMs,
+              summary: data.summary || '',
+            };
+            wfRefreshNodes();
+            if (wfState.selectedNodeId === data.stepId) wfUpdateInspector();
+          } else if (currentEvent === 'step_skip') {
+            wfState.executionState[data.stepId] = 'skipped';
+            wfState.executionResults[data.stepId] = { reason: data.reason };
+            wfRefreshNodes();
+            if (wfState.selectedNodeId === data.stepId) wfUpdateInspector();
+          } else if (currentEvent === 'step_error') {
+            wfState.executionState[data.stepId] = 'error';
+            wfState.executionResults[data.stepId] = { error: data.error };
+            hasError = true;
+            errorMessage = data.error || 'Step failed';
+            wfRefreshNodes();
+            if (wfState.selectedNodeId === data.stepId) wfUpdateInspector();
+          } else if (currentEvent === 'done') {
+            wfState.executionResults._done = data;
+            if (!wfState.selectedNodeId) wfUpdateInspector();
+          } else if (currentEvent === 'error') {
+            hasError = true;
+            errorMessage = data.error || 'Workflow error';
+            console.error('Workflow execution error:', data.error);
+          }
+          currentEvent = '';
+        }
+      }
+    }
+  } catch (err) {
+    if (err.name === 'AbortError') {
+      // Handled by wfStopExecution
+      return;
+    }
+    hasError = true;
+    errorMessage = err.message || 'Execution failed';
+    console.error('Workflow execution failed:', err);
+    // Mark running nodes as error
+    def.steps.forEach(s => {
+      if (wfState.executionState[s.id] === 'running') {
+        wfState.executionState[s.id] = 'error';
+        wfState.executionResults[s.id] = { error: errorMessage };
+      }
+    });
+    wfRefreshNodes();
+  }
+
+  if (wfExecTimer) { cancelAnimationFrame(wfExecTimer); wfExecTimer = null; }
+  wfAbortController = null;
+  wfState.executing = false;
+  wfSetToolbarEnabled(true);
+  document.getElementById('wfStopBtn').style.display = 'none';
+
+  const elapsed = ((Date.now() - wfExecStartTime) / 1000).toFixed(1);
+  if (hasError) {
+    wfShowExecStatus('Failed: ' + errorMessage, 'error');
+  } else {
+    wfShowExecStatus('Completed in ' + elapsed + 's', 'done');
+  }
+  wfUpdateInspector();
+}
+
+function wfRefreshNodes() {
+  // Re-render the full SVG (simple approach: redraw)
+  if (wfState.activeWorkflow) {
+    const svg = document.getElementById('wf-canvas');
+    const def = wfState.activeWorkflow;
+    const positions = wfState.nodePositions;
+
+    // Remove existing nodes and edges
+    svg.querySelectorAll('.wf-node, .wf-edge-group').forEach(el => el.remove());
+
+    // Redraw edges
+    const edgeGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    edgeGroup.classList.add('wf-edge-group');
+    for (const [stepId, deps] of Object.entries(wfState.graph)) {
+      if (!deps || !Array.isArray(deps)) continue;
+      deps.forEach(rawDepId => {
+        const depId = rawDepId.replace(/^!/, '');
+        if (positions[depId] && positions[stepId]) {
+          edgeGroup.appendChild(wfDrawEdge(depId, stepId, positions));
+        }
+      });
+    }
+    svg.appendChild(edgeGroup);
+
+    // Redraw nodes
+    for (const step of def.steps) {
+      const pos = positions[step.id];
+      if (!pos) continue;
+      const state = wfState.executionState[step.id] || 'idle';
+      svg.appendChild(wfDrawNode(step, pos.x, pos.y, state));
+    }
+  }
+}
+
+function wfResetExecution() {
+  if (wfState.executing) return;
+  wfState.executionState = {};
+  wfState.executionResults = {};
+  wfHideExecStatus();
+  wfRefreshNodes();
+  wfUpdateInspector();
+}
+
+// ── Output Modal ──
+let wfOutputModalData = '';
+
+function wfOpenOutputModal(title, content) {
+  wfOutputModalData = content;
+  const backdrop = document.getElementById('wfOutputModalBackdrop');
+  const titleEl = document.getElementById('wfOutputModalTitle');
+  const bodyEl = document.getElementById('wfOutputModalBody');
+  const copyLabel = document.getElementById('wfOutputCopyLabel');
+  if (!backdrop || !bodyEl) return;
+  titleEl.textContent = title || 'Output';
+  bodyEl.textContent = content;
+  copyLabel.textContent = 'Copy';
+  backdrop.style.display = 'flex';
+}
+
+function wfCloseOutputModal() {
+  const backdrop = document.getElementById('wfOutputModalBackdrop');
+  if (backdrop) backdrop.style.display = 'none';
+}
+
+function wfCopyOutput() {
+  const label = document.getElementById('wfOutputCopyLabel');
+  navigator.clipboard.writeText(wfOutputModalData).then(() => {
+    if (label) { label.textContent = 'Copied!'; setTimeout(() => { label.textContent = 'Copy'; }, 2000); }
+  }).catch(() => {
+    if (label) label.textContent = 'Failed';
+  });
+}
+
+// Close modal on Escape
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    const backdrop = document.getElementById('wfOutputModalBackdrop');
+    if (backdrop && backdrop.style.display !== 'none') {
+      wfCloseOutputModal();
+      e.preventDefault();
+    }
+  }
+});
+
+// ── Zoom & Pan ──
+function wfZoom(direction) {
+  // Multiplicative zoom: feels consistent at any zoom level
+  const factor = direction > 0 ? 1.1 : 1 / 1.1;
+  wfState.zoom = Math.max(0.2, Math.min(5, wfState.zoom * factor));
+  wfApplyViewBox();
+}
+
+function wfFitToView() {
+  const svg = document.getElementById('wf-canvas');
+  if (!svg) return;
+  const positions = wfState.nodePositions;
+  const ids = Object.keys(positions);
+  if (ids.length === 0) return;
+
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  ids.forEach(id => {
+    const p = positions[id];
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x + WF_NODE_W);
+    maxY = Math.max(maxY, p.y + WF_NODE_H + 50); // extra for time label + backward edge loops
+  });
+
+  const pad = 40;
+  const vbW = maxX - minX + pad * 2;
+  const vbH = maxY - minY + pad * 2;
+  wfState.panX = minX - pad;
+  wfState.panY = minY - pad;
+  // Calculate zoom to fit
+  const rect = svg.parentElement.getBoundingClientRect();
+  const scaleX = rect.width / vbW;
+  const scaleY = rect.height / vbH;
+  wfState.zoom = Math.min(scaleX, scaleY, 1.5);
+  wfApplyViewBox();
+}
+
+function wfApplyViewBox() {
+  const svg = document.getElementById('wf-canvas');
+  if (!svg) return;
+  const rect = svg.parentElement.getBoundingClientRect();
+  const w = rect.width / wfState.zoom;
+  const h = rect.height / wfState.zoom;
+  svg.setAttribute('viewBox', `${wfState.panX} ${wfState.panY} ${w} ${h}`);
+}
+
+// Pan via mouse drag
+function wfInitPan() {
+  const svg = document.getElementById('wf-canvas');
+  if (!svg) return;
+
+  svg.addEventListener('mousedown', (e) => {
+    if (e.target === svg || e.target.tagName === 'svg') {
+      wfState.isPanning = true;
+      wfState.panStart = { x: e.clientX, y: e.clientY };
+      svg.style.cursor = 'grabbing';
+    }
+  });
+
+  svg.addEventListener('mousemove', (e) => {
+    if (!wfState.isPanning) return;
+    const dx = (e.clientX - wfState.panStart.x) / wfState.zoom;
+    const dy = (e.clientY - wfState.panStart.y) / wfState.zoom;
+    wfState.panX -= dx;
+    wfState.panY -= dy;
+    wfState.panStart = { x: e.clientX, y: e.clientY };
+    wfApplyViewBox();
+  });
+
+  svg.addEventListener('mouseup', () => {
+    wfState.isPanning = false;
+    svg.style.cursor = '';
+  });
+
+  svg.addEventListener('mouseleave', () => {
+    wfState.isPanning = false;
+    svg.style.cursor = '';
+  });
+
+  // Scroll wheel zoom, centered on cursor position
+  svg.addEventListener('wheel', (e) => {
+    e.preventDefault();
+    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
+    const rect = svg.getBoundingClientRect();
+    const mx = (e.clientX - rect.left) / oldZoom + wfState.panX;
+    const my = (e.clientY - rect.top) / oldZoom + wfState.panY;
+    wfState.zoom = newZoom;
+    wfState.panX = mx - (e.clientX - rect.left) / newZoom;
+    wfState.panY = my - (e.clientY - rect.top) / newZoom;
+    wfApplyViewBox();
+  }, { passive: false });
+
+  // Click on canvas background to deselect
+  svg.addEventListener('click', (e) => {
+    if (e.target === svg || e.target.tagName === 'svg') {
+      wfDeselectNode();
+    }
+  });
+}
+
+// ── 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',
+  compare:    'https://docs.vaicli.com/docs/commands/embeddings/similarity',
+  search:     'https://docs.vaicli.com/docs/commands/embeddings/rerank',
+  multimodal: 'https://docs.vaicli.com/docs/commands/embeddings/embed',
+  generate:   'https://docs.vaicli.com/docs/commands/project-setup/generate',
+  chat:       'https://docs.vaicli.com/docs/commands/advanced/chat',
+  workflows:  'https://docs.vaicli.com/docs/commands/advanced/workflow-run',
+  benchmark:  'https://docs.vaicli.com/docs/commands/evaluation/benchmark',
+  explore:    'https://docs.vaicli.com/docs/commands/tools-and-learning/explain',
+  about:      'https://docs.vaicli.com/docs/',
+  settings:   'https://docs.vaicli.com/docs/commands/tools-and-learning/config',
+};
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'F1') {
+    e.preventDefault();
+    const activeTab = document.querySelector('.tab-btn.active');
+    const tabName = activeTab ? activeTab.dataset.tab : '';
+    const url = DOCS_URLS[tabName] || 'https://docs.vaicli.com';
+    window.open(url, '_blank', 'noopener');
+  }
+});
+
+// Keyboard shortcuts (when workflows tab is active)
+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;
+  if (e.key === '+' || e.key === '=') { wfZoom(1); e.preventDefault(); }
+  else if (e.key === '-') { wfZoom(-1); e.preventDefault(); }
+  else if (e.key === '0') { wfFitToView(); e.preventDefault(); }
+  else if (e.key === 'Escape') { wfDeselectNode(); e.preventDefault(); }
+  else if (e.key === 'ArrowLeft')  { wfState.panX -= PAN_STEP / wfState.zoom; wfApplyViewBox(); e.preventDefault(); }
+  else if (e.key === 'ArrowRight') { wfState.panX += PAN_STEP / wfState.zoom; wfApplyViewBox(); e.preventDefault(); }
+  else if (e.key === 'ArrowUp')    { wfState.panY -= PAN_STEP / wfState.zoom; wfApplyViewBox(); e.preventDefault(); }
+  else if (e.key === 'ArrowDown')  { wfState.panY += PAN_STEP / wfState.zoom; wfApplyViewBox(); e.preventDefault(); }
+});
+
+// ── Init ──
+function wfInit() {
+  wfLoadLibrary();
+  wfInitPan();
+}
+
+// Auto-init: use MutationObserver on the panel to detect when it becomes visible
+let wfInitialized = false;
+(function() {
+  const panel = document.getElementById('tab-workflows');
+  if (!panel) return;
+  const observer = new MutationObserver(() => {
+    if (panel.classList.contains('active') && !wfInitialized) {
+      wfInitialized = true;
+      wfInit();
+    }
+  });
+  observer.observe(panel, { attributes: true, attributeFilter: ['class'] });
+  // Also init immediately if the tab is already active (shouldn't be, but safety)
+  if (panel.classList.contains('active')) {
+    wfInitialized = true;
+    wfInit();
+  }
+})();
+</script>
+
 <script>
 (function() {
   const BUG_API = 'https://vaicli.com/api/bugs';