voyageai-cli 1.29.0 → 1.30.0

package/src/playground/index.html

@@ -350,6 +350,79 @@ body {
   flex-direction: column;
   overflow: hidden;
   z-index: 100;
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sidebar.collapsed {
+  width: 56px;
+  min-width: 56px;
+}
+.sidebar.collapsed .sidebar-title,
+.sidebar.collapsed .sidebar-nav-label,
+.sidebar.collapsed .sidebar-nav-divider,
+.sidebar.collapsed .status-label,
+.sidebar.collapsed .sidebar-bug-label,
+.sidebar.collapsed .sidebar-docs-link span,
+.sidebar.collapsed .sidebar-model-group,
+.sidebar.collapsed .sidebar-footer > div:last-child { display: none; }
+.sidebar.collapsed .sidebar-footer { overflow: hidden; padding: 8px 0; align-items: center; border-top: none; }
+.sidebar.collapsed .sidebar-footer > div:first-child { justify-content: center; }
+.sidebar.collapsed .sidebar-footer .theme-toggle { display: none; }
+.sidebar.collapsed #appVersionLabel { display: none; }
+.sidebar.collapsed .sidebar-docs-link { display: none; }
+.sidebar.collapsed .tab-btn {
+  justify-content: center;
+  padding: 10px;
+  border-left-width: 2px;
+}
+.sidebar.collapsed .tab-btn span:not(.tab-btn-icon) { display: none; }
+.sidebar.collapsed .sidebar-settings-btn { display: none; }
+.sidebar.collapsed .sidebar-drag-region { justify-content: center; padding: 0; padding-top: 52px; }
+body:not(.is-electron) .sidebar.collapsed .sidebar-drag-region { padding-top: 16px; padding-bottom: 12px; }
+
+/* Sidebar collapse toggle */
+.sidebar-collapse-btn {
+  -webkit-app-region: no-drag;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+.sidebar-collapse-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
+[data-theme="light"] .sidebar-collapse-btn:hover { background: rgba(0,0,0,0.04); }
+.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); }
+
+/* Sidebar tooltip for collapsed mode */
+.sidebar.collapsed .tab-btn {
+  position: relative;
+}
+.sidebar.collapsed .tab-btn::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: #2d333b;
+  color: #e6edf3;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s 0.15s;
+  z-index: 1000;
+}
+.sidebar.collapsed .tab-btn:hover::after {
+  opacity: 1;
 }
 
 .sidebar-drag-region {
@@ -484,6 +557,7 @@ body:not(.is-electron) .sidebar-drag-region {
 
 .sidebar-footer {
   padding: 12px 16px;
+  padding-bottom: 56px; /* Clear the fixed cost status bar */
   border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
@@ -2568,7 +2642,10 @@ select:focus { outline: none; border-color: var(--accent); }
 .chat-thinking .thinking-icon {
   font-size: 14px;
   line-height: 1;
+  display: flex;
+  align-items: center;
 }
+.chat-thinking .thinking-icon svg { color: var(--accent); }
 .chat-thinking .thinking-label {
   font-weight: 500;
 }
@@ -2626,6 +2703,7 @@ select:focus { outline: none; border-color: var(--accent); }
   background: var(--bg-input, #112733);
   border: 1px solid var(--border);
 }
+.thinking-step-icon svg { color: var(--text-dim); }
 .thinking-step.active .thinking-step-icon {
   border-color: var(--accent);
   animation: thinkingPulse 1.2s ease-in-out infinite;
@@ -3020,10 +3098,15 @@ select:focus { outline: none; border-color: var(--accent); }
   min-height: 0;
 }
 .wf-library {
-  width: 220px; min-width: 180px; flex-shrink: 0;
+  width: 220px; min-width: 0; flex-shrink: 0;
   border-right: 1px solid var(--border);
   display: flex; flex-direction: column;
   background: var(--bg);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.wf-library.collapsed {
+  width: 0; border-right: none;
 }
 .wf-library-header {
   padding: 14px 16px 10px; font-weight: 700; font-size: 13px;
@@ -3086,6 +3169,88 @@ select:focus { outline: none; border-color: var(--accent); }
   font-size: 10px; font-weight: 600; color: var(--text-muted);
   padding: 8px 12px 2px; text-transform: uppercase; letter-spacing: 0.5px;
 }
+/* ── Library Search ── */
+.wf-library-search-wrap {
+  padding: 8px 12px 4px; position: relative;
+}
+.wf-library-search-wrap input {
+  width: 100%; padding: 6px 28px 6px 10px; border-radius: 6px;
+  border: 1px solid var(--border); background: var(--bg-card);
+  color: var(--text); font-size: 12px; outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+.wf-library-search-wrap input:focus {
+  border-color: var(--accent);
+}
+.wf-library-search-wrap input::placeholder {
+  color: var(--text-muted);
+}
+.wf-library-search-clear {
+  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
+  background: none; border: none; color: var(--text-muted); cursor: pointer;
+  font-size: 14px; padding: 2px 4px; line-height: 1; display: none;
+}
+.wf-library-search-clear:hover { color: var(--text); }
+/* ── Collapsible Library Sections ── */
+.wf-lib-section-header {
+  display: flex; align-items: center; gap: 6px;
+  width: 100%; padding: 8px 12px; border: none; background: none;
+  color: var(--text-muted); font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 1.2px; cursor: pointer;
+  transition: color 0.15s;
+}
+.wf-lib-section-header:hover { color: var(--text); }
+.wf-lib-section-header .wf-chevron {
+  font-size: 10px; transition: transform 0.2s; display: inline-block;
+}
+.wf-lib-section-header.expanded .wf-chevron { transform: rotate(90deg); }
+.wf-lib-section-header .wf-section-count {
+  color: var(--text-muted); font-size: 10px; font-weight: 400;
+}
+.wf-lib-section-body {
+  overflow: hidden; transition: max-height 0.2s ease-out;
+}
+/* ── Properties Accordion ── */
+.wf-accordion-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
+  transition: background-color 0.15s ease; user-select: none;
+}
+.wf-accordion-header.expanded {
+  background: rgba(0,212,170,0.05);
+}
+.wf-accordion-header .wf-acc-left {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
+  color: var(--text);
+}
+.wf-accordion-header .wf-acc-left .wf-chevron {
+  font-size: 10px; transition: transform 0.2s; display: inline-block;
+}
+.wf-accordion-header.expanded .wf-acc-left .wf-chevron { transform: rotate(90deg); }
+.wf-accordion-header .wf-acc-summary {
+  font-size: 10px; color: var(--text-muted); font-weight: 400;
+}
+.wf-accordion-body {
+  overflow: hidden; transition: max-height 0.2s ease-out;
+}
+.wf-accordion-body-inner {
+  padding: 12px;
+}
+.wf-step-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 4px 0; font-size: 12px;
+}
+.wf-step-dot {
+  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
+  margin-right: 8px; flex-shrink: 0;
+}
+.wf-step-name { flex: 1; color: var(--text); }
+.wf-step-time {
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10px;
+  color: var(--text-muted); margin-left: 8px;
+}
 .wf-canvas-area {
   flex: 1; position: relative; overflow: hidden;
   background: var(--bg);
@@ -3093,8 +3258,8 @@ select:focus { outline: none; border-color: var(--accent); }
   background-size: 20px 20px;
 }
 .wf-canvas-toolbar {
-  position: absolute; top: 12px; right: 12px; z-index: 10;
-  display: flex; gap: 4px;
+  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 10;
+  display: flex; gap: 4px; align-items: center;
 }
 .wf-canvas-toolbar button {
   width: 32px; height: 32px; border-radius: 8px;
@@ -3165,6 +3330,119 @@ select:focus { outline: none; border-color: var(--accent); }
 .wf-palette-icon { width: 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
 .wf-palette-label { font-weight: 500; }
 
+/* ── Workflow Node Help ── */
+.wf-palette-item { position: relative; }
+.wf-help-trigger {
+  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
+  width: 20px; height: 20px; border-radius: 50%;
+  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 ease, background 0.15s ease, color 0.15s ease;
+  padding: 0; z-index: 2;
+}
+.wf-palette-item:hover .wf-help-trigger { opacity: 1; }
+.wf-help-trigger:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+.wf-help-trigger svg { width: 12px; height: 12px; }
+
+.wf-inspector-help-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 8px; border-radius: 4px;
+  border: 1px solid var(--border); background: var(--bg);
+  color: var(--text-muted); font-size: 11px; cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  margin-left: 8px; vertical-align: middle;
+}
+.wf-inspector-help-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+.wf-inspector-help-btn svg { width: 12px; height: 12px; }
+
+.wf-help-modal-backdrop {
+  position: fixed; inset: 0; z-index: 10000;
+  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+  animation: wfStoreDetailFadeIn 0.12s ease-out;
+}
+.wf-help-modal {
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 12px; width: 540px; max-width: 92vw;
+  max-height: 82vh; display: flex; flex-direction: column;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
+  animation: wfStoreDetailFadeIn 0.12s ease-out;
+}
+.wf-help-modal-header {
+  display: flex; align-items: center; gap: 10px;
+  padding: 16px 20px; border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.wf-help-modal-header .wf-help-icon {
+  width: 32px; height: 32px; border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.wf-help-modal-header .wf-help-title { font-size: 16px; font-weight: 600; flex: 1; }
+.wf-help-modal-header .wf-help-category-badge {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px;
+  background: var(--bg-card); color: var(--text-muted); flex-shrink: 0;
+}
+.wf-help-modal-header .wf-help-close-btn {
+  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;
+  flex-shrink: 0; padding: 0; transition: background 0.15s ease, color 0.15s ease;
+}
+.wf-help-modal-header .wf-help-close-btn:hover { background: var(--bg-card); color: var(--text); }
+
+.wf-help-modal-body {
+  overflow-y: auto; padding: 20px; flex: 1;
+}
+.wf-help-section { margin-bottom: 20px; }
+.wf-help-section:last-child { margin-bottom: 0; }
+.wf-help-section-title {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px;
+}
+.wf-help-section p {
+  font-size: 13px; line-height: 1.6; color: var(--text); margin: 0;
+}
+
+.wf-help-io-table {
+  width: 100%; border-collapse: collapse; font-size: 12px;
+}
+.wf-help-io-table th {
+  text-align: left; padding: 6px 8px; font-weight: 600;
+  color: var(--text-muted); border-bottom: 1px solid var(--border);
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
+}
+.wf-help-io-table td {
+  padding: 6px 8px; border-bottom: 1px solid var(--border);
+  color: var(--text); vertical-align: top;
+}
+.wf-help-io-table tr:last-child td { border-bottom: none; }
+.wf-help-io-table .wf-help-key {
+  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
+  color: var(--accent); white-space: nowrap;
+}
+.wf-help-io-table .wf-help-type {
+  font-size: 10px; color: var(--text-muted); white-space: nowrap;
+}
+.wf-help-io-table .wf-help-required {
+  display: inline-block; font-size: 9px; font-weight: 600;
+  color: #ff6b6b; background: rgba(255,107,107,0.1);
+  padding: 1px 4px; border-radius: 3px; margin-left: 4px;
+}
+
+.wf-help-tip {
+  display: flex; gap: 8px; margin-bottom: 8px;
+  font-size: 13px; line-height: 1.5; color: var(--text);
+}
+.wf-help-tip:last-child { margin-bottom: 0; }
+.wf-help-tip-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent); flex-shrink: 0; margin-top: 7px;
+}
+
 /* ── Workflow Store ── */
 .wf-store-overlay {
   position: absolute; inset: 0; background: var(--bg); z-index: 50;
@@ -3263,6 +3541,30 @@ select:focus { outline: none; border-color: var(--accent); }
 .wf-store-card-badges { display: flex; gap: 4px; }
 .wf-store-badge-official { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 100px; background: rgba(0,212,170,.1); color: var(--accent); border: 1px solid rgba(0,212,170,.15); white-space: nowrap; }
 .wf-store-badge-installed { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 100px; background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.15); white-space: nowrap; }
+.wf-store-badge-verified { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 100px; background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.15); white-space: nowrap; }
+.wf-store-badge-capability { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 100px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
+.wf-store-badge-cap-network { background: rgba(59,130,246,.1); color: #3B82F6; border: 1px solid rgba(59,130,246,.15); }
+.wf-store-badge-cap-writedb { background: rgba(245,158,11,.1); color: #F59E0B; border: 1px solid rgba(245,158,11,.15); }
+.wf-store-badge-cap-llm { background: rgba(139,92,246,.1); color: #8B5CF6; border: 1px solid rgba(139,92,246,.15); }
+.wf-store-badge-cap-loop { background: rgba(6,182,212,.1); color: #06B6D4; border: 1px solid rgba(6,182,212,.15); }
+.wf-store-badge-cap-readdb { background: rgba(34,197,94,.1); color: #22C55E; border: 1px solid rgba(34,197,94,.15); }
+.wf-store-detail-security-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-card); border-radius: 6px; margin-bottom: 4px; font-size: 12px; color: var(--text-dim); }
+.wf-store-detail-security-sev { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 100px; font-weight: 700; text-transform: uppercase; }
+.wf-store-detail-security-sev.critical { background: rgba(239,68,68,.15); color: #EF4444; }
+.wf-store-detail-security-sev.high { background: rgba(249,115,22,.15); color: #F97316; }
+.wf-store-detail-security-sev.medium { background: rgba(234,179,8,.15); color: #EAB308; }
+.wf-store-detail-security-sev.low { background: rgba(148,163,184,.15); color: #94A3B8; }
+.wf-store-detail-security-ok { color: #10B981; font-size: 12px; padding: 8px 10px; background: rgba(16,185,129,.06); border-radius: 6px; }
+.wf-store-detail-stars { display: inline-flex; gap: 2px; cursor: pointer; }
+.wf-store-detail-stars span { font-size: 18px; color: var(--text-muted); transition: color 0.1s; }
+.wf-store-detail-stars span.filled { color: #F59E0B; }
+.wf-store-detail-stars span:hover, .wf-store-detail-stars span:hover ~ span { color: var(--text-muted); }
+.wf-store-report-form { margin-top: 8px; padding: 12px; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); }
+.wf-store-report-form select, .wf-store-report-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; color: var(--text); font-family: var(--font); font-size: 12px; margin-bottom: 8px; }
+.wf-store-report-form textarea { resize: vertical; min-height: 60px; }
+.wf-store-report-submit { padding: 6px 14px; background: var(--error); color: #fff; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
+.wf-store-report-submit:hover { filter: brightness(1.1); }
+.wf-store-cap-badges { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
 .wf-store-card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .wf-store-card-author { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
 .wf-store-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@@ -3283,11 +3585,14 @@ select:focus { outline: none; border-color: var(--accent); }
 @keyframes wfStoreDetailSlideIn { from { transform: translateY(20px); opacity: 0; } }
 .wf-store-detail-panel {
   background: var(--bg-surface); border: 1px solid var(--border); border-radius: 18px;
-  width: 100%; max-width: 580px; max-height: 82vh; overflow-y: auto;
-  animation: wfStoreDetailSlideIn 0.18s ease-out;
+  width: 100%; max-width: 580px; max-height: 82vh; overflow: hidden;
+  animation: wfStoreDetailSlideIn 0.18s ease-out; display: flex; flex-direction: column;
 }
-.wf-store-detail-panel::-webkit-scrollbar { width: 4px; }
-.wf-store-detail-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+.wf-store-detail-scroll {
+  overflow-y: auto; flex: 1; min-height: 0;
+}
+.wf-store-detail-scroll::-webkit-scrollbar { width: 4px; }
+.wf-store-detail-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
 .wf-store-detail-hero { padding: 28px 28px 20px; border-radius: 18px 18px 0 0; position: relative; }
 .wf-store-detail-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, var(--bg-surface) 100%); border-radius: 18px 18px 0 0; }
 .wf-store-detail-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
@@ -3633,38 +3938,76 @@ select:focus { outline: none; border-color: var(--accent); }
 .wf-edge--else { stroke-dasharray: 6 4; opacity: 0.4; }
 .wf-edge--skipped { opacity: 0.12; stroke-dasharray: 4 4; }
 /* Inspector */
+/* ── Library collapse chevron ── */
+.wf-library-collapse-btn {
+  width: 28px; height: 28px; border: none; background: none;
+  color: var(--text-muted); cursor: pointer; font-size: 14px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 6px; transition: color 0.15s, background 0.15s;
+  flex-shrink: 0; padding: 0;
+}
+.wf-library-collapse-btn:hover { color: var(--text); background: var(--bg-card); }
+
+/* ── Canvas edge handles ── */
+.wf-edge-handle {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 28px; height: 56px; z-index: 20;
+  background: var(--bg-card); border: 1px solid var(--border);
+  color: var(--text-muted); cursor: pointer;
+  display: none; align-items: center; justify-content: center;
+  font-size: 14px; transition: background 0.15s, color 0.15s;
+}
+.wf-edge-handle:hover { background: var(--bg); color: var(--text); }
+.wf-edge-handle--left {
+  left: 0; border-radius: 0 8px 8px 0; border-left: none;
+}
+.wf-edge-handle--right {
+  right: 0; border-radius: 8px 0 0 8px; border-right: none;
+}
+.wf-edge-handle.visible { display: flex; }
+
+/* ── Toolbar panel toggle group ── */
+.wf-toolbar-spacer { flex: 1; }
+.wf-toolbar-toggle-group {
+  display: flex; background: var(--bg); border-radius: 6px; padding: 2px;
+  border: 1px solid var(--border);
+}
+.wf-toolbar-toggle-group button {
+  width: auto !important; height: 28px !important; padding: 0 10px !important;
+  border: none !important; border-radius: 4px !important;
+  background: transparent !important; color: var(--text-muted) !important;
+  font-size: 11px !important; font-weight: 500 !important; cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.wf-toolbar-toggle-group button.active {
+  background: rgba(0,212,170,0.15) !important; color: var(--accent) !important;
+}
+.wf-toolbar-toggle-group button:hover:not(.active) {
+  color: var(--text) !important;
+}
+
+/* ── Inspector (upgraded) ── */
 .wf-inspector {
   flex-shrink: 0; position: relative;
   display: flex; flex-direction: row;
   background: var(--bg);
-  transition: width 0.25s ease;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   width: 300px;
   overflow: hidden;
   align-self: stretch;
+  border-left: 1px solid var(--border);
 }
 .wf-inspector.collapsed {
-  width: 28px;
+  width: 0; border-left: none;
 }
 .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);
+  display: none; /* replaced by edge handle */
 }
 .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 {
@@ -3731,11 +4074,11 @@ select:focus { outline: none; border-color: var(--accent); }
 .wf-inspector-result.error { border-color: #e74c3c; }
 /* Responsive */
 @media (max-width: 900px) {
-  .wf-library { display: none; }
+  .wf-library { width: 0; border-right: none; }
   .wf-inspector:not(.collapsed) { width: 240px; }
 }
 @media (max-width: 600px) {
-  .wf-inspector { display: none; }
+  .wf-inspector { width: 0; border-left: none; }
 }
 /* Workflow visualizer light mode */
 [data-theme="light"] .wf-node-label { fill: #001E2B; }
@@ -3913,18 +4256,25 @@ select:focus { outline: none; border-color: var(--accent); }
   border-radius: 16px;
   background: linear-gradient(135deg, var(--bg-card), var(--bg-surface));
   border: 1px solid var(--border);
+  min-height: 180px;
 }
 
 .home-announcement-card {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   padding: 32px;
   text-align: center;
-  position: relative;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.5s ease-in-out;
 }
 
 .home-announcement-card.active {
-  display: block;
-  animation: fadeIn 0.5s ease-out;
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .home-announcement-card .badge {
@@ -4010,6 +4360,72 @@ select:focus { outline: none; border-color: var(--accent); }
   background: linear-gradient(135deg, #00ED64, #00C2FF);
 }
 
+.home-announcements-restore {
+  text-align: center;
+  margin-top: 12px;
+}
+
+.home-announcements-restore button {
+  background: var(--bg-card);
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 8px 16px;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.home-announcements-restore button:hover {
+  color: var(--accent-text);
+  border-color: var(--accent-text);
+  background: var(--bg-surface);
+}
+
+.home-announcement-card.has-bg-image {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.home-announcement-card.has-bg-image::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: inherit;
+  z-index: 0;
+}
+
+.home-announcement-card.has-bg-image > * {
+  position: relative;
+  z-index: 1;
+}
+
+.home-announcement-card.has-bg-image h3,
+.home-announcement-card.has-bg-image p {
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+}
+
+.home-announcement-card.has-bg-image h3 {
+  color: #fff;
+}
+
+.home-announcement-card.has-bg-image p {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.home-announcement-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  line-height: 1;
+}
+
 /* Section Headers */
 .home-section {
   margin-bottom: 48px;
@@ -4520,6 +4936,42 @@ select:focus { outline: none; border-color: var(--accent); }
   <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>
+  <!-- Brain (Thinking) -->
+  <symbol id="lg-brain" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/>
+  </symbol>
+  <!-- Sparkles -->
+  <symbol id="lg-sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="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"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>
+  </symbol>
+  <!-- Target (Similarity) -->
+  <symbol id="lg-target" 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"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
+  </symbol>
+  <!-- Database (Collections) -->
+  <symbol id="lg-database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>
+  </symbol>
+  <!-- Bot (Models) -->
+  <symbol id="lg-bot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>
+  </symbol>
+  <!-- ArrowUpDown (Rerank) -->
+  <symbol id="lg-arrow-up-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/>
+  </symbol>
+  <!-- Coins (Cost) -->
+  <symbol id="lg-coins" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/>
+  </symbol>
+  <!-- Inbox (Ingest) -->
+  <symbol id="lg-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
+  </symbol>
+  <!-- SearchCode (Vector Search) -->
+  <symbol id="lg-search-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m13 13.5 2-2.5-2-2.5"/><path d="m9 8.5-2 2.5 2 2.5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+  </symbol>
 </svg>
 
 <div class="app-shell">
@@ -4529,26 +4981,27 @@ 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-collapse-btn" id="sidebarCollapseBtn" onclick="toggleSidebarCollapse()" title="Toggle sidebar"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></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">
       <div class="sidebar-nav-label" id="nav-tools-label">Tools</div>
-      <button class="tab-btn active" data-tab="home" role="tab" aria-selected="true" aria-controls="tab-home" id="tab-btn-home"><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"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span><span>Home</span></button>
-      <button class="tab-btn" data-tab="embed" role="tab" aria-selected="false" aria-controls="tab-embed" id="tab-btn-embed"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-lightning"/></svg></span><span>Embed</span></button>
-      <button class="tab-btn" data-tab="compare" role="tab" aria-selected="false" aria-controls="tab-compare" id="tab-btn-compare"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-arrows"/></svg></span><span>Compare</span></button>
-      <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><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>
+      <button class="tab-btn active" data-tab="home" data-tooltip="Home" role="tab" aria-selected="true" aria-controls="tab-home" id="tab-btn-home"><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"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span><span>Home</span></button>
+      <button class="tab-btn" data-tab="embed" data-tooltip="Embed" role="tab" aria-selected="false" aria-controls="tab-embed" id="tab-btn-embed"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-lightning"/></svg></span><span>Embed</span></button>
+      <button class="tab-btn" data-tab="compare" data-tooltip="Compare" role="tab" aria-selected="false" aria-controls="tab-compare" id="tab-btn-compare"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-arrows"/></svg></span><span>Compare</span></button>
+      <button class="tab-btn" data-tab="search" data-tooltip="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" data-tooltip="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" data-tooltip="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" data-tooltip="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" data-tooltip="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">
       <div class="sidebar-nav-label" id="nav-learn-label">Learn</div>
-      <button class="tab-btn" data-tab="benchmark" role="tab" aria-selected="false" aria-controls="tab-benchmark" id="tab-btn-benchmark"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-gauge"/></svg></span><span>Benchmark</span></button>
-      <button class="tab-btn" data-tab="explore" role="tab" aria-selected="false" aria-controls="tab-explore" id="tab-btn-explore"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-bulb"/></svg></span><span>Explore</span></button>
-      <button class="tab-btn" data-tab="about" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-btn-about"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-info"/></svg></span><span>About</span></button>
+      <button class="tab-btn" data-tab="benchmark" data-tooltip="Benchmark" role="tab" aria-selected="false" aria-controls="tab-benchmark" id="tab-btn-benchmark"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-gauge"/></svg></span><span>Benchmark</span></button>
+      <button class="tab-btn" data-tab="explore" data-tooltip="Explore" role="tab" aria-selected="false" aria-controls="tab-explore" id="tab-btn-explore"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-bulb"/></svg></span><span>Explore</span></button>
+      <button class="tab-btn" data-tab="about" data-tooltip="About" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-btn-about"><span class="tab-btn-icon" aria-hidden="true"><svg><use href="#lg-info"/></svg></span><span>About</span></button>
     </div>
   </nav>
   <div class="sidebar-footer">
@@ -4632,6 +5085,9 @@ select:focus { outline: none; border-color: var(--accent); }
       <div class="home-announcements-dots" id="announcementsDots">
         <!-- Dots will be inserted here -->
       </div>
+      <div class="home-announcements-restore" id="announcementsRestore" style="display: none;">
+        <button onclick="restoreAnnouncements()">Show dismissed announcements</button>
+      </div>
     </div>
 
     <!-- What's New (Release Notes) -->
@@ -5560,7 +6016,7 @@ Reranking models rescore initial search results to improve relevance ordering.</
 <!-- ========== 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" id="wfLibrary">
       <div class="wf-library-header">
         <div class="wf-library-tabs" style="flex:1;">
           <button class="wf-lib-tab active" data-lib-tab="library" onclick="wfSwitchLibTab('library')">Library</button>
@@ -5569,6 +6025,11 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <button class="wf-store-btn" id="wfStoreBtn" onclick="wfStoreOpen()" title="Browse Workflow Store">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
         </button>
+        <button class="wf-library-collapse-btn" onclick="wfToggleLibrary()" title="Collapse library">&#x2039;</button>
+      </div>
+      <div class="wf-library-search-wrap">
+        <input type="text" id="wfLibrarySearch" placeholder="Search workflows..." oninput="wfOnLibrarySearch()">
+        <button class="wf-library-search-clear" id="wfLibrarySearchClear" onclick="wfClearLibrarySearch()">✕</button>
       </div>
       <div class="wf-library-list" id="wfLibraryList">
         <div style="padding: 16px; color: var(--text-muted); font-size: 12px;">Loading...</div>
@@ -5599,7 +6060,15 @@ Reranking models rescore initial search results to improve relevance ordering.</
         <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>
+        <span class="wf-toolbar-spacer"></span>
+        <div class="wf-toolbar-toggle-group">
+          <button id="wfToggleLibBtn" class="active" onclick="wfToggleLibrary()">Library</button>
+          <button id="wfTogglePropsBtn" class="active" onclick="wfToggleInspector()">Props</button>
+        </div>
       </div>
+      <!-- Edge handles for collapsed panels -->
+      <div class="wf-edge-handle wf-edge-handle--left" id="wfEdgeHandleLeft" onclick="wfToggleLibrary()" title="Expand library">&#x203A;</div>
+      <div class="wf-edge-handle wf-edge-handle--right" id="wfEdgeHandleRight" onclick="wfToggleInspector()" title="Expand properties">&#x2039;</div>
       <!-- Execution status bar -->
       <div class="wf-exec-status" id="wfExecStatus" style="display:none;">
         <span class="wf-exec-status-dot"></span>
@@ -5638,7 +6107,6 @@ Reranking models rescore initial search results to improve relevance ordering.</
       </div>
     </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">
@@ -5666,6 +6134,14 @@ Reranking models rescore initial search results to improve relevance ordering.</
   </div>
 </div>
 
+<!-- ── Workflow Node Help Modal ── -->
+<div class="wf-help-modal-backdrop" id="wfHelpModalBackdrop" style="display:none;" onclick="wfCloseHelpModal()">
+  <div class="wf-help-modal" onclick="event.stopPropagation()">
+    <div class="wf-help-modal-header" id="wfHelpModalHeader"></div>
+    <div class="wf-help-modal-body" id="wfHelpModalBody"></div>
+  </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()">
@@ -6581,6 +7057,17 @@ function sendTelemetry(event, extra = {}) {
   } catch { /* telemetry should never break the app */ }
 }
 
+function telemetryTimer(event, baseFields = {}) {
+  const start = performance.now();
+  return (extra = {}) => {
+    sendTelemetry(event, {
+      ...baseFields,
+      ...extra,
+      durationMs: Math.round(performance.now() - start),
+    });
+  };
+}
+
 function initTelemetryToggle() {
   const toggle = document.getElementById('settingsTelemetry');
   if (!toggle) return;
@@ -6613,6 +7100,7 @@ async function init() {
   // Telemetry
   initTelemetryToggle();
   sendTelemetry('app_launch');
+  sendTelemetry('playground_open');
 }
 
 // ── Tabs ──
@@ -6679,6 +7167,7 @@ function switchTab(tab) {
   if (settingsBtn) settingsBtn.classList.toggle('active', tab === 'settings');
   // Track tab views
   sendTelemetry('tab_view', { tab });
+  sendTelemetry('playground_tab', { tab });
   
   // Initialize Home page if switching to it
   if (tab === 'home') {
@@ -6789,6 +7278,9 @@ async function loadAnnouncements() {
     const res = await fetch('/api/home/announcements');
     const data = await res.json();
     
+    // Store total count before filtering
+    homeData.totalAnnouncements = data.announcements.length;
+    
     // Filter out dismissed announcements
     const dismissed = JSON.parse(localStorage.getItem('vai-dismissed-announcements') || '[]');
     homeData.announcements = data.announcements.filter(a => !dismissed.includes(a.id));
@@ -6796,6 +7288,7 @@ async function loadAnnouncements() {
   } catch (err) {
     console.error('Failed to load announcements:', err);
     homeData.announcements = [];
+    homeData.totalAnnouncements = 0;
   }
 }
 
@@ -6855,22 +7348,41 @@ function renderAnnouncements() {
   const container = document.getElementById('homeAnnouncements');
   const carousel = document.getElementById('announcementsCarousel');
   const dots = document.getElementById('announcementsDots');
+  const restoreBtn = document.getElementById('announcementsRestore');
+  
+  // Show restore button if any announcements have been dismissed
+  const hasDismissed = (homeData.totalAnnouncements || 0) > homeData.announcements.length;
+  if (restoreBtn) restoreBtn.style.display = hasDismissed ? 'block' : 'none';
   
   if (!homeData.announcements.length) {
-    container.style.display = 'none';
+    container.style.display = hasDismissed ? 'block' : 'none';
+    carousel.innerHTML = '';
+    dots.innerHTML = '';
     return;
   }
   
   // Render cards
-  carousel.innerHTML = homeData.announcements.map((ann, i) => `
-    <div class="home-announcement-card${i === 0 ? ' active' : ''}" data-id="${ann.id}">
+  carousel.innerHTML = homeData.announcements.map((ann, i) => {
+    const bgClasses = [
+      'home-announcement-card',
+      i === 0 ? 'active' : '',
+      ann.bg_image ? 'has-bg-image' : ''
+    ].filter(Boolean).join(' ');
+    const bgStyle = ann.bg_image
+      ? `background-image: url('${ann.bg_image}');`
+      : ann.bg_color
+        ? `background: ${ann.bg_color};`
+        : '';
+    return `
+    <div class="${bgClasses}" data-id="${ann.id}" style="${bgStyle}">
       <button class="home-announcement-dismiss" onclick="dismissAnnouncement('${ann.id}')">×</button>
+      ${ann.icon ? `<div class="home-announcement-icon">${ann.icon}</div>` : ''}
       ${ann.badge ? `<div class="badge">${ann.badge}</div>` : ''}
       <h3>${ann.title}</h3>
       <p>${ann.description}</p>
       ${ann.cta ? `<button class="cta" onclick="${ann.cta.action === 'navigate' ? `switchTab('${ann.cta.target.slice(1)}')` : 'void(0)'}">${ann.cta.label}</button>` : ''}
-    </div>
-  `).join('');
+    </div>`;
+  }).join('');
   
   // Render dots
   if (homeData.announcements.length > 1) {
@@ -6890,22 +7402,63 @@ function showAnnouncement(index) {
   
   // Update cards
   document.querySelectorAll('.home-announcement-card').forEach((card, i) => {
-    card.classList.toggle('active', i === index);
+    if (i === index) {
+      card.classList.add('active');
+    } else {
+      card.classList.remove('active');
+    }
   });
   
   // Update dots
   document.querySelectorAll('.home-announcement-dot').forEach((dot, i) => {
-    dot.classList.toggle('active', i === index);
+    if (i === index) {
+      dot.classList.add('active');
+    } else {
+      dot.classList.remove('active');
+    }
   });
+  
+  // Reset the rotation timer so we get a full interval after manual clicks
+  resetAnnouncementRotation();
 }
 
+let announcementRotationTimer = null;
+
 function startAnnouncementRotation() {
-  setInterval(() => {
-    if (homeData.announcements.length > 1) {
-      homeData.currentAnnouncementIndex = (homeData.currentAnnouncementIndex + 1) % homeData.announcements.length;
-      showAnnouncement(homeData.currentAnnouncementIndex);
-    }
-  }, 5000); // Rotate every 5 seconds
+  stopAnnouncementRotation();
+  if (homeData.announcements.length <= 1) return;
+  announcementRotationTimer = setInterval(() => {
+    const next = (homeData.currentAnnouncementIndex + 1) % homeData.announcements.length;
+    homeData.currentAnnouncementIndex = next;
+    
+    // Update cards directly (don't call showAnnouncement to avoid resetting timer)
+    document.querySelectorAll('.home-announcement-card').forEach((card, i) => {
+      if (i === next) {
+        card.classList.add('active');
+      } else {
+        card.classList.remove('active');
+      }
+    });
+    document.querySelectorAll('.home-announcement-dot').forEach((dot, i) => {
+      if (i === next) {
+        dot.classList.add('active');
+      } else {
+        dot.classList.remove('active');
+      }
+    });
+  }, 6000);
+}
+
+function stopAnnouncementRotation() {
+  if (announcementRotationTimer) {
+    clearInterval(announcementRotationTimer);
+    announcementRotationTimer = null;
+  }
+}
+
+function resetAnnouncementRotation() {
+  stopAnnouncementRotation();
+  startAnnouncementRotation();
 }
 
 function dismissAnnouncement(id) {
@@ -6918,6 +7471,19 @@ function dismissAnnouncement(id) {
   renderAnnouncements();
 }
 
+async function restoreAnnouncements() {
+  localStorage.removeItem('vai-dismissed-announcements');
+  // Re-fetch all announcements
+  try {
+    const res = await fetch('/api/home/announcements');
+    const data = await res.json();
+    homeData.announcements = data.announcements;
+    renderAnnouncements();
+  } catch (err) {
+    console.error('Failed to restore announcements:', err);
+  }
+}
+
 function renderReleases() {
   const container = document.getElementById('releasesTimeline');
   
@@ -7174,11 +7740,13 @@ window.doEmbed = async function() {
   hideError('embedError');
   const text = document.getElementById('embedInput').value.trim();
   if (!text) { showError('embedError', 'Enter some text to embed'); return; }
-  sendTelemetry('api_call', { endpoint: 'embed', model: document.getElementById('embedModel').value });
+  const _embedModel = document.getElementById('embedModel').value;
+  sendTelemetry('api_call', { endpoint: 'embed', model: _embedModel });
+  const _embedDone = telemetryTimer('playground_embed', { model: _embedModel, inputType: document.getElementById('embedInputType').value || undefined });
 
   setLoading('embedBtn', true);
   try {
-    const model = document.getElementById('embedModel').value;
+    const model = _embedModel;
     const inputType = document.getElementById('embedInputType').value || undefined;
     const dims = document.getElementById('embedDimensions').value;
     const dimensions = dims ? parseInt(dims, 10) : undefined;
@@ -7216,6 +7784,8 @@ window.doEmbed = async function() {
     buildHeatmap(emb, document.getElementById('embedHeatmap'));
 
     document.getElementById('embedResult').classList.add('visible');
+    CostTracker.addOperation('embed', model, data.usage?.total_tokens || 0);
+    _embedDone();
   } catch (err) {
     showError('embedError', err.message);
   } finally {
@@ -7258,6 +7828,7 @@ function buildHeatmap(vec, container) {
 window.doCompare = async function() {
   hideError('compareError');
   sendTelemetry('api_call', { endpoint: 'compare', model: document.getElementById('compareModel').value });
+  const _compareDone = telemetryTimer('playground_similarity', { model: document.getElementById('compareModel').value });
   const a = document.getElementById('compareA').value.trim();
   const b = document.getElementById('compareB').value.trim();
   if (!a || !b) { showError('compareError', 'Enter text in both fields'); return; }
@@ -7340,6 +7911,8 @@ window.doCompare = async function() {
     `;
 
     document.getElementById('compareResult').classList.add('visible');
+    CostTracker.addOperation('compare', data.model || model, data.usage?.total_tokens || 0);
+    _compareDone();
   } catch (err) {
     showError('compareError', err.message);
   } finally {
@@ -7351,6 +7924,7 @@ window.doCompare = async function() {
 window.doSearch = async function(withRerank) {
   hideError('searchError');
   sendTelemetry('api_call', { endpoint: withRerank ? 'rerank' : 'search' });
+  const _searchDone = telemetryTimer(withRerank ? 'playground_rerank' : 'playground_search', { model: document.getElementById('searchEmbedModel').value });
   const query = document.getElementById('searchQuery').value.trim();
   const docsText = document.getElementById('searchDocs').value.trim();
   if (!query || !docsText) { showError('searchError', 'Enter a query and documents'); return; }
@@ -7383,9 +7957,10 @@ window.doSearch = async function(withRerank) {
     const embeddingResults = scores.slice(0, topK);
 
     let rerankResults = null;
+    let rerankData = null;
     if (withRerank) {
       const rerankModel = document.getElementById('searchRerankModel').value;
-      const rerankData = await apiPost('/api/rerank', { query, documents, model: rerankModel, topK });
+      rerankData = await apiPost('/api/rerank', { query, documents, model: rerankModel, topK });
       rerankResults = rerankData.data.map(r => ({
         index: r.index,
         text: documents[r.index],
@@ -7395,6 +7970,12 @@ window.doSearch = async function(withRerank) {
 
     renderSearchResults(embeddingResults, rerankResults);
     document.getElementById('searchResult').classList.add('visible');
+    CostTracker.addOperation('search', embedModel, embedData.usage?.total_tokens || 0);
+    if (withRerank && rerankResults) {
+      const rerankModel = document.getElementById('searchRerankModel').value;
+      CostTracker.addOperation('rerank', rerankModel, rerankData?.usage?.total_tokens || 0);
+    }
+    _searchDone();
   } catch (err) {
     showError('searchError', err.message);
   } finally {
@@ -8048,6 +8629,7 @@ window.doBenchLatency = async function() {
         latencies.push(data.elapsed);
         tokens = data.tokens;
         dims = data.dimensions;
+        CostTracker.addOperation('bench-latency', model, data.tokens || 0);
       } catch (err) {
         document.getElementById(`bench-stats-${mi}`).textContent = 'Error';
         document.getElementById(`bench-bar-${mi}`).classList.remove('running');
@@ -8141,6 +8723,8 @@ window.doBenchRanking = async function() {
 
       rankedA = rankBySimilarity(dataA.embeddings, documents, topK);
       rankedB = rankBySimilarity(dataB.embeddings, documents, topK);
+      CostTracker.addOperation('bench-ranking', modelA, dataA.tokens || 0);
+      CostTracker.addOperation('bench-ranking', modelB, dataB.tokens || 0);
     } else {
       // Rerank mode
       const [dataA, dataB] = await Promise.all([
@@ -8158,6 +8742,8 @@ window.doBenchRanking = async function() {
         text: documents[r.index],
         score: r.relevance_score,
       }));
+      CostTracker.addOperation('bench-ranking', modelA, dataA.usage?.total_tokens || 0);
+      CostTracker.addOperation('bench-ranking', modelB, dataB.usage?.total_tokens || 0);
     }
 
     // Render comparison
@@ -8298,6 +8884,7 @@ window.doBenchQuantization = async function() {
       const start = performance.now();
       const data = await apiPost('/api/embed', body);
       const elapsed = performance.now() - start;
+      CostTracker.addOperation('bench-quantization', model, data.usage?.total_tokens || 0);
 
       const embeddings = data.data.map(d => d.embedding);
       const queryEmbed = embeddings[0];
@@ -9859,6 +10446,7 @@ window.doMultimodalCompare = async function() {
     }
 
     document.getElementById('mmResult').classList.add('visible');
+    CostTracker.addOperation('multimodal-compare', data.model || model, usage.total_tokens || 0);
   } catch (err) {
     showError('mmError', err.message);
   } finally {
@@ -10062,6 +10650,7 @@ window.doMultimodalSearch = async function() {
     });
 
     document.getElementById('mmSearchResult').classList.add('visible');
+    CostTracker.addOperation('multimodal-search', model, data.usage?.total_tokens || 0);
   } catch (err) {
     showError('mmSearchError', err.message);
   } finally {
@@ -10960,20 +11549,24 @@ function renderMarkdown(md) {
 /**
  * Tool metadata: icon, label, and a function to summarize the call for the thinking panel.
  */
+function lucideIcon(id, size = 16) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" style="color:var(--accent)"><use href="#${id}"/></svg>`;
+}
+
 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' },
+  vai_query:       { iconId: 'lg-search',      label: 'RAG Query',      verb: 'Searching',         descFn: a => a.query ? `"${a.query}"` : '' },
+  vai_search:      { iconId: 'lg-search-code',  label: 'Vector Search',  verb: 'Searching vectors', descFn: a => a.query ? `"${a.query}"` : '' },
+  vai_rerank:      { iconId: 'lg-arrow-up-down', label: 'Rerank',        verb: 'Reranking',         descFn: a => a.query ? `${a.documents?.length || '?'} docs for "${a.query}"` : '' },
+  vai_embed:       { iconId: 'lg-lightning',    label: 'Embed',          verb: 'Embedding',         descFn: a => a.text ? `"${a.text.slice(0, 60)}${a.text.length > 60 ? '...' : ''}"` : '' },
+  vai_similarity:  { iconId: 'lg-target',       label: 'Similarity',     verb: 'Comparing',         descFn: a => a.text1 ? `two texts` : '' },
+  vai_collections: { iconId: 'lg-database',     label: 'Collections',    verb: 'Discovering',       descFn: a => a.db ? `in ${a.db}` : 'available databases' },
+  vai_models:      { iconId: 'lg-bot',          label: 'Models',         verb: 'Listing',           descFn: () => 'available models' },
+  vai_topics:      { iconId: 'lg-cube',         label: 'Topics',         verb: 'Browsing',          descFn: () => 'educational topics' },
+  vai_explain:     { iconId: 'lg-bulb',         label: 'Explain',        verb: 'Explaining',        descFn: a => a.topic || '' },
+  vai_estimate:    { iconId: 'lg-coins',        label: 'Cost Estimate',  verb: 'Estimating',        descFn: a => a.docs ? `${a.docs} docs` : '' },
+  vai_ingest:      { iconId: 'lg-inbox',        label: 'Ingest',         verb: 'Ingesting',         descFn: a => a.source || 'document' },
 };
-const DEFAULT_TOOL_META = { icon: '\u2699\uFE0F', label: '', verb: 'Running', descFn: () => '' };
+const DEFAULT_TOOL_META = { iconId: 'lg-config', label: '', verb: 'Running', descFn: () => '' };
 
 /**
  * Create the thinking panel <details> element.
@@ -10986,7 +11579,7 @@ function createThinkingPanel() {
 
   const summary = document.createElement('summary');
   summary.innerHTML =
-    '<span class="thinking-icon">\uD83E\uDDE0</span>' +
+    '<span class="thinking-icon">' + lucideIcon('lg-brain', 14) + '</span>' +
     '<span class="thinking-label">Thinking</span>' +
     '<span class="thinking-count">0</span>' +
     '<span class="thinking-elapsed"></span>' +
@@ -11029,7 +11622,7 @@ function createThinkingPanel() {
 
     const iconDiv = document.createElement('div');
     iconDiv.className = 'thinking-step-icon';
-    iconDiv.textContent = meta.icon;
+    iconDiv.innerHTML = lucideIcon(meta.iconId, 14);
     step.appendChild(iconDiv);
 
     const body = document.createElement('div');
@@ -11084,7 +11677,7 @@ function createThinkingPanel() {
     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';
+    summary.querySelector('.thinking-icon').innerHTML = lucideIcon('lg-sparkles', 14);
     // Mark last step done and collapse
     if (activeStep) {
       activeStep.classList.remove('active');
@@ -11209,6 +11802,7 @@ async function sendChatMessage() {
     let fullText = '';
     let sources = [];
     let thinkingPanel = null;
+    let retrievalCostTracked = false;
 
     while (true) {
       const { done, value } = await reader.read();
@@ -11229,6 +11823,14 @@ async function sendChatMessage() {
 
           if (currentEvent === 'retrieval') {
             typing.textContent = `Retrieved ${data.docs?.length || 0} docs (${data.timeMs}ms)`;
+            // Track embedding cost from retrieval (flag to avoid double-counting with done)
+            if (data.tokens?.embed) {
+              CostTracker.addOperation('chat-embed', 'voyage-4-lite', data.tokens.embed);
+              retrievalCostTracked = true;
+            }
+            if (data.tokens?.rerank) {
+              CostTracker.addOperation('chat-rerank', 'rerank-2.5', data.tokens.rerank);
+            }
           }
 
           if (currentEvent === 'tool_call') {
@@ -11253,6 +11855,24 @@ async function sendChatMessage() {
           }
 
           if (currentEvent === 'done') {
+            // Track costs from done metadata (only if retrieval event didn't already)
+            const meta = data.metadata || {};
+            if (!retrievalCostTracked && meta.tokens?.embed) {
+              CostTracker.addOperation('chat-embed', 'voyage-4-lite', meta.tokens.embed);
+            }
+            if (!retrievalCostTracked && meta.tokens?.rerank) {
+              CostTracker.addOperation('chat-rerank', 'rerank-2.5', meta.tokens.rerank);
+            }
+            // Track LLM generation cost
+            if (meta.tokens?.llmInput || meta.tokens?.llmOutput) {
+              CostTracker.addLLMOperation('chat-llm', meta.llmModel, meta.tokens.llmInput, meta.tokens.llmOutput);
+            }
+            // Agent mode: track tool call tokens from steps/layers
+            if (data.steps) {
+              for (const step of data.steps) {
+                if (step.tokens) CostTracker.addOperation('chat-tool', step.model || 'voyage-4-lite', step.tokens);
+              }
+            }
             // Finalize the thinking panel (collapse, show elapsed)
             if (thinkingPanel) thinkingPanel.finalize();
             // Render accumulated text as markdown for assistant messages
@@ -11459,6 +12079,57 @@ init();
 .bug-success h3{margin:0 0 12px;color:var(--accent-text);font-size:20px}
 .bug-success p{margin:8px 0;color:var(--text-muted)}
 .bug-success code{background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--accent)}
+
+/* ── Cost Dashboard ── */
+#costStatusBar {
+  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
+  background: var(--bg-surface); border-top: 1px solid var(--border);
+  padding: 8px 16px; font-size: 13px; color: var(--text-dim);
+  display: flex; align-items: center; gap: 12px; backdrop-filter: blur(8px);
+  opacity: 0.95; font-family: 'SF Mono', 'Fira Code', monospace;
+}
+#costStatusBar .cost-sep { color: var(--border); }
+#costStatusBar .cost-savings { color: var(--green, #00D4AA); }
+#costStatusBar .cost-more { color: var(--red, #FF6960); }
+#costStatusBar .cost-val { color: var(--accent); font-weight: 600; }
+#costDetailsToggle {
+  margin-left: auto; cursor: pointer; color: var(--accent);
+  background: none; border: 1px solid var(--border); border-radius: 6px;
+  padding: 3px 10px; font-size: 12px; font-family: inherit;
+}
+#costDetailsToggle:hover { background: var(--bg-card); }
+#costDetailPanel {
+  position: fixed; bottom: 40px; left: 0; right: 0; z-index: 9998;
+  background: var(--bg-surface); border-top: 1px solid var(--border);
+  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
+}
+#costDetailPanel.open { max-height: 50vh; overflow-y: auto; }
+#costDetailPanel .cost-panel-inner { padding: 16px 20px; }
+#costDetailPanel table {
+  width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace;
+}
+#costDetailPanel th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 4px 8px; border-bottom: 1px solid var(--border); }
+#costDetailPanel td { padding: 4px 8px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
+#costDetailPanel .cost-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+#costDetailPanel .cost-panel-header h3 { margin: 0; font-size: 14px; color: var(--text); }
+#costResetBtn {
+  background: none; border: 1px solid var(--border); border-radius: 6px;
+  padding: 3px 10px; font-size: 12px; color: var(--text-dim); cursor: pointer; font-family: inherit;
+}
+#costResetBtn:hover { background: var(--bg-card); color: var(--text); }
+.cost-projection { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
+.cost-projection span { color: var(--accent); font-weight: 600; }
+.cost-toast {
+  position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%);
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+  padding: 8px 16px; font-size: 12px; color: var(--text-dim); z-index: 10000;
+  font-family: 'SF Mono', 'Fira Code', monospace; white-space: nowrap;
+  animation: costToastIn 0.2s ease, costToastOut 0.3s ease 2.7s forwards;
+  pointer-events: none;
+}
+@keyframes costToastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
+@keyframes costToastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
+body { padding-bottom: 44px; }
 </style>
 
 <!-- Bug button moved to sidebar footer -->
@@ -11602,92 +12273,119 @@ async function wfLoadLibrary() {
   }
 }
 
+// ── Library Search ──
+let _wfLibSearchTimer = null;
+function wfOnLibrarySearch() {
+  clearTimeout(_wfLibSearchTimer);
+  _wfLibSearchTimer = setTimeout(() => wfRenderLibrary(), 150);
+  const input = document.getElementById('wfLibrarySearch');
+  const clear = document.getElementById('wfLibrarySearchClear');
+  if (input && clear) clear.style.display = input.value ? 'block' : 'none';
+}
+function wfClearLibrarySearch() {
+  const input = document.getElementById('wfLibrarySearch');
+  if (input) { input.value = ''; input.focus(); }
+  const clear = document.getElementById('wfLibrarySearchClear');
+  if (clear) clear.style.display = 'none';
+  wfRenderLibrary();
+}
+
+function wfGetLibSectionStates() {
+  const state = wfGetLayoutState();
+  return (state.library && state.library.sections) || { builtin: true, examples: true, catalog: false, community: false };
+}
+function wfSaveLibSectionState(key, expanded) {
+  const state = wfGetLayoutState();
+  if (!state.library) state.library = { open: true };
+  if (!state.library.sections) state.library.sections = { builtin: true, examples: true, catalog: false, community: false };
+  state.library.sections[key] = expanded;
+  try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+}
+function wfToggleLibSection(key) {
+  const states = wfGetLibSectionStates();
+  const newVal = !states[key];
+  wfSaveLibSectionState(key, newVal);
+  // Toggle UI directly
+  const header = document.querySelector(`.wf-lib-section-header[data-section="${key}"]`);
+  const body = document.querySelector(`.wf-lib-section-body[data-section="${key}"]`);
+  if (header && body) {
+    header.classList.toggle('expanded', newVal);
+    if (newVal) {
+      body.style.maxHeight = body.scrollHeight + 'px';
+      setTimeout(() => { body.style.maxHeight = 'none'; }, 200);
+    } else {
+      body.style.maxHeight = body.scrollHeight + 'px';
+      requestAnimationFrame(() => { body.style.maxHeight = '0px'; });
+    }
+  }
+}
+
 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;
+
+  const searchInput = document.getElementById('wfLibrarySearch');
+  const query = (searchInput ? searchInput.value : '').toLowerCase().trim();
+  const sectionStates = wfGetLibSectionStates();
+
+  function matchesSearch(w) {
+    if (!query) return true;
+    const name = (w.name || '').toLowerCase();
+    const desc = (w.description || '').toLowerCase();
+    return name.includes(query) || desc.includes(query);
   }
 
-  // Built-in templates
-  let html = wfState.workflows.map(w => {
-    const displayName = w.name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+  function renderItem(w, prefix) {
+    const displayName = prefix + w.name.replace(/^@vaicli\/vai-workflow-/, '').replace(/^vai-workflow-/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    const authorLine = w.author ? `<span style="color:var(--text-muted);font-size:10px;">by ${w.author}${w.version ? ' · v' + w.version : ''}</span>` : '';
+    const tagLine = (w.tags || []).length ? `<div style="margin-top:2px;font-size:10px;color:var(--text-muted);">${w.tags.join(' · ')}</div>` : '';
     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>
+      ${authorLine}${tagLine}
     </div>`;
-  }).join('');
+  }
 
-  // Collapsible examples section
+  function renderSection(key, label, items, prefix) {
+    const filtered = items.filter(matchesSearch);
+    if (filtered.length === 0) return '';
+    const expanded = sectionStates[key] !== false;
+    const chevron = '&#9654;';
+    const itemsHtml = filtered.map(w => renderItem(w, prefix)).join('');
+    return `<div class="wf-library-section" data-section="${key}">
+      <div class="wf-lib-section-header ${expanded ? 'expanded' : ''}" data-section="${key}" onclick="wfToggleLibSection('${key}')">
+        <span class="wf-chevron">${chevron}</span>
+        <span>${label}</span>
+        <span class="wf-section-count">(${filtered.length})</span>
+      </div>
+      <div class="wf-lib-section-body" data-section="${key}" style="max-height:${expanded ? 'none' : '0px'};">
+        ${itemsHtml}
+      </div>
+    </div>`;
+  }
+
+  let html = '';
+
+  // Built-in
+  html += renderSection('builtin', 'Built-in', wfState.workflows, '');
+
+  // Examples
   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>';
+    html += renderSection('examples', 'Examples', examples, '');
   }
 
-  // Official catalog section
+  // Official catalog
   const official = wfState.official || [];
-  html += `<div class="wf-library-section">
-    <div class="wf-library-category" style="display:flex;align-items:center;justify-content:space-between;">
-      <span>Official Catalog (@vaicli) (${official.length})</span>
-    </div>`;
-  if (official.length === 0) {
-    html += '<div style="padding:8px 12px;color:var(--text-muted);font-size:11px;">No official workflows installed.</div>';
-  } else {
-    html += official.map(w => {
-      const displayName = w.name.replace(/^@vaicli\/vai-workflow-/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-      const authorLine = w.author ? `<span style="color:var(--text-muted);font-size:10px;">by ${w.author}${w.version ? ' · v' + w.version : ''}</span>` : '';
-      const tagLine = (w.tags || []).length ? `<div style="margin-top:2px;font-size:10px;color:var(--text-muted);">${w.tags.join(' · ')}</div>` : '';
-      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>
-        ${authorLine}${tagLine}
-      </div>`;
-    }).join('');
-  }
-  html += '</div>';
+  html += renderSection('catalog', 'Official Catalog (@vaicli)', official, '✓ ');
 
-  // Community workflows section
+  // Community
   const community = wfState.community || [];
-  html += `<div class="wf-library-section">
-    <div class="wf-library-category" style="display:flex;align-items:center;justify-content:space-between;">
-      <span>Community (${community.length})</span>
-      <button onclick="wfLoadLibrary()" title="Refresh" style="background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:12px;display:flex;align-items:center;"><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="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg></button>
-    </div>`;
-  if (community.length === 0) {
-    html += '<div style="padding:8px 12px;color:var(--text-muted);font-size:11px;">No community workflows installed.<br><code style="font-size:10px;">vai workflow install &lt;name&gt;</code></div>';
-  } else {
-    html += community.map(w => {
-      const displayName = w.name.replace(/^vai-workflow-/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-      const authorLine = w.author ? `<span style="color:var(--text-muted);font-size:10px;">by ${w.author}${w.version ? ' · v' + w.version : ''}</span>` : '';
-      const tagLine = (w.tags || []).length ? `<div style="margin-top:2px;font-size:10px;color:var(--text-muted);">${w.tags.join(' · ')}</div>` : '';
-      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>
-        ${authorLine}${tagLine}
-      </div>`;
-    }).join('');
+  html += renderSection('community', 'Community', community, '🌐 ');
+
+  if (!html) {
+    html = '<div style="padding:16px;color:var(--text-muted);font-size:12px;">No workflows found</div>';
   }
-  html += '</div>';
 
   // Install from npm button
   html += `<div style="padding:8px 12px;">
@@ -12244,22 +12942,200 @@ function wfDrawEdge(fromId, toId, positions) {
   return g;
 }
 
+// ── Panel Layout State ──
+let _wfLayoutSaveTimer = null;
+function wfGetLayoutState() {
+  try {
+    const s = localStorage.getItem('vai-workflow-layout');
+    if (s) return JSON.parse(s);
+  } catch(e) {}
+  return { library: { open: true }, properties: { open: true } };
+}
+function wfSaveLayoutState() {
+  clearTimeout(_wfLayoutSaveTimer);
+  _wfLayoutSaveTimer = setTimeout(() => {
+    const lib = document.getElementById('wfLibrary');
+    const insp = document.getElementById('wfInspector');
+    const existing = wfGetLayoutState();
+    const state = {
+      library: { open: lib ? !lib.classList.contains('collapsed') : true, sections: (existing.library && existing.library.sections) || { builtin: true, examples: true, catalog: false, community: false } },
+      properties: { open: insp ? !insp.classList.contains('collapsed') : true, sections: (existing.properties && existing.properties.sections) || { inputs: true, steps: false, output: false } }
+    };
+    try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+  }, 300);
+}
+// ── Properties Accordion State ──
+function wfGetAccordionStates() {
+  const state = wfGetLayoutState();
+  return (state.properties && state.properties.sections) || { inputs: true, steps: false, output: false };
+}
+function wfSaveAccordionState(key, expanded) {
+  const state = wfGetLayoutState();
+  if (!state.properties) state.properties = { open: true };
+  if (!state.properties.sections) state.properties.sections = { inputs: true, steps: false, output: false };
+  state.properties.sections[key] = expanded;
+  try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+}
+function wfToggleAccordion(key, headerEl) {
+  const body = document.querySelector(`.wf-accordion-body[data-acc="${key}"]`);
+  if (!body) return;
+  const expanded = headerEl.classList.contains('expanded');
+  const newVal = !expanded;
+  headerEl.classList.toggle('expanded', newVal);
+  if (newVal) {
+    body.style.maxHeight = body.scrollHeight + 'px';
+    setTimeout(() => { body.style.maxHeight = 'none'; }, 200);
+  } else {
+    body.style.maxHeight = body.scrollHeight + 'px';
+    requestAnimationFrame(() => { body.style.maxHeight = '0px'; });
+  }
+  wfSaveAccordionState(key, newVal);
+}
+
+function wfSyncPanelUI() {
+  const lib = document.getElementById('wfLibrary');
+  const insp = document.getElementById('wfInspector');
+  const libBtn = document.getElementById('wfToggleLibBtn');
+  const propsBtn = document.getElementById('wfTogglePropsBtn');
+  const leftHandle = document.getElementById('wfEdgeHandleLeft');
+  const rightHandle = document.getElementById('wfEdgeHandleRight');
+  const libCollapsed = lib && lib.classList.contains('collapsed');
+  const inspCollapsed = insp && insp.classList.contains('collapsed');
+  if (libBtn) libBtn.classList.toggle('active', !libCollapsed);
+  if (propsBtn) propsBtn.classList.toggle('active', !inspCollapsed);
+  if (leftHandle) leftHandle.classList.toggle('visible', !!libCollapsed);
+  if (rightHandle) rightHandle.classList.toggle('visible', !!inspCollapsed);
+}
+function wfRestoreLayoutState() {
+  const state = wfGetLayoutState();
+  const lib = document.getElementById('wfLibrary');
+  const insp = document.getElementById('wfInspector');
+  if (lib) lib.classList.toggle('collapsed', !state.library.open);
+  if (insp) insp.classList.toggle('collapsed', !state.properties.open);
+  wfSyncPanelUI();
+}
+
+// ── Library Toggle ──
+function wfToggleLibrary() {
+  const panel = document.getElementById('wfLibrary');
+  if (!panel) return;
+  panel.classList.toggle('collapsed');
+  wfSyncPanelUI();
+  wfSaveLayoutState();
+}
+
 // ── 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;';
+  wfSyncPanelUI();
+  wfSaveLayoutState();
 }
 
 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;';
+  wfSyncPanelUI();
+  wfSaveLayoutState();
+}
+
+// ── Sidebar Collapse ──
+function toggleSidebarCollapse() {
+  const sidebar = document.querySelector('.sidebar');
+  if (!sidebar) return;
+  sidebar.classList.toggle('collapsed');
+  // Persist
+  const state = wfGetLayoutState();
+  if (!state.sidebar) state.sidebar = {};
+  state.sidebar.collapsed = sidebar.classList.contains('collapsed');
+  try { localStorage.setItem('vai-workflow-layout', JSON.stringify(state)); } catch(e) {}
+}
+function restoreSidebarState() {
+  const state = wfGetLayoutState();
+  if (state.sidebar && state.sidebar.collapsed) {
+    const sidebar = document.querySelector('.sidebar');
+    if (sidebar) sidebar.classList.add('collapsed');
+  }
 }
+restoreSidebarState();
+
+// ── Keyboard Shortcuts (Workflows tab only) ──
+let _wfLastOpenedPanel = null; // 'library' or 'properties'
+(function() {
+  const origToggleLib = window.wfToggleLibrary;
+  window.wfToggleLibrary = function() {
+    origToggleLib();
+    const lib = document.getElementById('wfLibrary');
+    if (lib && !lib.classList.contains('collapsed')) _wfLastOpenedPanel = 'library';
+  };
+  const origToggleInsp = window.wfToggleInspector;
+  window.wfToggleInspector = function() {
+    origToggleInsp();
+    const insp = document.getElementById('wfInspector');
+    if (insp && !insp.classList.contains('collapsed')) _wfLastOpenedPanel = 'properties';
+  };
+})();
+
+document.addEventListener('keydown', function(e) {
+  // Only active when Workflows tab is visible
+  const wfTab = document.getElementById('tab-workflows');
+  if (!wfTab || wfTab.style.display === 'none' || !wfTab.classList.contains('active')) {
+    // Check if tab-btn-workflows is active instead
+    const wfBtn = document.getElementById('tab-btn-workflows');
+    if (!wfBtn || !wfBtn.classList.contains('active')) return;
+  }
+
+  const mod = e.metaKey || e.ctrlKey;
+  if (!mod && e.key !== 'Escape') return;
+
+  // Cmd/Ctrl + Shift + B → Toggle sidebar
+  if (mod && e.shiftKey && (e.key === 'B' || e.key === 'b')) {
+    e.preventDefault();
+    toggleSidebarCollapse();
+    return;
+  }
+  // Cmd/Ctrl + B → Toggle Library
+  if (mod && !e.shiftKey && (e.key === 'B' || e.key === 'b')) {
+    e.preventDefault();
+    wfToggleLibrary();
+    return;
+  }
+  // Cmd/Ctrl + I → Toggle Properties
+  if (mod && (e.key === 'I' || e.key === 'i')) {
+    e.preventDefault();
+    wfToggleInspector();
+    return;
+  }
+  // Cmd/Ctrl + \ → Collapse both panels
+  if (mod && e.key === '\\') {
+    e.preventDefault();
+    const lib = document.getElementById('wfLibrary');
+    const insp = document.getElementById('wfInspector');
+    if (lib && !lib.classList.contains('collapsed')) { lib.classList.add('collapsed'); }
+    if (insp && !insp.classList.contains('collapsed')) { insp.classList.add('collapsed'); }
+    wfSyncPanelUI();
+    wfSaveLayoutState();
+    return;
+  }
+  // Escape → Close most recently opened panel
+  if (e.key === 'Escape' && !mod) {
+    if (_wfLastOpenedPanel === 'library') {
+      const lib = document.getElementById('wfLibrary');
+      if (lib && !lib.classList.contains('collapsed')) { wfToggleLibrary(); _wfLastOpenedPanel = null; return; }
+    }
+    if (_wfLastOpenedPanel === 'properties') {
+      const insp = document.getElementById('wfInspector');
+      if (insp && !insp.classList.contains('collapsed')) { wfToggleInspector(); _wfLastOpenedPanel = null; return; }
+    }
+    // Fallback: close properties then library
+    const insp = document.getElementById('wfInspector');
+    if (insp && !insp.classList.contains('collapsed')) { wfToggleInspector(); return; }
+    const lib = document.getElementById('wfLibrary');
+    if (lib && !lib.classList.contains('collapsed')) { wfToggleLibrary(); return; }
+  }
+});
 
 // ── Node Selection ──
 function wfSelectNode(stepId) {
@@ -12321,56 +13197,83 @@ function wfUpdateInspector() {
         <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
+      // Read-only: Description (above accordion)
       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>';
+      // Get accordion states from localStorage
+      const accStates = wfGetAccordionStates();
+      const hasDone = !!wfState.executionResults._done;
+
+      // ── INPUTS Accordion ──
+      const inputKeys = def.inputs ? Object.keys(def.inputs) : [];
+      const inputsExpanded = accStates.inputs !== false;
+      html += `<div class="wf-accordion-header ${inputsExpanded ? 'expanded' : ''}" onclick="wfToggleAccordion('inputs', this)">
+        <span class="wf-acc-left"><span class="wf-chevron">&#9654;</span> INPUTS</span>
+        <span class="wf-acc-summary">${inputKeys.length} field${inputKeys.length !== 1 ? 's' : ''}</span>
+      </div>
+      <div class="wf-accordion-body" data-acc="inputs" style="max-height:${inputsExpanded ? 'none' : '0px'};">
+        <div class="wf-accordion-body-inner">`;
+      if (inputKeys.length > 0) {
         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;">
+          html += `<div style="margin-bottom:12px;">
             <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 style="font-size:10px;color:var(--text-muted);margin-bottom:4px;">${escapeHtml(spec.description || spec.type || '')}</div>
+            <input class="wf-inspector-input" id="wf-input-${key}" placeholder="${escapeHtml(key)}" value="${spec.default !== undefined ? escapeHtml(String(spec.default)) : ''}">
           </div>`;
         }
-        html += '</div>';
+      } else {
+        html += '<div style="font-size:12px;color:var(--text-muted);">No inputs defined</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>
+      html += '</div></div>';
+
+      // ── STEPS Accordion ──
+      const stepCount = def.steps.length;
+      const layerCount = wfState.layers ? wfState.layers.length : 0;
+      const stepsSummary = `${stepCount} step${stepCount !== 1 ? 's' : ''}${layerCount ? ' · ' + layerCount + ' layer' + (layerCount !== 1 ? 's' : '') : ''}`;
+      const stepsExpanded = accStates.steps === true;
+      html += `<div class="wf-accordion-header ${stepsExpanded ? 'expanded' : ''}" onclick="wfToggleAccordion('steps', this)">
+        <span class="wf-acc-left"><span class="wf-chevron">&#9654;</span> STEPS</span>
+        <span class="wf-acc-summary">${stepsSummary}</span>
+      </div>
+      <div class="wf-accordion-body" data-acc="steps" style="max-height:${stepsExpanded ? 'none' : '0px'};">
+        <div class="wf-accordion-body-inner">`;
+      for (const step of def.steps) {
+        const meta = WF_NODE_META[step.tool] || { color: '#666' };
+        const result = wfState.executionResults[step.id];
+        const timeStr = result && result.timeMs != null ? result.timeMs + 'ms' : '—';
+        html += `<div class="wf-step-row">
+          <span class="wf-step-dot" style="background:${meta.color}"></span>
+          <span class="wf-step-name">${escapeHtml(step.name || step.id)}</span>
+          <span class="wf-step-time">${timeStr}</span>
         </div>`;
       }
-    }
+      html += '</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>`;
+      // ── OUTPUT Accordion ──
+      const outputExpanded = hasDone || accStates.output === true;
+      html += `<div class="wf-accordion-header ${outputExpanded ? 'expanded' : ''}" onclick="wfToggleAccordion('output', this)">
+        <span class="wf-acc-left"><span class="wf-chevron">&#9654;</span> OUTPUT</span>
+        <span class="wf-acc-summary"></span>
+      </div>
+      <div class="wf-accordion-body" data-acc="output" style="max-height:${outputExpanded ? 'none' : '0px'};">
+        <div class="wf-accordion-body-inner">`;
+      if (hasDone) {
+        const r = wfState.executionResults._done;
+        const doneJson = JSON.stringify(r.output, null, 2);
+        html += `<div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;">Completed in ${r.totalTimeMs}ms</div>
+          <div class="wf-inspector-code" style="max-height:200px;overflow:auto;color:#40E0FF;">${escapeHtml(doneJson)}</div>
+          <button class="wf-output-expand-btn" data-expand-step="_done">&#x2922; Expand</button>`;
+      } else if (def.output) {
+        html += `<div class="wf-inspector-code" style="color:#40E0FF;">${escapeHtml(JSON.stringify(def.output, null, 2))}</div>`;
+      } else {
+        html += '<div style="font-size:12px;color:var(--text-muted);">Run the workflow to see output</div>';
+      }
+      html += '</div></div>';
     }
 
     body.innerHTML = html;
@@ -12390,10 +13293,13 @@ function wfUpdateInspector() {
 
   let html = '';
 
-  // Tool badge (always shown)
+  // Tool badge (always shown) with help button
   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 style="display:flex;align-items:center;">
+      <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>
+      <button class="wf-inspector-help-btn" onclick="wfOpenHelpModal('${step.tool}')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> Help</button>
+    </div>
   </div>`;
 
   if (wfState.builderMode) {
@@ -13051,9 +13957,105 @@ function wfCopyOutput() {
   });
 }
 
-// Close modal on Escape
+// ── Node Help Modal ──
+let _nodeHelpCache = null;
+async function getNodeHelp() {
+  if (_nodeHelpCache) return _nodeHelpCache;
+  try {
+    const res = await fetch('/api/workflows/node-help');
+    const data = await res.json();
+    _nodeHelpCache = data.nodeHelp || {};
+  } catch { _nodeHelpCache = {}; }
+  return _nodeHelpCache;
+}
+
+async function wfOpenHelpModal(tool) {
+  const helpData = await getNodeHelp();
+  const help = helpData[tool];
+  const meta = WF_NODE_META[tool] || { icon: WF_FALLBACK_ICON, label: tool, color: '#666', category: 'unknown' };
+  const categoryLabel = WF_CATEGORY_LABELS[meta.category] || meta.category || 'Unknown';
+
+  const headerEl = document.getElementById('wfHelpModalHeader');
+  const bodyEl = document.getElementById('wfHelpModalBody');
+  const backdrop = document.getElementById('wfHelpModalBackdrop');
+  if (!headerEl || !bodyEl || !backdrop) return;
+
+  // Build header
+  const isEmoji = !meta.icon.includes(' ');
+  const iconHtml = isEmoji
+    ? `<div class="wf-help-icon" style="background:${meta.color}22;font-size:18px;">${meta.icon}</div>`
+    : `<div class="wf-help-icon" style="background:${meta.color}22;color:${meta.color};"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="${meta.icon}"/></svg></div>`;
+
+  headerEl.innerHTML = iconHtml
+    + `<span class="wf-help-title">${escapeHtml(meta.label)}</span>`
+    + `<span class="wf-help-category-badge">${escapeHtml(categoryLabel)}</span>`
+    + `<button class="wf-help-close-btn" onclick="wfCloseHelpModal()" title="Close"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>`;
+
+  // Build body
+  if (!help) {
+    bodyEl.innerHTML = `<div class="wf-help-section"><p>No help content available for this node yet.</p></div>`;
+    backdrop.style.display = 'flex';
+    return;
+  }
+
+  let html = '';
+
+  // Overview
+  if (help.description) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Overview</div><p>${escapeHtml(help.description)}</p></div>`;
+  }
+
+  // How it Works
+  if (help.howItWorks) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">How it Works</div><p>${escapeHtml(help.howItWorks)}</p></div>`;
+  }
+
+  // Inputs
+  if (help.inputs && help.inputs.length > 0) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Inputs</div><table class="wf-help-io-table"><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody>`;
+    for (const inp of help.inputs) {
+      const reqBadge = inp.required ? '<span class="wf-help-required">required</span>' : '';
+      html += `<tr><td><span class="wf-help-key">${escapeHtml(inp.key)}</span>${reqBadge}</td><td><span class="wf-help-type">${escapeHtml(inp.type)}</span></td><td>${escapeHtml(inp.desc)}</td></tr>`;
+    }
+    html += '</tbody></table></div>';
+  }
+
+  // Outputs
+  if (help.outputs && help.outputs.length > 0) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Output</div><table class="wf-help-io-table"><thead><tr><th>Field</th><th>Type</th><th>Description</th></tr></thead><tbody>`;
+    for (const out of help.outputs) {
+      html += `<tr><td><span class="wf-help-key">${escapeHtml(out.key)}</span></td><td><span class="wf-help-type">${escapeHtml(out.type)}</span></td><td>${escapeHtml(out.desc)}</td></tr>`;
+    }
+    html += '</tbody></table></div>';
+  }
+
+  // Tips
+  if (help.tips && help.tips.length > 0) {
+    html += `<div class="wf-help-section"><div class="wf-help-section-title">Tips</div>`;
+    for (const tip of help.tips) {
+      html += `<div class="wf-help-tip"><span class="wf-help-tip-dot"></span><span>${escapeHtml(tip)}</span></div>`;
+    }
+    html += '</div>';
+  }
+
+  bodyEl.innerHTML = html;
+  backdrop.style.display = 'flex';
+}
+
+function wfCloseHelpModal() {
+  const backdrop = document.getElementById('wfHelpModalBackdrop');
+  if (backdrop) backdrop.style.display = 'none';
+}
+
+// Close modals on Escape
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
+    const helpBackdrop = document.getElementById('wfHelpModalBackdrop');
+    if (helpBackdrop && helpBackdrop.style.display !== 'none') {
+      wfCloseHelpModal();
+      e.preventDefault();
+      return;
+    }
     const backdrop = document.getElementById('wfOutputModalBackdrop');
     if (backdrop && backdrop.style.display !== 'none') {
       wfCloseOutputModal();
@@ -13222,6 +14224,7 @@ function wfRenderPalette() {
       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>
+        <button class="wf-help-trigger" onclick="event.stopPropagation();wfOpenHelpModal('${item.tool}')" title="Help: ${item.label}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button>
       </div>`;
     }
     html += '</div>';
@@ -13728,7 +14731,25 @@ const _WF_FALLBACK_BRANDING = {
   'batch-quality-gate':       { icon:'check-circle',  color:'#166534',  iconPath:'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3' },
   'index-health-check':       { icon:'bar-chart-3',   color:'#1D4ED8',  iconPath:'M12 20V10M18 20V4M6 20v-4' },
 };
-WF_STORE_FALLBACK.forEach(wf => { wf.branding = _WF_FALLBACK_BRANDING[wf.name] || { icon:'zap', color:'#64748B', iconPath:'M13 2 3 14h9l-1 8 10-12h-9l1-8z' }; });
+WF_STORE_FALLBACK.forEach(wf => {
+  wf.branding = _WF_FALLBACK_BRANDING[wf.name] || { icon:'zap', color:'#64748B', iconPath:'M13 2 3 14h9l-1 8 10-12h-9l1-8z' };
+  wf.verified = true;
+  wf.security = [];
+  wf.rating = null;
+});
+
+function getCapabilityBadges(tools) {
+  if (!Array.isArray(tools)) return [];
+  const badges = [];
+  if (tools.includes('http')) badges.push({ emoji: '🌐', label: 'NETWORK', cls: 'wf-store-badge-cap-network' });
+  if (tools.includes('ingest') || tools.includes('aggregate')) badges.push({ emoji: '💾', label: 'WRITE_DB', cls: 'wf-store-badge-cap-writedb' });
+  if (tools.includes('generate')) badges.push({ emoji: '🤖', label: 'LLM', cls: 'wf-store-badge-cap-llm' });
+  if (tools.includes('loop') || tools.includes('forEach')) badges.push({ emoji: '🔄', label: 'LOOP', cls: 'wf-store-badge-cap-loop' });
+  if (tools.some(t => ['query','search','collections','aggregate'].includes(t))) badges.push({ emoji: '📊', label: 'READ_DB', cls: 'wf-store-badge-cap-readdb' });
+  return badges;
+}
+
+let _wfStoreUserRatings = {};
 
 let _wfStoreCatalog = null;
 let _wfStoreCat = 'all';
@@ -13833,8 +14854,13 @@ function wfStoreRender() {
       const dots = (wf.tools||[]).slice(0,5).map(t =>
         `<div class="wf-store-card-dot" style="background:${WF_STORE_TOOL_COLORS[t]||'#666'}"></div>`
       ).join('') + ((wf.tools||[]).length > 5 ? `<span style="font-family:var(--mono);font-size:9px;color:var(--text-muted);margin-left:2px">+${wf.tools.length-5}</span>` : '');
-      const badges = (wf.installed ? '<span class="wf-store-badge-installed">installed</span>' : '') +
+      const badges = (wf.verified ? '<span class="wf-store-badge-verified">✓ VERIFIED</span>' : '') +
+        (wf.installed ? '<span class="wf-store-badge-installed">installed</span>' : '') +
         `<span class="wf-store-badge-official">${wf.tier==='official' ? '✓ OFFICIAL' : 'COMMUNITY'}</span>`;
+      const capBadges = getCapabilityBadges(wf.tools);
+      const capBadgesHtml = capBadges.length > 0
+        ? `<div class="wf-store-cap-badges">${capBadges.map(b => `<span class="wf-store-badge-capability ${b.cls}">${b.emoji} ${b.label}</span>`).join('')}</div>`
+        : '';
       const cardIconColor = (wf.branding && wf.branding.color) || '#64748B';
       const cardIconSvg = wfBrandingIcon(wf, 16);
       const cardIconHtml = cardIconSvg
@@ -13848,6 +14874,7 @@ function wfStoreRender() {
         </div>
         <div class="wf-store-card-desc">${wf.description||''}</div>
         ${wf.author && wf.author.name && wf.author.name !== 'unknown' ? `<div class="wf-store-card-author">by ${wf.author.name}</div>` : ''}
+        ${capBadgesHtml}
         <div class="wf-store-card-meta">
           <span class="wf-store-card-cat">${wf.category||'utility'}</span>
           <div class="wf-store-card-dots">${dots}</div>
@@ -13893,6 +14920,7 @@ function wfStoreShowDetail(name) {
   modal.className = 'wf-store-detail-bg';
   modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
   modal.innerHTML = `<div class="wf-store-detail-panel" onclick="event.stopPropagation()">
+    <div class="wf-store-detail-scroll">
     <div class="wf-store-detail-hero" style="background:${wf.gradient}">
       <button class="wf-store-detail-close" onclick="document.getElementById('wfStoreDetail').remove()">×</button>
       <div class="wf-store-detail-hero-inner">
@@ -13955,12 +14983,45 @@ function wfStoreShowDetail(name) {
           <span>$ ${rc}</span><span class="wf-store-detail-cmd-hint">copy</span>
         </div>
       </div>
+      ${(() => {
+        const capBadges = getCapabilityBadges(wf.tools);
+        if (capBadges.length === 0) return '';
+        return `<div class="wf-store-detail-section">
+          <div class="wf-store-detail-label">Capabilities</div>
+          <div style="display:flex;gap:5px;flex-wrap:wrap">${capBadges.map(b => `<span class="wf-store-badge-capability ${b.cls}">${b.emoji} ${b.label}</span>`).join('')}</div>
+        </div>`;
+      })()}
+      ${(() => {
+        const sec = wf.security || [];
+        if (sec.length === 0) return `<div class="wf-store-detail-section"><div class="wf-store-detail-label">Security</div><div class="wf-store-detail-security-ok">✓ No security issues found</div></div>`;
+        return `<div class="wf-store-detail-section"><div class="wf-store-detail-label">Security</div>${sec.map(f => `<div class="wf-store-detail-security-item"><span class="wf-store-detail-security-sev ${f.severity||'low'}">${f.severity||'low'}</span><span>${f.message||f.rule||'Issue found'}</span></div>`).join('')}</div>`;
+      })()}
+      ${wf.verified ? `<div class="wf-store-detail-section"><div class="wf-store-detail-label">Verified</div><div class="wf-store-detail-security-ok">✓ This workflow has passed all validation checks (L1–L4): schema, security audit, quality audit, and capability analysis.</div></div>` : ''}
+      <div class="wf-store-detail-section">
+        <div class="wf-store-detail-label">Rating</div>
+        <div style="display:flex;align-items:center;gap:12px">
+          <span style="font-size:12px;color:var(--text-dim)">${wf.rating != null ? wf.rating.toFixed(1) + ' / 5' : 'Not yet rated'}</span>
+        </div>
+        <div style="margin-top:8px;font-size:11px;color:var(--text-muted)">Rate this workflow:</div>
+        <div class="wf-store-detail-stars" id="wfStoreRateStars">
+          ${[1,2,3,4,5].map(i => `<span onclick="_wfStoreUserRatings['${wf.name}']=${i};document.querySelectorAll('#wfStoreRateStars span').forEach((s,j)=>s.className=j<${i}?'filled':'')" class="${(_wfStoreUserRatings[wf.name]||0)>=i?'filled':''}">★</span>`).join('')}
+        </div>
+      </div>
+      <div class="wf-store-detail-section">
+        <button class="wf-store-detail-btn wf-store-detail-btn-secondary" style="flex:none;width:auto;padding:6px 14px;font-size:11px" onclick="document.getElementById('wfStoreReportForm').style.display=document.getElementById('wfStoreReportForm').style.display==='none'?'block':'none'">⚑ Report</button>
+        <div id="wfStoreReportForm" class="wf-store-report-form" style="display:none">
+          <select id="wfStoreReportReason"><option value="">Select reason...</option><option value="malicious">Malicious</option><option value="broken">Broken</option><option value="low quality">Low quality</option><option value="spam">Spam</option></select>
+          <textarea id="wfStoreReportComment" placeholder="Optional comment..."></textarea>
+          <button class="wf-store-report-submit" onclick="document.getElementById('wfStoreReportForm').style.display='none';const t=document.createElement('div');t.style.cssText='position:fixed;bottom:20px;right:20px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:12px 20px;color:var(--text);font-size:13px;z-index:9999;animation:wfStoreDetailFadeIn .2s';t.textContent='✓ Report submitted';document.body.appendChild(t);setTimeout(()=>t.remove(),3000)">Submit Report</button>
+        </div>
+      </div>
       <div class="wf-store-detail-actions">
         ${installBtn}
         <button class="wf-store-detail-btn wf-store-detail-btn-secondary" onclick="wfStoreRun('${wf.name}')">Run</button>
         <button class="wf-store-detail-btn wf-store-detail-btn-secondary" onclick="wfStoreCanvas('${wf.name}')">Canvas</button>
       </div>
     </div>
+    </div>
   </div>`;
   document.body.appendChild(modal);
 }
@@ -14046,6 +15107,7 @@ document.addEventListener('keydown', (e) => {
 });
 
 function wfInit() {
+  wfRestoreLayoutState();
   wfLoadLibrary();
   wfInitPan();
 }
@@ -14177,5 +15239,241 @@ let wfInitialized = false;
 })();
 </script>
 
+<!-- Cost Dashboard -->
+<div id="costDetailPanel">
+  <div class="cost-panel-inner">
+    <div class="cost-panel-header">
+      <h3>💰 Cost Dashboard</h3>
+      <button id="costResetBtn" onclick="CostTracker.reset()">Reset Session</button>
+    </div>
+    <table id="costOpsTable">
+      <thead><tr><th>Time</th><th>Operation</th><th>Model</th><th>Tokens</th><th>Cost</th><th>If v4-large</th><th>If OpenAI</th></tr></thead>
+      <tbody></tbody>
+    </table>
+    <div class="cost-projection" id="costProjection"></div>
+  </div>
+</div>
+<div id="costStatusBar">
+  <span>💰 Session: <span class="cost-val" id="costTotal">$0.000000</span></span>
+  <span class="cost-sep">│</span>
+  <span><span id="costTokens">0</span> tokens</span>
+  <span class="cost-sep">│</span>
+  <span><span id="costOps">0</span> ops</span>
+  <span class="cost-sep">│</span>
+  <span>LLM: <span class="cost-val" id="costLLM">$0.000000</span> (<span id="costLLMIn">0</span>in/<span id="costLLMOut">0</span>out)</span>
+  <span class="cost-sep">│</span>
+  <span>If symmetric: <span id="costSymmetric">$0.000000</span> <span id="costSymDelta"></span></span>
+  <span class="cost-sep">│</span>
+  <span>If OpenAI: <span id="costCompetitor">$0.000000</span> <span id="costCompDelta"></span></span>
+  <button id="costDetailsToggle" onclick="CostTracker.togglePanel()">Details ▾</button>
+</div>
+
+<script>
+(function() {
+  const PRICING = {
+    'voyage-4-large': 0.12, 'voyage-4': 0.06, 'voyage-4-lite': 0.02,
+    'voyage-code-3': 0.18, 'voyage-finance-2': 0.12, 'voyage-law-2': 0.12,
+    'rerank-2.5': 0.05, 'rerank-2.5-lite': 0.02,
+    'voyage-multimodal-3': 0.12,
+  };
+  const LARGE_PRICE = 0.12;
+  const OPENAI_PRICE = 0.13;
+
+  // LLM pricing: per-million tokens { input, output }
+  const LLM_PRICING = {
+    'claude-sonnet-4-5-20250929': { input: 3.00, output: 15.00 },
+    'claude-opus-4-20250514': { input: 15.00, output: 75.00 },
+    'claude-3-5-haiku-20241022': { input: 0.80, output: 4.00 },
+    'claude-sonnet-4': { input: 3.00, output: 15.00 },
+    'claude-opus-4': { input: 15.00, output: 75.00 },
+    'gpt-4o': { input: 2.50, output: 10.00 },
+    'gpt-4o-mini': { input: 0.15, output: 0.60 },
+    'gpt-4-turbo': { input: 10.00, output: 30.00 },
+    'o1': { input: 15.00, output: 60.00 },
+    'o1-mini': { input: 3.00, output: 12.00 },
+    'o3-mini': { input: 1.10, output: 4.40 },
+  };
+
+  function getLLMPrice(model) {
+    if (!model) return { input: 0, output: 0 };
+    if (LLM_PRICING[model]) return LLM_PRICING[model];
+    // Fuzzy match
+    for (const k of Object.keys(LLM_PRICING)) {
+      if (model.includes(k) || k.includes(model)) return LLM_PRICING[k];
+    }
+    // Match by prefix (e.g. "claude-sonnet-4-5" matches the full versioned key)
+    for (const k of Object.keys(LLM_PRICING)) {
+      const base = k.replace(/-\d{8}$/, '');
+      if (model.includes(base) || base.includes(model)) return LLM_PRICING[k];
+    }
+    return { input: 0, output: 0 }; // Unknown model: free (don't inflate costs)
+  }
+
+  function llmCostForTokens(model, inputTokens, outputTokens) {
+    const prices = getLLMPrice(model);
+    return (prices.input / 1_000_000) * inputTokens + (prices.output / 1_000_000) * outputTokens;
+  }
+
+  function getPrice(model) {
+    if (PRICING[model] != null) return PRICING[model];
+    // fuzzy match
+    for (const k of Object.keys(PRICING)) {
+      if (model.includes(k) || k.includes(model)) return PRICING[k];
+    }
+    return 0.06; // default fallback
+  }
+
+  function costForTokens(pricePerMillion, tokens) {
+    return (pricePerMillion / 1_000_000) * tokens;
+  }
+
+  const session = {
+    operations: [], totalCost: 0, totalTokens: 0, totalOperations: 0,
+    symmetricCost: 0, competitorCost: 0,
+    llmCost: 0, llmInputTokens: 0, llmOutputTokens: 0,
+  };
+
+  window.CostTracker = {
+    addOperation(op, model, tokens) {
+      if (!tokens || tokens <= 0) return;
+      const price = getPrice(model);
+      const cost = costForTokens(price, tokens);
+      const largeCost = costForTokens(LARGE_PRICE, tokens);
+      const competitorCost = costForTokens(OPENAI_PRICE, tokens);
+
+      session.operations.push({
+        timestamp: new Date(), operation: op, model, tokens, cost,
+        hypotheticalLargeCost: largeCost, hypotheticalCompetitorCost: competitorCost,
+      });
+      session.totalCost += cost;
+      session.totalTokens += tokens;
+      session.totalOperations++;
+      session.symmetricCost += largeCost;
+      session.competitorCost += competitorCost;
+
+      this._updateUI();
+      this._showToast(op, model, tokens, cost, largeCost);
+    },
+
+    addLLMOperation(op, model, inputTokens, outputTokens) {
+      if ((!inputTokens || inputTokens <= 0) && (!outputTokens || outputTokens <= 0)) return;
+      const cost = llmCostForTokens(model, inputTokens || 0, outputTokens || 0);
+      const totalTokens = (inputTokens || 0) + (outputTokens || 0);
+
+      session.operations.push({
+        timestamp: new Date(), operation: op, model: model || 'unknown',
+        tokens: totalTokens, cost, isLLM: true,
+        inputTokens: inputTokens || 0, outputTokens: outputTokens || 0,
+        hypotheticalLargeCost: 0, hypotheticalCompetitorCost: 0,
+      });
+      session.totalCost += cost;
+      session.totalTokens += totalTokens;
+      session.totalOperations++;
+      session.llmCost += cost;
+      session.llmInputTokens += (inputTokens || 0);
+      session.llmOutputTokens += (outputTokens || 0);
+
+      this._updateUI();
+      this._showLLMToast(op, model, inputTokens || 0, outputTokens || 0, cost);
+    },
+
+    reset() {
+      session.operations.length = 0;
+      session.totalCost = 0; session.totalTokens = 0; session.totalOperations = 0;
+      session.symmetricCost = 0; session.competitorCost = 0;
+      session.llmCost = 0; session.llmInputTokens = 0; session.llmOutputTokens = 0;
+      this._updateUI();
+    },
+
+    getProjectedMonthlyCost(queriesPerMonth) {
+      if (session.totalOperations === 0) return { actual: 0, symmetric: 0, competitor: 0 };
+      const avgCost = session.totalCost / session.totalOperations;
+      const avgSym = session.symmetricCost / session.totalOperations;
+      const avgComp = session.competitorCost / session.totalOperations;
+      return { actual: avgCost * queriesPerMonth, symmetric: avgSym * queriesPerMonth, competitor: avgComp * queriesPerMonth };
+    },
+
+    togglePanel() {
+      const panel = document.getElementById('costDetailPanel');
+      const btn = document.getElementById('costDetailsToggle');
+      const isOpen = panel.classList.toggle('open');
+      btn.textContent = isOpen ? 'Details ▴' : 'Details ▾';
+      if (isOpen && typeof sendTelemetry === 'function') sendTelemetry('cost_panel_viewed');
+    },
+
+    _updateUI() {
+      document.getElementById('costTotal').textContent = '$' + session.totalCost.toFixed(6);
+      document.getElementById('costTokens').textContent = session.totalTokens.toLocaleString();
+      document.getElementById('costOps').textContent = session.totalOperations;
+      document.getElementById('costLLM').textContent = '$' + session.llmCost.toFixed(6);
+      document.getElementById('costLLMIn').textContent = session.llmInputTokens.toLocaleString();
+      document.getElementById('costLLMOut').textContent = session.llmOutputTokens.toLocaleString();
+      document.getElementById('costSymmetric').textContent = '$' + session.symmetricCost.toFixed(6);
+      document.getElementById('costCompetitor').textContent = '$' + session.competitorCost.toFixed(6);
+
+      // Deltas
+      const symDelta = document.getElementById('costSymDelta');
+      const compDelta = document.getElementById('costCompDelta');
+      if (session.totalCost > 0) {
+        const symPct = ((session.symmetricCost - session.totalCost) / session.totalCost * 100).toFixed(0);
+        const compPct = ((session.competitorCost - session.totalCost) / session.totalCost * 100).toFixed(0);
+        symDelta.textContent = symPct > 0 ? `(+${symPct}%)` : `(${symPct}%)`;
+        symDelta.className = symPct > 0 ? 'cost-more' : 'cost-savings';
+        compDelta.textContent = compPct > 0 ? `(+${compPct}%)` : `(${compPct}%)`;
+        compDelta.className = compPct > 0 ? 'cost-more' : 'cost-savings';
+      } else {
+        symDelta.textContent = ''; compDelta.textContent = '';
+      }
+
+      // Table
+      const tbody = document.querySelector('#costOpsTable tbody');
+      tbody.innerHTML = session.operations.map(o => {
+        const tokensDisplay = o.isLLM
+          ? `${o.inputTokens.toLocaleString()}in / ${o.outputTokens.toLocaleString()}out`
+          : o.tokens.toLocaleString();
+        const largeCostDisplay = o.isLLM ? 'n/a' : `$${o.hypotheticalLargeCost.toFixed(6)}`;
+        const compCostDisplay = o.isLLM ? 'n/a' : `$${o.hypotheticalCompetitorCost.toFixed(6)}`;
+        return `<tr${o.isLLM ? ' style="background:rgba(180,90,242,0.08)"' : ''}>
+          <td>${o.timestamp.toLocaleTimeString()}</td>
+          <td>${o.operation}</td>
+          <td>${o.model}</td>
+          <td>${tokensDisplay}</td>
+          <td>$${o.cost.toFixed(6)}</td>
+          <td>${largeCostDisplay}</td>
+          <td>${compCostDisplay}</td>
+        </tr>`;
+      }).join('');
+
+      // Projection
+      const proj = this.getProjectedMonthlyCost(1_000_000);
+      const projEl = document.getElementById('costProjection');
+      if (session.totalOperations > 0) {
+        projEl.innerHTML = `📊 Projected at 1M queries/month: <span>$${proj.actual.toFixed(2)}</span> actual │ $${proj.symmetric.toFixed(2)} symmetric │ $${proj.competitor.toFixed(2)} OpenAI`;
+      } else {
+        projEl.innerHTML = '';
+      }
+    },
+
+    _showToast(op, model, tokens, cost, largeCost) {
+      const saved = largeCost > 0 ? Math.round((1 - cost / largeCost) * 100) : 0;
+      const savingsText = saved > 0 ? ` — saved ${saved}% vs v4-large` : '';
+      const toast = document.createElement('div');
+      toast.className = 'cost-toast';
+      toast.textContent = `✅ ${op} — $${cost.toFixed(6)} (${model}, ${tokens.toLocaleString()} tokens)${savingsText}`;
+      document.body.appendChild(toast);
+      setTimeout(() => toast.remove(), 3100);
+    },
+
+    _showLLMToast(op, model, inputTokens, outputTokens, cost) {
+      const toast = document.createElement('div');
+      toast.className = 'cost-toast';
+      toast.textContent = `🤖 ${op} — $${cost.toFixed(6)} (${model || 'LLM'}, ${inputTokens.toLocaleString()}in/${outputTokens.toLocaleString()}out)`;
+      document.body.appendChild(toast);
+      setTimeout(() => toast.remove(), 3100);
+    }
+  };
+})();
+</script>
+
 </body>
 </html>