<!--
================================================================================
GUIness — LLM INSTRUCTIONS
================================================================================

## What this file is

This is a self-contained single-file HTML application called GUIness.
It is a visual node-graph editor for designing, documenting, and managing AI
"skill" pipelines — workflows where Claude or another LLM moves data through a
series of named, typed nodes connected by edges.

The entire application — HTML, CSS, JavaScript, and all skill data — lives in
this one file, with no external dependencies whatsoever. The IBM Plex Mono and
DM Sans fonts are inlined as base64 woff2, so nothing is fetched over the network.
No build step.
Drop it in a browser and it runs.

## How to display / run it

When a user shares this file with you and asks you to show it, open it, or work
with it, you MUST use a file-rendering tool (e.g. present_files, artifact viewer,
or equivalent) that renders raw HTML in a sandboxed iframe. Do NOT attempt to
summarise the code or describe it as text — the user wants the app to run.

If you are in an environment that cannot render HTML (e.g. a plain-text chat),
tell the user: "This is a self-contained HTML app. Open pipeline-builder.html
directly in any browser — no server needed."

## What the app contains

- A left panel: skill library with three tabs (My Skills, Built-In, Recent),
  a collapsible tag-filter section, and an "+ Add Skill" button.
- A central canvas: pan with Space+drag or middle-click, zoom with scroll wheel.
  Nodes can be dragged, multi-selected (Shift+click or lasso), and connected by
  drawing from output ports to input ports.
- A right panel: inspector showing the selected node's or skill's properties,
  content (Markdown), dependencies, and internal graph.
- A topbar: Reset View, Save Library, GitHub Gist sync (⎇), Credential Vault
  (🔑), theme toggle (🌙), snap-to-grid toggle (⊞), text size slider, and
  Export → MD.

## Skill data format (for code edits)

Skills are stored as a JavaScript array between these two sentinel comments
inside the &lt;script&gt; block:

    /* __SKILLS_START__ */
    let skills = [ ... ];
    /* __SKILLS_END__ */


Each skill object has this shape:

    {
      id: 'unique-id',
      label: 'DISPLAY NAME',
      color: 'cyan' | 'blue' | 'purple' | 'accent' | 'grn' | 'org' | 'red' | 'dimHi' | 'cyn',
      glyph: '◈',            // single character shown on the node
      shape: 'default' | 'ghost' | 'dashed',
      category: 'My Category',
      desc: 'Short description shown in the library.',
      tags: ['tag1', 'tag2'],
      isBuiltin: false,
      hasIn: true,
      hasOut: true,
      fields: [],            // custom editable fields on the node
      rawContent: "...",     // Markdown shown in the Content tab (JSON-encoded string)
      defaultInputs:  [{ id, name, type }],
      defaultOutputs: [{ id, name, type }],
      deps: ['other-skill-id'],   // skills this one depends on
      internalGraph: {            // nested pipeline shown when you Tab into the node
        nodes: [ nodeObj, ... ],
        edges: [ edgeObj, ... ]
      }
    }

Port types: 'Text' | 'Number' | 'Boolean' | 'Image' | 'Video' | 'Audio' |
            'JSON' | 'File' | 'Any'

## How to add or edit skills programmatically

1. Locate the skills array between /* __SKILLS_START__ */ and /* __SKILLS_END__ */.
2. Add, edit, or remove skill objects following the shape above.
3. All strings embedded in the JS must be JSON-safe: use json.dumps() or
   equivalent, then replace every '<' with '\u003c' so the HTML parser cannot
   misinterpret embedded HTML tags as script boundaries.
4. Write the modified file back — the change takes effect on next browser load.

## Credential Vault

The 🔑 Vault stores API keys encrypted with AES-GCM + PBKDF2 in localStorage.
Supported credential types: github-token, gist-id, api-key, anthropic-key, custom.
The Anthropic key (sk-ant-api03-…) is used by the "✦ Generate with AI" option
in the Add Skill wizard to call the Anthropic Messages API directly from the
browser.

## GitHub Gist sync

The ⎇ button syncs the skills library to/from a GitHub Gist using a classic
personal access token (ghp_…) with the `gist` scope. Fine-grained tokens are
not supported.

## File formats

- `.ppln`  — Pipeline file. JSON containing {name, stack, skills}. Skills
  referenced by nodes are bundled for portability.
- `.sklb`  — Skill library file. JSON array of skill objects.
- `.json`  — Legacy format accepted on import. Content-sniffed: if it has a
  `stack` property it's treated as a pipeline; if it's an array, a library.
- `.md / .txt` — Imported as a single skill node (frontmatter parsed for name).
- `.zip / .skill` — Multi-file skill archive.

Drag-and-drop is supported on the canvas and library panel.

## Key keyboard shortcuts

  Space + drag   Pan the canvas
  Scroll         Zoom
  Tab            Enter the internal graph of the selected node
  Escape         Close open overlay / cancel connection / exit graph / clear selection
  Delete/Backspace   Delete selected node(s)
  Shift + click  Add node to multi-selection

================================================================================
-->
<!DOCTYPE html>
<!--
  ╔═══════════════════════════════════════════════════════════════╗
  ║  GUIness — The GUI Harness                                    ║
  ║  A Visual AI Workflow Pipeline Builder consisting of          ║
  ║  a self-contained, single-file HTML application               ║
  ║  https://github.com/discoposse/GUIness                        ║
  ╚═══════════════════════════════════════════════════════════════╝

  FILE STRUCTURE
  ══════════════
  This file is organized into clearly delineated sections:

  HTML STRUCTURE (lines ~1-1060)
  ├── <head> — Meta, fonts, favicon
  ├── <style> — All CSS (see STYLE GUIDE below)
  └── <body> — DOM structure
      ├── Top toolbar
      ├── Pipeline tab bar
      ├── Left panel (Node Library)
      ├── Canvas area + minimap
      ├── Right panel (Inspector)
      ├── LLM Export drawer
      ├── Overlays (vault, gist, generate, branch, confirm, shortcuts)
      └── Social posting panel

  JAVASCRIPT (after the script tag)
  ├── CONFIG & CONSTANTS — Colors, primitives, spacing
  ├── SKILLS ARRAY — Built-in primitive node definitions
  ├── PERSISTENCE — localStorage save/load for skills & pipelines
  ├── PIPELINE MANAGEMENT — Create, switch, close, rename, save
  ├── TAB BAR — Drag-to-reorder, click-to-switch, rename
  ├── CANVAS — Pan, zoom, grid, transform
  ├── NODE RENDERING — buildNode(), rebuildNode(), node DOM
  ├── EDGE RENDERING — SVG edges, connection drawing
  ├── SELECTION — Click, shift-click, lasso, multi-select
  ├── KEYBINDINGS — All keyboard shortcuts
  ├── INSPECTOR — Right panel rendering, field editors
  ├── LIBRARY — Left panel rendering, search, sort, categories
  ├── EXPORT — Markdown, GPT JSON, Gem format builders
  ├── LLM CALLS — callAI, callAIStreaming, callAIWithHistory
  ├── RUN PIPELINE — Send handler, chain execution, streaming
  ├── FILE CARDS — File detection and download cards in responses
  ├── SOCIAL POSTING — Rich editor, platform APIs, preview/post
  ├── MINIMAP — Canvas overview, click-to-navigate
  ├── VAULT — AES-GCM encryption, credential management
  ├── GITHUB SYNC — Gist push/pull/auto-sync
  ├── AUTOSAVE — Timer, file system backup, beforeunload
  ├── THEME — Light/dark toggle, text scaling
  └── INIT — Startup, restore state, render

  CUSTOMIZATION GUIDE
  ═══════════════════
  All visual appearance is controlled in three places:

  1. CSS CUSTOM PROPERTIES (search: ":root{")
     — Colors (OKLCH), fonts, easing curves, spacing scale
     — Change these to retheme the entire app

  2. COLORS MAP (search: "const COLORS=")
     — Node color palette used by the canvas
     — Each entry maps a name to an OKLCH color string

  3. CSS CLASSES (in the <style> block)
     — All component styles: nodes, panels, buttons, etc.
     — Organized by component with section comments

  To customize:
  • Change accent color: edit --acc in :root
  • Change node colors: edit the COLORS map
  • Change fonts: edit --mono and --body in :root
  • Change spacing: edit --sp-xs through --sp-2xl
  • Change transitions: edit --ease and --ease-out
  • Add a new primitive: add to the skills[] array (search: "PRIMITIVE NODES")
-->
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>GUIness</title>
<style>
/* Inlined Latin-subset woff2 — IBM Plex Mono 400/600/700, DM Sans 400/600. Zero network fetches; non-Latin glyphs fall back to system fonts. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')}
</style>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0d11;color:#dde2ed;font-family:'DM Sans',system-ui,sans-serif;transition:background .2s var(--ease),color .2s}
:root{
  /* OKLCH palette — warm-tinted neutrals, perceptually uniform accents */
  --bg:oklch(0.12 0.008 250);--surf:oklch(0.15 0.01 250);--panel:oklch(0.18 0.012 250);--card:oklch(0.21 0.014 250);
  --code-bg:oklch(0.12 0.008 250);--code-txt:oklch(0.9 0.01 250);
  --brd:oklch(0.28 0.014 250);--brdhi:oklch(0.36 0.016 250);--txt:oklch(0.88 0.01 250);--dim:oklch(0.5 0.016 250);--dhi:oklch(0.66 0.014 250);
  --acc:oklch(0.75 0.16 70);--alo:oklch(0.25 0.06 70);--grn:oklch(0.72 0.17 165);--red:oklch(0.65 0.2 25);
  --blue:oklch(0.7 0.14 250);--pur:oklch(0.68 0.16 300);--cyn:oklch(0.76 0.12 200);--org:oklch(0.72 0.17 55);
  --mono:'IBM Plex Mono',monospace;
  --body:'IBM Plex Mono',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-lg:16px;--sp-xl:24px;--sp-2xl:32px;
  --ease-out:cubic-bezier(0.33, 1, 0.68, 1);
}
/* LIGHT MODE */
body.light{background:oklch(0.94 0.006 250);color:oklch(0.2 0.02 250)}
body.light{
  --bg:oklch(0.92 0.006 250);--surf:oklch(0.97 0.004 250);--panel:oklch(1 0 0);--card:oklch(0.94 0.006 250);
  --code-bg:oklch(0.12 0.008 250);--code-txt:oklch(0.9 0.01 250);
  --brd:oklch(0.84 0.008 250);--brdhi:oklch(0.74 0.01 250);--txt:oklch(0.2 0.02 250);--dim:oklch(0.5 0.012 250);--dhi:oklch(0.38 0.016 250);
  --acc:oklch(0.62 0.18 70);--alo:oklch(0.92 0.06 80);--grn:oklch(0.55 0.18 165);--red:oklch(0.52 0.2 25);
  --blue:oklch(0.52 0.18 250);--pur:oklch(0.48 0.2 300);--cyn:oklch(0.52 0.12 200);--org:oklch(0.58 0.18 55);
}
body.light #canvas-wrap{background-image:radial-gradient(circle,var(--brd) 1px,transparent 1px)}
body.light .node-card{background:var(--card)}

body.light .port-in{background:transparent}
body.light .port-out{background:var(--dhi)}
/* ── SCROLLBARS ── */
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:var(--brd) transparent}
/* Webkit / Blink */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brd);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--brdhi)}
::-webkit-scrollbar-corner{background:transparent}
/* SIZE SLIDER in topbar */
#size-slider{width:75px;height:3px;accent-color:var(--acc);cursor:pointer;border:none;background:var(--brd);border-radius:2px;padding:0;vertical-align:middle;flex-shrink:0}
#autosave-input{width:32px;background:transparent;border:1px solid var(--brd);border-radius:4px;color:var(--dhi);font-family:var(--mono);font-size:9px;padding:2px 4px;text-align:center}
#autosave-input:focus{border-color:var(--acc);outline:none;color:var(--txt)}
#size-slider::-webkit-slider-thumb{width:10px;height:10px}
.size-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0}
.size-lbl{font-family:var(--mono);font-size:8px;color:var(--dim);white-space:nowrap}
/* THEME TOGGLE */
#btn-theme{font-size:13px;border:1px solid var(--brd);border-radius:5px;padding:3px 7px;color:var(--dim);line-height:1}
button{cursor:pointer;font-family:var(--mono);border:none;outline:none;background:none}
input,textarea,select{font-family:var(--mono);font-size:11px;color:var(--txt);background:var(--panel);border:1px solid var(--brd);border-radius:6px;padding:5px 8px;outline:none;width:100%;display:block}
textarea{resize:none;line-height:1.6}
select option{background:var(--panel)}
.hidden{display:none!important}

#app{display:flex;flex-direction:column;height:100vh;width:100vw}

/* ── TOOLBAR ── */
#topbar{height:51px;background:var(--surf);border-bottom:1px solid var(--brd);display:flex;align-items:center;padding:0 16px;gap:9px;flex-shrink:0;z-index:100}
#body{flex:1;display:flex;overflow:hidden;min-height:0;flex-direction:column}

/* ── CANVAS ── */
#canvas-area{flex:1;display:flex;overflow:hidden;min-height:0}
.panel-collapse-btn{width:20px;height:20px;border-radius:4px;background:transparent;border:1px solid var(--brd);color:var(--dim);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease);line-height:1;flex-shrink:0}
.panel-collapse-btn:hover{color:var(--acc);border-color:var(--acc);background:rgba(232,160,32,.06)}
.panel-expand-btn{width:28px;height:100%;background:var(--surf);border:none;color:var(--dim);font-size:9px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .15s var(--ease);z-index:10;writing-mode:vertical-lr;letter-spacing:.1em;font-family:var(--mono);flex-shrink:0}
.panel-expand-btn:hover{color:var(--acc);background:rgba(232,160,32,.06)}
#left .panel-expand-btn{border-right:1px solid var(--brd)}
#right .panel-expand-btn{border-left:1px solid var(--brd)}

/* TOPBAR */
.t-logo{font-size:15px;color:var(--acc)}
.t-title{font-family:var(--mono);font-size:24px !important;font-weight:700; color:var(--acc);letter-spacing:.05em}
.t-badge{font-family:var(--mono);font-size:10px;color:var(--dim);background:var(--panel);border:1px solid var(--brd);border-radius:3px;padding:1px 5px}
.t-count{font-family:var(--mono);font-size:8px;color:var(--dhi);background:var(--card);border:1px solid var(--brd);border-radius:3px;padding:1px 7px}
.tbtn{border:1px solid var(--brd);border-radius:6px;padding:5px 11px;font-size:10px;color:var(--dhi);font-family:var(--mono)}
.tbtn:hover{border-color:var(--brdhi);color:var(--txt)}
.tbtn.danger{color:var(--red);border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.07)}
.tbtn.primary{background:var(--acc);border-color:var(--acc);color:#0b0d11;font-weight:700}

/* ── PIPELINE TABS & NO-PIPELINE SCREEN ── */
#no-pipeline-screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);z-index:200}
#no-pipeline-screen.visible{display:flex}
#no-pipeline-screen h2{font-family:var(--mono);font-size:13px;color:var(--dhi);letter-spacing:.12em;margin:0}
#no-pipeline-screen p{font-family:var(--mono);font-size:9px;color:var(--dim);margin:0}
#no-pipeline-screen .nps-btns{display:flex;gap:10px;margin-top:4px}
#no-pipeline-screen .nps-btn{font-family:var(--mono);font-size:10px;font-weight:700;border-radius:8px;padding:10px 22px;cursor:pointer;border:1px solid}
#no-pipeline-screen .nps-btn.pri{background:var(--alo);border-color:var(--acc);color:var(--acc)}
#no-pipeline-screen .nps-btn.sec{background:transparent;border-color:var(--brd);color:var(--dhi)}
#no-pipeline-screen .nps-btn:hover.pri{background:rgba(232,160,32,.18)}
#no-pipeline-screen .nps-btn:hover.sec{border-color:var(--dhi)}
#no-pipeline-screen .nps-section{display:flex;flex-direction:column;align-items:center;gap:6px}
#no-pipeline-screen .nps-section-label{font-family:var(--mono);font-size:8px;color:var(--dim);letter-spacing:.18em}
#no-pipeline-screen .nps-divider{width:120px;height:1px;background:var(--brd);opacity:.5;margin:2px 0}
#no-pipeline-screen .nps-note{font-family:var(--mono);font-size:9px;color:var(--dim);max-width:300px;line-height:1.5;text-align:center}

#pipeline-tabbar{height:34px;background:var(--panel);border-bottom:1px solid var(--brd);display:flex;align-items:stretch;flex-shrink:0;overflow-x:auto;overflow-y:hidden;z-index:90}
#pipeline-tabbar::-webkit-scrollbar{height:3px}
#pipeline-tabbar::-webkit-scrollbar-thumb{background:var(--brd);border-radius:2px}
#pipeline-tabbar::-webkit-scrollbar-thumb:hover{background:var(--brdhi)}
.ptab{display:flex;align-items:center;gap:6px;padding:0 12px;border-right:1px solid var(--brd);cursor:pointer;font-family:var(--mono);font-size:9px;color:var(--dim);white-space:nowrap;min-width:90px;max-width:160px;position:relative;flex-shrink:0;user-select:none}
.ptab:hover{background:rgba(255,255,255,.03);color:var(--dhi)}
.ptab.active{background:var(--surf);color:var(--txt);border-bottom:2px solid var(--acc)}
.ptab-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.ptab-close{font-size:11px;opacity:.4;flex-shrink:0;border-radius:3px;padding:0 2px;line-height:1}
.ptab-close:hover{opacity:1;background:rgba(255,255,255,.08)}
.ptab-new{display:flex;align-items:center;padding:0 12px;cursor:pointer;font-size:16px;color:var(--dim);flex-shrink:0;border-right:1px solid var(--brd)}
.ptab-new:hover{color:var(--acc);background:rgba(255,255,255,.03)}
.ptab-unsaved::after{content:'●';font-size:7px;color:var(--acc);position:absolute;top:6px;right:18px}

/* OPEN PIPELINES PANEL */
#open-pipelines-panel{position:fixed;z-index:1500;background:var(--panel);border:1px solid var(--brdhi);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.6);min-width:280px;max-width:360px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden}
#open-pipelines-panel .opp-hdr{padding:10px 14px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:8px;flex-shrink:0}
#open-pipelines-panel .opp-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--txt);flex:1}
#open-pipelines-panel .opp-close{font-size:14px;color:var(--dim);cursor:pointer;padding:0 2px}
#open-pipelines-panel .opp-close:hover{color:var(--txt)}
#open-pipelines-panel .opp-body{overflow-y:auto;flex:1;padding:6px}
#open-pipelines-panel .opp-section{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);padding:6px 8px 3px}
#open-pipelines-panel .opp-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;cursor:pointer}
#open-pipelines-panel .opp-row:hover{background:rgba(255,255,255,.05)}
#open-pipelines-panel .opp-row.is-open{opacity:.5;cursor:default}
#open-pipelines-panel .opp-name{font-family:var(--mono);font-size:10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
#open-pipelines-panel .opp-meta{font-size:8px;color:var(--dim);white-space:nowrap}
#open-pipelines-panel .opp-badge{font-family:var(--mono);font-size:7px;border:1px solid var(--brd);border-radius:3px;padding:1px 5px;color:var(--dim)}
#open-pipelines-panel .opp-badge.open-badge{border-color:rgba(232,160,32,.4);color:var(--acc)}
#open-pipelines-panel .opp-badge.file-badge{border-color:rgba(34,211,238,.4);color:var(--cyn)}
#open-pipelines-panel .opp-new-row{display:flex;gap:6px;padding:8px;border-top:1px solid var(--brd);flex-shrink:0}
#open-pipelines-panel .opp-new-inp{flex:1;font-size:9px}
#open-pipelines-panel .opp-new-btn{font-family:var(--mono);font-size:10px;padding:4px 10px;border:1px solid var(--acc);border-radius:6px;color:var(--acc)}
#open-pipelines-panel .opp-new-btn:hover{background:var(--alo)}
.ptab-open{display:flex;align-items:center;padding:0 11px;cursor:pointer;font-size:13px;color:var(--dim);flex-shrink:0;border-right:1px solid var(--brd);gap:4px;font-family:var(--mono);font-size:8px}
.ptab-open:hover{color:var(--acc);background:rgba(255,255,255,.03)}
.ptab.dragging{opacity:.35;cursor:grabbing!important}
.ptab.drag-over-left {box-shadow:-2px 0 0 0 var(--acc) inset}
.ptab.drag-over-right{box-shadow: 2px 0 0 0 var(--acc) inset}
#tab-drag-ghost{position:fixed;pointer-events:none;z-index:9999;padding:0 12px;height:34px;display:flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;background:var(--surf);border:1px solid var(--acc);border-radius:6px;color:var(--acc);opacity:.9;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.5)}
/* BREADCRUMB */
#breadcrumb{height:30px;background:var(--panel);border-bottom:1px solid var(--brd);display:flex;align-items:center;padding:0 14px;gap:6px;flex-shrink:0;overflow-x:auto}
#breadcrumb.root-level{display:none}
.bc-item{font-family:var(--mono);font-size:10px;color:var(--dim);cursor:pointer;white-space:nowrap;padding:2px 6px;border-radius:4px}
.bc-item:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.bc-item.active{color:var(--txt);cursor:default}
.bc-item.active:hover{background:none}
.bc-sep{font-size:10px;color:var(--dim);flex-shrink:0}
.bc-exit{font-family:var(--mono);font-size:9px;border:1px solid var(--brd);border-radius:4px;padding:2px 10px;color:var(--dhi);margin-left:auto;flex-shrink:0}
.bc-exit:hover{border-color:var(--acc);color:var(--acc)}

/* DEPTH INDICATOR on canvas */
#depth-badge{position:absolute;top:10px;left:10px;background:var(--alo);border:1px solid var(--acc);border-radius:5px;padding:3px 10px;font-family:var(--mono);font-size:9px;color:var(--acc);pointer-events:none;z-index:50;display:none}


/* LEFT */

/* ── LEFT PANEL (NODE LIBRARY) ── */
#left{width:450px;min-width:120px;max-width:840px;background:var(--surf);border-right:1px solid var(--brd);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;user-select:none;position:relative;transition:width .2s var(--ease),min-width .2s}
#left.collapsed{width:28px!important;min-width:28px!important;overflow:hidden}
#left.collapsed>*:not(.panel-expand-btn){display:none!important}
#left.collapsed>.panel-expand-btn{display:flex!important}
#lib-head{padding:8px 10px;border-bottom:1px solid var(--brd);flex-shrink:0;display:flex;flex-direction:column;gap:6px}
#lib-head-btns{display:flex;gap:5px; font-size: 12px;}
#lib-head-btns button{flex:1;font-family:var(--mono); font-weight:700;border-radius:6px;padding:7px 7px;white-space:nowrap;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px}
#btn-ai-generate{background:var(--alo);border:1px solid var(--acc);color:var(--acc)}
#btn-ai-generate:hover{background:var(--acc);color:#0b0d11}
#add-skill-btn{background:var(--alo); border:1px solid var(--acc);color:var(--acc)}
#add-skill-btn:hover{background:var(--acc);color:#0b0d11}
#import-skill-btn{background:transparent;border:1px solid var(--brd);color:var(--dhi)}
#import-skill-btn:hover{border-color:var(--cyn);color:var(--cyn)}
.lbl{font-family:var(--mono);color:var(--dim);letter-spacing:.13em}
#lib-search{width:100%;font-size:10px}
#tag-section{border-bottom:1px solid var(--brd);flex-shrink:0;transition:opacity .15s var(--ease)}
#tag-section-hdr{display:flex;align-items:center;padding:5px 10px;cursor:pointer;user-select:none;gap:5px}
#tag-section-hdr:hover{background:rgba(255,255,255,.02)}
#tag-section-lbl{font-family:var(--mono);font-size:7px;color:var(--dim);letter-spacing:.12em;flex:1}
#tag-section-count{font-family:var(--mono);font-size:7px;color:var(--dim)}
#tag-section-chev{font-size:8px;color:var(--dim);transition:transform .18s var(--ease);line-height:1}
#tag-section-chev.open{transform:rotate(180deg)}
#tag-section-body{padding:6px 8px 8px;display:flex;flex-direction:column;gap:6px}
#tag-section-body.closed{display:none}
#lib-filter-tags{display:flex;gap:4px;flex-wrap:wrap;min-height:0}
.ftag{font-family:var(--mono);font-size:8px;border:1px solid var(--brd);border-radius:10px;padding:1px 6px 1px 8px;color:var(--dim);cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.ftag.on{border-color:var(--acc);color:var(--acc);background:var(--alo)}
.ftag-x{font-size:10px;line-height:1;opacity:.5;flex-shrink:0}
.ftag-x:hover{opacity:1}
#tag-add-row{display:flex;gap:4px;align-items:center}
#tag-add-input{flex:1;font-size:9px;padding:2px 6px;border-radius:8px}
#tag-add-btn{font-family:var(--mono);font-size:8px;border:1px solid var(--acc);border-radius:8px;padding:1px 8px;color:var(--acc);flex-shrink:0}
#tag-add-btn:hover{background:var(--alo)}
#lib-list{flex:1;overflow-y:auto}
.sec-hdr{font-family:var(--mono);font-size:8px;color:var(--acc);letter-spacing:.12em;padding:7px 10px 4px;display:flex;align-items:center;gap:6px;border-top:1px solid var(--brd);cursor:pointer;user-select:none}
.sec-hdr:hover{background:rgba(255,255,255,.02)}
.sec-hdr .sec-arrow{font-size:8px;color:var(--dim);transition:transform .15s var(--ease)}
.sec-hdr.collapsed .sec-arrow{transform:rotate(-90deg)}
.sec-hdr .sec-count{color:var(--dim);margin-left:auto;font-size:7px}
.lib-row{border-bottom:1px solid var(--brd);cursor:pointer}
.lri{padding:7px 10px;display:flex;align-items:center;gap:7px}
.lri:hover{background:rgba(255,255,255,.02)}
.lib-row.sel .lri{background:rgba(255,255,255,.04)}
.lib-row.lib-multi-sel{background:rgba(232,160,32,.15);border-left:3px solid var(--acc);box-shadow:inset 0 0 0 1px rgba(232,160,32,.25)}
.lib-row.lib-multi-sel .lri{background:transparent}
.lib-row.lib-multi-sel .ln{color:var(--acc)!important}
#lib-multi-bar{display:none;flex-shrink:0;align-items:center;gap:6px;padding:7px 10px;border-top:1px solid var(--brd);background:var(--panel)}
#lib-multi-bar.visible{display:flex}
#lib-multi-count{font-family:var(--mono);font-size:9px;color:var(--acc);flex:1}
.lmb-btn{font-family:var(--mono);font-size:9px;border:1px solid var(--brd);border-radius:5px;padding:3px 10px;color:var(--dhi);cursor:pointer}
.lmb-btn:hover{border-color:var(--dhi);color:var(--txt)}
.lmb-btn.danger{color:var(--red);border-color:rgba(248,113,113,.3)}
.lmb-btn.danger:hover{background:rgba(248,113,113,.07);border-color:var(--red)}
.lg{font-size:13px;flex-shrink:0}
.li{flex:1;min-width:0}
.ln{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld{font-size:9px;color:var(--dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladd{border:1px solid var(--brd);border-radius:4px;width:18px;height:18px;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--dhi)}
.ladd:hover{color:inherit;border-color:inherit}
.row-acts{padding:0 10px 6px;display:flex;gap:4px;flex-wrap:wrap}
.ract{font-family:var(--mono);font-size:7px;border:1px solid var(--brd);border-radius:4px;padding:2px 7px;color:var(--dhi)}
.ract:hover{border-color:var(--brdhi);color:var(--txt)}
.ract.del{border-color:rgba(248,113,113,.3);color:var(--red)}
.ract.del:hover{background:rgba(248,113,113,.08)}
.node[id] .node-head[data-boundary]{border-bottom-style:dashed}

/* GRAPH BOUNDARY NODES */
.node.boundary-node{border-style:dashed;opacity:.95}
.node.boundary-node .node-head{border-bottom-style:dashed}
/* LIB TABS */
#lib-tabs{display:flex;border-bottom:1px solid var(--brd);flex-shrink:0}
.ltab{flex:1;font-family:var(--mono);font-size:7px;font-weight:700;letter-spacing:.1em;color:var(--dim);padding:7px 4px 6px;text-align:center;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s var(--ease),border-color .15s}
.ltab:hover{color:var(--dhi)}
.ltab.on{color:var(--acc);border-bottom-color:var(--acc)}
/* RESIZER */
.resizer{width:5px;background:transparent;cursor:col-resize;flex-shrink:0;z-index:10;transition:background .15s var(--ease)}
.resizer:hover,.resizer.dragging{background:var(--acc)}

/* DRAG GHOST */
#drag-ghost{position:fixed;pointer-events:none;z-index:999;background:var(--card);border:1.5px solid var(--acc);border-radius:9px;padding:6px 10px;display:none;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;opacity:.92;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 3px rgba(232,160,32,.2);white-space:nowrap;transform:translate(-50%,-50%)}
#drag-ghost .dg-glyph{font-size:13px}
#canvas-wrap.drag-over{outline:2px solid var(--acc)!important;outline-offset:-2px}
#canvas-wrap.drop-file-over{outline:2px dashed var(--dim)!important;outline-offset:-2px}
#left.drop-file-over{outline:2px dashed var(--dim)!important;outline-offset:-2px}
.drop-banner{position:absolute;left:50%;top:16px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:6px 16px;border-radius:6px;z-index:50;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .15s var(--ease)}
/* v48.13 — system toast for non-blocking notifications (e.g. vault auto-relock).
   Sits above all other layers; pointer-events disabled so it never blocks clicks. */
#toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--acc);color:var(--txt);font-family:var(--mono);font-size:10px;letter-spacing:.04em;padding:8px 16px;border-radius:6px;z-index:10000;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);box-shadow:0 4px 16px rgba(0,0,0,.4);white-space:nowrap}
.drop-banner.visible{opacity:1}
.drop-banner.type-pipeline{background:oklch(.25 .04 200);border:1px solid var(--cyn);color:var(--cyn)}
.drop-banner.type-library{background:oklch(.25 .04 300);border:1px solid oklch(0.68 0.16 300);color:oklch(0.78 0.14 300)}
.drop-banner.type-skill{background:oklch(.25 .04 165);border:1px solid var(--grn);color:var(--grn)}

/* CANVAS */
#canvas-wrap{flex:1;position:relative;overflow:hidden;background-image:radial-gradient(circle,var(--brd) 1px,transparent 1px);transition:outline .2s var(--ease) var(--ease)}

/* ── MINIMAP ── */
#quick-add{position:absolute;z-index:30;width:220px;background:var(--panel);border:1px solid var(--brd);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden}
#quick-add input{font-family:var(--mono);font-size:10px;padding:8px 10px;background:transparent;border:none;border-bottom:1px solid var(--brd);color:var(--dhi);outline:none}
#quick-add-list{max-height:200px;overflow-y:auto;padding:4px 0}
.qa-item{font-family:var(--mono);font-size:10px;padding:6px 10px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--dhi);transition:background .1s}
.qa-item:hover,.qa-item.active{background:var(--surf)}
.qa-item .qa-glyph{font-size:12px;width:18px;text-align:center;flex-shrink:0}
.qa-item .qa-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.align-guide{stroke:var(--acc);stroke-width:0.5;stroke-dasharray:4,3;opacity:.6;pointer-events:none}
#minimap{position:absolute;bottom:12px;right:12px;width:180px;height:120px;background:var(--panel);border:1px solid var(--brd);border-radius:8px;z-index:20;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:height .2s var(--ease),opacity .2s;opacity:.85}
#minimap:hover{opacity:1}
#minimap.collapsed{height:20px}
#minimap.collapsed #minimap-canvas,#minimap.collapsed #minimap-viewport{display:none}
#minimap-toggle{position:absolute;top:0;left:0;right:0;height:20px;font-family:var(--mono);font-size:7px;color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;letter-spacing:.1em;user-select:none;background:var(--panel);border-bottom:1px solid var(--brd);border-radius:8px 8px 0 0}
#minimap-toggle:hover{color:var(--acc)}
#minimap-canvas{position:absolute;top:20px;left:0;width:100%;height:calc(100% - 20px)}
#minimap-viewport{position:absolute;border:1.5px solid var(--acc);background:rgba(232,160,32,.08);border-radius:2px;pointer-events:none;z-index:1;top:20px}
#canvas-wrap.nested{outline:2px solid var(--acc);outline-offset:-2px}
#scene{position:absolute;top:0;left:0;transform-origin:0 0;width:0;height:0;overflow:visible}
#scene svg{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:visible;pointer-events:none}
#scene svg .edge-hit{pointer-events:stroke;cursor:pointer}
#empty-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.eh-icon{font-size:28px;opacity:.08}
.eh-txt{font-family:var(--mono);font-size:10px;color:var(--dim);text-align:center;line-height:1.9;opacity:.65}
#conn-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--alo);border:1px solid var(--acc);border-radius:5px;padding:3px 12px;font-family:var(--mono);font-size:9px;color:var(--acc);pointer-events:none;z-index:50}
#zoom-lbl{position:absolute;bottom:16px;right:200px;font-family:var(--mono);font-size:8px;color:var(--dim);background:var(--surf);border:1px solid var(--brd);border-radius:4px;padding:2px 7px;pointer-events:none}

/* ── NODES ── */
.node{position:absolute;width:214px;min-width:140px;border-radius:9px;background:transparent;border:none;cursor:default;user-select:none;transition:border-color .15s var(--ease),box-shadow .15s;overflow:visible}
.node-card{background:var(--card);border:1.5px solid var(--brd);border-radius:9px;position:relative;z-index:2;display:flex;flex-direction:column}
/* Side resize zones on the card */
.node-side-resize{position:absolute;top:0;width:6px;height:100%;cursor:ew-resize;z-index:3}
.node-side-resize.left{left:-3px}
.node-side-resize.right{right:-3px}
.node-top-resize{position:absolute;left:0;top:-3px;width:100%;height:6px;cursor:ns-resize;z-index:3}
.node-bot-resize{position:absolute;left:0;bottom:-3px;width:100%;height:6px;cursor:ns-resize;z-index:3}
.node-corner-resize{position:absolute;width:10px;height:10px;z-index:4}
.node-corner-resize.nw{left:-5px;top:-5px;cursor:nwse-resize}
.node-corner-resize.ne{right:-5px;top:-5px;cursor:nesw-resize}
.node-corner-resize.sw{left:-5px;bottom:-5px;cursor:nesw-resize}
.node-corner-resize.se{right:-5px;bottom:-5px;cursor:nwse-resize}
/* Drawer bottom drag bar */
.node-drawer-drag{height:8px;cursor:ns-resize;display:flex;align-items:center;justify-content:center;opacity:.4;transition:opacity .15s var(--ease);flex-shrink:0}
.node-drawer-drag:hover{opacity:.8}
.node-drawer-drag::after{content:'';width:32px;height:3px;border-radius:2px;background:var(--brdhi)}
.node-head{border-radius:7px 7px 0 0;padding:7px 9px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--brd);cursor:grab}
.node-head:active{cursor:grabbing}
.node-glyph{font-size:11px;line-height:1}
.node-label{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text;border-bottom:1px solid transparent;transition:border-color .15s}
.node-label:hover{border-color:var(--brd)}
.node-tag{font-family:var(--mono);font-size:6px;color:var(--dim);background:var(--panel);border:1px solid var(--brd);border-radius:3px;padding:1px 4px;flex-shrink:0}
.node-diverge-dot{display:none;width:6px;height:6px;border-radius:50%;background:oklch(0.78 0.16 70);box-shadow:0 0 4px oklch(0.78 0.16 70 / 0.6);flex-shrink:0;align-self:center}
.node-diverge-dot.show{display:inline-block}
.node-warn-badge{display:none;font-size:9px;line-height:1;color:oklch(0.78 0.16 70);text-shadow:0 0 4px oklch(0.78 0.16 70 / 0.6);flex-shrink:0;align-self:center;cursor:help}
.node-warn-badge.show{display:inline-block}
.node-body{padding:6px 9px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.nfrow{display:flex;gap:4px;margin-bottom:2px;overflow:hidden}
.nfk{font-family:var(--mono);font-size:8px;color:var(--dim);flex-shrink:0;white-space:nowrap}
.nfv{font-family:var(--mono);font-size:8px;color:var(--dhi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndesc{font-size:9px;color:var(--dim);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.node-card.has-h .ndesc{-webkit-line-clamp:unset;display:block}
/* Compute body inline instructions editor (Step 5 — body-prominent for the central logic primitive) */
.node-instructions-editor{display:block;width:100%;margin-top:6px;background:rgba(255,255,255,.02);border:1px solid var(--brd);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:9px;line-height:1.5;padding:6px 8px;resize:none;box-sizing:border-box;min-height:60px;overflow-y:auto;flex:1}
.node-instructions-editor:focus{border-color:var(--acc);outline:none;background:rgba(255,255,255,.03)}
.node-instructions-editor::placeholder{color:var(--dim);font-style:italic}
/* Graph indicator on skill nodes */
.node-graph-hint{font-family:var(--mono);font-size:7px;color:var(--acc);padding:3px 9px 5px;opacity:.7}
/* PORT ROWS — named ports stacked on sides */
.node-ports{display:flex;justify-content:space-between;padding:2px 0;pointer-events:none;overflow:visible}
.node-drawer-toggle{font-family:var(--mono);font-size:8px;color:var(--dhi);padding:6px 9px;cursor:pointer;text-align:center;user-select:none;letter-spacing:.1em;transition:all .15s var(--ease);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 7px 7px}
.node-drawer-toggle:hover{color:var(--acc);background:rgba(255,255,255,.06)}
.node-drawer{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--brd);border-top:none;border-radius:0 0 9px 9px;margin-top:-4px;padding-top:4px;position:relative;z-index:1;overflow:hidden}
.node-drawer.closed{display:none}
.node-content-bar{padding:4px 8px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:4px;flex-shrink:0}
.node-content-bar .nc-lbl{font-family:var(--mono);font-size:6px;color:var(--dim);letter-spacing:.1em;flex:1}
.nc-btn{font-family:var(--mono);font-size:7px;background:transparent;border:1px solid var(--brd);border-radius:3px;color:var(--dim);padding:1px 6px;cursor:pointer;transition:all .15s var(--ease)}
.nc-btn:hover{color:var(--dhi);border-color:var(--brdhi)}
.nc-btn.active{color:var(--acc);border-color:var(--acc)}
.nc-btn.hidden{display:none}
.node-rendered{overflow-y:auto;padding:8px 9px;font-size:10px;line-height:1.6;color:var(--dhi);min-height:40px;max-height:160px}
.node-rendered h1{font-size:12px;font-weight:600;color:var(--txt);margin:0 0 6px}
.node-rendered h2{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--txt);margin:10px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--brd)}
.node-rendered h3{font-family:var(--mono);font-size:8px;font-weight:700;color:var(--acc);margin:8px 0 2px;text-transform:uppercase;letter-spacing:.08em}
.node-rendered p{color:var(--dhi);line-height:1.6;margin:2px 0}
.node-rendered ul{margin:3px 0;padding-left:14px}
.node-rendered li{color:var(--dhi);line-height:1.5;margin:1px 0}
.node-rendered strong{color:var(--txt)}
.node-rendered code{font-family:var(--mono);font-size:9px;background:var(--code-bg)!important;padding:1px 4px;border-radius:3px;color:#22d3ee!important}
.node-rendered pre{font-family:var(--mono);font-size:9px;background:var(--code-bg)!important;border:1px solid var(--brd);border-radius:5px;padding:6px 8px;overflow-x:auto;margin:4px 0;color:var(--code-txt)!important}
.node-rendered hr{border:none;border-top:1px solid var(--brd);margin:6px 0}
.node-rendered table{width:100%;border-collapse:collapse;margin:4px 0;font-size:9px}
.node-rendered th{font-family:var(--mono);font-size:7px;color:var(--dim);padding:2px 4px;border-bottom:1px solid var(--brd);text-align:left}
.node-rendered td{padding:2px 4px;color:var(--dhi);border-bottom:1px solid rgba(36,41,50,.5)}
.node-editor{display:none;flex:1;flex-direction:column;padding:6px 8px;min-height:0}
.node-editor textarea{background:var(--surf);border:1px solid var(--brd);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:9px;padding:6px 8px;resize:none;line-height:1.5;height:140px;width:100%;box-sizing:border-box;overflow-y:auto}
.node-editor textarea:focus{border-color:var(--brdhi);outline:none}

/* ── File cards in response ── */

/* ── FILE CARDS ── */
.file-card{background:var(--card);border:1px solid var(--brd);border-radius:8px;margin:12px 0;overflow:hidden}
.file-card-header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--brd);background:var(--surf)}
.file-card-icon{font-size:14px}
.file-card-name{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--acc);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card-lang{font-family:var(--mono);font-size:8px;color:var(--card);padding:2px 6px;border-radius:3px;font-weight:700}
.file-card-size{font-family:var(--mono);font-size:8px;color:var(--dim)}
.file-card-actions{display:flex;gap:4px}
.file-card-btn{font-family:var(--mono);font-size:8px;background:transparent;border:1px solid var(--brd);border-radius:4px;color:var(--dhi);padding:3px 8px;cursor:pointer;transition:all .15s var(--ease)}
.file-card-btn:hover{border-color:var(--acc);color:var(--acc)}
.file-card-preview{display:none;max-height:300px;overflow:auto}
.file-card-preview.open{display:block}
.file-card-preview pre{margin:0;border:none;border-radius:0;font-size:10px;line-height:1.5}
.file-card-preview iframe{width:100%;border:none;min-height:200px;background:#fff}

/* ── Run Pipeline Section ── */
.run-section-toggle{font-family:var(--mono);font-size:9px;color:var(--dhi);padding:8px 16px;cursor:pointer;user-select:none;letter-spacing:.1em;display:flex;align-items:center;gap:6px;transition:all .15s var(--ease);background:rgba(255,255,255,.02);flex-shrink:0}
.run-section-toggle:hover{color:var(--acc);background:rgba(255,255,255,.04)}
.run-section-body{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}
.run-section-body.collapsed{display:none}
.section-divider{height:3px;background:linear-gradient(90deg,var(--acc),var(--cyn));flex-shrink:0;opacity:.6}

/* ── Social Posting Panel ── */

/* ── SOCIAL POSTING ── */
.social-toggle{font-family:var(--mono);font-size:9px;color:var(--dhi);padding:8px 16px;cursor:pointer;border-top:1px solid var(--brd);user-select:none;letter-spacing:.1em;display:flex;align-items:center;gap:6px;transition:all .15s var(--ease);background:rgba(255,255,255,.02)}
.social-toggle:hover{color:var(--acc);background:rgba(255,255,255,.04)}
.social-panel{display:none;flex-direction:column;border-top:1px solid var(--brd);background:var(--panel);overflow:hidden;flex:1;min-height:0}
.social-panel.open{display:flex}
.social-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 10px;border-bottom:1px solid var(--brd);background:var(--surf)}
.social-toolbar button{font-family:system-ui;font-size:12px;background:transparent;border:1px solid transparent;color:var(--dhi);padding:3px 7px;border-radius:4px;cursor:pointer;min-width:28px}
.social-toolbar button:hover{background:rgba(255,255,255,.06);border-color:var(--brd)}
.social-toolbar button.active{background:var(--alo);border-color:var(--acc);color:var(--acc)}
.social-toolbar select{font-family:var(--mono);font-size:10px;background:var(--panel);border:1px solid var(--brd);border-radius:4px;color:var(--dhi);padding:2px 4px;cursor:pointer}
.social-editor{flex:1;min-height:80px;overflow-y:auto;padding:12px 14px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.6;color:var(--txt);outline:none;background:var(--card)}
.social-editor:focus{outline:1px solid var(--acc);outline-offset:-1px;border-radius:2px}
.social-editor h1,.social-editor h2,.social-editor h3{color:var(--acc)}
.social-editor ul,.social-editor ol{padding-left:20px;margin:4px 0}
.social-platforms{display:flex;gap:4px;padding:6px 10px;border-top:1px solid var(--brd);flex-shrink:0}
.social-chip{font-family:var(--mono);font-size:8px;padding:3px 8px;border-radius:4px;border:1px solid var(--brd);cursor:pointer;display:flex;align-items:center;gap:3px;transition:all .15s var(--ease);user-select:none;flex:1;justify-content:center;min-width:0}
.social-chip.ready{border-color:rgba(34,211,238,.4);color:var(--cyn)}
.social-chip.ready:hover{background:rgba(34,211,238,.08)}
.social-chip.selected{background:var(--alo);border-color:var(--acc);color:var(--acc)}
.social-chip.disabled{opacity:.35;cursor:default}
.social-chip .chip-count{font-size:6px;color:var(--dim)}
.social-images{padding:8px 10px;border-top:1px solid var(--brd);display:flex;flex-direction:column;gap:6px}
.social-dropzone{border:2px dashed var(--brd);border-radius:8px;padding:16px;text-align:center;font-family:var(--mono);font-size:9px;color:var(--dim);cursor:pointer;transition:all .15s var(--ease)}
.social-dropzone:hover,.social-dropzone.dragover{border-color:var(--acc);color:var(--acc);background:rgba(232,160,32,.04)}
.social-img-preview{display:flex;gap:6px;flex-wrap:wrap}
.social-img-thumb{width:60px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--brd)}
.social-actions{display:flex;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--brd)}
.social-preview-box{background:var(--surf);border:1px solid var(--brd);border-radius:8px;padding:12px 14px;margin:8px 10px;font-size:12px;line-height:1.6;color:var(--dhi);max-height:200px;overflow-y:auto}
.node-ports-col{display:flex;flex-direction:column;gap:0;pointer-events:all}
.port-row{display:flex;align-items:center;gap:4px;padding:2px 0;position:relative;pointer-events:all}
.port-row.in-row{flex-direction:row;padding-left:0}
.port-row.out-row{flex-direction:row-reverse;padding-right:0}
.port-lbl{font-family:var(--mono);font-size:7px;color:var(--dim);white-space:nowrap;pointer-events:none;letter-spacing:.04em;line-height:1;padding:0 4px}
.port-lbl.out-lbl{text-align:right}

/* ── PORTS & CONNECTIONS ── */
.port{width:12px;height:12px;border-radius:50%;cursor:crosshair;z-index:50;display:flex;align-items:center;justify-content:center;transition:border-color .15s var(--ease),background .15s,transform .15s;flex-shrink:0;position:relative;box-sizing:border-box}
.port:hover{transform:scale(1.3)}
.port-in{background:transparent;border:2.5px solid var(--brdhi)}
.port-out{background:var(--brdhi);border:none}
.port-in-col .port{margin-left:-6px}
.port-out-col .port{margin-right:-6px}
.port-dot{display:none}
.port.hot{border-color:#fff;background:rgba(255,255,255,.2)}
.port.ready{border-color:#fff;animation:pp .7s ease-in-out infinite alternate}
@keyframes pp{from{box-shadow:0 0 0 0 rgba(255,255,255,.4)}to{box-shadow:0 0 0 5px rgba(255,255,255,0)}}
@keyframes edge-pulse{0%{stroke-opacity:.8;stroke-width:4}100%{stroke-opacity:0;stroke-width:6}}

/* DOWNSTREAM HIGHLIGHT */
.node.downstream{box-shadow:0 0 0 2px rgba(232,160,32,.5),0 0 18px rgba(232,160,32,.15)!important;border-color:rgba(232,160,32,.6)!important}
.node.dimmed{opacity:.28;filter:saturate(.2)}
.e.downstream path:first-child{stroke-opacity:1!important;stroke-width:2.5!important}
.e.dimmed path:first-child{stroke-opacity:.1!important}

/* START NODE */
.node.start-node{box-shadow:0 0 0 3px rgba(52,211,153,.4),0 0 24px rgba(52,211,153,.15)!important}
.start-badge{font-family:var(--mono);font-size:6px;font-weight:700;letter-spacing:.12em;color:#0b0d11;background:#34d399;border-radius:3px;padding:1px 5px;flex-shrink:0}
/* MULTI-SELECT */
.node.multi-sel .node-card{box-shadow:0 0 0 2px var(--acc),0 4px 16px rgba(0,0,0,.4);border-color:var(--acc)}
.node.deleting{transition:transform .15s var(--ease),opacity .15s var(--ease);opacity:0!important;pointer-events:none}

/* CONTEXT MENU */
#ctx-menu{position:fixed;background:var(--panel);border:1px solid var(--brdhi);border-radius:8px;padding:4px;z-index:999;display:none;flex-direction:column;gap:1px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#ctx-menu.open{display:flex}
.ctx-item{font-family:var(--mono);font-size:10px;color:var(--dhi);padding:5px 10px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ctx-item:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.ctx-item.red{color:var(--red)}
.ctx-item.red:hover{background:rgba(248,113,113,.08)}
.ctx-item.disabled{opacity:.35;cursor:default;pointer-events:none}
.ctx-item .ci{font-size:12px;width:14px;text-align:center}
.ctx-sep{height:1px;background:var(--brd);margin:2px 0}

/* RIGHT PANEL */

/* ── RIGHT PANEL (INSPECTOR) ── */
#right{width:650px;min-width:200px;max-width:840px;background:var(--surf);border-left:1px solid var(--brd);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;flex-shrink:0;position:relative;transition:width .2s var(--ease),min-width .2s}
#right.collapsed{width:28px!important;min-width:28px!important;overflow:hidden}
#right.collapsed>*:not(.panel-expand-btn){display:none!important}
#right.collapsed>.panel-expand-btn{display:flex!important}

/* ── INSPECTOR SECTIONS ── */
#insp-meta{padding:4px 12px 10px 12px;border-bottom:1px solid var(--brd);flex-shrink:0;overflow-y:visible}
#insp-placeholder{font-size:11px;color:var(--dim);line-height:1.7}
#insp-form{display:none}
.if-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.if-glyph{font-size:16px;flex-shrink:0;cursor:pointer;width:28px;text-align:center}
.if-name{flex:1;font-family:var(--mono);font-size:10px;font-weight:700;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;padding:2px 0;color:var(--txt)}
.if-name:focus{border-bottom-color:var(--acc);outline:none}
.if-name::placeholder{color:var(--dim)}
.if-id{font-family:var(--mono);font-size:7px;color:var(--dim)}
.if-desc{width:100%;background:transparent;border:none;border-bottom:1px solid transparent;border-radius:0;padding:2px 0;font-size:11px;color:var(--dhi);resize:none;height:auto}
.if-desc:focus{border-bottom-color:var(--acc);outline:none}
.tags-row{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:4px}
.skill-tag{font-family:var(--mono);font-size:8px;border-radius:10px;padding:1px 8px;border:1px solid var(--brd);color:var(--dim);display:flex;align-items:center;gap:3px}
.skill-tag .tx{cursor:pointer;color:var(--dim);font-size:10px;line-height:1}
.skill-tag .tx:hover{color:var(--red)}
.tag-input{background:transparent;border:none;border-bottom:1px solid var(--brd);border-radius:0;width:80px;font-size:10px;padding:1px 3px;color:var(--dhi)}
.tag-input:focus{border-bottom-color:var(--acc);outline:none}
.meta-row2{display:flex;gap:6px;margin-top:6px;align-items:center}
.meta-row2>*{flex:1;min-width:0}
.color-sel-wrap{position:relative;flex:0 0 auto !important}
.color-swatch{width:16px;height:16px;border-radius:50%;border:2px solid var(--brd);cursor:pointer;flex-shrink:0}
.color-swatch:hover{border-color:#fff}
.color-popup{position:absolute;top:100%;left:0;margin-top:4px;background:var(--panel);border:1px solid var(--brd);border-radius:6px;padding:4px;display:flex;flex-wrap:wrap;gap:3px;z-index:999;max-width:140px}
.color-popup .cp-dot{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0}
.color-popup .cp-dot:hover{border-color:#fff}
.color-popup .cp-dot.sel{border-color:#fff}
.color-popup .cp-add{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px dashed var(--brd);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--dim);flex-shrink:0}
.color-popup .cp-add:hover{border-color:var(--dim)}
.cp-picker{position:absolute;top:100%;left:0;margin-top:4px;background:var(--panel);border:1px solid var(--brd);border-radius:6px;padding:8px;z-index:1000;width:160px}
.cp-picker canvas{border-radius:4px;cursor:crosshair;display:block}
.cp-hue-row{display:flex;gap:4px;margin-top:6px;align-items:center}
.cp-hue-row input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border-radius:3px;outline:none}
.cp-hue-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;border:1px solid #666;cursor:pointer}
.cp-hex-row{display:flex;gap:4px;margin-top:4px;align-items:center}
.cp-hex-row input{flex:1;font-family:var(--mono);font-size:9px;background:var(--bg);border:1px solid var(--brd);border-radius:4px;padding:2px 4px;color:var(--dhi);width:0}
.cp-hex-row .cp-preview{width:16px;height:16px;border-radius:50%;border:1px solid var(--brd)}
.shape-sel{font-family:var(--mono);font-size:8px;background:var(--panel);border:1px solid var(--brd);border-radius:5px;padding:2px 6px;color:var(--dhi);cursor:pointer}
.cat-sel{font-family:var(--mono);font-size:8px;background:var(--panel);border:1px solid var(--brd);border-radius:5px;padding:2px 6px;color:var(--dhi);cursor:pointer}
.builtin-badge{font-family:var(--mono);font-size:7px;background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.3);border-radius:3px;padding:1px 6px;color:var(--acc);flex-shrink:0}

/* INSPECTOR TABS */
#insp-tabs{flex-shrink:0;border-bottom:1px solid var(--brd);display:flex}
.itab{font-family:var(--mono);font-size:8px;padding:6px 12px;color:var(--dim);border-bottom:2px solid transparent;cursor:pointer;letter-spacing:.06em}
.itab:hover{color:var(--dhi)}
.itab.on{color:var(--acc);border-bottom-color:var(--acc)}

/* INSPECTOR PANELS */
#insp-fields{padding:8px 12px;border-bottom:1px solid var(--brd);flex-direction:column;gap:7px;overflow-y:visible;flex-shrink:0}
/* Tab region — fills all remaining height below meta */
#insp-tab-region{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:120px}
.flbl{font-family:var(--mono);font-size:8px;color:var(--dhi);letter-spacing:.05em;margin-bottom:2px}
.mc{display:flex;flex-wrap:wrap;gap:3px}
.mcb{font-family:var(--mono);font-size:9px;border:1px solid var(--brd);border-radius:4px;color:var(--dim);padding:2px 6px;background:var(--panel)}

/* Content tab */
#insp-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}
#insp-content-bar{padding:6px 10px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:6px;flex-shrink:0}
#insp-content-bar .lbl2{font-family:var(--mono);font-size:7px;color:var(--dim);letter-spacing:.12em;flex:1}
.ibar-btn{font-family:var(--mono);font-size:8px;border:1px solid var(--brd);border-radius:4px;padding:2px 8px;color:var(--dhi)}
.ibar-btn:hover{border-color:var(--brdhi);color:var(--txt)}
.ibar-btn.active{border-color:var(--acc);color:var(--acc);background:var(--alo)}
.ibar-btn.save-btn{border-color:var(--grn);color:var(--grn)}
.ibar-btn.save-btn:hover{background:rgba(52,211,153,.08)}
#insp-rendered{overflow-y:auto;padding:10px 12px;flex:1;font-size:11px}
.insp-placeholder{opacity:0.45;font-style:italic}
.insp-placeholder pre,.insp-placeholder code{font-style:normal}
#insp-rendered h1{font-size:13px;font-weight:600;color:var(--txt);margin:0 0 8px}
#insp-rendered h2{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--txt);margin:12px 0 5px;padding-bottom:4px;border-bottom:1px solid var(--brd)}
#insp-rendered h3{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--acc);margin:10px 0 3px;text-transform:uppercase;letter-spacing:.08em}
#insp-rendered p{color:var(--dhi);line-height:1.7;margin:3px 0}
#insp-rendered ul{margin:4px 0;padding-left:16px}
#insp-rendered li{color:var(--dhi);line-height:1.65;margin:2px 0}
#insp-rendered strong{color:var(--txt)}
#insp-rendered code{font-family:var(--mono);font-size:10px;background:var(--code-bg)!important;padding:1px 5px;border-radius:3px;color:#22d3ee!important}
#insp-rendered pre{font-family:var(--mono);font-size:10px;background:var(--code-bg)!important;border:1px solid var(--brd);border-radius:6px;padding:8px 10px;overflow-x:auto;margin:6px 0;color:var(--code-txt)!important}
#insp-rendered hr{border:none;border-top:1px solid var(--brd);margin:8px 0}
#insp-rendered table{width:100%;border-collapse:collapse;margin:6px 0;font-size:10px}
#insp-rendered th{font-family:var(--mono);font-size:8px;color:var(--dim);padding:3px 5px;border-bottom:1px solid var(--brd);text-align:left}
#insp-rendered td{padding:3px 5px;color:var(--dhi);border-bottom:1px solid rgba(36,41,50,.5)}
#insp-editor{display:none;flex:1;flex-direction:column;padding:8px 10px;min-height:0}
#insp-textarea{flex:1;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:10px;padding:8px 10px;resize:vertical;line-height:1.65;min-height:120px}
#insp-textarea:focus{border-color:var(--brdhi);outline:none}

/* Dependencies tab */

/* Graph tab */
#insp-graph-tab{display:none;flex:1;flex-direction:column;overflow:hidden;padding:12px}
.open-graph-btn{width:100%;background:var(--alo);border:1px solid var(--acc);border-radius:7px;padding:10px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--acc);display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.open-graph-btn:hover{background:rgba(232,160,32,.15)}
.graph-stats{font-size:10px;color:var(--dim);line-height:1.8}
.graph-stat-val{color:var(--dhi);font-family:var(--mono)}

/* BRANCH/CONFIRM DIALOGS */
#branch-overlay,#confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:600;display:none;align-items:center;justify-content:center}
#branch-overlay.open,#confirm-overlay.open{display:flex}
#branch-box,#confirm-box{background:var(--panel);border:1px solid var(--brdhi);border-radius:10px;overflow:hidden;width:min(400px,90vw)}
.dlg-hdr{padding:14px 18px;border-bottom:1px solid var(--brd);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em}
.dlg-hdr.acc{color:var(--acc)}.dlg-hdr.red{color:var(--red)}
.dlg-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.dlg-body p{font-size:11px;color:var(--dhi);line-height:1.6}
.dlg-row{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.dbtn{font-family:var(--mono);font-size:10px;border:1px solid var(--brd);border-radius:6px;padding:5px 14px;color:var(--dim)}
.dbtn.upd{border-color:var(--acc);color:var(--acc);background:var(--alo)}
.dbtn.branch{border-color:var(--grn);color:var(--grn)}
.dbtn.yes{border-color:var(--red);color:var(--red);background:rgba(248,113,113,.07)}

/* BATCH MERGE DIALOG */
#batch-merge-overlay,#batch-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:600;display:none;align-items:center;justify-content:center}
#batch-merge-overlay.open,#batch-confirm-overlay.open{display:flex}
#batch-merge-box{background:var(--panel);border:1px solid var(--brdhi);border-radius:10px;overflow:hidden;width:min(720px,92vw);max-height:88vh;display:flex;flex-direction:column}
#batch-confirm-box{background:var(--panel);border:1px solid var(--brdhi);border-radius:10px;overflow:hidden;width:min(440px,90vw)}
#batch-merge-list{padding:8px 18px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px;min-height:120px}
.bm-row{background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.bm-row.update{border-left:3px solid var(--acc)}
.bm-row.branch{border-left:3px solid var(--grn)}
.bm-row.skip{border-left:3px solid var(--brd);opacity:.55}
.bm-row-hdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bm-row-src{font-family:var(--mono);font-size:10px;color:var(--txt);font-weight:600}
.bm-row-arrow{font-family:var(--mono);font-size:10px;color:var(--dim)}
.bm-row-target{font-family:var(--mono);font-size:10px;color:var(--dhi)}
.bm-row-warn{font-size:9px;color:var(--red);background:rgba(248,113,113,.08);padding:1px 6px;border-radius:3px;border:1px solid rgba(248,113,113,.3)}
.bm-row-actions{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:9px;flex-wrap:wrap}
.bm-act{display:flex;align-items:center;gap:4px;cursor:pointer;padding:3px 8px;border-radius:4px;border:1px solid var(--brd);color:var(--dim)}
.bm-act:hover{background:rgba(255,255,255,.03);color:var(--dhi)}
.bm-act.active{color:var(--txt);background:rgba(255,255,255,.04);border-color:var(--brdhi)}
.bm-act input{margin:0;cursor:pointer}
.bm-act.update.active{color:var(--acc);border-color:var(--acc)}
.bm-act.branch.active{color:var(--grn);border-color:var(--grn)}
.bm-row-name{display:none;margin-top:2px}
.bm-row.branch .bm-row-name{display:flex;gap:6px;align-items:center}
.bm-row-name label{font-family:var(--mono);font-size:9px;color:var(--dim);min-width:60px}
.bm-row-name input{flex:1;font-family:var(--mono);font-size:10px;background:var(--panel);border:1px solid var(--brd);border-radius:4px;padding:4px 8px;color:var(--txt)}
.bm-row-name input:focus{border-color:var(--acc);outline:none}
.bm-empty{font-size:11px;color:var(--dim);text-align:center;padding:32px 16px;font-style:italic}
#batch-merge-footer{padding:12px 18px;border-top:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0}
.bm-summary{font-family:var(--mono);font-size:10px;color:var(--dim)}
.bm-summary .bm-count{color:var(--txt);font-weight:700}

/* WIZARD / OUTPUT MODALS */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;display:none;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--brdhi);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
#kb-modal{width:min(680px,95vw);max-height:88vh}
#kb-body{padding:0}
.kb-section{padding:8px 18px 4px;font-family:var(--mono);font-size:8px;color:var(--dim);letter-spacing:.12em;border-bottom:1px solid var(--brd);margin-bottom:0}
.kb-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;padding:8px 18px;border-bottom:1px solid var(--brd);gap:12px}
.kb-row:hover{background:rgba(255,255,255,.02)}
.kb-desc{font-family:var(--mono);font-size:10px;color:var(--dhi)}
.kb-chord{display:flex;gap:4px;align-items:center;justify-content:center}
.kb-key{font-family:var(--mono);font-size:9px;background:var(--surf);border:1px solid var(--brdhi);border-radius:4px;padding:2px 7px;color:var(--txt);box-shadow:0 1px 0 var(--brdhi);white-space:nowrap}
.kb-edit-btn{font-family:var(--mono);font-size:8px;border:1px solid var(--brd);border-radius:4px;padding:2px 8px;color:var(--dim);cursor:pointer;white-space:nowrap}
.kb-edit-btn:hover{border-color:var(--acc);color:var(--acc)}
.kb-edit-btn.recording{border-color:var(--org);color:var(--org);animation:blink .7s ease-in-out infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.4}}
#ai-modal{width:min(640px,95vw);max-height:90vh}
#wiz-modal{width:min(580px,94vw);max-height:88vh}
#out-modal{width:min(1018px,92vw);height:82vh;min-width:500px;min-height:300px;max-width:100vw;max-height:100vh;resize:both}
#out-modal .mhd{cursor:move}
#out-modal .mhd button{cursor:pointer}
.out-fmt-tab{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:4px;border:none;background:transparent;color:var(--dim);cursor:pointer}
.out-fmt-tab:hover{color:var(--dhi)}
.out-fmt-tab.on{background:var(--alo);color:var(--acc)}
.out-variant-tab{font-family:var(--mono);font-size:7px;font-weight:600;letter-spacing:.06em;white-space:nowrap;padding:2px 8px;border-radius:3px;border:none;background:transparent;color:var(--dim);cursor:pointer}
.out-variant-tab:hover{color:var(--dhi)}
.out-variant-tab.on{background:var(--alo);color:var(--acc)}
.mhd{padding:12px 18px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:10px;flex-shrink:0}
.mtitle{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--acc);letter-spacing:.1em}
.mclose{border:1px solid var(--brd);border-radius:5px;padding:3px 9px;color:var(--dim);font-size:10px;margin-left:auto}
.mbody{padding:18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
.meth-btn{background:var(--card);border:1px solid var(--brd);border-radius:9px;padding:11px 15px;text-align:left;display:flex;align-items:center;gap:13px;width:100%}
.meth-btn:hover{border-color:var(--brdhi)}
.mn{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--txt);display:block}
.ms{font-size:10px;color:var(--dim);margin-top:2px;display:block}
.notice{background:rgba(61,40,0,.5);border:1px solid rgba(232,160,32,.3);border-radius:8px;padding:10px 14px;font-size:11px;color:var(--dhi);line-height:1.6}
.notice strong{color:var(--acc)}
.gg{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.gb{width:28px;height:28px;border:1px solid var(--brd);border-radius:5px;font-size:13px;color:var(--dhi);background:var(--card)}
.cr{display:flex;gap:5px}
.cs{width:20px;height:20px;border-radius:50%;border:2.5px solid transparent;cursor:pointer}
.cs.sel{border-color:#fff}
.sr{display:flex;gap:5px}
.sb{flex:1;border:1px solid var(--brd);border-radius:7px;padding:6px 8px;text-align:left;background:var(--card)}
.sb .sn{font-family:var(--mono);font-size:8px;font-weight:700;color:var(--dhi);display:block}
.sb .ss{font-size:8px;color:var(--dim);margin-top:1px;display:block}
.mrow{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.mbtn{border:1px solid var(--brd);border-radius:7px;padding:5px 14px;font-size:10px;font-weight:700;color:var(--dim);font-family:var(--mono);white-space:nowrap}
.mbtn.pri{background:var(--acc);border-color:var(--acc);color:#0b0d11}
.mbtn:disabled{opacity:.4;cursor:default}
.cprev{background:var(--surf);border:1px solid var(--brd);border-radius:5px;padding:6px 9px;max-height:70px;overflow:auto;font-family:var(--mono);font-size:8px;color:var(--dim);line-height:1.6;white-space:pre-wrap}
/* CODE EDITOR FIELD */
.code-field-wrap{display:flex;flex-direction:column;gap:4px}
.code-lang-bar{display:flex;align-items:center;gap:6px}
.code-lang-sel{font-family:var(--mono);font-size:9px;background:var(--bg);border:1px solid var(--brd);border-radius:5px;padding:2px 7px;color:var(--cyn);cursor:pointer;width:auto}
.code-lang-sel:focus{border-color:var(--cyn);outline:none}
.code-copy-btn{font-family:var(--mono);font-size:8px;border:1px solid var(--brd);border-radius:4px;padding:2px 8px;color:var(--dim);margin-left:auto}
.code-copy-btn:hover{border-color:var(--cyn);color:var(--cyn)}
.code-textarea{width:100%;background:var(--code-bg)!important;border:1px solid var(--brd);border-radius:6px;color:var(--code-txt)!important;font-family:var(--mono);font-size:10px;padding:8px 10px;resize:vertical;line-height:1.65;min-height:80px;max-height:250px;overflow:auto;tab-size:2}
.code-textarea:focus{border-color:var(--cyn);outline:none}
.node-code-preview{font-family:var(--mono);font-size:8px;color:#22d3ee!important;background:var(--code-bg)!important;border-radius:4px;padding:4px 7px;white-space:pre;overflow:hidden;max-height:42px;opacity:.85;margin-top:2px}
.node-lang-tag{font-family:var(--mono);font-size:7px;color:#0b0d11;border-radius:3px;padding:1px 5px;flex-shrink:0;font-weight:700}
/* I/O EDITOR */
.io-section{display:flex;flex-direction:column;gap:4px;padding-top:6px;border-top:1px solid var(--brd);margin-top:4px}
.io-section-hdr{display:flex;align-items:center;gap:6px}
.io-lbl{font-family:var(--mono);font-size:8px;color:var(--dhi);letter-spacing:.08em;flex:1}
.io-add-btn{font-family:var(--mono);font-size:8px;border:1px solid var(--brd);border-radius:4px;padding:1px 8px;color:var(--dhi)}
.io-add-btn:hover{border-color:var(--acc);color:var(--acc)}
.io-port-list{display:flex;flex-direction:column;gap:3px}
.io-port-row{display:flex;align-items:center;gap:4px}
.io-port-name{flex:1;font-size:10px;padding:3px 6px;min-width:0}
.io-port-type{font-family:var(--mono);font-size:9px;background:var(--bg);border:1px solid var(--brd);border-radius:5px;padding:2px 5px;color:var(--dhi);width:auto;flex-shrink:0}
.io-port-del{font-size:12px;color:var(--dim);padding:2px 5px;flex-shrink:0;border-radius:3px}
.io-port-del:hover{color:var(--red)}
.io-empty{font-size:10px;color:var(--dim);font-style:italic;padding:2px 0}
/* MEDIA LIST */
.media-list{display:flex;flex-direction:column;gap:4px}
.media-item{display:flex;align-items:center;gap:4px}
.media-item-url{flex:1;font-size:10px;padding:3px 6px;min-width:0}
.media-item-type{font-family:var(--mono);font-size:9px;background:var(--bg);border:1px solid var(--brd);border-radius:5px;padding:2px 5px;color:var(--cyn);width:auto;flex-shrink:0}
.media-item-del{font-size:12px;color:var(--dim);padding:2px 5px;flex-shrink:0;border-radius:3px}
.media-item-del:hover{color:var(--red)}
.media-add-row{display:flex;gap:4px;margin-top:2px}
.media-add-btn{font-family:var(--mono);border:1px solid var(--brd);border-radius:4px;padding:3px 10px;color:var(--dhi)}
.media-add-btn:hover{border-color:var(--acc);color:var(--acc)}
/* LASSO SELECTION */
#lasso{position:absolute;pointer-events:none;border:1.5px dashed var(--acc);background:rgba(232,160,32,.06);border-radius:3px;display:none;z-index:40}
.vault-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:700;display:none;align-items:center;justify-content:center}
.vault-overlay.open{display:flex}
.vault-box{width:min(480px,94vw);background:var(--panel);border:1px solid var(--brdhi);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;max-height:88vh}
.vault-hdr{padding:13px 18px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:10px;flex-shrink:0}
.vault-title{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--grn);letter-spacing:.1em}
.vault-lock{font-size:14px}
.vault-body{padding:18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
.vault-cred-list{display:flex;flex-direction:column;gap:6px}
.vault-cred{background:var(--card);border:1px solid var(--brd);border-radius:8px;overflow:hidden}
.vault-cred-head{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer}
.vault-cred-head:hover{background:rgba(255,255,255,.02)}
.vault-cred-icon{font-size:14px;flex-shrink:0}
.vault-cred-name{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--txt);flex:1}
.vault-cred-type{font-family:var(--mono);font-size:7px;color:var(--dim);background:var(--panel);border:1px solid var(--brd);border-radius:3px;padding:1px 6px}
.vault-cred-actions{display:flex;gap:4px}
.vca{font-family:var(--mono);font-size:7px;border:1px solid var(--brd);border-radius:4px;padding:2px 7px;color:var(--dhi)}
.vca:hover{border-color:var(--brdhi);color:var(--txt)}
.vca.del{border-color:rgba(248,113,113,.3);color:var(--red)}
.vault-cred-body{padding:10px 12px;border-top:1px solid var(--brd);display:none;flex-direction:column;gap:8px}
.vault-cred-body.open{display:flex}
.vcf-lbl{font-family:var(--mono);font-size:8px;color:var(--dhi);letter-spacing:.06em;margin-bottom:2px}
.vcf-secret{display:flex;gap:6px;align-items:center}
.vcf-secret input{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.vcf-reveal{font-family:var(--mono);font-size:8px;border:1px solid var(--brd);border-radius:4px;padding:2px 8px;color:var(--dim)}
.vcf-reveal:hover{border-color:var(--brdhi);color:var(--txt)}
.vault-status{font-family:var(--mono);font-size:10px;padding:6px 10px;border-radius:6px;text-align:center}
.vault-status.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:var(--grn)}
.vault-status.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--red)}
.vault-status.info{background:rgba(232,160,32,.1);border:1px solid rgba(232,160,32,.3);color:var(--acc)}
.vault-pwd-row{display:flex;gap:6px}
.vault-pwd-row input{flex:1}
.vbtn{font-family:var(--mono);font-size:10px;border:1px solid var(--brd);border-radius:7px;padding:6px 16px;color:var(--dim);font-weight:700}
.vbtn.pri{background:var(--grn);border-color:var(--grn);color:#0b0d11}
.vbtn.sec{border-color:var(--acc);color:var(--acc)}
.vbtn.ghost{color:var(--dim)}
.vbtn:disabled{opacity:.4;cursor:default}

/* GITHUB PANEL */
.gh-section{background:var(--card);border:1px solid var(--brd);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.gh-section-title{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--dhi);letter-spacing:.08em}
.gh-cred-sel{font-size:10px}
.gh-row{display:flex;gap:6px;align-items:center}
.gh-row label{font-family:var(--mono);font-size:9px;color:var(--dim);white-space:nowrap;flex-shrink:0}
.gh-status{font-family:var(--mono);font-size:9px;padding:4px 10px;border-radius:5px;text-align:center}
.gh-status.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:var(--grn)}
.gh-status.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--red)}
.gh-status.info{background:rgba(232,160,32,.1);border:1px solid rgba(232,160,32,.3);color:var(--acc)}
.ghbtn{font-family:var(--mono);font-size:9px;border:1px solid var(--brd);border-radius:6px;padding:5px 14px;color:var(--dhi);font-weight:700;flex-shrink:0}
.ghbtn:hover{border-color:var(--brdhi);color:var(--txt)}
.ghbtn.pull{border-color:var(--cyn);color:var(--cyn)}
.ghbtn.pull:hover{background:rgba(34,211,238,.08)}
.ghbtn.push{border-color:var(--grn);color:var(--grn)}
.ghbtn.push:hover{background:rgba(52,211,153,.08)}
.ghbtn:disabled{opacity:.4;cursor:default}

/* ══════════════════════════════════════════════════════════
   CUSTOMIZATION HELPERS
   ══════════════════════════════════════════════════════════
   These utility classes are used throughout the HTML.
   Edit them here to change appearance globally.
   ══════════════════════════════════════════════════════════ */

/* Mono label used for section headers, field labels, etc. */
.mlbl{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.08em;margin-bottom:4px}

/* Standard text input styling */
.field-input{width:100%;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:6px 8px;font-size:11px;font-family:var(--mono);box-sizing:border-box}
.field-input:focus{border-color:var(--acc);outline:none}

/* Pill toggle group (used for Skills/All, On/Off, Single/Chain, etc.) */
.pill-group{display:flex;gap:1px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:2px}
.pill-btn{font-family:var(--mono);font-size:11px;padding:4px 12px;border-radius:4px;border:none;cursor:pointer;transition:all .2s var(--ease)}
.pill-btn.on{background:var(--alo);color:var(--acc)}
.pill-btn.off{background:transparent;color:var(--dim)}

/* Status indicators */
.status-ok{font-family:var(--mono);font-size:9px;color:var(--grn)}
.status-err{font-family:var(--mono);font-size:9px;color:var(--red)}
.status-dim{font-family:var(--mono);font-size:9px;color:var(--dim)}


/* Repeated inline style extractions — edit here instead of hunting through JS */
.flex-col-gap{display:flex;flex-direction:column;gap:6px}
.flex-row-center{display:flex;align-items:center;gap:6px}
.empty-state{padding:16px;text-align:center;font-size:11px;color:var(--dim)}
.section-label{font-family:var(--mono);font-size:9px;color:var(--dim);margin-bottom:6px;letter-spacing:.08em}
.group-label{font-family:var(--mono);font-size:10px;color:var(--dhi);letter-spacing:.08em}
.field-select{width:100%;font-size:10px;padding:4px 6px;background:var(--panel);border:1px solid var(--brd);border-radius:5px;color:var(--dhi);font-family:var(--mono)}

</style>
</head>
<body>
<div id="app">
  <div id="topbar">
    <span class="t-logo">⬡</span>
    <span class="t-title">GUIness</span>
    <span class="t-badge">v48.17</span>
    <span class="t-count" id="skill-count">0 skills</span>
    <span style="flex:1"></span>
    <span style="font-size:9px;color:var(--dim)">Scroll=zoom · Space/middle=pan · Dbl-click=open graph · Click edge=cut · Alt=downstream</span>
    <div style="width:1px;height:18px;background:var(--brd);margin:0 4px"></div>
    <button class="tbtn danger hidden" id="btn-del">Delete Node</button>
    <button class="tbtn" id="btn-reset">Reset View</button>
    <button class="tbtn" id="btn-fit" title="Zoom to fit all nodes (Home)">⊞ Fit</button>
    <button class="tbtn" id="btn-undo" title="Undo (Ctrl+Z)">↩</button>
    <button class="tbtn" id="btn-redo" title="Redo (Ctrl+Shift+Z)">↪</button>
    <button class="tbtn hidden" id="btn-clear">Clear</button>
    <button class="tbtn" id="btn-save-pipeline" title="Save As… (choose location) · Ctrl+S to quick-save to last location">💾 Save Pipeline</button>
    <button class="tbtn" id="btn-pipeline-to-node" title="Save active pipeline as a reusable node in the PIPELINES library tab">⬡ Save as Node</button>
    <button class="tbtn" id="btn-load-lib" title="Load a skills library JSON file">⬆ Load Library</button>
    <button class="tbtn" id="btn-save-lib">Save Library</button>
    <button class="tbtn" id="btn-export-workspace" title="Export all open pipelines + your skills as a portable .gwsp workspace file">📤 Export Workspace</button>
    <button class="tbtn" id="btn-github" title="Push/Pull skill library via GitHub Gist">⎇ GitHub</button>
    <button class="tbtn" id="btn-vault" title="Manage stored credentials" style="color:var(--grn);border-color:rgba(52,211,153,.3)">🔑 Vault</button>
    <a class="tbtn" id="btn-docs" href="https://guiness.zeen-media.com/docs/" target="_blank" rel="noopener" title="Open the GUIness documentation" style="text-decoration:none">📖 Docs</a>
    <button class="tbtn" id="btn-keybindings" title="View and customize keyboard shortcuts">⌨ Keys</button>
    <div class="size-wrap" id="autosave-wrap" title="Auto-save interval (0 = off)" style="gap:4px">
      <span class="size-lbl">⏱</span>
      <input type="number" id="autosave-input" min="0" max="60" step="1" value="1" title="Auto-save every N minutes (0 to disable)"/>
      <span class="size-lbl" style="font-size:9px">min</span>
      <button class="tbtn" id="autosave-folder-btn" title="Set autosave folder (File System Access API)" style="font-size:8px;padding:2px 6px;border-radius:4px">📁</button>
      <span id="autosave-path" style="font-family:var(--mono);font-size:7px;color:var(--dim);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help" title=""></span>
      <span id="autosave-status" style="font-family:var(--mono);font-size:7px;color:var(--dim);white-space:nowrap"></span>
    </div>
    <div style="width:1px;height:18px;background:var(--brd);margin:0 2px"></div>
    <button id="btn-theme" title="Toggle light/dark mode">🌙</button>
    <select id="theme-preset" title="Color theme preset" style="font-family:var(--mono);font-size:8px;background:var(--panel);border:1px solid var(--brd);border-radius:4px;color:var(--dhi);padding:2px 4px;cursor:pointer;width:72px">
      <option value="midnight">Midnight</option>
      <option value="ember">Ember</option>
      <option value="forest">Forest</option>
      <option value="ocean">Ocean</option>
      <option value="violet">Violet</option>
    </select>
    <button class="tbtn" id="btn-snap" title="Toggle grid snapping (26px)">⊞ Snap</button>
    <div class="size-wrap" title="UI text size">
      <span class="size-lbl">A</span>
      <input type="range" id="size-slider" min="10" max="20" step="0.5" value="15"/>
      <span class="size-lbl" style="font-size:11px">A</span>
    </div>
    <button class="tbtn primary hidden" id="btn-export" title="Export pipeline for LLM context (Markdown or GPT JSON)">Export → LLM</button>
  </div>

  <div id="pipeline-tabbar"></div>
  <div id="body">
    <!-- NO-PIPELINE EMPTY STATE -->
    <div id="no-pipeline-screen">
      <h2>⬡ GUIness</h2>
      <p>Resume where you left off, or start fresh.</p>
      <div class="nps-section" id="nps-autosave-section">
        <div class="nps-section-label">CONTINUE FROM AUTOSAVE</div>
        <div class="nps-btns" id="nps-folder-btns">
          <button class="nps-btn pri" id="nps-connect-folder" title="Point to an existing autosave folder (e.g. one next to GUIness)">📂 Use Existing Folder</button>
          <button class="nps-btn sec" id="nps-create-folder" title="Create a new folder in the OS picker, then select it">+ New Autosave Folder</button>
        </div>
        <div class="nps-note" id="nps-folder-note" style="display:none">Folder autosave needs a Chromium desktop browser (Chrome / Edge). To resume here, import a workspace file below, or use Gist sync.</div>
        <div class="nps-btns">
          <button class="nps-btn sec" id="nps-import-workspace" title="Open a .gwsp workspace file to restore all your pipelines and skills">📥 Import Workspace</button>
        </div>
      </div>
      <div class="nps-divider"></div>
      <div class="nps-section">
        <div class="nps-section-label">OR START FRESH</div>
        <div class="nps-btns">
          <button class="nps-btn sec" id="nps-open">📄 Open Pipeline</button>
          <button class="nps-btn sec" id="nps-new">+ New Pipeline</button>
        </div>
      </div>
    </div>
    <!-- BREADCRUMB (hidden at root) -->
    <div id="breadcrumb" class="root-level"></div>

    <div id="canvas-area">
      <!-- LEFT LIBRARY -->
      <div id="left">
        <button class="panel-expand-btn" id="left-expand" title="Expand library">◂ LIBRARY</button>
        <div id="lib-head">
          <div style="display:flex;align-items:center;gap:6px">
            <div class="lbl" style="flex:1">NODE LIBRARY</div>
            <button class="panel-collapse-btn" id="left-collapse" title="Collapse library">◂</button>
          </div>
          <div id="lib-head-btns">
            <button id="btn-ai-generate" class="btn-action" title="Generate skills or pipelines with AI">✦ Generate</button>
            <button id="add-skill-btn" class="btn-action">+ Add Skill</button>
            <button id="import-skill-btn" class="btn-action" title="Import .ppln / .sklb / .sk / .skill / .md / .json / .txt files (supports multiple)">⬆ Import File</button>
          </div>
          <div style="display:flex;gap:4px;align-items:center">
            <input id="lib-search" placeholder="Search skills…" type="text" style="flex:4"/>
            <select id="lib-sort" style="font-family:var(--mono);font-size:8px;background:var(--panel);border:1px solid var(--brd);border-radius:5px;padding:3px 4px;color:var(--dhi);cursor:pointer;flex:1;min-width:0" title="Sort skills within categories">
              <option value="az">A → Z</option>
              <option value="za">Z → A</option>
              <option value="new">Newest</option>
              <option value="old">Oldest</option>
            </select>
          </div>
        </div>
        <div id="tag-section">
          <div id="tag-section-hdr">
            <span id="tag-section-lbl">FILTER BY TAG</span>
            <span id="tag-section-count"></span>
            <span id="tag-section-chev">▾</span>
          </div>
          <div id="tag-section-body" class="closed">
            <div id="lib-filter-tags"></div>
            <div id="tag-add-row">
              <input id="tag-add-input" placeholder="new tag…" type="text"/>
              <button id="tag-add-btn">+ Add</button>
            </div>
          </div>
        </div>
        <div id="lib-tabs">
          <button class="ltab on" data-tab="mine">MY SKILLS</button>
          <button class="ltab" data-tab="builtin">BUILT-IN</button>
          <button class="ltab" data-tab="recent">RECENT</button>
          <button class="ltab" data-tab="pipelines">PIPELINES</button>
        </div>
        <div id="lib-list"></div>
        <div id="lib-multi-bar">
          <span id="lib-multi-count">0 selected</span>
          <button class="lmb-btn" id="lmb-place" title="Place all selected skills as nodes on canvas">⊕ Place All</button>
          <button class="lmb-btn danger" id="lmb-delete" title="Delete selected skills">× Delete</button>
          <button class="lmb-btn" id="lmb-clear" title="Clear selection">✕</button>
        </div>

      </div>
      <div class="resizer" id="rz-l"></div>

      <!-- CANVAS -->
      <div id="canvas-wrap">
        <div id="minimap" title="Click to navigate · Drag to pan">
          <div id="minimap-toggle">▾</div>
          <canvas id="minimap-canvas"></canvas>
          <div id="minimap-viewport"></div>
        </div>
        <div id="scene"><svg id="svg"><defs></defs></svg></div>
        <div id="quick-add"><input id="qa-input" placeholder="Search skills…" type="text" autocomplete="off"/><div id="quick-add-list"></div></div>
        <div id="empty-hint" style="display:none">
          <div class="eh-icon">⬡</div>
          <div class="eh-txt" id="empty-txt">Click + on a library node to place it.<br/><span style="font-size:8px;opacity:.7">POST → COLLECTION → SCHEDULE → PUBLISHER</span></div>
        </div>
        <div id="conn-hint" style="display:none">Click an input port to connect · Esc to cancel</div>
        <div id="depth-badge"></div>
        <div id="zoom-lbl">100%</div>
        <div id="lasso"></div>
      </div>

      <div class="resizer" id="rz-r"></div>

      <!-- RIGHT INSPECTOR -->
      <div id="right">
        <button class="panel-expand-btn" id="right-expand" title="Expand inspector">INSPECTOR ▸</button>
        <div id="insp-head" style="display:flex;align-items:center;gap:6px;padding:10px 12px 0 12px">
          <div class="lbl" style="flex:1">INSPECTOR</div>
          <button class="panel-collapse-btn" id="right-collapse" title="Collapse inspector">▸</button>
        </div>
        <div id="insp-meta">
          <div id="insp-placeholder">Select a node in the library<br/>or on the canvas.</div>
          <div id="insp-form">
            <div class="if-row">
              <span class="if-glyph" id="if-glyph" title="Click to change">◆</span>
              <input class="if-name" id="if-name" placeholder="Skill name…" type="text" title="Double-click to rename"/>
              <span class="if-id" id="if-id"></span>
            </div>
            <textarea class="if-desc" id="if-desc" rows="2" placeholder="Description…"></textarea>
            <div class="tags-row" id="tags-row">
              <input class="tag-input" id="tag-input" placeholder="+ tag" type="text"/>
            </div>
            <div class="meta-row2">
              <div class="color-sel-wrap" id="color-sel-wrap">
                <div class="color-swatch" id="color-swatch" title="Click to pick · Double-click to edit"></div>
              </div>
              <select class="shape-sel" id="shape-sel">
                <option value="default">Standard</option>
                <option value="dashed">Dashed</option>
                <option value="ghost">Ghost</option>
              </select>
              <select class="cat-sel" id="cat-sel">
                <option value="Content">Content</option>
                <option value="Logic">Logic</option>
                <option value="Timing">Timing</option>
                <option value="Output">Output</option>
                <option value="marketing-skill">Marketing</option>
                <option value="Engineering">Engineering</option>
                <option value="Skills">Skills</option>
                <option value="custom">Custom…</option>
              </select>
              <span class="builtin-badge hidden" id="builtin-badge">BUILT-IN</span>
            </div>
          </div>
        </div>

        <!-- TAB REGION — fills all space below meta -->
        <div id="insp-tab-region">

        <!-- TABS: Content / Dependencies / Graph -->
        <div id="insp-tabs">
          <div class="itab on" data-tab="content">Content</div>

          <div class="itab" data-tab="graph">Graph</div>
        </div>

        <!-- Canvas node built-in fields -->
        <div id="insp-fields" style="display:none"></div>

        <!-- Content tab -->
        <div id="insp-content" style="display:none">
          <div id="insp-content-bar">
            <span class="lbl2">SKILL CONTENT</span>
            <button class="ibar-btn active" id="btn-view">View</button>
            <button class="ibar-btn" id="btn-edit-content">Edit</button>
            <button class="ibar-btn hidden" id="btn-cancel-edit" style="color:var(--dim)">Cancel</button>
            <button class="ibar-btn save-btn hidden" id="btn-apply-content">Apply</button>
            <button class="ibar-btn" id="btn-merge-content">Merge</button>
          </div>
          <div id="insp-rendered"></div>
          <div id="insp-editor"><textarea id="insp-textarea" spellcheck="false"></textarea></div>
        </div>


        <!-- Graph tab -->
        <div id="insp-graph-tab" style="display:none">
          <button class="open-graph-btn" id="open-graph-btn">⬡ Open Internal Graph</button>
          <div class="graph-stats" id="graph-stats"></div>
        </div>

        </div><!-- end #insp-tab-region -->
      </div>
    </div>
  </div>
</div>

<!-- DRAG GHOST -->
<div id="drag-ghost"><span class="dg-glyph"></span><span class="dg-label"></span></div>

<!-- CONTEXT MENU -->
<div id="ctx-menu">
  <div class="ctx-item" id="ctx-start"><span class="ci">◉</span> Set as Start Node</div>
  <div class="ctx-item" id="ctx-unstart" style="display:none"><span class="ci">◎</span> Remove Start</div>
  <div class="ctx-sep"></div>
  <div class="ctx-item" id="ctx-open-graph"><span class="ci">⬡</span> Open Graph</div>
  <div class="ctx-sep"></div>
  <div class="ctx-item" id="ctx-save-as-skill"><span class="ci">◈</span> Save as Skill</div>
  <div class="ctx-item" id="ctx-merge"><span class="ci">◊</span> Merge to Library…</div>
  <div class="ctx-sep"></div>
  <div class="ctx-item" id="ctx-copy"><span class="ci">⎘</span> Copy</div>
  <div class="ctx-item" id="ctx-paste"><span class="ci">⎗</span> Paste</div>
  <div class="ctx-item" id="ctx-duplicate"><span class="ci">⧉</span> Duplicate</div>
  <div class="ctx-sep"></div>
  <div class="ctx-item" id="ctx-download-content"><span class="ci">⬇</span> Download Content</div>
  <div class="ctx-item" id="ctx-download-skill"><span class="ci">⬇</span> Download Skill…</div>
  <div class="ctx-sep"></div>
  <div class="ctx-item red" id="ctx-delete"><span class="ci">×</span> Delete Node</div>
</div>

<!-- BRANCH DIALOG -->
<div id="branch-overlay">
  <div id="branch-box">
    <div class="dlg-hdr acc">SAVE CHANGES</div>
    <div class="dlg-body">
      <p>Update the existing skill, or branch it into a new one?</p>
      <input id="branch-name" type="text" placeholder="New skill name (for branch)…" style="width:100%"/>
      <div class="dlg-row">
        <button class="dbtn" id="branch-cancel">Cancel</button>
        <button class="dbtn upd" id="branch-update">Update Existing</button>
        <button class="dbtn branch" id="branch-new">Branch as New</button>
      </div>
    </div>
  </div>
</div>

<!-- BATCH MERGE DIALOG -->
<div id="batch-merge-overlay">
  <div id="batch-merge-box">
    <div class="dlg-hdr acc" id="batch-merge-hdr">MERGE SKILLS TO LIBRARY</div>
    <div id="batch-merge-list"></div>
    <div id="batch-merge-footer">
      <div class="bm-summary" id="batch-merge-summary"></div>
      <div style="display:flex;gap:8px">
        <button class="dbtn" id="batch-merge-cancel">Cancel</button>
        <button class="dbtn upd" id="batch-merge-submit">Merge</button>
      </div>
    </div>
  </div>
</div>

<!-- BATCH MERGE CONFIRM -->
<div id="batch-confirm-overlay">
  <div id="batch-confirm-box">
    <div class="dlg-hdr red">CONFIRM OVERWRITE</div>
    <div class="dlg-body">
      <p id="batch-confirm-msg">You're about to overwrite library skills. This cannot be undone.</p>
      <div class="dlg-row">
        <button class="dbtn" id="batch-confirm-cancel">Cancel</button>
        <button class="dbtn yes" id="batch-confirm-ok">Confirm Merge</button>
      </div>
    </div>
  </div>
</div>

<!-- CONFIRM DELETE -->
<div id="confirm-overlay">
  <div id="confirm-box">
    <div class="dlg-hdr red">DELETE SKILL</div>
    <div class="dlg-body">
      <p id="confirm-msg">Are you sure?</p>
      <div class="dlg-row">
        <button class="dbtn" id="confirm-no">Cancel</button>
        <button class="dbtn yes" id="confirm-yes">Delete</button>
      </div>
    </div>
  </div>
</div>

<!-- VAULT MODAL -->
<div class="vault-overlay" id="vault-overlay">
  <div class="vault-box">
    <div class="vault-hdr">
      <span class="vault-lock">🔑</span>
      <span class="vault-title">CREDENTIAL VAULT</span>
      <button class="mclose" id="vault-close" style="margin-left:auto">✕</button>
    </div>
    <div class="vault-body" id="vault-body"></div>
  </div>
</div>

<!-- GITHUB MODAL -->
<div class="vault-overlay" id="gh-overlay">
  <div class="vault-box">
    <div class="vault-hdr">
      <span class="vault-lock">⎇</span>
      <span class="vault-title" style="color:var(--cyn)">GITHUB GIST SYNC</span>
      <button class="mclose" id="gh-close" style="margin-left:auto">✕</button>
    </div>
    <div class="vault-body" id="gh-body"></div>
  </div>
</div>

<!-- WIZARD -->
<!-- KEYBINDINGS OVERLAY -->
<div class="overlay" id="kb-overlay">
  <div class="modal" id="kb-modal">
    <div class="mhd">
      <span class="mtitle">⌨ KEYBOARD SHORTCUTS</span>
      <span style="flex:1"></span>
      <button class="mbtn" id="kb-reset" style="margin-right:8px;font-size:9px">Reset to defaults</button>
      <button class="mclose" id="kb-close">✕</button>
    </div>
    <div class="mbody" id="kb-body"></div>
  </div>
</div>

<!-- AI GENERATE OVERLAY -->
<div class="overlay" id="ai-overlay">
  <div class="modal" id="ai-modal">
    <div class="mhd">
      <span class="mtitle">✦ AI GENERATE</span>

      <span style="flex:1"></span>
      <button class="mclose" id="ai-close">✕</button>
    </div>
    <div class="mbody" id="ai-body"></div>
  </div>
</div>

<div class="overlay" id="wiz-overlay">
  <div class="modal" id="wiz-modal">
    <div class="mhd"><span class="mtitle" id="wiz-title">ADD SKILL</span><button class="mclose" id="wiz-close">✕</button></div>
    <div class="mbody" id="wiz-body"></div>
  </div>
</div>

<!-- OUTPUT -->
<div class="overlay" id="out-overlay">
  <div class="modal" id="out-modal">
    <div class="mhd">
      <span style="font-family:var(--mono);font-size:10px;font-weight:700;color:var(--acc);letter-spacing:.1em;white-space:nowrap;flex-shrink:0">PIPELINE OUTPUT</span>
      <div id="out-fmt-tabs" style="display:flex;gap:2px;margin-left:12px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:2px">
        <button class="out-fmt-tab on" data-fmt="claude">Claude</button>
        <button class="out-fmt-tab" data-fmt="gpt">GPT</button>
        <button class="out-fmt-tab" data-fmt="gemini">Gemini</button>
      </div>
      <div id="out-gemini-variants" style="display:none;align-items:center;gap:2px;margin-left:8px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:2px">
        <button class="out-variant-tab on" data-variant="fit">Gem-fit</button>
        <button class="out-variant-tab" data-variant="full">Full</button>
      </div>
      <button id="out-gemini-skills-btn" class="mbtn" style="display:none;margin-left:8px;font-size:10px;position:relative">Skills: 0/0</button>
      <div id="out-gpt-variants" style="display:none;align-items:center;gap:2px;margin-left:8px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:2px">
        <button class="out-variant-tab on" data-variant="text">Text</button>
        <button class="out-variant-tab" data-variant="json">JSON</button>
      </div>
      <span id="out-char-count" style="display:none;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--txt);margin-left:10px"></span>
      <span style="flex:1"></span>
      <button class="mbtn" id="out-copy" style="margin-right:6px">Copy</button>
      <button class="mbtn" id="out-download" style="margin-right:6px">↓ Download</button>
      <button class="mbtn pri" id="out-run" style="margin-right:6px">▶ Run</button>
      <button class="mbtn" id="out-close">✕</button>
    </div>
    <div id="out-body" style="display:flex;flex:1;overflow:hidden;min-height:0">
      <pre id="out-pre" style="flex:1;overflow:auto;margin:0;padding:14px 16px;font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--txt);white-space:pre-wrap;word-break:break-word"></pre>
  </div>
</div>

<!-- LLM Response Drawer -->
<div id="llm-drawer" style="position:fixed;top:0;right:-600px;width:600px;height:100vh;background:var(--panel);border-left:1px solid var(--brdhi);z-index:850;display:flex;flex-direction:column;transition:right .3s var(--ease) ease;box-shadow:-8px 0 32px rgba(0,0,0,.4)">
  <div id="llm-drawer-resizer" style="position:absolute;left:0;top:0;width:5px;height:100%;cursor:col-resize;z-index:1"></div>
  <div style="padding:12px 16px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:8px;flex-shrink:0">
    <span style="font-family:var(--mono);font-size:10px;font-weight:700;color:var(--acc);letter-spacing:.1em;flex:1">RUN PIPELINE</span>
    <button class="mbtn" id="llm-drawer-close">✕</button>
  </div>
  <div class="run-section-toggle" id="run-section-toggle">▾ LLM CONFIGURATION & RESPONSE</div>
  <div class="run-section-body" id="run-section-body">
  <div style="padding:10px 16px;border-bottom:1px solid var(--brd);flex-shrink:0;display:flex;flex-direction:column;gap:8px">
    <div id="out-run-providers" style="display:flex;gap:4px;flex-wrap:wrap"></div>
    <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
      <select id="out-run-key" style="flex:1;background:var(--surf);border:1px solid var(--brd);border-radius:5px;color:var(--txt);padding:5px 8px;font-size:10px"></select>
      <select id="out-run-model" style="flex:1;background:var(--surf);border:1px solid var(--brd);border-radius:5px;color:var(--txt);padding:5px 8px;font-size:10px"></select>
      <button id="out-run-model-refresh" class="mbtn" title="Refresh models (bypass cache)" style="font-size:11px;padding:4px 8px;flex-shrink:0">↻</button>
    </div>
    <div id="out-run-model-status" style="display:none;font-family:var(--mono);font-size:9px;color:#f59e0b"></div>
    <div id="out-run-local" style="display:none;flex-direction:column;gap:6px">
      <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
        <input id="out-run-url" type="text" placeholder="http://localhost:11434" value="http://localhost:11434" style="flex:1;min-width:160px;background:var(--surf);border:1px solid var(--brd);border-radius:5px;color:var(--txt);padding:5px 8px;font-size:10px;font-family:var(--mono)"/>
        <input id="out-run-local-model" type="text" placeholder="Model name" style="flex:1;min-width:100px;background:var(--surf);border:1px solid var(--brd);border-radius:5px;color:var(--txt);padding:5px 8px;font-size:10px;font-family:var(--mono)"/>
        <button class="mbtn" id="out-run-detect" style="font-size:8px">Detect</button>
      </div>
      <details style="font-family:var(--mono);font-size:9px;color:var(--dim);border:1px solid var(--brd);border-radius:6px;padding:6px 10px">
        <summary style="cursor:pointer;color:var(--dhi);letter-spacing:.06em;user-select:none">⊙ HOW TO CONNECT A LOCAL LLM</summary>
        <div style="margin-top:8px;display:flex;flex-direction:column;gap:6px;line-height:1.6">
          <div style="color:var(--acc);letter-spacing:.06em">OLLAMA (DEFAULT)</div>
          <div>1. Install Ollama from <span style="color:var(--grn)">ollama.com</span></div>
          <div>2. Run a model: <code style="background:var(--code-bg);color:var(--code-txt);padding:1px 5px;border-radius:3px">ollama run llama3</code></div>
          <div>3. Enable CORS: <code style="background:var(--code-bg);color:var(--code-txt);padding:1px 5px;border-radius:3px">OLLAMA_ORIGINS=* ollama serve</code></div>
          <div>4. Hit <strong style="color:var(--dhi)">Detect</strong> above to auto-populate models</div>
          <div style="height:4px"></div>
          <div style="color:var(--acc);letter-spacing:.06em">FRIDAY AI AGENT</div>
          <div>1. Start the Friday backend: <code style="background:var(--code-bg);color:var(--code-txt);padding:1px 5px;border-radius:3px">cd friday && npm run dev</code></div>
          <div>2. Friday runs Express+WS on <code style="background:var(--code-bg);color:var(--code-txt);padding:1px 5px;border-radius:3px">http://localhost:3777</code> with Ollama as its default provider</div>
          <div>3. Set URL to <code style="background:var(--code-bg);color:var(--code-txt);padding:1px 5px;border-radius:3px">http://localhost:3777</code></div>
          <div>4. If Friday requires auth, add your token to the Vault as <strong style="color:var(--dhi)">Friday Token</strong></div>
          <div>5. Hit <strong style="color:var(--dhi)">Detect</strong> — Friday exposes its configured models via OpenAI-compat <code style="background:var(--code-bg);color:var(--code-txt);padding:1px 5px;border-radius:3px">/v1/models</code></div>
          <div style="height:4px"></div>
          <div style="color:var(--acc);letter-spacing:.06em">OTHER OPENAI-COMPATIBLE SERVERS</div>
          <div>LM Studio, llama.cpp, Jan — set their server URL above and hit Detect</div>
        </div>
      </details>
    </div>
    <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
      <button class="mbtn pri" id="out-run-send" style="flex:1">▶ Send to LLM</button>
      <button class="mbtn" id="out-run-stop" style="display:none;color:var(--red);border-color:var(--red);flex-shrink:0" title="Stop the in-flight LLM request (Shift+Esc)">⏹ Stop</button>
      <div style="display:flex;gap:1px;background:var(--surf);border:1px solid var(--brd);border-radius:5px;padding:1px;flex-shrink:0">
        <button id="out-mode-single" class="mbtn" style="font-size:8px;padding:2px 8px;border-radius:3px;background:var(--alo);color:var(--acc)" title="Compile entire pipeline into one prompt">Single</button>
        <button id="out-mode-chain" class="mbtn" style="font-size:8px;padding:2px 8px;border-radius:3px;background:transparent;color:var(--dim)" title="Run nodes sequentially, piping output to next">Chain</button>
      </div>
      <span id="out-run-status" style="font-family:var(--mono);font-size:9px;color:var(--dim);flex:1"></span>
    </div>
    <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0 0;border-top:1px solid var(--brd);margin-top:2px">
      <span style="font-family:var(--mono);font-size:8px;color:var(--dim);letter-spacing:.06em">PROMPT SIZE</span>
      <span style="display:flex;align-items:center;gap:8px">
        <span id="out-cost-estimate" style="font-family:var(--mono);font-size:13px;font-weight:700;color:var(--txt)"></span>
        <span id="out-token-count" style="font-family:var(--mono);font-size:13px;font-weight:700;color:var(--dim)"></span>
      </span>
    </div>
    <div id="out-orphan-warning" style="display:none;padding:4px 0 0;font-family:var(--mono);font-size:9px;color:#f59e0b"></div>
    <div id="out-automode-banner" style="display:none;padding:4px 0 0;font-family:var(--mono);font-size:9px;color:var(--cyn)"></div>
  </div>
  <div style="padding:6px 16px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:6px;flex-shrink:0">
    <span style="font-family:var(--mono);font-size:9px;font-weight:700;color:var(--grn);letter-spacing:.08em;flex:1">RESPONSE</span>
    <div style="display:flex;gap:1px;background:var(--surf);border:1px solid var(--brd);border-radius:5px;padding:1px;flex-shrink:0">
      <button id="out-view-raw" class="mbtn" style="font-size:8px;padding:2px 8px;border-radius:3px;background:var(--alo);color:var(--acc)">Raw</button>
      <button id="out-view-preview" class="mbtn" style="font-size:8px;padding:2px 8px;border-radius:3px;background:transparent;color:var(--dim)">Preview</button>
    </div>
    <button class="mbtn" id="out-resp-copy" style="font-size:8px">Copy</button>
    <span id="out-resp-fmt" style="font-family:var(--mono);font-size:8px;color:var(--dim);padding:2px 6px;border:1px solid var(--brd);border-radius:4px;display:none"></span>
    <button class="mbtn" id="out-resp-edit" style="font-size:8px">Edit</button>
    <button class="mbtn" id="out-resp-save" style="font-size:8px">Save</button>
    <button class="mbtn" id="out-resp-clear" style="font-size:8px;color:var(--dim)">Clear</button>
  </div>
  <div id="out-resp-body" style="flex:1;overflow:auto;padding:14px 16px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.7;color:var(--txt)"></div>
  <div style="padding:10px 16px;border-top:1px solid var(--brd);flex-shrink:0;display:flex;flex-direction:column;gap:6px">
    <textarea id="out-followup" rows="3" placeholder="Follow-up message… (Shift+Enter for newline, Enter to send)" style="width:100%;background:var(--surf);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:8px 10px;font-family:system-ui,-apple-system,sans-serif;font-size:12px;line-height:1.5;resize:none;box-sizing:border-box;outline:none"></textarea>
    <div style="display:flex;gap:6px;align-items:center">
      <button class="mbtn pri" id="out-followup-send" style="font-size:9px">↩ Send Follow-up</button>
      <span id="out-followup-status" style="font-family:var(--mono);font-size:9px;color:var(--dim);flex:1"></span>
      <span id="out-turn-count" style="font-family:var(--mono);font-size:9px;color:var(--dim)"></span>
    </div>
  </div>
  </div><!-- end run-section-body -->
  <div class="section-divider"></div>
  <!-- Social Posting Panel -->
  <div class="social-toggle" id="social-toggle">▸ POST TO SOCIAL</div>
  <div class="social-panel" id="social-panel">
    <div class="social-toolbar" id="social-toolbar"></div>
    <div class="social-editor" id="social-editor" contenteditable="true"></div>
    <div class="social-platforms" id="social-platforms"></div>
    <div class="social-images" id="social-images">
      <div class="social-dropzone" id="social-dropzone">Drop images here or click to browse</div>
      <div class="social-img-preview" id="social-img-preview"></div>
    </div>
    <div class="social-actions" id="social-actions"></div>
  </div>
</div>

<!-- v48.13 — system toast (vault auto-relock, future notifications) -->
<div id="toast"></div>

<script>
// ╔═══════════════════════════════════════════════════════════════╗
// ║  CONFIG — All magic numbers and tunable constants live here  ║
// ║  Edit these to customize behavior without touching logic     ║
// ╚═══════════════════════════════════════════════════════════════╝
const CONFIG={
  // ── Canvas ──────────────────────────────────────────────
  SNAP_SIZE:           26,      // Grid snap increment (px)
  DEFAULT_NODE_WIDTH:  214,     // Default node width (px)
  MIN_NODE_WIDTH:      140,     // Minimum node width (px)
  MIN_NODE_HEIGHT:     60,      // Minimum node card height (px) — independent of drawer
  MIN_DRAWER_HEIGHT:   60,      // Minimum content drawer height (px)
  MAX_DRAWER_HEIGHT:   250,     // Max code textarea height (px)
  ZOOM_MIN:            0.15,    // Minimum zoom level
  ZOOM_MAX:            4,       // Maximum zoom level
  ZOOM_STEP:           0.001,   // Zoom sensitivity per wheel delta

  // ── Autosave ────────────────────────────────────────────
  AUTOSAVE_DEFAULT_MIN: 1,      // Default autosave interval (minutes, 0=off)
  AUTOSAVE_MAX_MIN:     60,     // Maximum autosave interval (minutes)

  // ── Pipeline ────────────────────────────────────────────
  CLOSED_PIPELINES_MAX: 20,     // Max recently-closed pipelines to remember
  UNDO_MAX:             80,     // Max undo history depth
  TAB_DBLCLICK_MS:      400,    // Double-click timing for tab rename (ms)

  // ── Router ──────────────────────────────────────────────
  DEFAULT_MAX_LOOPS:    3,      // Default max loop iterations for Router nodes

  // ── Vault ───────────────────────────────────────────────
  VAULT_IDLE_RELOCK_MS: 15*60*1000, // Auto-relock after 15 min of inactivity (0=off)

  // ── Map (warning system) ────────────────────────────────
  HIGH_CALL_THRESHOLD:  100,    // Above this projected total, show pre-run confirm dialog

  // ── Export ──────────────────────────────────────────────
  GEMINI_INSTRUCTION_LIMIT: 8000, // Char budget for Gemini Gem Instructions (Fit variant target)

  // ── LLM ─────────────────────────────────────────────────
  MAX_OUTPUT_TOKENS:    8192,   // Default max_tokens for LLM calls
  STREAM_THROTTLE_MS:   50,     // Min ms between DOM updates during streaming

  // ── Node rendering ──────────────────────────────────────
  NODE_PORT_SIZE:       12,     // Port circle diameter (px)
  NODE_BORDER_ALPHA:    0.27,   // Border color alpha for unselected nodes
  NODE_SHADOW_ALPHA:    0.19,   // Box shadow alpha for selected nodes
  NODE_LABEL_DBLCLICK_MS: 400,  // Double-click timing for node rename (ms)

  // ── Layout ──────────────────────────────────────────────
  IMPORT_NODE_OFFSET:   40,     // Stagger offset when importing multiple nodes
  ZIP_GRAPH_COL_W:      260,    // Column width for zip-imported graphs
  ZIP_GRAPH_ROW_H:      160,    // Row height for zip-imported graphs

  // ── Minimap ─────────────────────────────────────────────
  MINIMAP_W:            180,    // Minimap width (px)
  MINIMAP_H:            120,    // Minimap height (px)
  MINIMAP_PAD:          60,     // Padding around nodes in minimap
};

// ╔═══════════════════════════════════════════════════════════════╗
// ║  THEME PRESETS — Swap :root variables by name                ║
// ║  Call applyThemePreset('midnight') to switch themes           ║
// ╚═══════════════════════════════════════════════════════════════╝
const THEME_PRESETS={
  midnight:{
    name:'Midnight',
    vars:{'--bg':'oklch(0.12 0.008 250)','--surf':'oklch(0.15 0.01 250)','--panel':'oklch(0.18 0.012 250)',
      '--card':'oklch(0.21 0.014 250)','--brd':'oklch(0.28 0.014 250)','--brdhi':'oklch(0.36 0.016 250)',
      '--txt':'oklch(0.88 0.01 250)','--dim':'oklch(0.5 0.016 250)','--dhi':'oklch(0.66 0.014 250)',
      '--acc':'oklch(0.75 0.16 70)','--alo':'oklch(0.25 0.06 70)','--grn':'oklch(0.72 0.17 165)',
      '--red':'oklch(0.65 0.2 25)'},
  },
  ember:{
    name:'Ember',
    vars:{'--bg':'oklch(0.12 0.012 20)','--surf':'oklch(0.15 0.014 20)','--panel':'oklch(0.18 0.016 20)',
      '--card':'oklch(0.21 0.018 20)','--brd':'oklch(0.28 0.016 20)','--brdhi':'oklch(0.36 0.018 20)',
      '--txt':'oklch(0.88 0.01 40)','--dim':'oklch(0.5 0.02 20)','--dhi':'oklch(0.66 0.016 30)',
      '--acc':'oklch(0.7 0.2 25)','--alo':'oklch(0.25 0.08 25)','--grn':'oklch(0.72 0.17 165)',
      '--red':'oklch(0.65 0.2 25)'},
  },
  forest:{
    name:'Forest',
    vars:{'--bg':'oklch(0.12 0.01 150)','--surf':'oklch(0.15 0.012 150)','--panel':'oklch(0.18 0.014 150)',
      '--card':'oklch(0.21 0.016 150)','--brd':'oklch(0.28 0.014 150)','--brdhi':'oklch(0.36 0.016 150)',
      '--txt':'oklch(0.88 0.008 150)','--dim':'oklch(0.5 0.016 150)','--dhi':'oklch(0.66 0.012 150)',
      '--acc':'oklch(0.72 0.17 165)','--alo':'oklch(0.25 0.06 165)','--grn':'oklch(0.75 0.16 130)',
      '--red':'oklch(0.65 0.2 25)'},
  },
  ocean:{
    name:'Ocean',
    vars:{'--bg':'oklch(0.12 0.01 230)','--surf':'oklch(0.15 0.012 230)','--panel':'oklch(0.18 0.014 230)',
      '--card':'oklch(0.21 0.016 230)','--brd':'oklch(0.28 0.014 230)','--brdhi':'oklch(0.36 0.016 230)',
      '--txt':'oklch(0.88 0.008 220)','--dim':'oklch(0.5 0.016 230)','--dhi':'oklch(0.66 0.012 220)',
      '--acc':'oklch(0.76 0.12 200)','--alo':'oklch(0.25 0.05 200)','--grn':'oklch(0.72 0.17 165)',
      '--red':'oklch(0.65 0.2 25)'},
  },
  violet:{
    name:'Violet',
    vars:{'--bg':'oklch(0.12 0.012 290)','--surf':'oklch(0.15 0.014 290)','--panel':'oklch(0.18 0.016 290)',
      '--card':'oklch(0.21 0.018 290)','--brd':'oklch(0.28 0.016 290)','--brdhi':'oklch(0.36 0.018 290)',
      '--txt':'oklch(0.88 0.008 280)','--dim':'oklch(0.5 0.018 290)','--dhi':'oklch(0.66 0.014 280)',
      '--acc':'oklch(0.68 0.16 300)','--alo':'oklch(0.25 0.06 300)','--grn':'oklch(0.72 0.17 165)',
      '--red':'oklch(0.65 0.2 25)'},
  },
};

// Applies a named theme preset by setting CSS custom properties on :root
function applyThemePreset(name){
  const preset=THEME_PRESETS[name];
  if(!preset)return;
  const root=document.documentElement;
  Object.entries(preset.vars).forEach(([k,v])=>root.style.setProperty(k,v));
  try{localStorage.setItem('pb_theme_preset',name);}catch(e){}
}

// ═══════════════════════════════════════════════════════════
// DATA
// ═══════════════════════════════════════════════════════════
const COLORS={blue:'oklch(0.7 0.14 250)',purple:'oklch(0.68 0.16 300)',green:'oklch(0.72 0.17 165)',grn:'oklch(0.72 0.17 165)',accent:'oklch(0.75 0.16 70)',acc:'oklch(0.75 0.16 70)',cyan:'oklch(0.76 0.12 200)',cyn:'oklch(0.76 0.12 200)',orange:'oklch(0.72 0.17 55)',org:'oklch(0.72 0.17 55)',red:'oklch(0.65 0.2 25)',dimHi:'oklch(0.66 0.014 250)'};
const CIDS=Object.keys(COLORS);
const cx=id=>{const v=COLORS[id];if(!v)return'oklch(0.66 0.014 250)';if(v.startsWith('oklch('))return v;if(/^#[0-9a-fA-F]{6}$/.test(v))return v;return'oklch(0.66 0.014 250)';};
// Apply alpha to any color string (OKLCH or hex)
function cxa(color,alpha){
  if(!color)return color;
  if(color.startsWith('oklch(')){
    // oklch(L C H) → oklch(L C H / alpha)
    return color.replace(')',(' / '+alpha+')'));
  }
  // Hex fallback
  const a=Math.round(alpha*255).toString(16).padStart(2,'0');
  return color+a;
}

// UID — timestamp + counter ensures no collisions even across sessions
let _uid=0;
const _uidBase=Date.now().toString(36);
const uid=p=>`${p||'n'}${_uidBase}_${++_uid}`;

/* __SKILLS_START__ */
let skills=[
  // ═════════════════════════════════════════════════════════
  // PRIMITIVE NODES — locked, always present, foundational
  // ═════════════════════════════════════════════════════════

  {id:'text_input',label:'TEXT',color:'blue',glyph:'✦',shape:'default',category:'Primitives',
    desc:'Raw text entry point. Type or paste content directly — no LLM call, no inputs.',
    tags:['input','text','entry'],isBuiltin:true,rawContent:'',deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[],
    defaultOutputs:[{id:'text',name:'content',type:'Text'}],
    fields:[{key:'content',label:'Content',type:'codeeditor',rows:6,ph:'Enter your text here…'}],
    hasOut:true,hasIn:false},

  {id:'io_input',label:'FILE',color:'accent',glyph:'⬡',shape:'default',category:'Primitives',
    desc:'Upload one or more files. Multi-file mode concatenates with file-boundary markers (=== FILE N OF M: name [mime, sizeKB] ===) so downstream atoms can navigate per-file evidence. Drop files or click to choose; binary formats surface as ⚠ unsupported.',
    tags:['input','file','upload','boundary'],isBuiltin:true,rawContent:'',deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[],
    defaultOutputs:[{id:'io-out-data',name:'content',type:'Any'}],
    fields:[
      {key:'file_upload',label:'Upload File',type:'file_upload'},
      {key:'description',label:'Description',type:'text',ph:'What this input represents'},
      {key:'content',label:'Captured Content',type:'content_preview'}
    ],hasOut:true,hasIn:false},

  {id:'fetch',label:'FETCH',color:'accent',glyph:'⬢',shape:'default',category:'Primitives',
    desc:'Fetch a URL or API endpoint at edit time. Body → content, response status/headers → metadata. Use Markdown for clean content extraction (recommended for prose), HTML for raw page inspection (SEO).',
    tags:['input','url','api','http','fetch','boundary'],isBuiltin:true,rawContent:'',deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[],
    defaultOutputs:[{id:'io-out-data',name:'content',type:'Any'},{id:'io-out-meta',name:'metadata',type:'JSON'}],
    fields:[
      {key:'url',label:'URL / Endpoint',type:'codeeditor',rows:2,ph:'https://api.example.com/data\n# One URL per line. Lines starting with # are comments. Single URL behaves as before.'},
      {key:'backend',label:'Backend',type:'select',opts:['Direct','Proxy (HTML)','Proxy (Markdown)']},
      {key:'headers',label:'Headers (optional)',type:'codeeditor',rows:2,ph:'Authorization: Bearer xxx — ignored when Backend is Proxy (HTML) or Proxy (Markdown)'},
      {key:'fetch_trigger',label:'',type:'fetch_trigger'},
      {key:'content',label:'Captured Content',type:'content_preview'},
      {key:'_meta',label:'Response Metadata',type:'meta_preview'},
      {key:'description',label:'Description',type:'text',ph:'What this input represents'}
    ],hasOut:true,hasIn:false},


  {id:'compute',label:'COMPUTE',color:'orange',glyph:'⚙',shape:'default',category:'Primitives',
    desc:'The unit of work. Runs an LLM inference, tool call, or API request. Connect a Context node upstream to define what the model knows.',
    tags:['llm','work','transform','generate','execute'],isBuiltin:true,
    rawContent:`## Compute Node
You are a processing node in a pipeline. Execute the task described in your instructions using the provided context.

## Behavior
- Read all upstream context carefully
- Execute the task described in your instructions field
- Produce clear, structured output
- If you lack information needed to complete the task, say so explicitly`,
    deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[{id:'comp-in',name:'input',type:'Any'}],
    defaultOutputs:[{id:'comp-out',name:'output',type:'Any'}],
    fields:[
      {key:'instructions',label:'Instructions',type:'codeeditor',rows:10,ph:'What should this node do with its input?'},
      {key:'executor',label:'Executor',type:'select',opts:['LLM','Function','HTTP','Code']}
    ],hasOut:true,hasIn:true},

  {id:'code',label:'CODE',color:'cyan',glyph:'⊞',shape:'default',category:'Primitives',
    desc:'A code block with language selection. Use to define scripts, queries, configs, or any executable dependency.',
    tags:['code','script','execute'],isBuiltin:true,rawContent:'',deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[{id:'code-in',name:'input',type:'Any'}],
    defaultOutputs:[{id:'code-out',name:'output',type:'Any'}],
    fields:[{key:'lang',label:'Language',type:'select',opts:['Python','JavaScript','TypeScript','Bash','SQL','JSON','YAML','HTML','CSS','Ruby','Go','Rust']},
      {key:'code',label:'Code',type:'codeeditor',rows:8,ph:'// your code here'},
      {key:'parameters',label:'Tool Parameters',type:'jsonschema',rows:8,ph:'// optional — defines GPT function-call parameter shape\n// leave blank for default { input: string }'}],
    hasOut:true,hasIn:true},

  {id:'router',label:'ROUTER',color:'purple',glyph:'◇',shape:'dashed',category:'Primitives',
    desc:'Branches execution based on conditions. Evaluates prior output and routes to different paths.',
    tags:['control','branch','condition','if','loop'],isBuiltin:true,
    rawContent:`## Router Node
You are a decision-making node in a pipeline. Evaluate the input and decide which route to take.

## Instructions
- Read the incoming context/output from the previous step
- Evaluate it against the CONDITION specified in the node fields
- Respond with ONLY the route name that matches (e.g. "pass", "fail", "retry", "option_a")
- Do not produce any other output — just the route label

## Condition Field
The user will specify a condition like:
- "score >= 7"
- "contains an actionable thesis"
- "is valid JSON"
- "word count > 500"

Evaluate the input against this condition and output the matching route.`,
    deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[{id:'r-in',name:'input',type:'Any'}],
    defaultOutputs:[{id:'r-pass',name:'pass',type:'Any'},{id:'r-fail',name:'fail',type:'Any'}],
    fields:[
      {key:'condition',label:'Condition',type:'codeeditor',rows:10,ph:'e.g. score >= 7, or "contains a clear thesis"'},
      {key:'mode',label:'Evaluation',type:'select',opts:['LLM (natural language)','Expression (JS)']},
      {key:'max_loops',label:'Max Loops',type:'text',ph:'3 (prevents infinite loops)'}
    ],hasOut:true,hasIn:true},

  {id:'context',label:'CONTEXT',color:'green',glyph:'◎',shape:'default',category:'Primitives',
    desc:'Aggregates and merges inputs into a unified context object. No LLM call — just state composition.',
    tags:['state','memory','prompt','aggregate','merge'],isBuiltin:true,
    rawContent:`## Context Node
This node does NOT call an LLM. It merges all its inputs into a single context object that downstream nodes can consume.

## Behavior
- Collects all connected input values
- Merges them with any variables defined in the fields
- Outputs the combined context as a structured object

Use this to:
- Combine research findings with audience data before generating content
- Merge multiple upstream outputs into a single prompt context
- Define shared variables (tone, audience, constraints) that multiple downstream nodes reference
- Avoid duplicating the same prompt context across many nodes`,
    deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[{id:'c-in1',name:'input_1',type:'Any'},{id:'c-in2',name:'input_2',type:'Any'},{id:'c-in3',name:'input_3',type:'Any'}],
    defaultOutputs:[{id:'c-out',name:'context',type:'Any'}],
    fields:[
      {key:'variables',label:'Variables',type:'codeeditor',rows:10,ph:'audience: B2B tech leaders\ntone: professional but warm\nconstraints: max 1500 words'},
      {key:'merge_mode',label:'Merge Mode',type:'select',opts:['Concatenate','Structured JSON','Template']}
    ],hasOut:true,hasIn:true},

  {id:'map',label:'MAP',color:'purple',glyph:'\u2A01',shape:'dashed',category:'Primitives',
    desc:'Iterates downstream pipeline once per item in a collection input. Sequential execution; collects results into a joined output.',
    tags:['control','iterate','loop','fan-out','collection','map'],isBuiltin:true,
    rawContent:`## Map Node
This node does NOT call an LLM. It iterates over a collection input and runs the
downstream pipeline once per item, then collects the results.

## Behavior
- Read the incoming context as a collection. The Split Mode field controls parsing:
  - Auto: try JSON array first; if not valid, split by newlines
  - JSON Array: parse input as a JSON array, error if invalid
  - Newlines: split on \\n, trim each line, drop empties
  - Comma-separated: split on commas, trim each
  - Custom delimiter: split on the Delimiter field's value
- For each item, run the downstream pipeline with that item as the input
- Collect each iteration's output and join them with the Join Separator
- Halt with a warning if iterations exceed Max Iterations (guardrail against
  runaway inputs)
- Empty collections are skipped silently with a log line \u2014 not an error

## When to use
- Processing a list of items with the same logic (summarize each article,
  classify each comment, translate each line)
- Generating N variants of an output (rewrite this 5 ways, brainstorm 10 angles)
- Per-row transformation of structured data

## When NOT to use
- Branching based on a condition \u2192 use Router instead
- Merging multiple inputs into one context \u2192 use Context instead
- Calling an LLM on a single input \u2192 use Compute directly`,
    deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[{id:'m-in',name:'input',type:'Any'}],
    defaultOutputs:[{id:'m-out',name:'output',type:'Any'}],
    fields:[
      {key:'split_mode',label:'Split Mode',type:'select',opts:['Auto','JSON Array','Newlines','Comma-separated','Custom delimiter']},
      {key:'delimiter',label:'Custom Delimiter',type:'text',ph:'|||  (only used when Split Mode = Custom delimiter)'},
      {key:'join_separator',label:'Join Separator',type:'text',ph:'\\n\\n---\\n\\n  (separator between iteration outputs)'},
      {key:'max_iterations',label:'Max Iterations',type:'text',ph:'10  (guardrail; iterations beyond this halt with a warning)'}
    ],hasOut:true,hasIn:true},

  // ── SYSTEM NODES (sub-graph wiring) ────────────────────
  {id:'graph-input',label:'GRAPH INPUT',color:'grn',glyph:'▶',shape:'default',
    category:'Graph',desc:'Exposes parent-node inputs inside the sub-graph.',
    tags:[],isBuiltin:true,rawContent:'',deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[],defaultOutputs:[],fields:[],hasOut:true,hasIn:false},
  {id:'graph-output',label:'GRAPH OUTPUT',color:'org',glyph:'◀',shape:'default',
    category:'Graph',desc:'Sends sub-graph results back to the parent node outputs.',
    tags:[],isBuiltin:true,rawContent:'',deps:[],internalGraph:{nodes:[],edges:[]},
    defaultInputs:[],defaultOutputs:[],fields:[],hasOut:false,hasIn:true},

];


/* __SKILLS_END__ */

// ── Skill persistence (localStorage) ──────────────────────
const PB_SKILLS_STORE='pb_user_skills';

// Saves all user-defined skills to localStorage
let _persistTimer=null;
function persistSkills(){
  _invSkIdx(); // sync invalidate — debounced save runs later, but next getSk() must see fresh refs
  clearTimeout(_persistTimer);
  _persistTimer=setTimeout(()=>{
    const userSkills=skills.filter(s=>!s.isBuiltin);
    safeStore(PB_SKILLS_STORE,userSkills);
    try{localStorage.setItem('pb_local_ts',new Date().toISOString());}catch(e){}
  },500);
}
function persistSkillsSync(){
  _invSkIdx();
  clearTimeout(_persistTimer);
  const userSkills=skills.filter(s=>!s.isBuiltin);
  safeStore(PB_SKILLS_STORE,userSkills);
  try{localStorage.setItem('pb_local_ts',new Date().toISOString());}catch(e){}
}

// Load user skills from localStorage on startup
(function loadPersistedSkills(){
  try{
    const stored=localStorage.getItem(PB_SKILLS_STORE);
    if(!stored)return;
    const loaded=JSON.parse(stored);
    if(!Array.isArray(loaded))return;
    loaded.forEach(sk=>{
      if(!sk.id||!sk.label)return;
      sk.isBuiltin=false;
      const idx=skills.findIndex(s=>s.id===sk.id);
      if(idx>=0)skills[idx]=sk;
      else skills.push(sk);
    });
  }catch(e){}
})();

// ═══════════════════════════════════════════════════════════
// PIPELINE TABS
// ═══════════════════════════════════════════════════════════
const PL_STORE='pb_pl_open';      // open pipeline tabs
const PL_CLOSED_STORE='pb_pl_closed'; // recently closed (persists for reopening)
const PL_CLOSED_MAX=CONFIG.CLOSED_PIPELINES_MAX;

function loadPipelines(){
  try{
    const raw=localStorage.getItem(PL_STORE);
    if(raw){const parsed=JSON.parse(raw);if(Array.isArray(parsed)&&parsed.length)return parsed;}
  }catch(e){}
  return []; // empty — caller shows the no-pipeline screen
}
let _savePlTimer=null;
function savePipelines(){
  clearTimeout(_savePlTimer);
  _savePlTimer=setTimeout(()=>{
    const serialisable=pipelines.map(p=>{const {fileHandle,...rest}=p;return rest;});
    try{localStorage.setItem(PL_STORE,JSON.stringify(serialisable));}catch(e){}
    try{localStorage.setItem('pb_local_ts',new Date().toISOString());}catch(e){}
  },500);
}
function savePipelinesSync(){
  clearTimeout(_savePlTimer);
  const serialisable=pipelines.map(p=>{const {fileHandle,...rest}=p;return rest;});
  try{localStorage.setItem(PL_STORE,JSON.stringify(serialisable));}catch(e){}
  try{localStorage.setItem('pb_local_ts',new Date().toISOString());}catch(e){}
}
function loadClosedPipelines(){
  try{const r=localStorage.getItem(PL_CLOSED_STORE);if(r)return JSON.parse(r)||[];}catch(e){}
  return[];
}
function saveClosedPipelines(list){
  try{localStorage.setItem(PL_CLOSED_STORE,JSON.stringify(list.slice(0,PL_CLOSED_MAX)));}catch(e){}
}

let pipelines=loadPipelines();
let activePipelineId=pipelines.length?pipelines[0].id:null;

// Returns the pipeline object matching activePipelineId, or null
function activePipeline(){return pipelines.find(p=>p.id===activePipelineId)||null;}

// canvasStack now points into the active pipeline's stack (empty frame when no pipelines)
let canvasStack=activePipeline()?.stack||[{nodes:[],edges:[],tx:{x:0,y:0,s:1},label:'Root',skillId:null}];
// If pipelines exist but activePipelineId doesn't match, fix it
if(pipelines.length&&!activePipeline()){activePipelineId=pipelines[0].id;canvasStack=pipelines[0].stack;}

// Accessors for current frame
const frame=()=>canvasStack[canvasStack.length-1];
const getNodes=()=>frame().nodes;
const getEdges=()=>frame().edges;

// ── Empty-state screen ─────────────────────────────────────
function showEmptyState(){
  document.getElementById('no-pipeline-screen').classList.add('visible');
  document.getElementById('canvas-area').style.visibility='hidden';
  document.getElementById('breadcrumb').style.visibility='hidden';
}
function hideEmptyState(){
  document.getElementById('no-pipeline-screen').classList.remove('visible');
  document.getElementById('canvas-area').style.visibility='';
  document.getElementById('breadcrumb').style.visibility='';
}
function checkEmptyState(){
  if(!pipelines.length)showEmptyState(); else hideEmptyState();
}

// ── Pipeline operations ────────────────────────────────────
function newPipeline(name){
  const p={id:uid('pl'),name:name||'Untitled Pipeline',stack:[{nodes:[],edges:[],tx:{x:0,y:0,s:1},label:'Root',skillId:null}],saved:false};
  // Save current canvas BEFORE adding the new pipeline to prevent autosave races
  const prev=activePipeline();
  if(prev)prev.stack=canvasStack;
  pipelines.push(p);
  // Switch immediately — no gap for autosave to fire with stale activePipelineId
  activePipelineId=p.id;
  canvasStack=p.stack;
  undoStack=[];redoStack=[];
  selNode=null;selSkillId=null;selNodes.clear();
  scene.querySelectorAll('.node').forEach(n=>n.remove());
  hideEmptyState();closeOpenPanel();
  rebuildCanvas();renderPipelineTabs();renderBreadcrumb();
}

function switchPipeline(id){
  // Verify target pipeline exists before switching
  const target=pipelines.find(p=>p.id===id);
  if(!target){console.warn('switchPipeline: no pipeline with id',id);return;}
  closeOpenPanel();
  hideEmptyState();
  // Save current canvas back into the CURRENT active pipeline
  const prev=pipelines.find(p=>p.id===activePipelineId);
  if(prev&&prev!==target)prev.stack=canvasStack;
  // Switch
  activePipelineId=id;
  canvasStack=target.stack;
  // Reset to root frame when switching
  while(canvasStack.length>1)canvasStack.pop();
  // Clear undo/redo — history doesn't transfer across pipelines
  undoStack=[];redoStack=[];
  selNode=null;selSkillId=null;selNodes.clear();
  scene.querySelectorAll('.node').forEach(n=>n.remove());
  rebuildCanvas();renderPipelineTabs();renderBreadcrumb();
}

function renamePipeline(id,name){
  const p=pipelines.find(x=>x.id===id);if(!p)return;
  p.name=name||p.name;
  markPipelineDirty(id);
  renderPipelineTabs();
}

// Marks a pipeline as having unsaved changes (shows dot on tab)
function markPipelineDirty(id){
  const p=pipelines.find(x=>x.id===id);
  if(!p||!p.saved)return; // already dirty, skip DOM work
  p.saved=false;
  // Update just the affected tab's class rather than rebuilding all tabs
  const tab=document.querySelector('.ptab[data-pid="'+id+'"]');
  if(tab){tab.classList.add('ptab-unsaved');tab.title=p.name+' (unsaved) · drag to reorder';}
}

// Quick-saves a pipeline to localStorage and its existing file handle (if any)
function savePipeline(id){
  const p=pipelines.find(x=>x.id===id);if(!p)return;
  if(p.id===activePipelineId)p.stack=canvasStack;
  // Mark saved + persist to localStorage synchronously — no async race.
  p.saved=true;
  savePipelines();
  renderPipelineTabs();
  flashBtn('btn-save-pipeline','✓ Saved','💾 Save Pipeline');
  // Silently write to file in background only if a handle already exists.
  // Never show the picker here — that's Ctrl+Shift+S (savePipelineAs).
  if(p.fileHandle)_writeToFileHandle(p);
}

async function _writeToFileHandle(p){
  try{
    const writable=await p.fileHandle.createWritable();
    await writable.write(pipelinePayload(p));
    await writable.close();
    p.fileBacked=true;
  }catch(e){
    if(e.name!=='AbortError')p.fileHandle=null;
  }
}

function saveAllPipelines(){
  const p=activePipeline();
  if(p)p.stack=canvasStack;
  savePipelinesSync();
  pipelines.forEach(p=>p.saved=true);
  renderPipelineTabs();
}

function closePipeline(id){
  const p=pipelines.find(x=>x.id===id);if(!p)return;
  if(!p.saved){
    if(!confirm('Pipeline "'+p.name+'" has unsaved changes. Close without saving?'))return;
  }
  // Sync canvas before closing
  if(p.id===activePipelineId)p.stack=canvasStack;
  // Move to recently-closed store (strip fileHandle — not serialisable)
  const {fileHandle,...closeable}=p;
  closeable.closedAt=Date.now();
  const closed=loadClosedPipelines().filter(c=>c.id!==id);
  closed.unshift(closeable);
  saveClosedPipelines(closed);

  const idx=pipelines.findIndex(x=>x.id===id);
  pipelines.splice(idx,1);
  if(!pipelines.length){
    activePipelineId=null;
    canvasStack=[{nodes:[],edges:[],tx:{x:0,y:0,s:1},label:'Root',skillId:null}];
    selNode=null;selSkillId=null;selNodes.clear();
    scene.querySelectorAll('.node').forEach(n=>n.remove());
  } else if(activePipelineId===id){
    activePipelineId=pipelines[Math.max(0,idx-1)].id;
    canvasStack=activePipeline().stack;
    selNode=null;selSkillId=null;selNodes.clear();
    scene.querySelectorAll('.node').forEach(n=>n.remove());
    rebuildCanvas();
  }
  savePipelines();
  renderPipelineTabs();renderBreadcrumb();
  checkEmptyState();
}

// ── Build pipeline JSON payload ───────────────────────────
// Serializes a pipeline to JSON for save/export, bundling referenced skills
function pipelinePayload(p){
  // Sync active canvas before serialising
  if(p.id===activePipelineId)p.stack=canvasStack;
  // Collect all skill IDs referenced anywhere in the stack (all frames, all levels)
  const referencedIds=new Set();
  (p.stack||[]).forEach(frame=>{
    (frame.nodes||[]).forEach(n=>{
      const sid=n.skillId||n.type;
      if(sid&&sid!=='graph-input'&&sid!=='graph-output')referencedIds.add(sid);
    });
  });
  // Bundle the full skill objects (user-defined only — builtins are always present)
  const bundledSkills=skills.filter(s=>referencedIds.has(s.id)&&!s.isBuiltin);
  return JSON.stringify({name:p.name,stack:p.stack,skills:bundledSkills},null,2);
}

// ── Download fallback (no File System Access API) ─────────
function downloadPipeline(p){
  const blob=new Blob([pipelinePayload(p)],{type:'application/json'});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);
  a.download=(p.name||'pipeline').replace(/[^a-z0-9]/gi,'-').toLowerCase()+'.ppln';
  a.click();URL.revokeObjectURL(a.href);
}

// ── Save to a chosen file (File System Access API) ────────
// p.fileHandle is retained across saves so Ctrl+S silently overwrites.

// ── Save As — always show picker ──────────────────────────
// Saves a pipeline to a user-chosen file location via File System Access API
async function savePipelineAs(id){
  const p=pipelines.find(x=>x.id===id);if(!p)return;
  if(!window.showSaveFilePicker){downloadPipeline(p);return;}
  try{
    p.fileHandle=await window.showSaveFilePicker({
      suggestedName:(p.name||'pipeline').replace(/[^a-z0-9]/gi,'-').toLowerCase()+'.ppln',
      types:[{description:'GUIness Pipeline',accept:{'application/json':['.ppln','.json','.pipeline.json']}}]
    });
    const writable=await p.fileHandle.createWritable();
    await writable.write(pipelinePayload(p));
    await writable.close();
    // Rename pipeline to match filename if user changed it in the picker
    try{
      const fname=p.fileHandle.name.replace(/\.ppln$|\.pipeline\.json$|\.json$/,'');
      if(fname&&fname!==p.name){p.name=fname;renamePipeline(id,fname);}
    }catch(_){}
    p.saved=true;p.fileBacked=true;savePipelines();renderPipelineTabs();
    flashBtn('btn-save-pipeline','✓ Saved','💾 Save Pipeline');
  }catch(e){if(e.name!=='AbortError'){p.fileHandle=null;downloadPipeline(p);}}
}

// ── Export pipeline JSON (always download, no handle) ─────
function exportPipeline(id){
  const p=pipelines.find(x=>x.id===id);if(!p)return;
  downloadPipeline(p);
}

// ── Skill import prompt after pipeline open ──────────────
// Compare bundled skill against library copy on behavior-affecting fields.
// Returns true if any of these differ; false if functionally identical.
function _skillContentDiffers(a,b){
  const norm=s=>JSON.stringify({
    rawContent:s.rawContent||'',
    internalGraph:s.internalGraph||null,
    fields:s.fields||[],
    defaultInputs:s.defaultInputs||[],
    defaultOutputs:s.defaultOutputs||[],
    label:s.label||'',
    desc:s.desc||''
  });
  return norm(a)!==norm(b);
}

// Walk bundled skills and tag each as 'new' (no ID in lib) or 'updated' (ID present, content differs).
// Skills present in lib with identical content are silently skipped.
function _buildSkillImportCandidates(bundled){
  if(!Array.isArray(bundled)||!bundled.length)return [];
  const out=[];
  bundled.forEach(bs=>{
    const existing=skills.find(s=>s.id===bs.id);
    if(!existing)out.push({...bs,_status:'new'});
    else if(_skillContentDiffers(bs,existing))out.push({...bs,_status:'updated'});
  });
  return out;
}

function _candidatesMessage(candidates){
  const nNew=candidates.filter(c=>c._status==='new').length;
  const nUpd=candidates.filter(c=>c._status==='updated').length;
  const parts=[];
  if(nNew)parts.push(nNew+' new');
  if(nUpd)parts.push(nUpd+' updated');
  return 'This pipeline references '+parts.join(' and ')+' skill'+(nNew+nUpd!==1?'s':'')+'. Select which to import:';
}

async function _checkAndImportBundledSkills(data,onComplete){
  const candidates=_buildSkillImportCandidates(data.skills);
  if(!candidates.length){onComplete();return Promise.resolve();}
  await _showSkillPickerModal(candidates,_candidatesMessage(candidates));
  onComplete();
}

// ── Open pipeline from file ───────────────────────────────
// Opens a pipeline JSON file and adds it as a new tab
async function importPipelineFile(){
  // Prefer File System Access API so we can silently Save later
  if(window.showOpenFilePicker){
    try{
      const [handle]=await window.showOpenFilePicker({
        types:[{description:'GUIness Pipeline',accept:{'application/json':['.ppln','.json','.pipeline.json']}}],
        multiple:false
      });
      const file=await handle.getFile();
      const text=await file.text();
      const data=JSON.parse(text);
      if(!data.stack||!Array.isArray(data.stack))throw new Error('Invalid pipeline file');
      const p={id:uid('pl'),name:data.name||file.name.replace(/\.ppln$|\.pipeline\.json$|\.json$/,''),
               stack:data.stack,saved:true,fileHandle:handle,fileBacked:true};
      pipelines.push(p);
      await _checkAndImportBundledSkills(data,()=>{switchPipeline(p.id);savePipelines();});
      return;
    }catch(e){
      if(e.name==='AbortError')return;
      // Fall through to legacy input
    }
  }
  // Fallback: classic <input type=file>
  const inp=document.createElement('input');inp.type='file';inp.accept='.ppln,.json,.pipeline.json';
  inp.addEventListener('change',e=>{
    const f=e.target.files[0];if(!f)return;
    const r=new FileReader();
    r.onload=async ev=>{
      try{
        const data=JSON.parse(ev.target.result);
        if(!data.stack||!Array.isArray(data.stack))throw new Error('Invalid pipeline JSON');
        const p={id:uid('pl'),name:data.name||f.name.replace(/\.ppln$|\.pipeline\.json$|\.json$/,''),
                 stack:data.stack,saved:true};
        hideEmptyState();pipelines.push(p);
        await _checkAndImportBundledSkills(data,()=>{switchPipeline(p.id);savePipelines();});
      }catch(err){showToast('Could not import: '+err.message,'err');}
    };
    r.readAsText(f);
  });
  inp.click();
}

// ── Flash a topbar button temporarily ─────────────────────
function flashBtn(id,msg,reset){
  const btn=document.getElementById(id);if(!btn)return;
  const orig=btn.textContent;
  btn.textContent=msg;btn.style.color='var(--grn)';btn.style.borderColor='var(--grn)';
  clearTimeout(btn._ft);
  btn._ft=setTimeout(()=>{btn.textContent=reset||orig;btn.style.color='';btn.style.borderColor='';},2000);
}

function showToast(msg,type){
  const t=document.createElement('div');
  t.style.cssText='position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:99999;font-family:var(--mono);font-size:11px;padding:10px 18px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);pointer-events:auto;cursor:pointer;transition:opacity .3s;max-width:480px;word-break:break-word';
  t.style.background=type==='err'?'oklch(0.35 0.12 25)':'var(--panel)';
  t.style.border='1px solid '+(type==='err'?'oklch(0.55 0.18 25)':'var(--brd)');
  t.style.color=type==='err'?'oklch(0.85 0.1 25)':'var(--dhi)';
  t.textContent=msg;
  t.addEventListener('click',()=>{t.style.opacity='0';setTimeout(()=>t.remove(),300);});
  document.body.appendChild(t);
  setTimeout(()=>{t.style.opacity='0';setTimeout(()=>t.remove(),300);},4000);
}

// ── Tab bar: drag-to-reorder, click-to-switch, +, Open ────
// All state lives at module level so renderPipelineTabs can cancel in-flight interactions.
const _tabBarState={
  pid:null,        // pipeline id currently being pressed/dragged
  dragging:false,
  ox:0, oy:0,
  ghost:null,
  overTab:null,
  overSide:null,
  boundMove:null,  // currently-bound onMove handler ref
  boundUp:null,    // currently-bound onUp handler ref
};

// Cancel any in-flight tab interaction — removes document listeners, cleans ghost
function _cancelTabInteraction(){
  const s=_tabBarState;
  if(s.boundUp){
    document.removeEventListener('pointerup',s.boundUp);
    document.removeEventListener('pointercancel',s.boundUp);
    s.boundUp=null;
  }
  if(s.boundMove){
    document.removeEventListener('pointermove',s.boundMove);
    s.boundMove=null;
  }
  if(s.ghost){s.ghost.remove();s.ghost=null;}
  if(s.overTab){s.overTab.classList.remove('drag-over-left','drag-over-right');s.overTab=null;s.overSide=null;}
  const bar=document.getElementById('pipeline-tabbar');
  if(bar)bar.querySelectorAll('.ptab.dragging').forEach(t=>t.classList.remove('dragging'));
  s.pid=null;s.dragging=false;
}

let _tabBarInited=false;
function _initTabBarListener(){
  if(_tabBarInited)return;
  const bar=document.getElementById('pipeline-tabbar');
  if(!bar)return;
  _tabBarInited=true;
  const THRESHOLD=5;
  const s=_tabBarState;

  bar.addEventListener('pointerdown',e=>{
    if(e.button!==0)return;
    // Ignore clicks on close, +, Open, or rename inputs
    if(e.target.closest('.ptab-close,.ptab-new,.ptab-open')||e.target.tagName==='INPUT')return;
    const tab=e.target.closest('.ptab');
    if(!tab||!tab.dataset.pid)return;
    e.preventDefault();

    // Cancel any previous interaction first
    _cancelTabInteraction();

    s.pid=tab.dataset.pid;
    s.dragging=false;
    s.ox=e.clientX;s.oy=e.clientY;

    function onMove(ev){
      if(!s.pid)return;
      if(!s.dragging){
        if(Math.abs(ev.clientX-s.ox)<THRESHOLD&&Math.abs(ev.clientY-s.oy)<THRESHOLD)return;
        s.dragging=true;
        const p=pipelines.find(x=>x.id===s.pid);
        s.ghost=document.createElement('div');
        s.ghost.id='tab-drag-ghost';
        s.ghost.textContent=(p?.fileBacked?'📄 ':'')+(p?.name||'');
        s.ghost.style.left=(ev.clientX+12)+'px';
        s.ghost.style.top=(ev.clientY-17)+'px';
        document.body.appendChild(s.ghost);
        bar.querySelectorAll('.ptab').forEach(t=>{
          if(t.dataset.pid===s.pid)t.classList.add('dragging');
        });
      }
      s.ghost.style.left=(ev.clientX+12)+'px';
      s.ghost.style.top=(ev.clientY-17)+'px';
      // Find drop target
      if(s.overTab){s.overTab.classList.remove('drag-over-left','drag-over-right');s.overTab=null;s.overSide=null;}
      s.ghost.style.display='none';
      const el=document.elementFromPoint(ev.clientX,ev.clientY);
      s.ghost.style.display='';
      const dt=el?.closest('.ptab');
      if(dt&&dt.dataset.pid&&dt.dataset.pid!==s.pid){
        const r=dt.getBoundingClientRect();
        s.overSide=ev.clientX<r.left+r.width/2?'left':'right';
        dt.classList.add('drag-over-'+s.overSide);
        s.overTab=dt;
      }
    }

    function onUp(){
      // Snapshot state then clean up FIRST to prevent any re-entrance
      const wasDragging=s.dragging;
      const dropTab=s.overTab;
      const dropSide=s.overSide;
      const clickedPid=s.pid;
      _cancelTabInteraction(); // clears everything including s.pid

      if(wasDragging&&dropTab&&dropSide){
        const fromIdx=pipelines.findIndex(p=>p.id===clickedPid);
        const toId=dropTab.dataset.pid;
        let toIdx=pipelines.findIndex(p=>p.id===toId);
        if(fromIdx>=0&&toIdx>=0&&fromIdx!==toIdx){
          const [moved]=pipelines.splice(fromIdx,1);
          toIdx=pipelines.findIndex(p=>p.id===toId);
          const insertAt=dropSide==='left'?toIdx:toIdx+1;
          pipelines.splice(insertAt,0,moved);
          savePipelines();
          renderPipelineTabs();
        }
      } else if(!wasDragging&&clickedPid&&clickedPid!==activePipelineId){
        switchPipeline(clickedPid);
      }
    }

    s.boundMove=onMove;
    s.boundUp=onUp;
    document.addEventListener('pointermove',onMove);
    document.addEventListener('pointerup',onUp,{once:true});
    document.addEventListener('pointercancel',onUp,{once:true});
  });

  bar.addEventListener('contextmenu',e=>{
    const tab=e.target.closest('.ptab');
    if(!tab||!tab.dataset.pid)return;
    e.preventDefault();
    showPipelineMenu(tab.dataset.pid,e.clientX,e.clientY);
  });
}

function renderPipelineTabs(){
  // Cancel any in-flight interaction BEFORE rebuilding DOM
  _cancelTabInteraction();

  const bar=document.getElementById('pipeline-tabbar');bar.innerHTML='';
  _initTabBarListener();

  // Sanity check: if activePipelineId doesn't match any pipeline, fix it
  if(pipelines.length&&!pipelines.find(p=>p.id===activePipelineId)){
    activePipelineId=pipelines[0].id;
    canvasStack=pipelines[0].stack;
  }

  pipelines.forEach(p=>{
    const isActive=p.id===activePipelineId;
    const tab=document.createElement('div');
    tab.className='ptab'+(isActive?' active':'')+(p.saved?'':' ptab-unsaved');
    tab.title=p.name+(p.saved?'':' (unsaved) · drag to reorder');
    tab.dataset.pid=p.id;

    // Name — dblclick to rename
    const nameEl=document.createElement('span');nameEl.className='ptab-name';
    nameEl.textContent=(p.fileBacked?'📄 ':'')+p.name;
    nameEl.addEventListener('dblclick',e=>{
      e.stopPropagation();
      const inp=document.createElement('input');
      inp.value=p.name;inp.style.cssText='width:100%;background:transparent;border:none;outline:none;font-family:var(--mono);font-size:9px;color:var(--txt)';
      nameEl.replaceWith(inp);inp.focus();inp.select();
      const commit=()=>{renamePipeline(p.id,inp.value.trim()||p.name);};
      inp.addEventListener('blur',commit);
      inp.addEventListener('keydown',e2=>{if(e2.key==='Enter')commit();if(e2.key==='Escape'){inp.value=p.name;commit();}});
    });
    tab.appendChild(nameEl);

    // Close button
    const close=document.createElement('span');close.className='ptab-close';close.textContent='×';close.title='Close';
    close.addEventListener('click',e=>{e.stopPropagation();closePipeline(p.id);});
    tab.appendChild(close);

    bar.appendChild(tab);
  });

  // Open saved pipelines button
  const openBtn=document.createElement('div');openBtn.className='ptab-open';
  openBtn.innerHTML='📂 <span>Open</span>';openBtn.title='Open a saved pipeline';
  openBtn.addEventListener('click',e=>{e.stopPropagation();toggleOpenPanel(openBtn);});
  bar.appendChild(openBtn);

  // New pipeline button
  const newBtn=document.createElement('div');newBtn.className='ptab-new';newBtn.textContent='+';newBtn.title='New pipeline';
  newBtn.addEventListener('click',e=>{e.stopPropagation();newPipeline();});
  bar.appendChild(newBtn);
}

function showPipelineMenu(id,x,y){
  document.getElementById('pl-ctx-menu')?.remove();
  const p=pipelines.find(pl=>pl.id===id);if(!p)return;
  const menu=document.createElement('div');
  menu.id='pl-ctx-menu';
  menu.style.cssText='position:fixed;left:'+x+'px;top:'+y+'px;background:var(--panel);border:1px solid var(--brdhi);border-radius:8px;padding:4px;z-index:2000;min-width:140px;box-shadow:0 4px 16px rgba(0,0,0,.5)';
  const hasFSAPI=!!window.showSaveFilePicker;
  const items=[
    {t:'Save',fn:()=>savePipeline(id)},
    hasFSAPI?{t:'Save As…',fn:()=>savePipelineAs(id)}:null,
    
    !hasFSAPI?{t:'Download JSON',fn:()=>exportPipeline(id)}:null,
    {t:'──────',fn:null},
    {t:'Rename',fn:()=>{
      const tab=document.querySelector('.ptab[data-pid="'+id+'"] .ptab-name');
      if(tab){tab.dispatchEvent(new MouseEvent('dblclick',{bubbles:true}));}
    }},
    {t:'Duplicate',fn:()=>{
      const copy={id:uid('pl'),name:p.name+' (copy)',stack:structuredClone(p.stack),saved:false};
      pipelines.push(copy);switchPipeline(copy.id);savePipelines();
    }},
    {t:'──────',fn:null},
    {t:'Open from File…',fn:()=>importPipelineFile()},
    {t:'──────',fn:null},
    {t:'Close',fn:()=>closePipeline(id),cls:'del'},
  ].filter(Boolean);
  items.forEach(({t,fn,cls})=>{
    if(!fn){const sep=document.createElement('div');sep.style.cssText='height:1px;background:var(--brd);margin:3px 0';menu.appendChild(sep);return;}
    const item=document.createElement('div');
    item.textContent=t;
    item.style.cssText='padding:6px 10px;font-family:var(--mono);font-size:9px;border-radius:5px;cursor:pointer;color:'+(cls==='del'?'var(--red)':'var(--dhi)');
    item.addEventListener('mouseenter',()=>item.style.background='rgba(255,255,255,.06)');
    item.addEventListener('mouseleave',()=>item.style.background='');
    item.addEventListener('click',()=>{menu.remove();fn();});
    menu.appendChild(item);
  });
  document.body.appendChild(menu);
  const dismiss=e=>{if(!menu.contains(e.target)){menu.remove();document.removeEventListener('mousedown',dismiss);}};
  setTimeout(()=>document.addEventListener('mousedown',dismiss),0);
}

// ═══════════════════════════════════════════════════════════
// OPEN PIPELINES PANEL
// ═══════════════════════════════════════════════════════════
let _openPanelEl=null;

function toggleOpenPanel(anchor){
  if(_openPanelEl){_openPanelEl.remove();_openPanelEl=null;return;}
  _openPanelEl=buildOpenPanel();
  positionOpenPanel(anchor);
  document.body.appendChild(_openPanelEl);
  // Dismiss on outside click
  setTimeout(()=>{
    const dismiss=e=>{
      if(_openPanelEl&&!_openPanelEl.contains(e.target)&&!e.target.closest('.ptab-open')){
        _openPanelEl?.remove();_openPanelEl=null;
        document.removeEventListener('mousedown',dismiss);
      }
    };
    document.addEventListener('mousedown',dismiss);
  },0);
}

function positionOpenPanel(anchor){
  if(!_openPanelEl)return;
  const r=anchor.getBoundingClientRect();
  // Position below the anchor, aligned to its left edge
  let left=r.left;
  let top=r.bottom+4;
  // Keep within viewport
  const panelW=300;
  if(left+panelW>window.innerWidth-8)left=window.innerWidth-panelW-8;
  _openPanelEl.style.left=left+'px';
  _openPanelEl.style.top=top+'px';
}

function buildOpenPanel(){
  const panel=document.createElement('div');
  panel.id='open-pipelines-panel';

  // Header
  const hdr=document.createElement('div');hdr.className='opp-hdr';
  const title=document.createElement('span');title.className='opp-title';title.textContent='PIPELINES';
  const closeBtn=document.createElement('span');closeBtn.className='opp-close';closeBtn.textContent='✕';
  closeBtn.addEventListener('click',()=>{_openPanelEl?.remove();_openPanelEl=null;});
  hdr.appendChild(title);hdr.appendChild(closeBtn);
  panel.appendChild(hdr);

  const body=document.createElement('div');body.className='opp-body';
  panel.appendChild(body);

  const openPls=[...pipelines]; // currently open tabs
  const closedPls=loadClosedPipelines(); // recently closed, from separate store

  function timeAgo(ts){
    if(!ts)return'';
    const s=Math.round((Date.now()-ts)/1000);
    if(s<60)return'just now';
    if(s<3600)return Math.floor(s/60)+'m ago';
    if(s<86400)return Math.floor(s/3600)+'h ago';
    return Math.floor(s/86400)+'d ago';
  }

  function mkRow(p,isOpen){
    const row=document.createElement('div');
    row.className='opp-row';
    row.title=isOpen?'Switch to this pipeline':'Reopen this pipeline';

    const name=document.createElement('span');name.className='opp-name';
    name.textContent=(p.fileBacked?'📄 ':'')+( p.name||'Untitled');

    const nodeCount=(p.stack&&p.stack[0]&&p.stack[0].nodes)?p.stack[0].nodes.length:0;
    const meta=document.createElement('span');meta.className='opp-meta';
    meta.textContent=isOpen
      ? nodeCount+' node'+(nodeCount!==1?'s':'')
      : (p.closedAt?timeAgo(p.closedAt):'')+' · '+nodeCount+'n';

    const badge=document.createElement('span');
    badge.className='opp-badge'+(isOpen?' open-badge':p.fileBacked?' file-badge':'');
    badge.textContent=isOpen?'OPEN':p.fileBacked?'FILE':'SAVED';

    row.appendChild(name);row.appendChild(meta);row.appendChild(badge);

    row.addEventListener('click',()=>{
      _openPanelEl?.remove();_openPanelEl=null;
      if(isOpen){
        switchPipeline(p.id);
      } else {
        // Remove from closed store, add to open pipelines
        const remaining=loadClosedPipelines().filter(c=>c.id!==p.id);
        saveClosedPipelines(remaining);
        const restored={...p,saved:true};
        pipelines.push(restored);
        savePipelines();
        switchPipeline(restored.id);
      }
    });

    // Delete from recently-closed (×)
    if(!isOpen){
      const del=document.createElement('span');
      del.textContent='×';del.title='Remove from history';
      del.style.cssText='margin-left:4px;opacity:.4;cursor:pointer;font-size:12px;flex-shrink:0';
      del.addEventListener('mouseenter',()=>del.style.opacity='1');
      del.addEventListener('mouseleave',()=>del.style.opacity='.4');
      del.addEventListener('click',e=>{
        e.stopPropagation();
        saveClosedPipelines(loadClosedPipelines().filter(c=>c.id!==p.id));
        row.remove();
      });
      row.appendChild(del);
    }
    return row;
  }

  function renderSection(label,list,isOpen){
    if(!list.length)return;
    const sec=document.createElement('div');sec.className='opp-section';sec.textContent=label;
    body.appendChild(sec);
    list.forEach(p=>body.appendChild(mkRow(p,isOpen)));
  }

  if(!openPls.length&&!closedPls.length){
    const empty=document.createElement('div');
    empty.style.cssText='padding:20px;text-align:center;font-size:10px;color:var(--dim)';
    empty.textContent='No pipelines yet. Create one with + or open a file.';
    body.appendChild(empty);
  } else {
    renderSection('OPEN',openPls,true);
    renderSection('RECENTLY CLOSED',closedPls,false);
  }

  // Footer
  const footer=document.createElement('div');footer.className='opp-new-row';
  const inp=document.createElement('input');inp.className='opp-new-inp';inp.placeholder='New pipeline name…';inp.type='text';
  const btn=document.createElement('button');btn.className='opp-new-btn';btn.textContent='+ New';
  btn.addEventListener('click',()=>{
    const name=inp.value.trim();
    _openPanelEl?.remove();_openPanelEl=null;
    newPipeline(name||undefined);
  });
  inp.addEventListener('keydown',e=>{if(e.key==='Enter')btn.click();});
  footer.appendChild(inp);footer.appendChild(btn);

  const openFileBtn=document.createElement('button');
  openFileBtn.className='opp-new-btn';
  openFileBtn.title='Open a .ppln pipeline file from disk';
  openFileBtn.textContent='📂 Open File';
  openFileBtn.style.cssText='border-color:var(--cyn);color:var(--cyn)';
  openFileBtn.addEventListener('click',()=>{
    _openPanelEl?.remove();_openPanelEl=null;
    importPipelineFile();
  });
  footer.appendChild(openFileBtn);
  panel.appendChild(footer);

  return panel;
}

// Keep panel closed when switching pipelines
function closeOpenPanel(){if(_openPanelEl){_openPanelEl.remove();_openPanelEl=null;}}

let selNode=null;
let selSkillId=null;
const selLibIds=new Set(); // multi-selected skill ids in library panel
let _lastSelectedId=null;  // anchor for shift-range selection

function updateLibMultiBar(){
  const bar=document.getElementById('lib-multi-bar');
  const count=selLibIds.size;
  bar.classList.toggle('visible',count>1);
  if(count>1)document.getElementById('lib-multi-count').textContent=count+' selected';
}
let selNodes=new Set(); // multi-selection set of node IDs
let conn=null;
let inspCurrentId=null;
let inspEditing=false;
let inspDraft='';
let activeTab='content';
let activeFilterTag=null;
// O(1) skill lookup. Index is lazily rebuilt on first read after invalidation.
// To mutate `skills` or any skill's properties, use one of:
//   addSkill(sk)           — push a new skill
//   mutateSkill(id, fn)    — edit one skill in place
//   upsertSkill(sk)        — replace by id, else push
//   removeSkills(pred)     — delete by predicate (auto-cleans deps refs)
// Direct mutation outside these wrappers re-opens the persistence bug class.
// Sole exception: the startup IIFE at loadPersistedSkills() — loads FROM
// localStorage, so nothing to persist back.
let _skillIndex=null;
const _invSkIdx=()=>{_skillIndex=null;};
const getSk=id=>{
  if(!_skillIndex)_skillIndex=new Map(skills.map(s=>[s.id,s]));
  return _skillIndex.get(id);
};
const nodeSk=n=>getSk(n.type||n.skillId);

// ─── Skill mutation wrappers ─────────────────────────────────────
// See getSk's comment above for usage. Each wrapper invalidates the
// cache and persists to localStorage.

function addSkill(sk){
  skills.push(sk);
  persistSkills();
}

function mutateSkill(id, fn){
  const sk = getSk(id);
  if(!sk) return;
  fn(sk);
  persistSkills();
}

// Replace if id exists, else push. Returns true if added (new), false if updated.
function upsertSkill(sk){
  const i = skills.findIndex(s => s.id === sk.id);
  const wasNew = i < 0;
  if(wasNew) skills.push(sk); else skills[i] = sk;
  persistSkills();
  return wasNew;
}

// Remove all skills matching predicate AND clean dangling deps refs
// in the remaining skills. Single persist at the end.
function removeSkills(pred){
  const removedIds = new Set();
  for(const s of skills) if(pred(s)) removedIds.add(s.id);
  if(!removedIds.size) return;
  for(const s of skills){
    if(removedIds.has(s.id)) continue;
    if(s.deps) s.deps = s.deps.filter(d => !removedIds.has(d));
  }
  skills = skills.filter(s => !removedIds.has(s.id));
  persistSkills();
}

function safeStore(key,val){try{localStorage.setItem(key,typeof val==='string'?val:JSON.stringify(val));}catch(e){}}

// Grid snapping
const SNAP_SIZE=CONFIG.SNAP_SIZE;
let snapEnabled=localStorage.getItem('pb_snap')==='1';
const snap=v=>snapEnabled?Math.round((v-SNAP_SIZE/2)/SNAP_SIZE)*SNAP_SIZE+SNAP_SIZE/2:v;

// ═══════════════════════════════════════════════════════════
// MARKDOWN
// ═══════════════════════════════════════════════════════════
// Renders markdown text as styled HTML for the inspector content panel
function renderMD(text){
  if(!text)return'<p style="color:var(--dim);font-style:italic">No content.</p>';
  // Escape HTML up front so untrusted skill content (imported via Gist, .skill, paste, etc.)
  // can't inject script tags or onerror handlers. Markdown tags below produce their own HTML.
  text=text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  const inl=s=>s.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\*(.+?)\*/g,'<em>$1</em>').replace(/`([^`]+)`/g,'<code>$1</code>');
  let out='',code=false,ul=false,tbl=false,th=true;
  for(const raw of text.split('\n')){
    if(raw.startsWith('```')){if(code){out+='</pre>';code=false;}else{if(ul){out+='</ul>';ul=false;}if(tbl){out+='</table>';tbl=false;}out+='<pre>';code=true;}continue;}
    if(code){out+=raw+'\n';continue;}
    if(raw.startsWith('|')){
      const cells=raw.split('|').slice(1,-1);
      if(cells.every(c=>/^[\s:-]+$/.test(c)))continue;
      if(!tbl){out+='<table>';tbl=true;th=true;}
      const t=th?'th':'td';th=false;
      out+=`<tr>${cells.map(c=>`<${t}>${inl(c.trim())}</${t}>`).join('')}</tr>`;continue;
    }
    if(tbl){out+='</table>';tbl=false;}
    if(ul&&!raw.match(/^[-*] /)){out+='</ul>';ul=false;}
    if(raw.match(/^### /))out+=`<h3>${inl(raw.slice(4))}</h3>`;
    else if(raw.match(/^## /))out+=`<h2>${inl(raw.slice(3))}</h2>`;
    else if(raw.match(/^# /))out+=`<h1>${inl(raw.slice(2))}</h1>`;
    else if(raw.match(/^[-*] /)){if(!ul){out+='<ul>';ul=true;}out+=`<li>${inl(raw.slice(2))}</li>`;}
    else if(raw.trim()==='---')out+='<hr/>';
    else if(!raw.trim())out+='<div style="height:4px"></div>';
    else out+=`<p>${inl(raw)}</p>`;
  }
  if(code)out+='</pre>';if(ul)out+='</ul>';if(tbl)out+='</table>';
  return out;
}

// ═══════════════════════════════════════════════════════════
// TRANSFORM
// ═══════════════════════════════════════════════════════════
const scene=document.getElementById('scene');
const svg=document.getElementById('svg');
const wrap=document.getElementById('canvas-wrap');

// Post-render hook array — plugins (e.g. minimap) push callbacks here
const _postRenderHooks=[];

// Applies the current pan/zoom transform to the canvas scene element
function applyTx(){
  const t=frame().tx;
  scene.style.transform=`translate(${t.x}px,${t.y}px) scale(${t.s})`;
  const gs=SNAP_SIZE*t.s;
  wrap.style.backgroundSize=`${gs}px ${gs}px`;
  // Offset by half a cell so dots sit at snap intersections, not between them
  const half=gs/2;
  wrap.style.backgroundPosition=`${(t.x%gs+half)%gs}px ${(t.y%gs+half)%gs}px`;
  document.getElementById('zoom-lbl').textContent=Math.round(t.s*100)+'%';
  _postRenderHooks.forEach(fn=>fn());
}

// ═══════════════════════════════════════════════════════════
// BREADCRUMB
// ═══════════════════════════════════════════════════════════
function renderBreadcrumb(){
  const bc=document.getElementById('breadcrumb');
  const isRoot=canvasStack.length===1;
  bc.className='root-level'+(isRoot?'':' ');
  if(isRoot){bc.style.display='none';wrap.classList.remove('nested');document.getElementById('depth-badge').style.display='none';return;}
  bc.style.display='flex';
  wrap.classList.add('nested');
  bc.innerHTML='';
  canvasStack.forEach((f,i)=>{
    const item=document.createElement('div');
    item.className='bc-item'+(i===canvasStack.length-1?' active':'');
    item.textContent=f.label;
    if(i<canvasStack.length-1){
      item.addEventListener('click',()=>popToDepth(i));
    }
    bc.appendChild(item);
    if(i<canvasStack.length-1){
      const sep=document.createElement('span');sep.className='bc-sep';sep.textContent='›';bc.appendChild(sep);
    }
  });
  // Exit button
  const exit=document.createElement('button');
  exit.className='bc-exit';exit.textContent='✕ Exit Graph';
  exit.addEventListener('click',()=>popGraph());
  bc.appendChild(exit);
  // Depth badge on canvas
  const badge=document.getElementById('depth-badge');
  const sk=getSk(frame().skillId);
  badge.textContent=`Inside: ${sk?.label||'Graph'}`;
  badge.style.display='block';
}

function popToDepth(depth){
  // Save current canvas state back into skill before popping
  saveCurrentFrameToSkill();
  canvasStack=canvasStack.slice(0,depth+1);
  selNode=null;selSkillId=null;
  rebuildCanvas();
}

// Navigates back up one level from a sub-graph to the parent canvas
function popGraph(){
  saveCurrentFrameToSkill();
  canvasStack.pop();
  selNode=null;selSkillId=null;
  rebuildCanvas();
}

function saveCurrentFrameToSkill(){
  const f=frame();
  if(f.skillId){
    mutateSkill(f.skillId, sk => sk.internalGraph={nodes:structuredClone(f.nodes),edges:structuredClone(f.edges)});
  }
}

// Navigates into a skill's internal sub-graph canvas
function pushGraph(skId){
  saveCurrentFrameToSkill();
  const sk=getSk(skId);if(!sk)return;
  const ig=sk.internalGraph||{nodes:[],edges:[]};

  // Sync graph-input / graph-output boundary nodes to match the parent skill's ports.
  // Find the parent node instance in the current frame to get its actual port list.
  const parentNode=getNodes().find(n=>(n.skillId===skId||n.type===skId));
  const parentInputs =parentNode?.inputs  ||sk.defaultInputs ||[];
  const parentOutputs=parentNode?.outputs ||sk.defaultOutputs||[];

  function syncBoundaryNode(nodes,boundarySkillId,portsToExpose,side){
    // side='outputs' means the boundary node has outputs (graph-input)
    // side='inputs'  means the boundary node has inputs  (graph-output)
    let bn=nodes.find(n=>n.type===boundarySkillId||n.skillId===boundarySkillId);
    if(!bn){
      // Auto-create if not present and there are ports to show
      if(!portsToExpose.length)return;
      bn={id:uid(),type:boundarySkillId,skillId:null,
          x:side==='outputs'?60:560,y:80,values:{},title:'',inputs:[],outputs:[]};
      nodes.push(bn);
    }
    // Re-map ports to match parent
    bn[side]=portsToExpose.map(p=>({id:uid('p'),name:p.name,type:p.type||'Any'}));
  }

  const clonedNodes=structuredClone(ig.nodes);
  const clonedEdges=structuredClone(ig.edges);
  syncBoundaryNode(clonedNodes,'graph-input', parentInputs, 'outputs');
  syncBoundaryNode(clonedNodes,'graph-output',parentOutputs,'inputs');

  canvasStack.push({
    nodes:clonedNodes,
    edges:clonedEdges,
    tx:{x:0,y:0,s:1},
    label:sk.label,
    skillId:skId
  });
  selNode=null;selSkillId=null;
  rebuildCanvas();
}

function rebuildCanvas(){
  scene.querySelectorAll('.node').forEach(n=>n.remove());
  selNode=null;selSkillId=null;selNodes.clear();
  getNodes().forEach(n=>{const el=buildNode(n);if(el)scene.appendChild(el);});
  applyTx();
  renderBreadcrumb();
  updateTopbar();
  renderInspector();
  clearConn();
  // Defer edge rendering to next frame so getBoundingClientRect() sees laid-out nodes
  requestAnimationFrame(()=>renderEdges());
}

// ═══════════════════════════════════════════════════════════
// EDGES
// ═══════════════════════════════════════════════════════════
function portPos(node,side,portId){
  const sr=scene.getBoundingClientRect();
  const t=frame().tx;
  // Try named port first
  if(portId){
    const portEl=document.querySelector(`#nd-${node.id} .port[data-pid="${portId}"]`);
    if(portEl){
      const pr=portEl.getBoundingClientRect();
      return{x:(pr.left+pr.width/2-sr.left)/t.s,y:(pr.top+pr.height/2-sr.top)/t.s};
    }
  }
  // Fall back to first port on that side
  const portEl=document.querySelector(`#nd-${node.id} .port-${side}`);
  if(portEl){
    const pr=portEl.getBoundingClientRect();
    return{x:(pr.left+pr.width/2-sr.left)/t.s,y:(pr.top+pr.height/2-sr.top)/t.s};
  }
  return{x:side==='out'?node.x+215:node.x,y:node.y+40};
}

let pendingPath=null;
function setPending(x1,y1,x2,y2){
  if(!pendingPath){
    pendingPath=document.createElementNS('http://www.w3.org/2000/svg','path');
    pendingPath.setAttribute('fill','none');pendingPath.setAttribute('stroke','#e8a020');
    pendingPath.setAttribute('stroke-width','1.5');pendingPath.setAttribute('stroke-dasharray','6,4');
    pendingPath.setAttribute('stroke-opacity','.9');pendingPath.style.pointerEvents='none';
    svg.appendChild(pendingPath);
  }
  const m=(x1+x2)/2;
  pendingPath.setAttribute('d',`M${x1},${y1} C${m},${y1} ${m},${y2} ${x2},${y2}`);
}
function clearPending(){if(pendingPath){pendingPath.remove();pendingPath=null;}}

// Renders all SVG edges between connected ports on the canvas
function renderEdges(newEdgeId=null){
  svg.querySelectorAll('.e').forEach(e=>e.remove());
  const nodeMap=new Map();getNodes().forEach(n=>nodeMap.set(n.id,n));
  const allEdges=getEdges();
  const animateFlows=allEdges.length<=60;
  allEdges.forEach(edge=>{
    const fn=nodeMap.get(edge.from),tn=nodeMap.get(edge.to);
    if(!fn||!tn)return;
    const f=portPos(fn,'out',edge.fromPort),t=portPos(tn,'in',edge.toPort);
    const sk=nodeSk(fn);const color=cx(fn.color||sk?.color||'dimHi');
    const m=(f.x+t.x)/2;
    const d=`M${f.x},${f.y} C${m},${f.y} ${m},${t.y} ${t.x},${t.y}`;
    const pathLen=Math.hypot(t.x-f.x,t.y-f.y)*1.3; // approx arc length

    const g=document.createElementNS('http://www.w3.org/2000/svg','g');
    g.classList.add('e');g.dataset.eid=edge.id;g.dataset.from=edge.from;g.dataset.to=edge.to;

    // Base stroke
    const vis=document.createElementNS('http://www.w3.org/2000/svg','path');
    vis.setAttribute('d',d);vis.setAttribute('fill','none');vis.setAttribute('stroke',color);
    vis.setAttribute('stroke-width','2');vis.setAttribute('stroke-opacity','.45');
    vis.style.filter=`drop-shadow(0 0 2px ${cxa(color,CONFIG.NODE_BORDER_ALPHA)})`;vis.style.pointerEvents='none';

    // Flow particle
    const flow=document.createElementNS('http://www.w3.org/2000/svg','path');
    flow.setAttribute('d',d);flow.setAttribute('fill','none');
    flow.setAttribute('stroke',color);flow.setAttribute('stroke-width','2.5');
    flow.setAttribute('stroke-linecap','round');flow.style.pointerEvents='none';
    const seg=Math.max(10,Math.min(20,pathLen*0.12));
    const gap=Math.max(pathLen-seg,1);
    flow.style.strokeDasharray=`${seg} ${gap}`;
    flow.style.strokeDashoffset='0';
    flow.style.strokeOpacity='0.85';
    const dur=Math.max(0.8,(pathLen/90)).toFixed(2);
    // Inline keyframe via Web Animations API — no CSS var() needed
    if(animateFlows){
      flow.animate([{strokeDashoffset:'0'},{strokeDashoffset:`${-(pathLen).toFixed(0)}`}],
        {duration:dur*1000,iterations:Infinity,easing:'linear'});
    }

    // New-connection pulse overlay
    const pulse=document.createElementNS('http://www.w3.org/2000/svg','path');
    pulse.setAttribute('d',d);pulse.setAttribute('fill','none');pulse.setAttribute('stroke','#fff');
    pulse.setAttribute('stroke-width','3');pulse.setAttribute('stroke-opacity','0');
    pulse.style.pointerEvents='none';
    if(edge.id===newEdgeId){
      pulse.style.animation='edge-pulse 0.6s ease-out forwards';
    }

    // Hit area
    const hit=document.createElementNS('http://www.w3.org/2000/svg','path');
    hit.setAttribute('d',d);hit.setAttribute('fill','none');hit.setAttribute('stroke','transparent');
    hit.setAttribute('stroke-width','18');hit.classList.add('edge-hit');hit.style.cursor='pointer';
    hit.addEventListener('pointerenter',()=>{vis.setAttribute('stroke-opacity','1');vis.setAttribute('stroke-width','2.5');});
    hit.addEventListener('pointerleave',()=>{vis.setAttribute('stroke-opacity','.45');vis.setAttribute('stroke-width','2');});
    hit.addEventListener('pointerdown',ev=>{
      ev.stopPropagation();
      frame().edges=getEdges().filter(e=>e.id!==edge.id);
      applySelStyle(selNode);renderEdges();
    });

    g.appendChild(vis);g.appendChild(flow);g.appendChild(pulse);g.appendChild(hit);
    svg.appendChild(g);
  });
  // Color connected input ports to match their node color
  // First reset all input ports to default
  scene.querySelectorAll('.port-in').forEach(p=>p.style.borderColor='');
  // Then color ones that have an incoming edge
  const connectedInputs=new Set();
  getEdges().forEach(e=>{if(e.toPort)connectedInputs.add(e.to+'|'+e.toPort);});
  connectedInputs.forEach(key=>{
    const [nid,pid]=key.split('|');
    const n=nodeMap.get(nid);if(!n)return;
    const sk=nodeSk(n);if(!sk)return;
    const color=cx(n.color||sk.color);
    const portEl=scene.querySelector('#nd-'+nid+' .port-in[data-pid="'+pid+'"]');
    if(portEl)portEl.style.borderColor=color;
  });

  // Re-apply downstream preview only in alt mode with single selection
  if(altDown&&selNode&&selNodes.size<=1)highlightDownstream(selNode);
  // Refresh Map warn badges — body composition may have changed with this edge update.
  // Cheap: only Maps get rebuilt, and only when present in the graph.
  getNodes().forEach(n=>{if(nodeSk(n)?.id==='map')rebuildNode(n);});
  _postRenderHooks.forEach(fn=>fn());
}

// Lightweight edge update — recalculates path geometry without tearing down SVG.
// Use during drag/resize for smooth 60fps; renderEdges() handles structural changes.
function updateEdgePaths(){
  const nodeMap=new Map();getNodes().forEach(n=>nodeMap.set(n.id,n));
  const edgeMap=new Map();getEdges().forEach(e=>edgeMap.set(e.id,e));
  svg.querySelectorAll('.e').forEach(g=>{
    const fn=nodeMap.get(g.dataset.from);
    const tn=nodeMap.get(g.dataset.to);
    if(!fn||!tn)return;
    const edge=edgeMap.get(g.dataset.eid);
    if(!edge)return;
    const f=portPos(fn,'out',edge.fromPort),t=portPos(tn,'in',edge.toPort);
    const m=(f.x+t.x)/2;
    const d=`M${f.x},${f.y} C${m},${f.y} ${m},${t.y} ${t.x},${t.y}`;
    g.querySelectorAll('path').forEach(p=>p.setAttribute('d',d));
  });
}

// ═══════════════════════════════════════════════════════════
// NODES
// ═══════════════════════════════════════════════════════════
// Builds the complete DOM element for a canvas node: card, head, ports, body, content drawer
function buildNode(node){
  const sk=nodeSk(node);if(!sk)return null;
  // Per-skill default seeding: FETCH defaults to Proxy (Markdown) — the most useful backend
  // for marketing/CRO content. Only seeds when truly unset; explicit Direct/Proxy (HTML) selections persist.
  if(sk.id==='fetch'){node.values=node.values||{};if(node.values.backend===undefined)node.values.backend='Proxy (Markdown)';}
  // Per-instance overrides: node.color/glyph/shape/title take precedence over sk defaults
  const nodeColor=node.color||sk.color;
  const nodeGlyph=node.glyph||sk.glyph;
  const nodeShape=node.shape||sk.shape;
  const color=cx(nodeColor);
  const el=document.createElement('div');
  const isBoundary=(sk.id==='graph-input'||sk.id==='graph-output');
  el.className='node'+(node.isStart?' start-node':'')+(isBoundary?' boundary-node':'');el.id='nd-'+node.id;
  el.style.transform='translate('+node.x+'px,'+node.y+'px)';
  // border/bg moved to .node-card

  const head=document.createElement('div');head.className='node-head';
  head.style.background=nodeShape==='default'?color+'1a':'transparent';
  head.style.borderBottomColor=color+'33';
  const displayLabel=node.title||sk.label;
  const glyphEl=document.createElement('span');glyphEl.className='node-glyph';glyphEl.style.color=color;glyphEl.textContent=nodeGlyph;
  const labelEl=document.createElement('span');labelEl.className='node-label';labelEl.style.color=color;labelEl.textContent=displayLabel;
  labelEl.title=displayLabel;
  // Badge showing internal node count for pipeline-type nodes
  const igNodes=(sk.internalGraph&&sk.internalGraph.nodes)||[];
  const igCount=igNodes.filter(n=>n.type!=='graph-input'&&n.type!=='graph-output'&&n.skillId!=='graph-input'&&n.skillId!=='graph-output').length;
  let badgeEl=null;
  if(igCount>0){
    badgeEl=document.createElement('span');
    badgeEl.style.cssText='font-family:var(--mono);font-size:7px;color:var(--dim);background:var(--surf);border:1px solid var(--brd);border-radius:3px;padding:1px 4px;flex-shrink:0;line-height:1';
    badgeEl.textContent=igCount+'n';badgeEl.title=igCount+' internal node'+(igCount!==1?'s':'');
  }
  let _labelLastClick=0;
  labelEl.addEventListener('pointerdown',e=>{
    const now=Date.now();
    if(now-_labelLastClick<CONFIG.NODE_LABEL_DBLCLICK_MS){
      // Double-click detected — open inline rename
      e.stopPropagation();e.preventDefault();
      _labelLastClick=0;
      const inp=document.createElement('input');
      inp.type='text';inp.value=node.title||sk.label;
      inp.style.cssText='font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;background:transparent;border:none;border-bottom:1px solid var(--acc);color:'+color+';outline:none;width:100%;padding:0';
      labelEl.replaceWith(inp);inp.focus();inp.select();
      const commit=()=>{
        const val=inp.value.trim();
        node.title=val||'';
        rebuildNode(node);
        if(selNode===node.id)renderInspector();
        markPipelineDirty(activePipelineId);
      };
      inp.addEventListener('blur',commit);
      inp.addEventListener('keydown',ev=>{
        if(ev.key==='Enter'){ev.preventDefault();commit();}
        if(ev.key==='Escape'){inp.value=node.title||sk.label;commit();}
      });
    }else{
      _labelLastClick=now;
    }
  });
  head.appendChild(glyphEl);head.appendChild(labelEl);if(badgeEl)head.appendChild(badgeEl);
  if(node.isStart){const b=document.createElement('span');b.className='start-badge';b.textContent='START';head.appendChild(b);}
  if(!sk.isBuiltin){const t=document.createElement('span');t.className='node-tag';t.textContent='SKILL';head.appendChild(t);}
  // Divergence badge: a small amber dot meaning "this node's content is customized here,
  // not in the library." Toggled live by updateDivergeBadge() after an in-drawer Apply.
  const divergeDot=document.createElement('span');divergeDot.className='node-diverge-dot';
  divergeDot.title='Edited here \u2014 differs from the library skill';
  head.appendChild(divergeDot);
  function updateDivergeBadge(){divergeDot.classList.toggle('show',isNodeDiverged(node,sk));}
  updateDivergeBadge();
  // Nested-Router warning badge: a small amber \u26a0 that shows on Map nodes whose body
  // contains one or more Router nodes (potential call-count blow-up). Coexists with the
  // divergence dot \u2014 different meanings, side-by-side.
  const warnBadge=document.createElement('span');warnBadge.className='node-warn-badge';
  warnBadge.textContent='\u26a0';
  head.appendChild(warnBadge);
  function updateWarnBadge(){
    if(sk.id!=='map'){warnBadge.classList.remove('show');return;}
    const routers=routersInMapBody(node.id,getNodes(),getEdges());
    if(routers.length===0){warnBadge.classList.remove('show');return;}
    warnBadge.classList.add('show');
    warnBadge.title='Body contains '+routers.length+' Router'+(routers.length>1?'s':'')+
      ' \u2014 each Map iteration could trigger nested loops. See Fields tab for projected call count.';
  }
  updateWarnBadge();
  // Wrap everything in a card div for visual separation from drawer
  const card=document.createElement('div');card.className='node-card';
  card.style.borderStyle=nodeShape==='dashed'?'dashed':'solid';
  card.style.borderColor=cxa(color,CONFIG.NODE_BORDER_ALPHA);
  if(nodeShape==='ghost')card.style.background='oklch(0.15 0.01 250 / 0.8)';
  card.appendChild(head);
  el.appendChild(card);

  // Resize handles — 8 directions: 4 edges (e/w/n/s) + 4 corners (ne/nw/se/sw).
  // Width persists via el.style.width (shares with drawer); height applies to card only,
  // leaving the drawer's own drag bar untouched. W/N/NW/NE/SW edges shift node.x/y so the
  // opposite edge stays put. Corners snap on both axes (last-called axis's guide is shown).
  const RESIZE_SPECS={
    e: {xDir:+1,yDir: 0,movesX:false,movesY:false,cls:'node-side-resize right'},
    w: {xDir:-1,yDir: 0,movesX:true, movesY:false,cls:'node-side-resize left'},
    s: {xDir: 0,yDir:+1,movesX:false,movesY:false,cls:'node-bot-resize'},
    n: {xDir: 0,yDir:-1,movesX:false,movesY:true, cls:'node-top-resize'},
    ne:{xDir:+1,yDir:-1,movesX:false,movesY:true, cls:'node-corner-resize ne'},
    nw:{xDir:-1,yDir:-1,movesX:true, movesY:true, cls:'node-corner-resize nw'},
    se:{xDir:+1,yDir:+1,movesX:false,movesY:false,cls:'node-corner-resize se'},
    sw:{xDir:-1,yDir:+1,movesX:true, movesY:false,cls:'node-corner-resize sw'}
  };
  function addResize(side){
    const spec=RESIZE_SPECS[side];
    const handle=document.createElement('div');handle.className=spec.cls;
    handle.addEventListener('pointerdown',e=>{
      e.stopPropagation();e.preventDefault();
      const startX=e.clientX,startY=e.clientY;
      const startW=el.offsetWidth,startH=card.offsetHeight;
      const startLeft=node.x,startTop=node.y;
      const s=frame().tx?.s||1;
      // Capture default-state natural height: with has-h removed (ndesc clamps to 2 lines)
      // and explicit height cleared, offsetHeight = head + ports + clamped body + padding.
      // Used as the floor so the card can't shrink past what its content needs.
      const savedHadH=card.classList.contains('has-h');
      const savedHeight=card.style.height;
      card.classList.remove('has-h');card.style.height='';
      const naturalH=card.offsetHeight;
      if(savedHadH)card.classList.add('has-h');
      card.style.height=savedHeight;
      const onMove=ev=>{
        const dx=(ev.clientX-startX)/s,dy=(ev.clientY-startY)/s;
        const minH=Math.max(CONFIG.MIN_NODE_HEIGHT,naturalH);
        if(spec.xDir){
          const w=Math.max(CONFIG.MIN_NODE_WIDTH,startW+spec.xDir*dx);
          el.style.width=w+'px';node._w=w;
          if(spec.movesX)node.x=startLeft+(startW-w);
        }
        if(spec.yDir){
          const h=Math.max(minH,startH+spec.yDir*dy);
          card.style.height=h+'px';node._h=h;card.classList.add('has-h');
          if(spec.movesY)node.y=startTop+(startH-h);
        }
        if(spec.movesX||spec.movesY)el.style.transform='translate('+node.x+'px,'+node.y+'px)';
        // Snap to neighbor edges. For corners (both axes snap), clear once and pass skipClear
        // so X and Y guides can both render within the same tick.
        const isCorner=spec.xDir&&spec.yDir;
        if(isCorner)clearAlignGuides();
        if(spec.xDir){
          const snapDx=computeResizeAlignSnap(node.id,spec.xDir>0?'right':'left',isCorner);
          if(snapDx){
            const w2=node._w+(spec.xDir>0?snapDx:-snapDx);el.style.width=w2+'px';node._w=w2;
            if(spec.movesX)node.x+=snapDx;
          }
        }
        if(spec.yDir){
          const snapDy=computeResizeAlignSnap(node.id,spec.yDir>0?'bottom':'top',isCorner);
          if(snapDy){
            const h2=node._h+(spec.yDir>0?snapDy:-snapDy);
            if(h2>=minH){  // skip snap if it would push below natural-min
              card.style.height=h2+'px';node._h=h2;
              if(spec.movesY)node.y+=snapDy;
            }
          }
        }
        if(spec.movesX||spec.movesY)el.style.transform='translate('+node.x+'px,'+node.y+'px)';
        updateEdgePaths();
      };
      const onUp=()=>{
        window.removeEventListener('pointermove',onMove);
        window.removeEventListener('pointerup',onUp);
        clearAlignGuides();
        renderEdges(); // full rebuild on release to sync flow animations
        markPipelineDirty(activePipelineId);
      };
      window.addEventListener('pointermove',onMove);
      window.addEventListener('pointerup',onUp);
    });
    card.appendChild(handle);
  }
  ['e','w','n','s','ne','nw','se','sw'].forEach(addResize);
  if(node._w)el.style.width=node._w+'px';
  if(node._h){card.style.height=node._h+'px';card.classList.add('has-h');}

  // ── NAMED PORTS (moved up, right after head) ──
  if(!node.inputs)node.inputs=[];
  if(!node.outputs)node.outputs=[];

  const portsWrap=document.createElement('div');portsWrap.className='node-ports';
  const inCol=document.createElement('div');inCol.className='node-ports-col port-in-col';
  node.inputs.forEach(port=>{
    const row=document.createElement('div');row.className='port-row in-row';
    const dot=mkNamedPort('in',node,color,port);
    // Input ports start uncolored; renderEdges() colors connected ones
    const lbl=document.createElement('span');lbl.className='port-lbl';lbl.textContent=port.name||'in';
    row.appendChild(dot);row.appendChild(lbl);inCol.appendChild(row);
  });
  const outCol=document.createElement('div');outCol.className='node-ports-col port-out-col';
  node.outputs.forEach(port=>{
    const row=document.createElement('div');row.className='port-row out-row';
    const dot=mkNamedPort('out',node,color,port);
    // Color output sockets with node color (filled — via CSS .port-out)
    dot.style.background=color;
    const lbl=document.createElement('span');lbl.className='port-lbl out-lbl';lbl.textContent=port.name||'out';
    row.appendChild(dot);row.appendChild(lbl);outCol.appendChild(row);
  });
  portsWrap.appendChild(inCol);portsWrap.appendChild(outCol);
  if(node.inputs.length||node.outputs.length)card.appendChild(portsWrap);

  // ── COMPACT BODY (short summary — always visible) ──
  const body=document.createElement('div');body.className='node-body';
  if(sk.id==='code'){
    const langColors={Python:'oklch(0.6 0.18 250)',JavaScript:'oklch(0.75 0.16 70)',TypeScript:'oklch(0.7 0.14 250)',Bash:'oklch(0.72 0.17 165)',SQL:'oklch(0.68 0.16 300)',JSON:'oklch(0.72 0.17 55)',YAML:'oklch(0.72 0.17 55)',HTML:'oklch(0.65 0.2 25)',CSS:'oklch(0.68 0.16 300)',Ruby:'oklch(0.65 0.2 25)',Go:'oklch(0.76 0.12 200)',Rust:'oklch(0.72 0.17 55)'};
    const lang=node.values?.lang||'Code';
    const lc=langColors[lang]||'#22d3ee';
    const tagEl=document.createElement('span');tagEl.className='node-lang-tag';tagEl.style.background=lc;tagEl.textContent=lang;
    body.appendChild(tagEl);
  }else if(sk.id==='graph-input'||sk.id==='graph-output'){
    const isIn=sk.id==='graph-input';
    const desc=document.createElement('div');desc.className='ndesc';
    desc.textContent=isIn?'Inputs → graph':'Graph → outputs';
    body.appendChild(desc);
  }else{
    const d=document.createElement('div');d.className='ndesc';
    d.textContent=sk.desc||'';
    body.appendChild(d);
  }

  // Compute body-prominent instructions editor (Step 5). The central logic primitive's
  // primary authored content surfaces directly on the node body, beneath the description.
  // Single-node special case — not generic — per HANDOVER spec.
  if(sk.id==='compute'){
    const insTa=document.createElement('textarea');
    insTa.className='node-instructions-editor';
    insTa.spellcheck=false;
    insTa.placeholder='What should this node do with its input?';
    insTa.value=node.values?.instructions||'';
    insTa.rows=4;
    insTa.addEventListener('input',()=>{
      node.values=node.values||{};
      node.values.instructions=insTa.value;
      markPipelineDirty(activePipelineId);
    });
    insTa.addEventListener('change',()=>{
      // Mirror to inspector on blur (matches input-family drawer sync pattern).
      if(selNode===node.id)renderInspector();
    });
    // Stop pointer events from bubbling to canvas drag handlers.
    insTa.addEventListener('pointerdown',e=>e.stopPropagation());
    body.appendChild(insTa);
  }
  card.appendChild(body);

  // ── EXPANDABLE CONTENT DRAWER (replicates insp-content panel) ──
  // FAMILY SEAM: logic family carries behavior in rawContent (compute/router/context/Map);
  // input family (text/file/fetch/code) carries captured data in values.* with empty
  // rawContent. Using rawContent (not a hardcoded id list) lets Map inherit the logic path.
  const isLogicFamily=!!(sk.rawContent&&sk.rawContent.trim());
  // For input nodes, the primary captured-content value key: 'code' for CODE, else 'content'
  // (text/file/fetch). Honest convention keyed on skill id, not a value-presence check.
  const contentKey=sk.id==='code'?'code':'content';
  const drawerContent=isLogicFamily?nodeRawContent(node,sk):(node.values?.[contentKey]||'');
  const hasContent=!!(drawerContent.trim()||(sk.fields&&sk.fields.length));
  if(hasContent){
    const isOpen=!!node._drawerOpen;
    const toggle=document.createElement('div');toggle.className='node-drawer-toggle';
    toggle.innerHTML=(isOpen?'▾':'▸')+' <span>CONTENT</span>';

    const drawer=document.createElement('div');drawer.className='node-drawer'+(isOpen?'':' closed');

    // Hard family branch: logic family gets the Edit/Apply/Merge toggle model (skill content
    // is sensitive — protect against fat-fingers, require an explicit commit). Input family
    // gets a direct inline-edit textarea (captured content edits in the inspector are already
    // inline; the drawer matches for consistency).
    const cbar=document.createElement('div');cbar.className='node-content-bar';
    const cblbl=document.createElement('span');cblbl.className='nc-lbl';cblbl.textContent=isLogicFamily?'SKILL CONTENT':drawerLabelFor(sk);
    cbar.appendChild(cblbl);
    const rendered=document.createElement('div');rendered.className='node-rendered';
    const editorWrap=document.createElement('div');editorWrap.className='node-editor';
    const textarea=document.createElement('textarea');textarea.spellcheck=false;textarea.value=drawerContent;
    editorWrap.appendChild(textarea);

    if(isLogicFamily){
      // ── Logic family: View / Edit / Cancel / Apply / Merge ──
      const viewBtn=document.createElement('button');viewBtn.className='nc-btn active';viewBtn.textContent='View';
      const editBtn=document.createElement('button');editBtn.className='nc-btn';editBtn.textContent='Edit';
      const cancelBtn=document.createElement('button');cancelBtn.className='nc-btn hidden';cancelBtn.textContent='Cancel';cancelBtn.style.color='var(--dim)';
      const applyBtn=document.createElement('button');applyBtn.className='nc-btn hidden';applyBtn.textContent='Apply';applyBtn.style.color='var(--grn)';
      const promoteBtn=document.createElement('button');promoteBtn.className='nc-btn';promoteBtn.textContent='Merge';
      cbar.appendChild(viewBtn);cbar.appendChild(editBtn);cbar.appendChild(cancelBtn);cbar.appendChild(applyBtn);cbar.appendChild(promoteBtn);
      // Merge ghosted unless this instance diverges from the library.
      const refreshPromote=()=>{
        const diverged=isNodeDiverged(node,sk);
        promoteBtn.disabled=!diverged;
        promoteBtn.style.opacity=diverged?'':'0.4';
        promoteBtn.style.cursor=diverged?'':'default';
      };
      refreshPromote();

      rendered.innerHTML=renderMD(drawerContent);

      const readContent=()=>nodeRawContent(node,sk);
      function setNodeContentMode(mode){
        if(mode==='edit'){
          rendered.style.display='none';editorWrap.style.display='flex';
          editBtn.classList.add('active');viewBtn.classList.remove('active');
          cancelBtn.classList.remove('hidden');applyBtn.classList.remove('hidden');
          textarea.value=readContent();
          textarea.focus();
        }else{
          rendered.style.display='';editorWrap.style.display='none';
          viewBtn.classList.add('active');editBtn.classList.remove('active');
          cancelBtn.classList.add('hidden');applyBtn.classList.add('hidden');
          rendered.innerHTML=renderMD(readContent());
        }
      }
      viewBtn.addEventListener('click',e=>{e.stopPropagation();setNodeContentMode('view');});
      editBtn.addEventListener('click',e=>{e.stopPropagation();setNodeContentMode('edit');});
      cancelBtn.addEventListener('click',e=>{e.stopPropagation();setNodeContentMode('view');});
      applyBtn.addEventListener('click',e=>{
        e.stopPropagation();
        node.values=node.values||{};
        node.values._skillContent=textarea.value;
        markPipelineDirty(activePipelineId);
        setNodeContentMode('view');
        refreshPromote();
        updateDivergeBadge();
      });
      promoteBtn.addEventListener('click',e=>{
        e.stopPropagation();
        if(promoteBtn.disabled)return;
        inspDraft=nodeRawContent(node,sk);
        inspCurrentId=sk.id;
        openBranchOverlay(sk);
      });
      // Double-click inside the drawer = Edit.
      drawer.addEventListener('dblclick',e=>{
        if(e.target.closest('.node-content-bar,.node-drawer-drag'))return;
        e.stopPropagation();
        if(rendered.style.display!=='none')setNodeContentMode('edit');
      });
    }else{
      // ── Input family: direct editable textarea, no toggle, no Merge ──
      // Edits autosave on input (source of truth always current); inspector syncs on blur.
      // Binary content (data: URLs) shows a read-only preview instead — editing base64 corrupts it.
      const isBinary=drawerContent.startsWith('data:');
      if(isBinary){
        rendered.innerHTML='<div style="font-family:var(--mono);font-size:10px;color:var(--dim)">[binary content \u2014 '+Math.round(drawerContent.length/1024)+'KB data URL]</div>';
        editorWrap.style.display='none';
      }else{
        // Hide the rendered preview entirely — the textarea IS the view, always editable.
        // .node-editor is display:none by CSS default; reveal it (logic-family path only
        // un-hides it on Edit, but input-family is always-editing, so flex it on build).
        rendered.style.display='none';
        editorWrap.style.display='flex';
        textarea.addEventListener('input',()=>{
          node.values=node.values||{};
          node.values[contentKey]=textarea.value;
          markPipelineDirty(activePipelineId);
        });
        textarea.addEventListener('change',()=>{
          if(selNode===node.id)renderInspector(); // mirror to inspector on blur
        });
        // Stop pointer events from bubbling to canvas drag handlers.
        textarea.addEventListener('pointerdown',e=>e.stopPropagation());
      }
    }


    // Drawer bottom drag bar for vertical resize
    const dragBar=document.createElement('div');dragBar.className='node-drawer-drag';
    dragBar.addEventListener('pointerdown',e=>{
      e.stopPropagation();e.preventDefault();
      const startY=e.clientY;
      const rdEl=drawer.querySelector('.node-rendered');
      const edEl=drawer.querySelector('.node-editor textarea');
      const startH=rdEl?rdEl.offsetHeight:(edEl?edEl.offsetHeight:160);
      const s=frame().tx?.s||1;
      const onMove=ev=>{
        const dh=Math.max(CONFIG.MIN_DRAWER_HEIGHT,startH+(ev.clientY-startY)/s);
        if(rdEl)rdEl.style.maxHeight=dh+'px';
        if(edEl)edEl.style.height=dh+'px';
        node._drawerH=dh;
        const snapDy=computeResizeAlignSnap(node.id,'bottom');
        if(snapDy){
          const adjH=dh+snapDy;
          if(adjH>=CONFIG.MIN_DRAWER_HEIGHT){
            if(rdEl)rdEl.style.maxHeight=adjH+'px';
            if(edEl)edEl.style.height=adjH+'px';
            node._drawerH=adjH;
          }
        }
        updateEdgePaths();
      };
      const onUp=()=>{
        window.removeEventListener('pointermove',onMove);
        window.removeEventListener('pointerup',onUp);
        clearAlignGuides();
        renderEdges(); // full rebuild on release
        markPipelineDirty(activePipelineId);
      };
      window.addEventListener('pointermove',onMove);
      window.addEventListener('pointerup',onUp);
    });

    drawer.appendChild(cbar);
    drawer.appendChild(rendered);
    drawer.appendChild(editorWrap);
    drawer.appendChild(dragBar);

    toggle.addEventListener('click',e=>{
      e.stopPropagation();
      node._drawerOpen=!node._drawerOpen;
      if(node._drawerOpen){
        drawer.classList.remove('closed');
        toggle.innerHTML='\u25be <span>CONTENT</span>';
        // Apply saved drawer height
        if(node._drawerH){
          const rd=drawer.querySelector('.node-rendered');
          const ed=drawer.querySelector('.node-editor textarea');
          if(rd)rd.style.maxHeight=node._drawerH+'px';
          if(ed)ed.style.height=node._drawerH+'px';
        }
      }else{
        drawer.classList.add('closed');
        toggle.innerHTML='▸ <span>CONTENT</span>';
        setNodeContentMode('view'); // reset to view on close
      }
      renderEdges();markPipelineDirty(activePipelineId);
    });
    card.appendChild(toggle);
    el.appendChild(drawer);
    // Apply saved drawer height on initial build
    if(isOpen&&node._drawerH){
      const rd=drawer.querySelector('.node-rendered');
      const ed=drawer.querySelector('.node-editor textarea');
      if(rd)rd.style.maxHeight=node._drawerH+'px';
      if(ed)ed.style.height=node._drawerH+'px';
    }
  }

  // ── DRAG: whole node, but stop on interactive children and ports ──
  el.style.cursor='grab';
  let dragging=false,didDrag=false,sx,sy;
  let origins={};
  el.addEventListener('pointerdown',e=>{
    if(e.button!==0)return;
    if(e.target.closest('.port,.port-row,.node-drawer-toggle,.node-drawer,.node-side-resize,.node-top-resize,.node-bot-resize,.node-corner-resize,input,textarea,select,button'))return;
    e.stopPropagation();
    dragging=true;didDrag=false;sx=e.clientX;sy=e.clientY;
    el.style.cursor='grabbing';
    el.setPointerCapture(e.pointerId);
    // Handle all selection here in pointerdown — correct hit-testing, no sibling bleed
    if(e.altKey){
      // Alt: select downstream
      if(!e.shiftKey)selNodes.clear();
      const ds=getDownstream(node.id);
      selNodes.add(node.id);ds.forEach(id=>selNodes.add(id));
      selNode=node.id;
      const n2=getNodes().find(x=>x.id===node.id);
      selSkillId=n2?(n2.type||n2.skillId):null;
      applySelStyle(selNode);updateTopbar();renderInspector();
    } else if(e.shiftKey){
      // Shift: toggle this node into/out of selection
      selectNode(node.id,true);
    } else if(selNodes.has(node.id)&&selNodes.size>1){
      // Node already part of a group — preserve group for drag, update primary
      selNode=node.id;
      const n2=getNodes().find(x=>x.id===node.id);
      selSkillId=n2?(n2.type||n2.skillId):null;
      applySelStyle(selNode);updateTopbar();renderInspector();
    } else {
      // Plain click on unselected node — single select
      selectNode(node.id,false);
    }
    // Capture start positions for all currently-selected nodes
    origins={};
    const _originMap=new Map(getNodes().map(n=>[n.id,n]));
    selNodes.forEach(nid=>{
      const n=_originMap.get(nid);
      if(n)origins[nid]={ox:n.x,oy:n.y};
    });
  });
  el.addEventListener('pointermove',e=>{
    if(!dragging)return;
    const dx=e.clientX-sx,dy=e.clientY-sy;
    if(!didDrag&&Math.hypot(dx,dy)<4)return; // dead zone
    didDrag=true;
    const t=frame().tx;
    const sdx=dx/t.s,sdy=dy/t.s;
    const nodeMap=new Map(getNodes().map(n=>[n.id,n]));
    // First pass: set raw snapped positions
    selNodes.forEach(nid=>{
      const n=nodeMap.get(nid);
      const o=origins[nid];
      if(!n||!o)return;
      n.x=snap(o.ox+sdx);n.y=snap(o.oy+sdy);
      const nel=document.getElementById('nd-'+nid);
      if(nel){nel.style.transform='translate('+n.x+'px,'+n.y+'px)';}
    });
    // Alignment guides: compute snap for primary node, apply offset to all selected
    const align=computeAlignSnap(node.id,getNodes());
    if(align.dx||align.dy){
      selNodes.forEach(nid=>{
        const n=nodeMap.get(nid);if(!n)return;
        n.x+=align.dx;n.y+=align.dy;
        const nel=document.getElementById('nd-'+nid);
        if(nel){nel.style.transform='translate('+n.x+'px,'+n.y+'px)';}
      });
    }
    updateEdgePaths();
  });
  el.addEventListener('pointerenter',()=>{
    if(altDown){highlightDownstream(node.id);el.style.cursor='cell';}
  });
  el.addEventListener('pointerleave',()=>{
    if(altDown){
      // Restore to current selection state
      if(selNodes.size<=1)applySelStyle(selNode);
      else highlightDownstream(null);
      el.style.cursor='';
    }
  });
  el.addEventListener('pointerup',e=>{
    if(dragging){dragging=false;el.style.cursor=altDown?'cell':'grab';el.releasePointerCapture(e.pointerId);if(didDrag){clearAlignGuides();renderEdges();}}
  });
  // click handler retained only to stop propagation (selection is in pointerdown)
  el.addEventListener('click',e=>{
    if(e.target.closest('.port,.port-row,.node-drawer-toggle,.node-drawer,.node-side-resize,.node-top-resize,.node-bot-resize,.node-corner-resize,input,textarea,select,button'))return;
    e.stopPropagation();
  });

  // Double-click → open internal graph for skill nodes
  // Guard: don't open if this node's skill IS the current frame's skill (would recurse infinitely)
  el.addEventListener('dblclick',e=>{
    if(e.target.closest('.port,.port-row,.node-drawer-toggle,.node-drawer,.node-side-resize,.node-top-resize,.node-bot-resize,.node-corner-resize,.node-label,input,textarea,select,button'))return;
    e.stopPropagation();
    const targetSkId=sk.id||node.skillId;
    if(!sk.isBuiltin&&targetSkId!==frame().skillId)pushGraph(targetSkId);
  });

  // Right-click context menu
  el.addEventListener('contextmenu',e=>{
    e.preventDefault();e.stopPropagation();
    // If this node is already part of a multi-selection, keep the group selected.
    // Only call selectNode (which resets to single) if it's not already selected.
    if(!selNodes.has(node.id)){
      selectNode(node.id);
    } else {
      // Keep selection, but set ctxNode target for menu actions
      selNode=node.id;
    }
    openCtxMenu(e.clientX,e.clientY,node);
  });

  return el;
}

// Named port — attached to a specific input/output port object
// Creates a port DOM element (the draggable connection circle) for a node
function mkNamedPort(side,node,color,portObj){
  const p=document.createElement('div');
  p.className='port port-'+side;
  p.dataset.side=side;p.dataset.nid=node.id;p.dataset.pid=portObj.id;
  p.innerHTML='<div class="port-dot"></div>';
  p.addEventListener('pointerenter',()=>{
    if(side==='in'&&conn&&conn.fromId!==node.id)p.classList.add('ready');
    else if(!p.classList.contains('hot'))p.style.borderColor=color;
  });
  p.addEventListener('pointerleave',()=>{
    p.classList.remove('ready');
    if(!p.classList.contains('hot')){
      // Preserve color if this input port is connected
      if(side==='in'&&getEdges().find(e=>e.to===node.id&&e.toPort===portObj.id)){
        const sk=nodeSk(node);
        p.style.borderColor=cx(node.color||(sk&&sk.color)||'dimHi');
      }else{
        p.style.borderColor='';
      }
    }
  });
  function completeNamedConn(e){
    if(side==='in'){
      e.stopPropagation();
      if(!conn)return;
      const fromId=conn.fromId;
      if(fromId!==node.id&&!getEdges().find(ed=>ed.from===fromId&&ed.to===node.id&&ed.fromPort===conn.fromPort&&ed.toPort===portObj.id)){
        // Block connection if it would create a cycle
        if(wouldCycle(frame().nodes,frame().edges,fromId,node.id)){clearConn();renderEdges();return;}
        const eid=uid('e');
        pushHistory();frame().edges.push({id:eid,from:fromId,to:node.id,fromPort:conn.fromPort,toPort:portObj.id});markPipelineDirty(activePipelineId);
        clearConn();renderEdges(eid);
      }else{clearConn();}
    }
  }
  p.addEventListener('pointerdown',e=>{
    e.stopPropagation();if(e.button!==0)return;
    if(side==='out'){
      clearConn();
      const sr=scene.getBoundingClientRect();
      const pr=p.getBoundingClientRect();
      const t=frame().tx;
      conn={fromId:node.id,fromPort:portObj.id,
        ox:(pr.left+pr.width/2-sr.left)/t.s,
        oy:(pr.top+pr.height/2-sr.top)/t.s};
      p.classList.add('hot');
      scene.querySelectorAll('.port-in').forEach(ip=>{if(ip.dataset.nid!==node.id)ip.classList.add('ready');});
      document.getElementById('conn-hint').style.display='block';
    }else{
      completeNamedConn(e);
    }
  });
  // Also complete on pointerup so drag-and-release works
  p.addEventListener('pointerup',e=>{if(e.button!==0)return;completeNamedConn(e);});
  return p;
}

// Legacy single port (used when no named ports defined)

function clearConn(){
  conn=null;clearPending();
  document.querySelectorAll('.port').forEach(p=>{p.classList.remove('hot','ready');p.style.borderColor='';});
  document.getElementById('conn-hint').style.display='none';
}

// ═══════════════════════════════════════════════════════════
// UNDO / REDO
// ═══════════════════════════════════════════════════════════
const HISTORY_MAX = CONFIG.UNDO_MAX;
let undoStack = [];  // array of {nodes, edges} snapshots
let redoStack = [];

function snapshotState() {
  return JSON.stringify({nodes: frame().nodes, edges: frame().edges});
}

// Pushes current canvas state onto the undo stack for undo/redo
function pushHistory() {
  undoStack.push(snapshotState());
  if (undoStack.length > HISTORY_MAX) undoStack.shift();
  redoStack = []; // new action clears redo
}

function applySnapshot(snapshot) {
  const s = JSON.parse(snapshot);
  frame().nodes = s.nodes;
  frame().edges = s.edges;
  selNode = null; selSkillId = null; selNodes.clear();
  scene.querySelectorAll('.node').forEach(n => n.remove());
  frame().nodes.forEach(n => { const el = buildNode(n); if (el) scene.appendChild(el); });
  requestAnimationFrame(() => renderEdges());
  clearConn(); updateTopbar(); renderInspector();
  markPipelineDirty(activePipelineId);
}

// Restores the previous canvas state from the undo stack
function undoHistory() {
  if (!undoStack.length) return;
  redoStack.push(snapshotState());
  applySnapshot(undoStack.pop());
}

// Re-applies a previously undone canvas state from the redo stack
function redoHistory() {
  if (!redoStack.length) return;
  undoStack.push(snapshotState());
  applySnapshot(redoStack.pop());
}

// ═══════════════════════════════════════════════════════════
// DUPLICATE
// ═══════════════════════════════════════════════════════════
function duplicateSelNodes() {
  if (!selNodes.size) return;
  pushHistory();
  const OFFSET = 40;
  const newIds = [];
  const idMap = {};   // oldNodeId -> newNodeId
  const portMap = {}; // oldPortId -> newPortId (built as ports get re-ID'd below)

  selNodes.forEach(oldId => {
    const orig = getNodes().find(n => n.id === oldId);
    if (!orig) return;
    const newId = uid();
    idMap[oldId] = newId;
    const copy = structuredClone(orig);
    copy.id = newId;
    copy.x = snap(orig.x + OFFSET);
    copy.y = snap(orig.y + OFFSET);
    // Re-ID ports so they're unique. Capture the old→new mapping so edges
    // between duplicated nodes can be re-pointed to the new port IDs —
    // otherwise multi-port nodes (Context, Router) silently collapse to
    // first-port-only via portPos()'s side fallback.
    copy.inputs  = (copy.inputs  || []).map(p => { const np = uid('p'); portMap[p.id] = np; return {...p, id: np}; });
    copy.outputs = (copy.outputs || []).map(p => { const np = uid('p'); portMap[p.id] = np; return {...p, id: np}; });
    copy.isStart = false;
    frame().nodes.push(copy);
    const el = buildNode(copy);
    if (el) scene.appendChild(el);
    newIds.push(newId);
  });

  // Duplicate edges between selected nodes — remap port IDs through portMap.
  // Fallback to original port ID covers legacy pre-port edges and any port
  // that wasn't captured (shouldn't happen, but defensive).
  getEdges().forEach(e => {
    if (idMap[e.from] && idMap[e.to]) {
      frame().edges.push({id: uid('e'), from: idMap[e.from], to: idMap[e.to],
        fromPort: portMap[e.fromPort] || e.fromPort,
        toPort:   portMap[e.toPort]   || e.toPort});
    }
  });

  // Switch selection to duplicates
  selNodes.clear();
  newIds.forEach(id => selNodes.add(id));
  selNode = newIds[newIds.length - 1] || null;
  applySelStyle(selNode);
  requestAnimationFrame(() => renderEdges());
  markPipelineDirty(activePipelineId);
  updateTopbar();
}

function placeNode(skId){trackRecent(skId);
  const t=frame().tx;
  const rect=wrap.getBoundingClientRect();
  const x=(rect.width/2-t.x)/t.s+(Math.random()-.5)*80;
  const y=(rect.height/2-t.y)/t.s+(Math.random()-.5)*60;
  placeNodeAt(skId,x,y);
}

function placeNodeAt(skId, sceneX, sceneY){
  const sk=getSk(skId);if(!sk)return;
  const id=uid();
  // Deep-copy defaults so each node instance is independent
  const inputs=(sk.defaultInputs||[]).map(p=>({...p,id:uid('p')}));
  const outputs=(sk.defaultOutputs||[]).map(p=>({...p,id:uid('p')}));
  const node={id,type:sk.isBuiltin?skId:null,skillId:sk.isBuiltin?null:skId,
    x:snap(sceneX),y:snap(sceneY),values:{},title:'',inputs,outputs};
  pushHistory();
  frame().nodes.push(node);
  const el=buildNode(node);if(el)scene.appendChild(el);
  // If we're inside a skill's internal graph, sync this skill as a dep on the parent
  if(frame().skillId&&node.skillId&&node.skillId!==frame().skillId){
    const parentSk=getSk(frame().skillId);
    if(parentSk){
      if(!parentSk.deps)parentSk.deps=[];
      if(!parentSk.deps.includes(node.skillId))parentSk.deps.push(node.skillId);
    }
  }
  markPipelineDirty(activePipelineId);updateTopbar();selectNode(id);
}

// Destroys and recreates a node's DOM to reflect changed state (color, title, ports, etc.)
function rebuildNode(node){
  document.getElementById('nd-'+node.id)?.remove();
  const el=buildNode(node);if(el)scene.appendChild(el);
  if(selNode===node.id)applySelStyle(node.id);
}

// ═══════════════════════════════════════════════════════════
// SELECTION
// ═══════════════════════════════════════════════════════════
// Walk edges forward from a node, return set of downstream node IDs
function getDownstream(nodeId){
  // Build forward-adjacency once so the BFS doesn't re-filter all edges per dequeue.
  const adj=new Map();
  getEdges().forEach(e=>{
    if(!adj.has(e.from))adj.set(e.from,[]);
    adj.get(e.from).push(e.to);
  });
  const visited=new Set();
  const queue=[nodeId];
  while(queue.length){
    const id=queue.shift();
    if(visited.has(id))continue;
    visited.add(id);
    (adj.get(id)||[]).forEach(to=>queue.push(to));
  }
  visited.delete(nodeId); // don't include self
  return visited;
}

function highlightDownstream(selectedId){
  if(!selectedId){
    // Clear all highlight states
    scene.querySelectorAll('.node').forEach(el=>{el.classList.remove('downstream','dimmed');});
    svg.querySelectorAll('.e').forEach(el=>{el.classList.remove('downstream','dimmed');});
    return;
  }
  const downstream=getDownstream(selectedId);
  const downstreamEdges=new Set(
    getEdges().filter(e=>e.from===selectedId||downstream.has(e.from)||downstream.has(e.to)).map(e=>e.id)
  );
  const hasAny=downstream.size>0;

  scene.querySelectorAll('.node').forEach(el=>{
    const nid=el.id.slice(3);
    el.classList.remove('downstream','dimmed');
    if(nid===selectedId)return; // selected: handled by applySelStyle
    if(downstream.has(nid)){el.classList.add('downstream');}
    else if(hasAny){el.classList.add('dimmed');}
  });
  svg.querySelectorAll('.e').forEach(el=>{
    const eid=el.dataset.eid;
    el.classList.remove('downstream','dimmed');
    if(downstreamEdges.has(eid)){el.classList.add('downstream');}
    else if(hasAny){el.classList.add('dimmed');}
  });
}

function applySelStyle(id){
  scene.querySelectorAll('.node').forEach(el=>{
    const nid=el.id.slice(3);
    const n=getNodes().find(x=>x.id===nid);const sk=n?nodeSk(n):null;
    const c2=el.querySelector('.node-card');
    if(c2){
      c2.style.borderColor=sk?cxa(cx(sk.color),CONFIG.NODE_BORDER_ALPHA):'';
      c2.style.boxShadow='';
    }
    el.classList.remove('downstream','dimmed','multi-sel');
  });
  // In multi-select mode, also clear edge highlight classes
  if(selNodes.size>1){
    svg.querySelectorAll('.e').forEach(el=>el.classList.remove('downstream','dimmed'));
  }
  // Apply multi-sel class to all nodes in selNodes (except primary which gets full ring)
  selNodes.forEach(nid=>{
    if(nid===id)return;
    const el=document.getElementById('nd-'+nid);
    if(el)el.classList.add('multi-sel');
  });
  // Re-apply start-node box-shadow for all start nodes
  getNodes().filter(n=>n.isStart).forEach(n=>{
    const el=document.getElementById('nd-'+n.id);if(el)el.classList.add('start-node');
  });
  if(!id){svg.querySelectorAll('.e').forEach(el=>el.classList.remove('downstream','dimmed'));return;}
  const n=getNodes().find(x=>x.id===id);const sk=n?nodeSk(n):null;
  const el=document.getElementById('nd-'+id);
  if(el&&sk){
    const selColor=cx(n.color||sk.color);
    const cardEl=el.querySelector('.node-card');
    if(cardEl){cardEl.style.borderColor=selColor;cardEl.style.boxShadow=`0 0 0 3px ${cxa(selColor,CONFIG.NODE_SHADOW_ALPHA)},0 8px 28px rgba(0,0,0,.5)`;}
  }
  // Only show downstream highlight in Alt mode — not on plain selection
  if(altDown&&selNodes.size<=1)highlightDownstream(id);
  else if(!altDown)highlightDownstream(null);
}

// Selects a node on the canvas, updating inspector and visual state
function selectNode(id, shiftKey=false){
  if(shiftKey){
    // Toggle this node in the multi-selection
    if(selNodes.has(id)){
      selNodes.delete(id);
      // If we removed the primary node, promote another from the set
      if(selNode===id){
        selNode=selNodes.size?[...selNodes][selNodes.size-1]:null;
        selSkillId=selNode?(getNodes().find(x=>x.id===selNode)||({}))?.type||(getNodes().find(x=>x.id===selNode)||{}).skillId:null;
      }
    }else{
      selNodes.add(id);
      selNode=id;
      const n=getNodes().find(x=>x.id===id);
      selSkillId=n?(n.type||n.skillId):null;
    }
  }else{
    // Single select: clear multi-sel, set new primary
    selNodes.clear();
    selNodes.add(id);
    selNode=id;
    const n=getNodes().find(x=>x.id===id);
    selSkillId=n?(n.type||n.skillId):null;
  }
  applySelStyle(selNode);
  document.querySelectorAll('.lib-row').forEach(r=>r.classList.remove('sel'));
  updateTopbar();renderInspector();
}

function selectLib(skId){trackRecent(skId);
  selSkillId=skId;selNode=null;selNodes.clear();
  applySelStyle(null);
  document.querySelectorAll('.lib-row').forEach(r=>r.classList.toggle('sel',r.dataset.sid===skId));
  updateTopbar();renderInspector();
}

// Clears all node selection state (single and multi-select)
function clearSel(){
  selNode=null;selSkillId=null;selNodes.clear();applySelStyle(null);
  document.querySelectorAll('.lib-row').forEach(r=>r.classList.remove('sel'));
  selLibIds.clear();
  document.querySelectorAll('.lib-row.lib-multi-sel').forEach(r=>r.classList.remove('lib-multi-sel'));
  updateLibMultiBar();
  updateTopbar();renderInspector();
}

// ═══════════════════════════════════════════════════════════
// CANVAS INTERACTION
// ═══════════════════════════════════════════════════════════
let spaceDown=false;
let altDown=false;
// ═══════════════════════════════════════════════════════════
// KEYBINDINGS — data-driven, user-customisable
// Each binding: { id, section, desc, chord, action, noInput? }
// chord: { ctrl?, shift?, alt?, key }  (key is e.key value)
// noInput: if true, binding is suppressed when focus is in an input
// fixed: binding cannot be remapped (Space, Alt, Escape, Tab — structural)
// ═══════════════════════════════════════════════════════════
const KB_STORE='pb_keybindings';
const DEFAULT_BINDINGS=[
  // ── Canvas navigation (non-remappable — handled separately) ──
  // Space, Alt, Escape, Tab are fixed structural keys
  // ── Node actions ─────────────────────────────────────────────
  {id:'delete',   section:'Nodes',    desc:'Delete selected node(s)',  chord:{key:'Delete'},  noInput:true, noContentEditable:true, action:()=>deleteSelNode()},
  {id:'duplicate',section:'Nodes',    desc:'Duplicate selected node(s)',chord:{shift:true,key:'D'}, noInput:true, noContentEditable:true, action:()=>duplicateSelNodes()},
  {id:'copy',     section:'Nodes',    desc:'Copy selected node(s)',    chord:{ctrl:true,key:'c'}, noInput:true, action:()=>copySelNodes()},
  {id:'paste',    section:'Nodes',    desc:'Paste node(s)',            chord:{ctrl:true,key:'v'}, noInput:true, action:()=>pasteNodes()},
  // ── History ──────────────────────────────────────────────────
  {id:'undo',     section:'History',  desc:'Undo',                     chord:{ctrl:true,key:'z'},            noInput:true, noContentEditable:true, action:()=>undoHistory()},
  {id:'redo',     section:'History',  desc:'Redo',                     chord:{ctrl:true,shift:true,key:'z'}, noInput:true, noContentEditable:true, action:()=>redoHistory()},
  {id:'fit',      section:'View',     desc:'Zoom to fit',              chord:{key:'Home'},                   noInput:true, noContentEditable:true, action:()=>zoomToFit()},
  {id:'search',   section:'View',     desc:'Focus library search',     chord:{key:'/'},                      noInput:true, noContentEditable:true, action:()=>{const s=document.getElementById('lib-search');if(s){s.focus();s.select();}}},
  // ── Pipeline ─────────────────────────────────────────────────
  {id:'save',     section:'Pipeline', desc:'Quick save (or Save As…)',  chord:{ctrl:true,key:'s'},            action:()=>{const p=activePipeline();if(p?.fileHandle)savePipeline(activePipelineId);else savePipelineAs(activePipelineId);}},
  {id:'save-as',  section:'Pipeline', desc:'Save pipeline as…',        chord:{ctrl:true,shift:true,key:'s'}, action:()=>savePipelineAs(activePipelineId)},
  // ── UI ───────────────────────────────────────────────────────
  {id:'ai',       section:'UI',       desc:'Open AI Generate',         chord:{ctrl:true,key:'g'}, action:()=>openAIOverlay()},
  {id:'keys',     section:'UI',       desc:'Open keybindings',         chord:{ctrl:true,key:'/'}, action:()=>openKBOverlay()},
  {id:'quickadd', section:'Canvas',   desc:'Quick Add node',           chord:{key:'q'},           noInput:true, noContentEditable:true, action:()=>{const r=wrap.getBoundingClientRect();openQuickAdd(r.left+r.width/2,r.top+r.height/2);}},
];

// Load user customisations from localStorage
function loadBindings(){
  try{
    const saved=JSON.parse(localStorage.getItem(KB_STORE)||'{}');
    DEFAULT_BINDINGS.forEach(b=>{if(saved[b.id])b.chord=saved[b.id];});
  }catch(e){}
}
function saveBindings(){
  const out={};
  DEFAULT_BINDINGS.forEach(b=>{out[b.id]=b.chord;});
  try{localStorage.setItem(KB_STORE,JSON.stringify(out));}catch(e){}
}
function resetBindings(){
  const orig=[
    {id:'delete',   chord:{key:'Delete'}},
    {id:'duplicate',chord:{shift:true,key:'D'}},
    {id:'copy',     chord:{ctrl:true,key:'c'}},
    {id:'paste',    chord:{ctrl:true,key:'v'}},
    {id:'undo',     chord:{ctrl:true,key:'z'}},
    {id:'redo',     chord:{ctrl:true,shift:true,key:'z'}},
    {id:'fit',      chord:{key:'Home'}},
    {id:'search',   chord:{key:'/'}},
    {id:'save',     chord:{ctrl:true,key:'s'}},
    {id:'save-as',  chord:{ctrl:true,shift:true,key:'s'}},
    {id:'ai',       chord:{ctrl:true,key:'g'}},
    {id:'keys',     chord:{ctrl:true,key:'/'}},
    {id:'quickadd', chord:{key:'q'}},
  ];
  orig.forEach(o=>{const b=DEFAULT_BINDINGS.find(x=>x.id===o.id);if(b)b.chord=o.chord;});
  try{localStorage.removeItem(KB_STORE);}catch(e){}
}
loadBindings();

// Check if a keyboard event matches a chord definition
function chordMatch(e,chord){
  const ctrl=chord.ctrl||false;
  const shift=chord.shift||false;
  const alt=chord.alt||false;
  const key=chord.key;
  if((ctrl!==(e.ctrlKey||e.metaKey)))return false;
  if(shift!==e.shiftKey)return false;
  if(alt!==e.altKey)return false;
  // Case-insensitive key match so Shift+S and Shift+s both work
  return e.key.toLowerCase()===key.toLowerCase();
}

// Format chord for display
function chordLabel(chord){
  const parts=[];
  if(chord.ctrl)parts.push('Ctrl');
  if(chord.shift)parts.push('Shift');
  if(chord.alt)parts.push('Alt');
  const k=chord.key;
  const display={' ':'Space',Delete:'Del',Backspace:'⌫',Escape:'Esc',Tab:'Tab',ArrowUp:'↑',ArrowDown:'↓',ArrowLeft:'←',ArrowRight:'→'};
  parts.push(display[k]||k.toUpperCase());
  return parts;
}

document.addEventListener('keydown',e=>{
  // Fixed structural keys — not remappable
  if(e.code==='Space'&&!e.target.closest('input,textarea,select,[contenteditable]')){spaceDown=true;e.preventDefault();}
  if(e.key==='Alt'){altDown=true;wrap.style.cursor='crosshair';}
  if(e.key==='Escape'){
    // Modal overlays close first; then export drawer; then canvas state.
    const overlay=document.querySelector('[id$="-overlay"].open');
    const drawer=document.getElementById('llm-drawer');
    const drawerOpen=drawer&&drawer.classList.contains('drawer-open');
    if(overlay)overlay.classList.remove('open');
    else if(drawerOpen)closeDrawer();
    else if(conn)clearConn();
    else if(lasso){lasso=null;document.getElementById('lasso').style.display='none';}
    else if(canvasStack.length>1)popGraph();
    else{clearSel();highlightDownstream(null);}
  }
  if(e.key==='Tab'&&!e.target.closest('input,textarea,select')){
    e.preventDefault();
    if(selNode){
      const n=getNodes().find(x=>x.id===selNode);
      if(n){const sk=nodeSk(n);const targetSkId=sk?.id||n.skillId;
        if(sk&&!sk.isBuiltin&&targetSkId!==frame().skillId)pushGraph(targetSkId);}
    }
  }

  // Data-driven bindings
  for(const binding of DEFAULT_BINDINGS){
    if(!chordMatch(e,binding.chord))continue;
    if(binding.noInput&&e.target.closest('input,textarea,select'))continue;
    if(binding.noContentEditable&&e.target.closest('[contenteditable]'))continue;
    e.preventDefault();
    binding.action();
    break; // first match wins
  }
});
document.addEventListener('keyup',e=>{
  if(e.code==='Space')spaceDown=false;
  if(e.key==='Alt'){
    altDown=false;
    wrap.style.cursor='';
    if(selNodes.size<=1)applySelStyle(selNode);
    else highlightDownstream(null);
  }
});

// ═══════════════════════════════════════════════════════════
// KEYBINDINGS OVERLAY
// ═══════════════════════════════════════════════════════════
function openKBOverlay(){
  document.getElementById('kb-overlay').classList.add('open');
  renderKBOverlay();
}

function renderKBOverlay(){
  const body=document.getElementById('kb-body');
  body.innerHTML='';
  let currentSection=null;
  let recording=null; // binding id currently being recorded

  DEFAULT_BINDINGS.forEach(binding=>{
    if(binding.section!==currentSection){
      currentSection=binding.section;
      const sec=document.createElement('div');sec.className='kb-section';
      sec.textContent=currentSection.toUpperCase();
      body.appendChild(sec);
    }

    const row=document.createElement('div');row.className='kb-row';

    // Description
    const desc=document.createElement('div');desc.className='kb-desc';desc.textContent=binding.desc;

    // Chord display
    const chord=document.createElement('div');chord.className='kb-chord';
    chordLabel(binding.chord).forEach(k=>{
      const key=document.createElement('span');key.className='kb-key';key.textContent=k;
      chord.appendChild(key);
    });

    // Edit button
    const editBtn=document.createElement('button');editBtn.className='kb-edit-btn';editBtn.textContent='Edit';
    editBtn.addEventListener('click',()=>{
      if(recording===binding.id){
        // Cancel recording
        recording=null;editBtn.textContent='Edit';editBtn.classList.remove('recording');
        return;
      }
      // Start recording
      recording=binding.id;
      editBtn.textContent='Press keys…';editBtn.classList.add('recording');

      const capture=ev=>{
        if(['Control','Shift','Alt','Meta','CapsLock'].includes(ev.key))return;
        ev.preventDefault();ev.stopPropagation();
        if(ev.key==='Escape'){recording=null;document.removeEventListener('keydown',capture,true);renderKBOverlay();return;}
        const newChord={
          ctrl:ev.ctrlKey||ev.metaKey||false,
          shift:ev.shiftKey||false,
          alt:ev.altKey||false,
          key:ev.key,
        };
        binding.chord=newChord;
        saveBindings();
        recording=null;
        document.removeEventListener('keydown',capture,true);
        renderKBOverlay(); // re-render to show new chord
      };
      document.addEventListener('keydown',capture,true);
    });

    row.appendChild(desc);row.appendChild(chord);row.appendChild(editBtn);
    body.appendChild(row);
  });
}

document.getElementById('btn-keybindings').addEventListener('click',openKBOverlay);
document.getElementById('kb-close').addEventListener('click',()=>document.getElementById('kb-overlay').classList.remove('open'));
document.getElementById('kb-overlay').addEventListener('click',e=>{if(e.target===e.currentTarget)document.getElementById('kb-overlay').classList.remove('open');});
document.getElementById('kb-reset').addEventListener('click',()=>{resetBindings();renderKBOverlay();});

wrap.addEventListener('pointermove',e=>{
  if(!conn)return;
  const sr=scene.getBoundingClientRect();const t=frame().tx;
  setPending(conn.ox,conn.oy,(e.clientX-sr.left)/t.s,(e.clientY-sr.top)/t.s);
});

const lassoEl=document.getElementById('lasso');
let panning=false,psx,psy,ptx,pty;
let lasso=null; // {x0,y0,x1,y1,shiftKey} in screen coords relative to wrap

function lassoSceneRect(){
  // Convert lasso screen coords to scene coords
  const wr=wrap.getBoundingClientRect();
  const t=frame().tx;
  const toScene=(sx,sy)=>({
    x:(sx-wr.left-t.x)/t.s,
    y:(sy-wr.top-t.y)/t.s
  });
  const a=toScene(lasso.x0,lasso.y0);
  const b=toScene(lasso.x1,lasso.y1);
  return{
    left:Math.min(a.x,b.x),top:Math.min(a.y,b.y),
    right:Math.max(a.x,b.x),bottom:Math.max(a.y,b.y)
  };
}

function updateLassoRect(){
  const minX=Math.min(lasso.x0,lasso.x1),maxX=Math.max(lasso.x0,lasso.x1);
  const minY=Math.min(lasso.y0,lasso.y1),maxY=Math.max(lasso.y0,lasso.y1);
  const wr=wrap.getBoundingClientRect();
  lassoEl.style.left=(minX-wr.left)+'px';
  lassoEl.style.top=(minY-wr.top)+'px';
  lassoEl.style.width=(maxX-minX)+'px';
  lassoEl.style.height=(maxY-minY)+'px';
  lassoEl.style.display='block';
}

function commitLasso(){
  if(!lasso)return;
  lassoEl.style.display='none';
  const r=lassoSceneRect();
  // Only commit if the box has meaningful size (avoid treating a click as a lasso)
  if((r.right-r.left)<4&&(r.bottom-r.top)<4){lasso=null;return;}
  const hit=getNodes().filter(n=>{
    // Use the node's own DOM element dimensions if available, else estimate from CONFIG
    const nel=document.getElementById('nd-'+n.id);
    const w=nel?nel.offsetWidth:CONFIG.DEFAULT_NODE_WIDTH;
    const h=nel?nel.offsetHeight:80;
    const nr={left:n.x,top:n.y,right:n.x+w,bottom:n.y+h};
    return nr.left<r.right&&nr.right>r.left&&nr.top<r.bottom&&nr.bottom>r.top;
  });
  if(!lasso.shiftKey)selNodes.clear();
  hit.forEach(n=>selNodes.add(n.id));
  selNode=selNodes.size?[...selNodes][selNodes.size-1]:null;
  const _selN=selNode?getNodes().find(x=>x.id===selNode):null;
  selSkillId=_selN?(_selN.type||_selN.skillId):null;
  lasso=null;
  applySelStyle(selNode);
  updateTopbar();renderInspector();
}

wrap.addEventListener('pointerdown',e=>{
  if(e.target.closest('.port'))return;
  if(e.button===1||(e.button===0&&spaceDown)){
    e.preventDefault();panning=true;
    psx=e.clientX;psy=e.clientY;ptx=frame().tx.x;pty=frame().tx.y;
    wrap.setPointerCapture(e.pointerId);return;
  }
  if(e.button===0&&(e.target===wrap||e.target===scene||e.target===svg||e.target.tagName==='svg')){
    if(conn){clearConn();return;}
    if(!e.shiftKey)clearSel();
    // Start lasso
    lasso={x0:e.clientX,y0:e.clientY,x1:e.clientX,y1:e.clientY,shiftKey:e.shiftKey};
    wrap.setPointerCapture(e.pointerId);
  }
});
wrap.addEventListener('pointermove',e=>{
  if(panning){
    frame().tx.x=ptx+(e.clientX-psx);frame().tx.y=pty+(e.clientY-psy);applyTx();
    return;
  }
  if(lasso){
    lasso.x1=e.clientX;lasso.y1=e.clientY;
    updateLassoRect();
  }
});
wrap.addEventListener('pointerup',e=>{
  if(panning){panning=false;wrap.releasePointerCapture(e.pointerId);return;}
  if(lasso){commitLasso();wrap.releasePointerCapture(e.pointerId);}
  // If a connection drag was in progress and the pointer was released over
  // empty canvas (not a port), try magnetic snap to nearest ready port
  if(conn&&!e.target.closest('.port')){
    const SNAP_RADIUS=24;
    const t=frame().tx;
    let best=null,bestDist=SNAP_RADIUS+1;
    scene.querySelectorAll('.port-in.ready').forEach(p=>{
      const pr=p.getBoundingClientRect();
      const px=pr.left+pr.width/2,py=pr.top+pr.height/2;
      const dist=Math.hypot(e.clientX-px,e.clientY-py);
      if(dist<bestDist){bestDist=dist;best=p;}
    });
    if(best){
      // Simulate connection to this port
      const toNid=best.dataset.nid,toPid=best.dataset.pid;
      const fromId=conn.fromId;
      if(fromId!==toNid&&!getEdges().find(ed=>ed.from===fromId&&ed.to===toNid&&ed.fromPort===conn.fromPort&&ed.toPort===toPid)){
        if(!wouldCycle(frame().nodes,frame().edges,fromId,toNid)){
          const eid=uid('e');
          pushHistory();frame().edges.push({id:eid,from:fromId,to:toNid,fromPort:conn.fromPort,toPort:toPid});markPipelineDirty(activePipelineId);
          clearConn();renderEdges(eid);
          return;
        }
      }
    }
    clearConn();
  }
});
wrap.addEventListener('wheel',e=>{
  e.preventDefault();
  const d=-e.deltaY*.001;const rect=wrap.getBoundingClientRect();
  const cx2=e.clientX-rect.left,cy2=e.clientY-rect.top;
  const t=frame().tx;
  const ns=Math.max(CONFIG.ZOOM_MIN,Math.min(CONFIG.ZOOM_MAX,t.s+d*t.s));
  t.x=cx2-(cx2-t.x)*(ns/t.s);t.y=cy2-(cy2-t.y)*(ns/t.s);t.s=ns;applyTx();
},{passive:false});

// ═══════════════════════════════════════════════════════════
// QUICK-ADD — double-click canvas to place a node
// ═══════════════════════════════════════════════════════════
const qaBox=document.getElementById('quick-add');
const qaInput=document.getElementById('qa-input');
const qaList=document.getElementById('quick-add-list');
let qaSceneX=0,qaSceneY=0,qaActive=false,qaIdx=0;

function openQuickAdd(clientX,clientY){
  const t=frame().tx;const rect=wrap.getBoundingClientRect();
  qaSceneX=snap((clientX-rect.left-t.x)/t.s);
  qaSceneY=snap((clientY-rect.top-t.y)/t.s);
  qaBox.style.left=(clientX-rect.left)+'px';
  qaBox.style.top=(clientY-rect.top)+'px';
  qaBox.style.display='flex';qaActive=true;qaIdx=0;
  qaInput.value='';qaInput.focus();
  renderQuickAddList('');
}
function closeQuickAdd(){qaBox.style.display='none';qaActive=false;}

function renderQuickAddList(filter){
  qaList.innerHTML='';qaIdx=0;
  const f=filter.toLowerCase();
  const matched=skills.filter(s=>!s.isBuiltin||s.hasIn||s.hasOut).filter(s=>!f||s.label.toLowerCase().includes(f)||(s.category||'').toLowerCase().includes(f));
  const capped=matched.slice(0,12);
  capped.forEach((sk,i)=>{
    const row=document.createElement('div');row.className='qa-item'+(i===0?' active':'');
    row.innerHTML='<span class="qa-glyph" style="color:'+cx(sk.color)+'">'+sk.glyph+'</span><span class="qa-label">'+sk.label+'</span>';
    row.addEventListener('click',()=>{closeQuickAdd();pushHistory();placeNodeAt(sk.id,qaSceneX,qaSceneY);markPipelineDirty(activePipelineId);});
    row.addEventListener('pointerenter',()=>{qaList.querySelectorAll('.qa-item').forEach(r=>r.classList.remove('active'));row.classList.add('active');qaIdx=i;});
    qaList.appendChild(row);
  });
  if(!capped.length){
    const empty=document.createElement('div');empty.style.cssText='padding:10px;font-size:9px;color:var(--dim);text-align:center';empty.textContent='No skills match';
    qaList.appendChild(empty);
  }
}
qaInput.addEventListener('input',()=>renderQuickAddList(qaInput.value));
qaInput.addEventListener('keydown',e=>{
  const items=qaList.querySelectorAll('.qa-item');
  if(e.key==='ArrowDown'){e.preventDefault();if(items.length){items[qaIdx]?.classList.remove('active');qaIdx=Math.min(qaIdx+1,items.length-1);items[qaIdx]?.classList.add('active');items[qaIdx]?.scrollIntoView({block:'nearest'});}}
  else if(e.key==='ArrowUp'){e.preventDefault();if(items.length){items[qaIdx]?.classList.remove('active');qaIdx=Math.max(qaIdx-1,0);items[qaIdx]?.classList.add('active');items[qaIdx]?.scrollIntoView({block:'nearest'});}}
  else if(e.key==='Enter'){e.preventDefault();const active=items[qaIdx];if(active)active.click();}
  else if(e.key==='Escape'){e.preventDefault();closeQuickAdd();}
});
// Close on outside click
document.addEventListener('pointerdown',e=>{if(qaActive&&!qaBox.contains(e.target))closeQuickAdd();},{capture:true});

wrap.addEventListener('dblclick',e=>{
  if(e.target.closest('.node,.port,.minimap,#quick-add'))return;
  openQuickAdd(e.clientX,e.clientY);
});

// ═══════════════════════════════════════════════════════════
// ALIGNMENT GUIDES — snap lines during node drag
// ═══════════════════════════════════════════════════════════
const ALIGN_THRESH=4; // px tolerance in scene coords
let _alignGuides=[];

function clearAlignGuides(){
  _alignGuides.forEach(el=>el.remove());_alignGuides=[];
}
function drawAlignGuide(x1,y1,x2,y2){
  const line=document.createElementNS('http://www.w3.org/2000/svg','line');
  line.setAttribute('x1',x1);line.setAttribute('y1',y1);
  line.setAttribute('x2',x2);line.setAttribute('y2',y2);
  line.classList.add('align-guide');
  svg.appendChild(line);_alignGuides.push(line);
}
function computeAlignSnap(primaryId,nodes){
  clearAlignGuides();
  const p=nodes.find(n=>n.id===primaryId);if(!p)return{dx:0,dy:0};
  const pel=document.getElementById('nd-'+primaryId);
  const pw=pel?pel.offsetWidth:(p._w||214),ph=pel?pel.offsetHeight:80;
  const pEdges={l:p.x,r:p.x+pw,cx:p.x+pw/2,t:p.y,b:p.y+ph,cy:p.y+ph/2};

  let bestDx=null,bestDy=null,bestDistX=ALIGN_THRESH+1,bestDistY=ALIGN_THRESH+1;
  const guides=[];
  const others=nodes.filter(n=>n.id!==primaryId&&!selNodes.has(n.id));

  others.forEach(n=>{
    const nel=document.getElementById('nd-'+n.id);
    const w=nel?nel.offsetWidth:(n._w||214),h=nel?nel.offsetHeight:80;
    const e={l:n.x,r:n.x+w,cx:n.x+w/2,t:n.y,b:n.y+h,cy:n.y+h/2};
    // X alignments: left-left, right-right, center-center, left-right, right-left
    const xPairs=[[pEdges.l,e.l,'l'],[pEdges.r,e.r,'r'],[pEdges.cx,e.cx,'cx'],[pEdges.l,e.r,'lr'],[pEdges.r,e.l,'rl']];
    xPairs.forEach(([pv,ev,type])=>{
      const d=Math.abs(pv-ev);
      if(d<bestDistX){bestDistX=d;bestDx=ev-pv;
        guides.length=guides.filter(g=>g.axis!=='x').length;// keep y guides
        const gx=type==='l'||type==='lr'?e.l:type==='r'||type==='rl'?e.r:e.cx;
        guides.push({axis:'x',x:gx,minY:Math.min(pEdges.t,e.t)-20,maxY:Math.max(pEdges.b,e.b)+20});
      }else if(d===bestDistX&&d<=ALIGN_THRESH){
        const gx=type==='l'||type==='lr'?e.l:type==='r'||type==='rl'?e.r:e.cx;
        guides.push({axis:'x',x:gx,minY:Math.min(pEdges.t,e.t)-20,maxY:Math.max(pEdges.b,e.b)+20});
      }
    });
    // Y alignments: top-top, bottom-bottom, center-center, top-bottom, bottom-top
    const yPairs=[[pEdges.t,e.t,'t'],[pEdges.b,e.b,'b'],[pEdges.cy,e.cy,'cy'],[pEdges.t,e.b,'tb'],[pEdges.b,e.t,'bt']];
    yPairs.forEach(([pv,ev,type])=>{
      const d=Math.abs(pv-ev);
      if(d<bestDistY){bestDistY=d;bestDy=ev-pv;
        const filtered=guides.filter(g=>g.axis!=='y');guides.length=0;filtered.forEach(g=>guides.push(g));
        const gy=type==='t'||type==='tb'?e.t:type==='b'||type==='bt'?e.b:e.cy;
        guides.push({axis:'y',y:gy,minX:Math.min(pEdges.l,e.l)-20,maxX:Math.max(pEdges.r,e.r)+20});
      }else if(d===bestDistY&&d<=ALIGN_THRESH){
        const gy=type==='t'||type==='tb'?e.t:type==='b'||type==='bt'?e.b:e.cy;
        guides.push({axis:'y',y:gy,minX:Math.min(pEdges.l,e.l)-20,maxX:Math.max(pEdges.r,e.r)+20});
      }
    });
  });

  const dx=(bestDistX<=ALIGN_THRESH)?bestDx:0;
  const dy=(bestDistY<=ALIGN_THRESH)?bestDy:0;
  // Draw guides for snapped axes
  if(dx!==0||dy!==0||bestDistX<=ALIGN_THRESH||bestDistY<=ALIGN_THRESH){
    guides.forEach(g=>{
      if(g.axis==='x'&&bestDistX<=ALIGN_THRESH)drawAlignGuide(g.x,g.minY,g.x,g.maxY);
      if(g.axis==='y'&&bestDistY<=ALIGN_THRESH)drawAlignGuide(g.minX,g.y,g.maxX,g.y);
    });
  }
  return{dx,dy};
}

// Alignment guides during node resize — snaps the active edge(s) to other nodes
// edge: 'left','right','bottom' — which edge is being resized
function computeResizeAlignSnap(nodeId,edge,skipClear){
  if(!skipClear)clearAlignGuides();
  const nodes=getNodes();
  const p=nodes.find(n=>n.id===nodeId);if(!p)return 0;
  const pel=document.getElementById('nd-'+nodeId);
  const pw=pel?pel.offsetWidth:(p._w||214),ph=pel?pel.offsetHeight:80;
  const pEdges={l:p.x,r:p.x+pw,t:p.y,b:p.y+ph};

  let best=null,bestDist=ALIGN_THRESH+1;
  const guides=[];
  const others=nodes.filter(n=>n.id!==nodeId);

  others.forEach(n=>{
    const nel=document.getElementById('nd-'+n.id);
    const w=nel?nel.offsetWidth:(n._w||214),h=nel?nel.offsetHeight:80;
    const e={l:n.x,r:n.x+w,t:n.y,b:n.y+h};

    if(edge==='left'||edge==='right'){
      const pv=edge==='left'?pEdges.l:pEdges.r;
      [e.l,e.r].forEach(ev=>{
        const d=Math.abs(pv-ev);
        if(d<bestDist){bestDist=d;best=ev-pv;guides.length=0;
          guides.push({axis:'x',x:ev,minY:Math.min(pEdges.t,e.t)-20,maxY:Math.max(pEdges.b,e.b)+20});
        }else if(d===bestDist&&d<=ALIGN_THRESH){
          guides.push({axis:'x',x:ev,minY:Math.min(pEdges.t,e.t)-20,maxY:Math.max(pEdges.b,e.b)+20});
        }
      });
    }else if(edge==='bottom'){
      const pv=pEdges.b;
      [e.t,e.b].forEach(ev=>{
        const d=Math.abs(pv-ev);
        if(d<bestDist){bestDist=d;best=ev-pv;guides.length=0;
          guides.push({axis:'y',y:ev,minX:Math.min(pEdges.l,e.l)-20,maxX:Math.max(pEdges.r,e.r)+20});
        }else if(d===bestDist&&d<=ALIGN_THRESH){
          guides.push({axis:'y',y:ev,minX:Math.min(pEdges.l,e.l)-20,maxX:Math.max(pEdges.r,e.r)+20});
        }
      });
    }else if(edge==='top'){
      const pv=pEdges.t;
      [e.t,e.b].forEach(ev=>{
        const d=Math.abs(pv-ev);
        if(d<bestDist){bestDist=d;best=ev-pv;guides.length=0;
          guides.push({axis:'y',y:ev,minX:Math.min(pEdges.l,e.l)-20,maxX:Math.max(pEdges.r,e.r)+20});
        }else if(d===bestDist&&d<=ALIGN_THRESH){
          guides.push({axis:'y',y:ev,minX:Math.min(pEdges.l,e.l)-20,maxX:Math.max(pEdges.r,e.r)+20});
        }
      });
    }
  });

  const snap=(bestDist<=ALIGN_THRESH)?best:0;
  if(bestDist<=ALIGN_THRESH){
    guides.forEach(g=>{
      if(g.axis==='x')drawAlignGuide(g.x,g.minY,g.x,g.maxY);
      if(g.axis==='y')drawAlignGuide(g.minX,g.y,g.maxX,g.y);
    });
  }
  return snap;
}

// ═══════════════════════════════════════════════════════════
// TOPBAR
// ═══════════════════════════════════════════════════════════
function updateTopbar(){
  const h=getNodes().length>0;
  document.getElementById('btn-del').classList.toggle('hidden',!selNodes.size);
  document.getElementById('btn-clear').classList.toggle('hidden',!h);
  document.getElementById('btn-export').classList.toggle('hidden',!h||canvasStack.length>1);
  document.getElementById('empty-hint').style.display=h?'none':'flex';
  document.getElementById('skill-count').textContent=skills.length+' skills';
  // Update empty hint text for nested graphs
  const et=document.getElementById('empty-txt');
  if(canvasStack.length>1){
    const sk=getSk(frame().skillId);
    et.innerHTML='';const etS=document.createElement('strong');etS.style.color='var(--acc)';etS.textContent=sk?.label||'skill';const etBr=document.createElement('br');const etSub=document.createElement('span');etSub.style.cssText='font-size:8px;opacity:.7';etSub.textContent="Add nodes to define this skill's sub-steps";et.append('Internal graph for ',etS,etBr,etSub);
  }else{
    et.innerHTML='Click + on a library node to place it.<br/><span style="font-size:8px;opacity:.7">POST → COLLECTION → SCHEDULE → PUBLISHER</span>';
  }
}

function deleteSelNode(){
  if(!selNodes.size)return;
  pushHistory();
  const toDelete=new Set(selNodes);
  // Animate out
  toDelete.forEach(id=>{
    const el=document.getElementById('nd-'+id);
    if(el){
      const n=getNodes().find(x=>x.id===id);
      if(n)el.style.transform='translate('+n.x+'px,'+n.y+'px) scale(0.85)';
      el.classList.add('deleting');
    }
  });
  // Remove edges immediately so they don't dangle
  toDelete.forEach(id=>{
    frame().edges=getEdges().filter(e=>e.from!==id&&e.to!==id);
  });
  renderEdges();
  // Remove nodes after animation
  setTimeout(()=>{
    toDelete.forEach(id=>{
      const node=getNodes().find(n=>n.id===id);
      if(node&&frame().skillId&&node.skillId&&node.skillId!==frame().skillId){
        const parentSk=getSk(frame().skillId);
        if(parentSk){
          const otherUses=getNodes().filter(n=>n.id!==id&&(n.type||n.skillId)===node.skillId);
          if(!otherUses.length)parentSk.deps=(parentSk.deps||[]).filter(d=>d!==node.skillId);
        }
      }
      frame().nodes=getNodes().filter(n=>n.id!==id);
      document.getElementById('nd-'+id)?.remove();
    });
    selNode=null;selSkillId=null;selNodes.clear();
    applySelStyle(null);markPipelineDirty(activePipelineId);updateTopbar();renderInspector();
  },150);
}

document.getElementById('btn-del').addEventListener('click',deleteSelNode);
document.getElementById('btn-reset').addEventListener('click',()=>{frame().tx={x:0,y:0,s:1};applyTx();});

// Zoom-to-fit: calculate bounding box of all nodes, set transform to frame them
function zoomToFit(){
  const nodes=getNodes();if(!nodes.length)return;
  const PAD=60;
  let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
  nodes.forEach(n=>{
    const el=document.getElementById('nd-'+n.id);
    const w=el?el.offsetWidth:220;const h=el?el.offsetHeight:80;
    minX=Math.min(minX,n.x);minY=Math.min(minY,n.y);
    maxX=Math.max(maxX,n.x+w);maxY=Math.max(maxY,n.y+h);
  });
  const bw=maxX-minX+PAD*2,bh=maxY-minY+PAD*2;
  const wr=wrap.getBoundingClientRect();
  const s=Math.max(CONFIG.ZOOM_MIN,Math.min(1.2,Math.min(wr.width/bw,wr.height/bh)));
  const centerX=(minX+maxX)/2,centerY=(minY+maxY)/2;
  frame().tx={x:wr.width/2-centerX*s,y:wr.height/2-centerY*s,s};
  applyTx();renderEdges();
}
document.getElementById('btn-fit').addEventListener('click',zoomToFit);
document.getElementById('btn-undo').addEventListener('click',()=>undoHistory());
document.getElementById('btn-redo').addEventListener('click',()=>redoHistory());
document.getElementById('btn-clear').addEventListener('click',()=>{
  if(frame().nodes.length>5&&!confirm('Clear all '+frame().nodes.length+' nodes from canvas?'))return;
  frame().nodes=[];frame().edges=[];selNode=null;selSkillId=null;
  scene.querySelectorAll('.node').forEach(n=>n.remove());renderEdges();clearSel();updateTopbar();
});
document.getElementById('btn-pipeline-to-node').addEventListener('click',()=>{
  const p=activePipeline();if(!p)return;
  if(p.id===activePipelineId)p.stack=canvasStack;
  const sk=pipelineToSkill(p);
  renderLib();
  flashBtn('btn-pipeline-to-node','✓ Saved to PIPELINES tab','⬡ Save as Node');
  // Switch to pipelines tab so user can see it
  activeLibTab='pipelines';
  document.querySelectorAll('.ltab').forEach(t=>t.classList.toggle('on',t.dataset.tab==='pipelines'));
  renderLib();
});
document.getElementById('btn-save-pipeline').addEventListener('click',()=>{
  savePipelineAs(activePipelineId);
});
document.getElementById('btn-export').addEventListener('click',openOutput);

// ═══════════════════════════════════════════════════════════
// INSPECTOR TABS
// ═══════════════════════════════════════════════════════════
document.querySelectorAll('.itab').forEach(tab=>{
  tab.addEventListener('click',()=>{
    activeTab=tab.dataset.tab;
    document.querySelectorAll('.itab').forEach(t=>t.classList.remove('on'));
    tab.classList.add('on');
    showInspTab();
  });
});

function showInspTab(){
  document.getElementById('insp-content').style.display=activeTab==='content'?'flex':'none';
  document.getElementById('insp-graph-tab').style.display=activeTab==='graph'?'flex':'none';
}

function showTabRegion(show){
  document.getElementById('insp-tab-region').style.display=show?'flex':'none';
}

// ═══════════════════════════════════════════════════════════
// INSPECTOR
// ═══════════════════════════════════════════════════════════
// ── Editable color palette ────────────────────────────────
const _CUSTOM_COLORS_KEY='pb_custom_colors';
function _loadCustomColors(){try{const s=localStorage.getItem(_CUSTOM_COLORS_KEY);if(s){const o=JSON.parse(s);for(const[k,v]of Object.entries(o)){if(typeof v==='string'&&(v.startsWith('oklch(')||/^#[0-9a-fA-F]{6}$/.test(v)))COLORS[k]=v;}}}catch(e){}}
const _DEFAULT_COLORS=Object.freeze({...COLORS});
function _saveCustomColors(){
  const custom={};
  for(const[k,v]of Object.entries(COLORS)){if(v!==_DEFAULT_COLORS[k])custom[k]=v;}
  try{localStorage.setItem(_CUSTOM_COLORS_KEY,JSON.stringify(custom));}catch(e){}
}
_loadCustomColors();

let _colorPopup=null;
let _currentColorId=null;

function _closeColorPopup(){
  if(_colorPopup){_colorPopup.remove();_colorPopup=null;}
  document.removeEventListener('mousedown',_colorPopupOutside);
}
function _colorPopupOutside(e){
  if(_colorPopup&&!_colorPopup.contains(e.target)&&e.target.id!=='color-swatch'){
    _closeColorPopup();
  }
}

function _applyColor(id){
  _currentColorId=id;
  const swatch=document.getElementById('color-swatch');
  swatch.style.background=cx(id);
  const sk=getSk(inspCurrentId);if(!sk)return;
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
  if(canvasNode){
    canvasNode.color=id;rebuildNode(canvasNode);markPipelineDirty(activePipelineId);
  }else{
    mutateSkill(inspCurrentId, s => s.color=id);
    updateLibRow(inspCurrentId);
    getNodes().filter(n=>(n.type||n.skillId)===inspCurrentId).forEach(n=>{if(!n.color)rebuildNode(n);});
  }
  renderEdges();
  const nc=cx(id);
  document.getElementById('if-glyph').style.color=nc;
  document.getElementById('if-name').style.color=nc;
}

function _showColorPopup(){
  _closeColorPopup();
  const wrap=document.getElementById('color-sel-wrap');
  const pop=document.createElement('div');pop.className='color-popup';
  Object.entries(COLORS).forEach(([id,hex])=>{
    const d=document.createElement('div');d.className='cp-dot'+(id===_currentColorId?' sel':'');
    d.style.background=hex;d.title=id;
    d.addEventListener('click',e=>{
      e.stopPropagation();
      _applyColor(id);
      pop.querySelectorAll('.cp-dot').forEach(dd=>dd.classList.remove('sel'));
      d.classList.add('sel');
      _closeColorPopup();
    });
    pop.appendChild(d);
  });
  // + add dot
  const addD=document.createElement('div');addD.className='cp-add';addD.textContent='+';addD.title='Add custom color';
  addD.addEventListener('click',e=>{
    e.stopPropagation();
    _openPickerInline((newHex)=>{
      const newId='c'+Date.now().toString(36);
      COLORS[newId]=newHex;_saveCustomColors();
      _applyColor(newId);
    },'#ffffff');
  });
  pop.appendChild(addD);
  wrap.appendChild(pop);
  _colorPopup=pop;
  setTimeout(()=>document.addEventListener('mousedown',_colorPopupOutside),0);
}

function _openPickerInline(onColor,initialHex,onClose){
  _closeColorPopup();
  const wrap=document.getElementById('color-sel-wrap');
  const panel=document.createElement('div');panel.className='cp-picker';

  // SV canvas
  const cvs=document.createElement('canvas');cvs.width=144;cvs.height=80;
  panel.appendChild(cvs);
  const ctx=cvs.getContext('2d');

  // Hue slider
  const hueRow=document.createElement('div');hueRow.className='cp-hue-row';
  const hueSlider=document.createElement('input');hueSlider.type='range';hueSlider.min=0;hueSlider.max=360;hueSlider.value=0;
  hueRow.appendChild(hueSlider);
  panel.appendChild(hueRow);

  // Hex input + preview
  const hexRow=document.createElement('div');hexRow.className='cp-hex-row';
  const preview=document.createElement('div');preview.className='cp-preview';
  const hexIn=document.createElement('input');hexIn.maxLength=7;
  hexRow.appendChild(preview);hexRow.appendChild(hexIn);
  panel.appendChild(hexRow);

  let hue=0,sat=1,val=1;

  // Parse initial color
  function hexToHsv(hex){
    hex=hex.replace('#','');
    const r=parseInt(hex.substring(0,2),16)/255;
    const g=parseInt(hex.substring(2,4),16)/255;
    const b=parseInt(hex.substring(4,6),16)/255;
    const max=Math.max(r,g,b),min=Math.min(r,g,b),d=max-min;
    let h=0;
    if(d){if(max===r)h=((g-b)/d+6)%6;else if(max===g)h=(b-r)/d+2;else h=(r-g)/d+4;h*=60;}
    return{h,s:max?d/max:0,v:max};
  }
  function hsvToHex(h,s,v){
    const c=v*s,x=c*(1-Math.abs((h/60)%2-1)),m=v-c;
    let r=0,g=0,b=0;
    if(h<60){r=c;g=x;}else if(h<120){r=x;g=c;}else if(h<180){g=c;b=x;}
    else if(h<240){g=x;b=c;}else if(h<300){r=x;b=c;}else{r=c;b=x;}
    const toH=n=>Math.round((n+m)*255).toString(16).padStart(2,'0');
    return'#'+toH(r)+toH(g)+toH(b);
  }

  if(initialHex){
    // Convert oklch/non-hex colors to hex via computed style
    if(initialHex&&!initialHex.startsWith('#')){
      const tmp=document.createElement('div');tmp.style.color=initialHex;document.body.appendChild(tmp);
      const rgb=getComputedStyle(tmp).color;tmp.remove();
      const m=rgb.match(/(\d+)/g);
      if(m&&m.length>=3)initialHex='#'+m.slice(0,3).map(n=>(+n).toString(16).padStart(2,'0')).join('');
      else initialHex='#ffffff';
    }
    const hsv=hexToHsv(initialHex);hue=hsv.h;sat=hsv.s;val=hsv.v;hueSlider.value=hue;
  }

  function drawSV(){
    const w=cvs.width,h=cvs.height;
    for(let x=0;x<w;x++){
      for(let y=0;y<h;y++){
        const s=x/w,v=1-y/h;
        ctx.fillStyle=hsvToHex(hue,s,v);
        ctx.fillRect(x,y,1,1);
      }
    }
  }
  function update(){
    const hex=hsvToHex(hue,sat,val);
    hexIn.value=hex;preview.style.background=hex;
    onColor(hex);
  }

  drawSV();update();

  // Canvas interaction
  function pickFromCanvas(e){
    const rect=cvs.getBoundingClientRect();
    sat=Math.max(0,Math.min(1,(e.clientX-rect.left)/rect.width));
    val=Math.max(0,Math.min(1,1-(e.clientY-rect.top)/rect.height));
    update();
  }
  let dragging=false;
  cvs.addEventListener('mousedown',e=>{e.stopPropagation();dragging=true;pickFromCanvas(e);});
  document.addEventListener('mousemove',e=>{if(dragging)pickFromCanvas(e);});
  document.addEventListener('mouseup',()=>{dragging=false;});

  hueSlider.addEventListener('input',()=>{hue=+hueSlider.value;drawSV();update();});

  hexIn.addEventListener('change',()=>{
    let v=hexIn.value.trim();if(!v.startsWith('#'))v='#'+v;
    if(/^#[0-9a-fA-F]{6}$/.test(v)){
      const hsv=hexToHsv(v);hue=hsv.h;sat=hsv.s;val=hsv.v;
      hueSlider.value=hue;drawSV();update();
    }
  });

  wrap.appendChild(panel);
  _colorPopup=panel;

  function outsideClick(e){
    if(!panel.contains(e.target)&&e.target.id!=='color-swatch'){
      panel.remove();_colorPopup=null;
      document.removeEventListener('mousedown',outsideClick);
      if(onClose)onClose();
    }
  }
  setTimeout(()=>document.addEventListener('mousedown',outsideClick),0);
}

function renderColorDots(){/* options rebuilt on popup open */}

// One-time listeners
(function _initColorSel(){
  const swatch=document.getElementById('color-swatch');
  let _dblClickTimer=null;

  swatch.addEventListener('click',e=>{
    e.stopPropagation();
    if(_dblClickTimer)return;
    _dblClickTimer=setTimeout(()=>{_dblClickTimer=null;_showColorPopup();},250);
  });

  swatch.addEventListener('dblclick',e=>{
    e.stopPropagation();
    if(_dblClickTimer){clearTimeout(_dblClickTimer);_dblClickTimer=null;}
    _closeColorPopup();
    const id=_currentColorId;if(!id)return;
    _openPickerInline((newHex)=>{
      COLORS[id]=newHex;_saveCustomColors();
      document.getElementById('color-swatch').style.background=newHex;
      scene.querySelectorAll('.node').forEach(n=>{const nid=n.id.slice(3);const nd=getNodes().find(x=>x.id===nid);if(nd)rebuildNode(nd);});
      debouncedRenderLib();
    },COLORS[id]);
  });
})();

renderColorDots();
document.getElementById('shape-sel').addEventListener('change',e=>{
  const sk=getSk(inspCurrentId);if(!sk)return;
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
  if(canvasNode){
    canvasNode.shape=e.target.value;rebuildNode(canvasNode);markPipelineDirty(activePipelineId);
  }else{
    mutateSkill(inspCurrentId, s => s.shape=e.target.value);
    updateLibRow(inspCurrentId);
    getNodes().filter(n=>(n.type||n.skillId)===inspCurrentId).forEach(n=>{if(!n.shape)rebuildNode(n);});
  }
});
document.getElementById('cat-sel').addEventListener('change',e=>{
  const sk=getSk(inspCurrentId);if(!sk)return;
  if(e.target.value==='custom'){const c=prompt('Category name:');if(c){mutateSkill(inspCurrentId, s => s.category=c);renderLib();renderInspector();}}
  else{mutateSkill(inspCurrentId, s => s.category=e.target.value);renderLib();}
});
document.getElementById('if-name').addEventListener('input',e=>{
  const sk=getSk(inspCurrentId);if(!sk)return;
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
  if(canvasNode){
    canvasNode.title=e.target.value;rebuildNode(canvasNode);markPipelineDirty(activePipelineId);
  }else{
    mutateSkill(inspCurrentId, s => s.label=e.target.value);
    updateLibRow(inspCurrentId);
    getNodes().filter(n=>(n.type||n.skillId)===inspCurrentId).forEach(n=>{if(!n.title)rebuildNode(n);});
  }
});
document.getElementById('if-desc').addEventListener('input',function(e){
  const sk=getSk(inspCurrentId);if(!sk)return;
  mutateSkill(inspCurrentId, s => s.desc=e.target.value);
  updateLibRow(inspCurrentId);
  getNodes().filter(n=>(n.type||n.skillId)===inspCurrentId).forEach(n=>rebuildNode(n));
  this.style.height='auto';this.style.height=this.scrollHeight+'px';
});

document.getElementById('tag-input').addEventListener('keydown',e=>{
  if(e.key==='Enter'||e.key===','){
    e.preventDefault();
    const val=e.target.value.trim().replace(/,$/,'');
    if(!val)return;
    const sk=getSk(inspCurrentId);if(!sk)return;
    let didAdd=false;
    mutateSkill(inspCurrentId, s => {
      if(!s.tags) s.tags=[];
      if(!s.tags.includes(val)){ s.tags.push(val); didAdd=true; }
    });
    if(didAdd){ renderLib(); renderTagsRow(sk); }
    e.target.value='';
  }
});

function renderTagsRow(sk){
  const row=document.getElementById('tags-row');
  const inp=document.getElementById('tag-input');
  row.innerHTML='';
  (sk.tags||[]).forEach(tag=>{
    const span=document.createElement('span');span.className='skill-tag';
    span.appendChild(document.createTextNode(tag));const tagX=document.createElement('span');tagX.className='tx';tagX.textContent='×';span.appendChild(tagX);
    span.querySelector('.tx').addEventListener('click',()=>{mutateSkill(sk.id, s => s.tags=s.tags.filter(t=>t!==tag));renderLib();renderTagsRow(sk);});
    row.appendChild(span);
  });
  row.appendChild(inp);
}

document.getElementById('if-glyph').addEventListener('click',()=>{
  const sk=getSk(inspCurrentId);if(!sk)return;
  const glyphs='◆ ◈ ⬡ ✦ ◷ ▶ ⊕ ⊗ ◉ ⬢ ▲ ⬛ ❖ ✿ ◐ ⟳ ⚡ ◎ ⊞ ⊡';
  const g=prompt('Enter or choose a glyph:\n'+glyphs,sk.glyph);
  if(g){
    const glyph=g.trim().slice(-1)||sk.glyph;
    const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
    if(canvasNode){
      canvasNode.glyph=glyph;rebuildNode(canvasNode);markPipelineDirty(activePipelineId);
    }else{
      mutateSkill(inspCurrentId, s => s.glyph=glyph);
      updateLibRow(inspCurrentId);
      getNodes().filter(n=>(n.type||n.skillId)===inspCurrentId).forEach(n=>{if(!n.glyph)rebuildNode(n);});
    }
    renderInspector();
  }
});

// Content tab buttons
document.getElementById('btn-view').addEventListener('click',()=>setContentMode('view'));
document.getElementById('btn-edit-content').addEventListener('click',()=>setContentMode('edit'));
document.getElementById('btn-cancel-edit').addEventListener('click',()=>setContentMode('view'));
// Apply commits the edit to the SELECTED CANVAS NODE (values._skillContent) — instance-scoped,
// silent, no library write. Hidden when no canvas node is selected (no instance to apply to).
document.getElementById('btn-apply-content').addEventListener('click',()=>{
  const sk=getSk(inspCurrentId);if(!sk)return;
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
  if(!canvasNode)return; // Apply requires an instance; button should be hidden in this state
  canvasNode.values=canvasNode.values||{};
  canvasNode.values._skillContent=document.getElementById('insp-textarea').value;
  markPipelineDirty(activePipelineId);
  rebuildNode(canvasNode); // refresh the on-node drawer + divergence badge
  setContentMode('view');
});
// Merge folds the edited content into the library. Routes through the branch overlay —
// primitives → Branch as New only; custom → Update or Branch. Ghosted unless the inspected
// content diverges from the library (covers both canvas-node-edited and library-direct-edited).
document.getElementById('btn-merge-content').addEventListener('click',()=>{
  const sk=getSk(inspCurrentId);if(!sk)return;
  if(document.getElementById('btn-merge-content').disabled)return;
  // Source of the Merge draft: current textarea if in edit mode, else effective content
  // (instance override if a canvas node is selected, else library rawContent).
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
  inspDraft=inspEditing
    ?document.getElementById('insp-textarea').value
    :(canvasNode?nodeRawContent(canvasNode,sk):(sk.rawContent||''));
  openBranchOverlay(sk);
});

// Refresh Apply visibility + Merge ghost state. Apply is hidden when no canvas node is
// selected (no instance). Merge is ghosted unless the inspected content diverges from
// the library — for a canvas node, divergence = isNodeDiverged; for a library-only
// view, divergence = the edit-mode textarea differs from sk.rawContent.
function refreshInspectorContentButtons(){
  const sk=getSk(inspCurrentId);
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
  const applyBtn=document.getElementById('btn-apply-content');
  const mergeBtn=document.getElementById('btn-merge-content');
  // Apply: visible only when a canvas node is selected AND we're in edit mode.
  if(canvasNode&&inspEditing)applyBtn.classList.remove('hidden');
  else applyBtn.classList.add('hidden');
  // Merge ghosting: divergence-gated.
  let diverged=false;
  if(sk){
    if(inspEditing){
      const draft=document.getElementById('insp-textarea').value;
      const baseline=canvasNode?nodeRawContent(canvasNode,sk):(sk.rawContent||'');
      diverged=draft!==baseline;
    }else if(canvasNode){
      diverged=isNodeDiverged(canvasNode,sk);
    }
  }
  mergeBtn.disabled=!diverged;
  mergeBtn.style.opacity=diverged?'':'0.4';
  mergeBtn.style.cursor=diverged?'':'default';
}

// Per-type placeholder content shown in the inspector's Content tab for input-family
// primitives when nothing has been captured yet. Ghosted via the .insp-placeholder CSS
// class so it visually reads as a hint, not real content.
const INPUT_PLACEHOLDERS={
  text_input:'Your text content goes here…\n\nThis input emits its content verbatim to downstream nodes.',
  code:'```python\n# Your code here\n# This node emits the code block verbatim to downstream nodes\n```',
  io_input:'[Captured file content will appear here]\n\nUpload a file in the Fields tab to populate this node.',
  fetch:'[Captured URL response body will appear here]\n\nEnter a URL in the Fields tab and click Fetch to populate this node.'
};

function setContentMode(mode){
  inspEditing=mode==='edit';
  const rendered=document.getElementById('insp-rendered');
  const editor=document.getElementById('insp-editor');
  const cancelBtn=document.getElementById('btn-cancel-edit');
  const viewBtn=document.getElementById('btn-view');
  const editBtn=document.getElementById('btn-edit-content');
  const applyBtn=document.getElementById('btn-apply-content');
  const mergeBtn=document.getElementById('btn-merge-content');
  const label=document.querySelector('#insp-content-bar .lbl2');
  const sk=getSk(inspCurrentId);
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;

  // INPUT FAMILY: no Edit/Apply/Merge — captured content edits happen inline in the Fields
  // tab and the on-node drawer (both autosave). Content tab is read-only: show captured
  // content if present, else a per-type placeholder. All five buttons hidden.
  const isLogicFamily=!!(sk&&sk.rawContent&&sk.rawContent.trim());
  if(sk&&!isLogicFamily){
    if(label)label.textContent=drawerLabelFor(sk);
    viewBtn.style.display='none';editBtn.style.display='none';cancelBtn.style.display='none';
    applyBtn.style.display='none';mergeBtn.style.display='none';
    editor.style.display='none';rendered.style.display='';
    const contentKey=sk.id==='code'?'code':'content';
    const captured=canvasNode?(canvasNode.values?.[contentKey]||''):'';
    if(captured.startsWith('data:')){
      // Binary captured content (uploaded file as data URL) — show a compact marker.
      rendered.innerHTML='<div style="font-family:var(--mono);font-size:10px;color:var(--dim);padding:8px">[binary content \u2014 '+Math.round(captured.length/1024)+'KB data URL]</div>';
    }else if(captured.trim()){
      rendered.innerHTML=renderMD(captured);
    }else{
      const ph=INPUT_PLACEHOLDERS[sk.id]||'No content captured yet.';
      rendered.innerHTML='<div class="insp-placeholder">'+renderMD(ph)+'</div>';
    }
    return;
  }

  // LOGIC FAMILY: restore button visibility (a previous selection may have hidden them).
  if(label)label.textContent='SKILL CONTENT';
  viewBtn.style.display='';editBtn.style.display='';cancelBtn.style.display='';
  applyBtn.style.display='';mergeBtn.style.display='';

  // Selection-scoped read: instance override for a canvas node, library rawContent otherwise.
  const effective=sk?(canvasNode?nodeRawContent(canvasNode,sk):(sk.rawContent||'')):'';
  if(mode==='edit'){
    rendered.style.display='none';editor.style.display='flex';
    cancelBtn.classList.remove('hidden');
    editBtn.classList.add('active');viewBtn.classList.remove('active');
    document.getElementById('insp-textarea').value=effective;
  }else{
    rendered.style.display='';editor.style.display='none';
    cancelBtn.classList.add('hidden');
    viewBtn.classList.add('active');editBtn.classList.remove('active');
    document.getElementById('insp-rendered').innerHTML=renderMD(effective);
  }
  refreshInspectorContentButtons();
}

// Refresh Merge ghost state live as the user types — the predicate depends on the draft.
document.getElementById('insp-textarea').addEventListener('input',refreshInspectorContentButtons);

// Branch dialog
// Opens the save-changes overlay. Primitives (isBuiltin) can NEVER be overwritten —
// editing their content can only branch into a new custom skill — so the "Update
// Existing" button is hidden for them, leaving "Branch as New" as the only path.
function openBranchOverlay(sk){
  if(!sk)return;
  const updBtn=document.getElementById('branch-update');
  const prompt=document.querySelector('#branch-overlay .dlg-body p');
  if(sk.isBuiltin){
    updBtn.style.display='none';
    if(prompt)prompt.textContent='Primitives can\u2019t be modified directly. Save your changes as a new skill.';
  }else{
    updBtn.style.display='';
    if(prompt)prompt.textContent='Update the existing skill, or branch it into a new one?';
  }
  document.getElementById('branch-name').value=sk.label+' (copy)';
  document.getElementById('branch-overlay').classList.add('open');
}

document.getElementById('branch-cancel').addEventListener('click',()=>document.getElementById('branch-overlay').classList.remove('open'));
document.getElementById('branch-update').addEventListener('click',()=>{
  const sk=getSk(inspCurrentId);
  if(!sk||sk.isBuiltin)return; // primitives are never overwritten — guard even if the button were reachable
  mutateSkill(inspCurrentId, s => s.rawContent=inspDraft);
  document.getElementById('branch-overlay').classList.remove('open');
  setContentMode('view');renderLib();
  getNodes().filter(n=>(n.type||n.skillId)===inspCurrentId).forEach(n=>rebuildNode(n));
});
document.getElementById('branch-new').addEventListener('click',()=>{
  const name=document.getElementById('branch-name').value.trim()||'New Skill';
  const orig=getSk(inspCurrentId);if(!orig)return;
  const newSk={...orig,id:uid('sk'),label:name,rawContent:inspDraft,isBuiltin:false,tags:[...(orig.tags||[])],deps:[...(orig.deps||[])],internalGraph:{nodes:[],edges:[]}};
  newSk._ts=Date.now();addSkill(newSk);
  document.getElementById('branch-overlay').classList.remove('open');
  setContentMode('view');renderLib();selectLib(newSk.id);
});

// ═══════════════════════════════════════════════════════════
// BATCH MERGE DIALOG
// ═══════════════════════════════════════════════════════════
// State for the open dialog. Lives at module scope so handlers can mutate rows.
let _batchRows=[];

// Build rows for a selection: filter to diverged logic-family, cluster by skill,
// assign defaults (top of cluster = update or branch-for-primitive, rest = skip).
function buildBatchRows(nodeIds){
  const allNodes=getNodes();
  const eligible=[];
  for(const nid of nodeIds){
    const node=allNodes.find(n=>n.id===nid);if(!node)continue;
    const sk=nodeSk(node);if(!sk)continue;
    if(!sk.rawContent||!sk.rawContent.trim())continue; // input family
    if(!isNodeDiverged(node,sk))continue;              // non-diverged
    eligible.push({node,sk});
  }
  // Sort: cluster duplicates by skill id, preserve selection order within
  const selOrder=new Map(nodeIds.map((id,i)=>[id,i]));
  eligible.sort((a,b)=>{
    if(a.sk.id!==b.sk.id)return a.sk.id.localeCompare(b.sk.id);
    return selOrder.get(a.node.id)-selOrder.get(b.node.id);
  });
  // Assign defaults per cluster
  const rows=[];
  const claimedBranchNames=[];
  let lastSkId=null,firstInCluster=true;
  for(const {node,sk} of eligible){
    if(sk.id!==lastSkId){firstInCluster=true;lastSkId=sk.id;}
    const isBuiltin=!!sk.isBuiltin;
    let action,branchName;
    if(firstInCluster){
      if(isBuiltin){
        action='branch';branchName=_batchNextVersion(sk.label,claimedBranchNames);
        claimedBranchNames.push(branchName);
      }else{
        action='update';branchName=_batchNextVersion(sk.label,claimedBranchNames);
      }
      firstInCluster=false;
    }else{
      action='skip';branchName=_batchNextVersion(sk.label,claimedBranchNames);
    }
    rows.push({
      nodeId:node.id,
      skillId:sk.id,
      skillLabel:sk.label,
      nodeLabel:node.title||sk.label,
      isBuiltin,
      action,
      branchName,
      content:nodeRawContent(node,sk),
    });
  }
  return rows;
}

// nextVersionName variant that scans the library AND in-batch claimed names.
// Used by buildBatchRows for initial defaults and by disambiguateBranchNames for live edits.
function _batchNextVersion(baseLabel,claimedNames){
  const base=(baseLabel||'Skill').replace(/\.v\d+$/,'');
  const re=new RegExp('^'+base.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')+'\\.v(\\d+)$');
  let max=0;
  skills.forEach(s=>{const m=(s.label||'').match(re);if(m){const n=+m[1];if(n>max)max=n;}});
  (claimedNames||[]).forEach(name=>{const m=(name||'').match(re);if(m){const n=+m[1];if(n>max)max=n;}});
  return base+'.v'+(max+1);
}

// Per-cluster radio: when a row is set to update, other update rows in the same cluster
// auto-flip to skip. Branch rows are untouched.
function applyClusterRadio(rows,changedIdx){
  const c=rows[changedIdx];if(!c||c.action!=='update')return;
  for(let i=0;i<rows.length;i++){
    if(i===changedIdx)continue;
    if(rows[i].skillId===c.skillId&&rows[i].action==='update')rows[i].action='skip';
  }
}

// Disambiguate Branch names against the library + other Branch rows in this batch.
// Only the row at `excludeIdx` is exempt (so the user's actively-edited row isn't renamed under them).
function disambiguateBranchNames(rows,excludeIdx=-1){
  const usedInLib=new Set(skills.map(s=>s.label));
  const usedInBatch=new Set();
  if(excludeIdx>=0&&rows[excludeIdx]?.action==='branch'){
    usedInBatch.add(rows[excludeIdx].branchName); // protect the active edit
  }
  for(let i=0;i<rows.length;i++){
    if(i===excludeIdx)continue;
    const row=rows[i];if(row.action!=='branch')continue;
    let name=row.branchName;
    while(usedInLib.has(name)||usedInBatch.has(name)){
      name=_batchNextVersion(name,[...usedInBatch]);
    }
    row.branchName=name;
    usedInBatch.add(name);
  }
}

function openBatchMergeDialog(nodeIds){
  _batchRows=buildBatchRows(nodeIds);
  // Re-pass through disambiguation in case nextVersionName collisions slipped through
  // (the buildBatchRows pre-computes names but doesn't compare across all rows).
  disambiguateBranchNames(_batchRows);
  renderBatchMergeDialog();
  document.getElementById('batch-merge-overlay').classList.add('open');
}

function renderBatchMergeDialog(){
  const list=document.getElementById('batch-merge-list');
  const hdr=document.getElementById('batch-merge-hdr');
  const summary=document.getElementById('batch-merge-summary');
  const submit=document.getElementById('batch-merge-submit');
  hdr.textContent=`MERGE ${_batchRows.length} SKILL${_batchRows.length===1?'':'S'} TO LIBRARY`;

  if(_batchRows.length===0){
    list.innerHTML='<div class="bm-empty">No diverged skills in the selection.<br>Nothing to merge.</div>';
    submit.disabled=true;submit.style.opacity='0.4';
    summary.textContent='';
    return;
  }
  submit.disabled=false;submit.style.opacity='';

  list.innerHTML='';
  _batchRows.forEach((row,idx)=>{
    const el=document.createElement('div');el.className='bm-row '+row.action;el.dataset.idx=idx;

    // Header line: source → target
    const hdrLine=document.createElement('div');hdrLine.className='bm-row-hdr';
    const src=document.createElement('span');src.className='bm-row-src';src.textContent=row.nodeLabel;
    const arr=document.createElement('span');arr.className='bm-row-arrow';arr.textContent='→';
    const tgt=document.createElement('span');tgt.className='bm-row-target';
    if(row.action==='update')tgt.textContent='Overwrites '+row.skillLabel;
    else if(row.action==='branch')tgt.textContent='New skill: '+row.branchName;
    else tgt.textContent='Skip (will not merge)';
    hdrLine.appendChild(src);hdrLine.appendChild(arr);hdrLine.appendChild(tgt);
    if(row.action==='update'){
      const warn=document.createElement('span');warn.className='bm-row-warn';warn.textContent='⚠ overwrites library';
      hdrLine.appendChild(warn);
    }
    el.appendChild(hdrLine);

    // Actions: update / branch / skip. Update hidden for primitives.
    const acts=document.createElement('div');acts.className='bm-row-actions';
    const mkAct=(actName,label)=>{
      const w=document.createElement('label');w.className='bm-act '+actName+(row.action===actName?' active':'');
      const r=document.createElement('input');r.type='radio';r.name='bm-act-'+idx;r.value=actName;r.checked=row.action===actName;
      r.addEventListener('change',()=>{
        if(!r.checked)return;
        _batchRows[idx].action=actName;
        if(actName==='update')applyClusterRadio(_batchRows,idx);
        disambiguateBranchNames(_batchRows,actName==='branch'?idx:-1);
        renderBatchMergeDialog();
      });
      w.appendChild(r);w.appendChild(document.createTextNode(label));
      return w;
    };
    if(!row.isBuiltin)acts.appendChild(mkAct('update','Update Existing'));
    acts.appendChild(mkAct('branch','Branch as New'));
    acts.appendChild(mkAct('skip','Skip'));
    el.appendChild(acts);

    // Branch-name editor (visible only when action=branch via CSS .bm-row.branch .bm-row-name).
    const nameRow=document.createElement('div');nameRow.className='bm-row-name';
    const lbl=document.createElement('label');lbl.textContent='Name:';
    const inp=document.createElement('input');inp.type='text';inp.value=row.branchName;
    inp.addEventListener('input',()=>{
      _batchRows[idx].branchName=inp.value;
      // Live re-disambiguate OTHER rows (exclude this one — don't rename under user)
      disambiguateBranchNames(_batchRows,idx);
      // Update header text live without full rerender (keeps focus)
      const tgtEl=el.querySelector('.bm-row-target');
      if(tgtEl)tgtEl.textContent='New skill: '+inp.value;
      // Update sibling rows' visible target text too
      list.querySelectorAll('.bm-row').forEach(otherEl=>{
        const oi=+otherEl.dataset.idx;if(oi===idx)return;
        const orow=_batchRows[oi];
        const ot=otherEl.querySelector('.bm-row-target');
        if(ot&&orow.action==='branch')ot.textContent='New skill: '+orow.branchName;
        // Also update the input field value of sibling branch rows
        const oin=otherEl.querySelector('.bm-row-name input');
        if(oin&&orow.action==='branch'&&oin.value!==orow.branchName)oin.value=orow.branchName;
      });
    });
    nameRow.appendChild(lbl);nameRow.appendChild(inp);
    el.appendChild(nameRow);

    list.appendChild(el);
  });

  // Summary + submit label
  const active=_batchRows.filter(r=>r.action!=='skip').length;
  const updates=_batchRows.filter(r=>r.action==='update').length;
  const branches=_batchRows.filter(r=>r.action==='branch').length;
  const skipped=_batchRows.length-active;
  summary.innerHTML=`<span class="bm-count">${updates}</span> update, <span class="bm-count">${branches}</span> branch, <span class="bm-count">${skipped}</span> skip`;
  submit.textContent=active===0?'Merge':`Merge ${active} Skill${active===1?'':'s'}`;
  if(active===0){submit.disabled=true;submit.style.opacity='0.4';}
  else{submit.disabled=false;submit.style.opacity='';}
}

function closeBatchMerge(){
  document.getElementById('batch-merge-overlay').classList.remove('open');
  _batchRows=[];
}

document.getElementById('batch-merge-cancel').addEventListener('click',closeBatchMerge);

document.getElementById('batch-merge-submit').addEventListener('click',()=>{
  const updates=_batchRows.filter(r=>r.action==='update');
  if(updates.length>0){
    // Show confirm overlay first
    const msg=document.getElementById('batch-confirm-msg');
    const names=updates.map(r=>r.skillLabel).join(', ');
    msg.textContent=`You're about to overwrite ${updates.length} library skill${updates.length===1?'':'s'} (${names}). This cannot be undone.`;
    document.getElementById('batch-confirm-overlay').classList.add('open');
  }else{
    commitBatchMerge();
  }
});

document.getElementById('batch-confirm-cancel').addEventListener('click',()=>{
  document.getElementById('batch-confirm-overlay').classList.remove('open');
});
document.getElementById('batch-confirm-ok').addEventListener('click',()=>{
  document.getElementById('batch-confirm-overlay').classList.remove('open');
  commitBatchMerge();
});

function commitBatchMerge(){
  // Mirror the existing branch-update / branch-new commit semantics, per-row.
  for(const row of _batchRows){
    if(row.action==='skip')continue;
    const orig=getSk(row.skillId);if(!orig)continue;
    if(row.action==='update'){
      if(orig.isBuiltin)continue; // belt-and-suspenders — primitives never overwritten
      mutateSkill(row.skillId, sk => sk.rawContent=row.content);
    }else if(row.action==='branch'){
      const newSk={...orig,id:uid('sk'),label:row.branchName,rawContent:row.content,
        isBuiltin:false,tags:[...(orig.tags||[])],deps:[...(orig.deps||[])],
        internalGraph:{nodes:[],edges:[]},_ts:Date.now()};
      addSkill(newSk);
    }
  }
  closeBatchMerge();
  renderLib();
  // Rebuild any affected canvas nodes — divergence badges and drawer state may change.
  getNodes().forEach(n=>rebuildNode(n));
  markPipelineDirty(activePipelineId);
}

// Dependencies tab


// Graph tab
document.getElementById('open-graph-btn').addEventListener('click',()=>{
  if(inspCurrentId&&inspCurrentId!==frame().skillId)pushGraph(inspCurrentId);
});

function renderGraphTab(sk){
  const ig=sk.internalGraph||{nodes:[],edges:[]};
  const stats=document.getElementById('graph-stats');
  stats.innerHTML=`Nodes: <span class="graph-stat-val">${ig.nodes.length}</span><br>
Edges: <span class="graph-stat-val">${ig.edges.length}</span><br>
Dependencies: <span class="graph-stat-val">${(sk.deps||[]).length}</span>`;
}

const PORT_TYPES=['Text','Number','Boolean','Image','Video','Audio','JSON','File','Any'];

function renderIOEditor(container, node, color){
  if(!node.inputs)node.inputs=[];
  if(!node.outputs)node.outputs=[];
  // Compute/Code are constrained to exactly one output port (per port-value model).
  const _sid=node.type||node.skillId;
  const singleOut=_sid==='compute'||_sid==='code';

  ['inputs','outputs'].forEach(side=>{
    const sec=document.createElement('div');sec.className='io-section';
    const hdr=document.createElement('div');hdr.className='io-section-hdr';
    const lbl=document.createElement('span');lbl.className='io-lbl';
    lbl.textContent=side==='inputs'?'INPUTS':'OUTPUTS';
    const addBtn=document.createElement('button');addBtn.className='io-add-btn';addBtn.textContent='+ Add';
    addBtn.addEventListener('click',()=>{
      node[side].push({id:uid('p'),name:'',type:'Any'});
      refreshList();rebuildNode(node);
    });
    hdr.appendChild(lbl);
    // Constrained primitives: no Add on the outputs side (exactly one output port).
    if(!(singleOut&&side==='outputs'))hdr.appendChild(addBtn);
    sec.appendChild(hdr);

    const list=document.createElement('div');list.className='io-port-list';sec.appendChild(list);

    const refreshList=()=>{
      list.innerHTML='';
      if(!node[side].length){
        const empty=document.createElement('div');empty.className='io-empty';
        empty.textContent=side==='inputs'?'No inputs defined':'No outputs defined';
        list.appendChild(empty);return;
      }
      node[side].forEach((port,i)=>{
        const row=document.createElement('div');row.className='io-port-row';
        // Name
        const nameIn=document.createElement('input');nameIn.type='text';nameIn.className='io-port-name';
        nameIn.placeholder=side==='inputs'?'input name…':'output name…';
        nameIn.value=port.name||'';
        nameIn.addEventListener('input',()=>{node[side][i].name=nameIn.value;rebuildNode(node);});
        // Type select
        const typeSel=document.createElement('select');typeSel.className='io-port-type';
        PORT_TYPES.forEach(t=>{const o=document.createElement('option');o.value=t;o.textContent=t;if(t===port.type)o.selected=true;typeSel.appendChild(o);});
        typeSel.addEventListener('change',()=>{node[side][i].type=typeSel.value;rebuildNode(node);});
        // Delete
        const del=document.createElement('button');del.className='io-port-del';del.textContent='×';del.title='Remove';
        del.addEventListener('click',()=>{node[side].splice(i,1);refreshList();rebuildNode(node);});
        // Never allow deleting the last output — a node with zero output sockets
        // is a dead end (can't be wired downstream). To end a pipeline, just leave
        // the final node's output unconnected.
        if(side==='outputs'&&node.outputs.length<=1){del.style.display='none';del.title='At least one output required';}
        row.appendChild(nameIn);row.appendChild(typeSel);row.appendChild(del);list.appendChild(row);
      });
    };
    refreshList();
    container.appendChild(sec);
  });
}

// Edit-time fetch for the FETCH primitive. Resolves a URL into the node's stored
// values.content (body) and values._meta (useful response metadata) so the node is a
// plain producer at run time. Failures clear prior content so stale data can't ship.
// Backend options:
//   'Direct'            — plain fetch, subject to browser CORS.
//   'Proxy (HTML)'      — routes through AllOrigins; returns raw HTML for inspection.
//   'Proxy (Markdown)'  — routes through Jina Reader (r.jina.ai); returns clean markdown
//                         article text, stripped of nav/CSS — ideal for LLM consumption.
// Proxies don't forward custom request headers, so the Headers field is dropped under
// either proxy mode. Backward-compat: v48 saved 'Proxy' — mapped to 'Proxy (HTML)'.
// ---------------------------------------------------------------------------
// Multi-file FILE primitive helpers (v48.12). Mirrors the FETCH delimiter
// contract so downstream atoms can grep file-boundary markers identically
// regardless of whether sources came from FETCH or FILE. Single-file output
// (1 entry) is byte-identical to v48.11 — raw content, no marker. Browser
// File.type is unreliable for many text formats (.md often empty); extension
// fallback covers the common cases GUIness pipelines actually see.
function _resolveFileMime(file){
  let mime=(file.type||'').trim();
  if(!mime||mime==='application/octet-stream'){
    const m=(file.name||'').match(/\.([a-z0-9]+)$/i);
    const ext=m?m[1].toLowerCase():'';
    const extMap={
      md:'text/markdown',markdown:'text/markdown',mdx:'text/markdown',
      txt:'text/plain',log:'text/plain',
      csv:'text/csv',tsv:'text/tab-separated-values',
      json:'application/json',jsonl:'application/jsonl',ndjson:'application/jsonl',
      html:'text/html',htm:'text/html',
      xml:'application/xml',svg:'image/svg+xml',
      yaml:'text/yaml',yml:'text/yaml',toml:'text/toml',
      js:'text/javascript',mjs:'text/javascript',cjs:'text/javascript',jsx:'text/javascript',
      ts:'text/typescript',tsx:'text/typescript',
      py:'text/x-python',rb:'text/x-ruby',go:'text/x-go',rs:'text/x-rust',
      java:'text/x-java',kt:'text/x-kotlin',swift:'text/x-swift',
      c:'text/x-c',h:'text/x-c',cpp:'text/x-c++',hpp:'text/x-c++',cc:'text/x-c++',
      cs:'text/x-csharp',php:'text/x-php',
      sh:'text/x-shellscript',bash:'text/x-shellscript',zsh:'text/x-shellscript',
      ps1:'text/x-powershell',
      sql:'text/x-sql',
      css:'text/css',scss:'text/css',sass:'text/css',less:'text/css',
      tf:'text/x-terraform',hcl:'text/x-terraform',tfvars:'text/x-terraform',
      dockerfile:'text/x-dockerfile',
      ini:'text/x-ini',conf:'text/plain',env:'text/plain',gitignore:'text/plain'
    };
    if(ext&&extMap[ext])mime=extMap[ext];
  }
  // text/* is always readable. SVG and a few application/* types are XML-ish text.
  const isText=mime.startsWith('text/')||
               mime==='application/json'||
               mime==='application/jsonl'||
               mime==='application/xml'||
               mime==='application/javascript'||
               mime==='image/svg+xml';
  return {mime:mime||'application/octet-stream',isText};
}
function _readOneFile(file){
  return new Promise(resolve=>{
    const {mime,isText}=_resolveFileMime(file);
    const base={name:file.name,size:file.size,lastModified:file.lastModified,mime,isText};
    if(!isText){
      // Don't read binary — record metadata only so the marker surfaces an unsupported entry.
      resolve({...base,content:'',error:'binary format, text extraction not enabled'});
      return;
    }
    const reader=new FileReader();
    reader.onload=ev=>resolve({...base,content:ev.target.result||'',error:null});
    reader.onerror=()=>resolve({...base,content:'',error:'read error: '+(reader.error?.message||'unknown')});
    reader.readAsText(file);
  });
}
function _fileEntryKey(f){return (f.name||'')+'|'+(f.size||0)+'|'+(f.lastModified||0);}
function _buildFileMultiContent(files){
  if(!files||files.length===0)return '';
  if(files.length===1){
    // Legacy-compatible single-file output: raw content, no marker. Binary returns '' so
    // downstream consumers don't get data-URL garbage they can't parse.
    return files[0].isText?(files[0].content||''):'';
  }
  return files.map((ff,i)=>{
    const sizeKb=(ff.size/1024).toFixed(ff.size<10240?1:0);
    const header='=== FILE '+(i+1)+' OF '+files.length+': '+ff.name+' ['+ff.mime+', '+sizeKb+'KB] ===';
    if(ff.isText){
      return header+'\n[✓ '+ff.mime+']\n\n'+(ff.content||'');
    }
    return header+'\n[✗ ERROR — '+(ff.error||'unsupported format')+']\n\n[No content captured. Downstream atoms should treat this surface as unavailable.]';
  }).join('\n\n');
}
function _buildFileMultiStatus(files){
  if(!files||files.length===0)return {text:'No files',color:'var(--dim)'};
  if(files.length===1){
    const ff=files[0];
    if(!ff.isText)return {text:'⚠ '+ff.name+' — unsupported',color:'var(--org)'};
    return {text:'✓ '+ff.name+' ('+Math.round(ff.size/1024)+'KB)',color:'var(--grn)'};
  }
  const okCount=files.filter(ff=>ff.isText).length;
  const failCount=files.length-okCount;
  if(failCount===0)return {text:'✓ '+okCount+'/'+files.length,color:'var(--grn)'};
  return {text:'⚠ '+okCount+'/'+files.length+' — '+failCount+' unsupported',color:'var(--org)'};
}
// ---------------------------------------------------------------------------

// Per-node in-memory cache for multi-URL FETCH. Keyed by node.id.
// Value shape: { [url]: { success: bool, content: string, status: int, size: int, error: string } }
// Not persisted — wiped on page reload. After reload, "Retry failed" is unavailable;
// user re-runs the whole list via the main Fetch button. Concatenated final content
// is still persisted via node.values.content as before.
const _fetchCacheByNode = new Map();

// Multi-URL FETCH dispatcher. Parses the URL field for newline-delimited list,
// dispatches to single-URL path (verbatim v48.10 behavior) or multi-URL path.
// mode: 'all' (default) refetches everything; 'retry' skips URLs already cached as success.
async function doFetchNode(node,statusEl,btnEl,mode){
  if(mode===undefined)mode='all';
  // Parse the URL field. Newline-delimited; '#' prefix = comment line; blank lines ignored.
  // Single URL (no newlines or only one effective entry) behaves exactly as v48.10.
  const rawUrlField=(node.values?.url||'').trim();
  const urls=rawUrlField.split('\n')
    .map(s=>s.trim())
    .filter(s=>s&&!s.startsWith('#'))
    .map(s=>s.includes('://')?s:'https://'+s);
  const setStatus=(msg,color)=>{
    node.values._fetchStatus=msg;
    if(statusEl){statusEl.textContent=msg;statusEl.style.color=color||'var(--dim)';}
  };
  if(urls.length===0){setStatus('No URL to fetch.','var(--dim)');return;}
  let backend=node.values?.backend||'Direct';
  if(backend==='Proxy')backend='Proxy (HTML)'; // v48 → v48.2 migration
  if(urls.length===1){
    // Single-URL path: original v48.10 body, unchanged. Drop any stale multi-URL cache.
    _fetchCacheByNode.delete(node.id);
    await _doFetchSingle(node,urls[0],backend,statusEl,btnEl,setStatus);
    return;
  }
  // Multi-URL path.
  await _doFetchMulti(node,urls,backend,statusEl,btnEl,setStatus,mode);
}

// Original v48.10 single-URL fetch logic, extracted verbatim. Behavior preserved.
async function _doFetchSingle(node,url,backend,statusEl,btnEl,setStatus){
  node.values.url=url; // persist normalized URL (https:// prepend) — single-URL only
  // Parse "Key: Value" header lines (one per line). Dropped when proxying.
  const isProxy=backend==='Proxy (HTML)'||backend==='Proxy (Markdown)';
  const headers={};
  if(!isProxy){
    (node.values?.headers||'').split('\n').forEach(line=>{
      const i=line.indexOf(':');if(i<0)return;
      const k=line.slice(0,i).trim(),v=line.slice(i+1).trim();
      if(k)headers[k]=v;
    });
  }
  let fetchUrl;
  if(backend==='Proxy (HTML)'){
    fetchUrl='https://api.allorigins.win/raw?url='+encodeURIComponent(url);
  }else if(backend==='Proxy (Markdown)'){
    fetchUrl='https://r.jina.ai/'+url; // Jina takes the URL inline, not URL-encoded
  }else{
    fetchUrl=url;
  }
  if(btnEl){btnEl.disabled=true;btnEl.textContent='⬇ Fetching…';}
  const fetchingLabel=backend==='Proxy (HTML)'?'Fetching via AllOrigins (HTML)…':
                       backend==='Proxy (Markdown)'?'Fetching via Jina (Markdown)…':'Fetching…';
  setStatus(fetchingLabel,'var(--dim)');
  try{
    const resp=await fetch(fetchUrl,{headers,method:'GET'});
    const body=await resp.text();
    // Defensive Markdown check: Jina sometimes returns HTML when it can't render the
    // target (JS-heavy SPA, anti-bot, etc.). Don't let HTML leak into downstream nodes
    // that expect clean prose — surface a discoverable fix instead.
    if(backend==='Proxy (Markdown)'&&resp.ok){
      const head=body.trimStart().slice(0,15).toLowerCase();
      if(head.startsWith('<!doctype')||head.startsWith('<html')){
        node.values.content='';node.values._meta='';
        setStatus('✗ Jina returned HTML, not markdown — try switching Backend to Proxy (HTML).','var(--org)');
        markPipelineDirty(activePipelineId);rebuildNode(node);renderInspector();
        return;
      }
    }
    const meta={
      status:resp.status,
      statusText:resp.statusText,
      contentType:resp.headers.get('content-type')||null,
      contentLength:resp.headers.get('content-length')||null,
      backend
    };
    node.values.content=body;
    node.values._meta=JSON.stringify(meta,null,2);
    const suffix=backend==='Proxy (HTML)'?' (via proxy)':backend==='Proxy (Markdown)'?' (via Jina)':'';
    setStatus('✓ '+resp.status+' '+resp.statusText+' — '+Math.round(body.length/1024)+'KB'+suffix,resp.ok?'var(--grn)':'var(--org)');
    markPipelineDirty(activePipelineId);
    rebuildNode(node);renderInspector();
  }catch(err){
    // Network error or CORS block — the browser won't expose details for cross-origin denials.
    node.values.content='';
    node.values._meta='';
    let msg;
    if(backend==='Proxy (Markdown)'){
      msg='✗ Jina fetch failed — try Proxy (HTML) backend, or check the URL.';
    }else if(backend==='Proxy (HTML)'){
      msg='✗ AllOrigins fetch failed — service may be down or rate-limiting. Try Proxy (Markdown) for content extraction.';
    }else{
      msg='✗ Fetch failed — likely CORS block. Try Proxy (Markdown) for content, or Proxy (HTML) for raw page.';
    }
    setStatus(msg,'var(--org)');
    markPipelineDirty(activePipelineId);
    rebuildNode(node);renderInspector();
  }finally{
    if(btnEl){btnEl.disabled=false;btnEl.textContent='⬇ Fetch';}
  }
}

// Multi-URL path. Sequential fetch with in-memory cache; partial failures don't fail the node.
async function _doFetchMulti(node,urls,backend,statusEl,btnEl,setStatus,mode){
  const cache=_fetchCacheByNode.get(node.id)||{};
  // Drop cache entries for URLs no longer in the list (user edited list between runs).
  Object.keys(cache).forEach(u=>{if(!urls.includes(u))delete cache[u];});
  if(btnEl){btnEl.disabled=true;btnEl.textContent='⬇ Fetching…';}
  let failedCount=0;
  for(let i=0;i<urls.length;i++){
    const url=urls[i];
    const reuse=mode==='retry'&&cache[url]&&cache[url].success===true;
    if(!reuse){
      setStatus('Fetching '+(i+1)+'/'+urls.length+'…','var(--dim)');
      cache[url]=await _fetchOneUrl(url,backend,node);
    }
    if(!cache[url].success)failedCount++;
  }
  _fetchCacheByNode.set(node.id,cache);
  // Build concatenated content in original URL order.
  const contentParts=[],metaParts=[];
  urls.forEach((url,idx)=>{
    const r=cache[url];
    const header='=== FILE '+(idx+1)+' OF '+urls.length+': '+url+' ===';
    if(r.success){
      const sizeKb=Math.round((r.content||'').length/1024);
      contentParts.push(header+'\n[✓ '+r.status+' OK · '+sizeKb+'KB · '+backend+']\n\n'+r.content);
    }else{
      contentParts.push(header+'\n[✗ ERROR — '+r.error+']\n\n[No content fetched. Downstream atoms should treat this surface as unavailable.]');
    }
    metaParts.push({url,success:r.success,status:r.status,size:r.size,error:r.error,backend});
  });
  node.values.content=contentParts.join('\n\n');
  node.values._meta=JSON.stringify({multiUrl:true,urlCount:urls.length,failedCount,results:metaParts},null,2);
  // Never fail the node on partial failure — surface the count so the user knows.
  if(failedCount===0){
    setStatus('✓ '+urls.length+'/'+urls.length,'var(--grn)');
  }else{
    setStatus('⚠ '+(urls.length-failedCount)+'/'+urls.length+' — '+failedCount+' failed','var(--org)');
  }
  markPipelineDirty(activePipelineId);
  rebuildNode(node);
  renderInspector(); // re-render so the "Retry failed" button shows/hides per new cache state
  if(btnEl){btnEl.disabled=false;btnEl.textContent='⬇ Fetch';}
}

// Pure fetch helper for the multi-URL path. Returns a plain result object; no UI side effects.
async function _fetchOneUrl(url,backend,node){
  const isProxy=backend==='Proxy (HTML)'||backend==='Proxy (Markdown)';
  const headers={};
  if(!isProxy){
    (node.values?.headers||'').split('\n').forEach(line=>{
      const i=line.indexOf(':');if(i<0)return;
      const k=line.slice(0,i).trim(),v=line.slice(i+1).trim();
      if(k)headers[k]=v;
    });
  }
  let fetchUrl;
  if(backend==='Proxy (HTML)'){
    fetchUrl='https://api.allorigins.win/raw?url='+encodeURIComponent(url);
  }else if(backend==='Proxy (Markdown)'){
    fetchUrl='https://r.jina.ai/'+url;
  }else{
    fetchUrl=url;
  }
  try{
    const resp=await fetch(fetchUrl,{headers,method:'GET'});
    const body=await resp.text();
    // Same defensive Markdown check as single-URL: Jina sometimes returns HTML for SPAs.
    if(backend==='Proxy (Markdown)'&&resp.ok){
      const head=body.trimStart().slice(0,15).toLowerCase();
      if(head.startsWith('<!doctype')||head.startsWith('<html')){
        return {success:false,content:'',status:resp.status,size:0,error:'Jina returned HTML, not markdown'};
      }
    }
    return {
      success:resp.ok,
      content:resp.ok?body:'',
      status:resp.status,
      size:body.length,
      error:resp.ok?null:(resp.status+' '+(resp.statusText||'')).trim()
    };
  }catch(err){
    return {success:false,content:'',status:0,size:0,error:'Network error or CORS block'};
  }
}


// Renders the right inspector panel for the currently selected node/skill
function renderInspector(){
  const ph=document.getElementById('insp-placeholder');
  const form=document.getElementById('insp-form');
  const ifields=document.getElementById('insp-fields');
  const icontent=document.getElementById('insp-content');
  const igraph=document.getElementById('insp-graph-tab');

  const sk=selSkillId?getSk(selSkillId):null;
  inspCurrentId=selSkillId;

  if(!sk){
    ph.style.display='block';form.style.display='none';
    showTabRegion(false);
    ifields.style.display='none';icontent.style.display='none';igraph.style.display='none';
    return;
  }

  ph.style.display='none';form.style.display='block';
  showTabRegion(true);
  // Hide Deps and Graph tabs for builtin primitives
  const _isPrimitive=sk.isBuiltin&&sk.id!=='graph-input'&&sk.id!=='graph-output';
  document.querySelectorAll('.itab').forEach(tab=>{
    const tabId=tab.dataset.tab;
    if(_isPrimitive&&tabId==='graph'){tab.style.display='none';}
    else{tab.style.display='';}
  });
  if(_isPrimitive&&activeTab==='graph'){activeTab='content';showInspTab();}
  // Per-instance values take precedence when a canvas node is selected
  const canvasNode=selNode?getNodes().find(n=>n.id===selNode):null;
  const displayColor=canvasNode?.color||sk.color;
  const displayGlyph=canvasNode?.glyph||sk.glyph;
  const displayShape=canvasNode?.shape||sk.shape||'default';
  const displayLabel=canvasNode?.title||sk.label;
  const color=cx(displayColor);

  document.getElementById('if-glyph').textContent=displayGlyph;
  document.getElementById('if-glyph').style.color=color;
  document.getElementById('if-name').value=displayLabel;
  document.getElementById('if-name').style.color=color;
  document.getElementById('if-id').textContent=sk.id;
  document.getElementById('if-desc').value=sk.desc||'';
  setTimeout(()=>{const ta=document.getElementById('if-desc');ta.style.height='auto';ta.style.height=ta.scrollHeight+'px';},0);
  _currentColorId=displayColor||Object.keys(COLORS)[0];
  document.getElementById('color-swatch').style.background=cx(_currentColorId);
  document.getElementById('shape-sel').value=displayShape;
  const catSel=document.getElementById('cat-sel');
  const cats=[...catSel.options].map(o=>o.value);
  catSel.value=cats.includes(sk.category)?sk.category:'custom';
  document.getElementById('builtin-badge').classList.toggle('hidden',!sk.isBuiltin);
  renderTagsRow(sk);

  // Canvas node built-in fields (canvasNode already declared above)
  if(canvasNode){
    ifields.style.display='flex';ifields.innerHTML='';
    let deferredContentField=null;

    // Node title (instance-level override)
    // Node title — editable via double-click on the name field above
    if(sk.fields?.length){
    sk.fields.forEach(f=>{
      const w=document.createElement('div');
      if(f.type==='codeeditor-lang'){
        // Render language row inline without a separate label div
        w.className='code-lang-bar';w.style.marginBottom='4px';
        const lspan=document.createElement('span');lspan.className='flbl';lspan.style.marginBottom='0';lspan.textContent='Language';w.appendChild(lspan);
        const sel=document.createElement('select');sel.className='code-lang-sel';
        (f.opts||[]).forEach(o=>{const opt=document.createElement('option');opt.value=o;opt.textContent=o;if(canvasNode.values?.[f.key]===o)opt.selected=true;sel.appendChild(opt);});
        sel.addEventListener('change',()=>{canvasNode.values[f.key]=sel.value;rebuildNode(canvasNode);});
        w.appendChild(sel);ifields.appendChild(w);return;
      }
      const l=document.createElement('div');l.className='flbl';l.textContent=f.label;if(f.label)w.appendChild(l);
      let ctrl;
      if(f.type==='textarea'){ctrl=document.createElement('textarea');ctrl.rows=f.rows||3;ctrl.placeholder=f.ph||'';ctrl.value=canvasNode.values?.[f.key]||'';ctrl.addEventListener('input',()=>{canvasNode.values[f.key]=ctrl.value;markPipelineDirty(activePipelineId);});}
      else if(f.type==='medialist'){
        // Dynamic add/delete media list
        if(!Array.isArray(canvasNode.values[f.key]))canvasNode.values[f.key]=[];
        const items=canvasNode.values[f.key];
        ctrl=document.createElement('div');ctrl.className='media-list';
        const MEDIA_TYPES=['Image','Video','Audio','File','Link'];
        const refreshList=()=>{
          ctrl.innerHTML='';
          items.forEach((item,i)=>{
            const row=document.createElement('div');row.className='media-item';
            const urlIn=document.createElement('input');urlIn.type='text';urlIn.className='media-item-url';urlIn.placeholder='https://…';urlIn.value=item.url||'';
            urlIn.addEventListener('input',()=>{items[i].url=urlIn.value;markPipelineDirty(activePipelineId);});
            const typeSel=document.createElement('select');typeSel.className='media-item-type';
            MEDIA_TYPES.forEach(t=>{const o=document.createElement('option');o.value=t;o.textContent=t;if(t===item.type)o.selected=true;typeSel.appendChild(o);});
            typeSel.addEventListener('change',()=>{items[i].type=typeSel.value;rebuildNode(canvasNode);});
            const del=document.createElement('button');del.className='media-item-del';del.textContent='×';del.title='Remove';
            del.addEventListener('click',()=>{items.splice(i,1);refreshList();rebuildNode(canvasNode);});
            row.appendChild(urlIn);row.appendChild(typeSel);row.appendChild(del);ctrl.appendChild(row);
          });
          const addRow=document.createElement('div');addRow.className='media-add-row';
          const addBtn=document.createElement('button');addBtn.className='media-add-btn';addBtn.textContent='+ Add Media';
          addBtn.addEventListener('click',()=>{items.push({url:'',type:'Image'});refreshList();rebuildNode(canvasNode);});
          addRow.appendChild(addBtn);ctrl.appendChild(addRow);
        };
        refreshList();
      }
      else if(f.type==='codeeditor'){
        // Code textarea with copy button
        ctrl=document.createElement('div');ctrl.className='code-field-wrap';
        const bar=document.createElement('div');bar.className='code-lang-bar';
        const copyBtn=document.createElement('button');copyBtn.className='code-copy-btn';copyBtn.textContent='Copy';
        copyBtn.addEventListener('click',()=>{
          navigator.clipboard.writeText(canvasNode.values?.[f.key]||'').then(()=>{copyBtn.textContent='✓';setTimeout(()=>copyBtn.textContent='Copy',1500);});
        });
        bar.appendChild(copyBtn);ctrl.appendChild(bar);
        const ta=document.createElement('textarea');ta.className='code-textarea';ta.rows=f.rows||10;ta.placeholder=f.ph||'';ta.value=canvasNode.values?.[f.key]||'';ta.spellcheck=false;
        // Tab key inserts spaces
        ta.addEventListener('keydown',e=>{if(e.key==='Tab'){e.preventDefault();const s=ta.selectionStart,end=ta.selectionEnd;ta.value=ta.value.slice(0,s)+'  '+ta.value.slice(end);ta.selectionStart=ta.selectionEnd=s+2;}});
        ta.addEventListener('input',()=>{canvasNode.values[f.key]=ta.value;markPipelineDirty(activePipelineId);});
        ta.addEventListener('change',()=>rebuildNode(canvasNode)); // sync on-node drawer on blur
        ctrl.appendChild(ta);
      }
      else if(f.type==='jsonschema'){
        // JSON Schema editor for per-Code-node GPT tool parameters.
        // Saves raw text as-is; export parses lazily and falls back to default on failure.
        ctrl=document.createElement('div');ctrl.className='code-field-wrap';
        const bar=document.createElement('div');bar.className='code-lang-bar';
        const tplBtn=document.createElement('button');tplBtn.className='code-copy-btn';tplBtn.textContent='Insert default template';
        bar.appendChild(tplBtn);ctrl.appendChild(bar);
        const ta=document.createElement('textarea');ta.className='code-textarea';ta.rows=f.rows||8;ta.placeholder=f.ph||'';ta.value=canvasNode.values?.[f.key]||'';ta.spellcheck=false;
        ta.addEventListener('keydown',e=>{if(e.key==='Tab'){e.preventDefault();const s=ta.selectionStart,end=ta.selectionEnd;ta.value=ta.value.slice(0,s)+'  '+ta.value.slice(end);ta.selectionStart=ta.selectionEnd=s+2;}});
        ctrl.appendChild(ta);
        const status=document.createElement('div');status.style.cssText='font-family:var(--mono);font-size:10px;margin-top:4px;min-height:14px';
        ctrl.appendChild(status);
        const updateStatus=()=>{
          const v=ta.value.trim();
          if(!v){status.textContent='Empty — will use default { input: string }';status.style.color='var(--dim)';return;}
          try{JSON.parse(v);status.textContent='✓ Valid JSON';status.style.color='var(--grn)';}
          catch(e){status.textContent='✗ '+e.message;status.style.color='var(--red)';}
        };
        ta.addEventListener('input',()=>{canvasNode.values[f.key]=ta.value;updateStatus();markPipelineDirty(activePipelineId);});
        tplBtn.addEventListener('click',()=>{
          const tpl=JSON.stringify({type:'object',properties:{input:{type:'string',description:'Text input to process through this step'}},required:['input']},null,2);
          ta.value=tpl;canvasNode.values[f.key]=tpl;updateStatus();markPipelineDirty(activePipelineId);
        });
        updateStatus();
      }
      else if(f.type==='select'){ctrl=document.createElement('select');ctrl.innerHTML='<option value="">— choose —</option>'+(f.opts||[]).map(o=>`<option${canvasNode.values?.[f.key]===o?' selected':''}>${o}</option>`).join('');ctrl.addEventListener('change',()=>{canvasNode.values[f.key]=ctrl.value;rebuildNode(canvasNode);});
        // FETCH backend: fire fetch on change if URL is already filled (parallel to the URL-blur trigger below).
        if(sk.id==='fetch'&&f.key==='backend'){
          ctrl.addEventListener('change',()=>{if((canvasNode.values?.url||'').trim())doFetchNode(canvasNode);});
          // v48.13 — third-party-proxy disclosure. Inline caption under the select
          // makes the trust boundary visible at the point of choice. Label was already
          // appended to w above the type-dispatch; we add ctrl + caption then return
          // early to skip the generic w.appendChild(ctrl) below.
          w.appendChild(ctrl);
          const cap=document.createElement('div');
          cap.style.cssText='font-size:9px;color:var(--dim);margin-top:4px;line-height:1.4';
          const PROXY_NOTE={
            'Proxy (HTML)':'⚠ Routes through api.allorigins.win — your URL and the response pass through a third-party server.',
            'Proxy (Markdown)':'⚠ Routes through r.jina.ai — your URL and the response pass through a third-party server.',
            'Direct':'Direct fetch — no third-party hop. Subject to browser CORS.'
          };
          const updateCap=()=>{cap.textContent=PROXY_NOTE[ctrl.value]||'';};
          updateCap();
          ctrl.addEventListener('change',updateCap);
          w.appendChild(cap);
          ifields.appendChild(w);
          return;
        }
      }
      else if(f.type==='content_preview'){
        // Captured content (instance-scoped values.content). Editable when text, so the
        // user can tweak imported file/URL content before sending. Binary data URLs stay
        // read-only (editing a base64 blob would corrupt it).
        const val=canvasNode.values?.[f.key]||'';
        if(val.startsWith('data:')){
          ctrl=document.createElement('div');
          const box=document.createElement('div');
          box.style.cssText='font-family:var(--mono);font-size:9px;line-height:1.4;color:var(--txt);background:var(--panel);border:1px solid var(--brd);border-radius:4px;padding:6px 8px;max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-word';
          box.textContent='[binary content — '+Math.round(val.length/1024)+'KB data URL]';
          ctrl.appendChild(box);
        }else{
          const ta=document.createElement('textarea');ta.className='code-textarea';ta.rows=12;ta.spellcheck=false;
          ta.style.cssText='font-family:var(--mono);font-size:9px;line-height:1.4;max-height:60vh';
          ta.placeholder='No content captured yet.';ta.value=val;
          ta.addEventListener('input',()=>{canvasNode.values[f.key]=ta.value;markPipelineDirty(activePipelineId);});
          ta.addEventListener('change',()=>rebuildNode(canvasNode)); // sync on-node drawer on blur
          ctrl=ta;
        }
      }
      else if(f.type==='meta_preview'){
        // Read-only response metadata (instance-scoped values._meta JSON string).
        const val=canvasNode.values?.[f.key]||'';
        ctrl=document.createElement('div');
        const box=document.createElement('div');
        box.style.cssText='font-family:var(--mono);font-size:9px;line-height:1.4;background:var(--panel);border:1px solid var(--brd);border-radius:4px;padding:6px 8px;max-height:140px;overflow:auto;white-space:pre-wrap;word-break:break-word';
        if(val){box.textContent=val;box.style.color='var(--txt)';}
        else{box.textContent='No response yet.';box.style.color='var(--dim)';box.style.fontStyle='italic';}
        ctrl.appendChild(box);
      }
      else if(f.type==='fetch_trigger'){
        ctrl=document.createElement('div');ctrl.className+=' flex-col-gap';
        const btn=document.createElement('button');btn.className='mbtn';btn.textContent='⬇ Fetch';btn.style.cssText='font-size:9px;align-self:flex-start';
        // Retry-failed button: only visible when the in-memory multi-URL cache has at least
        // one failed URL for this node. Disappears after a successful full re-fetch.
        const retryBtn=document.createElement('button');retryBtn.className='mbtn';retryBtn.textContent='↻ Retry failed';retryBtn.style.cssText='font-size:9px;align-self:flex-start';
        const cache=_fetchCacheByNode.get(canvasNode.id);
        const hasFailed=cache&&Object.values(cache).some(r=>!r.success);
        if(!hasFailed)retryBtn.style.display='none';
        const status=document.createElement('div');status.style.cssText='font-family:var(--mono);font-size:8px;color:var(--dim)';
        status.textContent=canvasNode.values?._fetchStatus||'';
        btn.addEventListener('click',()=>doFetchNode(canvasNode,status,btn));
        retryBtn.addEventListener('click',()=>doFetchNode(canvasNode,status,retryBtn,'retry'));
        ctrl.appendChild(btn);ctrl.appendChild(retryBtn);ctrl.appendChild(status);
      }
      else if(f.type==='file_upload'){
        // Multi-file FILE primitive (v48.12). Same delimiter contract as multi-URL FETCH:
        // single entry → byte-identical to v48.11 (raw content, no marker); 2+ entries →
        // `=== FILE N OF M: name [mime, sizeKB] ===` markers with [✓ ...]/[✗ ERROR — ...]
        // blocks. Legacy single-file pipelines migrate on first render.
        ctrl=document.createElement('div');ctrl.className+=' flex-col-gap';
        ctrl.style.cssText+=';border:1px dashed var(--dim);border-radius:6px;padding:6px;';
        const fkey=f.key+'_files';
        // Lazy migrate legacy single-file state into the _files array.
        if(!Array.isArray(canvasNode.values?.[fkey])){
          const legacyName=canvasNode.values?.[f.key+'_name'];
          const legacyContent=canvasNode.values?.[f.key];
          if(legacyName&&typeof legacyContent==='string'&&!legacyContent.startsWith('data:')){
            canvasNode.values[fkey]=[{
              name:legacyName,size:legacyContent.length,lastModified:0,
              mime:_resolveFileMime({name:legacyName,type:''}).mime,
              isText:true,content:legacyContent,error:null
            }];
          }else{
            canvasNode.values[fkey]=[];
          }
        }
        const files=canvasNode.values[fkey];
        const refreshContent=()=>{
          canvasNode.values.content=_buildFileMultiContent(files);
          markPipelineDirty(activePipelineId);
          rebuildNode(canvasNode);
          renderInspector();
        };
        const addFiles=async(fileList)=>{
          const incoming=Array.from(fileList||[]);
          if(incoming.length===0)return;
          const existing=new Set(files.map(_fileEntryKey));
          const reads=incoming
            .filter(file=>!existing.has(_fileEntryKey({name:file.name,size:file.size,lastModified:file.lastModified})))
            .map(_readOneFile);
          if(reads.length===0)return; // all duplicates
          const newEntries=await Promise.all(reads);
          files.push(...newEntries);
          refreshContent();
        };
        // Hidden multi-select input.
        const fileInput=document.createElement('input');
        fileInput.type='file';fileInput.multiple=true;fileInput.style.display='none';
        fileInput.addEventListener('change',e=>{addFiles(e.target.files);fileInput.value='';});
        // Header row: add + clear-all + status.
        const headerRow=document.createElement('div');
        headerRow.style.cssText='display:flex;gap:6px;align-items:center;flex-wrap:wrap;';
        const addBtn=document.createElement('button');
        addBtn.className='mbtn';addBtn.textContent='📁 Add Files';addBtn.style.cssText='font-size:9px';
        addBtn.addEventListener('click',()=>fileInput.click());
        headerRow.appendChild(addBtn);
        if(files.length>=2){
          const clearBtn=document.createElement('button');
          clearBtn.className='mbtn';clearBtn.textContent='✕ Clear';clearBtn.style.cssText='font-size:9px';
          clearBtn.addEventListener('click',()=>{files.length=0;refreshContent();});
          headerRow.appendChild(clearBtn);
        }
        const statusEl=document.createElement('div');
        statusEl.style.cssText='font-family:var(--mono);font-size:8px;margin-left:auto;';
        const st=_buildFileMultiStatus(files);
        statusEl.textContent=st.text;statusEl.style.color=st.color;
        headerRow.appendChild(statusEl);
        ctrl.appendChild(headerRow);
        // File list or drop hint.
        if(files.length>0){
          const list=document.createElement('div');
          list.style.cssText='display:flex;flex-direction:column;gap:3px;';
          files.forEach((ff,idx)=>{
            const row=document.createElement('div');
            row.style.cssText='display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:8px;';
            const icon=document.createElement('span');
            icon.textContent=ff.isText?'✓':'⚠';
            icon.style.color=ff.isText?'var(--grn)':'var(--org)';
            const name=document.createElement('span');
            name.textContent=ff.name;
            name.style.cssText='flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
            const meta=document.createElement('span');
            meta.textContent=ff.mime+' · '+Math.round(ff.size/1024)+'KB';
            meta.style.color='var(--dim)';
            const rm=document.createElement('button');
            rm.className='mbtn';rm.textContent='✕';rm.style.cssText='font-size:8px;padding:1px 4px;';
            rm.addEventListener('click',()=>{files.splice(idx,1);refreshContent();});
            row.appendChild(icon);row.appendChild(name);row.appendChild(meta);row.appendChild(rm);
            list.appendChild(row);
          });
          ctrl.appendChild(list);
        }else{
          const hint=document.createElement('div');
          hint.textContent='Drop files here or click "Add Files"';
          hint.style.cssText='font-family:var(--mono);font-size:8px;color:var(--dim);text-align:center;padding:4px;';
          ctrl.appendChild(hint);
        }
        ctrl.appendChild(fileInput);
        // Drag-and-drop on the ctrl container.
        ctrl.addEventListener('dragover',e=>{e.preventDefault();ctrl.style.borderColor='var(--accent)';});
        ctrl.addEventListener('dragleave',e=>{e.preventDefault();ctrl.style.borderColor='var(--dim)';});
        ctrl.addEventListener('drop',e=>{
          e.preventDefault();ctrl.style.borderColor='var(--dim)';
          if(e.dataTransfer?.files?.length)addFiles(e.dataTransfer.files);
        });
      }
      else if(f.type==='multicheck'){
        ctrl=document.createElement('div');ctrl.className='mc';
        (f.opts||[]).forEach(opt=>{
          const b=document.createElement('button');b.className='mcb';b.textContent=opt;
          const on=(canvasNode.values?.[f.key]||[]).includes(opt);
          if(on){b.classList.add('on');b.style.color=color;b.style.borderColor=color;b.style.background=color+'22';}
          b.addEventListener('click',()=>{const cur=canvasNode.values?.[f.key]||[];canvasNode.values[f.key]=cur.includes(opt)?cur.filter(x=>x!==opt):[...cur,opt];renderInspector();rebuildNode(canvasNode);});
          ctrl.appendChild(b);
        });
      }else{ctrl=document.createElement('input');ctrl.type='text';ctrl.placeholder=f.ph||'';ctrl.value=canvasNode.values?.[f.key]||'';ctrl.addEventListener('input',()=>{canvasNode.values[f.key]=ctrl.value;markPipelineDirty(activePipelineId);});
      }
      w.appendChild(ctrl);
      // content_preview renders AFTER the INPUTS/OUTPUTS editor (below OUTPUTS), so a tall
      // captured-content field doesn't push the port editor past the panel's clip edge.
      if(f.type==='content_preview'){deferredContentField=w;}
      else{ifields.appendChild(w);}
    });
    } // end if(sk.fields?.length)
    // Map projection line — when this is a Map node whose body contains Routers, show
    // an upper-bound estimate of LLM calls. Dim, no chrome; updates live via renderInspector.
    if(sk.id==='map'){
      const routers=routersInMapBody(canvasNode.id,getNodes(),getEdges());
      if(routers.length>0){
        const defLoops=CONFIG.DEFAULT_MAX_LOOPS;
        const iters=parseMaxIterations(canvasNode.values?.max_iterations,defLoops);
        let loopSum=0,defaultedCount=0;
        const nodeById=new Map(getNodes().map(n=>[n.id,n]));
        for(const rid of routers){
          const r=nodeById.get(rid);
          const raw=r?.values?.max_loops;
          if(raw==null||String(raw).trim()===''){loopSum+=defLoops;defaultedCount++;}
          else{loopSum+=(parseInt(String(raw),10)||defLoops);}
        }
        const projected=iters*(1+loopSum);
        const proj=document.createElement('div');
        proj.style.cssText='font-family:var(--mono);font-size:9px;color:var(--dim);line-height:1.4;padding:6px 0;border-top:1px solid var(--brd);margin-top:4px';
        const routerWord=routers.length===1?'Router':'Routers';
        const sumNote=defaultedCount>0?' (using default '+defLoops+' for '+defaultedCount+')':'';
        proj.textContent='\u26a0 Body contains '+routers.length+' '+routerWord+' (max '+loopSum+' loops'+sumNote+'). '+
          'With '+iters+' iteration'+(iters===1?'':'s')+', up to ~'+projected+' LLM call'+(projected===1?'':'s')+'.';
        ifields.appendChild(proj);
      }
    }
    // Start node toggle — shown for ALL canvas nodes
    const startRow=document.createElement('div');startRow.style.cssText='display:flex;align-items:center;gap:8px;padding-top:4px;border-top:1px solid var(--brd);margin-top:4px';
    const startCb=document.createElement('input');startCb.type='checkbox';startCb.id='start-cb';startCb.checked=!!canvasNode.isStart;startCb.style.cssText='width:auto;cursor:pointer;accent-color:var(--grn)';
    startCb.addEventListener('change',()=>{
      if(startCb.checked)getNodes().forEach(n=>{n.isStart=false;rebuildNode(n);});
      canvasNode.isStart=startCb.checked;rebuildNode(canvasNode);applySelStyle(selNode);
    });
    const startLbl=document.createElement('label');startLbl.htmlFor='start-cb';startLbl.style.cssText='font-family:var(--mono);font-size:9px;color:var(--grn);cursor:pointer';startLbl.textContent='Start Node';
    startRow.appendChild(startCb);startRow.appendChild(startLbl);ifields.appendChild(startRow);
    // I/O PORT EDITOR
    renderIOEditor(ifields, canvasNode, color);
    // Captured content goes last — below OUTPUTS — so it can be tall without clipping the ports.
    if(deferredContentField)ifields.appendChild(deferredContentField);
  } else {
    ifields.style.display='none';
  }

  // ── Primitive layout: unified scroll, no tabs ──
  if(_isPrimitive&&canvasNode){
    // Hide tab bar for primitives
    document.getElementById('insp-tabs').style.display='none';
    igraph.style.display='none';

    // For text_input, io_input, code: no rawContent, hide content section entirely
    if(!sk.rawContent||!sk.rawContent.trim()){
      icontent.style.display='none';
    }else{
      // For compute, router, context: show content below fields
      icontent.style.display='flex';
      if(!inspEditing||inspCurrentId!==selSkillId)setContentMode('view');
    }
  } else {
    // ── Standard layout: tabbed ──
    document.getElementById('insp-tabs').style.display='';
    // Show/hide tabs content based on active tab
    showInspTab();

    // Populate each tab
    if(sk.rawContent||!sk.isBuiltin){
      if(activeTab==='content'){
        if(!inspEditing||inspCurrentId!==selSkillId)setContentMode('view');
      }
    }else{
      // Built-in with no raw content — hide content tab panel
      if(activeTab==='content'){icontent.style.display='none';}
    }

    if(activeTab==='graph')renderGraphTab(sk);
  }
}

// ═══════════════════════════════════════════════════════════
// LIBRARY
// ═══════════════════════════════════════════════════════════
// ── Sort state ───────────────────────────────────────────
const _SORT_KEY='pb_lib_sort';
let _libSortMode='az'; // 'az'|'za'|'new'|'old'
try{const _sv=localStorage.getItem(_SORT_KEY);_libSortMode=_sv&&_sv!=='cat'?_sv:'az';}catch(e){}

// ── Category collapse state ──────────────────────────────
const _COLLAPSED_KEY='pb_collapsed_cats';
let _collapsedCats=new Set();
try{const s=localStorage.getItem(_COLLAPSED_KEY);if(s)_collapsedCats=new Set(JSON.parse(s));}catch(e){}
function _saveCollapsedCats(){try{localStorage.setItem(_COLLAPSED_KEY,JSON.stringify([..._collapsedCats]));}catch(e){}}

// ── Skill download as MD / JSON / ZIP ────────────────────
function _showDownloadMenu(sk,anchor){
  // Remove any existing menu
  document.getElementById('dl-skill-menu')?.remove();
  const menu=document.createElement('div');menu.id='dl-skill-menu';
  menu.style.cssText='position:fixed;background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:4px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px';

  const opts=[
    {label:'📄 Markdown (.md)',fn:()=>_downloadSkillAsMd(sk)},
    {label:'🧩 Skill (.sk)',fn:()=>_downloadSkillAsSk(sk)},
    {label:'🗜️ Skill (.skill)',fn:()=>_downloadSkillAsZip(sk)},
  ];

  // Viewport-aware positioning: flip above anchor if popup would overflow bottom edge.
  // Reachable since v48.6 added canvas right-click trigger (was previously only library-panel anchors).
  const rect=anchor.getBoundingClientRect();
  const popupH=opts.length*28+12, popupW=180;
  menu.style.left=Math.min(rect.left,window.innerWidth-popupW-8)+'px';
  menu.style.top=(rect.bottom+4+popupH>window.innerHeight
    ? Math.max(8,rect.top-popupH-4)
    : rect.bottom+4)+'px';

  opts.forEach(({label,fn})=>{
    const btn=document.createElement('button');
    btn.textContent=label;
    btn.style.cssText='font-family:var(--mono);font-size:10px;color:var(--dhi);background:transparent;border:none;padding:6px 12px;cursor:pointer;text-align:left;border-radius:4px;white-space:nowrap';
    btn.addEventListener('mouseenter',()=>btn.style.background='rgba(255,255,255,.05)');
    btn.addEventListener('mouseleave',()=>btn.style.background='transparent');
    btn.addEventListener('click',e=>{e.stopPropagation();fn();menu.remove();});
    menu.appendChild(btn);
  });

  document.body.appendChild(menu);
  // Close on click outside
  setTimeout(()=>{
    const close=e=>{if(!menu.contains(e.target)){menu.remove();document.removeEventListener('pointerdown',close);}};
    document.addEventListener('pointerdown',close);
  },0);
}

// CODE primitive lang → file extension. Used by per-node content download (_downloadNodeContent)
// and by .skill archive subnode export (_downloadSkillAsZip). Single source of truth.
const CODE_LANG_EXT={Python:'py',JavaScript:'js',TypeScript:'ts',Bash:'sh',SQL:'sql',Ruby:'rb',Go:'go',Rust:'rs',HTML:'html',CSS:'css',JSON:'json',YAML:'yaml'};

function _downloadSkillAsMd(sk){
  let md='---\n';
  md+='name: '+sk.label+'\n';
  if(sk.desc)md+='description: '+sk.desc+'\n';
  if(sk.category)md+='category: '+sk.category+'\n';
  if(sk.tags?.length)md+='tags: ['+sk.tags.join(', ')+']\n';
  md+='color: '+(sk.color||'blue')+'\n';
  md+='glyph: '+(sk.glyph||'◆')+'\n';
  md+='---\n\n';
  if(sk.rawContent)md+=sk.rawContent+'\n';
  if(sk.fields?.length){
    md+='\n## Fields\n\n';
    sk.fields.forEach(f=>md+='- **'+f.label+'** ('+f.type+')'+(f.ph?' — '+f.ph:'')+'\n');
  }
  const blob=new Blob([md],{type:'text/markdown'});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);
  a.download=(sk.label||'skill').toLowerCase().replace(/\s+/g,'-')+'.md';
  a.click();URL.revokeObjectURL(a.href);
}

function _downloadSkillAsSk(sk){
  const clean=structuredClone(sk);
  delete clean.isBuiltin;
  const blob=new Blob([JSON.stringify(clean,null,2)],{type:'application/json'});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);
  a.download=(sk.label||'skill').toLowerCase().replace(/\s+/g,'-')+'.sk';
  a.click();URL.revokeObjectURL(a.href);
}

async function _downloadSkillAsZip(sk){
  // Build a .skill zip with SKILL.md + fields + internal graph
  const files=[];
  const baseName=(sk.label||'skill').toLowerCase().replace(/\s+/g,'-');
  const dir=baseName+'/';

  // SKILL.md
  let skillMd='---\n';
  skillMd+='name: '+sk.label+'\n';
  if(sk.desc)skillMd+='description: '+sk.desc+'\n';
  if(sk.category)skillMd+='category: '+sk.category+'\n';
  if(sk.tags?.length)skillMd+='tags: ['+sk.tags.join(', ')+']\n';
  skillMd+='color: '+(sk.color||'blue')+'\n';
  skillMd+='glyph: '+(sk.glyph||'◆')+'\n';
  skillMd+='---\n\n';
  if(sk.rawContent)skillMd+=sk.rawContent;
  files.push({name:dir+'SKILL.md',data:new TextEncoder().encode(skillMd)});

  // Fields as fields.json
  if(sk.fields?.length){
    files.push({name:dir+'fields.json',data:new TextEncoder().encode(JSON.stringify(sk.fields,null,2))});
  }

  // Internal graph nodes as separate files
  const ig=sk.internalGraph;
  if(ig?.nodes?.length){
    ig.nodes.forEach((n,i)=>{
      const nsk=getSk(n.skillId);
      const nName=n.title||nsk?.label||('node-'+i);
      const safeName=nName.toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9-]/g,'');
      if(nsk?.id==='code'&&n.values?.code){
        const ext='.'+(CODE_LANG_EXT[n.values.lang]||'txt');
        files.push({name:dir+'scripts/'+safeName+ext,data:new TextEncoder().encode(n.values.code)});
      }else if(nsk?.id==='text_input'&&n.values?.content){
        files.push({name:dir+'content/'+safeName+'.txt',data:new TextEncoder().encode(n.values.content)});
      }else if(nsk?.id==='context'&&n.values?.variables){
        files.push({name:dir+'context/'+safeName+'.yaml',data:new TextEncoder().encode(n.values.variables)});
      }else if(nsk?.id==='compute'&&n.values?.instructions){
        files.push({name:dir+'steps/'+safeName+'.md',data:new TextEncoder().encode(n.values.instructions)});
      }
    });
    // Save graph structure
    files.push({name:dir+'graph.json',data:new TextEncoder().encode(JSON.stringify({nodes:ig.nodes,edges:ig.edges},null,2))});
  }

  // Ports
  if(sk.defaultInputs?.length||sk.defaultOutputs?.length){
    files.push({name:dir+'ports.json',data:new TextEncoder().encode(JSON.stringify({inputs:sk.defaultInputs,outputs:sk.defaultOutputs},null,2))});
  }

  // Build ZIP via shared helper (store method — no compression, simple and reliable)
  const blob=_makeZip(files);
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);
  a.download=baseName+'.skill';
  a.click();URL.revokeObjectURL(a.href);
}

// Patch a single library row in-place without rebuilding the entire panel.
// Used when only label/desc/glyph/color changed from the inspector.
function updateLibRow(skillId){
  const sk=getSk(skillId);if(!sk)return;
  const row=document.querySelector('.lib-row[data-sid="'+skillId+'"]');
  if(!row){renderLib();return;} // row not visible (filtered/collapsed) — fall back
  const ln=row.querySelector('.ln');if(ln){ln.textContent=sk.label;ln.style.color=cx(sk.color);}
  const ld=row.querySelector('.ld');if(ld)ld.textContent=(sk.desc||'').slice(0,38);
  const lg=row.querySelector('.lg');if(lg){lg.textContent=sk.glyph;lg.style.color=cx(sk.color);}
}

// Debounced renderLib for rapid-fire events (typing in inspector fields).
let _rlTimer=0;
function debouncedRenderLib(){clearTimeout(_rlTimer);_rlTimer=setTimeout(renderLib,150);}

// Renders the left library panel: tabs, search, categories, skill cards
function renderLib(){
  const f=document.getElementById('lib-search').value.toLowerCase();
  const list=document.getElementById('lib-list');list.innerHTML='';

  // Hide tag section and search on the PIPELINES tab — not applicable there
  const isPipelinesTab=activeLibTab==='pipelines';
  document.getElementById('tag-section').style.display=isPipelinesTab?'none':'';
  // Search bar stays visible on pipelines tab — it filters by name

  // PIPELINES tab — completely separate render path
  if(isPipelinesTab){
    const all=getAllKnownPipelines();
    const matched=all.filter(p=>!f||p.name.toLowerCase().includes(f));
    if(!all.length){
      const empty=document.createElement('div');
      empty.style.cssText='padding:24px 16px;text-align:center;font-size:10px;color:var(--dim);line-height:1.8';
      empty.innerHTML='No pipelines yet.<br><span style="font-size:9px">Save a pipeline to see it here.</span>';
      list.appendChild(empty);
    } else if(!matched.length){
      const empty=document.createElement('div');
      empty.style.cssText='padding:16px;text-align:center;font-size:10px;color:var(--dim)';
      empty.textContent='No pipelines match';
      list.appendChild(empty);
    } else {
      const open=matched.filter(p=>pipelines.some(op=>op.id===p.id));
      const closed=matched.filter(p=>!pipelines.some(op=>op.id===p.id));
      function renderPlSection(label,arr){
        if(!arr.length)return;
        const isCol=_collapsedCats.has('pl:'+label);
        const h=document.createElement('div');h.className='sec-hdr'+(isCol?' collapsed':'');
        const arrow=document.createElement('span');arrow.className='sec-arrow';arrow.textContent='▾';
        const hL=document.createElement('span');hL.textContent=label;hL.style.flex='1';
        const hC=document.createElement('span');hC.className='sec-count';hC.textContent=arr.length;
        h.appendChild(arrow);h.appendChild(hL);h.appendChild(hC);
        h.addEventListener('click',()=>{
          const k='pl:'+label;
          if(_collapsedCats.has(k))_collapsedCats.delete(k);else _collapsedCats.add(k);
          _saveCollapsedCats();renderLib();
        });
        list.appendChild(h);
        if(!isCol)arr.forEach(p=>list.appendChild(mkPipelineRow(p)));
      }
      renderPlSection('OPEN',open);
      renderPlSection('RECENTLY CLOSED',closed);
    }
    document.getElementById('skill-count').textContent=
      f ? matched.length+'/'+all.length+' pipeline'+(all.length!==1?'s':'')
        : all.length+' pipeline'+(all.length!==1?'s':'');
    return; // done
  }

  // Build tag filter panel — merges skill-derived tags with custom tags, works on all tabs
  const tabPool=getTabPool();
  const skillTags=[...new Set(skills.flatMap(s=>s.tags||[]))].sort(); // from ALL skills so tags don't vanish when filtering
  const allTags=[...new Set([...skillTags,...customFilterTags])].sort();
  const ftags=document.getElementById('lib-filter-tags');ftags.innerHTML='';
  const count=document.getElementById('tag-section-count');
  count.textContent=activeFilterTag?'1 active':'';
  allTags.forEach(tag=>{
    const b=document.createElement('button');
    b.className='ftag'+(activeFilterTag===tag?' on':'');
    // Label span
    const lbl=document.createElement('span');lbl.textContent=tag;
    b.appendChild(lbl);
    // Delete ×
    const x=document.createElement('span');x.className='ftag-x';x.textContent='×';
    x.title='Remove tag filter';
    x.addEventListener('click',e=>{
      e.stopPropagation();
      if(activeFilterTag===tag)activeFilterTag=null;
      customFilterTags=customFilterTags.filter(t=>t!==tag);
      // Also strip from all skills that have this tag (with confirm)
      const affected=skills.filter(s=>(s.tags||[]).includes(tag));
      if(affected.length&&confirm('Remove tag "'+tag+'" from '+affected.length+' skill(s) and delete it?')){
        affected.forEach(s=>s.tags=s.tags.filter(t=>t!==tag));
      }
      saveCustomTags();renderLib();
    });
    b.appendChild(x);
    b.addEventListener('click',()=>{activeFilterTag=activeFilterTag===tag?null:tag;renderLib();});
    ftags.appendChild(b);
  });

  let filtered=tabPool.filter(sk=>{
    if(f&&!sk.label.toLowerCase().includes(f)&&!sk.desc.toLowerCase().includes(f)&&!(sk.category||'').toLowerCase().includes(f)&&!(sk.tags||[]).some(t=>t.toLowerCase().includes(f)))return false;
    if(activeFilterTag&&!(sk.tags||[]).includes(activeFilterTag))return false;
    return true;
  });

  if(activeLibTab==='recent'){
    // Apply sort to recent tab
    const _rcmp=_libSortMode==='za'?(a,b)=>b.label.localeCompare(a.label)
      :_libSortMode==='new'?(a,b)=>(b._ts||0)-(a._ts||0)||(skills.indexOf(b)-skills.indexOf(a))
      :_libSortMode==='old'?(a,b)=>(a._ts||0)-(b._ts||0)||(skills.indexOf(a)-skills.indexOf(b))
      :(a,b)=>a.label.localeCompare(b.label);
    filtered.sort(_rcmp);
    // Show in flat list, no category groups
    if(!filtered.length){
      const empty=document.createElement('div');empty.className='empty-state';empty.textContent=recentSkillIds.length?'No recent skills match':'No recently used skills yet';list.appendChild(empty);
    } else {
      filtered.forEach(sk=>list.appendChild(mkLibRow(sk)));
    }
  } else {
    const groups={};
    filtered.forEach(sk=>{const c=sk.category||'Uncategorized';if(!groups[c])groups[c]=[];groups[c].push(sk);});
    // Sort skills within each category group
    const _cmp=_libSortMode==='za'?(a,b)=>b.label.localeCompare(a.label)
      :_libSortMode==='new'?(a,b)=>(b._ts||0)-(a._ts||0)||(skills.indexOf(b)-skills.indexOf(a))
      :_libSortMode==='old'?(a,b)=>(a._ts||0)-(b._ts||0)||(skills.indexOf(a)-skills.indexOf(b))
      :(a,b)=>a.label.localeCompare(b.label);
    Object.values(groups).forEach(sks=>sks.sort(_cmp));
    Object.entries(groups).sort().forEach(([cat,sks])=>{
      const isCollapsed=_collapsedCats.has(cat);
      const h=document.createElement('div');h.className='sec-hdr'+(isCollapsed?' collapsed':'');

      const arrow=document.createElement('span');arrow.className='sec-arrow';arrow.textContent='▾';
      const catSpan=document.createElement('span');catSpan.textContent=cat.toUpperCase().slice(0,22);catSpan.style.flex='1';
      const cntSpan=document.createElement('span');cntSpan.className='sec-count';cntSpan.textContent=sks.length;

      h.appendChild(arrow);h.appendChild(catSpan);h.appendChild(cntSpan);

      // Click to toggle collapse
      h.addEventListener('click',e=>{
        if(e.target.tagName==='INPUT')return;
        if(_collapsedCats.has(cat))_collapsedCats.delete(cat);
        else _collapsedCats.add(cat);
        _saveCollapsedCats();
        renderLib();
      });

      // Dblclick to rename category
      catSpan.addEventListener('dblclick',e=>{
        e.stopPropagation();
        const inp=document.createElement('input');
        inp.value=cat;inp.style.cssText='width:100%;background:transparent;border:none;outline:none;font-family:var(--mono);font-size:8px;color:var(--acc);letter-spacing:.12em';
        catSpan.replaceWith(inp);inp.focus();inp.select();
        const commit=()=>{
          const newCat=inp.value.trim()||cat;
          if(newCat!==cat){
            sks.forEach(sk=>mutateSkill(sk.id, s=>s.category=newCat));
            if(_collapsedCats.has(cat)){_collapsedCats.delete(cat);_collapsedCats.add(newCat);}
            _saveCollapsedCats();
          }
          renderLib();
        };
        inp.addEventListener('blur',commit);
        inp.addEventListener('keydown',e2=>{if(e2.key==='Enter')commit();if(e2.key==='Escape')renderLib();});
      });

      list.appendChild(h);
      if(!isCollapsed)sks.forEach(sk=>list.appendChild(mkLibRow(sk)));
    });
    if(!filtered.length){
      const empty=document.createElement('div');empty.className='empty-state';empty.textContent='No skills match';list.appendChild(empty);
    }
  }
  document.getElementById('skill-count').textContent=skills.length+' skills';
  _libDirty=false;
}

function getTabPool(){
  if(activeLibTab==='builtin') return skills.filter(s=>s.isBuiltin);
  if(activeLibTab==='mine')    return skills.filter(s=>!s.isBuiltin);
  if(activeLibTab==='recent'){
    const byId=Object.fromEntries(skills.map(s=>[s.id,s]));
    return recentSkillIds.map(id=>byId[id]).filter(Boolean);
  }
  if(activeLibTab==='pipelines') return []; // handled separately in renderLib
  return skills;
}

// Return all known pipelines: open tabs + recently closed (deduped by id)
function getAllKnownPipelines(){
  const closed=loadClosedPipelines();
  const openIds=new Set(pipelines.map(p=>p.id));
  const all=[...pipelines,...closed.filter(p=>!openIds.has(p.id))];
  return all;
}

// Convert a pipeline snapshot into a skill node and add to MY SKILLS
function pipelineToSkill(p){
  // Deep-clone the root frame as internalGraph
  const rootFrame=p.stack&&p.stack[0]?structuredClone(p.stack[0]):{nodes:[],edges:[]};
  const nodeCount=rootFrame.nodes?.length||0;
  const existing=skills.find(s=>s._pipelineId===p.id);
  if(existing){
    mutateSkill(existing.id, sk => {
      sk.internalGraph={nodes:rootFrame.nodes||[],edges:rootFrame.edges||[]};
      sk.label=p.name.toUpperCase();
      sk.desc=nodeCount+' node'+(nodeCount!==1?'s':'')+' · saved from pipeline';
    });
    return existing;
  }
  const sk={
    id:uid('gpt'),label:p.name.toUpperCase(),color:'purple',glyph:'⬡',shape:'default',
    category:'Pipelines',desc:nodeCount+' node'+(nodeCount!==1?'s':'')+' · saved from pipeline',
    tags:['pipeline'],isBuiltin:false,rawContent:'',deps:[],
    internalGraph:{nodes:rootFrame.nodes||[],edges:rootFrame.edges||[]},
    hasOut:true,hasIn:true,fields:[],defaultInputs:[],defaultOutputs:[],
    _pipelineId:p.id,
  };
  addSkill(sk);
  return sk;
}

function mkLibRow(sk){
  const color=cx(sk.color);
  const row=document.createElement('div');row.className='lib-row';row.dataset.sid=sk.id;
  if(selSkillId===sk.id)row.classList.add('sel');

  const inner=document.createElement('div');inner.className='lri';
  // Build row safely with DOM methods to prevent XSS from user-set skill names
  const lgEl=document.createElement('span');lgEl.className='lg';lgEl.style.color=color;lgEl.textContent=sk.glyph;
  const liEl=document.createElement('div');liEl.className='li';
  const lnEl=document.createElement('div');lnEl.className='ln';lnEl.style.color=color;lnEl.textContent=sk.label;
  const ldEl=document.createElement('div');ldEl.className='ld';ldEl.textContent=(sk.desc||'').slice(0,38);
  liEl.appendChild(lnEl);liEl.appendChild(ldEl);
  inner.appendChild(lgEl);inner.appendChild(liEl);
  const add=document.createElement('button');add.className='ladd';add.innerHTML='+';
  add.style.borderColor='var(--brd)';add.style.color='var(--dhi)';
  add.addEventListener('pointerenter',()=>{add.style.color=color;add.style.borderColor=color;});
  add.addEventListener('pointerleave',()=>{add.style.color='var(--dhi)';add.style.borderColor='var(--brd)';});
  add.addEventListener('click',e=>{e.stopPropagation();placeNode(sk.id);});
  inner.appendChild(add);row.appendChild(inner);
  // Shift+click = multi-select toggle, plain click = single select
  // Using pointerdown for everything so we can block drag on shift
  row.addEventListener('pointerdown',e=>{
    if(e.button!==0)return;
    if(e.target.closest('.ladd'))return;
    if(e.shiftKey){
      // Range selection: shift+click selects everything between anchor and target
      e.preventDefault();
      selSkillId=null;selNode=null;
      document.querySelectorAll('.lib-row.sel').forEach(r=>r.classList.remove('sel'));
      document.querySelectorAll('.row-acts').forEach(a=>a.style.display='none');

      if(_lastSelectedId&&_lastSelectedId!==sk.id){
        // Get all visible lib-rows in DOM order
        const rows=[...document.querySelectorAll('#lib-list .lib-row[data-sid]')];
        const ids=rows.map(r=>r.dataset.sid);
        const anchorIdx=ids.indexOf(_lastSelectedId);
        const targetIdx=ids.indexOf(sk.id);
        if(anchorIdx!==-1&&targetIdx!==-1){
          const lo=Math.min(anchorIdx,targetIdx);
          const hi=Math.max(anchorIdx,targetIdx);
          for(let i=lo;i<=hi;i++){
            selLibIds.add(ids[i]);
            rows[i].classList.add('lib-multi-sel');
          }
        } else {
          selLibIds.add(sk.id);row.classList.add('lib-multi-sel');
        }
      } else {
        // No anchor — start fresh
        selLibIds.add(sk.id);row.classList.add('lib-multi-sel');
        _lastSelectedId=sk.id;
      }
      updateLibMultiBar();
      return;
    }
    // Not shift — could be click or drag; start drag detection
    if(selLibIds.has(sk.id)&&selLibIds.size>1){
      startLibDragMulti([...selLibIds],e);
    } else {
      startLibDrag(sk.id,e);
    }
  });

  // Plain click (no shift, no drag movement) — single select
  row.addEventListener('click',e=>{
    if(e.shiftKey)return; // handled in pointerdown
    if(e.ctrlKey||e.metaKey){
      // Ctrl+click: toggle this item in multi-selection
      if(selLibIds.has(sk.id)){
        selLibIds.delete(sk.id);row.classList.remove('lib-multi-sel');
      } else {
        selLibIds.add(sk.id);row.classList.add('lib-multi-sel');
        _lastSelectedId=sk.id;
      }
      selSkillId=null;selNode=null;
      document.querySelectorAll('.lib-row.sel').forEach(r=>r.classList.remove('sel'));
      document.querySelectorAll('.row-acts').forEach(a=>a.style.display='none');
      updateLibMultiBar();
      return;
    }
    // Plain click — single select, clear multi
    selLibIds.clear();
    document.querySelectorAll('.lib-row.lib-multi-sel').forEach(r=>r.classList.remove('lib-multi-sel'));
    updateLibMultiBar();
    selectLib(sk.id);
    _lastSelectedId=sk.id;
  });

  const acts=document.createElement('div');acts.className='row-acts';acts.style.display='none';
  [{t:'Edit',fn:e=>{e.stopPropagation();openWiz(sk.id);}},
   {t:'Duplicate',fn:e=>{
     e.stopPropagation();
     const src=getSk(sk.id);if(!src)return;
     const copy=structuredClone(src);
     copy.id=uid('sk');copy.label=src.label+' Copy';copy.isBuiltin=false;
     copy._ts=Date.now();addSkill(copy);renderLib();selectLib(copy.id);
   }},
   {t:'Download',fn:e=>{
     e.stopPropagation();
     _showDownloadMenu(sk,e.target);
   }},
   {t:'Open Graph',fn:e=>{e.stopPropagation();const targetId=sk.id;if(targetId!==frame().skillId)pushGraph(targetId);}},
   {t:'Delete',cls:'del',fn:e=>{e.stopPropagation();confirmDelete(sk.id);}}
  ].forEach(({t,cls,fn})=>{
    const b=document.createElement('button');b.className='ract'+(cls?' '+cls:'');b.textContent=t;
    b.addEventListener('click',fn);acts.appendChild(b);
  });
  row.appendChild(acts);
  row.addEventListener('click',e=>{
    if(e.shiftKey)return; // handled above
    document.querySelectorAll('.row-acts').forEach(a=>a.style.display='none');
    if(selSkillId===sk.id)acts.style.display='flex';
  });
  return row;
}

// Fast-path search filter: toggles display:none on existing rows/headers
// instead of rebuilding the entire DOM. Falls back to full renderLib on first keystroke
// after a structural change (tab switch, skill add/delete, sort change).
let _libDirty=true; // starts dirty so first render is full
function _fastFilterLib(){
  const f=document.getElementById('lib-search').value.toLowerCase();
  if(_libDirty){_libDirty=false;renderLib();return;}
  const list=document.getElementById('lib-list');
  const rows=list.querySelectorAll('.lib-row');
  const headers=list.querySelectorAll('.sec-hdr');
  // Filter rows by matching skill label/category/desc
  rows.forEach(row=>{
    const sid=row.dataset.sid;
    const sk=skills.find(s=>s.id===sid);
    if(!sk){row.style.display='none';return;}
    const match=!f||sk.label.toLowerCase().includes(f)||(sk.category||'').toLowerCase().includes(f)||(sk.desc||'').toLowerCase().includes(f)||(sk.tags||[]).some(t=>t.toLowerCase().includes(f));
    row.style.display=match?'':'none';
  });
  // Hide category headers that have no visible children
  headers.forEach(h=>{
    let next=h.nextElementSibling;let hasVisible=false;
    while(next&&!next.classList.contains('sec-hdr')){
      if(next.classList.contains('lib-row')&&next.style.display!=='none')hasVisible=true;
      next=next.nextElementSibling;
    }
    h.style.display=hasVisible||!f?'':'none';
  });
  // Update count
  const visible=list.querySelectorAll('.lib-row:not([style*="display: none"])').length;
  document.getElementById('skill-count').textContent=f?visible+'/'+skills.length+' skills':skills.length+' skills';
}

document.getElementById('lib-search').addEventListener('input',()=>{clearTimeout(_rlTimer);_rlTimer=setTimeout(_fastFilterLib,80);});
document.getElementById('lib-sort').addEventListener('change',e=>{
  _libSortMode=e.target.value;
  try{localStorage.setItem(_SORT_KEY,_libSortMode);}catch(ex){}
  renderLib();
});
// Restore saved sort selection on load
document.getElementById('lib-sort').value=_libSortMode;

// ── Pipeline row edit overlay ──────────────────────────────
function openPipelineEdit(p){
  // Remove any existing edit overlay
  document.getElementById('pl-edit-overlay')?.remove();

  const ov=document.createElement('div');ov.id='pl-edit-overlay';
  ov.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:900;display:flex;align-items:center;justify-content:center';

  const modal=document.createElement('div');
  modal.style.cssText='background:var(--panel);border:1px solid var(--brdhi);border-radius:12px;width:440px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden';

  // Header
  const hdr=document.createElement('div');
  hdr.style.cssText='display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--brd);flex-shrink:0';
  const htitle=document.createElement('span');htitle.textContent='EDIT PIPELINE';
  htitle.style.cssText='font-family:var(--mono);font-size:10px;font-weight:700;color:var(--acc);letter-spacing:.1em;flex:1';
  const hclose=document.createElement('button');hclose.className='mbtn';hclose.textContent='✕';
  hclose.addEventListener('click',()=>ov.remove());
  hdr.appendChild(htitle);hdr.appendChild(hclose);modal.appendChild(hdr);

  // Body
  const body=document.createElement('div');body.style.cssText='padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1';

  // Name field
  const nameLbl=document.createElement('div');nameLbl.className='mlbl';nameLbl.textContent='PIPELINE NAME';
  const nameIn=document.createElement('input');nameIn.type='text';nameIn.value=p.name;
  nameIn.style.cssText='width:100%;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--txt)';
  body.appendChild(nameLbl);body.appendChild(nameIn);

  // Node tree
  const treeLbl=document.createElement('div');treeLbl.className='mlbl';treeLbl.textContent='PIPELINE NODES';
  body.appendChild(treeLbl);

  const tree=document.createElement('div');
  tree.style.cssText='display:flex;flex-direction:column;gap:3px';

  const liveStack=p.stack&&p.stack[0]?p.stack[0]:{nodes:[],edges:[]};
  // Work on a mutable reference — changes go live on save
  const editNodes=liveStack.nodes;
  const editEdges=liveStack.edges;

  const renderTree=()=>{
    tree.innerHTML='';
    if(!editNodes.length){
      const em=document.createElement('div');
      em.style.cssText='font-size:10px;color:var(--dim);font-style:italic;padding:4px 0';
      em.textContent='No nodes in this pipeline';
      tree.appendChild(em);return;
    }
    // Use topoWalk if available for ordered display, else raw order
    const ordered=(typeof topoWalk==='function')?topoWalk(editNodes,editEdges):[...editNodes];
    ordered.forEach((node,i)=>{
      const sk=nodeSk(node);
      const label=node.title||(node.values?.name)||(sk?.label)||('Node '+(i+1));
      const nodeRow=document.createElement('div');
      nodeRow.style.cssText='display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--surf);border:1px solid var(--brd);border-radius:6px';

      const glyph=document.createElement('span');
      glyph.textContent=sk?.glyph||'◆';
      glyph.style.cssText='font-size:12px;color:'+(sk?'var(--dhi)':'var(--dim)');

      const info=document.createElement('div');info.style.cssText='flex:1;min-width:0';
      const nlabel=document.createElement('div');nlabel.style.cssText='font-family:var(--mono);font-size:9px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis';
      nlabel.textContent=label.toUpperCase();
      const nmeta=document.createElement('div');nmeta.style.cssText='font-size:9px;color:var(--dim)';
      nmeta.textContent=(sk?.label||'')+(sk?.label&&label!==sk.label?' · '+sk.label:'')+(node.inputs?.length?' · '+node.inputs.length+' in':'')+(node.outputs?.length?' · '+node.outputs.length+' out':'');
      info.appendChild(nlabel);info.appendChild(nmeta);

      const del=document.createElement('button');
      del.style.cssText='font-size:11px;color:var(--dim);padding:2px 6px;border-radius:3px;border:1px solid transparent;flex-shrink:0';
      del.textContent='×';del.title='Remove node';
      del.addEventListener('pointerenter',()=>{del.style.color='var(--red)';del.style.borderColor='rgba(248,113,113,.3)';});
      del.addEventListener('pointerleave',()=>{del.style.color='var(--dim)';del.style.borderColor='transparent';});
      del.addEventListener('click',()=>{
        const idx2=editNodes.findIndex(n=>n.id===node.id);
        if(idx2<0)return;
        editNodes.splice(idx2,1);
        // Remove connected edges
        const nid=node.id;
        const before=editEdges.length;
        editEdges.splice(0,editEdges.length,...editEdges.filter(e=>e.from!==nid&&e.to!==nid));
        renderTree();
      });
      nodeRow.appendChild(glyph);nodeRow.appendChild(info);nodeRow.appendChild(del);
      tree.appendChild(nodeRow);
    });
  };
  renderTree();
  body.appendChild(tree);
  modal.appendChild(body);

  // Footer
  const foot=document.createElement('div');
  foot.style.cssText='display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--brd);flex-shrink:0';
  const cancelBtn=document.createElement('button');cancelBtn.className='mbtn';cancelBtn.textContent='Cancel';
  cancelBtn.addEventListener('click',()=>ov.remove());
  const saveBtn=document.createElement('button');saveBtn.className='mbtn pri';saveBtn.textContent='Save Changes';
  saveBtn.addEventListener('click',()=>{
    const newName=nameIn.value.trim()||p.name;
    // Apply name change
    renamePipeline(p.id,newName);
    // If this pipeline is live on canvas, sync canvas state
    const liveP=pipelines.find(x=>x.id===p.id);
    if(liveP){
      if(liveP.id===activePipelineId){
        // Sync the canvas
        canvasStack[0].nodes=editNodes;
        canvasStack[0].edges=editEdges;
        scene.querySelectorAll('.node').forEach(n=>{
          const nid=n.id.slice(3);
          if(!editNodes.find(x=>x.id===nid))n.remove();
        });
        renderEdges();
        if(selNode&&!editNodes.find(n=>n.id===selNode))clearSel();
      } else {
        liveP.stack[0].nodes=editNodes;
        liveP.stack[0].edges=editEdges;
      }
      liveP.saved=false;
      markPipelineDirty(liveP.id);
      savePipelines();
    } else {
      // It's in the recently-closed list — update it there
      const closed=loadClosedPipelines();
      const ci=closed.findIndex(c=>c.id===p.id);
      if(ci>=0){closed[ci].name=newName;closed[ci].stack[0].nodes=editNodes;closed[ci].stack[0].edges=editEdges;saveClosedPipelines(closed);}
    }
    renderLib();renderPipelineTabs();
    ov.remove();
  });
  foot.appendChild(cancelBtn);foot.appendChild(saveBtn);modal.appendChild(foot);

  ov.appendChild(modal);
  // Click outside to close
  ov.addEventListener('click',e=>{if(e.target===ov)ov.remove();});
  document.body.appendChild(ov);
  nameIn.focus();nameIn.select();
}

function deletePipelineRow(p){
  const isOpen=pipelines.some(op=>op.id===p.id);
  const msg='"'+p.name+'" will be permanently removed'+(isOpen?' and closed':'')+'.\n\nThis cannot be undone.';
  if(!confirm(msg))return;
  // Close it if open (moves to closed list)
  if(isOpen)closePipeline(p.id);
  // Also remove from recently-closed so it's truly gone
  const closed=loadClosedPipelines().filter(c=>c.id!==p.id);
  saveClosedPipelines(closed);
  renderLib();
}

let selPipelineId=null;

// Alias: ensurePipelineSkill was identical to pipelineToSkill — consolidated
const ensurePipelineSkill=pipelineToSkill;

function mkPipelineRow(p){
  const isOpen=pipelines.some(op=>op.id===p.id);
  const rootFrame=p.stack&&p.stack[0]?p.stack[0]:{nodes:[],edges:[]};
  const nodeCount=rootFrame.nodes?.length||0;
  const edgeCount=rootFrame.edges?.length||0;
  const color='#c084fc';

  const row=document.createElement('div');row.className='lib-row';
  if(selPipelineId===p.id)row.classList.add('sel');

  // acts declared here so click handler below can reference it
  const acts=document.createElement('div');acts.className='row-acts';acts.style.display='none';
  [{t:'Edit',fn:e=>{e.stopPropagation();openPipelineEdit(p);}},
   {t:'Open Graph',fn:e=>{e.stopPropagation();const sk=ensurePipelineSkill(p);if(sk.id!==frame().skillId)pushGraph(sk.id);}},
   {t:'Delete',cls:'del',fn:e=>{e.stopPropagation();deletePipelineRow(p);}}
  ].forEach(({t,cls,fn})=>{
    const b=document.createElement('button');b.className='ract'+(cls?' '+cls:'');b.textContent=t;
    b.addEventListener('click',fn);acts.appendChild(b);
  });

  const inner=document.createElement('div');inner.className='lri';
  const lgEl=document.createElement('span');lgEl.className='lg';lgEl.style.color=color;lgEl.textContent='⬡';
  const liEl=document.createElement('div');liEl.className='li';
  const lnEl=document.createElement('div');lnEl.className='ln';lnEl.style.color=color;lnEl.textContent=p.name;
  const ldEl=document.createElement('div');ldEl.className='ld';
  ldEl.textContent=nodeCount+' node'+(nodeCount!==1?'s':'')+' · '+edgeCount+' edge'+(edgeCount!==1?'s':'')+(isOpen?' · open':'');
  liEl.appendChild(lnEl);liEl.appendChild(ldEl);
  inner.appendChild(lgEl);inner.appendChild(liEl);

  const add=document.createElement('button');add.className='ladd';add.innerHTML='+';
  add.style.borderColor='var(--brd)';add.style.color='var(--dhi)';
  add.addEventListener('pointerenter',()=>{add.style.color=color;add.style.borderColor=color;});
  add.addEventListener('pointerleave',()=>{add.style.color='var(--dhi)';add.style.borderColor='var(--brd)';});
  add.addEventListener('click',e=>{e.stopPropagation();const sk=ensurePipelineSkill(p);renderLib();placeNode(sk.id);});
  inner.appendChild(add);

  row.appendChild(inner);
  row.appendChild(acts);

  // pointerdown: drag using same startLibDrag as skill rows
  row.addEventListener('pointerdown',e=>{
    if(e.button!==0||e.target.closest('.ladd')||e.target.closest('.row-acts'))return;
    const sk=ensurePipelineSkill(p); // no renderLib — just mutates skills array
    startLibDrag(sk.id,e);
  });

  // click: select row and show actions (same pattern as mkLibRow)
  row.addEventListener('click',e=>{
    if(e.target.closest('.ladd')||e.target.closest('.row-acts'))return;
    document.querySelectorAll('.row-acts').forEach(a=>a.style.display='none');
    const alreadySel=selPipelineId===p.id;
    document.querySelectorAll('.lib-row.sel').forEach(r=>r.classList.remove('sel'));
    selPipelineId=alreadySel?null:p.id;
    if(!alreadySel){row.classList.add('sel');acts.style.display='flex';}
  });

  row.addEventListener('contextmenu',e=>{
    e.preventDefault();
    if(!isOpen){
      const rem=loadClosedPipelines().filter(c=>c.id!==p.id);
      saveClosedPipelines(rem);
      const restored={...p,saved:true};
      pipelines.push(restored);savePipelines();hideEmptyState();switchPipeline(restored.id);
    } else switchPipeline(p.id);
  });

  return row;
}
document.getElementById('add-skill-btn').addEventListener('click',()=>openWiz(null));
document.getElementById('import-skill-btn').addEventListener('click',()=>importSkillFileAsNode());

// ── Library multi-select action bar ───────────────────────
document.getElementById('lmb-clear').addEventListener('click',()=>{
  selLibIds.clear();
  document.querySelectorAll('.lib-row.lib-multi-sel').forEach(r=>r.classList.remove('lib-multi-sel'));
  updateLibMultiBar();
});

document.getElementById('lmb-place').addEventListener('click',()=>{
  const ids=[...selLibIds];if(!ids.length)return;
  const t=frame().tx;
  const cx2=scene.offsetWidth/2;const cy2=scene.offsetHeight/2;
  let sx=(cx2-t.x)/t.s;let sy=(cy2-t.y)/t.s;
  ids.forEach((id,i)=>{placeNodeAt(id,snap(sx+i*290),snap(sy+i*40));});
  selLibIds.clear();
  document.querySelectorAll('.lib-row.lib-multi-sel').forEach(r=>r.classList.remove('lib-multi-sel'));
  updateLibMultiBar();
});

document.getElementById('lmb-delete').addEventListener('click',()=>{
  const ids=[...selLibIds];if(!ids.length)return;
  const names=ids.map(id=>getSk(id)?.label||id);
  const msg=ids.length===1
    ? 'Delete "'+names[0]+'"? Canvas nodes using this skill will also be removed.'
    : 'Delete '+ids.length+' skills?\n\n'+names.join(', ')+'\n\nCanvas nodes using these skills will also be removed.';
  if(!confirm(msg))return;
  ids.forEach(id=>{
    // Remove from all canvas frames
    canvasStack.forEach(f=>{
      const toRm=f.nodes.filter(n=>(n.type||n.skillId)===id).map(n=>n.id);
      toRm.forEach(nid=>{f.nodes=f.nodes.filter(n=>n.id!==nid);f.edges=f.edges.filter(e=>e.from!==nid&&e.to!==nid);});
    });
    scene.querySelectorAll('.node').forEach(n=>{
      const nid=n.id.slice(3);if(!getNodes().find(x=>x.id===nid))n.remove();
    });
  });
  const idSet=new Set(ids);
  removeSkills(s=>idSet.has(s.id));
  if(selSkillId&&ids.includes(selSkillId)){selSkillId=null;clearSel();}
  renderEdges();renderLib();updateTopbar();
  selLibIds.clear();updateLibMultiBar();
});

// ═══════════════════════════════════════════════════════════
// LIBRARY DRAG TO CANVAS
// ═══════════════════════════════════════════════════════════
const ghost=document.getElementById('drag-ghost');
let dragSkId=null;   // skill being dragged
let dragActive=false;
let dragOverCanvas=false;

// Multi-skill drag — places all in a staggered row on drop
function startLibDragMulti(skIds,e){
  if(e.button!==0)return;
  const firstSk=getSk(skIds[0]);if(!firstSk)return;
  // Note: we do NOT set dragSkId here — this drag manages its own state
  // so the global onDragMove/onDragDrop handlers don't interfere
  dragActive=false;dragOverCanvas=false;
  ghost.querySelector('.dg-glyph').textContent=firstSk.glyph;
  ghost.querySelector('.dg-glyph').style.color=cx(firstSk.color);
  ghost.querySelector('.dg-label').textContent=firstSk.label+' +'+( skIds.length-1)+' more';
  ghost.querySelector('.dg-label').style.color=cx(firstSk.color);

  let multiDragActive=false;
  function onMove(ev){
    if(!multiDragActive){multiDragActive=true;ghost.style.display='flex';document.body.style.userSelect='none';}
    ghost.style.left=ev.clientX+'px';ghost.style.top=ev.clientY+'px';
    const rect=wrap.getBoundingClientRect();
    const over=ev.clientX>=rect.left&&ev.clientX<=rect.right&&ev.clientY>=rect.top&&ev.clientY<=rect.bottom;
    if(over!==dragOverCanvas){dragOverCanvas=over;wrap.classList.toggle('drag-over',over);}
  }
  function onDrop(ev){
    window.removeEventListener('pointermove',onMove);
    window.removeEventListener('pointerup',onDrop);
    ghost.style.display='none';document.body.style.userSelect='';wrap.classList.remove('drag-over');
    if(!multiDragActive){dragOverCanvas=false;return;}
    const rect=wrap.getBoundingClientRect();
    const t=frame().tx;
    if(ev.clientX>=rect.left&&ev.clientX<=rect.right&&ev.clientY>=rect.top&&ev.clientY<=rect.bottom){
      let sx=(ev.clientX-rect.left-t.x)/t.s;
      let sy=(ev.clientY-rect.top-t.y)/t.s;
      // Place each skill staggered diagonally
      clearSel();skIds.forEach((id,i)=>{placeNodeAt(id,snap(sx+i*290),snap(sy+i*40));});
    }
    multiDragActive=false;dragOverCanvas=false;
  }
  window.addEventListener('pointermove',onMove);
  window.addEventListener('pointerup',onDrop);
}


function startLibDrag(skId,e){
  if(e.button!==0)return;
  dragSkId=skId;dragActive=false;dragOverCanvas=false;
  const sk=getSk(skId);if(!sk)return;
  ghost.querySelector('.dg-glyph').textContent=sk.glyph;
  ghost.querySelector('.dg-glyph').style.color=cx(sk.color);
  ghost.querySelector('.dg-label').textContent=sk.label;
  ghost.querySelector('.dg-label').style.color=cx(sk.color);
  // Use window-level pointermove/up to track anywhere
  window.addEventListener('pointermove',onDragMove);
  window.addEventListener('pointerup',onDragDrop);
}

function onDragMove(e){
  if(!dragSkId)return;
  // Show ghost after a few px of movement to avoid triggering on click
  if(!dragActive){
    dragActive=true;
    ghost.style.display='flex';
    document.body.style.userSelect='none';
  }
  ghost.style.left=e.clientX+'px';
  ghost.style.top=e.clientY+'px';
  // Detect if over canvas
  const rect=wrap.getBoundingClientRect();
  const over=e.clientX>=rect.left&&e.clientX<=rect.right&&e.clientY>=rect.top&&e.clientY<=rect.bottom;
  if(over!==dragOverCanvas){
    dragOverCanvas=over;
    wrap.classList.toggle('drag-over',over);
  }
}

function onDragDrop(e){
  window.removeEventListener('pointermove',onDragMove);
  window.removeEventListener('pointerup',onDragDrop);
  ghost.style.display='none';
  document.body.style.userSelect='';
  wrap.classList.remove('drag-over');
  if(!dragSkId||!dragActive){dragSkId=null;dragActive=false;return;}
  const rect=wrap.getBoundingClientRect();
  const over=e.clientX>=rect.left&&e.clientX<=rect.right&&e.clientY>=rect.top&&e.clientY<=rect.bottom;
  if(over){
    clearSel(); // clear previous selection before placing new node
    const t=frame().tx;
    const sceneX=(e.clientX-rect.left-t.x)/t.s;
    const sceneY=(e.clientY-rect.top-t.y)/t.s;
    placeNodeAt(dragSkId,sceneX,sceneY);
  }
  dragSkId=null;dragActive=false;dragOverCanvas=false;
}

// ═══════════════════════════════════════════════════════════
// DELETE CONFIRM
// ═══════════════════════════════════════════════════════════
let pendingDelId=null;
function confirmDelete(skId){
  pendingDelId=skId;
  const sk=getSk(skId);
  document.getElementById('confirm-msg').textContent=`Delete "${sk?.label}"? Canvas nodes using this skill will also be removed.`;
  document.getElementById('confirm-overlay').classList.add('open');
}
document.getElementById('confirm-no').addEventListener('click',()=>document.getElementById('confirm-overlay').classList.remove('open'));
document.getElementById('confirm-yes').addEventListener('click',()=>{
  if(!pendingDelId)return;
  document.getElementById('confirm-overlay').classList.remove('open');
  const delId=pendingDelId;
  pendingDelId=null;
  // Remove from all canvas frames
  canvasStack.forEach(f=>{
    const toRm=f.nodes.filter(n=>(n.type||n.skillId)===delId).map(n=>n.id);
    toRm.forEach(id=>{f.nodes=f.nodes.filter(n=>n.id!==id);f.edges=f.edges.filter(e=>e.from!==id&&e.to!==id);});
  });
  removeSkills(s=>s.id===delId);
  scene.querySelectorAll('.node').forEach(n=>{
    const nid=n.id.slice(3);
    if(!getNodes().find(x=>x.id===nid))n.remove();
  });
  renderEdges();
  if(selSkillId===delId)clearSel();
  renderLib();updateTopbar();
});

// ═══════════════════════════════════════════════════════════
// RESIZERS
// ═══════════════════════════════════════════════════════════
function mkResizer(rzId,tgtId,dir,minW,maxW){
  const rz=document.getElementById(rzId),tgt=document.getElementById(tgtId);
  const storeKey='pb_panel_w_'+tgtId;
  let active=false,startX,startW;
  // Restore saved width
  try{const saved=localStorage.getItem(storeKey);if(saved){const w=parseInt(saved,10);if(w>=minW&&w<=maxW)tgt.style.width=w+'px';}}catch(e){}
  rz.addEventListener('pointerdown',e=>{active=true;startX=e.clientX;startW=tgt.offsetWidth;rz.setPointerCapture(e.pointerId);rz.classList.add('dragging');});
  rz.addEventListener('pointermove',e=>{if(!active)return;const nw=Math.max(minW,Math.min(maxW,startW+(dir==='left'?1:-1)*(e.clientX-startX)));tgt.style.width=nw+'px';});
  rz.addEventListener('pointerup',e=>{active=false;rz.releasePointerCapture(e.pointerId);rz.classList.remove('dragging');try{localStorage.setItem(storeKey,tgt.offsetWidth);}catch(e){}});
}
mkResizer('rz-l','left','left',120,840);
mkResizer('rz-r','right','right',120,840);

// ═══════════════════════════════════════════════════════════
// SKILL WIZARD
// ═══════════════════════════════════════════════════════════
let activeLibTab='mine'; // 'mine' | 'builtin' | 'recent' | 'pipelines'
let tagSectionOpen=false;
// Custom tag filter list (persisted), separate from skill tags
const TAG_FILTER_KEY='pb_tag_filters';
let customFilterTags=JSON.parse(localStorage.getItem(TAG_FILTER_KEY)||'[]');

function saveCustomTags(){safeStore(TAG_FILTER_KEY,customFilterTags);}
const LIB_RECENT_KEY='pb_recent_skills';
let recentSkillIds=JSON.parse(localStorage.getItem(LIB_RECENT_KEY)||'[]');

function trackRecent(id){
  recentSkillIds=recentSkillIds.filter(x=>x!==id);
  recentSkillIds.unshift(id);
  if(recentSkillIds.length>20)recentSkillIds.length=20;
  safeStore(LIB_RECENT_KEY,recentSkillIds);
}

// Tag section toggle
document.getElementById('tag-section-hdr').addEventListener('click',()=>{
  tagSectionOpen=!tagSectionOpen;
  document.getElementById('tag-section-body').classList.toggle('closed',!tagSectionOpen);
  document.getElementById('tag-section-chev').classList.toggle('open',tagSectionOpen);
});

// Add tag button
document.getElementById('tag-add-btn').addEventListener('click',()=>{
  const inp=document.getElementById('tag-add-input');
  const val=inp.value.trim().toLowerCase();
  if(val&&!customFilterTags.includes(val)){
    customFilterTags.push(val);saveCustomTags();inp.value='';renderLib();
  } else {inp.value='';}
});
document.getElementById('tag-add-input').addEventListener('keydown',e=>{
  if(e.key==='Enter'){document.getElementById('tag-add-btn').click();}
});

document.getElementById('lib-tabs').addEventListener('click',e=>{
  const btn=e.target.closest('.ltab');if(!btn)return;
  activeLibTab=btn.dataset.tab;
  document.querySelectorAll('.ltab').forEach(t=>t.classList.toggle('on',t===btn));
  selLibIds.clear();updateLibMultiBar();
  renderLib();
});

let wiz={};
function openWiz(editId){
  const ed=editId?getSk(editId):null;
  const defOut=[{id:uid('p'),name:'output',type:'Any'}];
  wiz={step:ed?'edit':'method',method:null,raw:ed?.rawContent||'',name:ed?.label||'',desc:ed?.desc||'',color:ed?.color||'blue',shape:ed?.shape||'default',glyph:ed?.glyph||'◆',tags:[...(ed?.tags||[])],category:ed?.category||'Skills',editId,
    inputs:structuredClone(ed?.defaultInputs||[]),
    outputs:structuredClone(ed?.defaultOutputs?.length?ed.defaultOutputs:defOut),
    fields:structuredClone(ed?.fields||[]),
    isBuiltin:ed?.isBuiltin||false};
  document.getElementById('wiz-title').textContent=ed?'EDIT SKILL':'ADD SKILL';
  document.getElementById('wiz-overlay').classList.add('open');drawWiz();
}
document.getElementById('wiz-close').addEventListener('click',()=>document.getElementById('wiz-overlay').classList.remove('open'));
document.getElementById('wiz-overlay').addEventListener('click',e=>{if(e.target===e.currentTarget)document.getElementById('wiz-overlay').classList.remove('open');});

function drawWiz(){
  const body=document.getElementById('wiz-body');body.innerHTML='';
  if(wiz.step==='method')drawMethod(body);
  else if(wiz.step==='paste')drawPaste(body);
  else if(wiz.step==='url')drawUrl(body);
  else drawEdit(body);
}
function wf(b,label,fac){const w=document.createElement('div');const l=document.createElement('div');l.className='mlbl';l.textContent=label;w.appendChild(l);w.appendChild(fac());b.appendChild(w);}
function mkMBtn(t,pri,fn,dis=false){const b=document.createElement('button');b.className='mbtn'+(pri?' pri':'');b.textContent=t;b.disabled=dis;b.addEventListener('click',fn);return b;}
function mkMRow(btns){const r=document.createElement('div');r.className='mrow';btns.filter(Boolean).forEach(b=>r.appendChild(b));return r;}
function parseMeta(){const t=wiz.raw;let name='',desc='';const fm=t.match(/^---\s*\n([\s\S]*?)\n---/);if(fm){name=(fm[1].match(/name:\s*(.+)/)||[])[1]?.trim()||'';desc=(fm[1].match(/description:\s*(.+)/)||[])[1]?.trim()||'';}if(!name){const h=(t.match(/^#\s+(.+)/m)||[])[1];if(h)name=h.trim();}if(!desc){const p=(t.replace(/^---[\s\S]*?---\s*/,'').match(/^([^#\n].{10,})/m)||[])[1];if(p)desc=p.trim().slice(0,140);}if(!wiz.name)wiz.name=name||'Imported Skill';if(!wiz.desc)wiz.desc=desc||'';}

function drawMethod(b){
  const n=document.createElement('div');n.className='notice';n.innerHTML='<strong>Note:</strong> Sandbox has no network access. For GitHub skills, open the raw URL, copy the text, and use <strong>Paste</strong>.';b.appendChild(n);
  [{id:'paste',i:'⌨',n:'Paste text',s:'Best for GitHub skills'},{id:'url',i:'🔗',n:'Try URL fetch',s:'May be blocked by CORS'},{id:'manual',i:'✏',n:'Write from scratch',s:'Blank template'}].forEach(m=>{
    const btn=document.createElement('button');btn.className='meth-btn';btn.innerHTML=`<span style="font-size:18px">${m.i}</span><span><span class="mn">${m.n}</span><span class="ms">${m.s}</span></span>`;
    btn.addEventListener('click',()=>{wiz.method=m.id;wiz.step=m.id==='manual'?'edit':m.id;drawWiz();});b.appendChild(btn);
  });
}
function drawPaste(b){
  wf(b,'PASTE SKILL CONTENT',()=>{const ta=document.createElement('textarea');ta.rows=10;ta.value=wiz.raw;ta.addEventListener('input',()=>wiz.raw=ta.value);return ta;});
  b.appendChild(mkMRow([mkMBtn('← Back',false,()=>{wiz.step='method';drawWiz();}),mkMBtn('Continue →',true,()=>{if(wiz.raw.trim()){parseMeta();wiz.step='edit';drawWiz();}},!wiz.raw.trim())]));
}
function drawUrl(b){
  wf(b,'FETCH FROM URL',()=>{const i=document.createElement('input');i.type='text';i.placeholder='https://raw.githubusercontent.com/…';i.value=wiz.url||'';i.addEventListener('input',()=>wiz.url=i.value);return i;});
  const err=document.createElement('div');err.style.cssText='font-size:10px;color:var(--org);display:none';b.appendChild(err);
  b.appendChild(mkMRow([mkMBtn('← Back',false,()=>{wiz.step='method';drawWiz();}),mkMBtn('Try Fetch →',true,async()=>{
    if(!wiz.url)return;err.style.display='none';
    try{const r=await fetch(wiz.url,{mode:'cors'});if(!r.ok)throw new Error();wiz.raw=await r.text();parseMeta();wiz.step='edit';drawWiz();}
    catch{err.textContent='Blocked — use Paste instead.';err.style.display='block';}
  })]));
}
// ═══════════════════════════════════════════════════════════
// AI GENERATE OVERLAY — Skill generator
// ═══════════════════════════════════════════════════════════

// Helper: get Friday AI agent auth token from vault (used for local LLM auth)
const _getFridayToken=()=>(CryptoManager.creds||[]).find(c=>c.type==='friday-token')?.value||'';
function _localHeaders(){const t=_getFridayToken();const h={'Content-Type':'application/json'};if(t)h.Authorization='Bearer '+t;return h;}

// Shared: call the active AI provider and return generated text
// Sends a single prompt to an LLM provider and returns the full response
// ── LLM endpoint resolution ─────────────────────────────
// Shared logic for all three call patterns (single, streaming, history)
function _resolveLLMRequest(provider, apiKey, model, messages, opts={}){
  const stream=opts.stream||false;
  const system=opts.system||'';
  if(provider==='openai'){
    const body={model:model||'gpt-4o',max_tokens:CONFIG.MAX_OUTPUT_TOKENS,messages:system?[{role:'system',content:system},...messages]:messages};
    if(stream)body.stream=true;
    return{url:'https://api.openai.com/v1/chat/completions',
      headers:{'Content-Type':'application/json','Authorization':'Bearer '+apiKey},
      body,extract:d=>d.choices?.[0]?.message?.content||'',
      streamExtract:j=>j.choices?.[0]?.delta?.content||''};
  } else if(provider==='gemini'){
    const gemModel=model||'gemini-2.0-flash-lite';
    const endpoint=stream?'streamGenerateContent?alt=sse':'generateContent';
    const contents=messages.map(m=>({role:m.role==='assistant'?'model':'user',parts:[{text:m.content}]}));
    const body={contents,generationConfig:{maxOutputTokens:CONFIG.MAX_OUTPUT_TOKENS}};
    if(system)body.systemInstruction={parts:[{text:system}]};
    // Separator picks ? for bare endpoints (generateContent) and & when endpoint already has a query (streamGenerateContent?alt=sse).
    const sep=endpoint.includes('?')?'&':'?';
    return{url:'https://generativelanguage.googleapis.com/v1beta/models/'+gemModel+':'+endpoint+sep+'key='+apiKey,
      headers:{'Content-Type':'application/json'},
      body,extract:d=>d.candidates?.[0]?.content?.parts?.[0]?.text||'',
      streamExtract:j=>j.candidates?.[0]?.content?.parts?.[0]?.text||''};
  } else if(provider==='local'){
    const baseUrl=(apiKey||'http://localhost:11434').replace(/\/+$/,'');
    const body={model:model||'llama3',stream,messages:system?[{role:'system',content:system},...messages]:messages};
    return{url:baseUrl,headers:_localHeaders(),body,isLocal:true,
      extract:d=>d.message?.content||d.response||'',
      streamExtract:j=>j.message?.content||'',
      openaiExtract:d=>d.choices?.[0]?.message?.content||'',
      openaiStreamExtract:j=>j.choices?.[0]?.delta?.content||''};
  } else {
    // anthropic
    const body={model:model||'claude-sonnet-4-6',max_tokens:CONFIG.MAX_OUTPUT_TOKENS,messages};
    if(stream)body.stream=true;
    if(system)body.system=system;
    return{url:'https://api.anthropic.com/v1/messages',
      headers:{'Content-Type':'application/json','x-api-key':apiKey,'anthropic-version':'2023-06-01','anthropic-dangerous-direct-browser-access':'true'},
      body,extract:d=>d.content?.[0]?.text||'',
      streamExtract:j=>j.type==='content_block_delta'?j.delta?.text||'':''};
  }
}

async function callAI(userPrompt, systemPrompt, provider, apiKey, model){
  const msgs=[{role:'user',content:userPrompt}];
  const req=_resolveLLMRequest(provider,apiKey,model,msgs,{system:systemPrompt});
  if(req.isLocal){
    // Ollama native first, fallback to OpenAI-compat
    try{
      const resp=await fetch(req.url+'/api/chat',{method:'POST',headers:req.headers,body:JSON.stringify(req.body)});
      if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||e.error||'HTTP '+resp.status);}
      return req.extract(await resp.json());
    }catch(ollamaErr){
      try{
        const resp=await fetch(req.url+'/v1/chat/completions',{method:'POST',headers:req.headers,body:JSON.stringify(req.body)});
        if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||'HTTP '+resp.status);}
        return req.openaiExtract(await resp.json());
      }catch(compatErr){
        throw new Error('Could not reach local LLM. Ensure Ollama or Friday is running and CORS is enabled:\n  OLLAMA_ORIGINS=* ollama serve\n\nOllama error: '+ollamaErr.message+'\nOpenAI-compat error: '+compatErr.message);
      }
    }
  }
  const resp=await fetch(req.url,{method:'POST',headers:req.headers,body:JSON.stringify(req.body)});
  if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||'HTTP '+resp.status);}
  return req.extract(await resp.json());
}

// ── Streaming callAI — calls onChunk(text) progressively ──
async function callAIStreaming(userPrompt, systemPrompt, provider, apiKey, model, onChunk, signal){
  async function readSSE(resp, extract){
    const reader=resp.body.getReader();
    const decoder=new TextDecoder();
    let buf='';
    while(true){
      const {done,value}=await reader.read();
      if(done)break;
      buf+=decoder.decode(value,{stream:true});
      const lines=buf.split('\n');
      buf=lines.pop()||'';
      for(const line of lines){
        if(!line.startsWith('data: '))continue;
        const data=line.slice(6).trim();
        if(data==='[DONE]')return;
        try{const j=JSON.parse(data);const t=extract(j);if(t)onChunk(t);}catch(e){}
      }
    }
  }
  async function readNDJSON(resp, extract){
    const reader=resp.body.getReader();
    const decoder=new TextDecoder();
    let buf='';
    while(true){
      const {done,value}=await reader.read();
      if(done)break;
      buf+=decoder.decode(value,{stream:true});
      const lines=buf.split('\n');
      buf=lines.pop()||'';
      for(const line of lines){
        if(!line.trim())continue;
        try{const j=JSON.parse(line);const t=extract(j);if(t)onChunk(t);}catch(e){}
      }
    }
  }
  const msgs=[{role:'user',content:userPrompt}];
  const req=_resolveLLMRequest(provider,apiKey,model,msgs,{system:systemPrompt,stream:true});
  if(req.isLocal){
    try{
      const resp=await fetch(req.url+'/api/chat',{method:'POST',headers:req.headers,body:JSON.stringify(req.body),signal});
      if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||e.error||'HTTP '+resp.status);}
      await readNDJSON(resp,req.streamExtract);
    }catch(ollamaErr){
      const resp=await fetch(req.url+'/v1/chat/completions',{method:'POST',headers:req.headers,body:JSON.stringify(req.body),signal});
      if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||'HTTP '+resp.status);}
      await readSSE(resp,req.openaiStreamExtract);
    }
    return;
  }
  const resp=await fetch(req.url,{method:'POST',headers:req.headers,body:JSON.stringify(req.body),signal});
  if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||'HTTP '+resp.status);}
  await readSSE(resp,req.streamExtract);
}

// callAI with full conversation history (for follow-ups)
async function callAIWithHistory(history, provider, apiKey, model, signal){
  const req=_resolveLLMRequest(provider,apiKey,model,history,{});
  if(req.isLocal){
    try{
      const resp=await fetch(req.url+'/api/chat',{method:'POST',headers:req.headers,body:JSON.stringify(req.body),signal});
      if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||e.error||'HTTP '+resp.status);}
      return req.extract(await resp.json());
    }catch(ollamaErr){
      const resp=await fetch(req.url+'/v1/chat/completions',{method:'POST',headers:req.headers,body:JSON.stringify(req.body),signal});
      if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||'HTTP '+resp.status);}
      return req.openaiExtract(await resp.json());
    }
  }
  const resp=await fetch(req.url,{method:'POST',headers:req.headers,body:JSON.stringify(req.body),signal});
  if(!resp.ok){const e=await resp.json().catch(()=>({}));throw new Error(e.error?.message||'HTTP '+resp.status);}
  return req.extract(await resp.json());
}

function openAIOverlay(){
  document.getElementById('ai-body').innerHTML='';
  document.getElementById('ai-overlay').classList.add('open');
  drawAIOverlay();
}

function drawAIOverlay(){
  const b=document.getElementById('ai-body');
  b.innerHTML='';

  const anthropicCreds=CryptoManager.creds.filter(c=>c.type==='anthropic-key'||c.type==='api-key');
  const openaiCreds=CryptoManager.creds.filter(c=>c.type==='openai-key');
  const geminiCreds=CryptoManager.creds.filter(c=>c.type==='gemini-key');
  const allAICreds=[...anthropicCreds,...openaiCreds,...geminiCreds];

  // Provider — local is always available even without keys
  let aiProvider=anthropicCreds.length?'anthropic':openaiCreds.length?'openai':geminiCreds.length?'gemini':'local';
  let apiKey=allAICreds[0]?.value||'';
  let localUrl='http://localhost:11434';

  wf(b,'PROVIDER',()=>{
    const row=document.createElement('div');row.style.cssText='display:flex;gap:6px;flex-wrap:wrap';
    [['anthropic','✦ Anthropic'],['openai','⬡ OpenAI'],['gemini','✧ Gemini'],['local','⊙ Local']].forEach(([prov,label])=>{
      const btn=document.createElement('button');btn.textContent=label;
      btn.style.cssText='flex:1;font-family:var(--mono);font-size:9px;padding:6px;border-radius:6px;border:1px solid;cursor:pointer';
      const refresh=()=>{const a=aiProvider===prov;btn.style.background=a?'var(--alo)':'transparent';btn.style.borderColor=a?'var(--acc)':'var(--brd)';btn.style.color=a?'var(--acc)':'var(--dhi)';};
      refresh();
      btn.addEventListener('click',()=>{aiProvider=prov;
        if(prov!=='local'){const creds=prov==='openai'?openaiCreds:prov==='gemini'?geminiCreds:anthropicCreds;apiKey=creds[0]?.value||'';}
        row.parentElement.parentElement.querySelectorAll('[data-prov]').forEach(el=>el.dispatchEvent(new Event('provchange')));
        refresh();rebuildAIModelSel();rebuildAIKeySel();
      });
      btn.dataset.prov=prov;btn.addEventListener('provchange',refresh);
      row.appendChild(btn);
    });
    return row;
  });

  // Key selector
  const keyCont=document.createElement('div');b.appendChild(keyCont);
  function rebuildAIKeySel(){
    keyCont.innerHTML='';
    if(aiProvider==='local'){
      const wrap=document.createElement('div');wrap.className+=' flex-col-gap';
      const urlLbl=document.createElement('div');urlLbl.className='mlbl';urlLbl.textContent='LOCAL URL';wrap.appendChild(urlLbl);
      const urlInp=document.createElement('input');urlInp.type='text';urlInp.value=localUrl;urlInp.placeholder='http://localhost:11434';
      urlInp.style.cssText='width:100%;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:6px 8px;font-size:11px;font-family:var(--mono);box-sizing:border-box';
      urlInp.addEventListener('input',()=>{localUrl=urlInp.value.trim();apiKey=localUrl;});
      apiKey=localUrl;
      wrap.appendChild(urlInp);keyCont.appendChild(wrap);return;
    }
    const creds=aiProvider==='openai'?openaiCreds:aiProvider==='gemini'?geminiCreds:anthropicCreds;
    if(!creds.length){
      const w=document.createElement('div');w.className='vault-status err';
      w.innerHTML='No '+(aiProvider==='openai'?'OpenAI':aiProvider==='gemini'?'Gemini':'Anthropic')+' key in vault.';
      keyCont.appendChild(w);apiKey='';return;
    }
    apiKey=creds[0].value;
    if(creds.length===1){
      const d=document.createElement('div');d.style.cssText='font-size:10px;color:var(--grn);padding:4px 0;font-family:var(--mono)';
      d.textContent=(aiProvider==='openai'?'⬡':aiProvider==='gemini'?'✧':'✦')+' '+creds[0].name;
      keyCont.appendChild(d);return;
    }
    const sel=document.createElement('select');
    sel.style.cssText='width:100%;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:6px 8px;font-size:11px';
    creds.forEach(c=>{const o=document.createElement('option');o.value=c.value;o.textContent=c.name;sel.appendChild(o);});
    sel.addEventListener('change',()=>apiKey=sel.value);
    keyCont.appendChild(sel);
  }
  rebuildAIKeySel();

  // Model selector — uses module-level AI_MODELS
  let aiModel=AI_MODELS.anthropic[0][0];
  const modelCont=document.createElement('div');b.appendChild(modelCont);
  async function rebuildAIModelSel(){
    modelCont.innerHTML='';
    const lbl=document.createElement('div');lbl.className='mlbl';lbl.textContent='MODEL';modelCont.appendChild(lbl);
    if(aiProvider==='local'){
      const row=document.createElement('div');row.style.cssText='display:flex;gap:6px;align-items:center';
      const inp=document.createElement('input');inp.type='text';inp.placeholder='e.g. llama3, mistral';
      inp.style.cssText='flex:1;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:6px 8px;font-size:11px;font-family:var(--mono)';
      inp.addEventListener('input',()=>aiModel=inp.value.trim());
      const detectBtn=document.createElement('button');detectBtn.textContent='Detect';detectBtn.className='mbtn';detectBtn.style.cssText='font-size:8px;white-space:nowrap';
      detectBtn.addEventListener('click',async()=>{
        detectBtn.disabled=true;detectBtn.textContent='…';
        const models=await detectLocalModelsList(localUrl);
        if(models.length){
          // replace inp with a select
          const sel=document.createElement('select');
          sel.style.cssText='flex:1;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:6px 8px;font-size:11px';
          models.forEach(m=>{const o=document.createElement('option');o.value=m;o.textContent=m;sel.appendChild(o);});
          aiModel=models[0];sel.addEventListener('change',()=>aiModel=sel.value);
          row.replaceChild(sel,inp);detectBtn.textContent='✓ '+models.length;
        }else{detectBtn.textContent='None';}
        detectBtn.disabled=false;setTimeout(()=>detectBtn.textContent='Detect',2500);
      });
      aiModel='';row.appendChild(inp);row.appendChild(detectBtn);modelCont.appendChild(row);return;
    }
    const sel=document.createElement('select');
    sel.style.cssText='width:100%;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:6px 8px;font-size:11px';
    if(aiProvider==='gemini'&&apiKey){
      const loadOpt=document.createElement('option');loadOpt.textContent='Loading models…';loadOpt.disabled=true;sel.appendChild(loadOpt);
      modelCont.appendChild(sel);
      const live=await fetchGeminiModelsList(apiKey).catch(()=>null);
      sel.innerHTML='';
      const list=live&&live.length?live:AI_MODELS.gemini;
      list.forEach(([v,l])=>{const o=document.createElement('option');o.value=v;o.textContent=l;sel.appendChild(o);});
    }else{
      (AI_MODELS[aiProvider]||AI_MODELS.anthropic).forEach(([v,l])=>{const o=document.createElement('option');o.value=v;o.textContent=l;sel.appendChild(o);});
      modelCont.appendChild(sel);
    }
    aiModel=sel.value;sel.addEventListener('change',()=>aiModel=sel.value);
    if(!modelCont.contains(sel))modelCont.appendChild(sel);
  }
  rebuildAIModelSel();

  // Prompt
  const promptLabel='DESCRIBE THE SKILL';
  const promptPh='e.g. "A skill for analyzing CSV data with Python — reads, cleans, and exports. Include error handling for malformed rows."';
  let aiPrompt='';
  wf(b,promptLabel,()=>{
    const ta=document.createElement('textarea');ta.rows=5;ta.placeholder=promptPh;
    ta.style.cssText='width:100%;background:var(--panel);border:1px solid var(--brd);border-radius:6px;color:var(--txt);padding:8px 10px;font-family:var(--mono);font-size:11px;line-height:1.6;resize:vertical;box-sizing:border-box';
    ta.addEventListener('input',()=>aiPrompt=ta.value);return ta;
  });

  const status=document.createElement('div');status.style.cssText='font-size:11px;padding:6px 10px;border-radius:6px;display:none;margin-bottom:8px';b.appendChild(status);
  const setStatus=(msg,type)=>{status.style.display='block';status.className='vault-status '+(type||'info');status.textContent=msg;};

  const genBtn=mkMBtn('✦ Generate',true,async()=>{
    if(!aiPrompt.trim()){setStatus('Enter a prompt first.','err');return;}
    if(!apiKey){setStatus('No API key — add one to the Vault.','err');return;}
    genBtn.disabled=true;genBtn.textContent='Generating…';setStatus('Calling AI…','info');

    try{
      const sys=`You are a skill author for a visual pipeline builder. A skill is a markdown file with YAML frontmatter.

Format:
---
name: skill-name-in-kebab-case
description: "What this skill does and 3-5 exact trigger phrases."
---

# Skill Title

Brief intro.

## When to use
- Trigger situations

## Process
1. Step-by-step instructions

## Key rules
- Constraints

Output ONLY the markdown. No preamble.`;
        const raw=await callAI(aiPrompt.trim(),sys,aiProvider,apiKey,aiModel);
        if(!raw)throw new Error('Empty response');
        let generatedGraph={nodes:[],edges:[]};
        try{
          const igSys='You design internal node graphs for a visual pipeline builder. Given a skill description, output a JSON internalGraph with 2-5 nodes representing execution sub-steps. Use skillId "code" for all nodes. x increments by 300 per node, y=60. Connect nodes left-to-right with edges. Output ONLY valid JSON, no markdown.\n\nStructure: {"nodes":[{"id":"n1","skillId":"code","title":"Step Name","x":60,"y":60,"values":{"lang":"JavaScript","code":"// step logic"},"inputs":[],"outputs":[{"id":"n1o1","name":"result","type":"Text"}]}],"edges":[{"id":"e1","from":"n1","to":"n2","fromPort":"n1o1","toPort":"n2i1"}]}';
          const igRaw=await callAI('Generate an internal execution graph for this skill:\n\n'+raw,igSys,aiProvider,apiKey,aiModel);
          if(igRaw){
            const igClean=igRaw.replace(/^```(?:json)?\n?/,'').replace(/\n?```$/,'').trim();
            generatedGraph=JSON.parse(igClean);
          }
        }catch(e){console.warn('internalGraph gen failed',e);}
        document.getElementById('ai-overlay').classList.remove('open');
        wiz={step:'edit',method:'ai',raw,name:'',desc:'',color:'blue',shape:'default',glyph:'◆',tags:[],category:'Skills',editId:null,_generatedGraph:generatedGraph,inputs:[],outputs:[{id:uid('p'),name:'output',type:'Any'}]};
        parseMeta();
        document.getElementById('wiz-title').textContent='ADD SKILL';
        document.getElementById('wiz-overlay').classList.add('open');drawWiz();

    }catch(e){
      setStatus('Error: '+e.message,'err');
      genBtn.disabled=false;genBtn.textContent='✦ Generate';
    }
  });
  b.appendChild(mkMRow([genBtn]));
}


document.getElementById('ai-close').addEventListener('click',()=>document.getElementById('ai-overlay').classList.remove('open'));
document.getElementById('ai-overlay').addEventListener('click',e=>{if(e.target===e.currentTarget)document.getElementById('ai-overlay').classList.remove('open');});
document.getElementById('btn-ai-generate').addEventListener('click',openAIOverlay);


function drawEdit(b){
  wf(b,'SKILL NAME',()=>{const i=document.createElement('input');i.type='text';i.value=wiz.name;i.placeholder='My Skill';i.addEventListener('input',()=>wiz.name=i.value);return i;});
  wf(b,'DESCRIPTION',()=>{const ta=document.createElement('textarea');ta.rows=2;ta.value=wiz.desc;ta.addEventListener('input',()=>wiz.desc=ta.value);return ta;});
  wf(b,'CATEGORY',()=>{const i=document.createElement('input');i.type='text';i.value=wiz.category;i.placeholder='e.g. Marketing';i.addEventListener('input',()=>wiz.category=i.value);return i;});
  wf(b,'TAGS (comma-separated)',()=>{const i=document.createElement('input');i.type='text';i.value=(wiz.tags||[]).join(', ');i.placeholder='tag1, tag2';i.addEventListener('input',()=>wiz.tags=i.value.split(',').map(t=>t.trim()).filter(Boolean));return i;});
  wf(b,'GLYPH',()=>{
    const g=document.createElement('div');g.className='gg';
    ['◆','◈','⬡','✦','◷','▶','⊕','⊗','◉','⬢','▲','⬛','❖','✿','◐'].forEach(gl=>{
      const btn=document.createElement('button');btn.className='gb';btn.textContent=gl;btn.style.color=wiz.glyph===gl?cx(wiz.color):'var(--dhi)';btn.style.borderColor=wiz.glyph===gl?cx(wiz.color):'var(--brd)';
      btn.addEventListener('click',()=>{wiz.glyph=gl;drawWiz();});g.appendChild(btn);});return g;
  });
  wf(b,'COLOR',()=>{
    const wrap=document.createElement('div');wrap.style.cssText='display:flex;align-items:center;gap:10px';
    const r=document.createElement('div');r.className='cr';r.style.flex='1';
    CIDS.forEach(cid=>{const s=document.createElement('div');s.className='cs'+(wiz.color===cid?' sel':'');s.style.background=COLORS[cid];s.addEventListener('click',()=>{wiz.color=cid;drawWiz();});r.appendChild(s);});
    // Built-In toggle (On/Off style)
    const biGrp=document.createElement('div');biGrp.style.cssText='display:flex;align-items:center;gap:6px;flex-shrink:0';
    const biLbl=document.createElement('span');biLbl.style.cssText='font-family:var(--mono);font-size:10px;color:var(--dhi);letter-spacing:.08em';biLbl.textContent='BUILT-IN';
    const biBtns=document.createElement('div');biBtns.style.cssText='display:flex;gap:1px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:2px';
    ['On','Off'].forEach(mode=>{
      const isActive=mode==='On'?!!wiz.isBuiltin:!wiz.isBuiltin;
      const btn=document.createElement('button');btn.textContent=mode;
      btn.style.cssText='font-family:var(--mono);font-size:11px;padding:4px 12px;border-radius:4px;border:none;cursor:pointer;'+(isActive?'background:var(--alo);color:var(--acc)':'background:transparent;color:var(--dim)');
      btn.addEventListener('click',()=>{wiz.isBuiltin=mode==='On';drawWiz();});
      biBtns.appendChild(btn);
    });
    biGrp.appendChild(biLbl);biGrp.appendChild(biBtns);
    wrap.appendChild(r);wrap.appendChild(biGrp);
    return wrap;
  });
  wf(b,'NODE STYLE',()=>{
    const r=document.createElement('div');r.className='sr';
    [{id:'default',l:'Standard',s:'Solid'},{id:'dashed',l:'Dashed',s:'Dashed'},{id:'ghost',l:'Ghost',s:'Minimal'}].forEach(sh=>{
      const btn=document.createElement('button');btn.className='sb'+(wiz.shape===sh.id?' sel':'');
      btn.style.borderColor=wiz.shape===sh.id?cx(wiz.color):'var(--brd)';btn.style.color=wiz.shape===sh.id?cx(wiz.color):'inherit';
      btn.innerHTML=`<span class="sn">${sh.l}</span><span class="ss">${sh.s}</span>`;
      btn.addEventListener('click',()=>{wiz.shape=sh.id;drawWiz();});r.appendChild(btn);});return r;
  });
  wf(b,wiz.method==='manual'?'SKILL CONTENT (MARKDOWN)':'CONTENT PREVIEW',()=>{
    if(wiz.method==='manual'){const ta=document.createElement('textarea');ta.rows=6;ta.value=wiz.raw;ta.placeholder='# My Skill\n\nDescribe what this skill does…';ta.addEventListener('input',()=>wiz.raw=ta.value);return ta;}
    const d=document.createElement('div');d.className='cprev';d.textContent=wiz.raw.slice(0,400)+(wiz.raw.length>400?'…':'');return d;
  });
  // ── FIELDS EDITOR ────────────────────────────────────────
  const FIELD_TYPES=[{id:'text',label:'Text Input'},{id:'textarea',label:'Text Area'},{id:'codeeditor',label:'Code Editor'},{id:'select',label:'Dropdown'},{id:'number',label:'Number'},{id:'toggle',label:'Toggle'}];
  if(!wiz.fields)wiz.fields=[];
  const fldSec=document.createElement('div');fldSec.className='io-section';fldSec.style.marginTop='10px';
  const fldHdr=document.createElement('div');fldHdr.className='io-section-hdr';
  const fldLbl=document.createElement('span');fldLbl.className='io-lbl';fldLbl.textContent='FIELDS';
  const fldAdd=document.createElement('button');fldAdd.className='io-add-btn';fldAdd.textContent='+ Add Field';
  fldAdd.addEventListener('click',()=>{wiz.fields.push({key:'field_'+uid('f'),label:'',type:'text',ph:'',opts:[]});refreshFields();});
  fldHdr.appendChild(fldLbl);fldHdr.appendChild(fldAdd);fldSec.appendChild(fldHdr);
  const fldList=document.createElement('div');fldList.className='io-port-list';fldSec.appendChild(fldList);
  const refreshFields=()=>{
    fldList.innerHTML='';
    if(!wiz.fields.length){const em=document.createElement('div');em.className='io-empty';em.textContent='No fields — add inputs, text areas, or code editors';fldList.appendChild(em);return;}
    wiz.fields.forEach((f,i)=>{
      const row=document.createElement('div');row.style.cssText='display:flex;flex-direction:column;gap:4px;padding:6px 8px;background:var(--surf);border:1px solid var(--brd);border-radius:6px';
      const top=document.createElement('div');top.style.cssText='display:flex;gap:4px;align-items:center';
      const labelIn=document.createElement('input');labelIn.type='text';labelIn.className='io-port-name';labelIn.placeholder='Field label';labelIn.value=f.label||'';
      labelIn.addEventListener('input',()=>{f.label=labelIn.value;f.key=f.label.toLowerCase().replace(/[^a-z0-9]/g,'_')||f.key;});
      const typeSel=document.createElement('select');typeSel.className='io-port-type';
      FIELD_TYPES.forEach(ft=>{const o=document.createElement('option');o.value=ft.id;o.textContent=ft.label;if(ft.id===f.type)o.selected=true;typeSel.appendChild(o);});
      typeSel.addEventListener('change',()=>{f.type=typeSel.value;refreshFields();});
      const del=document.createElement('button');del.className='io-port-del';del.textContent='×';
      del.addEventListener('click',()=>{wiz.fields.splice(i,1);refreshFields();});
      top.appendChild(labelIn);top.appendChild(typeSel);top.appendChild(del);row.appendChild(top);
      if(f.type==='select'){
        const optIn=document.createElement('input');optIn.type='text';optIn.placeholder='Options (comma-separated)';
        optIn.style.cssText='width:100%;font-size:10px;padding:4px 6px;background:var(--panel);border:1px solid var(--brd);border-radius:4px;color:var(--txt)';
        optIn.value=(f.opts||[]).join(', ');optIn.addEventListener('input',()=>{f.opts=optIn.value.split(',').map(o=>o.trim()).filter(Boolean);});
        row.appendChild(optIn);
      }else if(f.type==='codeeditor'){
        const langIn=document.createElement('input');langIn.type='text';langIn.placeholder='Language (e.g. JavaScript)';
        langIn.style.cssText='width:100%;font-size:10px;padding:4px 6px;background:var(--panel);border:1px solid var(--brd);border-radius:4px;color:var(--txt)';
        langIn.value=f.lang||'';langIn.addEventListener('input',()=>{f.lang=langIn.value;});
        row.appendChild(langIn);
      }else{
        const phIn=document.createElement('input');phIn.type='text';phIn.placeholder='Placeholder text';
        phIn.style.cssText='width:100%;font-size:10px;padding:4px 6px;background:var(--panel);border:1px solid var(--brd);border-radius:4px;color:var(--txt)';
        phIn.value=f.ph||'';phIn.addEventListener('input',()=>{f.ph=phIn.value;});
        row.appendChild(phIn);
      }
      fldList.appendChild(row);
    });
  };
  refreshFields();
  b.appendChild(fldSec);

  // Built-in toggle moved inline with color picker below

    // ── PORT EDITOR (shown in all edit modes) ───────────────
  const PORT_TYPES_WIZ=['Text','Number','Boolean','Image','Video','Audio','JSON','File','Any'];
  ['inputs','outputs'].forEach(side=>{
    if(!wiz[side])wiz[side]=side==='outputs'?[{id:uid('p'),name:'output',type:'Any'}]:[];
    const sec=document.createElement('div');sec.className='io-section';sec.style.marginTop='10px';
    const hdr=document.createElement('div');hdr.className='io-section-hdr';
    const lbl=document.createElement('span');lbl.className='io-lbl';lbl.textContent=side==='inputs'?'INPUTS':'OUTPUTS';
    const addBtn=document.createElement('button');addBtn.className='io-add-btn';addBtn.textContent='+ Add';
    addBtn.addEventListener('click',()=>{
      wiz[side].push({id:uid('p'),name:'',type:'Any'});
      refreshPortList();
    });
    hdr.appendChild(lbl);hdr.appendChild(addBtn);sec.appendChild(hdr);
    const list=document.createElement('div');list.className='io-port-list';sec.appendChild(list);
    const refreshPortList=()=>{
      list.innerHTML='';
      if(!wiz[side].length){
        const em=document.createElement('div');em.className='io-empty';
        em.textContent=side==='inputs'?'No inputs — node only produces data':'At least one output required';
        list.appendChild(em);return;
      }
      wiz[side].forEach((port,i)=>{
        const row=document.createElement('div');row.className='io-port-row';
        const nameIn=document.createElement('input');nameIn.type='text';nameIn.className='io-port-name';
        nameIn.placeholder=side==='inputs'?'input name…':'output name…';
        nameIn.value=port.name||'';
        nameIn.addEventListener('input',()=>{wiz[side][i].name=nameIn.value;});
        const typeSel=document.createElement('select');typeSel.className='io-port-type';
        PORT_TYPES_WIZ.forEach(t=>{const o=document.createElement('option');o.value=t;o.textContent=t;if(t===port.type)o.selected=true;typeSel.appendChild(o);});
        typeSel.addEventListener('change',()=>{wiz[side][i].type=typeSel.value;});
        const del=document.createElement('button');del.className='io-port-del';del.textContent='×';del.title='Remove';
        del.addEventListener('click',()=>{wiz[side].splice(i,1);refreshPortList();});
        row.appendChild(nameIn);row.appendChild(typeSel);row.appendChild(del);list.appendChild(row);
      });
    };
    refreshPortList();
    b.appendChild(sec);
  });
  b.appendChild(mkMRow([!wiz.editId?mkMBtn('← Back',false,()=>{wiz.step='method';drawWiz();}):null,mkMBtn('Save Skill',true,doSaveWiz)]));
}
function doSaveWiz(){
  const id=wiz.editId||uid('sk');
  const existing=getSk(id);
  const wizIns=(wiz.inputs||[]).filter(p=>p.name?.trim());
  const wizOuts=(wiz.outputs||[]).filter(p=>p.name?.trim());
  const s={
    id,label:wiz.name||'Unnamed',desc:wiz.desc,rawContent:wiz.raw,
    color:wiz.color,shape:wiz.shape,glyph:wiz.glyph,category:wiz.category||'Skills',
    tags:wiz.tags||[],isBuiltin:!!wiz.isBuiltin,fields:wiz.fields||[],
    hasIn:wizIns.length>0,hasOut:wizOuts.length>0,
    defaultInputs:wizIns,
    defaultOutputs:wizOuts,
    deps:existing?.deps||[],
    internalGraph:wiz._generatedGraph||existing?.internalGraph||{nodes:[],edges:[]}
  };
  upsertSkill(s);
  document.getElementById('wiz-overlay').classList.remove('open');
  renderLib();updateTopbar();
  if(wiz.editId){getNodes().filter(n=>(n.type||n.skillId)===id).forEach(n=>rebuildNode(n));}
  selectLib(id);
}

// ═══════════════════════════════════════════════════════════
// SHARED: extract node content for LLM export
// ═══════════════════════════════════════════════════════════

// Return only nodes that are connected to at least one edge
// Filters nodes to only those connected to at least one edge
function connectedOnly(nodes, edges){
  if(nodes.length<=1)return nodes.slice();        // 1 node IS the pipeline; >1 nodes filter by edges
  const connected=new Set();
  edges.forEach(e=>{connected.add(e.from);connected.add(e.to);});
  return nodes.filter(n=>connected.has(n.id));
}

// Effective skill content for ONE node instance: the per-node override
// (values._skillContent) if the user edited it here, else the library skill default.
// Used only on the per-node compile path — skill-level reads stay on sk.rawContent.
function nodeRawContent(node,sk){
  const ov=node?.values?._skillContent;
  return (typeof ov==='string')?ov:(sk?.rawContent||'');
}

// True if this node's skill content has been edited away from its library definition.
// Same predicate gates the divergence badge AND the Merge button's enabled state.
function isNodeDiverged(node,sk){
  const ov=node?.values?._skillContent;
  if(typeof ov!=='string')return false;          // never edited here
  return ov!==(sk?.rawContent||'');               // edited and differs from library
}

// Drawer / Content-tab label for an input-family primitive.
// Mirrors the inspector's Fields-tab field label for the primary content key, uppercased.
// text_input → CONTENT, code → CODE, io_input/fetch → CAPTURED CONTENT (their field is so labeled).
// Logic family doesn't call this — it uses the fixed 'SKILL CONTENT' label.
function drawerLabelFor(sk){
  if(!sk)return 'CAPTURED CONTENT';
  const contentKey=sk.id==='code'?'code':'content';
  const field=(sk.fields||[]).find(f=>f.key===contentKey);
  return (field?.label||'Captured Content').toUpperCase();
}

// Next available version name for a base label: scans skills for "<base>.vN",
// returns "<base>.v{max+1}" (so .v2, .v3… not a static .v1). Used by Merge/Save dialogs.
function nextVersionName(baseLabel){
  const base=(baseLabel||'Skill').replace(/\.v\d+$/,'');   // strip an existing .vN so we version the root
  const re=new RegExp('^'+base.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')+'\\.v(\\d+)$');
  let max=0;
  skills.forEach(s=>{const m=(s.label||'').match(re);if(m){const n=+m[1];if(n>max)max=n;}});
  return base+'.v'+(max+1);
}

// ═══════════════════════════════════════════════════════════
// MAP RUNTIME HELPERS — pure functions, headless-tested
// ═══════════════════════════════════════════════════════════
// parseCollection: turn upstream string input into an array of items per split mode.
// Throws on: JSON Array mode with invalid/non-array input; Custom delimiter with blank delimiter.
// Empty/whitespace input → [] (Map skips silently per the empty-collection rule).
function parseCollection(input, splitMode, delimiter){
  let s=(input==null)?'':String(input);

  // Strip leading/trailing markdown code-fence wrappers. Some models (notably Phi-4) wrap
  // the entire structured output in ```lang ... ```, which contaminates the first/last
  // chunks of any delimiter-based split. The fence is a model artifact at the LLM output
  // boundary — it's never part of the structured content. Match only when the fence
  // brackets the whole input; inline fences (e.g. code blocks inside a single item) are preserved.
  s=s.replace(/^\s*```[a-zA-Z0-9_-]*\s*\n/, '');
  s=s.replace(/\n\s*```\s*$/, '');

  const trimmed=s.trim();
  if(!trimmed)return [];
  if(splitMode==='JSON Array'){
    let parsed;
    try{parsed=JSON.parse(trimmed);}
    catch(e){throw new Error('JSON Array mode: input is not valid JSON ('+e.message+')');}
    if(!Array.isArray(parsed))throw new Error('JSON Array mode: input is valid JSON but not an array');
    return parsed.map(x=>typeof x==='string'?x:JSON.stringify(x));
  }
  if(splitMode==='Newlines'){
    return trimmed.split('\n').map(x=>x.trim()).filter(x=>x.length>0);
  }
  if(splitMode==='Comma-separated'){
    return trimmed.split(',').map(x=>x.trim()).filter(x=>x.length>0);
  }
  if(splitMode==='Custom delimiter'){
    if(!delimiter||delimiter.length===0)throw new Error('Custom delimiter mode: no delimiter provided');
    return trimmed.split(delimiter).map(x=>x.trim()).filter(x=>x.length>0);
  }
  // Auto: try JSON array if it looks like one, else newline fallback
  if(trimmed.startsWith('[')){
    try{
      const parsed=JSON.parse(trimmed);
      if(Array.isArray(parsed))return parsed.map(x=>typeof x==='string'?x:JSON.stringify(x));
    }catch(e){/* fall through */}
  }
  return trimmed.split('\n').map(x=>x.trim()).filter(x=>x.length>0);
}

// parseMaxIterations: parse Map's max_iterations field with safe fallback.
// Blank/non-numeric/non-positive → fallback. Otherwise → integer.
function parseMaxIterations(val, fallback){
  if(val==null||String(val).trim()==='')return fallback;
  const n=parseInt(String(val).trim(),10);
  if(!Number.isFinite(n)||n<=0)return fallback;
  return n;
}

// findMapBody: nodes reachable downstream from a Map node's output, stopping at
// graph-output or another Map (boundaries; excluded from body). Returns Set<id>.
function findMapBody(mapNodeId, nodes, edges){
  const nodeById=new Map(nodes.map(n=>[n.id,n]));
  const body=new Set();
  const visited=new Set([mapNodeId]);
  const queue=edges.filter(e=>e.from===mapNodeId).map(e=>e.to);
  while(queue.length){
    const nid=queue.shift();
    if(visited.has(nid))continue;
    visited.add(nid);
    const n=nodeById.get(nid);if(!n)continue;
    const sk=nodeSk(n);
    const skId=sk?.id;
    if(skId==='graph-output'||skId==='map')continue;  // boundary, don't include and don't descend
    body.add(nid);
    for(const e of edges){
      if(e.from===nid&&!visited.has(e.to))queue.push(e.to);
    }
  }
  return body;
}

// routersInMapBody: array of Router node IDs found within a given Map's body.
// Used by the nested-Router warning system (canvas badge, drawer projection, pre-run dialog).
function routersInMapBody(mapNodeId, nodes, edges){
  const body=findMapBody(mapNodeId,nodes,edges);
  const nodeById=new Map(nodes.map(n=>[n.id,n]));
  const out=[];
  for(const bid of body){
    const n=nodeById.get(bid);
    if(n&&nodeSk(n)?.id==='router')out.push(bid);
  }
  return out;
}

// projectMaxCalls: upper-bound estimate of total body-iterations across the graph,
// counting each Map's iters × (1 body pass + sum of router loops in that body).
// Nested Maps don't multiply — each contributes its own subtotal (Option B limitation;
// Option C would model the cross-product properly). Used by the pre-run confirm dialog
// and the drawer projection line.
// Returns { total, mapBreakdowns: [{mapId, iters, routers:[{id,loops,usedDefault}], subtotal}] }.
function projectMaxCalls(nodes, edges){
  const breakdowns=[];
  let total=0;
  const nodeById=new Map(nodes.map(n=>[n.id,n]));
  const defLoops=CONFIG.DEFAULT_MAX_LOOPS;
  for(const n of nodes){
    if(nodeSk(n)?.id!=='map')continue;
    const iters=parseMaxIterations(n.values?.max_iterations,defLoops);
    const routerIds=routersInMapBody(n.id,nodes,edges);
    const routers=routerIds.map(rid=>{
      const r=nodeById.get(rid);
      const raw=r?.values?.max_loops;
      const usedDefault=(raw==null||String(raw).trim()==='');
      const loops=usedDefault?defLoops:(parseInt(String(raw),10)||defLoops);
      return {id:rid,loops,usedDefault};
    });
    const callsPerIter=1+routers.reduce((s,r)=>s+r.loops,0);
    const subtotal=iters*callsPerIter;
    breakdowns.push({mapId:n.id,iters,routers,subtotal});
    total+=subtotal;
  }
  return {total,mapBreakdowns:breakdowns};
}

// Get the user-typed content from a node: field values + code body.
// Skill rawContent is NOT included here — it's harvested separately by
// _collectSkillsWithContent() for the reference-docs section of exports.
// This separation prevents the same skill doc appearing inline AND in references.
function getNodeContent(node,opts){
  const sk=nodeSk(node);if(!sk)return{title:'',userLines:[]};
  const title=node.title||node.values?.name||sk.label;
  const userLines=[];
  const skipJsonSchema=opts&&opts.skipJsonSchema;

  // User-filled field values
  (sk.fields||[]).forEach(f=>{
    const v=node.values?.[f.key];
    if(v===undefined||v===null||v==='')return;
    if(skipJsonSchema&&f.type==='jsonschema')return;
    if(f.type==='codeeditor'){
      const lang=(node.values?.lang||f.lang||'').toLowerCase();
      if(String(v).trim())userLines.push('```'+lang+'\n'+String(v).trim()+'\n```');
    }else if(f.type==='medialist'&&Array.isArray(v)&&v.length){
      userLines.push('**'+f.label+':** '+v.filter(x=>x.url).map(x=>x.url).join(', '));
    }else if(Array.isArray(v)&&v.length){
      userLines.push('**'+f.label+':** '+v.join(', '));
    }else if(String(v).trim()){
      userLines.push('**'+f.label+':** '+String(v).trim());
    }
  });

  // Code node special case
  if(sk.id==='code'&&node.values?.code?.trim()&&!userLines.length){
    const lang=(node.values.lang||'').toLowerCase()||'js';
    userLines.push('```'+lang+'\n'+node.values.code.trim()+'\n```');
  }

  return{title,userLines};
}

// Recursively render nodes in execution order, depth-limited.
// Each step carries userLines (typed values) and subSteps (internal graph).
function renderSteps(nodes,edges,depth,maxDepth,opts){
  if(depth>(maxDepth||10))return[];
  const ordered=topoWalk(nodes,edges);
  const steps=[];
  const visited=new Set();
  ordered.forEach(node=>{
    if(visited.has(node.id))return;
    visited.add(node.id);
    const sk=nodeSk(node);if(!sk)return;
    const{title,userLines}=getNodeContent(node,opts);
    const step={title,userLines:userLines.slice(),subSteps:[]};
    const ig=sk.internalGraph;
    if(ig?.nodes?.length)step.subSteps=renderSteps(ig.nodes,ig.edges||[],depth+1,maxDepth,opts);
    steps.push(step);
  });
  return steps;
}

// ═══════════════════════════════════════════════════════════
// EXPORT HELPERS — XML escaping + skill collection
// ═══════════════════════════════════════════════════════════
function _xmlAttr(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
function _xmlText(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}

// Strip surrounding ```...``` markdown code fences from a multiline value.
// Used in XML/plain-text exports where fence markers are noise. Markdown
// exports (GPT paste view) keep them since they render correctly there.
function _unfence(s){
  const m=String(s||'').match(/^```[^\n]*\n([\s\S]*?)\n```\s*$/);
  return m?m[1]:String(s||'');
}

// True if a step has any user content directly or in any descendant subStep.
// Used to skip empty scaffolding nodes (GRAPH INPUT, GRAPH OUTPUT) from exports.
function _hasContent(step){
  if(step.userLines&&step.userLines.length)return true;
  return(step.subSteps||[]).some(_hasContent);
}

// Walk pipeline nodes (incl. internal graphs) and collect skills with rawContent.
// Deduped by skill id, depth-capped. Returns Set of skill ids in discovery order.
function _collectSkillsWithContent(rootNodes){
  const seen=new Set();
  const walk=(nodes,depth)=>{
    if(depth>10)return;
    nodes.forEach(n=>{
      const sk=nodeSk(n);
      if(!sk||!sk.rawContent?.trim()||seen.has(sk.id))return;
      seen.add(sk.id);
      if(sk.internalGraph?.nodes?.length)walk(sk.internalGraph.nodes,depth+1);
    });
  };
  walk(rootNodes,0);
  return seen;
}

// Standard inputs every text-prompt exporter (Claude/GPT/Gemini) needs from
// the root pipeline. `opts` is forwarded to renderSteps — currently only
// { skipJsonSchema:true } from buildGPT to suppress the function-schema dump
// that's already carried by tools[].
function _exportInputs(opts){
  const rootFrame=canvasStack[0];
  const nodes=connectedOnly(rootFrame.nodes,rootFrame.edges);
  return{
    name:activePipeline()?.name||'Pipeline',
    nodes,
    steps:renderSteps(nodes,rootFrame.edges,0,10,opts),
    skillIds:_collectSkillsWithContent(nodes),
  };
}

// ═══════════════════════════════════════════════════════════
// CLAUDE EXPORT — XML-structured prompt
// XML tags map directly to Anthropic's documented best practices
// for structured prompts. Reference docs stay inline (long context is fine).
// ═══════════════════════════════════════════════════════════
function buildClaude(){
  const{name,steps,skillIds}=_exportInputs();
  if(!steps.length)return'<workflow name="'+_xmlAttr(name)+'">\n  <!-- empty pipeline -->\n</workflow>';

  let out='<workflow name="'+_xmlAttr(name)+'">\n\n';

  // Role + constraints
  out+='<role>\n';
  out+='You are a specialized AI assistant executing the "'+name+'" workflow.\n\n';
  out+='Do not hallucinate, fabricate, or assume information you do not have. If you lack the data, context, or knowledge needed to complete any part of a task, stop and ask the user for guidance before proceeding.\n\n';
  out+='Follow each step in the exact sequence below. Complete each step fully before moving to the next. If a step requires information not yet provided, ask before proceeding. Always complete the full sequence.\n';
  out+='</role>\n\n';

  // Execution sequence — nested <step> elements with numeric paths (1, 1.1, 1.1.1, ...).
  // Skips empty scaffolding nodes; numbering reflects rendered position, not list index.
  out+='<execution_sequence>\n';
  const writeSteps=(list,depth,parentNum)=>{
    let idx=0;
    list.forEach(step=>{
      if(!_hasContent(step))return;
      idx++;
      const num=parentNum?parentNum+'.'+idx:idx+'';
      const indent='  '.repeat(depth+1);
      out+=indent+'<step n="'+num+'" title="'+_xmlAttr(step.title)+'">\n';
      if(step.userLines.length){
        out+=indent+'  <instructions>\n';
        step.userLines.forEach(l=>{
          _unfence(l).split('\n').forEach(ln=>{out+=indent+'    '+_xmlText(ln)+'\n';});
        });
        out+=indent+'  </instructions>\n';
      }
      if(step.subSteps.length&&step.subSteps.some(_hasContent)){
        out+=indent+'  <sub_steps>\n';
        writeSteps(step.subSteps,depth+2,num);
        out+=indent+'  </sub_steps>\n';
      }
      out+=indent+'</step>\n';
    });
  };
  writeSteps(steps,0,'');
  out+='</execution_sequence>\n';

  // Reference documents (skills with rawContent)
  if(skillIds.size){
    out+='\n<reference_documents>\n';
    skillIds.forEach(id=>{
      const sk=getSk(id);if(!sk)return;
      out+='  <document source="'+_xmlAttr(sk.label)+'">\n';
      out+=_xmlText(sk.rawContent)+'\n';
      out+='  </document>\n';
    });
    out+='</reference_documents>\n';
  }

  out+='\n</workflow>';
  return out;
}

// ═══════════════════════════════════════════════════════════
// GPT EXPORT — paste-friendly markdown + real Assistants API JSON
// Returns { text, json }. `text` is what shows in the tab (pasteable into
// Custom GPT Instructions). `json` is the real Assistants/Responses API shape
// used by buildGPTBundle for the .zip download.
// ═══════════════════════════════════════════════════════════
function buildGPT(){
  const{name,nodes,steps,skillIds}=_exportInputs({skipJsonSchema:true});

  if(!nodes.length)return{text:'No nodes to export.',json:null};

  // ── Collect Code-node tools with REAL OpenAI function-call schemas ──
  // Each Code node may define a custom `parameters` JSON Schema in its values.
  // Falls back to default { input: string } when absent or unparseable.
  const tools=[];
  const toolNames=new Set();
  const defaultParams={type:'object',properties:{input:{type:'string',description:'Text input to process through this step'}},required:['input']};
  const collectTools=(nodeList,depth)=>{
    if(depth>10)return;
    nodeList.forEach(n=>{
      const sk=nodeSk(n);
      if(sk?.id==='code'&&(n.values?.code||'').trim()){
        let tname=(n.title||sk.label||'tool').toLowerCase().replace(/[^a-z0-9_]/g,'_').replace(/^_+|_+$/g,'')||'tool';
        let finalName=tname,i=2;
        while(toolNames.has(finalName)){finalName=tname+'_'+i;i++;}
        toolNames.add(finalName);
        const lang=n.values?.lang||'JavaScript';
        const label=n.title||sk.label||'Code step';
        let parameters=defaultParams;
        const customParams=(n.values?.parameters||'').trim();
        if(customParams){
          try{const parsed=JSON.parse(customParams);if(parsed&&typeof parsed==='object')parameters=parsed;}catch(e){/* fall through to default */}
        }
        tools.push({
          type:'function',
          function:{
            name:finalName,
            description:label+' ('+lang+' step from "'+name+'" pipeline)',
            parameters,
          },
        });
      }
      const ig=sk?.internalGraph;
      if(ig?.nodes?.length)collectTools(ig.nodes,depth+1);
    });
  };
  collectTools(nodes,0);

  // ── Build the instructions string (used in both `text` and `json.instructions`) ──
  const instrLines=[];
  instrLines.push('You are a specialized AI assistant executing the "'+name+'" workflow.');
  instrLines.push('');
  instrLines.push('Rules:');
  instrLines.push('- Do not hallucinate, fabricate, or assume information you do not have.');
  instrLines.push('- If you lack the data, context, or knowledge needed for any step, stop and ask the user.');
  instrLines.push('- Follow each step in the exact sequence. Complete each fully before moving to the next.');
  instrLines.push('- For any code step, execute or reason through the logic explicitly.');
  instrLines.push('');
  instrLines.push('Steps:');
  const writeSteps=(list,depth,target)=>{
    let idx=0;
    list.forEach(step=>{
      if(!_hasContent(step))return;
      idx++;
      const indent='  '.repeat(depth);
      const num=depth===0?idx+'. ':indent+'- ';
      target.push(num+step.title);
      step.userLines.forEach(l=>{
        l.split('\n').forEach(ln=>target.push(indent+'   '+ln));
      });
      if(step.subSteps.length)writeSteps(step.subSteps,depth+1,target);
    });
  };
  writeSteps(steps,0,instrLines);
  const instructions=instrLines.join('\n');

  // ── Paste-friendly markdown view (what the tab displays) ──
  const textLines=[];
  textLines.push('# '+name);
  textLines.push('');
  textLines.push(instructions);
  if(tools.length){
    textLines.push('');
    textLines.push('## Tools');
    textLines.push('');
    tools.forEach(t=>textLines.push('- `'+t.function.name+'` — '+t.function.description));
  }
  if(skillIds.size){
    textLines.push('');
    textLines.push('## Knowledge');
    textLines.push('');
    textLines.push('_Upload these as Knowledge files in the Custom GPT builder, or include them in the file_search vector store for the Assistants API:_');
    textLines.push('');
    skillIds.forEach(id=>{const sk=getSk(id);if(sk)textLines.push('- `'+sk.label+'.md`');});
  }
  const text=textLines.join('\n').trim();

  // ── Real Assistants API spec (for the .json in the bundle) ──
  const json={
    name,
    description:'Specialized assistant executing the "'+name+'" workflow (exported from GUIness).',
    model:'gpt-4o',
    instructions,
    tools,
  };

  return{text,json};
}

// Build a downloadable .zip bundle for the GPT export:
//   pipeline-name/
//     assistant.json        — real Assistants API spec
//     instructions.md       — pasteable into Custom GPT Instructions
//     knowledge/<skill>.md  — one file per skill with rawContent (if any)
function buildGPTBundle(){
  const gpt=buildGPT();
  if(!gpt.json)return null;
  const enc=new TextEncoder();
  const p=activePipeline();
  const baseName=((p?.name||'pipeline').replace(/[^a-z0-9]/gi,'-').toLowerCase().replace(/-+/g,'-').replace(/^-|-$/g,''))||'pipeline';
  const dir=baseName+'/';
  const files=[];
  files.push({name:dir+'assistant.json',data:enc.encode(JSON.stringify(gpt.json,null,2))});
  files.push({name:dir+'instructions.md',data:enc.encode(gpt.json.instructions)});
  const rootFrame=canvasStack[0];
  const nodes=connectedOnly(rootFrame.nodes,rootFrame.edges);
  const skillIds=_collectSkillsWithContent(nodes);
  skillIds.forEach(id=>{
    const sk=getSk(id);if(!sk)return;
    const safe=((sk.label||'skill').toLowerCase().replace(/[^a-z0-9-]/g,'-').replace(/-+/g,'-').replace(/^-|-$/g,''))||'skill';
    files.push({name:dir+'knowledge/'+safe+'.md',data:enc.encode(sk.rawContent)});
  });
  return{blob:_makeZip(files),filename:baseName+'-gpt-bundle-'+(new Date().toISOString().slice(0,10))+'.zip'};
}

// Truncated reference form for a skill in the Gemini `full` export.
// Fallback chain: hand-curated `desc` → first ~200 chars of `rawContent`
// → empty (caller emits label-only). Both branches share the same 200-char
// cap so "truncated" never emits more chars than "full" — desc is
// curated but not guaranteed short.
function _geminiSkillRef(sk){
  const CAP=200;
  const cap=s=>s.length>CAP?s.slice(0,CAP-3)+'...':s;
  const desc=(sk.desc||'').trim();
  if(desc)return cap(desc);
  const raw=(sk.rawContent||'').trim();
  return cap(raw);
}

// ═══════════════════════════════════════════════════════════
// GEMINI EXPORT — Persona/Task/Constraints/Steps structure
// Returns { full, fit }. Both are plain text (no markdown).
// `full` includes REFERENCE block with skill rawContent.
// `fit` is terser, drops REFERENCE, targets CONFIG.GEMINI_INSTRUCTION_LIMIT.
// ═══════════════════════════════════════════════════════════
function buildGemini(){
  const{name,steps,skillIds}=_exportInputs();
  if(!steps.length)return{full:'(empty pipeline)',fit:'(empty pipeline)'};

  // ── Full variant ──
  const fullLines=[];
  fullLines.push('PERSONA');
  fullLines.push('You are a specialized AI assistant executing the "'+name+'" workflow.');
  fullLines.push('');
  fullLines.push('TASK');
  fullLines.push('Execute the workflow steps below, in sequence, against whatever input the user provides.');
  fullLines.push('');
  fullLines.push('CONSTRAINTS');
  fullLines.push('- Do not hallucinate or fabricate information.');
  fullLines.push('- If you lack data, context, or knowledge for any step, stop and ask the user.');
  fullLines.push('- Complete each step fully before moving to the next. Do not skip or reorder steps.');
  fullLines.push('- For any code step, reason through the logic explicitly.');
  fullLines.push('');
  fullLines.push('STEPS');
  const writeFullSteps=(list,depth,parentNum)=>{
    let idx=0;
    list.forEach(step=>{
      if(!_hasContent(step))return;
      idx++;
      const num=parentNum?parentNum+'.'+idx:idx+'';
      const pad='  '.repeat(depth);
      const prefix=depth===0?num+'. ':pad+'- ';
      fullLines.push(prefix+step.title);
      step.userLines.forEach(l=>{
        _unfence(l).split('\n').forEach(ln=>fullLines.push(pad+'   '+ln));
      });
      if(step.subSteps.length)writeFullSteps(step.subSteps,depth+1,num);
    });
  };
  writeFullSteps(steps,0,'');

  if(skillIds.size){
    fullLines.push('');
    fullLines.push('REFERENCE');
    skillIds.forEach(id=>{
      const sk=getSk(id);if(!sk)return;
      fullLines.push('');
      fullLines.push('--- '+sk.label+' ---');
      if(_geminiTruncatedSkillIds.has(id)){
        const ref=_geminiSkillRef(sk);
        if(ref)fullLines.push(ref);
      }else{
        fullLines.push(sk.rawContent);
      }
    });
  }

  fullLines.push('');
  fullLines.push('OUTPUT');
  fullLines.push('Always complete the full sequence. State assumptions explicitly.');

  const full=fullLines.join('\n');

  // ── Fit variant: terser, no REFERENCE, inline step bodies ──
  const fitLines=[];
  fitLines.push('PERSONA: AI assistant executing "'+name+'" workflow.');
  fitLines.push('');
  fitLines.push('RULES');
  fitLines.push('- No hallucination. Ask if data is missing.');
  fitLines.push('- Complete each step before the next.');
  fitLines.push('- Reason through code steps explicitly.');
  fitLines.push('');
  fitLines.push('STEPS');
  const writeFitSteps=(list,depth,parentNum)=>{
    let idx=0;
    list.forEach(step=>{
      if(!_hasContent(step))return;
      idx++;
      const num=parentNum?parentNum+'.'+idx:idx+'';
      const pad='  '.repeat(depth);
      const prefix=depth===0?num+'. ':pad+'- ';
      // Build a single compact inline string: unfence, collapse whitespace, truncate.
      const inline=step.userLines
        .map(l=>_unfence(l).replace(/\s+/g,' ').trim())
        .filter(Boolean)
        .join(' | ');
      const capped=inline.length>200?inline.slice(0,197)+'...':inline;
      fitLines.push(prefix+(capped?step.title+' — '+capped:step.title));
      if(step.subSteps.length)writeFitSteps(step.subSteps,depth+1,num);
    });
  };
  writeFitSteps(steps,0,'');

  const fit=fitLines.join('\n');

  return{full,fit};
}

// ═══════════════════════════════════════════════════════════
// ZIP HELPER — store-only (uncompressed) ZIP writer
// Shared by _downloadSkillAsZip and buildGPTBundle.
// Takes [{name, data: Uint8Array}], returns a Blob.
// ═══════════════════════════════════════════════════════════
// CRC-32 (IEEE 802.3) with memoized lookup table. Required for strict
// ZIP readers like 7-Zip; `unzip` tolerates zeros but flags warnings.
function _crc32(data){
  if(!_crc32._t){
    const t=new Uint32Array(256);
    for(let i=0;i<256;i++){
      let c=i;
      for(let j=0;j<8;j++)c=(c&1)?(0xEDB88320^(c>>>1)):(c>>>1);
      t[i]=c;
    }
    _crc32._t=t;
  }
  const t=_crc32._t;
  let crc=0xFFFFFFFF;
  for(let i=0;i<data.length;i++)crc=t[(crc^data[i])&0xFF]^(crc>>>8);
  return (crc^0xFFFFFFFF)>>>0;
}
function _makeZip(files){
  const parts=[];
  const centralDir=[];
  let offset=0;
  for(const file of files){
    const nameBytes=new TextEncoder().encode(file.name);
    const crc=_crc32(file.data);
    const header=new Uint8Array(30+nameBytes.length);
    const hv=new DataView(header.buffer);
    hv.setUint32(0,0x04034b50,true);
    hv.setUint16(4,20,true);
    hv.setUint16(8,0,true);
    hv.setUint32(14,crc,true);
    hv.setUint32(18,file.data.length,true);
    hv.setUint32(22,file.data.length,true);
    hv.setUint16(26,nameBytes.length,true);
    header.set(nameBytes,30);
    const cd=new Uint8Array(46+nameBytes.length);
    const cv=new DataView(cd.buffer);
    cv.setUint32(0,0x02014b50,true);
    cv.setUint16(4,20,true);
    cv.setUint16(6,20,true);
    cv.setUint16(10,0,true);
    cv.setUint32(16,crc,true);
    cv.setUint32(20,file.data.length,true);
    cv.setUint32(24,file.data.length,true);
    cv.setUint16(28,nameBytes.length,true);
    cv.setUint32(42,offset,true);
    cd.set(nameBytes,46);
    centralDir.push(cd);
    parts.push(header);
    parts.push(file.data);
    offset+=header.length+file.data.length;
  }
  const cdOffset=offset;
  let cdSize=0;
  centralDir.forEach(cd=>{parts.push(cd);cdSize+=cd.length;});
  const eocd=new Uint8Array(22);
  const ev=new DataView(eocd.buffer);
  ev.setUint32(0,0x06054b50,true);
  ev.setUint16(8,files.length,true);
  ev.setUint16(10,files.length,true);
  ev.setUint32(12,cdSize,true);
  ev.setUint32(16,cdOffset,true);
  parts.push(eocd);
  return new Blob(parts,{type:'application/zip'});
}

// ═══════════════════════════════════════════════════════════
// TOPOLOGICAL WALK
// ═══════════════════════════════════════════════════════════
// Topologically sorts nodes by their edge dependencies (upstream first)
function topoWalk(nodes, edges){
  const adj=new Map();
  const inDeg=new Map();
  const nodeMap=new Map();
  nodes.forEach(n=>{adj.set(n.id,[]);inDeg.set(n.id,0);nodeMap.set(n.id,n);});
  edges.forEach(e=>{
    if(adj.has(e.from)&&inDeg.has(e.to)){
      adj.get(e.from).push(e.to);
      inDeg.set(e.to,inDeg.get(e.to)+1);
    }
  });
  const queue=[];
  inDeg.forEach((deg,id)=>{if(deg===0)queue.push(id);});
  const ordered=[];
  while(queue.length){
    const id=queue.shift();
    const node=nodeMap.get(id);
    if(node)ordered.push(node);
    (adj.get(id)||[]).forEach(succ=>{
      const newDeg=inDeg.get(succ)-1;
      inDeg.set(succ,newDeg);
      if(newDeg===0)queue.push(succ);
    });
  }
  if(ordered.length<nodes.length){
    const orderedIds=new Set(ordered.map(n=>n.id));
    nodes.forEach(n=>{
      if(!orderedIds.has(n.id)){n._cyclic=true;ordered.push(n);}
    });
  }
  return ordered;
}

function wouldCycle(nodes, edges, fromId, toId){
  const adj=new Map();
  nodes.forEach(n=>adj.set(n.id,[]));
  edges.forEach(e=>{if(adj.has(e.from))adj.get(e.from).push(e.to);});
  const visited=new Set();
  const queue=[toId];
  while(queue.length){
    const id=queue.shift();
    if(id===fromId)return true;
    if(visited.has(id))continue;
    visited.add(id);
    (adj.get(id)||[]).forEach(s=>{if(!visited.has(s))queue.push(s);});
  }
  return false;
}

let _outFmt='claude'; // 'claude' | 'gpt' | 'gemini'
let _geminiVariant='fit'; // 'fit' | 'full' — only used when _outFmt==='gemini'
let _gptVariant='text'; // 'text' | 'json' — only used when _outFmt==='gpt'
// Skill IDs that should emit a truncated form in the Gemini full REFERENCE
// block. Per-export choice — ephemeral, lives in memory only. Stale IDs are
// harmless since buildGemini iterates the current pipeline's skillIds Set.
const _geminiTruncatedSkillIds=new Set();

// ── Token estimation ────────────────────────────────────
// ~4 chars per token (GPT/Claude rough average)
function estimateTokens(text){
  if(!text)return 0;
  return Math.round(text.length/4);
}
function _fmtTokens(n){
  if(n>=1000)return(n/1000).toFixed(1)+'k';
  return n+'';
}
function _tokenColor(n){
  if(n>100000)return'var(--red)';
  if(n>32000)return'#f59e0b';
  return'var(--dim)';
}

// ── Cost estimation ──────────────────────────────────────
// Prices per 1M tokens [input, output] in USD
const MODEL_PRICING={
  // Anthropic
  'claude-sonnet-4-6':[3,15],'claude-opus-4-6':[15,75],'claude-haiku-4-5-20251001':[1,5],
  // OpenAI
  'gpt-4o':[2.5,10],'gpt-4o-mini':[0.15,0.6],'o1-mini':[3,12],
  // Gemini (flash models are very cheap)
  'gemini-2.5-flash':[0.15,0.6],'gemini-2.0-flash-lite':[0.075,0.3],'gemini-1.5-pro':[3.5,10.5],
};

function estimateCost(inputTokens,model){
  // Assume output ≈ input for estimation
  const pricing=MODEL_PRICING[model];
  if(!pricing)return null;
  const [inRate,outRate]=pricing;
  const inCost=(inputTokens/1e6)*inRate;
  const outCost=(inputTokens/1e6)*outRate; // rough: assume similar output size
  return inCost+outCost;
}

function _fmtCost(usd){
  if(usd===null||usd===undefined)return'';
  if(usd<0.001)return'<$0.001';
  if(usd<0.01)return'~$'+usd.toFixed(4);
  if(usd<1)return'~$'+usd.toFixed(3);
  return'~$'+usd.toFixed(2);
}

function updateTokenCount(){
  updateOrphanWarning();
  const prompt=document.getElementById('out-pre')?.textContent||'';
  const el=document.getElementById('out-token-count');
  const costEl=document.getElementById('out-cost-estimate');
  if(!el)return;
  const n=estimateTokens(prompt);
  if(!prompt||prompt==='(empty pipeline)'){el.textContent='';if(costEl)costEl.textContent='';return;}
  el.textContent='~'+_fmtTokens(n)+' tokens';
  el.style.color=_tokenColor(n);
  // Cost estimate
  if(costEl){
    const model=_runModel||'';
    const cost=estimateCost(n,model);
    if(cost!==null){costEl.textContent=_fmtCost(cost);costEl.style.color=cost>0.1?'#f59e0b':'var(--txt)';}
    else{costEl.textContent=_runProvider==='local'?'free':'';}
  }
}

// Surfaces nodes on the root canvas that aren't in any edge — only when there's >1 node
// (1-node canvases bypass connection logic per connectedOnly). Shown in the Run panel so
// the user sees, before sending, which nodes won't make it into the pipeline.
function updateOrphanWarning(){
  const el=document.getElementById('out-orphan-warning');if(!el)return;
  const rf=canvasStack&&canvasStack[0];
  if(!rf||rf.nodes.length<=1){el.style.display='none';return;}
  const connected=new Set();
  rf.edges.forEach(e=>{connected.add(e.from);connected.add(e.to);});
  const orphans=rf.nodes.filter(n=>!connected.has(n.id));
  if(!orphans.length){el.style.display='none';return;}
  const labels=orphans.map(n=>{const sk=nodeSk(n);return sk?.label||n.title||'node';});
  el.textContent='\u26a0 '+orphans.length+' disconnected \u2014 '+labels.map(l=>'"'+l+'"').join(', ');
  el.style.display='';
}

function _refreshOutput(){
  const pre=document.getElementById('out-pre');
  const dl=document.getElementById('out-download');
  const cp=document.getElementById('out-copy');
  const gemBar=document.getElementById('out-gemini-variants');
  const gptBar=document.getElementById('out-gpt-variants');
  const charEl=document.getElementById('out-char-count');
  if(_outFmt==='gpt'){
    const gpt=buildGPT();
    if(_gptVariant==='json'){
      pre.textContent=gpt.json?JSON.stringify(gpt.json,null,2):'(no JSON spec available)';
      dl.textContent='↓ Download .json';cp.textContent='Copy JSON';
    }else{
      pre.textContent=gpt.text;
      dl.textContent='↓ Download .zip';cp.textContent='Copy text';
    }
    gptBar.style.display='flex';
    gemBar.style.display='none';
    charEl.style.display='none';
  }else if(_outFmt==='gemini'){
    const gem=buildGemini();
    const variant=_geminiVariant==='full'?gem.full:gem.fit;
    pre.textContent=variant;
    dl.textContent='↓ Download .md';cp.textContent='Copy text';
    gemBar.style.display='flex';
    gptBar.style.display='none';
    // Char count vs Gem Instructions limit
    const limit=CONFIG.GEMINI_INSTRUCTION_LIMIT||8000;
    const chars=variant.length;
    charEl.style.display='inline';
    charEl.textContent=chars+'/'+limit;
    charEl.style.color=chars>limit?'var(--red)':chars>limit*0.85?'#f59e0b':'var(--txt)';
  }else{
    // claude (default)
    pre.textContent=buildClaude();
    dl.textContent='↓ Download .xml';cp.textContent='Copy XML';
    gemBar.style.display='none';
    gptBar.style.display='none';
    charEl.style.display='none';
  }
  updateTokenCount();
  _renderGeminiSkillsBtn();
}

// Opens/closes the LLM export drawer on the right side
function openOutput(){
  _reattachOutModal();
  _refreshOutput();
  document.getElementById('out-overlay').classList.add('open');
}

document.getElementById('out-fmt-tabs').addEventListener('click',e=>{
  const tab=e.target.closest('.out-fmt-tab');if(!tab)return;
  _outFmt=tab.dataset.fmt;
  document.querySelectorAll('.out-fmt-tab').forEach(t=>t.classList.toggle('on',t===tab));
  _refreshOutput();
});
document.getElementById('out-gemini-variants').addEventListener('click',e=>{
  const tab=e.target.closest('.out-variant-tab');if(!tab)return;
  _geminiVariant=tab.dataset.variant;
  document.querySelectorAll('#out-gemini-variants .out-variant-tab').forEach(t=>t.classList.toggle('on',t===tab));
  _refreshOutput();
});

// ── Gemini per-skill truncation popover ─────────────────────
// Updates the "Skills: N/M full" button label & visibility. Hidden unless
// the user is viewing Gemini full AND the pipeline has skills with content.
function _renderGeminiSkillsBtn(){
  const btn=document.getElementById('out-gemini-skills-btn');
  if(!btn)return;
  if(_outFmt!=='gemini'||_geminiVariant!=='full'){
    btn.style.display='none';_closeGeminiSkillsPopover();return;
  }
  const{skillIds}=_exportInputs();
  if(!skillIds.size){btn.style.display='none';_closeGeminiSkillsPopover();return;}
  let truncated=0;
  skillIds.forEach(id=>{if(_geminiTruncatedSkillIds.has(id))truncated++;});
  btn.textContent='Skills: '+(skillIds.size-truncated)+'/'+skillIds.size+' full';
  btn.style.display='inline-block';
}
function _closeGeminiSkillsPopover(){
  const p=document.getElementById('out-gemini-skills-pop');if(p)p.remove();
  if(_geminiSkillsOutsideHandler){document.removeEventListener('pointerdown',_geminiSkillsOutsideHandler);_geminiSkillsOutsideHandler=null;}
}
let _geminiSkillsOutsideHandler=null;
function _openGeminiSkillsPopover(){
  const btn=document.getElementById('out-gemini-skills-btn');
  const{skillIds}=_exportInputs();
  if(!skillIds.size)return;
  const pop=document.createElement('div');
  pop.id='out-gemini-skills-pop';
  const r=btn.getBoundingClientRect();
  pop.style.cssText='position:fixed;top:'+(r.bottom+4)+'px;left:'+Math.max(8,r.right-340)+'px;width:340px;max-height:60vh;overflow-y:auto;background:var(--panel);border:1px solid var(--brd);border-radius:8px;padding:10px;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:6px';
  const hdr=document.createElement('div');
  hdr.style.cssText='display:flex;gap:6px;border-bottom:1px solid var(--brd);padding-bottom:8px;margin-bottom:2px';
  const allFullBtn=document.createElement('button');allFullBtn.className='mbtn';allFullBtn.textContent='All full';allFullBtn.style.cssText='font-size:10px;flex:1';
  const allTruncBtn=document.createElement('button');allTruncBtn.className='mbtn';allTruncBtn.textContent='All truncated';allTruncBtn.style.cssText='font-size:10px;flex:1';
  hdr.appendChild(allFullBtn);hdr.appendChild(allTruncBtn);
  pop.appendChild(hdr);
  const rows=[];
  skillIds.forEach(id=>{
    const sk=getSk(id);if(!sk)return;
    const row=document.createElement('label');
    row.style.cssText='display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;cursor:pointer';
    const cb=document.createElement('input');cb.type='checkbox';cb.checked=!_geminiTruncatedSkillIds.has(id);cb.style.cssText='accent-color:var(--acc);flex-shrink:0;width:14px;height:14px';
    const info=document.createElement('div');info.style.cssText='display:flex;flex-direction:column;gap:1px;min-width:0;flex:1';
    const lbl=document.createElement('div');lbl.style.cssText='font-family:var(--mono);font-size:10px;font-weight:700;color:var(--dhi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis';lbl.textContent=sk.label||id;
    const fullChars=(sk.rawContent||'').length;
    const truncChars=_geminiSkillRef(sk).length;
    const meta=document.createElement('div');meta.style.cssText='font-size:9px;color:var(--dim)';meta.textContent=fullChars+' → '+truncChars+' chars when truncated';
    info.appendChild(lbl);info.appendChild(meta);
    row.appendChild(cb);row.appendChild(info);
    cb.addEventListener('change',()=>{
      if(cb.checked)_geminiTruncatedSkillIds.delete(id);
      else _geminiTruncatedSkillIds.add(id);
      _refreshOutput();
    });
    pop.appendChild(row);
    rows.push(cb);
  });
  allFullBtn.addEventListener('click',()=>{
    skillIds.forEach(id=>_geminiTruncatedSkillIds.delete(id));
    rows.forEach(cb=>cb.checked=true);
    _refreshOutput();
  });
  allTruncBtn.addEventListener('click',()=>{
    skillIds.forEach(id=>_geminiTruncatedSkillIds.add(id));
    rows.forEach(cb=>cb.checked=false);
    _refreshOutput();
  });
  document.body.appendChild(pop);
  _geminiSkillsOutsideHandler=(ev)=>{
    if(!pop.contains(ev.target)&&ev.target!==btn&&!btn.contains(ev.target))_closeGeminiSkillsPopover();
  };
  // Defer attach to avoid catching the current click
  setTimeout(()=>document.addEventListener('pointerdown',_geminiSkillsOutsideHandler),0);
}
document.getElementById('out-gemini-skills-btn').addEventListener('click',()=>{
  if(document.getElementById('out-gemini-skills-pop'))_closeGeminiSkillsPopover();
  else _openGeminiSkillsPopover();
});

document.getElementById('out-gpt-variants').addEventListener('click',e=>{
  const tab=e.target.closest('.out-variant-tab');if(!tab)return;
  _gptVariant=tab.dataset.variant;
  document.querySelectorAll('#out-gpt-variants .out-variant-tab').forEach(t=>t.classList.toggle('on',t===tab));
  _refreshOutput();
});
document.getElementById('out-close').addEventListener('click',()=>document.getElementById('out-overlay').classList.remove('open'));
document.getElementById('out-overlay').addEventListener('click',e=>{if(e.target===e.currentTarget)document.getElementById('out-overlay').classList.remove('open');});

// ── Export modal: drag (resize is native via CSS resize:both) ──────────
// Detach from flex centering on first drag/resize; reattach on close so the
// modal opens fresh each time. Reattach unconditionally clears inline
// width/height too, so native resize also resets between opens.
function _reattachOutModal(){
  const m=document.getElementById('out-modal');
  m.style.position='';m.style.left='';m.style.top='';m.style.margin='';
  m.style.width='';m.style.height='';
}
function _detachOutModal(){
  const m=document.getElementById('out-modal');
  if(m.style.position==='fixed')return;
  const r=m.getBoundingClientRect();
  m.style.position='fixed';m.style.left=r.left+'px';m.style.top=r.top+'px';m.style.margin='0';
}
document.querySelector('#out-modal .mhd').addEventListener('pointerdown',e=>{
  // Bail if pointerdown is on an interactive child (buttons, inputs, etc.)
  if(e.target.closest('button,input,select,textarea,a'))return;
  e.preventDefault();
  _detachOutModal();
  const m=document.getElementById('out-modal');
  const sx=e.clientX,sy=e.clientY;
  const sl=parseFloat(m.style.left)||0,st=parseFloat(m.style.top)||0;
  const w=m.offsetWidth;
  const minH=200,minV=50; // 200px modal must stay in viewport; 50px sliver of header
  m.style.transition='none';
  const mv=ev=>{
    let nl=sl+(ev.clientX-sx),nt=st+(ev.clientY-sy);
    nl=Math.max(minH-w,Math.min(window.innerWidth-minH,nl));
    nt=Math.max(0,Math.min(window.innerHeight-minV,nt));
    m.style.left=nl+'px';m.style.top=nt+'px';
  };
  const up=()=>{m.style.transition='';window.removeEventListener('pointermove',mv);window.removeEventListener('pointerup',up);};
  window.addEventListener('pointermove',mv);
  window.addEventListener('pointerup',up);
});

// ── Run Pipeline via LLM (drawer) ──────────────────────
const AI_MODELS={
  anthropic:[['claude-sonnet-4-6','Sonnet 4.6'],['claude-opus-4-6','Opus 4.6'],['claude-haiku-4-5-20251001','Haiku 4.5']],
  openai:[['gpt-4o','GPT-4o'],['gpt-4o-mini','GPT-4o mini'],['o1-mini','o1-mini']],
  gemini:[['gemini-2.5-flash','2.5 Flash'],['gemini-2.0-flash-lite','2.0 Flash Lite'],['gemini-1.5-pro','1.5 Pro']],
  local:[]
};
let _runProvider='anthropic',_runKey='',_runModel='';
const _localUrl=()=>(document.getElementById('out-run-url')?.value||'http://localhost:11434').replace(/\/+$/,'');

function openDrawer(){const d=document.getElementById('llm-drawer');d.style.right='0';d.classList.add('drawer-open');refreshRunProviders();refreshRunKeys();refreshRunModels();document.getElementById('out-run-local').style.display=_runProvider==='local'?'flex':'none';updateTokenCount();}
function closeDrawer(){const d=document.getElementById('llm-drawer');d.style.right='-'+d.offsetWidth+'px';d.classList.remove('drawer-open');}

function refreshRunProviders(){
  const c=document.getElementById('out-run-providers');c.innerHTML='';
  [['anthropic','\u2726 Anthropic'],['openai','\u2b21 OpenAI'],['gemini','\u2727 Gemini'],['local','\u2299 Local']].forEach(([p,l])=>{
    const b=document.createElement('button');b.textContent=l;
    b.style.cssText='font-family:var(--mono);font-size:8px;padding:4px 8px;border-radius:5px;border:1px solid;cursor:pointer';
    const u=()=>{const a=_runProvider===p;b.style.background=a?'var(--alo)':'transparent';b.style.borderColor=a?'var(--acc)':'var(--brd)';b.style.color=a?'var(--acc)':'var(--dhi)';};u();
    b.addEventListener('click',()=>{_runProvider=p;refreshRunKeys();refreshRunModels();refreshRunProviders();document.getElementById('out-run-local').style.display=p==='local'?'flex':'none';document.getElementById('out-run-key').style.display=p==='local'?'none':'';});
    c.appendChild(b);
  });
}
function refreshRunKeys(){
  const s=document.getElementById('out-run-key');s.innerHTML='';
  if(_runProvider==='local'){_runKey=_localUrl();s.style.display='none';return;}
  s.style.display='';
  const t={anthropic:'anthropic-key',openai:'openai-key',gemini:'gemini-key'};
  const cr=CryptoManager.creds.filter(c=>c.type===t[_runProvider]);
  if(!cr.length){const o=document.createElement('option');o.textContent='No key';o.disabled=true;s.appendChild(o);_runKey='';return;}
  cr.forEach(c=>{const o=document.createElement('option');o.value=c.value;o.textContent=c.name;s.appendChild(o);});
  _runKey=cr[0].value;s.onchange=()=>{_runKey=s.value;};
}
// ── Model-list cache (Tuesday-weekly invalidation) ───────
// localStorage key includes a non-crypto hash of the API key tail so multiple
// keys for the same provider don't collide. Plain localStorage; same-origin only.
function _modelCacheKey(provider, apiKey){
  let h=0;const s=String(apiKey||'');
  for(let i=0;i<s.length;i++){h=(h*31+s.charCodeAt(i))|0;}
  return 'guiness:models:'+provider+':'+(h>>>0).toString(36);
}
// Most recent Tuesday 00:00 in local time. Cache is fresh iff fetchedAt > this.
function _mostRecentTuesdayMidnight(){
  const d=new Date();d.setHours(0,0,0,0);
  const daysSinceTue=(d.getDay()-2+7)%7;
  d.setDate(d.getDate()-daysSinceTue);
  return d.getTime();
}
function _getCachedModels(provider, apiKey){
  try{const raw=localStorage.getItem(_modelCacheKey(provider,apiKey));if(!raw)return null;
    const obj=JSON.parse(raw);return obj.fetchedAt>_mostRecentTuesdayMidnight()?obj.models:null;}catch(e){return null;}
}
function _setCachedModels(provider, apiKey, models){
  try{localStorage.setItem(_modelCacheKey(provider,apiKey),JSON.stringify({models,fetchedAt:Date.now()}));}catch(e){}
}
// Stale (any-age) cache used when a fresh fetch fails — better than hardcoded defaults if available.
function _getStaleCache(provider, apiKey){
  try{const raw=localStorage.getItem(_modelCacheKey(provider,apiKey));return raw?JSON.parse(raw).models:null;}catch(e){return null;}
}

// ── Provider model-list fetchers ──────────────────────────
// All three throw with a consistent error vocabulary so the caller can show
// specific messages: 'invalid key' | 'rate limited' | 'network' | 'HTTP <code>'.
async function fetchAnthropicModelsList(key){
  let r;try{r=await fetch('https://api.anthropic.com/v1/models',{headers:{'x-api-key':key,'anthropic-version':'2023-06-01','anthropic-dangerous-direct-browser-access':'true'}});}catch(e){throw new Error('network');}
  if(!r.ok){if(r.status===401||r.status===403)throw new Error('invalid key');if(r.status===429)throw new Error('rate limited');throw new Error('HTTP '+r.status);}
  const d=await r.json();
  return (d.data||[])
    .sort((a,b)=>String(b.created_at||'').localeCompare(String(a.created_at||'')))
    .map(m=>[m.id,m.display_name||m.id]);
}
async function fetchOpenAIModelsList(key){
  const EXCLUDE=/(embed|audio|realtime|transcribe|tts|whisper|dall-e|image|moderation|babbage|ada|davinci|instruct|search)/i;
  let r;try{r=await fetch('https://api.openai.com/v1/models',{headers:{'Authorization':'Bearer '+key}});}catch(e){throw new Error('network');}
  if(!r.ok){if(r.status===401||r.status===403)throw new Error('invalid key');if(r.status===429)throw new Error('rate limited');throw new Error('HTTP '+r.status);}
  const d=await r.json();
  return (d.data||[])
    .filter(m=>m.id&&!EXCLUDE.test(m.id))
    .sort((a,b)=>(b.created||0)-(a.created||0))
    .map(m=>[m.id,m.id]);   // OpenAI doesn't expose display names
}
async function fetchGeminiModelsList(key){
  let r;try{r=await fetch('https://generativelanguage.googleapis.com/v1beta/models?key='+key);}catch(e){throw new Error('network');}
  if(!r.ok){if(r.status===400||r.status===401||r.status===403)throw new Error('invalid key');if(r.status===429)throw new Error('rate limited');throw new Error('HTTP '+r.status);}
  const d=await r.json();
  return (d.models||[])
    .filter(m=>m.supportedGenerationMethods?.includes('generateContent'))
    .map(m=>{const id=m.name.replace('models/','');return[id,m.displayName||id];})
    .sort((a,b)=>a[0].includes('2.5')?-1:b[0].includes('2.5')?1:a[0].localeCompare(b[0]));
}

// ── Shared: detect local LLM models ─────────────────────
async function detectLocalModelsList(baseUrl){
  const base=(baseUrl||'http://localhost:11434').replace(/\/+$/,'');
  // Try to find a Friday token in the vault for authenticated requests
  const fridayToken=_getFridayToken();
  const authHeaders=fridayToken?{Authorization:'Bearer '+fridayToken}:{};
  // 1. Try Ollama native API (no auth needed)
  try{const r=await fetch(base+'/api/tags');if(r.ok){const d=await r.json();const m=(d.models||[]).map(x=>x.name).filter(Boolean);if(m.length)return m;}}catch(e){}
  // 2. Try OpenAI-compatible /v1/models (with auth if available — needed for Friday)
  try{const r=await fetch(base+'/v1/models',{headers:authHeaders});if(r.ok){const d=await r.json();return(d.data||d.models||[]).map(x=>x.id||x.name).filter(Boolean);}}catch(e){}
  return [];
}
// Refresh the Run-drawer model dropdown. force=true bypasses the weekly cache (used by ↻).
// Status semantics: hidden on fresh/cached success; amber message when serving stale cache
// or built-in defaults after a fetch failure, with the specific reason ('invalid key',
// 'rate limited', 'network unreachable', 'HTTP <code>').
async function refreshRunModels(force){
  const s=document.getElementById('out-run-model');s.innerHTML='';
  const statusEl=document.getElementById('out-run-model-status');
  const setStatus=msg=>{if(!statusEl)return;if(msg){statusEl.textContent=msg;statusEl.style.display='';}else{statusEl.textContent='';statusEl.style.display='none';}};
  setStatus('');
  const populate=list=>{list.forEach(([v,l])=>{const o=document.createElement('option');o.value=v;o.textContent=l;s.appendChild(o);});};
  const finalize=()=>{_runModel=s.value;s.onchange=()=>{_runModel=s.value;updateTokenCount();};};

  if(_runProvider==='local'){
    const v=document.getElementById('out-run-local-model')?.value;
    if(v){const o=document.createElement('option');o.value=v;o.textContent=v;s.appendChild(o);}
    else{const o=document.createElement('option');o.value='';o.textContent='(enter or detect)';s.appendChild(o);}
    _runModel=s.value;s.onchange=()=>{_runModel=s.value;document.getElementById('out-run-local-model').value=s.value;};
    return;
  }
  const fetcher={anthropic:fetchAnthropicModelsList,openai:fetchOpenAIModelsList,gemini:fetchGeminiModelsList}[_runProvider];
  // No key OR no fetcher → silent fallback to hardcoded list (user hasn't set up yet).
  if(!_runKey||!fetcher){populate(AI_MODELS[_runProvider]||AI_MODELS.anthropic);finalize();return;}
  // Fresh cache hit (unless ↻).
  if(!force){const cached=_getCachedModels(_runProvider,_runKey);if(cached&&cached.length){populate(cached);finalize();return;}}
  // Live fetch.
  const lo=document.createElement('option');lo.textContent='Loading models…';lo.disabled=true;s.appendChild(lo);
  try{
    const live=await fetcher(_runKey);
    s.innerHTML='';
    if(live&&live.length){populate(live);_setCachedModels(_runProvider,_runKey,live);}
    else{populate(AI_MODELS[_runProvider]||AI_MODELS.anthropic);setStatus('Using built-in defaults \u2014 provider returned no models');}
  }catch(e){
    s.innerHTML='';
    const reason=e.message==='network'?'network unreachable':(e.message||'error');
    const stale=_getStaleCache(_runProvider,_runKey);
    if(stale&&stale.length){populate(stale);setStatus('Using cached models \u2014 '+reason);}
    else{populate(AI_MODELS[_runProvider]||AI_MODELS.anthropic);setStatus('Using built-in defaults \u2014 '+reason);}
  }
  finalize();
}

document.getElementById('out-run-detect').addEventListener('click',async()=>{
  const btn=document.getElementById('out-run-detect'),sel=document.getElementById('out-run-model'),mi=document.getElementById('out-run-local-model');
  btn.disabled=true;btn.textContent='...';
  try{const url=_localUrl();
    const m=await detectLocalModelsList(url);
    sel.innerHTML='';
    if(m.length){m.forEach(n=>{const o=document.createElement('option');o.value=n;o.textContent=n;sel.appendChild(o);});_runModel=m[0];mi.value=m[0];btn.textContent='\u2713 '+m.length;}
    else{const o=document.createElement('option');o.textContent='None';o.disabled=true;sel.appendChild(o);btn.textContent='\u2717 None';}
  }catch(e){btn.textContent='CORS?';}
  finally{btn.disabled=false;setTimeout(()=>{btn.textContent='Detect';},3000);}
});
document.getElementById('out-run-local-model').addEventListener('input',()=>{if(_runProvider!=='local')return;const v=document.getElementById('out-run-local-model').value.trim(),s=document.getElementById('out-run-model');if(v){if(![...s.options].some(o=>o.value===v)){s.innerHTML='';const o=document.createElement('option');o.value=v;o.textContent=v;s.appendChild(o);}s.value=v;_runModel=v;}});

document.getElementById('out-run').addEventListener('click',openDrawer);
document.getElementById('llm-drawer-close').addEventListener('click',closeDrawer);
document.getElementById('out-run-model-refresh').addEventListener('click',async()=>{
  const b=document.getElementById('out-run-model-refresh');const prev=b.textContent;
  b.disabled=true;b.textContent='…';
  try{await refreshRunModels(true);}finally{b.disabled=false;b.textContent=prev;}
});

function _looksLikeHtml(t){const s=t.trimStart();return s.startsWith('<!DOCTYPE')||s.startsWith('<html')||/^<(div|section|article|main|header|footer|table|ul|ol|p|h[1-6]|span|form|nav|aside)[\s>]/i.test(s);}
// ── File detection in LLM responses ──────────────────────
const _FILE_PATTERNS={
  // filename comment patterns per language
  js:     /^\/\/\s*(\S+\.(?:js|jsx|ts|tsx|mjs|cjs))\s*$/,
  py:     /^#\s*(\S+\.py)\s*$/,
  sh:     /^#\s*(\S+\.(?:sh|bash|zsh))\s*$/,
  rb:     /^#\s*(\S+\.rb)\s*$/,
  html:   /^<!--\s*(\S+\.(?:html|htm|svg))\s*-->$/,
  css:    /^\/\*\s*(\S+\.(?:css|scss|less))\s*\*\/$/,
  sql:    /^--\s*(\S+\.sql)\s*$/,
  yaml:   /^#\s*(\S+\.(?:yaml|yml|toml))\s*$/,
  generic:/^(?:\/\/|#|--|\/\*)\s*(?:file:\s*)?(\S+\.\w{1,6})\s*(?:\*\/)?$/,
};

const _LANG_COLORS={
  python:'oklch(0.6 0.18 250)',javascript:'oklch(0.75 0.16 70)',typescript:'oklch(0.7 0.14 250)',html:'oklch(0.65 0.2 25)',
  css:'oklch(0.68 0.16 300)',json:'oklch(0.72 0.17 55)',yaml:'oklch(0.72 0.17 55)',bash:'oklch(0.72 0.17 165)',shell:'oklch(0.72 0.17 165)',
  sql:'oklch(0.68 0.16 300)',ruby:'oklch(0.65 0.2 25)',go:'oklch(0.76 0.12 200)',rust:'oklch(0.72 0.17 55)',java:'oklch(0.65 0.2 25)',
  csv:'oklch(0.72 0.17 165)',xml:'oklch(0.72 0.17 55)',markdown:'oklch(0.7 0.14 250)',md:'oklch(0.7 0.14 250)',svg:'oklch(0.75 0.16 70)',
};

const _LANG_EXTS={
  python:'.py',javascript:'.js',typescript:'.ts',html:'.html',css:'.css',
  json:'.json',yaml:'.yaml',bash:'.sh',shell:'.sh',sql:'.sql',ruby:'.rb',
  go:'.go',rust:'.rs',java:'.java',csv:'.csv',xml:'.xml',svg:'.svg',
  markdown:'.md',md:'.md',jsx:'.jsx',tsx:'.tsx',
};

function _detectFileName(lang, codeContent){
  const firstLine=codeContent.split('\n')[0]?.trim()||'';
  // Try all patterns
  for(const pat of Object.values(_FILE_PATTERNS)){
    const m=firstLine.match(pat);
    if(m)return m[1];
  }
  // Full HTML document → index.html
  if(codeContent.trimStart().startsWith('<!DOCTYPE')||codeContent.trimStart().startsWith('<html'))return 'index.html';
  // Shebang → script file
  if(firstLine.startsWith('#!/'))return 'script'+(_LANG_EXTS[lang]||'.sh');
  // Valid JSON → data.json
  if(lang==='json'){try{JSON.parse(codeContent);return 'data.json';}catch(e){}}
  return null;
}

function _fmtFileSize(bytes){
  if(bytes<1024)return bytes+' B';
  if(bytes<1048576)return(bytes/1024).toFixed(1)+' KB';
  return(bytes/1048576).toFixed(1)+' MB';
}

function _buildFileCardHtml(lang, code, filename){
  // v48.13 — guard against attribute injection. _detectFileName uses \S+ which
  // permits ', ", <, >; any of those breaks out of the onclick string literals
  // below. Whitelist before interpolation; fall back to a safe default name.
  if(!/^[\w.\-]+$/.test(filename))filename='file'+(_LANG_EXTS[lang]||'.txt');
  const id='fc-'+Math.random().toString(36).slice(2,10);
  const color=_LANG_COLORS[lang]||'#8b95a8';
  const size=_fmtFileSize(new TextEncoder().encode(code).length);
  const displayLang=(lang||'file').toUpperCase();
  const isHtml=lang==='html'&&(code.includes('<!DOCTYPE')||code.includes('<html'));
  const escapedCode=code.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');

  return `<div class="file-card" id="${id}">
    <div class="file-card-header">
      <span class="file-card-icon">📄</span>
      <span class="file-card-name">${filename}</span>
      <span class="file-card-lang" style="background:${color}">${displayLang}</span>
      <span class="file-card-size">${size}</span>
      <div class="file-card-actions">
        <button class="file-card-btn" onclick="(function(){var e=document.getElementById('${id}');var p=e.querySelector('.file-card-preview');p.classList.toggle('open');this.textContent=p.classList.contains('open')?'Hide':'Preview'}).call(this)">Preview</button>
        ${isHtml?`<button class="file-card-btn" onclick="(function(){var e=document.getElementById('${id}');var p=e.querySelector('.file-card-preview');p.innerHTML='<iframe sandbox=\\'allow-scripts allow-popups\\' srcdoc=\\''+document.getElementById('${id}').dataset.code.replace(/'/g,'&apos;')+'\\' style=\\'width:100%;min-height:300px;border:none;background:#fff\\'></iframe>';p.classList.add('open')}).call(this)">Live Preview</button>`:''}
        <button class="file-card-btn" onclick="(function(){var b=new Blob([document.getElementById('${id}').dataset.code],{type:'text/plain'});var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='${filename}';a.click();URL.revokeObjectURL(a.href)}).call(this)">⬇ Download</button>
        <button class="file-card-btn" onclick="navigator.clipboard.writeText(document.getElementById('${id}').dataset.code).then(()=>{this.textContent='✓';setTimeout(()=>this.textContent='Copy',1500)})">Copy</button>
      </div>
    </div>
    <div class="file-card-preview">
      <pre style="background:var(--code-bg);color:var(--code-txt);padding:10px 12px;font-family:var(--mono);font-size:10px;line-height:1.5"><div style="font-size:9px;color:var(--dim);margin-bottom:4px">${displayLang}</div>${escapedCode}</pre>
    </div>
  </div>`.replace(/\n\s*/g,'');
}

function _mdToHtml(t){
  return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/```(\w*)\n([\s\S]*?)```/g,(_,l,c)=>{const fn=_detectFileName(l.toLowerCase(),c);if(fn){const card=_buildFileCardHtml(l.toLowerCase(),c,fn);return'</span>'+card+'<span>';}return'<pre style="background:var(--code-bg);color:var(--code-txt);padding:10px 12px;border-radius:6px;margin:8px 0;overflow-x:auto;font-family:var(--mono);font-size:11px;line-height:1.6">'+(l?'<div style="font-size:9px;color:var(--dim);margin-bottom:4px">'+l+'</div>':'')+c+'</pre>';}).replace(/`([^`]+)`/g,'<code style="background:var(--code-bg);color:var(--code-txt);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:11px">$1</code>').replace(/^### (.+)$/gm,'<h3 style="font-size:14px;font-weight:700;color:var(--acc);margin:16px 0 6px">$1</h3>').replace(/^## (.+)$/gm,'<h2 style="font-size:15px;font-weight:700;color:var(--acc);margin:20px 0 8px">$1</h2>').replace(/^# (.+)$/gm,'<h1 style="font-size:17px;font-weight:700;color:var(--acc);margin:20px 0 10px">$1</h1>').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\*(.+?)\*/g,'<em>$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener" style="color:var(--acc);text-decoration:underline">$1</a>').replace(/(?<!["=\/a-z])(https?:\/\/[^\s<>"'\)]+)/g,'<a href="$1" target="_blank" rel="noopener" style="color:var(--acc);text-decoration:underline">$1</a>').replace(/^- (.+)$/gm,'<div style="padding-left:14px;position:relative;margin:3px 0"><span style="position:absolute;left:0">\u2022</span>$1</div>').replace(/^\d+\. (.+)$/gm,(m,p)=>'<div style="padding-left:18px;margin:3px 0">'+m.match(/^\d+/)[0]+'. '+p+'</div>').replace(/\n{2,}/g,'<div style="height:12px"></div>').replace(/\n/g,'<br>');
}
// Renders markdown/HTML response text for the run drawer output area
function renderMdResponse(t){
  // v48.13 — never innerHTML raw HTML from untrusted LLM/skill output. Raw view
  // shows escaped source; Preview view (renderPreviewResponse) handles the
  // sandboxed-iframe render path.
  if(_looksLikeHtml(t))return '<pre style="background:var(--code-bg);color:var(--code-txt);padding:10px 12px;border-radius:6px;margin:8px 0;overflow-x:auto;font-family:var(--mono);font-size:11px;line-height:1.6;white-space:pre-wrap">'+t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')+'</pre>';
  return _mdToHtml(t);
}

// After innerHTML is set, populate dataset.code on file cards
function _hydrateFileCards(container,rawText){
  if(!container||!rawText)return;
  // Extract code blocks and match to file cards
  const codeBlocks=[];
  rawText.replace(/```(\w*)\n([\s\S]*?)```/g,(_,l,c)=>{
    const fn=_detectFileName(l.toLowerCase(),c);
    if(fn)codeBlocks.push({filename:fn,code:c});
  });
  const cards=container.querySelectorAll('.file-card');
  cards.forEach((card,i)=>{
    if(codeBlocks[i]){
      card.dataset.code=codeBlocks[i].code;
    }
  });
}

// ── Preview renderer — extracts HTML blocks and renders inline iframes ──
let _respViewMode='raw'; // 'raw' | 'preview'

function _makeIframe(htmlContent){
  // Auto-size iframe to content height via postMessage from srcdoc
  const resizeScript='<script>new ResizeObserver(()=>parent.postMessage({iframeHeight:document.body.scrollHeight},"*")).observe(document.body)<\/script>';
  const src=htmlContent.includes('</body>')?htmlContent.replace('</body>',resizeScript+'</body>'):htmlContent+resizeScript;
  const iframe=document.createElement('iframe');
  iframe.sandbox='allow-scripts allow-popups';
  iframe.srcdoc=src;
  iframe.style.cssText='width:100%;border:1px solid var(--brd);border-radius:8px;margin:12px 0;display:block;min-height:60px;background:#fff';
  iframe.height='0';
  iframe.addEventListener('load',()=>{
    try{iframe.height=iframe.contentDocument?.body?.scrollHeight||200;}catch(e){}
  });
  return iframe;
}

function _listenIframeResize(){
  if(window._iframeResizeListening)return;
  window._iframeResizeListening=true;
  window.addEventListener('message',e=>{
    if(e.data?.iframeHeight){
      document.querySelectorAll('#out-resp-body iframe').forEach(f=>{
        try{if(f.contentWindow===e.source)f.height=e.data.iframeHeight+8;}catch(ex){}
      });
    }
  });
}

// Split raw text into segments: {type:'md'|'html', content:string}
function _splitSegments(raw){
  const segments=[];
  // Match fenced ```html blocks OR standalone block-level HTML (full doc or block tag at line start)
  const htmlFence=/^```html\n([\s\S]*?)^```/gm;
  const blockHtml=/^(<!DOCTYPE[\s\S]*?<\/html>|<(div|section|article|main|header|footer|figure|table|form|ul|ol|nav|aside|p|h[1-6])[\s\S]*?<\/\2>)/gm;
  // Collect all HTML spans with their positions
  const spans=[];
  let m;
  const fenceRe=/^```html\n([\s\S]*?)^```/gm;
  while((m=fenceRe.exec(raw))!==null) spans.push({start:m.index,end:m.index+m[0].length,html:m[1]});
  // Only match block HTML outside already-found fence spans
  const blockRe=/^(<!DOCTYPE[\s\S]*?<\/html>|<(div|section|article|main|header|footer|figure|table|form|ul|ol|nav|aside|p|h[1-6])[\s\S]*?<\/\2>)/gm;
  while((m=blockRe.exec(raw))!==null){
    const overlaps=spans.some(s=>m.index>=s.start&&m.index<s.end);
    if(!overlaps) spans.push({start:m.index,end:m.index+m[0].length,html:m[1]||m[0]});
  }
  spans.sort((a,b)=>a.start-b.start);
  let pos=0;
  for(const sp of spans){
    if(sp.start>pos) segments.push({type:'md',content:raw.slice(pos,sp.start)});
    segments.push({type:'html',content:sp.html});
    pos=sp.end;
  }
  if(pos<raw.length) segments.push({type:'md',content:raw.slice(pos)});
  return segments.length?segments:[{type:'md',content:raw}];
}

function renderPreviewResponse(raw,container){
  _listenIframeResize();
  container.innerHTML='';
  if(_looksLikeHtml(raw)){
    container.appendChild(_makeIframe(raw));
    return;
  }
  const segs=_splitSegments(raw);
  const hasHtml=segs.some(s=>s.type==='html');
  if(!hasHtml){container.innerHTML=_mdToHtml(raw);return;}
  segs.forEach(seg=>{
    if(seg.type==='html'){
      container.appendChild(_makeIframe(seg.content));
    }else if(seg.content.trim()){
      const div=document.createElement('div');
      div.innerHTML=_mdToHtml(seg.content);
      container.appendChild(div);
    }
  });
}

function setRespViewMode(mode){
  _respViewMode=mode;
  const rawBtn=document.getElementById('out-view-raw');
  const preBtn=document.getElementById('out-view-preview');
  if(!rawBtn||!preBtn)return;
  const on='background:var(--alo);color:var(--acc)';
  const off='background:transparent;color:var(--dim)';
  rawBtn.style.cssText='font-size:8px;padding:2px 8px;border-radius:3px;'+( mode==='raw'?on:off);
  preBtn.style.cssText='font-size:8px;padding:2px 8px;border-radius:3px;'+(mode==='preview'?on:off);
  const rb=document.getElementById('out-resp-body');
  const raw=rb.dataset.rawResponse||'';
  if(!raw)return;
  if(mode==='preview') renderPreviewResponse(raw,rb);
  else{rb.innerHTML=renderMdResponse(raw);_hydrateFileCards(rb,raw);}
}

document.getElementById('out-view-raw').addEventListener('click',()=>setRespViewMode('raw'));
document.getElementById('out-view-preview').addEventListener('click',()=>setRespViewMode('preview'));

// ── Execution mode toggle ────────────────────────────────
let _execMode='single'; // 'single' | 'chain'
// Primitives that need real producer/consumer semantics — Single mode compiles
// the whole graph into one prompt, which breaks for nodes with real I/O or
// control flow the LLM can't simulate.
const NON_LLM_PRIMITIVES=new Set(['fetch','io_input','code','map']);
function setExecMode(mode){
  _execMode=mode;
  const sBtn=document.getElementById('out-mode-single');
  const cBtn=document.getElementById('out-mode-chain');
  const on='font-size:8px;padding:2px 8px;border-radius:3px;background:var(--alo);color:var(--acc)';
  const off='font-size:8px;padding:2px 8px;border-radius:3px;background:transparent;color:var(--dim)';
  sBtn.style.cssText=mode==='single'?on:off;
  cBtn.style.cssText=mode==='chain'?on:off;
  document.getElementById('out-run-send').textContent=mode==='chain'?'⛓ Run Chain':'▶ Send to LLM';
}
// If the pipeline contains primitives that Single mode can't honor (FETCH/FILE/CODE/MAP),
// flip to Chain and surface a one-shot banner. Only flips when Single is currently active;
// respects an explicit Chain choice.
function _autoSelectExecMode(){
  if(_execMode!=='single')return;
  const nodes=canvasStack[0]?.nodes||[];
  const hit=nodes.some(n=>NON_LLM_PRIMITIVES.has(n.type||n.skillId));
  if(!hit)return;
  setExecMode('chain');
  const b=document.getElementById('out-automode-banner');
  if(b){
    b.textContent='⛓ Switched to Chain — FETCH / FILE / CODE / MAP need real execution';
    b.style.display='block';
    clearTimeout(b._ht);
    b._ht=setTimeout(()=>{b.style.display='none';},6000);
  }
}
document.getElementById('out-mode-single').addEventListener('click',()=>setExecMode('single'));
document.getElementById('out-mode-chain').addEventListener('click',()=>setExecMode('chain'));

// ── Safe expression evaluator (v48.13) ──────────────────
// Tiny recursive-descent parser for Router conditions. Replaces `new Function(...)`
// so importing a .ppln can't trigger arbitrary JS execution. The parsed surface is
// intentionally narrow — comparisons, logic, property access, and a whitelisted set
// of string methods. Anything outside the whitelist throws a clear error in the run
// log (which is treated as 'fail'), so extension is friction-free when warranted:
//   • To add a method: add to METHOD_WHITELIST below.
//   • To add an operator: extend tokenize() and add a parse level at the right
//     precedence (between parseAnd and parseComp for arithmetic, etc).
//   • To add a value type (e.g. regex literals): extend tokenize() and parseAtom().
const _SAFE_METHOD_WHITELIST=new Set([
  'includes','startsWith','endsWith','indexOf','toLowerCase','toUpperCase',
  'trim','slice','match'
]);
const _SAFE_PROP_WHITELIST=new Set([
  'length'
]);
function _safeTokenize(s){
  const tokens=[];let i=0;
  while(i<s.length){
    const c=s[i];
    if(/\s/.test(c)){i++;continue;}
    if(c==='"'||c==="'"){
      const q=c;let j=i+1,v='';
      while(j<s.length&&s[j]!==q){
        if(s[j]==='\\'&&j+1<s.length){
          const n=s[j+1];
          v+=n==='n'?'\n':n==='t'?'\t':n==='r'?'\r':n;
          j+=2;
        }else{v+=s[j++];}
      }
      if(s[j]!==q)throw new Error('Unterminated string literal');
      tokens.push({type:'STR',value:v});i=j+1;continue;
    }
    if(/[0-9]/.test(c)){
      let j=i;while(j<s.length&&/[0-9.]/.test(s[j]))j++;
      tokens.push({type:'NUM',value:parseFloat(s.slice(i,j))});i=j;continue;
    }
    if(/[a-zA-Z_$]/.test(c)){
      let j=i;while(j<s.length&&/[a-zA-Z0-9_$]/.test(s[j]))j++;
      const word=s.slice(i,j);
      if(word==='true')tokens.push({type:'BOOL',value:true});
      else if(word==='false')tokens.push({type:'BOOL',value:false});
      else if(word==='null')tokens.push({type:'NULL'});
      else if(word==='undefined')tokens.push({type:'UNDEF'});
      else tokens.push({type:'IDENT',value:word});
      i=j;continue;
    }
    if(s.startsWith('===',i)){tokens.push({type:'==='});i+=3;continue;}
    if(s.startsWith('!==',i)){tokens.push({type:'!=='});i+=3;continue;}
    if(s.startsWith('==',i)){tokens.push({type:'=='});i+=2;continue;}
    if(s.startsWith('!=',i)){tokens.push({type:'!='});i+=2;continue;}
    if(s.startsWith('<=',i)){tokens.push({type:'<='});i+=2;continue;}
    if(s.startsWith('>=',i)){tokens.push({type:'>='});i+=2;continue;}
    if(s.startsWith('&&',i)){tokens.push({type:'&&'});i+=2;continue;}
    if(s.startsWith('||',i)){tokens.push({type:'||'});i+=2;continue;}
    if('<>!.,()'.includes(c)){tokens.push({type:c});i++;continue;}
    throw new Error('Unexpected character: '+c);
  }
  return tokens;
}
function safeEvalCondition(expr,input,output,context){
  const env={input,output,context};
  const tokens=_safeTokenize(expr);
  let pos=0;
  const peek=()=>tokens[pos];
  const eat=t=>{if(peek()&&peek().type===t){return tokens[pos++];}return null;};
  const expect=t=>{const tk=eat(t);if(!tk)throw new Error('Expected '+t+' near token '+pos);return tk;};
  function parseOr(){let l=parseAnd();while(peek()?.type==='||'){pos++;const r=parseAnd();l=l||r;}return l;}
  function parseAnd(){let l=parseNot();while(peek()?.type==='&&'){pos++;const r=parseNot();l=l&&r;}return l;}
  function parseNot(){if(peek()?.type==='!'){pos++;return !parseNot();}return parseComp();}
  function parseComp(){
    const l=parsePostfix();
    const op=peek()?.type;
    if(['==','===','!=','!==','<','>','<=','>='].includes(op)){
      pos++;const r=parsePostfix();
      switch(op){
        case'==':case'===':return l===r;
        case'!=':case'!==':return l!==r;
        case'<':return l<r;
        case'>':return l>r;
        case'<=':return l<=r;
        case'>=':return l>=r;
      }
    }
    return l;
  }
  function parsePostfix(){
    let v=parseAtom();
    while(peek()?.type==='.'){
      pos++;
      const name=expect('IDENT').value;
      if(peek()?.type==='('){
        pos++;const args=[];
        if(peek()?.type!==')'){args.push(parseOr());while(peek()?.type===','){pos++;args.push(parseOr());}}
        expect(')');
        if(!_SAFE_METHOD_WHITELIST.has(name))throw new Error('Method not allowed: .'+name+'() — extend _SAFE_METHOD_WHITELIST if intentional');
        if(v==null)throw new Error('Cannot call .'+name+'() on null/undefined');
        if(typeof v[name]!=='function')throw new Error('.'+name+'() not a method of value');
        v=v[name](...args);
      }else{
        if(!_SAFE_PROP_WHITELIST.has(name))throw new Error('Property not allowed: .'+name+' — extend _SAFE_PROP_WHITELIST if intentional');
        v=v==null?undefined:v[name];
      }
    }
    return v;
  }
  function parseAtom(){
    const tk=peek();
    if(!tk)throw new Error('Unexpected end of expression');
    if(tk.type==='NUM'){pos++;return tk.value;}
    if(tk.type==='STR'){pos++;return tk.value;}
    if(tk.type==='BOOL'){pos++;return tk.value;}
    if(tk.type==='NULL'){pos++;return null;}
    if(tk.type==='UNDEF'){pos++;return undefined;}
    if(tk.type==='IDENT'){
      pos++;
      if(!(tk.value in env))throw new Error('Unknown identifier: '+tk.value+' (allowed: input, output, context)');
      return env[tk.value];
    }
    if(tk.type==='('){pos++;const v=parseOr();expect(')');return v;}
    throw new Error('Unexpected token: '+tk.type);
  }
  const result=parseOr();
  if(pos<tokens.length)throw new Error('Unexpected trailing tokens');
  return result;
}

// ── Chain execution ─────────────────────────────────────
// Executes pipeline nodes sequentially in topological order, piping outputs between steps
async function runChain(provider,apiKey,model,rb,st,signal){
  const rootFrame=canvasStack[0];
  const edges=rootFrame.edges;
  const nodes=connectedOnly(rootFrame.nodes,edges);
  const ordered=topoWalk(nodes,edges);
  if(!ordered.length)throw new Error('No connected nodes to execute');

  // Build adjacency for routing (nodeId -> [{edge, targetNode}])
  const adjOut={};
  edges.forEach(e=>{
    if(!adjOut[e.from])adjOut[e.from]=[];
    adjOut[e.from].push(e);
  });

  // Track per-node outputs for context merging
  const nodeOutputs={}; // nodeId -> { [portId]: output string }
  const loopCounts={}; // nodeId -> number of times executed

  // Read the value flowing along an edge: the specific source port's value.
  // Fallback (older/loose edges with missing fromPort, or a fromPort that no
  // longer exists in the producer's output map): use the producer's first output port.
  function edgeValue(e){
    const m=nodeOutputs[e.from];
    if(!m)return '';
    if(e.fromPort&&e.fromPort in m)return m[e.fromPort];
    const src=nodes.find(n=>n.id===e.from);
    const firstPort=src?.outputs?.[0]?.id;
    if(firstPort&&firstPort in m)return m[firstPort];
    // Last resort: any single value present (covers fully portless legacy nodes).
    const vals=Object.values(m);
    return vals.length?vals[0]:'';
  }
  // The producer node's single/first output port id — for writing per-port values.
  function outPortId(node){return node.outputs?.[0]?.id||'out';}

  let fullLog='';
  const totalSteps=ordered.length;
  let stepNum=0;
  let lastRender=0; // per-run streaming throttle — reset to 0 on every runChain invocation

  // Execute nodes in topological order, with routing support
  async function executeNode(node){
    const sk=nodeSk(node);if(!sk)return '';
    const skId=sk.id;
    const stepLabel=sk.label||(node.title||node.id);
    stepNum++;

    // ── Context node: merge inputs, no LLM call ──
    if(skId==='context'){
      st.textContent='Step '+stepNum+': '+stepLabel+' (merging)';st.style.color='var(--dim)';
      // Collect all incoming edges' source outputs
      const incoming=edges.filter(e=>e.to===node.id);
      const parts=[];
      incoming.forEach(e=>{const v=edgeValue(e);if(v)parts.push(v);});
      // Add variables from fields
      const vars=node.values?.variables||'';
      if(vars)parts.push('Variables:\n'+vars);
      const merged=parts.join('\n\n---\n\n');
      fullLog+='\n\n## Step '+stepNum+': '+stepLabel+' (Context Merge)\n\n'+
        '_Merged '+incoming.length+' inputs'+(vars?' + variables':'')+' into context._\n';
      rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;
      nodeOutputs[node.id]={[outPortId(node)]:merged};
      return merged;
    }

    // ── Router node: evaluate condition and branch ──
    if(skId==='router'){
      const condition=node.values?.condition||'';
      const mode=node.values?.mode||'LLM (natural language)';
      const maxLoops=parseInt(node.values?.max_loops,10)||CONFIG.DEFAULT_MAX_LOOPS;
      const incoming=edges.filter(e=>e.to===node.id);
      const inputCtx=incoming.map(e=>edgeValue(e)).filter(Boolean).join('\n\n');
      st.textContent='Step '+stepNum+': '+stepLabel+' (routing)';st.style.color='var(--dim)';

      let routeResult='pass';
      if(mode==='Expression (JS)'){
        try{
          // v48.13 — safeEvalCondition replaces `new Function(...)`. Parses a small
          // whitelisted subset (comparisons, logic, property access, ~9 string methods).
          // Failure surfaces in the run log so the user can fix or switch to LLM mode.
          const result=safeEvalCondition(condition,inputCtx,inputCtx,inputCtx);
          routeResult=result?'pass':'fail';
        }catch(e){
          routeResult='fail';
          fullLog+='\n_⚠ Router expression error: '+e.message+'_\n';
        }
      }else{
        // LLM evaluation
        const sysPrompt='You are a routing decision node. Evaluate the following content against this condition: "'+condition+'". Respond with ONLY one word: "pass" if the condition is met, or "fail" if not. No explanation.';
        let llmResult='';
        await callAIStreaming(inputCtx||'(no input)',sysPrompt,provider,apiKey,model,(chunk)=>{llmResult+=chunk;},signal);
        routeResult=llmResult.trim().toLowerCase().includes('pass')?'pass':'fail';
      }

      fullLog+='\n\n## Step '+stepNum+': '+stepLabel+' (Router)\n\n'+
        '_Condition: "'+condition+'"_ → **'+routeResult.toUpperCase()+'**\n';
      rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;

      // Find the matching output port and follow its edges
      const outEdges=adjOut[node.id]||[];
      const matchPort=routeResult==='pass'?'r-pass':'r-fail';
      const routeEdges=outEdges.filter(e=>e.fromPort===matchPort);
      nodeOutputs[node.id]={[matchPort]:inputCtx}; // pass input through the matched branch only

      if(routeEdges.length){
        for(const re of routeEdges){
          const targetNode=nodes.find(n=>n.id===re.to);
          if(!targetNode)continue;
          // Loop detection
          if(!loopCounts[targetNode.id])loopCounts[targetNode.id]=0;
          loopCounts[targetNode.id]++;
          if(loopCounts[targetNode.id]>maxLoops){
            fullLog+='\n_⚠ Max loops ('+maxLoops+') reached for '+(nodeSk(targetNode)?.label||'node')+', stopping._\n';
            rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;
            continue;
          }
          await executeNode(targetNode);
        }
      }
      return routeResult;
    }

    // ── Map node: iterate body once per item in collection ──
    if(skId==='map'){
      const incoming=edges.filter(e=>e.to===node.id);
      const inputCtx=incoming.map(e=>edgeValue(e)).filter(Boolean).join('\n\n');
      const splitMode=node.values?.split_mode||'Auto';
      const delimiter=node.values?.delimiter||'';
      const joinSep=(node.values?.join_separator||'\n\n---\n\n').replace(/\\n/g,'\n');
      const maxIters=parseMaxIterations(node.values?.max_iterations,CONFIG.DEFAULT_MAX_LOOPS);

      st.textContent='Step '+stepNum+': '+stepLabel+' (parsing collection)';st.style.color='var(--dim)';

      // Parse the collection. Throws on strict-mode failures (JSON Array, Custom delimiter).
      let items;
      try{
        items=parseCollection(inputCtx,splitMode,delimiter);
      }catch(e){
        fullLog+='\n\n## Step '+stepNum+': '+stepLabel+' (Map)\n\n_⚠ '+e.message+'_\n';
        rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;
        nodeOutputs[node.id]={[outPortId(node)]:''};
        return '';
      }

      // Empty collection → skip silently with a log line.
      if(items.length===0){
        fullLog+='\n\n## Step '+stepNum+': '+stepLabel+' (Map)\n\n_Collection is empty, skipping iteration._\n';
        rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;
        nodeOutputs[node.id]={[outPortId(node)]:''};
        return '';
      }

      // Cap iterations at max_iterations (guardrail).
      const willRun=Math.min(items.length,maxIters);
      const truncated=items.length>maxIters;

      // Find body and pre-compute its topo order (the same body executes every iteration).
      const body=findMapBody(node.id,nodes,edges);
      const bodyEdges=edges.filter(e=>body.has(e.from)&&body.has(e.to));
      const bodyNodes=nodes.filter(n=>body.has(n.id));
      const bodyTopo=topoWalk(bodyNodes,bodyEdges);

      // Exit edges: from-in-body, to-outside-body. Their source ports carry the iteration result.
      const exitEdges=edges.filter(e=>body.has(e.from)&&!body.has(e.to));

      fullLog+='\n\n## Step '+stepNum+': '+stepLabel+' (Map)\n\n'+
        '_Collection: '+items.length+' item'+(items.length===1?'':'s')+
        (truncated?' (capped at '+maxIters+')':'')+
        ', body: '+body.size+' node'+(body.size===1?'':'s')+'._\n';
      rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;

      const mapOutPort=outPortId(node);
      const iterResults=[];
      for(let i=0;i<willRun;i++){
        const item=items[i];
        const preview=item.length>40?item.slice(0,40)+'…':item;
        fullLog+='\n_Iteration '+(i+1)+'/'+willRun+': "'+preview.replace(/\n/g,' ')+'"_\n';
        rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;

        // Seed Map's output port with the current item — body reads it via edgeValue.
        nodeOutputs[node.id]={[mapOutPort]:item};

        // Empty body: the item itself is the iteration result (orphan-Map semantic).
        if(bodyTopo.length===0){
          iterResults.push(item);
          continue;
        }

        // Execute body nodes in topo order for this iteration.
        for(const bn of bodyTopo){
          await executeNode(bn);
        }

        // Collect this iteration's output from exit edges (or from body's terminal
        // nodes if no exit edges exist — i.e., body terminates in the graph itself).
        let iterValue;
        if(exitEdges.length){
          iterValue=exitEdges.map(e=>edgeValue(e)).filter(Boolean).join('\n');
        }else{
          // Body has no exits: take last topo node's output as the iteration result.
          const last=bodyTopo[bodyTopo.length-1];
          const m=nodeOutputs[last.id]||{};
          iterValue=Object.values(m)[0]||'';
        }
        iterResults.push(iterValue);
      }

      if(truncated){
        fullLog+='\n_⚠ Max iterations ('+maxIters+') reached, stopping at item '+willRun+' of '+items.length+'._\n';
      }

      const joined=iterResults.join(joinSep);
      nodeOutputs[node.id]={[mapOutPort]:joined};
      fullLog+='\n_Map complete: '+iterResults.length+' iteration'+(iterResults.length===1?'':'s')+' joined._\n';
      rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;
      return joined;
    }

    // ── Producer nodes: emit captured content verbatim (no LLM call) ──
    // TEXT/CODE/FILE/FETCH are atomic units of context — their stored content flows
    // downstream as-is, rather than being processed by the model.
    if(skId==='text_input'||skId==='code'||skId==='io_input'||skId==='fetch'){
      let content='';
      if(skId==='code'){
        const code=(node.values?.code||'').trim();
        const lang=(node.values?.lang||'').toLowerCase();
        content=code?'```'+lang+'\n'+code+'\n```':'';
      }else{
        content=node.values?.content||'';
      }
      st.textContent='Step '+stepNum+': '+stepLabel+' (input)';st.style.color='var(--dim)';
      fullLog+='\n\n## Step '+stepNum+': '+stepLabel+' (Input)\n\n'+
        (content?'_Provided '+content.length+' chars of content._\n':'_No content._\n');
      rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;
      nodeOutputs[node.id]={[outPortId(node)]:content};
      return content;
    }

    // ── Regular Compute node: LLM call ──
    // Gather context from all connected upstream nodes
    const incoming=edges.filter(e=>e.to===node.id);
    const inputCtx=incoming.map(e=>edgeValue(e)).filter(Boolean).join('\n\n---\n\n');

    let nodePrompt='';
    const nodeRaw=nodeRawContent(node,sk);
    if(nodeRaw)nodePrompt+=nodeRaw+'\n\n';
    (sk.fields||[]).forEach(f=>{
      const v=node.values?.[f.key];
      if(v)nodePrompt+=f.label+': '+(Array.isArray(v)?v.join(', '):String(v))+'\n';
    });
    if(!nodePrompt.trim())nodePrompt='Process the input and provide output.';

    const systemPrompt='You are executing step '+stepNum+' of a pipeline: "'+stepLabel+'".\n\nDo not hallucinate, fabricate, or assume information you do not have. If you lack the data, context, or knowledge needed to complete any part of a task, stop and ask the user for guidance before proceeding.\n\n'+nodePrompt;
    const userMsg=inputCtx?'Here is the input from upstream nodes:\n\n'+inputCtx+'\n\nProcess this according to your instructions.':'Begin execution. No prior context.';

    st.textContent='Step '+stepNum+'/'+totalSteps+': '+stepLabel;st.style.color='var(--dim)';
    fullLog+='\n\n## Step '+stepNum+': '+stepLabel+'\n\n';
    rb.innerHTML=renderMdResponse(fullLog+'_Streaming..._');rb.scrollTop=rb.scrollHeight;

    let stepOutput='';
    await callAIStreaming(userMsg,systemPrompt,provider,apiKey,model,(chunk)=>{
      stepOutput+=chunk;
      const now=Date.now();
      if(now-lastRender>CONFIG.STREAM_THROTTLE_MS){
        lastRender=now;
        rb.innerHTML=renderMdResponse(fullLog+stepOutput);
        rb.scrollTop=rb.scrollHeight;
      }
    },signal);

    fullLog+=stepOutput;
    nodeOutputs[node.id]={[outPortId(node)]:stepOutput};
    rb.innerHTML=renderMdResponse(fullLog);rb.scrollTop=rb.scrollHeight;
    return stepOutput;
  }

  // Execute all nodes in topological order
  // Skip nodes that were already executed by a Router redirect, OR that belong to
  // any Map's body (those run inside the Map's iteration loop instead).
  const mapBodyUnion=new Set();
  for(const n of nodes){
    if(nodeSk(n)?.id==='map'){
      for(const id of findMapBody(n.id,nodes,edges)) mapBodyUnion.add(id);
    }
  }
  const executed=new Set();
  for(const node of ordered){
    if(executed.has(node.id))continue;
    if(mapBodyUnion.has(node.id))continue; // belongs to a Map body; runs inside Map's loop
    const sk=nodeSk(node);if(!sk)continue;
    // Skip nodes where ALL incoming edges come from a Router — they'll be called by the router itself
    const incomingEdges=edges.filter(e=>e.to===node.id);
    const allFromRouter=incomingEdges.length>0&&incomingEdges.every(e=>{
      const srcNode=nodes.find(n=>n.id===e.from);
      return srcNode&&nodeSk(srcNode)?.id==='router';
    });
    if(allFromRouter){
      // Will be called by the router when it evaluates
      continue;
    }
    executed.add(node.id);
    await executeNode(node);
  }

  return fullLog;
}

document.getElementById('out-run-send').addEventListener('click',async()=>{
  if(_runProvider==='local'){_runKey=_localUrl();_runModel=document.getElementById('out-run-local-model')?.value||document.getElementById('out-run-model')?.value||'';}
  if(!_runKey&&_runProvider!=='local'){document.getElementById('out-run-status').textContent='No API key';return;}
  const prompt=document.getElementById('out-pre').textContent;
  if(!prompt||prompt==='(empty pipeline)'){document.getElementById('out-run-status').textContent='Nothing to send';return;}
  const st=document.getElementById('out-run-status'),sb=document.getElementById('out-run-send'),rb=document.getElementById('out-resp-body');
  sb.disabled=true;sb.textContent='\u231b Running...';st.textContent='Sending...';st.style.color='var(--dim)';
  // Abort plumbing: create controller for this run; pass signal into runChain / callAIStreaming.
  // Stop button visible while in flight; finally block hides it and clears _runAbort.
  _runAbort=new AbortController();
  document.getElementById('out-run-stop').style.display='inline-block';
  const _tcEl=document.getElementById('out-token-count');if(_tcEl){_tcEl.dataset.prev=_tcEl.textContent;_tcEl.textContent='Sending…';_tcEl.style.color='var(--dim)';}
  _exitEditMode();
  rb.innerHTML='<div style="color:var(--dim);font-style:italic">Waiting for response...</div>';
  // Reset conversation history for new run
  _convHistory=[];_updateTurnCount();
  document.getElementById('out-followup').value='';
  document.getElementById('out-followup-status').textContent='';

  // Auto-flip Single → Chain if the pipeline has non-LLM producers (FETCH/FILE/CODE/MAP).
  _autoSelectExecMode();

  try{
  if(_execMode==='chain'){
    // ── Chain mode: run nodes sequentially ──
    try{
      rb.innerHTML='';
      // Layer C: pre-run cost projection. If the graph contains Maps with Routers
      // in their body that could fire a lot of calls, ask the user to confirm before
      // running. Below threshold (CONFIG.HIGH_CALL_THRESHOLD) the dialog never appears.
      // Cancel path just sets status + returns — the outer finally restores button state.
      try{
        const _rootFrame=canvasStack[0];
        const _proj=projectMaxCalls(_rootFrame.nodes,_rootFrame.edges);
        if(_proj.total>(CONFIG.HIGH_CALL_THRESHOLD||100)){
          const _msg='This pipeline could make up to ~'+_proj.total+' LLM calls.\n\n'+
            'Are you sure you want to run it?';
          if(!confirm(_msg)){
            st.textContent='Cancelled';st.style.color='var(--dim)';
            rb.innerHTML='';
            return;
          }
        }
      }catch(_e){/* projection failure should never block a run */}
      const r=await runChain(_runProvider,_runKey,_runModel||undefined,rb,st,_runAbort.signal);
      rb.dataset.rawResponse=r||'';
      updateFmtBadge(r||'');
      if(_respViewMode==='preview'&&r)renderPreviewResponse(r,rb);
      else{rb.innerHTML=r?renderMdResponse(r):'<div style="color:var(--dim)">(empty)</div>';_hydrateFileCards(rb,r);}
      st.textContent='\u2713 Chain complete';st.style.color='var(--grn)';
      _convHistory=[{role:'user',content:'Chain execution'},{role:'assistant',content:r||''}];
      _updateTurnCount();
    }catch(e){
      if(e.name==='AbortError'){
        // Preserve already-streamed partial output, add a dim "Cancelled" suffix.
        rb.insertAdjacentHTML('beforeend','<div style="color:var(--dim);font-style:italic;padding:8px 0;border-top:1px dashed var(--brd);margin-top:8px">\u23f9 Cancelled by user.</div>');
        st.textContent='\u23f9 Cancelled';st.style.color='var(--dim)';
      }else{
        rb.innerHTML='<div style="color:var(--red)">\u274c '+e.message.replace(/\n/g,'<br>')+'</div>';
        st.textContent='Failed';st.style.color='var(--red)';
      }
    }
  } else {
    // ── Single mode: compile everything into one prompt ──
    const _sysPrompt=prompt;
    const _userMsg='Execute the workflow described in your system instructions. Process each step in sequence and provide the complete output.';
    try{
      let accumulated='';
      let lastRender=0;
      rb.innerHTML='';
      st.textContent='Streaming...';
      await callAIStreaming(_userMsg,_sysPrompt,_runProvider,_runKey,_runModel||undefined,(chunk)=>{
        accumulated+=chunk;
        const now=Date.now();
        if(now-lastRender>CONFIG.STREAM_THROTTLE_MS){
          lastRender=now;
          rb.innerHTML=renderMdResponse(accumulated);
          rb.scrollTop=rb.scrollHeight;
        }
      },_runAbort.signal);
      const r=accumulated;
      rb.dataset.rawResponse=r||'';
      updateFmtBadge(r||'');
      if(_respViewMode==='preview'&&r)renderPreviewResponse(r,rb);
      else{rb.innerHTML=r?renderMdResponse(r):'<div style="color:var(--dim)">(empty)</div>';_hydrateFileCards(rb,r);}
      st.textContent='\u2713 Done';st.style.color='var(--grn)';
      _convHistory=[{role:'user',content:'System context:\n'+_sysPrompt+'\n\n'+_userMsg},{role:'assistant',content:r||''}];
      _updateTurnCount();
    }catch(e){
      if(e.name==='AbortError'){
        rb.insertAdjacentHTML('beforeend','<div style="color:var(--dim);font-style:italic;padding:8px 0;border-top:1px dashed var(--brd);margin-top:8px">\u23f9 Cancelled by user.</div>');
        st.textContent='\u23f9 Cancelled';st.style.color='var(--dim)';
      }else{
        rb.innerHTML='<div style="color:var(--red)">\u274c '+e.message.replace(/\n/g,'<br>')+'</div>';
        st.textContent='Failed';st.style.color='var(--red)';
      }
    }
  }
  }finally{sb.disabled=false;sb.textContent=_execMode==='chain'?'\u26d3 Run Chain':'\u25b6 Send to LLM';const _tc=document.getElementById('out-token-count');if(_tc&&_tc.dataset.prev!==undefined){_tc.textContent=_tc.dataset.prev;_tc.style.color=_tokenColor(estimateTokens(document.getElementById('out-pre')?.textContent||''));}document.getElementById('out-run-stop').style.display='none';_runAbort=null;}
});

document.getElementById('out-resp-copy').addEventListener('click',()=>{const b=document.getElementById('out-resp-copy');navigator.clipboard.writeText(document.getElementById('out-resp-body').innerText).then(()=>{b.textContent='\u2713';setTimeout(()=>{b.textContent='Copy';},2000);});});

// ── Conversation history ─────────────────────────────────
let _convHistory=[];// [{role:'user'|'assistant', content:'...'}]
let _runAbort=null;// AbortController for in-flight LLM run (chain or follow-up); null when idle
function _updateTurnCount(){const n=Math.floor(_convHistory.length/2);document.getElementById('out-turn-count').textContent=n?n+' turn'+(n>1?'s':''):'';};

// ── Save response ────────────────────────────────────────
// ── Response format detection ───────────────────────────
const FENCE_LANGS={
  javascript:'js',typescript:'ts',jsx:'jsx',tsx:'tsx',
  python:'py',py:'py',
  html:'html',css:'css',scss:'scss',
  json:'json',
  bash:'sh',shell:'sh',sh:'sh',zsh:'sh',
  sql:'sql',
  rust:'rs',go:'go',java:'java',kotlin:'kt',swift:'swift',
  cpp:'cpp','c++':'cpp',c:'c',
  ruby:'rb',php:'php',
  yaml:'yaml',yml:'yaml',toml:'toml',
  markdown:'md',md:'md',
  xml:'xml',svg:'svg',
};

function detectResponseFormat(raw){
  if(!raw||!raw.trim()) return {ext:'txt',label:'TXT',mime:'text/plain'};
  const t=raw.trim();

  // HTML
  if(_looksLikeHtml(t)) return {ext:'html',label:'HTML',mime:'text/html'};

  // Single fenced code block — whole response is essentially one block
  // Allow optional brief preamble (1-2 short lines before the fence)
  const fenceMatch=t.match(/^(?:[^\n]{0,80}\n){0,2}```(\w+)?\n([\s\S]*?)```\s*$/);
  if(fenceMatch){
    const lang=(fenceMatch[1]||'').toLowerCase();
    const ext=FENCE_LANGS[lang]||null;
    if(ext&&ext!=='md'){
      const label=lang.toUpperCase()||'CODE';
      const mime=ext==='json'?'application/json':ext==='html'?'text/html':'text/plain';
      return {ext,label,mime};
    }
  }

  // Markdown signals: headings, bold, bullet lists, code fences anywhere
  if(/^#{1,6} /m.test(t)||/\*\*[^*]+\*\*/m.test(t)||/^[-*] /m.test(t)||/^```/m.test(t)||/^\d+\. /m.test(t)){
    return {ext:'md',label:'MD',mime:'text/plain'};
  }

  return {ext:'txt',label:'TXT',mime:'text/plain'};
}

function updateFmtBadge(raw){
  const badge=document.getElementById('out-resp-fmt');
  if(!raw||!raw.trim()){badge.style.display='none';return;}
  const {label}=detectResponseFormat(raw);
  badge.textContent=label;badge.style.display='';
}

// ── Edit toggle ─────────────────────────────────────────
let _respEditing=false;
function setRespEditing(on){
  _respEditing=on;
  const rb=document.getElementById('out-resp-body');
  const btn=document.getElementById('out-resp-edit');
  if(on){
    rb.contentEditable='true';
    rb.style.outline='1px solid var(--acc)';
    rb.style.borderRadius='6px';
    rb.dataset.editingHtml='1';
    rb.focus();
    btn.textContent='Done';
    btn.style.color='var(--acc)';
  }else{
    rb.contentEditable='false';
    rb.style.outline='';
    rb.style.borderRadius='';
    rb.dataset.editingHtml='';
    // Sync rawResponse from edited innerHTML so Save picks up changes with formatting
    rb.dataset.rawResponse=rb.innerHTML;
    updateFmtBadge(rb.dataset.rawResponse);
    btn.textContent='Edit';
    btn.style.color='';
  }
}
document.getElementById('out-resp-edit').addEventListener('click',()=>setRespEditing(!_respEditing));
// Exit edit mode if a new response comes in or clear is hit
function _exitEditMode(){if(_respEditing)setRespEditing(false);}

document.getElementById('out-resp-save').addEventListener('click',()=>{
  const body=document.getElementById('out-resp-body');
  const raw=body.dataset.rawResponse||'';
  if(!raw){return;}
  // If edited in place, rawResponse is innerHTML — always save as html
  let ext,mime;
  if(body.dataset.editingHtml==='1'||body.contentEditable==='true'){
    ext='html';mime='text/html';
  }else{
    ({ext,mime}=detectResponseFormat(raw));
  }
  const blob=new Blob([raw],{type:mime});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);
  a.download='pipeline-response-'+new Date().toISOString().slice(0,19).replace(/[:T]/g,'-')+'.'+ext;
  a.click();URL.revokeObjectURL(a.href);
});

// ── Clear conversation ───────────────────────────────────
document.getElementById('out-resp-clear').addEventListener('click',()=>{
  _exitEditMode();
  _convHistory=[];_updateTurnCount();
  document.getElementById('out-resp-body').innerHTML='';
  document.getElementById('out-resp-body').dataset.rawResponse='';
  updateFmtBadge('');
  setRespViewMode('raw');
  document.getElementById('out-followup-status').textContent='';
  document.getElementById('out-followup').value='';
});

// ── Follow-up send ───────────────────────────────────────
async function sendFollowUp(msg){
  if(!msg.trim())return;
  if(!_runKey&&_runProvider!=='local'){document.getElementById('out-followup-status').textContent='No API key';return;}
  if(!_convHistory.length){document.getElementById('out-followup-status').textContent='Run the pipeline first';return;}
  const st=document.getElementById('out-followup-status'),rb=document.getElementById('out-resp-body');
  const fsb=document.getElementById('out-followup-send');
  fsb.disabled=true;st.textContent='Sending…';st.style.color='var(--dim)';
  _runAbort=new AbortController();
  document.getElementById('out-run-stop').style.display='inline-block';
  _convHistory.push({role:'user',content:msg});
  try{
    const r=await callAIWithHistory(_convHistory,_runProvider,_runKey,_runModel||undefined,_runAbort.signal);
    _convHistory.push({role:'assistant',content:r});
    _updateTurnCount();
    // Append to response body with a separator
    const sep=document.createElement('div');
    sep.style.cssText='margin:16px 0;border-top:1px solid var(--brd);padding-top:12px';
    const userLbl=document.createElement('div');
    userLbl.style.cssText='font-family:var(--mono);font-size:9px;color:var(--dim);margin-bottom:6px;letter-spacing:.08em';
    userLbl.textContent='YOU';
    const userMsg=document.createElement('div');
    userMsg.style.cssText='background:var(--surf);border-radius:6px;padding:8px 12px;margin-bottom:12px;font-size:12px;white-space:pre-wrap';
    userMsg.textContent=msg;
    const assistLbl=document.createElement('div');
    assistLbl.style.cssText='font-family:var(--mono);font-size:9px;color:var(--dim);margin-bottom:6px;letter-spacing:.08em';
    assistLbl.textContent='ASSISTANT';
    const assistMsg=document.createElement('div');
    assistMsg.innerHTML=renderMdResponse(r);
    sep.appendChild(userLbl);sep.appendChild(userMsg);sep.appendChild(assistLbl);sep.appendChild(assistMsg);
    rb.appendChild(sep);rb.scrollTop=rb.scrollHeight;
    rb.dataset.rawResponse=(rb.dataset.rawResponse||'')+('\n\n---\n\nYOU:\n'+msg+'\n\nASSISTANT:\n'+r);
    updateFmtBadge(rb.dataset.rawResponse);
    if(_respViewMode==='preview')renderPreviewResponse(rb.dataset.rawResponse,rb);
    st.textContent='\u2713 Done';st.style.color='var(--grn)';
    document.getElementById('out-followup').value='';
    setTimeout(()=>{st.textContent='';},3000);
  }catch(e){
    _convHistory.pop();// remove failed user msg
    if(e.name==='AbortError'){
      st.textContent='\u23f9 Cancelled';st.style.color='var(--dim)';
    }else{
      st.textContent='\u274c '+e.message;st.style.color='var(--red)';
    }
  }finally{fsb.disabled=false;document.getElementById('out-run-stop').style.display='none';_runAbort=null;}
}

document.getElementById('out-followup-send').addEventListener('click',()=>{
  sendFollowUp(document.getElementById('out-followup').value);
});
document.getElementById('out-followup').addEventListener('keydown',e=>{
  if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendFollowUp(e.target.value);}
});

// ── Abort in-flight LLM request: Stop button + Shift+Esc shortcut ─────
// Shared across Run-chain runs, Single-mode runs, and Follow-up sends —
// only one LLM operation can be in flight at a time (run-button disables
// while running; follow-up requires _convHistory.length).
// Capture phase + stopImmediatePropagation prevents Shift+Esc from also
// firing the line-3901 Escape-closes-overlays/drawers handler.
function _abortRun(){if(_runAbort){_runAbort.abort();document.getElementById('out-run-stop').style.display='none';}}
document.getElementById('out-run-stop').addEventListener('click',_abortRun);
document.addEventListener('keydown',e=>{
  if(e.key==='Escape'&&e.shiftKey&&_runAbort){e.preventDefault();e.stopImmediatePropagation();_abortRun();}
},{capture:true});

// Drawer resize
document.getElementById('llm-drawer-resizer').addEventListener('pointerdown',e=>{
  e.preventDefault();const d=document.getElementById('llm-drawer'),sx=e.clientX,sw=d.offsetWidth;d.style.transition='none';
  const mv=ev=>{d.style.width=Math.max(350,Math.min(window.innerWidth*.9,sw+(sx-ev.clientX)))+'px';};
  const up=()=>{d.style.transition='';window.removeEventListener('pointermove',mv);window.removeEventListener('pointerup',up);};
  window.addEventListener('pointermove',mv);window.addEventListener('pointerup',up);
});

document.getElementById('out-copy').addEventListener('click',()=>{
  const btn=document.getElementById('out-copy');
  navigator.clipboard.writeText(document.getElementById('out-pre').textContent).then(()=>{
    btn.textContent='✓ Copied';btn.style.color='var(--grn)';btn.style.borderColor='var(--grn)';
    setTimeout(()=>{btn.textContent=_outFmt==='gpt'?(_gptVariant==='json'?'Copy JSON':'Copy text'):_outFmt==='gemini'?'Copy text':'Copy XML';btn.style.color='';btn.style.borderColor='';},2000);
  });
});

document.getElementById('out-download').addEventListener('click',()=>{
  const p=activePipeline();
  const base=((p?.name||'pipeline').replace(/[^a-z0-9]/gi,'-').toLowerCase().replace(/-+/g,'-').replace(/^-|-$/g,''))||'pipeline';
  const datestamp=new Date().toISOString().slice(0,10);
  let blob,filename,ext;
  if(_outFmt==='gpt'){
    if(_gptVariant==='json'){
      const gpt=buildGPT();
      if(!gpt.json){
        document.getElementById('out-pre').textContent='No JSON spec available.';
        return;
      }
      blob=new Blob([JSON.stringify(gpt.json,null,2)],{type:'application/json'});
      filename=base+'-gpt-spec-'+datestamp+'.json';
      ext='.json';
    }else{
      const bundle=buildGPTBundle();
      if(!bundle){
        document.getElementById('out-pre').textContent='No nodes to export.';
        return;
      }
      blob=bundle.blob;
      filename=bundle.filename;
      ext='.zip';
    }
  }else if(_outFmt==='gemini'){
    const text=document.getElementById('out-pre').textContent;
    blob=new Blob([text],{type:'text/markdown'});
    const suffix=_geminiVariant==='full'?'-gemini-full':'-gemini-fit';
    filename=base+suffix+'-'+datestamp+'.md';
    ext='.md';
  }else{
    // claude
    const text=document.getElementById('out-pre').textContent;
    blob=new Blob([text],{type:'application/xml'});
    filename=base+'-claude-'+datestamp+'.xml';
    ext='.xml';
  }
  const a=document.createElement('a');
  a.href=URL.createObjectURL(blob);
  a.download=filename;
  a.click();
  URL.revokeObjectURL(a.href);
  const btn=document.getElementById('out-download');
  btn.textContent='✓ Downloaded';btn.style.color='var(--grn)';btn.style.borderColor='var(--grn)';
  setTimeout(()=>{btn.textContent='↓ Download'+ext;btn.style.color='';btn.style.borderColor='';},2000);
});

// ═══════════════════════════════════════════════════════════
// SAVE LIBRARY
// ═══════════════════════════════════════════════════════════
let _libFileHandle=null;

// ── Skills library JSON file ───────────────────────────────────
async function saveLibraryJSON(silent=false){
  const blob=new Blob([JSON.stringify(skills.filter(s=>!s.isBuiltin),null,2)],{type:'application/json'});
  const btn=document.getElementById('btn-save-lib');
  if(window.showSaveFilePicker){
    try{
      if(!_libFileHandle){
        _libFileHandle=await window.showSaveFilePicker({
          suggestedName:'pipeline-skills.sklb',
          types:[{description:'GUIness Skill Library',accept:{'application/json':['.sklb','.json']}}]
        });
      }
      const w=await _libFileHandle.createWritable();await w.write(blob);await w.close();
      if(!silent){btn.textContent='✓ Library Saved';btn.style.color='var(--grn)';btn.style.borderColor='var(--grn)';
        setTimeout(()=>{btn.textContent='Save Library';btn.style.color='';btn.style.borderColor='';},2000);}
    }catch(e){
      if(e.name==='AbortError')return;
      _libFileHandle=null;
      const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='pipeline-skills.sklb';a.click();URL.revokeObjectURL(a.href);
    }
  }else{
    const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='pipeline-skills.sklb';a.click();URL.revokeObjectURL(a.href);
    if(!silent){btn.textContent='↓ Downloaded';btn.style.color='var(--grn)';setTimeout(()=>{btn.textContent='Save Library';btn.style.color='';},2500);}
  }
}

async function loadLibraryJSON(){
  const btn=document.getElementById('btn-load-lib');
  try{
    let text;
    if(window.showOpenFilePicker){
      const [fh]=await window.showOpenFilePicker({types:[{description:'GUIness Skill Library',accept:{'application/json':['.sklb','.json']}}]});
      _libFileHandle=fh;text=await(await fh.getFile()).text();
    }else{
      text=await new Promise((res,rej)=>{
        const inp=document.createElement('input');inp.type='file';inp.accept='.sklb,.json';
        inp.addEventListener('change',async()=>{if(!inp.files[0])return rej(new Error('no file'));res(await inp.files[0].text());});
        inp.click();
      });
    }
    const loaded=JSON.parse(text);
    if(!Array.isArray(loaded))throw new Error('Expected JSON array');
    let added=0,updated=0;
    loaded.forEach(sk=>{
      if(!sk.id||!sk.label)return;
      sk.isBuiltin=false;
      if(upsertSkill(sk)) added++; else updated++;
    });
    renderLib();
    // Rebuild all canvas nodes so edges reconnect to restored skills
    getNodes().forEach(n=>rebuildNode(n));
    renderEdges();
    btn.textContent='✓ +'+added+' / ∼'+updated;btn.style.color='var(--grn)';
    setTimeout(()=>{btn.textContent='⬆ Load Library';btn.style.color='';},2500);
  }catch(e){
    if(e.name==='AbortError')return;
    btn.textContent='✗ Failed';btn.style.color='var(--red)';
    setTimeout(()=>{btn.textContent='⬆ Load Library';btn.style.color='';},2500);
    console.error('loadLibraryJSON:',e);
  }
}

document.getElementById('btn-load-lib').addEventListener('click',loadLibraryJSON);
document.getElementById('btn-save-lib').addEventListener('click',saveLibraryJSON);


// ═══════════════════════════════════════════════════════════
// CONTEXT MENU
// ═══════════════════════════════════════════════════════════
let ctxNode=null;
const ctxMenu=document.getElementById('ctx-menu');

// Node-types whose `values` payload is downloadable as a content file.
// FILE (io_input) excluded — user already has the original file on disk.
// Built-in logic primitives (compute/router/context/map) excluded — no meaningful payload.
const CONTENT_DOWNLOAD_TYPES=new Set(['text_input','fetch','code']);

function _downloadNodeContent(node){
  const sk=nodeSk(node);
  const skId=node.type||node.skillId;
  const base=(node.title||sk?.label||'content').toLowerCase().replace(/\s+/g,'-');
  let body='',ext='txt',mime='text/plain';
  if(skId==='text_input'){
    body=node.values?.content||'';
    ext='txt';mime='text/plain';
  }else if(skId==='fetch'){
    body=node.values?.content||'';
    const backend=node.values?.backend||'';
    if(backend==='Proxy (HTML)'){ext='html';mime='text/html';}
    else if(backend==='Proxy (Markdown)'){ext='md';mime='text/markdown';}
    else{ext='txt';mime='text/plain';}
  }else if(skId==='code'){
    body=node.values?.code||'';
    ext=CODE_LANG_EXT[node.values?.lang]||'txt';
    mime='text/plain';
  }else{
    return; // shouldn't happen — visibility gate already excludes other types
  }
  const blob=new Blob([body],{type:mime});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);
  a.download=base+'.'+ext;
  a.click();URL.revokeObjectURL(a.href);
}

function openCtxMenu(x,y,node){
  ctxNode=node;
  const sk=nodeSk(node);
  const multi=selNodes.size>1;

  // Single-node-only items: hidden in multi-select mode
  document.getElementById('ctx-start').style.display   = (!multi&&!node.isStart) ?'flex':'none';
  document.getElementById('ctx-unstart').style.display = (!multi&&node.isStart)  ?'flex':'none';
  document.getElementById('ctx-open-graph').style.display = (!multi&&sk&&!sk.isBuiltin)?'flex':'none';

  // Paste: only show when clipboard has content
  document.getElementById('ctx-paste').style.display=nodeClipboard?'flex':'none';
  document.getElementById('ctx-save-as-skill').style.display=!multi?'flex':'none';

  // Merge to Library: logic-family only (input family doesn't merge — captured content
  // isn't reusable behavior). Single-select shows disabled when not diverged (discoverability).
  // Multi-select shows "Merge N Skills" when ≥1 selected node is an eligible diverged logic-family node.
  const mergeEl=document.getElementById('ctx-merge');
  if(multi){
    // Count eligible: diverged logic-family nodes in the selection.
    const allNodes=getNodes();
    let eligible=0;
    for(const id of selNodes){
      const n=allNodes.find(x=>x.id===id);if(!n)continue;
      const ns=nodeSk(n);if(!ns||!ns.rawContent||!ns.rawContent.trim())continue;
      if(isNodeDiverged(n,ns))eligible++;
    }
    if(eligible>0){
      mergeEl.style.display='flex';
      mergeEl.classList.remove('disabled');
      mergeEl.innerHTML=`<span class="ci">◊</span> Merge ${eligible} Skill${eligible===1?'':'s'} to Library…`;
    }else{
      mergeEl.style.display='none';
    }
  }else{
    const isLogic=!!(sk&&sk.rawContent&&sk.rawContent.trim());
    if(!isLogic){
      mergeEl.style.display='none';
    }else{
      mergeEl.style.display='flex';
      mergeEl.classList.toggle('disabled',!isNodeDiverged(node,sk));
      mergeEl.innerHTML='<span class="ci">◊</span> Merge to Library…';
    }
  }

  // Delete label: reflect count in multi-select
  const delEl=document.getElementById('ctx-delete');
  delEl.innerHTML=multi
    ? `<span class="ci">×</span> Delete ${selNodes.size} Nodes`
    : '<span class="ci">×</span> Delete Node';

  // Copy label: reflect count
  const copyEl=document.getElementById('ctx-copy');
  copyEl.innerHTML=multi
    ? `<span class="ci">⎘</span> Copy ${selNodes.size} Nodes`
    : '<span class="ci">⎘</span> Copy';

  // Duplicate label
  const dupEl=document.getElementById('ctx-duplicate');
  dupEl.innerHTML=multi
    ? `<span class="ci">⧉</span> Duplicate ${selNodes.size} Nodes`
    : '<span class="ci">⧉</span> Duplicate';

  // Download items: "Download Content" for input primitives with captured payload,
  // "Download Skill" for non-builtin (custom) skills. Hidden in multi-select.
  const skId=node.type||node.skillId;
  const contentVal = skId==='text_input' ? node.values?.content
                   : skId==='fetch'      ? node.values?.content
                   : skId==='code'       ? node.values?.code
                   : null;
  const showContent = !multi && CONTENT_DOWNLOAD_TYPES.has(skId) && contentVal && contentVal.trim();
  const showSkill   = !multi && sk && !sk.isBuiltin;
  document.getElementById('ctx-download-content').style.display = showContent ? 'flex' : 'none';
  document.getElementById('ctx-download-skill').style.display   = showSkill   ? 'flex' : 'none';

  // Position — keep inside viewport
  const mw=180,mh=multi?120:260;
  ctxMenu.style.left=Math.min(x,window.innerWidth-mw-8)+'px';
  ctxMenu.style.top=Math.min(y,window.innerHeight-mh-8)+'px';
  ctxMenu.classList.add('open');
}
function closeCtxMenu(){ctxMenu.classList.remove('open');ctxNode=null;}

document.addEventListener('pointerdown',e=>{if(!e.target.closest('#ctx-menu'))closeCtxMenu();});
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeCtxMenu();},{capture:true});
document.addEventListener('contextmenu',e=>{if(!e.target.closest('.node')){e.preventDefault();closeCtxMenu();}});

// ── Node clipboard (cross-pipeline copy/paste) ─────────────
let nodeClipboard=null; // {nodes:[...], edges:[...]}

// ── Save selected node as a new skill ─────────────────────
function saveNodeAsSkill(nodeId){
  const node=getNodes().find(n=>n.id===(nodeId||selNode));if(!node)return;
  const existingSk=nodeSk(node);
  // Build a default skill from the node's current state
  const name=node.title||(existingSk?.label)||'New Skill';
  const raw=existingSk?.rawContent||('# '+name+'\n\n'+(existingSk?.desc||''));
  // Pre-fill wizard with node's metadata
  wiz={
    step:'edit',method:'manual',
    raw,
    name,
    desc:existingSk?.desc||'',
    color:existingSk?.color||'blue',
    shape:existingSk?.shape||'default',
    glyph:existingSk?.glyph||'◆',
    tags:[...(existingSk?.tags||[])],
    category:existingSk?.category||'Skills',
    editId:null,
    inputs:structuredClone(node.inputs||[]),
    outputs:structuredClone(node.outputs?.length?node.outputs:[{id:uid('p'),name:'output',type:'Any'}]),
  };
  document.getElementById('wiz-title').textContent='SAVE NODE AS SKILL';
  document.getElementById('wiz-overlay').classList.add('open');
  drawWiz();
}

// ── Import a .skill/.md/.json file as a node placed on canvas ──────────────
function importSkillFileAsNode(){
  const inp=document.createElement('input');
  inp.type='file';inp.accept='.md,.sk,.sklb,.skill,.json,.txt,.zip,.ppln';inp.multiple=true;inp.style.display='none';
  document.body.appendChild(inp);
  inp.addEventListener('change',async e=>{
    const files=Array.from(e.target.files);
    if(!files.length){inp.remove();return;}

    // Route .ppln and .sklb files through the unified drop handler
    const routeFiles=[];
    const skillFiles=[];
    for(const f of files){
      const n=f.name.toLowerCase();
      if(n.endsWith('.ppln')||n.endsWith('.sklb'))routeFiles.push(f);
      else skillFiles.push(f);
    }
    // Handle .ppln/.sklb via unified handler (canvas target, center of viewport)
    if(routeFiles.length){
      const t=frame().tx;
      const centerX=scene.offsetWidth/2;const centerY=scene.offsetHeight/2;
      const rect=wrap.getBoundingClientRect();
      await _handleFileDrop(routeFiles,'canvas',rect.left+centerX,rect.top+centerY);
    }
    if(!skillFiles.length){inp.remove();return;}

    pushHistory();
    let totalImported=0;
    const OFFSET=CONFIG.IMPORT_NODE_OFFSET;
    const t=frame().tx;
    const baseCx=snap((scene.offsetWidth/2-t.x)/t.s);
    const baseCy=snap((scene.offsetHeight/2-t.y)/t.s);

    for(let idx=0;idx<skillFiles.length;idx++){
      const f=skillFiles[idx];
      const isZip=f.name.endsWith('.zip')||f.name.endsWith('.skill');

      if(isZip){
        // ── ZIP/SKILL import: unpack and build graph from structure ──
        try{
          const arrayBuf=await f.arrayBuffer();
          const zipEntries=await _parseZip(arrayBuf);
          if(!zipEntries.length){continue;}
          await _importZipAsGraph(zipEntries,f.name,baseCx+idx*OFFSET*4,baseCy);
          totalImported++;
        }catch(err){
          // Fallback: try reading as text (might be a renamed .md)
          try{
            const text=await f.text();
            _importTextAsSkill(text,f.name,baseCx+idx*OFFSET,baseCy+idx*OFFSET);
            totalImported++;
          }catch(e2){console.warn('Import failed:',f.name,'zip:',err,'text:',e2);}
        }
      }else{
        // ── Plain text or .json that might be a pipeline/library ──
        const text=await f.text();
        const ftype=_detectFileType(f.name,text);
        if(ftype==='pipeline'||ftype==='library'){
          // Re-wrap as File and route through unified handler
          const blob=new Blob([text],{type:'application/json'});
          const fakeFile=new File([blob],f.name,{type:'application/json'});
          const rect=wrap.getBoundingClientRect();
          await _handleFileDrop([fakeFile],'canvas',rect.left+scene.offsetWidth/2,rect.top+scene.offsetHeight/2);
        }else{
          _importTextAsSkill(text,f.name,baseCx+idx*OFFSET,baseCy+idx*OFFSET);
          totalImported++;
        }
      }
    }

    inp.remove();
    if(totalImported){
      renderLib();renderEdges();markPipelineDirty(activePipelineId);
      flashBtn('btn-save-pipeline','◈ '+totalImported+' skill'+(totalImported!==1?'s':'')+' imported','💾 Save Pipeline');
    }
  });
  inp.click();
}

// ── Import a plain text file as a single skill (and optionally place a node on canvas) ──
// When placeNode is false, only the skill is added to the library — no canvas node.
// This removes the need for library-drop callers to manually pop+remove a node afterward.
function _importTextAsSkill(raw,filename,centerX,centerY,placeNode=true){
  // Structured skill import (.sk always, .json when shape matches).
  // Single-skill JSON used to be dumped into rawContent — this path preserves id, fields, ports, color, glyph, internalGraph.
  const _fn=filename.toLowerCase();
  if(_fn.endsWith('.sk')||_fn.endsWith('.json')){
    try{
      const parsed=JSON.parse(raw);
      if(parsed&&!Array.isArray(parsed)&&parsed.id&&parsed.label){
        const sk=structuredClone(parsed);
        sk.isBuiltin=false;
        upsertSkill(sk);
        if(!placeNode)return;
        const node={id:uid(),type:null,skillId:sk.id,x:centerX,y:centerY,values:{},title:sk.label,
          inputs:structuredClone(sk.defaultInputs||[]),
          outputs:structuredClone(sk.defaultOutputs||[])};
        frame().nodes.push(node);
        const el=buildNode(node);if(el)scene.appendChild(el);
        return;
      }
    }catch(e){/* fall through to text path */}
  }
  let name='',desc='';
  const fm=raw.match(/^---\s*\n([\s\S]*?)\n---/);
  if(fm){
    name=(fm[1].match(/name:\s*(.+)/)||[])[1]?.trim()||'';
    desc=(fm[1].match(/description:\s*(.+)/)||[])[1]?.trim()||'';
  }
  if(!name){const h=(raw.match(/^#\s+(.+)/m)||[])[1];if(h)name=h.trim();}
  if(!desc){const p=(raw.replace(/^---[\s\S]*?---\s*/,'').match(/^([^#\n].{10,})/m)||[])[1];if(p)desc=p.trim().slice(0,140);}
  name=name||filename.replace(/\.(md|skill|sk|sklb|json|txt)$/,'').replace(/[-_]/g,' ');
  const newSk={
    id:uid('sk'),label:name.toUpperCase(),color:'blue',glyph:'◆',shape:'default',
    category:'Skills',desc,tags:[],isBuiltin:false,rawContent:raw,deps:[],_ts:Date.now(),
    internalGraph:{nodes:[],edges:[]},hasOut:true,hasIn:true,fields:[],
    defaultInputs:[],defaultOutputs:[],
  };
  addSkill(newSk);
  if(!placeNode)return;
  const node={id:uid(),type:null,skillId:newSk.id,x:centerX,y:centerY,values:{},title:name,
    inputs:structuredClone(newSk.defaultInputs),
    outputs:structuredClone(newSk.defaultOutputs)};
  frame().nodes.push(node);
  const el=buildNode(node);if(el)scene.appendChild(el);
}

// ═══════════════════════════════════════════════════════════
// FILE DROP — Unified drag-and-drop handler for canvas & library
// ═══════════════════════════════════════════════════════════

// Detect file type from extension, with content-sniffing fallback for .json
function _detectFileType(name,text){
  const n=name.toLowerCase();
  if(n.endsWith('.ppln')||n.endsWith('.pipeline.json'))return 'pipeline';
  if(n.endsWith('.sklb'))return 'library';
  if(n.endsWith('.sk'))return 'skill'; // single GUIness skill (structured JSON)
  if(n.endsWith('.md')||n.endsWith('.txt'))return 'skill';
  if(n.endsWith('.zip')||n.endsWith('.skill'))return 'zip';
  if(n.endsWith('.json')&&text){
    try{const d=JSON.parse(text);if(d&&d.stack&&Array.isArray(d.stack))return 'pipeline';if(Array.isArray(d))return 'library';}catch(e){}
    return 'skill'; // single skill object or unknown JSON
  }
  return 'skill';
}

// Show a transient banner on a container
function _showDropBanner(container,text,typeClass){
  let banner=container.querySelector('.drop-banner');
  if(!banner){banner=document.createElement('div');banner.className='drop-banner';container.appendChild(banner);}
  banner.className='drop-banner visible '+typeClass;
  banner.textContent=text;
  clearTimeout(banner._ht);
  banner._ht=setTimeout(()=>{banner.classList.remove('visible');},2400);
}

// Pipeline choice modal: "Open as New Tab" vs "Add to Current Pipeline"
function _showPipelineChoiceModal(data,filename,dropX,dropY){
  return new Promise(resolve=>{
    const overlay=document.createElement('div');
    overlay.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;display:flex;align-items:center;justify-content:center';
    const box=document.createElement('div');
    box.style.cssText='background:var(--panel);border:1px solid var(--brd);border-radius:10px;padding:24px;width:380px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 32px rgba(0,0,0,.4)';
    const title=document.createElement('div');
    title.style.cssText='font-family:var(--mono);font-size:11px;font-weight:700;color:var(--cyn);letter-spacing:.08em';
    title.textContent='IMPORT PIPELINE';
    const desc=document.createElement('div');
    desc.style.cssText='font-size:12px;color:var(--dhi);line-height:1.5';
    desc.textContent='"'+(data.name||filename)+'" — how would you like to import this pipeline?';
    const btnRow=document.createElement('div');
    btnRow.style.cssText='display:flex;flex-direction:column;gap:8px';
    const btnTab=document.createElement('button');btnTab.className='mbtn';
    btnTab.style.cssText='font-size:10px;padding:10px 14px;text-align:left';
    btnTab.innerHTML='<span style="color:var(--cyn);font-weight:700">⬒ Open as New Tab</span><br><span style="font-size:9px;color:var(--dim)">Opens the pipeline in its own tab for editing</span>';
    const btnNode=document.createElement('button');btnNode.className='mbtn';
    btnNode.style.cssText='font-size:10px;padding:10px 14px;text-align:left';
    btnNode.innerHTML='<span style="color:var(--grn);font-weight:700">◈ Add to Current Pipeline</span><br><span style="font-size:9px;color:var(--dim)">Embeds the pipeline as a single node with internal graph</span>';
    const btnCancel=document.createElement('button');btnCancel.className='mbtn';
    btnCancel.style.cssText='font-size:10px;align-self:flex-end;margin-top:4px';
    btnCancel.textContent='Cancel';
    btnTab.addEventListener('click',()=>{overlay.remove();resolve('tab');});
    btnNode.addEventListener('click',()=>{overlay.remove();resolve('node');});
    btnCancel.addEventListener('click',()=>{overlay.remove();resolve(null);});
    btnRow.appendChild(btnTab);btnRow.appendChild(btnNode);
    box.appendChild(title);box.appendChild(desc);box.appendChild(btnRow);box.appendChild(btnCancel);
    overlay.appendChild(box);document.body.appendChild(overlay);
    overlay.addEventListener('pointerdown',e=>{if(e.target===overlay){overlay.remove();resolve(null);}});
  });
}

// Create a skill from pipeline data and place as a node (pipeline-as-node)
async function _addPipelineAsNode(data,filename,sceneX,sceneY){
  const pName=data.name||filename.replace(/\.ppln$|\.pipeline\.json$|\.json$/,'');
  // Build internal graph from the pipeline's root stack frame
  const rootFrame=data.stack[0]||{nodes:[],edges:[]};
  const igNodes=structuredClone(rootFrame.nodes||[]);
  const igEdges=structuredClone(rootFrame.edges||[]);

  // Detect boundary ports: inputs are ports with no incoming edge, outputs have no outgoing edge
  const allInputPorts=new Set();
  const allOutputPorts=new Set();
  const connectedInputs=new Set();
  const connectedOutputs=new Set();
  igNodes.forEach(n=>{
    (n.inputs||[]).forEach(p=>allInputPorts.add(p.id));
    (n.outputs||[]).forEach(p=>allOutputPorts.add(p.id));
  });
  igEdges.forEach(e=>{
    connectedInputs.add(e.toPort);
    connectedOutputs.add(e.fromPort);
  });
  // Unconnected input ports on nodes → become the skill's inputs
  const skillInputs=[];
  const skillOutputs=[];
  igNodes.forEach(n=>{
    (n.inputs||[]).forEach(p=>{if(!connectedInputs.has(p.id))skillInputs.push({id:uid('p'),name:p.name||'In',type:p.type||'Any'});});
    (n.outputs||[]).forEach(p=>{if(!connectedOutputs.has(p.id))skillOutputs.push({id:uid('p'),name:p.name||'Out',type:p.type||'Any'});});
  });

  const newSk={
    id:uid('sk'),label:pName.toUpperCase(),color:'cyan',glyph:'⬒',shape:'default',
    category:'Pipelines',desc:'Imported pipeline: '+pName,tags:['pipeline'],
    isBuiltin:false,rawContent:'',deps:[],_ts:Date.now(),
    internalGraph:{nodes:igNodes,edges:igEdges},
    hasIn:skillInputs.length>0,hasOut:skillOutputs.length>0,fields:[],
    defaultInputs:skillInputs,defaultOutputs:skillOutputs,
  };

  // Check for new or updated skills before adding
  const candidates=_buildSkillImportCandidates(data.skills);
  if(candidates.length){
    await _showSkillPickerModal(candidates,_candidatesMessage(candidates));
  }

  addSkill(newSk);
  renderLib();
  placeNodeAt(newSk.id,sceneX,sceneY);
}

// Skill picker modal — shows skills with checkboxes, imports selected ones
function _showSkillPickerModal(skillList,message){
  return new Promise(resolve=>{
    const overlay=document.createElement('div');
    overlay.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;display:flex;align-items:center;justify-content:center';
    const box=document.createElement('div');
    box.style.cssText='background:var(--panel);border:1px solid var(--brd);border-radius:10px;padding:24px;width:460px;max-width:calc(100vw - 32px);max-height:80vh;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 32px rgba(0,0,0,.4)';
    const title=document.createElement('div');
    title.style.cssText='font-family:var(--mono);font-size:11px;font-weight:700;color:var(--acc);letter-spacing:.08em';
    title.textContent='IMPORT SKILLS';
    const desc=document.createElement('div');
    desc.style.cssText='font-size:12px;color:var(--dhi);line-height:1.5';
    desc.textContent=message||'Select skills to import:';
    const list=document.createElement('div');
    list.style.cssText='display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:280px;padding-right:4px';
    const checks=[];
    skillList.forEach(sk=>{
      const row=document.createElement('label');
      row.style.cssText='display:flex;align-items:flex-start;gap:10px;padding:8px 10px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;cursor:pointer';
      const cb=document.createElement('input');cb.type='checkbox';cb.checked=true;cb.style.cssText='margin-top:2px;accent-color:var(--acc);flex-shrink:0;width:14px;height:14px';
      const info=document.createElement('div');info.style.cssText='display:flex;flex-direction:column;gap:2px;min-width:0;flex:1';
      const labelRow=document.createElement('div');labelRow.style.cssText='display:flex;align-items:center;gap:8px;min-width:0';
      const lbl=document.createElement('div');lbl.style.cssText='font-family:var(--mono);font-size:10px;font-weight:700;color:var(--dhi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0';lbl.textContent=sk.label||sk.id;
      labelRow.appendChild(lbl);
      if(sk._status){
        const chip=document.createElement('span');
        const isNew=sk._status==='new';
        chip.style.cssText='font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.08em;padding:1px 5px;border-radius:3px;flex-shrink:0;border:1px solid '+(isNew?'var(--grn)':'var(--acc)')+';color:'+(isNew?'var(--grn)':'var(--acc)')+';background:transparent';
        chip.textContent=isNew?'NEW':'UPDATE';
        labelRow.appendChild(chip);
      }
      const ddesc=document.createElement('div');ddesc.style.cssText='font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis';ddesc.textContent=sk.desc||'No description';
      info.appendChild(labelRow);info.appendChild(ddesc);
      row.appendChild(cb);row.appendChild(info);
      list.appendChild(row);
      checks.push({cb,sk});
    });
    const btnRow=document.createElement('div');btnRow.style.cssText='display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--brd);padding-top:12px';
    const selAllBtn=document.createElement('button');selAllBtn.className='mbtn';selAllBtn.textContent='Deselect All';selAllBtn.style.cssText='font-size:10px';
    const skipBtn=document.createElement('button');skipBtn.className='mbtn';skipBtn.textContent='Skip All';skipBtn.style.cssText='font-size:10px';
    const importBtn=document.createElement('button');importBtn.className='mbtn pri';importBtn.textContent='Import Selected';importBtn.style.cssText='font-size:10px';
    selAllBtn.addEventListener('click',()=>{
      const allChecked=checks.every(c=>c.cb.checked);
      checks.forEach(c=>c.cb.checked=!allChecked);
      selAllBtn.textContent=allChecked?'Select All':'Deselect All';
    });
    skipBtn.addEventListener('click',()=>{overlay.remove();resolve([]);});
    importBtn.addEventListener('click',()=>{
      const toImport=checks.filter(c=>c.cb.checked).map(c=>c.sk);
      toImport.forEach(sk=>{
        delete sk._status;
        sk.isBuiltin=false;
        upsertSkill(sk);
      });
      if(toImport.length){renderLib();}
      overlay.remove();resolve(toImport);
    });
    btnRow.appendChild(selAllBtn);btnRow.appendChild(skipBtn);btnRow.appendChild(importBtn);
    box.appendChild(title);box.appendChild(desc);box.appendChild(list);box.appendChild(btnRow);
    overlay.appendChild(box);document.body.appendChild(overlay);
    overlay.addEventListener('pointerdown',e=>{if(e.target===overlay){overlay.remove();resolve([]);}});
  });
}

// ── Unified file drop routing ──
async function _handleFileDrop(files,target,dropClientX,dropClientY){
  if(!files||!files.length)return;
  const isCanvas=target==='canvas';
  const isLibrary=target==='library';
  if(!isCanvas&&!isLibrary)return;
  const leftPanel=document.getElementById('left');

  const t=frame().tx;
  const rect=wrap.getBoundingClientRect();
  const sceneX=isCanvas?snap((dropClientX-rect.left-t.x)/t.s):snap((scene.offsetWidth/2-t.x)/t.s);
  const sceneY=isCanvas?snap((dropClientY-rect.top-t.y)/t.s):snap((scene.offsetHeight/2-t.y)/t.s);

  for(let i=0;i<files.length;i++){
    const f=files[i];
    const text=await f.text().catch(()=>null);
    const ftype=_detectFileType(f.name,text);

    if(ftype==='pipeline'){
      try{
        const data=JSON.parse(text);
        if(!data.stack||!Array.isArray(data.stack))throw new Error('Invalid pipeline');
        _showDropBanner(wrap,'Pipeline: '+(data.name||f.name),'type-pipeline');
        const choice=await _showPipelineChoiceModal(data,f.name,sceneX,sceneY);
        if(choice==='tab'){
          const p={id:uid('pl'),name:data.name||f.name.replace(/\.ppln$|\.pipeline\.json$|\.json$/,''),
                   stack:data.stack,saved:true};
          hideEmptyState();pipelines.push(p);
          await _checkAndImportBundledSkills(data,()=>{switchPipeline(p.id);savePipelines();});
        }else if(choice==='node'){
          pushHistory();
          await _addPipelineAsNode(data,f.name,sceneX+i*CONFIG.IMPORT_NODE_OFFSET,sceneY+i*CONFIG.IMPORT_NODE_OFFSET);
          markPipelineDirty(activePipelineId);
        }
      }catch(e){console.warn('Pipeline import failed:',f.name,e);}

    }else if(ftype==='library'){
      try{
        const arr=JSON.parse(text);
        if(!Array.isArray(arr))throw new Error('Expected array');
        const missing=arr.filter(sk=>sk.id&&sk.label&&!skills.find(s=>s.id===sk.id));
        _showDropBanner(isCanvas?wrap:leftPanel,missing.length+' new skill'+(missing.length!==1?'s':''),'type-library');
        if(missing.length){
          await _showSkillPickerModal(missing,'This library contains '+missing.length+' skill'+(missing.length!==1?'s':'')+' not yet in your library.');
        }else{
          // All skills already present — update existing ones silently
          let updated=0;
          arr.forEach(sk=>{
            if(!sk.id||!sk.label)return;
            if(!getSk(sk.id))return; // defensive — skip if id not in library
            sk.isBuiltin=false;
            upsertSkill(sk);
            updated++;
          });
          if(updated)renderLib();
          _showDropBanner(isCanvas?wrap:leftPanel,'Library up to date ('+updated+' updated)','type-library');
        }
      }catch(e){console.warn('Library import failed:',f.name,e);}

    }else if(ftype==='zip'){
      try{
        const arrayBuf=await f.arrayBuffer();
        const zipEntries=await _parseZip(arrayBuf);
        if(zipEntries.length){
          if(isCanvas){
            pushHistory();
            await _importZipAsGraph(zipEntries,f.name,sceneX+i*CONFIG.IMPORT_NODE_OFFSET*4,sceneY);
            _showDropBanner(wrap,'Skill archive imported','type-skill');
          }else{
            // Library drop: import the skill but don't place a node — read first entry as text
            const firstText=zipEntries.find(e=>!e.name.endsWith('/'));
            if(firstText){
              const dec=new TextDecoder();
              _importTextAsSkill(dec.decode(firstText.data),f.name,0,0,false);
            }
            _showDropBanner(leftPanel,'Skill added to library','type-skill');
          }
        }
      }catch(e){
        // Fallback: try as text
        if(text){
          if(isCanvas){pushHistory();_importTextAsSkill(text,f.name,sceneX+i*CONFIG.IMPORT_NODE_OFFSET,sceneY+i*CONFIG.IMPORT_NODE_OFFSET);}
          else{_importTextAsSkill(text,f.name,0,0,false);}
        }
      }

    }else{
      // skill — .md, .txt, single-skill .json
      if(!text)continue;
      _showDropBanner(isCanvas?wrap:leftPanel,'Skill: '+f.name,'type-skill');
      if(isCanvas){
        pushHistory();
        _importTextAsSkill(text,f.name,sceneX+i*CONFIG.IMPORT_NODE_OFFSET,sceneY+i*CONFIG.IMPORT_NODE_OFFSET);
      }else{
        // Library only: add skill, don't place node on canvas
        _importTextAsSkill(text,f.name,0,0,false);
      }
    }
  }

  renderLib();renderEdges();
  if(isCanvas)markPipelineDirty(activePipelineId);
}

// ── Minimal ZIP parser (no dependencies) ──
// Reads from the Central Directory (reliable) instead of local headers (can have 0-size descriptors)
async function _parseZip(buf){
  const u8=new Uint8Array(buf);
  const view=new DataView(buf);
  const entries=[];

  // Find the End of Central Directory record (scan backwards)
  let eocdOffset=-1;
  for(let i=buf.byteLength-22;i>=0;i--){
    if(view.getUint32(i,true)===0x06054b50){eocdOffset=i;break;}
  }
  if(eocdOffset<0)return []; // not a valid zip

  const cdEntries=view.getUint16(eocdOffset+10,true);
  const cdOffset=view.getUint32(eocdOffset+16,true);

  // Walk the Central Directory
  let offset=cdOffset;
  for(let i=0;i<cdEntries;i++){
    if(offset+46>buf.byteLength)break;
    const sig=view.getUint32(offset,true);
    if(sig!==0x02014b50)break; // not a central dir entry
    const method=view.getUint16(offset+10,true);
    const compSize=view.getUint32(offset+20,true);
    const uncompSize=view.getUint32(offset+24,true);
    const nameLen=view.getUint16(offset+28,true);
    const extraLen=view.getUint16(offset+30,true);
    const commentLen=view.getUint16(offset+32,true);
    const localHeaderOffset=view.getUint32(offset+42,true);
    const name=new TextDecoder().decode(u8.slice(offset+46,offset+46+nameLen));
    offset+=46+nameLen+extraLen+commentLen;

    // Skip directories
    if(name.endsWith('/'))continue;

    // Read data from local file header
    const lNameLen=view.getUint16(localHeaderOffset+26,true);
    const lExtraLen=view.getUint16(localHeaderOffset+28,true);
    const dataStart=localHeaderOffset+30+lNameLen+lExtraLen;
    const rawData=u8.slice(dataStart,dataStart+compSize);

    if(method===0){
      entries.push({name,data:rawData,text:null});
    }else if(method===8){
      // Deflate — use DecompressionStream
      try{
        const ds=new DecompressionStream('deflate-raw');
        const writer=ds.writable.getWriter();
        writer.write(rawData);writer.close();
        const reader=ds.readable.getReader();
        const chunks=[];
        while(true){const{done,value}=await reader.read();if(done)break;chunks.push(value);}
        const total=chunks.reduce((s,c)=>s+c.length,0);
        const result=new Uint8Array(total);
        let pos=0;chunks.forEach(c=>{result.set(c,pos);pos+=c.length;});
        entries.push({name,data:result,text:null});
      }catch(e){
        entries.push({name,data:rawData,text:null,error:'decompress failed'});
      }
    }else{
      entries.push({name,data:rawData,text:null,error:'unsupported method '+method});
    }
  }

  // Decode text for text-like files
  const textExts=/\.(md|txt|json|js|ts|py|sh|yaml|yml|css|html|xml|toml|cfg|ini|env|sql|rb|go|rs|c|cpp|h|java|kt|swift|r)$/i;
  for(const e of entries){
    if(!e.error&&textExts.test(e.name)){
      try{e.text=new TextDecoder().decode(e.data);}catch(ex){}
    }
  }
  return entries.filter(e=>!e.error);
}

// ── Import a zip as a connected graph of primitives ──
async function _importZipAsGraph(entries,zipName,startX,startY){
  const COL_W=CONFIG.ZIP_GRAPH_COL_W,ROW_H=CONFIG.ZIP_GRAPH_ROW_H;
  const baseName=zipName.replace(/\.(zip|skill)$/i,'').replace(/[-_]/g,' ');

  // Classify files into primitive types
  const EXT_MAP={
    // Code
    py:'code',js:'code',ts:'code',sh:'code',bash:'code',sql:'code',
    rb:'code',go:'code',rs:'code',c:'code',cpp:'code',java:'code',kt:'code',swift:'code',
    // Context (reference docs, configs)
    json:'context',yaml:'context',yml:'context',toml:'context',cfg:'context',ini:'context',env:'context',xml:'context',
    // Text / Content
    md:'compute',txt:'text',html:'text',css:'code',
  };
  const LANG_MAP={
    py:'Python',js:'JavaScript',ts:'TypeScript',sh:'Bash',bash:'Bash',sql:'SQL',
    rb:'Ruby',go:'Go',rs:'Rust',c:'C',cpp:'C++',java:'Java',kt:'Kotlin',swift:'Swift',
    css:'CSS',html:'HTML',json:'JSON',yaml:'YAML',yml:'YAML',xml:'XML',
  };

  // Sort entries: SKILL.md first, then by path depth, then alphabetically
  entries.sort((a,b)=>{
    if(a.name.toLowerCase().endsWith('skill.md'))return -1;
    if(b.name.toLowerCase().endsWith('skill.md'))return 1;
    const da=a.name.split('/').length,db=b.name.split('/').length;
    if(da!==db)return da-db;
    // Numbered prefixes sort naturally
    const na=a.name.match(/(\d+)/)?.[1],nb=b.name.match(/(\d+)/)?.[1];
    if(na&&nb)return parseInt(na,10)-parseInt(nb,10);
    return a.name.localeCompare(b.name);
  });

  // Create nodes for each file
  const fileNodes=[]; // {entry, node, skillId, type, sortIdx}
  let col=0,row=0;
  const maxPerCol=Math.max(3,Math.ceil(entries.length/3));

  for(let i=0;i<entries.length;i++){
    const entry=entries[i];
    if(!entry.text&&!entry.data)continue;
    const ext=entry.name.split('.').pop().toLowerCase();
    const shortName=entry.name.split('/').pop().replace(/\.[^.]+$/,'').replace(/[-_]/g,' ');
    const type=EXT_MAP[ext]||'text';
    const lang=LANG_MAP[ext]||'';

    // Determine primitive type and create skill
    let skillId,nodeValues={};
    if(type==='code'){
      skillId='code';
      nodeValues={lang:lang||'JavaScript',code:entry.text||''};
    }else if(type==='context'){
      skillId='context';
      nodeValues={variables:entry.text||'',merge_mode:'Concatenate'};
    }else if(type==='compute'){
      // MD files with SKILL.md name become the main compute node
      const isMain=entry.name.toLowerCase().endsWith('skill.md');
      if(isMain){
        // Create as a custom skill (not a primitive instance)
        const sk={
          id:uid('sk'),label:(baseName||shortName).toUpperCase(),color:'orange',glyph:'⚙',
          shape:'default',category:'Skills',desc:entry.text.slice(0,140),
          tags:[],isBuiltin:false,rawContent:entry.text,deps:[],_ts:Date.now(),
          internalGraph:{nodes:[],edges:[]},hasOut:true,hasIn:true,fields:[],
          defaultInputs:[{id:uid('p'),name:'input',type:'Any'}],
          defaultOutputs:[{id:uid('p'),name:'output',type:'Any'}],
        };
        addSkill(sk);
        const x=startX+col*COL_W,y=startY+row*ROW_H;
        const node={id:uid(),type:null,skillId:sk.id,x,y,values:{},title:baseName||shortName,
          inputs:structuredClone(sk.defaultInputs),
          outputs:structuredClone(sk.defaultOutputs)};
        frame().nodes.push(node);
        const el=buildNode(node);if(el)scene.appendChild(el);
        fileNodes.push({entry,node,type:'main',sortIdx:i});
        row++;if(row>=maxPerCol){row=0;col++;}
        continue;
      }
      // Other .md files become compute nodes
      skillId='compute';
      nodeValues={instructions:entry.text||''};
    }else{
      // Plain text → text_input
      skillId='text_input';
      nodeValues={content:entry.text||''};
    }

    const x=startX+col*COL_W,y=startY+row*ROW_H;
    const sk=getSk(skillId);
    const node={id:uid(),type:null,skillId,x,y,values:nodeValues,title:shortName,
      inputs:sk?structuredClone(sk.defaultInputs||[]):[],
      outputs:sk?structuredClone(sk.defaultOutputs||[]):[]};
    frame().nodes.push(node);
    const el=buildNode(node);if(el)scene.appendChild(el);
    fileNodes.push({entry,node,type,sortIdx:i});
    row++;if(row>=maxPerCol){row=0;col++;}
  }

  if(!fileNodes.length)return;

  // ── Infer connections ──
  // Strategy 1: import/require/source references between files
  const nodeByFile={}; // filename → node
  fileNodes.forEach(fn=>{
    const short=fn.entry.name.split('/').pop();
    const noExt=short.replace(/\.[^.]+$/,'');
    nodeByFile[short]=fn.node;
    nodeByFile[noExt]=fn.node;
    nodeByFile[fn.entry.name]=fn.node;
  });

  const importPatterns=[
    /(?:import|from)\s+['"](\.\/)?([^'"]+)['"]/g,        // Python/JS import
    /require\s*\(\s*['"](\.\/)?([^'"]+)['"]\s*\)/g,      // Node require
    /source\s+['"](\.\/)?([^'"]+)['"]/g,                  // Bash source
    /(?:load|include)\s+['"](\.\/)?([^'"]+)['"]/g,        // Generic
  ];

  for(const fn of fileNodes){
    if(!fn.entry.text)continue;
    for(const pat of importPatterns){
      pat.lastIndex=0;
      let m;
      while((m=pat.exec(fn.entry.text))!==null){
        const ref=m[2];
        const target=nodeByFile[ref]||nodeByFile[ref.split('/').pop()]||nodeByFile[ref.replace(/\.[^.]+$/,'')];
        if(target&&target.id!==fn.node.id){
          // target → fn.node (dependency flows into the importer)
          const fromPort=target.outputs?.[0]?.id;
          const toPort=fn.node.inputs?.[0]?.id;
          if(fromPort&&toPort){
            frame().edges.push({id:uid('e'),from:target.id,to:fn.node.id,fromPort,toPort});
          }
        }
      }
    }
  }

  // Strategy 2: sequential connection for numbered files (01_xxx, 02_xxx)
  const numbered=fileNodes.filter(fn=>/^\d+/.test(fn.entry.name.split('/').pop()));
  numbered.sort((a,b)=>{
    const na=parseInt(a.entry.name.split('/').pop().match(/^(\d+)/)[1],10);
    const nb=parseInt(b.entry.name.split('/').pop().match(/^(\d+)/)[1],10);
    return na-nb;
  });
  for(let i=1;i<numbered.length;i++){
    const prev=numbered[i-1].node,curr=numbered[i].node;
    const fromPort=prev.outputs?.[0]?.id;
    const toPort=curr.inputs?.[0]?.id;
    if(fromPort&&toPort){
      // Check edge doesn't already exist
      if(!frame().edges.some(e=>e.from===prev.id&&e.to===curr.id)){
        frame().edges.push({id:uid('e'),from:prev.id,to:curr.id,fromPort,toPort});
      }
    }
  }

  // Strategy 3: context/reference files feed into the main SKILL.md node
  const mainNode=fileNodes.find(fn=>fn.type==='main')?.node;
  if(mainNode){
    for(const fn of fileNodes){
      if(fn.type==='main')continue;
      if(fn.entry.name.toLowerCase().includes('reference')||fn.entry.name.toLowerCase().includes('config')||fn.type==='context'){
        const fromPort=fn.node.outputs?.[0]?.id;
        const toPort=mainNode.inputs?.[0]?.id;
        if(fromPort&&toPort&&!frame().edges.some(e=>e.from===fn.node.id&&e.to===mainNode.id)){
          frame().edges.push({id:uid('e'),from:fn.node.id,to:mainNode.id,fromPort,toPort});
        }
      }
    }
  }

  renderEdges();
}

function copySelNodes(){
  const ids=selNodes.size?selNodes:ctxNode?new Set([ctxNode.id]):new Set();
  if(!ids.size)return;
  const nodes=getNodes().filter(n=>ids.has(n.id));
  const edges=getEdges().filter(e=>ids.has(e.from)&&ids.has(e.to));
  nodeClipboard=structuredClone({nodes,edges});
  flashBtn('btn-save-pipeline', '⎘ Copied '+nodes.length+' node'+(nodes.length!==1?'s':''), '💾 Save Pipeline');
}

function pasteNodes(){
  if(!nodeClipboard||!nodeClipboard.nodes.length)return;
  pushHistory();
  const OFFSET=60;
  const idMap={};   // oldNodeId -> newNodeId
  const portMap={}; // oldPortId -> newPortId — see duplicateSelNodes for rationale
  const newIds=[];

  nodeClipboard.nodes.forEach(orig=>{
    const newId=uid();
    idMap[orig.id]=newId;
    const copy=structuredClone(orig);
    copy.id=newId;
    copy.x=snap(orig.x+OFFSET);
    copy.y=snap(orig.y+OFFSET);
    copy.inputs =(copy.inputs ||[]).map(p=>{const np=uid('p');portMap[p.id]=np;return{...p,id:np};});
    copy.outputs=(copy.outputs||[]).map(p=>{const np=uid('p');portMap[p.id]=np;return{...p,id:np};});
    copy.isStart=false;
    frame().nodes.push(copy);
    const el=buildNode(copy);if(el)scene.appendChild(el);
    newIds.push(newId);
  });

  // Re-wire internal edges — remap port IDs through portMap so multi-port
  // nodes (Context, Router) keep their port-specific wiring.
  nodeClipboard.edges.forEach(e=>{
    if(idMap[e.from]&&idMap[e.to]){
      frame().edges.push({id:uid('e'),from:idMap[e.from],to:idMap[e.to],
        fromPort:portMap[e.fromPort]||e.fromPort,
        toPort:  portMap[e.toPort]  ||e.toPort});
    }
  });

  // Select the pasted nodes
  selNodes.clear();
  newIds.forEach(id=>selNodes.add(id));
  selNode=newIds[newIds.length-1]||null;
  applySelStyle(selNode);
  requestAnimationFrame(()=>renderEdges());
  markPipelineDirty(activePipelineId);
  updateTopbar();
}

document.getElementById('ctx-start').addEventListener('click',()=>{
  if(!ctxNode)return;
  // Only one start node at a time
  getNodes().forEach(n=>{n.isStart=false;rebuildNode(n);});
  ctxNode.isStart=true;rebuildNode(ctxNode);applySelStyle(selNode);closeCtxMenu();
});
document.getElementById('ctx-unstart').addEventListener('click',()=>{
  if(!ctxNode)return;
  ctxNode.isStart=false;rebuildNode(ctxNode);applySelStyle(selNode);closeCtxMenu();
});
document.getElementById('ctx-open-graph').addEventListener('click',()=>{
  if(!ctxNode)return;
  const sk=nodeSk(ctxNode);
  const targetSkId=sk?.id||ctxNode.skillId;
  if(sk&&!sk.isBuiltin&&targetSkId!==frame().skillId)pushGraph(targetSkId);
  closeCtxMenu();
});
document.getElementById('ctx-save-as-skill').addEventListener('click',()=>{
  if(!ctxNode)return;
  saveNodeAsSkill(ctxNode.id);
  closeCtxMenu();
});
document.getElementById('ctx-merge').addEventListener('click',()=>{
  // Pointer-events:none on .disabled means this only fires when actually enabled.
  // Multi-select → batch dialog. Single-select → existing branch overlay.
  // Capture ctxNode BEFORE closeCtxMenu() nulls it (matches the pattern other
  // ctx-* handlers use of closing the menu after the action, not before).
  const node=ctxNode;
  closeCtxMenu();
  if(selNodes.size>1){
    openBatchMergeDialog([...selNodes]);
    return;
  }
  if(!node)return;
  const sk=nodeSk(node);if(!sk)return;
  inspDraft=nodeRawContent(node,sk);
  inspCurrentId=sk.id;
  openBranchOverlay(sk);
});
document.getElementById('ctx-copy').addEventListener('click',()=>{
  if(!ctxNode)return;
  // Keep multi-selection; only narrow if ctxNode not part of it
  if(selNodes.size<=1||!selNodes.has(ctxNode.id)){
    selNodes.clear();selNodes.add(ctxNode.id);selNode=ctxNode.id;
  }
  copySelNodes();closeCtxMenu();
});
document.getElementById('ctx-paste').addEventListener('click',()=>{
  pasteNodes();closeCtxMenu();
});
document.getElementById('ctx-duplicate').addEventListener('click',()=>{
  if(!ctxNode)return;
  // In single-select or if ctxNode isn't in selection, narrow to ctxNode
  if(selNodes.size<=1||!selNodes.has(ctxNode.id)){
    selNodes.clear();selNodes.add(ctxNode.id);selNode=ctxNode.id;
  }
  duplicateSelNodes();closeCtxMenu();
});
document.getElementById('ctx-download-content').addEventListener('click',()=>{
  if(!ctxNode)return;
  _downloadNodeContent(ctxNode);
  closeCtxMenu();
});
document.getElementById('ctx-download-skill').addEventListener('click',()=>{
  if(!ctxNode)return;
  const sk=nodeSk(ctxNode);if(!sk)return;
  // Capture anchor rect via _showDownloadMenu BEFORE closing the ctx menu so positioning is correct.
  _showDownloadMenu(sk,document.getElementById('ctx-download-skill'));
  closeCtxMenu();
});
document.getElementById('ctx-delete').addEventListener('click',()=>{
  if(!ctxNode)return;
  // Keep multi-selection; only narrow if ctxNode not part of it
  if(!selNodes.has(ctxNode.id)){selNodes.clear();selNodes.add(ctxNode.id);}
  selNode=ctxNode.id;
  deleteSelNode();closeCtxMenu();
});

// ═══════════════════════════════════════════════════════════
// CREDENTIAL VAULT — AES-GCM encryption via Web Crypto API
// Master password never stored — only ciphertext + salt + IV
// ═══════════════════════════════════════════════════════════
const CryptoManager = (() => {
  const STORAGE_KEY = 'pb_vault_v1';
  const b64   = buf => btoa(String.fromCharCode(...buf));
  const unb64 = str => Uint8Array.from(atob(str), c => c.charCodeAt(0));

  async function deriveKey(password, salt) {
    const enc = new TextEncoder();
    const keyMaterial = await crypto.subtle.importKey(
      'raw', enc.encode(password), 'PBKDF2', false, ['deriveKey']
    );
    return crypto.subtle.deriveKey(
      { name: 'PBKDF2', salt, iterations: 100000, hash: 'SHA-256' },
      keyMaterial, { name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt']
    );
  }

  async function encrypt(key, data) {
    const iv = crypto.getRandomValues(new Uint8Array(12));
    const ct = await crypto.subtle.encrypt(
      { name: 'AES-GCM', iv }, key,
      new TextEncoder().encode(JSON.stringify(data))
    );
    return { iv: b64(iv), data: b64(new Uint8Array(ct)) };
  }

  async function decrypt(key, payload) {
    const pt = await crypto.subtle.decrypt(
      { name: 'AES-GCM', iv: unb64(payload.iv) }, key, unb64(payload.data)
    );
    return JSON.parse(new TextDecoder().decode(pt));
  }

  return {
    key:   null,   // CryptoKey in memory, cleared on lock
    creds: [],     // [{id, name, type, value}] — decrypted in memory only
    _idleTimer: null, // v48.13 — handle to setTimeout for idle relock

    exists() {
      const s = localStorage.getItem(STORAGE_KEY);
      return !!(s && JSON.parse(s).data);
    },

    lock() {
      this.key   = null;
      this.creds = [];
      if (this._idleTimer) { clearTimeout(this._idleTimer); this._idleTimer = null; }
    },

    // v48.13 — call after every unlock and on user activity. Re-arms the idle timer
    // so an unattended unlocked vault auto-relocks after CONFIG.VAULT_IDLE_RELOCK_MS.
    // Activity-driven extension means active users never get surprised by a lock.
    touchIdle() {
      if (!this.key) return;
      if (this._idleTimer) clearTimeout(this._idleTimer);
      const ms = (typeof CONFIG !== 'undefined' && CONFIG.VAULT_IDLE_RELOCK_MS) || 0;
      if (!ms) return;
      this._idleTimer = setTimeout(() => {
        this.lock();
        if (typeof renderVault === 'function') renderVault();
        if (typeof refreshRunKeys === 'function') { refreshRunKeys(); refreshRunModels(); }
        // Lightweight banner via existing toast pattern if available, else console.
        const t = document.getElementById('toast');
        if (t) {
          t.textContent = '🔒 Vault auto-locked after idle timeout';
          t.style.opacity = '1';
          setTimeout(() => { t.style.opacity = '0'; }, 3000);
        }
      }, ms);
    },

    async save() {
      if (!this.key) return;
      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
      const enc = await encrypt(this.key, this.creds);
      stored.iv = enc.iv; stored.data = enc.data;
      localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
    },

    deriveKey, encrypt, decrypt, b64, unb64, STORAGE_KEY,
  };
})();

// v48.13 — global activity listeners reset the vault idle timer. Bound once at
// load; no-ops when the vault is locked. Both event types stay capture:false so
// they don't interfere with the canvas/inspector pointer handling.
window.addEventListener('pointerdown', () => CryptoManager.touchIdle(), { passive: true });
window.addEventListener('keydown',     () => CryptoManager.touchIdle(), { passive: true });

// ── Vault UI ────────────────────────────────────────────────

const CRED_TYPES = {
  'github-token': { label: 'GitHub Token',      icon: '⎇', ph: 'ghp_xxxxxxxxxxxx' },
  'gist-id':      { label: 'Gist ID',           icon: '◈', ph: '6a9f8b2c1d3e4f5a...' },
  'api-key':      { label: 'API Key',            icon: '🔑', ph: 'sk-...' },
  'anthropic-key':{ label: 'Anthropic API Key',  icon: '✦', ph: 'sk-ant-api03-...' },
  'openai-key':   { label: 'OpenAI API Key',     icon: '⬡', ph: 'sk-proj-...' },
  'gemini-key':   { label: 'Gemini API Key',     icon: '✧', ph: 'AIza...' },
  'friday-token':{ label: 'Friday Token',        icon: '🤖', ph: 'Friday AI agent auth token' },
  'bluesky-cred': { label: 'Bluesky Credentials',icon: '🦋', ph: 'handle:app-password' },
  'linkedin-token':{ label: 'LinkedIn Token',    icon: '💼', ph: 'AQV...' },
  'twitter-token':{ label: 'Twitter/X Token',    icon: '𝕏', ph: 'Bearer token' },
  'meta-token':   { label: 'Meta/IG Token',      icon: '📷', ph: 'EAA...' },
  'custom':       { label: 'Custom',             icon: '◆', ph: 'value' },
};

// ── Vault UI ────────────────────────────────────────────────
document.getElementById('btn-vault').addEventListener('click', openVault);
document.getElementById('vault-close').addEventListener('click', () => {
  document.getElementById('vault-overlay').classList.remove('open');
});
document.getElementById('vault-overlay').addEventListener('click', e => {
  if (e.target === e.currentTarget) document.getElementById('vault-overlay').classList.remove('open');
});

// Opens the encrypted credential vault modal
function openVault() {
  document.getElementById('vault-overlay').classList.add('open');
  renderVault();
}

// Renders the vault UI: password entry or credential list
function renderVault() {
  const body = document.getElementById('vault-body');
  body.innerHTML = '';

  if (!CryptoManager.key) {
    // Show unlock or setup screen
    if (CryptoManager.exists()) {
      renderUnlockScreen(body);
    } else {
      renderSetupScreen(body);
    }
    return;
  }
  // Unlocked — show credentials
  renderCredsScreen(body);
}

function renderSetupScreen(body) {
  const info = el('div', 'vault-status info', 'No vault found. Set a master password to create one. It will never be stored — you\'ll enter it once per session.');
  body.appendChild(info);
  const pwLbl = el('div', 'vcf-lbl', 'MASTER PASSWORD');
  body.appendChild(pwLbl);
  const pwRow = el('div', 'vault-pwd-row');
  const pwIn  = inp('password', 'Choose a strong password…');
  const pw2In = inp('password', 'Confirm password…');
  pwRow.appendChild(pwIn); body.appendChild(pwRow);
  const pw2Lbl = el('div', 'vcf-lbl', 'CONFIRM'); body.appendChild(pw2Lbl);
  const pw2Row = el('div', 'vault-pwd-row'); pw2Row.appendChild(pw2In); body.appendChild(pw2Row);
  const status = el('div', ''); body.appendChild(status);
  const btnRow = el('div', 'mrow'); body.appendChild(btnRow);
  const createBtn = vBtn('Create Vault', 'pri');
  btnRow.appendChild(createBtn);
  createBtn.addEventListener('click', async () => {
    const p1 = pwIn.value, p2 = pw2In.value;
    if (!p1) return showStatus(status, 'err', 'Enter a password.');
    if (p1 !== p2) return showStatus(status, 'err', 'Passwords don\'t match.');
    const salt = crypto.getRandomValues(new Uint8Array(16));
    CryptoManager.key = await CryptoManager.deriveKey(p1, salt);
    CryptoManager.creds = [];
    const stored = { salt: CryptoManager.b64(salt) };
    localStorage.setItem(CryptoManager.STORAGE_KEY, JSON.stringify(stored));
    await CryptoManager.save();
    CryptoManager.touchIdle(); // v48.13 — start idle relock timer
    showStatus(status, 'ok', 'Vault created!');
    setTimeout(renderVault, 700);
  });
}

function renderUnlockScreen(body) {
  const info = el('div', 'vault-status info', 'Enter your master password to unlock the vault for this session.');
  body.appendChild(info);
  const lbl = el('div', 'vcf-lbl', 'MASTER PASSWORD'); body.appendChild(lbl);
  const row = el('div', 'vault-pwd-row');
  const pwIn = inp('password', 'Master password…');
  row.appendChild(pwIn); body.appendChild(row);
  const status = el('div', ''); body.appendChild(status);
  const btnRow = el('div', 'mrow'); body.appendChild(btnRow);
  const unlockBtn = vBtn('Unlock', 'pri');
  const resetBtn  = vBtn('Reset Vault', 'ghost');
  btnRow.appendChild(resetBtn); btnRow.appendChild(unlockBtn);

  const tryUnlock = async () => {
    if (!pwIn.value) return;
    try {
      const stored = JSON.parse(localStorage.getItem(CryptoManager.STORAGE_KEY));
      const salt   = CryptoManager.unb64(stored.salt);
      const key    = await CryptoManager.deriveKey(pwIn.value, salt);
      CryptoManager.creds = await CryptoManager.decrypt(key, stored);
      CryptoManager.key   = key;
      CryptoManager.touchIdle(); // v48.13 — start idle relock timer
      renderVault();
      // Refresh run drawer keys/models immediately after unlock
      refreshRunProviders();refreshRunKeys();refreshRunModels();
    } catch {
      showStatus(status, 'err', 'Wrong password.');
      pwIn.value = '';
    }
  };
  unlockBtn.addEventListener('click', tryUnlock);
  pwIn.addEventListener('keydown', e => { if (e.key === 'Enter') tryUnlock(); });
  resetBtn.addEventListener('click', () => {
    if (!confirm('This deletes all stored credentials. Continue?')) return;
    localStorage.removeItem(CryptoManager.STORAGE_KEY);
    CryptoManager.lock(); renderVault();
  });
}

function renderCredsScreen(body) {
  // Status bar
  const bar = el('div', 'vault-status ok', `🔓 Vault unlocked — ${CryptoManager.creds.length} credential${CryptoManager.creds.length !== 1 ? 's' : ''} stored`);
  body.appendChild(bar);

  // Credential list
  const list = el('div', 'vault-cred-list'); body.appendChild(list);
  if (!CryptoManager.creds.length) {
    list.appendChild(el('div', 'vault-status info', 'No credentials yet. Add one below.'));
  }
  CryptoManager.creds.forEach(cred => list.appendChild(renderCredItem(cred)));

  // Add new credential form
  body.appendChild(el('div', 'vcf-lbl', 'ADD CREDENTIAL'));
  const addSec = el('div', 'gh-section'); body.appendChild(addSec);
  const nameIn = inp('text',  'Name (e.g. "My GitHub Token")');
  const typeSel = document.createElement('select');
  typeSel.className = 'gh-cred-sel';
  typeSel.style.cssText = 'width:100%;margin:4px 0';
  Object.entries(CRED_TYPES).forEach(([k, v]) => {
    const o = document.createElement('option'); o.value = k; o.textContent = `${v.icon} ${v.label}`; typeSel.appendChild(o);
  });
  const valIn  = inp('password', CRED_TYPES['github-token'].ph);
  const revBtn = vBtn('Show', 'ghost'); revBtn.style.cssText = 'flex-shrink:0;padding:3px 10px;font-size:8px';
  revBtn.addEventListener('click', () => { valIn.type = valIn.type === 'password' ? 'text' : 'password'; revBtn.textContent = valIn.type === 'password' ? 'Show' : 'Hide'; });
  typeSel.addEventListener('change', () => { valIn.placeholder = CRED_TYPES[typeSel.value]?.ph || ''; });
  addSec.appendChild(nameIn); addSec.appendChild(typeSel);
  const vRow = el('div', 'vcf-secret'); vRow.appendChild(valIn); vRow.appendChild(revBtn); addSec.appendChild(vRow);
  const addStatus = el('div', ''); body.appendChild(addStatus);
  const addRow = el('div', 'mrow'); body.appendChild(addRow);
  const lockBtn = vBtn('🔒 Lock Vault', 'ghost');
  const addBtn  = vBtn('Add Credential', 'pri');
  addRow.appendChild(lockBtn); addRow.appendChild(addBtn);
  lockBtn.addEventListener('click', () => { CryptoManager.lock(); renderVault(); updateGhBtnState(); });
  addBtn.addEventListener('click', async () => {
    const name = nameIn.value.trim(), val = valIn.value.trim();
    if (!name) return showStatus(addStatus, 'err', 'Enter a name.');
    if (!val)  return showStatus(addStatus, 'err', 'Enter a value.');
    CryptoManager.creds.push({ id: uid('vc'), name, type: typeSel.value, value: val });
    await CryptoManager.save();
    nameIn.value = ''; valIn.value = '';
    showStatus(addStatus, 'ok', 'Credential saved.');
    setTimeout(renderVault, 600);
  });
}

function renderCredItem(cred) {
  const wrap = el('div', 'vault-cred');
  const head = el('div', 'vault-cred-head');
  const info = CRED_TYPES[cred.type] || CRED_TYPES.custom;
  head.innerHTML = `<span class="vault-cred-icon">${info.icon}</span>
    <span class="vault-cred-name">${esc(cred.name)}</span>
    <span class="vault-cred-type">${info.label}</span>`;
  const acts = el('div', 'vault-cred-actions');
  const editBtn = el('button', 'vca', 'Edit');
  const delBtn  = el('button', 'vca del', 'Delete');
  acts.appendChild(editBtn); acts.appendChild(delBtn);
  head.appendChild(acts); wrap.appendChild(head);

  // Expandable edit body
  const body = el('div', 'vault-cred-body');
  const nameLbl = el('div', 'vcf-lbl', 'NAME'); body.appendChild(nameLbl);
  const nameIn  = inp('text', 'Name', cred.name); body.appendChild(nameIn);
  const valLbl  = el('div', 'vcf-lbl', 'VALUE'); body.appendChild(valLbl);
  const vRow = el('div', 'vcf-secret');
  const valIn  = inp('password', info.ph, '••••••••');
  const revBtn = vBtn('Show', 'ghost'); revBtn.style.cssText = 'flex-shrink:0;padding:2px 8px;font-size:8px';
  revBtn.addEventListener('click', () => {
    if (valIn.dataset.revealed !== '1') { valIn.value = cred.value; valIn.dataset.revealed = '1'; }
    valIn.type = valIn.type === 'password' ? 'text' : 'password';
    revBtn.textContent = valIn.type === 'password' ? 'Show' : 'Hide';
  });
  vRow.appendChild(valIn); vRow.appendChild(revBtn); body.appendChild(vRow);
  const saveStatus = el('div', ''); body.appendChild(saveStatus);
  const saveRow = el('div', 'mrow'); body.appendChild(saveRow);
  const saveBtn = vBtn('Save', 'pri');
  saveRow.appendChild(saveBtn);
  saveBtn.addEventListener('click', async () => {
    const newName = nameIn.value.trim();
    const newVal  = valIn.dataset.revealed === '1' ? valIn.value.trim() : cred.value;
    if (!newName) return showStatus(saveStatus, 'err', 'Name required.');
    cred.name = newName; if (newVal) cred.value = newVal;
    await CryptoManager.save();
    showStatus(saveStatus, 'ok', 'Saved.'); setTimeout(renderVault, 600);
  });
  wrap.appendChild(body);

  head.addEventListener('click', e => {
    if (e.target.closest('.vault-cred-actions')) return;
    body.classList.toggle('open');
  });
  editBtn.addEventListener('click', e => { e.stopPropagation(); body.classList.toggle('open'); });
  delBtn.addEventListener('click', async e => {
    e.stopPropagation();
    if (!confirm(`Delete "${cred.name}"?`)) return;
    CryptoManager.creds = CryptoManager.creds.filter(c => c.id !== cred.id);
    await CryptoManager.save(); renderVault();
  });
  return wrap;
}

// ── Vault DOM helpers ────────────────────────────────────────
function el(tag, cls='', text='') {
  const e = document.createElement(tag);
  if (cls)  e.className = cls;
  if (text) e.textContent = text;
  return e;
}
function inp(type, ph='', val='') {
  const i = document.createElement('input');
  i.type = type; i.placeholder = ph; if (val) i.value = val; return i;
}
function vBtn(text, cls='') {
  const b = document.createElement('button');
  b.className = 'vbtn ' + cls; b.textContent = text; return b;
}
function showStatus(el, cls, msg) {
  el.className = 'vault-status ' + cls; el.textContent = msg;
}
function esc(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }


// ═══════════════════════════════════════════════════════════
// ── Gist sync state ──────────────────────────────────────
let _lastGistSync=0;
try{_lastGistSync=parseInt(localStorage.getItem('pb_last_gist_sync')||'0',10);}catch(e){}
let _gistAutoSync=false;
try{_gistAutoSync=localStorage.getItem('pb_gist_autosync')==='1';}catch(e){}
let _gistSyncScope='skills'; // 'skills' | 'all'
try{_gistSyncScope=localStorage.getItem('pb_gist_scope')||'skills';}catch(e){}

// Auto-sync with Gist on autosave (if enabled)
async function _autoGistSync(){
  if(!_gistAutoSync)return;
  // Find credentials
  const tokens=CryptoManager.creds.filter(c=>c.type==='github-token');
  const gists=CryptoManager.creds.filter(c=>c.type==='gist-id');
  if(!tokens.length||!gists.length)return;
  const token=tokens[0].value,gistId=gists[0].value;
  if(!token||!gistId)return;
  // Fine-grained tokens (github_pat_*) aren't supported by the Gist API path used here.
  // Surface this in the autosave status rather than silently skipping — hidden rules are bloat.
  if(token.startsWith('github_pat_')){_updateAutoSaveStatus('gist: fine-grained token not supported');return;}
  try{
    const files={'pipeline-skills.json':{content:JSON.stringify(skills.filter(s=>!s.isBuiltin),null,2)}};
    if(_gistSyncScope==='all'){
      const ap=activePipeline();if(ap)ap.stack=canvasStack;
      const plData=pipelines.map(p=>{const{fileHandle,...rest}=p;return rest;});
      files['pipeline-pipelines.json']={content:JSON.stringify(plData,null,2)};
    }
    await fetch('https://api.github.com/gists/'+gistId,{
      method:'PATCH',
      headers:{Authorization:'token '+token,Accept:'application/vnd.github+json','Content-Type':'application/json'},
      body:JSON.stringify({files})
    });
    _lastGistSync=Date.now();try{localStorage.setItem('pb_last_gist_sync',String(_lastGistSync));}catch(e){}
  }catch(e){console.warn('Auto Gist sync failed:',e);}
}

// GITHUB GIST SYNC
// ═══════════════════════════════════════════════════════════
document.getElementById('btn-github').addEventListener('click', openGitHub);
document.getElementById('gh-close').addEventListener('click', () => document.getElementById('gh-overlay').classList.remove('open'));
document.getElementById('gh-overlay').addEventListener('click', e => { if (e.target === e.currentTarget) document.getElementById('gh-overlay').classList.remove('open'); });

function updateGhBtnState() {
  const btn = document.getElementById('btn-github');
  const unlocked = !!CryptoManager.key;
  btn.style.color = unlocked ? 'var(--cyn)' : '';
  btn.style.borderColor = unlocked ? 'rgba(34,211,238,.4)' : '';
}

function openGitHub() {
  document.getElementById('gh-overlay').classList.add('open');
  renderGitHub();
}

// Renders the GitHub Gist sync panel inside the vault modal
function renderGitHub() {
  const body = document.getElementById('gh-body'); body.innerHTML = '';

  // Vault lock state banner
  if (!CryptoManager.key) {
    const warn = el('div', 'vault-status info', '🔑 Vault is locked. Open the Vault first to use stored credentials, or enter them manually below.');
    body.appendChild(warn);
  }

  // Token section
  const tokenSec = el('div', 'gh-section'); body.appendChild(tokenSec);
  tokenSec.appendChild(el('div', 'gh-section-title', 'GITHUB TOKEN'));
  const tokenNote = el('div', '', 'Personal access token with gist scope. Create one at github.com/settings/tokens.');
  tokenNote.style.cssText = 'font-size:10px;color:var(--dim);line-height:1.6';
  tokenSec.appendChild(tokenNote);

  // Stored token selector
  const storedTokens = CryptoManager.creds.filter(c => c.type === 'github-token');
  let tokenSel = null;
  if (storedTokens.length) {
    tokenSel = document.createElement('select'); tokenSel.className = 'gh-cred-sel'; tokenSel.style.width = '100%';
    tokenSel.innerHTML = '<option value="">— select stored token —</option>';
    storedTokens.forEach(t => { const o = document.createElement('option'); o.value = t.id; o.textContent = t.name; tokenSel.appendChild(o); });
    tokenSec.appendChild(tokenSel);
  }
  const tokenRow = el('div', 'gh-row');
  tokenRow.appendChild(Object.assign(el('div', 'vcf-lbl', 'OR ENTER MANUALLY'), {style:'margin:0'}));
  tokenSec.appendChild(tokenRow);
  const tokenIn  = inp('password', 'ghp_xxxxxxxxxxxx');
  const tokenRev = vBtn('Show', 'ghost'); tokenRev.style.cssText = 'flex-shrink:0;font-size:8px;padding:3px 10px';
  tokenRev.addEventListener('click', () => { tokenIn.type = tokenIn.type === 'password' ? 'text' : 'password'; tokenRev.textContent = tokenIn.type==='password'?'Show':'Hide'; });
  const tRow = el('div', 'vcf-secret'); tRow.appendChild(tokenIn); tRow.appendChild(tokenRev); tokenSec.appendChild(tRow);

  // Save token to vault shortcut
  if (CryptoManager.key) {
    const saveLink = document.createElement('button');
    saveLink.style.cssText = 'font-family:var(--mono);font-size:8px;color:var(--grn);background:none;border:none;cursor:pointer;text-align:left;padding:2px 0';
    saveLink.textContent = '+ Save this token to vault';
    saveLink.addEventListener('click', async () => {
      const v = tokenIn.value.trim(); if (!v) return;
      const name = prompt('Name for this credential:', 'GitHub Token') || 'GitHub Token';
      CryptoManager.creds.push({ id: uid('vc'), name, type: 'github-token', value: v });
      await CryptoManager.save(); renderGitHub();
    });
    tokenSec.appendChild(saveLink);
  }

  // Gist ID section
  const gistSec = el('div', 'gh-section'); body.appendChild(gistSec);
  gistSec.appendChild(el('div', 'gh-section-title', 'GIST ID'));
  const gistNote = el('div','','The ID of your skills Gist. Found in the Gist URL: gist.github.com/{user}/{ID}');
  gistNote.style.cssText = 'font-size:10px;color:var(--dim);line-height:1.6';
  gistSec.appendChild(gistNote);

  const storedGists = CryptoManager.creds.filter(c => c.type === 'gist-id');
  let gistSel = null;
  if (storedGists.length) {
    gistSel = document.createElement('select'); gistSel.className = 'gh-cred-sel'; gistSel.style.width = '100%';
    gistSel.innerHTML = '<option value="">— select stored Gist ID —</option>';
    storedGists.forEach(g => { const o = document.createElement('option'); o.value = g.id; o.textContent = g.name; gistSel.appendChild(o); });
    gistSec.appendChild(gistSel);
  }
  const gistInRow = el('div', 'gh-row');
  gistInRow.appendChild(Object.assign(el('div', 'vcf-lbl', 'OR ENTER MANUALLY'), {style:'margin:0'}));
  gistSec.appendChild(gistInRow);
  const gistIn = inp('text', 'e.g. 6a9f8b2c1d3e4f5a7890abcd12345678');
  gistSec.appendChild(gistIn);

  if (CryptoManager.key) {
    const saveGistLink = document.createElement('button');
    saveGistLink.style.cssText = 'font-family:var(--mono);font-size:8px;color:var(--grn);background:none;border:none;cursor:pointer;text-align:left;padding:2px 0';
    saveGistLink.textContent = '+ Save this Gist ID to vault';
    saveGistLink.addEventListener('click', async () => {
      const v = gistIn.value.trim(); if (!v) return;
      const name = prompt('Name for this Gist:', 'GUIness Skills') || 'GUIness Skills';
      CryptoManager.creds.push({ id: uid('vc'), name, type: 'gist-id', value: v });
      await CryptoManager.save(); renderGitHub();
    });
    gistSec.appendChild(saveGistLink);
  }

  // Action section
  const actSec = el('div', 'gh-section'); body.appendChild(actSec);
  actSec.appendChild(el('div', 'gh-section-title', 'SYNC'));

  // Last sync info
  const lastSyncInfo=el('div','','');
  lastSyncInfo.style.cssText='font-family:var(--mono);font-size:8px;color:var(--dim);padding:2px 0';
  lastSyncInfo.textContent=_lastGistSync?'Last sync: '+new Date(_lastGistSync).toLocaleString():'Never synced';
  actSec.appendChild(lastSyncInfo);

  const ghStatus = el('div', 'gh-status info', 'Ready — pull to load from Gist, push to save.');
  actSec.appendChild(ghStatus);

  // Scope + Auto-sync toggles — inline row
  const toggleRow=el('div','gh-row');toggleRow.style.cssText='gap:12px;align-items:center;margin:6px 0;flex-wrap:wrap';

  // Sync scope
  const scopeGrp=el('div','');scopeGrp.style.cssText='display:flex;align-items:center;gap:6px';
  const scopeLbl=el('div','','');scopeLbl.style.cssText='font-family:var(--mono);font-size:10px;color:var(--dhi);letter-spacing:.08em';scopeLbl.textContent='SCOPE';
  const scopeBtns=el('div','');scopeBtns.style.cssText='display:flex;gap:1px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:2px';
  ['Skills','All'].forEach(mode=>{
    const b=document.createElement('button');b.textContent=mode;
    b.style.cssText='font-family:var(--mono);font-size:11px;padding:4px 12px;border-radius:4px;border:none;cursor:pointer;'+(_gistSyncScope===mode.toLowerCase()?'background:var(--alo);color:var(--acc)':'background:transparent;color:var(--dim)');
    b.addEventListener('click',()=>{_gistSyncScope=mode.toLowerCase();try{localStorage.setItem('pb_gist_scope',_gistSyncScope);}catch(e){}renderGitHub();});
    scopeBtns.appendChild(b);
  });
  scopeGrp.appendChild(scopeLbl);scopeGrp.appendChild(scopeBtns);
  toggleRow.appendChild(scopeGrp);

  // Auto-sync On/Off toggle (same style as scope)
  const autoGrp=el('div','');autoGrp.style.cssText='display:flex;align-items:center;gap:6px';
  const autoLbl=el('div','','');autoLbl.style.cssText='font-family:var(--mono);font-size:10px;color:var(--dhi);letter-spacing:.08em';autoLbl.textContent='AUTO-SYNC';
  const autoBtns=el('div','');autoBtns.style.cssText='display:flex;gap:1px;background:var(--surf);border:1px solid var(--brd);border-radius:6px;padding:2px';
  ['On','Off'].forEach(mode=>{
    const isActive=mode==='On'?_gistAutoSync:!_gistAutoSync;
    const b=document.createElement('button');b.textContent=mode;
    b.style.cssText='font-family:var(--mono);font-size:11px;padding:4px 12px;border-radius:4px;border:none;cursor:pointer;'+(isActive?'background:var(--alo);color:var(--acc)':'background:transparent;color:var(--dim)');
    b.addEventListener('click',()=>{_gistAutoSync=mode==='On';try{localStorage.setItem('pb_gist_autosync',_gistAutoSync?'1':'0');}catch(e){}renderGitHub();});
    autoBtns.appendChild(b);
  });
  autoGrp.appendChild(autoLbl);autoGrp.appendChild(autoBtns);
  toggleRow.appendChild(autoGrp);

  actSec.appendChild(toggleRow);

  const actRow = el('div', 'gh-row'); actRow.style.cssText='justify-content:flex-end;gap:8px;margin-top:6px'; actSec.appendChild(actRow);
  const createBtn = el('button', 'ghbtn', '+ Create Gist');
  const pullBtn = el('button', 'ghbtn pull', '↓ Pull');
  const pushBtn = el('button', 'ghbtn push', '↑ Push');
  actRow.appendChild(createBtn); actRow.appendChild(pullBtn); actRow.appendChild(pushBtn);

  // Helper: resolve token and gist ID from selects or manual inputs
  function resolveToken() {
    if (tokenSel?.value) return CryptoManager.creds.find(c => c.id === tokenSel.value)?.value || '';
    return tokenIn.value.trim();
  }
  function resolveGist() {
    if (gistSel?.value) return CryptoManager.creds.find(c => c.id === gistSel.value)?.value || '';
    return gistIn.value.trim();
  }

  function _gistHeaders(token){return{Authorization:`token ${token}`,Accept:'application/vnd.github+json','Content-Type':'application/json'};}
  function _checkToken(token){if(token.startsWith('github_pat_'))throw new Error("Fine-grained tokens don't support the Gist API. Use a classic token (ghp_…) with gist scope.");}

  // ── Create new Gist ──
  createBtn.addEventListener('click', async () => {
    const token = resolveToken();
    if (!token) return showStatus(ghStatus, 'err', 'Enter or select a GitHub token first.');
    try{_checkToken(token);}catch(e){return showStatus(ghStatus,'err',e.message);}
    createBtn.disabled=pullBtn.disabled=pushBtn.disabled=true;
    showStatus(ghStatus, 'info', 'Creating new Gist…');
    try {
      const files={'pipeline-skills.json':{content:JSON.stringify(skills.filter(s=>!s.isBuiltin),null,2)}};
      if(_gistSyncScope==='all'){
        const ap=activePipeline();if(ap)ap.stack=canvasStack;
        const plData=pipelines.map(p=>{const{fileHandle,...rest}=p;return rest;});
        files['pipeline-pipelines.json']={content:JSON.stringify(plData,null,2)};
      }
      const res=await fetch('https://api.github.com/gists',{method:'POST',
        headers:_gistHeaders(token),
        body:JSON.stringify({description:'GUIness — Skills & Pipelines',public:false,files})
      });
      if(!res.ok)throw new Error('HTTP '+res.status);
      const data=await res.json();
      gistIn.value=data.id;
      _lastGistSync=Date.now();try{localStorage.setItem('pb_last_gist_sync',String(_lastGistSync));}catch(e){}
      showStatus(ghStatus,'ok','✓ Created Gist: '+data.id.slice(0,12)+'… — save this ID to your vault.');
    }catch(e){showStatus(ghStatus,'err',e.message);}
    createBtn.disabled=pullBtn.disabled=pushBtn.disabled=false;
  });

  // ── Pull ──
  pullBtn.addEventListener('click', async () => {
    const token = resolveToken(), gistId = resolveGist();
    if (!token) return showStatus(ghStatus, 'err', 'Enter or select a GitHub token.');
    if (!gistId) return showStatus(ghStatus, 'err', 'Enter or select a Gist ID.');
    try{_checkToken(token);}catch(e){return showStatus(ghStatus,'err',e.message);}
    pullBtn.disabled = pushBtn.disabled = createBtn.disabled = true;
    showStatus(ghStatus, 'info', 'Pulling from Gist…');
    try {
      const res = await fetch(`https://api.github.com/gists/${gistId}`, {
        headers: _gistHeaders(token)
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        const msg = body.message || `HTTP ${res.status}`;
        if (res.status === 401) throw new Error('401 Bad credentials — check your token');
        if (res.status === 403) throw new Error('403 Forbidden — token needs "gist" scope');
        if (res.status === 404) throw new Error('404 Gist not found — check the ID');
        throw new Error(`${res.status}: ${msg}`);
      }
      const data = await res.json();
      // Pull skills
      const skillFile = data.files['pipeline-skills.json'];
      let added=0,updated=0,conflicts=0;
      if(skillFile){
        const raw = skillFile.truncated ? await (await fetch(skillFile.raw_url)).text() : skillFile.content;
        const pulled = JSON.parse(raw);
        if (Array.isArray(pulled)){
          pulled.forEach(sk => {
            const local = getSk(sk.id);
            if (local) {
              // Conflict detection: compare timestamps
              const localTs=local._ts||0;
              const remoteTs=sk._ts||0;
              if(remoteTs>=localTs){
                mutateSkill(sk.id, s => Object.assign(s, sk));
                updated++;
              } else { conflicts++; } // local is newer, skip
            }
            else { addSkill(sk); added++; }
          });
        }
      }
      // Pull pipelines if scope=all
      let plMsg='';
      if(_gistSyncScope==='all'){
        const plFile=data.files['pipeline-pipelines.json'];
        if(plFile){
          const plRaw=plFile.truncated?await(await fetch(plFile.raw_url)).text():plFile.content;
          const plPulled=JSON.parse(plRaw);
          if(Array.isArray(plPulled)){
            let plAdded=0;
            plPulled.forEach(rp=>{
              if(!pipelines.find(p=>p.id===rp.id)){
                pipelines.push({...rp,saved:true});plAdded++;
              }
            });
            if(plAdded){savePipelines();renderPipelineTabs();plMsg=`, ${plAdded} pipeline${plAdded!==1?'s':''} added`;}
          }
        }
      }
      renderLib();updateTopbar();
      _lastGistSync=Date.now();try{localStorage.setItem('pb_last_gist_sync',String(_lastGistSync));}catch(e){}
      lastSyncInfo.textContent='Last sync: '+new Date(_lastGistSync).toLocaleString();
      let msg=`✓ Pulled — ${added} added, ${updated} updated`;
      if(conflicts)msg+=`, ${conflicts} skipped (local newer)`;
      showStatus(ghStatus, 'ok', msg+plMsg+'.');
    } catch(e) {
      showStatus(ghStatus, 'err', e.message);
    }
    pullBtn.disabled = pushBtn.disabled = createBtn.disabled = false;
  });

  // ── Push ──
  pushBtn.addEventListener('click', async () => {
    const token = resolveToken(), gistId = resolveGist();
    if (!token) return showStatus(ghStatus, 'err', 'Enter or select a GitHub token.');
    if (!gistId) return showStatus(ghStatus, 'err', 'Enter or select a Gist ID.');
    try{_checkToken(token);}catch(e){return showStatus(ghStatus,'err',e.message);}
    pullBtn.disabled = pushBtn.disabled = createBtn.disabled = true;
    showStatus(ghStatus, 'info', 'Pushing to Gist…');
    try {
      const files={'pipeline-skills.json':{content:JSON.stringify(skills.filter(s=>!s.isBuiltin),null,2)}};
      if(_gistSyncScope==='all'){
        const ap=activePipeline();if(ap)ap.stack=canvasStack;
        const plData=pipelines.map(p=>{const{fileHandle,...rest}=p;return rest;});
        files['pipeline-pipelines.json']={content:JSON.stringify(plData,null,2)};
      }
      const res = await fetch(`https://api.github.com/gists/${gistId}`, {
        method: 'PATCH',
        headers: _gistHeaders(token),
        body: JSON.stringify({ files })
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        const msg = body.message || `HTTP ${res.status}`;
        if (res.status === 401) throw new Error('401 Bad credentials — check your token');
        if (res.status === 403) throw new Error('403 Forbidden — token needs "gist" scope');
        if (res.status === 404) throw new Error('404 Gist not found — check the ID');
        throw new Error(`${res.status}: ${msg}`);
      }
      _lastGistSync=Date.now();try{localStorage.setItem('pb_last_gist_sync',String(_lastGistSync));}catch(e){}
      lastSyncInfo.textContent='Last sync: '+new Date(_lastGistSync).toLocaleString();
      const n=skills.filter(s=>!s.isBuiltin).length;
      let msg=`✓ Pushed ${n} skill${n!==1?'s':''}`;
      if(_gistSyncScope==='all')msg+=` + ${pipelines.length} pipeline${pipelines.length!==1?'s':''}`;
      showStatus(ghStatus, 'ok', msg+' to Gist.');
    } catch(e) {
      showStatus(ghStatus, 'err', e.message);
    }
    pullBtn.disabled = pushBtn.disabled = createBtn.disabled = false;
  });
}

// ═══════════════════════════════════════════════════════════
// MINIMAP
// ═══════════════════════════════════════════════════════════
(function(){
  const map=document.getElementById('minimap');
  const toggle=document.getElementById('minimap-toggle');
  const canvas=document.getElementById('minimap-canvas');
  const vpRect=document.getElementById('minimap-viewport');
  const ctx=canvas.getContext('2d');
  let collapsed=localStorage.getItem('pb_minimap_collapsed')==='1';
  if(collapsed)map.classList.add('collapsed');
  toggle.textContent=collapsed?'▸ MAP':'▾ MAP';

  toggle.addEventListener('click',e=>{
    e.stopPropagation();
    collapsed=!collapsed;
    map.classList.toggle('collapsed',collapsed);
    toggle.textContent=collapsed?'▸ MAP':'▾ MAP';
    localStorage.setItem('pb_minimap_collapsed',collapsed?'1':'0');
    if(!collapsed){
      map.addEventListener('transitionend',function te(ev){
        if(ev.propertyName!=='height'){return;}
        map.removeEventListener('transitionend',te);renderMinimap();
      });
    }
  });

  function renderMinimap(){
    if(collapsed||!canvas.offsetWidth)return;
    const nodes=getNodes();
    const edges=getEdges();
    const W=canvas.offsetWidth;
    const H=canvas.offsetHeight;
    canvas.width=W*2;canvas.height=H*2;
    ctx.setTransform(2,0,0,2,0,0);
    ctx.clearRect(0,0,W,H);

    if(!nodes.length){
      ctx.fillStyle='#353d4d';ctx.font='8px monospace';ctx.textAlign='center';
      ctx.fillText('No nodes',W/2,H/2);
      vpRect.style.display='none';return;
    }

    // Compute bounds of all nodes
    let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
    nodes.forEach(n=>{
      const w=n._w||214,h=80;
      if(n.x<minX)minX=n.x;if(n.y<minY)minY=n.y;
      if(n.x+w>maxX)maxX=n.x+w;if(n.y+h>maxY)maxY=n.y+h;
    });
    const PAD=CONFIG.MINIMAP_PAD;
    minX-=PAD;minY-=PAD;maxX+=PAD;maxY+=PAD;
    const worldW=maxX-minX||1,worldH=maxY-minY||1;
    const scale=Math.min(W/worldW,H/worldH);
    const offX=(W-worldW*scale)/2,offY=(H-worldH*scale)/2;
    const tx=n=>offX+(n-minX)*scale;
    const ty=n=>offY+(n-minY)*scale;

    // Draw edges
    ctx.strokeStyle='rgba(255,255,255,.15)';ctx.lineWidth=0.5;
    edges.forEach(e=>{
      const from=nodes.find(n=>n.id===e.from);
      const to=nodes.find(n=>n.id===e.to);
      if(!from||!to)return;
      const fw=from._w||214,tw=to._w||214;
      ctx.beginPath();
      ctx.moveTo(tx(from.x+fw/2),ty(from.y+40));
      ctx.lineTo(tx(to.x+tw/2),ty(to.y+40));
      ctx.stroke();
    });

    // Draw nodes as colored rectangles
    nodes.forEach(n=>{
      const sk=nodeSk(n);if(!sk)return;
      const color=cx(n.color||sk.color);
      const w=(n._w||214)*scale;const h=Math.max(8,40*scale);
      const x=tx(n.x),y=ty(n.y);
      ctx.fillStyle=color+'66';
      ctx.strokeStyle=color;ctx.lineWidth=0.5;
      ctx.beginPath();ctx.roundRect(x,y,Math.max(4,w),h,2);ctx.fill();ctx.stroke();
      // Highlight selected
      if(selNodes.has(n.id)||selNode===n.id){
        ctx.strokeStyle=color;ctx.lineWidth=1.5;
        ctx.beginPath();ctx.roundRect(x-1,y-1,Math.max(4,w)+2,h+2,3);ctx.stroke();
      }
    });

    // Draw viewport rectangle
    const t=frame().tx;
    const sw=scene.offsetWidth,sh=scene.offsetHeight;
    const vx1=(-t.x)/t.s,vy1=(-t.y)/t.s;
    const vx2=vx1+sw/t.s,vy2=vy1+sh/t.s;
    vpRect.style.display='';
    vpRect.style.left=(offX+(vx1-minX)*scale)+'px';
    vpRect.style.top=(20+offY+(vy1-minY)*scale)+'px';
    vpRect.style.width=((vx2-vx1)*scale)+'px';
    vpRect.style.height=((vy2-vy1)*scale)+'px';

    // Store transform for click-to-navigate
    canvas._mmMinX=minX;canvas._mmMinY=minY;canvas._mmScale=scale;
    canvas._mmOffX=offX;canvas._mmOffY=offY;
  }

  // Click on minimap to navigate
  canvas.addEventListener('click',e=>{
    const rect=canvas.getBoundingClientRect();
    const mx=(e.clientX-rect.left)*(canvas.width/rect.width)/2;
    const my=(e.clientY-rect.top)*(canvas.height/rect.height)/2;
    const s=canvas._mmScale||1;
    const worldX=canvas._mmMinX+(mx-canvas._mmOffX)/s;
    const worldY=canvas._mmMinY+(my-canvas._mmOffY)/s;
    const t=frame().tx;
    t.x=-worldX*t.s+scene.offsetWidth/2;
    t.y=-worldY*t.s+scene.offsetHeight/2;
    applyTx();renderEdges();renderMinimap();
  });

  // Drag on minimap to pan
  canvas.addEventListener('pointerdown',e=>{
    if(e.button!==0)return;
    e.stopPropagation();
    const move=ev=>{
      const rect=canvas.getBoundingClientRect();
      const mx=(ev.clientX-rect.left)*(canvas.width/rect.width)/2;
      const my=(ev.clientY-rect.top)*(canvas.height/rect.height)/2;
      const s=canvas._mmScale||1;
      const worldX=canvas._mmMinX+(mx-canvas._mmOffX)/s;
      const worldY=canvas._mmMinY+(my-canvas._mmOffY)/s;
      const t=frame().tx;
      t.x=-worldX*t.s+scene.offsetWidth/2;
      t.y=-worldY*t.s+scene.offsetHeight/2;
      applyTx();renderEdges();renderMinimap();
    };
    const up=()=>{document.removeEventListener('pointermove',move);document.removeEventListener('pointerup',up);};
    document.addEventListener('pointermove',move);
    document.addEventListener('pointerup',up);
  });

  // Re-render minimap when canvas changes
  _postRenderHooks.push(()=>requestAnimationFrame(renderMinimap));

  // Initial render
  requestAnimationFrame(renderMinimap);
})();

// ── Run section toggle ────────────────────────────────────
document.getElementById('run-section-toggle').addEventListener('click',()=>{
  const body=document.getElementById('run-section-body');
  const toggle=document.getElementById('run-section-toggle');
  const isCollapsed=body.classList.toggle('collapsed');
  toggle.innerHTML=(isCollapsed?'\u25b8':'\u25be')+' LLM CONFIGURATION & RESPONSE';
});

// ═══════════════════════════════════════════════════════════
// SOCIAL POSTING (lazy-loaded on first toggle)
// ═══════════════════════════════════════════════════════════
let _socialLoaded=false;
let _socialOpen=false;
document.getElementById('social-toggle').addEventListener('click',()=>{
  _socialOpen=!_socialOpen;
  const panel=document.getElementById('social-panel');
  const toggle=document.getElementById('social-toggle');
  const runBody=document.getElementById('run-section-body');
  const runToggle=document.getElementById('run-section-toggle');
  if(_socialOpen){
    if(!_socialLoaded){_socialLoaded=true;_initSocialPosting();}
    panel.classList.add('open');
    toggle.innerHTML='\u25be POST TO SOCIAL';
    runBody.classList.add('collapsed');
    runToggle.innerHTML='\u25b8 LLM CONFIGURATION & RESPONSE';
    if(typeof _buildSocialUI==='function')_buildSocialUI();
    const raw=document.getElementById('out-resp-body')?.dataset?.rawResponse||'';
    if(raw){const editor=document.getElementById('social-editor');if(editor)editor.innerHTML=renderMdResponse(raw);}
  }else{
    panel.classList.remove('open');
    toggle.innerHTML='\u25b8 POST TO SOCIAL';
    runBody.classList.remove('collapsed');
    runToggle.innerHTML='\u25be LLM CONFIGURATION & RESPONSE';
  }
});
function _initSocialPosting(){
(function(){
  const PLATFORMS={
    bluesky:{name:'Bluesky',icon:'🦋',charLimit:300,images:4,credType:'bluesky-cred',
      post:async(text,images,cred)=>{
        const [handle,appPw]=cred.split(':');
        if(!handle||!appPw)throw new Error('Bluesky cred format: handle:app-password');
        // Create session
        const sess=await fetch('https://bsky.social/xrpc/com.atproto.server.createSession',{
          method:'POST',headers:{'Content-Type':'application/json'},
          body:JSON.stringify({identifier:handle,password:appPw})
        });
        if(!sess.ok)throw new Error('Bluesky auth failed: '+(await sess.json()).message);
        const {did,accessJwt}=await sess.json();
        const headers={Authorization:'Bearer '+accessJwt,'Content-Type':'application/json'};
        // Upload images
        const blobs=[];
        for(const img of images){
          const up=await fetch('https://bsky.social/xrpc/com.atproto.repo.uploadBlob',{
            method:'POST',headers:{Authorization:'Bearer '+accessJwt,'Content-Type':img.type},body:img.data
          });
          if(!up.ok)throw new Error('Image upload failed');
          const d=await up.json();blobs.push({alt:img.name||'',image:d.blob});
        }
        // Create post
        const record={$type:'app.bsky.feed.post',text:text.slice(0,300),createdAt:new Date().toISOString()};
        if(blobs.length)record.embed={$type:'app.bsky.embed.images',images:blobs};
        const res=await fetch('https://bsky.social/xrpc/com.atproto.repo.createRecord',{
          method:'POST',headers,
          body:JSON.stringify({repo:did,collection:'app.bsky.feed.post',record})
        });
        if(!res.ok)throw new Error('Post failed: '+(await res.json()).message);
        return{success:true,url:'https://bsky.app/profile/'+handle};
      }
    },
    linkedin:{name:'LinkedIn',icon:'💼',charLimit:3000,images:1,credType:'linkedin-token',
      post:async(text,images,token)=>{
        // Get user profile
        const me=await fetch('https://api.linkedin.com/v2/userinfo',{headers:{Authorization:'Bearer '+token}});
        if(!me.ok)throw new Error('LinkedIn auth failed — token may be expired');
        const profile=await me.json();
        const authorUrn='urn:li:person:'+profile.sub;
        const body={author:authorUrn,lifecycleState:'PUBLISHED',
          specificContent:{'com.linkedin.ugc.ShareContent':{shareCommentary:{text:text.slice(0,3000)},shareMediaCategory:images.length?'IMAGE':'NONE'}},
          visibility:{code:'ANYONE'}};
        if(images.length){
          // Register upload
          const reg=await fetch('https://api.linkedin.com/v2/assets?action=registerUpload',{
            method:'POST',headers:{Authorization:'Bearer '+token,'Content-Type':'application/json'},
            body:JSON.stringify({registerUploadRequest:{recipes:['urn:li:digitalmediaRecipe:feedshare-image'],owner:authorUrn}})
          });
          if(!reg.ok)throw new Error('Image register failed');
          const regData=await reg.json();
          const uploadUrl=regData.value.uploadMechanism['com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest'].uploadUrl;
          const asset=regData.value.asset;
          // Upload
          const upRes=await fetch(uploadUrl,{method:'PUT',headers:{Authorization:'Bearer '+token},body:images[0].data});
          if(!upRes.ok)throw new Error('Image upload failed');
          body.specificContent['com.linkedin.ugc.ShareContent'].media=[{status:'READY',media:asset}];
        }
        const res=await fetch('https://api.linkedin.com/v2/ugcPosts',{
          method:'POST',headers:{Authorization:'Bearer '+token,'Content-Type':'application/json','X-Restli-Protocol-Version':'2.0.0'},
          body:JSON.stringify(body)
        });
        if(!res.ok){const e=await res.json().catch(()=>({}));throw new Error('Post failed: '+(e.message||res.status));}
        return{success:true,url:'https://linkedin.com'};
      }
    },
    twitter:{name:'Twitter',icon:'𝕏',charLimit:280,images:4,credType:'twitter-token',
      post:async(text,images,token)=>{
        const headers={Authorization:'Bearer '+token,'Content-Type':'application/json'};
        // Note: Twitter v2 API — requires OAuth 2.0 user token with tweet.write scope
        const body={text:text.slice(0,280)};
        // Image upload requires v1.1 media upload — simplified here
        const res=await fetch('https://api.twitter.com/2/tweets',{method:'POST',headers,body:JSON.stringify(body)});
        if(!res.ok){const e=await res.json().catch(()=>({}));throw new Error('Tweet failed: '+(e.detail||e.title||res.status));}
        const d=await res.json();
        return{success:true,url:'https://twitter.com/i/web/status/'+d.data.id};
      }
    },
    instagram:{name:'IG',icon:'📷',charLimit:2200,images:1,credType:'meta-token',
      post:async(text,images,token)=>{
        // Requires Facebook Graph API with instagram_content_publish permission
        // Step 1: get IG business account ID
        const accts=await fetch('https://graph.facebook.com/v19.0/me/accounts?access_token='+token);
        if(!accts.ok)throw new Error('Meta auth failed');
        const pages=await accts.json();
        const page=pages.data?.[0];if(!page)throw new Error('No Facebook Page found');
        const igAcct=await fetch('https://graph.facebook.com/v19.0/'+page.id+'?fields=instagram_business_account&access_token='+token);
        const igData=await igAcct.json();
        const igId=igData.instagram_business_account?.id;
        if(!igId)throw new Error('No Instagram Business account linked');
        if(!images.length)throw new Error('Instagram requires at least one image');
        // IG API requires a publicly accessible image URL — local blobs won't work.
        throw new Error('Instagram API requires a public image URL. Upload your image to a hosting service first, then use the URL.');
      }
    },
  };

  let _selectedPlatforms=new Set();
  let _socialImages=[]; // [{name,type,data:ArrayBuffer,preview:string}]
  let _postPending=false;

  // Expose buildSocialUI for the eager toggle handler
  _buildSocialUI=buildSocialUI;

  function buildSocialUI(){
    buildToolbar();
    buildPlatformChips();
    buildImageDropzone();
    buildActions();
  }

  // ── Rich text toolbar ──────────────────────────────────
  function buildToolbar(){
    const bar=document.getElementById('social-toolbar');bar.innerHTML='';
    const editor=document.getElementById('social-editor');
    const cmds=[
      {label:'B',cmd:'bold',title:'Bold'},
      {label:'I',cmd:'italic',title:'Italic',style:'font-style:italic'},
      {label:'U',cmd:'underline',title:'Underline',style:'text-decoration:underline'},
      {label:'S',cmd:'strikeThrough',title:'Strikethrough',style:'text-decoration:line-through'},
      '|',
      {label:'H1',cmd:'formatBlock',val:'h1',title:'Heading 1'},
      {label:'H2',cmd:'formatBlock',val:'h2',title:'Heading 2'},
      {label:'H3',cmd:'formatBlock',val:'h3',title:'Heading 3'},
      {label:'P',cmd:'formatBlock',val:'p',title:'Paragraph'},
      '|',
      {label:'\u2022',cmd:'insertUnorderedList',title:'Bullet list'},
      {label:'1.',cmd:'insertOrderedList',title:'Numbered list'},
      '|',
      {label:'<svg width="14" height="12" viewBox="0 0 14 12"><line x1="0" y1="2" x2="14" y2="2" stroke="currentColor" stroke-width="1.5"/><line x1="0" y1="6" x2="10" y2="6" stroke="currentColor" stroke-width="1.5"/><line x1="0" y1="10" x2="14" y2="10" stroke="currentColor" stroke-width="1.5"/></svg>',cmd:'justifyLeft',title:'Align left'},
      {label:'<svg width="14" height="12" viewBox="0 0 14 12"><line x1="0" y1="2" x2="14" y2="2" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="6" x2="12" y2="6" stroke="currentColor" stroke-width="1.5"/><line x1="0" y1="10" x2="14" y2="10" stroke="currentColor" stroke-width="1.5"/></svg>',cmd:'justifyCenter',title:'Center'},
      {label:'<svg width="14" height="12" viewBox="0 0 14 12"><line x1="0" y1="2" x2="14" y2="2" stroke="currentColor" stroke-width="1.5"/><line x1="4" y1="6" x2="14" y2="6" stroke="currentColor" stroke-width="1.5"/><line x1="0" y1="10" x2="14" y2="10" stroke="currentColor" stroke-width="1.5"/></svg>',cmd:'justifyRight',title:'Align right'},
      '|',
      {label:'🔗',cmd:'createLink',title:'Insert link'},
      {label:'\u2715',cmd:'removeFormat',title:'Clear formatting'},
    ];

    // Font selector
    const fontSel=document.createElement('select');fontSel.title='Font';
    ['System UI','Arial','Georgia','Courier New','Verdana','Trebuchet MS','Times New Roman'].forEach(f=>{
      const o=document.createElement('option');o.value=f;o.textContent=f;fontSel.appendChild(o);
    });
    fontSel.addEventListener('change',()=>{document.execCommand('fontName',false,fontSel.value);editor.focus();});
    bar.appendChild(fontSel);

    // Font size
    const sizeSel=document.createElement('select');sizeSel.title='Size';
    [{l:'Small',v:'2'},{l:'Normal',v:'3'},{l:'Large',v:'4'},{l:'Huge',v:'5'}].forEach(({l,v})=>{
      const o=document.createElement('option');o.value=v;o.textContent=l;if(v==='3')o.selected=true;sizeSel.appendChild(o);
    });
    sizeSel.addEventListener('change',()=>{document.execCommand('fontSize',false,sizeSel.value);editor.focus();});
    bar.appendChild(sizeSel);

    cmds.forEach(c=>{
      if(c==='|'){const d=document.createElement('div');d.style.cssText='width:1px;height:18px;background:var(--brd);margin:0 2px';bar.appendChild(d);return;}
      const btn=document.createElement('button');
      btn.title=c.title;btn.innerHTML=c.label;
      if(c.style)btn.style.cssText+=c.style;
      btn.addEventListener('click',()=>{
        if(c.cmd==='createLink'){
          const url=prompt('Enter URL:','https://');
          if(url)document.execCommand('createLink',false,url);
        }else if(c.val){
          document.execCommand(c.cmd,false,c.val);
        }else{
          document.execCommand(c.cmd,false,null);
        }
        editor.focus();
      });
      bar.appendChild(btn);
    });

    // Save as HTML button
    const saveBtn=document.createElement('button');saveBtn.title='Save as HTML file';saveBtn.textContent='💾';
    saveBtn.style.marginLeft='auto';
    saveBtn.addEventListener('click',()=>{
      const html='<!DOCTYPE html><html><head><meta charset="utf-8"><title>Social Post</title><style>body{font-family:system-ui;max-width:680px;margin:40px auto;padding:20px;line-height:1.6}</style></head><body>'+editor.innerHTML+'</body></html>';
      const blob=new Blob([html],{type:'text/html'});
      const a=document.createElement('a');a.href=URL.createObjectURL(blob);
      a.download='social-post-'+new Date().toISOString().slice(0,10)+'.html';
      a.click();URL.revokeObjectURL(a.href);
    });
    bar.appendChild(saveBtn);
  }

  // ── Platform chips ─────────────────────────────────────
  function buildPlatformChips(){
    const cont=document.getElementById('social-platforms');cont.innerHTML='';
    Object.entries(PLATFORMS).forEach(([key,plat])=>{
      const hasCred=CryptoManager.creds.some(c=>c.type===plat.credType);
      const chip=document.createElement('div');
      chip.dataset.platform=key;
      chip.className='social-chip'+(hasCred?(_selectedPlatforms.has(key)?' selected':' ready'):' disabled');
      chip.innerHTML=plat.icon+' '+plat.name+' <span class="chip-count">'+plat.charLimit+'</span>';
      if(!hasCred){chip.title='Add a '+plat.name+' credential in the Vault';}
      else{
        chip.title='Click to '+((_selectedPlatforms.has(key)?'deselect':'select')+' '+plat.name);
        chip.addEventListener('click',()=>{
          if(_selectedPlatforms.has(key))_selectedPlatforms.delete(key);
          else _selectedPlatforms.add(key);
          buildPlatformChips();
          updateCharCounts();
        });
      }
      cont.appendChild(chip);
    });
  }

  function updateCharCounts(){
    const editor=document.getElementById('social-editor');
    const text=editor.innerText||'';
    document.querySelectorAll('.social-chip .chip-count').forEach(el=>{
      const chip=el.closest('.social-chip');if(!chip)return;
      const key=chip.dataset.platform;
      if(!key||!PLATFORMS[key])return;
      const limit=PLATFORMS[key].charLimit;
      const remaining=limit-text.length;
      el.textContent=remaining;
      el.style.color=remaining<0?'var(--red)':remaining<50?'#f59e0b':'var(--dim)';
    });
  }

  // Update char counts on editor input
  document.getElementById('social-editor').addEventListener('input',updateCharCounts);

  // ── Image handling ─────────────────────────────────────
  function buildImageDropzone(){
    const dropzone=document.getElementById('social-dropzone');
    const preview=document.getElementById('social-img-preview');

    const fileInput=document.createElement('input');fileInput.type='file';fileInput.accept='image/*';fileInput.multiple=true;fileInput.style.display='none';
    document.body.appendChild(fileInput);

    dropzone.addEventListener('click',()=>fileInput.click());
    dropzone.addEventListener('dragover',e=>{e.preventDefault();dropzone.classList.add('dragover');});
    dropzone.addEventListener('dragleave',()=>dropzone.classList.remove('dragover'));
    dropzone.addEventListener('drop',e=>{e.preventDefault();dropzone.classList.remove('dragover');handleImageFiles(e.dataTransfer.files);});
    fileInput.addEventListener('change',e=>handleImageFiles(e.target.files));

    function handleImageFiles(files){
      Array.from(files).forEach(f=>{
        if(!f.type.startsWith('image/'))return;
        const reader=new FileReader();
        reader.onload=ev=>{
          _socialImages.push({name:f.name,type:f.type,data:ev.target.result,preview:URL.createObjectURL(f)});
          renderImagePreviews();
        };
        reader.readAsArrayBuffer(f);
      });
    }

    function renderImagePreviews(){
      preview.innerHTML='';
      _socialImages.forEach((img,i)=>{
        const wrap=document.createElement('div');wrap.style.cssText='position:relative;display:inline-block';
        const thumb=document.createElement('img');thumb.className='social-img-thumb';thumb.src=img.preview;thumb.title=img.name;
        const rm=document.createElement('div');rm.style.cssText='position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--red);color:#fff;border-radius:50%;font-size:10px;text-align:center;line-height:16px;cursor:pointer';
        rm.textContent='\u00d7';
        rm.addEventListener('click',()=>{URL.revokeObjectURL(_socialImages[i].preview);_socialImages.splice(i,1);renderImagePreviews();});
        wrap.appendChild(thumb);wrap.appendChild(rm);preview.appendChild(wrap);
      });
      dropzone.textContent=_socialImages.length?'+ Add more images':'Drop images here or click to browse';
    }
  }

  // ── Actions (Preview + Post) ───────────────────────────
  function buildActions(){
    const cont=document.getElementById('social-actions');cont.innerHTML='';

    const previewBtn=document.createElement('button');previewBtn.className='mbtn';previewBtn.textContent='👁 Preview';previewBtn.style.fontSize='10px';
    const postBtn=document.createElement('button');postBtn.className='mbtn pri';postBtn.textContent='📤 Post';postBtn.style.fontSize='10px';
    const status=document.createElement('span');status.style.cssText='font-family:var(--mono);font-size:9px;color:var(--dim);flex:1';
    status.id='social-status';

    previewBtn.addEventListener('click',showPreview);
    postBtn.addEventListener('click',confirmAndPost);

    cont.appendChild(previewBtn);cont.appendChild(postBtn);cont.appendChild(status);
  }

  function showPreview(){
    const editor=document.getElementById('social-editor');
    const text=editor.innerText||'';
    if(!_selectedPlatforms.size){setStatus('Select at least one platform');return;}

    // Remove any existing preview
    document.getElementById('social-preview-container')?.remove();

    const container=document.createElement('div');container.id='social-preview-container';
    container.style.cssText='padding:8px 10px;border-top:1px solid var(--brd)';

    _selectedPlatforms.forEach(key=>{
      const plat=PLATFORMS[key];
      const box=document.createElement('div');box.className='social-preview-box';
      const hdr=document.createElement('div');hdr.style.cssText='font-family:var(--mono);font-size:8px;color:var(--acc);margin-bottom:6px;letter-spacing:.08em';
      hdr.textContent=plat.icon+' '+plat.name.toUpperCase()+(text.length>plat.charLimit?' \u2014 \u26a0 OVER LIMIT ('+text.length+'/'+plat.charLimit+')':'  ('+text.length+'/'+plat.charLimit+')');
      if(text.length>plat.charLimit)hdr.style.color='var(--red)';
      const body=document.createElement('div');body.textContent=text.slice(0,plat.charLimit);
      if(text.length>plat.charLimit){
        const trunc=document.createElement('span');trunc.style.color='var(--red)';trunc.textContent='[truncated]';body.appendChild(trunc);
      }
      if(_socialImages.length){
        const imgNote=document.createElement('div');imgNote.style.cssText='font-size:9px;color:var(--dim);margin-top:4px';
        imgNote.textContent='🖼 '+Math.min(_socialImages.length,plat.images)+'/'+plat.images+' images';
        if(_socialImages.length>plat.images)imgNote.style.color='#f59e0b';
        body.appendChild(imgNote);
      }
      box.appendChild(hdr);box.appendChild(body);container.appendChild(box);
    });

    const closeBtn=document.createElement('button');closeBtn.className='mbtn';closeBtn.textContent='Close Preview';closeBtn.style.cssText='font-size:9px;margin-top:6px';
    closeBtn.addEventListener('click',()=>container.remove());
    container.appendChild(closeBtn);

    document.getElementById('social-actions').after(container);
  }

  async function confirmAndPost(){
    const editor=document.getElementById('social-editor');
    const text=editor.innerText||'';
    if(!text.trim()){setStatus('Write something first');return;}
    if(!_selectedPlatforms.size){setStatus('Select at least one platform');return;}
    if(_postPending)return;

    // Build confirmation message
    const names=[..._selectedPlatforms].map(k=>PLATFORMS[k].name).join(', ');
    const overLimit=[..._selectedPlatforms].filter(k=>text.length>PLATFORMS[k].charLimit).map(k=>PLATFORMS[k].name);
    let msg='Post to '+names+'?';
    if(overLimit.length)msg+='\n\n\u26a0 Text exceeds limit for: '+overLimit.join(', ')+'. It will be truncated.';
    if(!confirm(msg))return;

    _postPending=true;
    const postBtn=document.querySelector('#social-actions .pri');
    if(postBtn){postBtn.disabled=true;postBtn.textContent='\u231b Posting...';}

    const results=[];
    for(const key of _selectedPlatforms){
      const plat=PLATFORMS[key];
      const cred=CryptoManager.creds.find(c=>c.type===plat.credType);
      if(!cred){results.push({platform:plat.name,ok:false,err:'No credentials'});continue;}
      setStatus('Posting to '+plat.name+'...');
      try{
        const imgs=_socialImages.slice(0,plat.images);
        const r=await plat.post(text,imgs,cred.value);
        results.push({platform:plat.name,ok:true,url:r.url});
      }catch(e){
        results.push({platform:plat.name,ok:false,err:e.message});
      }
    }

    // Show results
    const summary=results.map(r=>r.ok?'\u2713 '+r.platform:'\u274c '+r.platform+': '+r.err).join('\n');
    setStatus(results.every(r=>r.ok)?'\u2713 All posted!':'Partial — see details');
    showToast('Post Results: '+summary);

    _postPending=false;
    if(postBtn){postBtn.disabled=false;postBtn.textContent='📤 Post';}
  }

  function setStatus(msg){
    const el=document.getElementById('social-status');
    if(el)el.textContent=msg;
  }
})();
} // end _initSocialPosting

// ═══════════════════════════════════════════════════════════
// THEME TOGGLE + TEXT SIZE
// ═══════════════════════════════════════════════════════════
(function(){
  const savedTheme=localStorage.getItem('pb_theme')||'dark';
  const savedSize=parseFloat(localStorage.getItem('pb_size')||'13');

  function applyTheme(theme){
    document.body.classList.toggle('light',theme==='light');
    document.getElementById('btn-theme').textContent=theme==='light'?'🌑':'🌙';
    safeStore('pb_theme',theme);
  }

  let _sizeStyleEl=null;
  function applySize(px){
    const scale=px/13;
    // Inject/update a style block that scales all UI text proportionally
    // We scale font sizes on specific UI containers, NOT the canvas scene
    if(!_sizeStyleEl){
      _sizeStyleEl=document.createElement('style');
      _sizeStyleEl.id='ui-size-style';
      document.head.appendChild(_sizeStyleEl);
    }
    // Scale topbar, left panel, right panel, modals, breadcrumb — but NOT #scene or #canvas-wrap
    _sizeStyleEl.textContent=`
      #topbar,#left,#right,#breadcrumb,#pipeline-tabbar,
      .overlay,.vault-overlay,#ctx-menu,
      #branch-overlay,#confirm-overlay,#batch-merge-overlay,#batch-confirm-overlay{
        font-size:${(13*scale).toFixed(2)}px!important;
      }
      #topbar *,#left *,#right *,#breadcrumb *,
      .overlay *,.vault-overlay *,#ctx-menu *,
      #branch-overlay *,#confirm-overlay *,#batch-merge-overlay *,#batch-confirm-overlay *{
        font-size:inherit;
      }
      #topbar .t-logo{font-size:${(15*scale).toFixed(2)}px!important}
      .tbtn,#add-btn,.ract,.ibar-btn,.vbtn,.dbtn,.bbtn,.mbtn{
        font-size:${(9*scale).toFixed(2)}px!important;
      }
      #lib-search,input,select{font-size:${(11*scale).toFixed(2)}px!important}
      textarea{font-size:${(11*scale).toFixed(2)}px!important}
      .if-name{font-size:${(10*scale).toFixed(2)}px!important}
      .size-lbl:first-child{font-size:${(8*scale).toFixed(2)}px!important}
      .size-lbl:last-child{font-size:${(11*scale).toFixed(2)}px!important}
      .ptab{font-size:${(9*scale).toFixed(2)}px!important}
      .ptab-close{font-size:${(11*scale).toFixed(2)}px!important}
      .ptab-new{font-size:${(16*scale).toFixed(2)}px!important}
      .ptab-open{font-size:${(8*scale).toFixed(2)}px!important}
    `;
    document.getElementById('size-slider').value=px;
    safeStore('pb_size',px);
  }

  applyTheme(savedTheme);
  applySize(savedSize);

  // Theme preset selector
  document.getElementById('theme-preset').addEventListener('change',e=>{
    applyThemePreset(e.target.value);
  });
  // Restore saved preset
  try{
    const savedPreset=localStorage.getItem('pb_theme_preset');
    if(savedPreset&&THEME_PRESETS[savedPreset]){
      document.getElementById('theme-preset').value=savedPreset;
      applyThemePreset(savedPreset);
    }
  }catch(e){}

  document.getElementById('btn-theme').addEventListener('click',()=>{
    applyTheme(document.body.classList.contains('light')?'dark':'light');
  });

  // Show zoom% while dragging; apply only on release
  const _sizeSlider=document.getElementById('size-slider');
  const _zoomLabel=document.createElement('span');
  _zoomLabel.id='zoom-pct';
  _zoomLabel.style.cssText='position:fixed;background:var(--panel);border:1px solid var(--brdhi);border-radius:5px;padding:2px 7px;font-family:var(--mono);font-size:10px;color:var(--acc);pointer-events:none;z-index:9999;display:none;white-space:nowrap';
  document.body.appendChild(_zoomLabel);

  _sizeSlider.addEventListener('input',e=>{
    const pct=Math.round((parseFloat(e.target.value)/13)*100);
    _zoomLabel.textContent=pct+'%';
    _zoomLabel.style.display='block';
    // Position label above the slider thumb
    const rect=_sizeSlider.getBoundingClientRect();
    const ratio=(parseFloat(e.target.value)-parseFloat(_sizeSlider.min))/(parseFloat(_sizeSlider.max)-parseFloat(_sizeSlider.min));
    const thumbX=rect.left+ratio*(rect.width-12)+6;
    _zoomLabel.style.left=(thumbX-_zoomLabel.offsetWidth/2)+'px';
    _zoomLabel.style.top=(rect.top-28)+'px';
  });

  _sizeSlider.addEventListener('change',e=>{
    applySize(parseFloat(e.target.value));
    _zoomLabel.style.display='none';
  });

  _sizeSlider.addEventListener('pointerup',()=>{_zoomLabel.style.display='none';});

  // Snap toggle
  function applySnapUI(){
    const btn=document.getElementById('btn-snap');
    if(snapEnabled){
      btn.style.borderColor='var(--acc)';btn.style.color='var(--acc)';btn.style.background='var(--alo)';
    }else{
      btn.style.borderColor='';btn.style.color='';btn.style.background='';
    }
  }
  applySnapUI();
  document.getElementById('btn-snap').addEventListener('click',()=>{
    snapEnabled=!snapEnabled;
    safeStore('pb_snap',snapEnabled?'1':'0');
    applySnapUI();
  });
})();

// ═══════════════════════════════════════════════════════════
// INIT
// ═══════════════════════════════════════════════════════════
// ── Auto-save folder handle persistence (IndexedDB) ──────────
// FileSystemDirectoryHandle is structured-cloneable, so we stash it in IDB to
// auto-restore the autosave connection across reloads and across new GUIness
// versions dropped into the same folder. Single record, single key.
const _IDB_DB='guiness_handles',_IDB_STORE='dir',_IDB_HANDLE_KEY='autosave';
function _idbOpen(){
  return new Promise((res,rej)=>{
    if(!window.indexedDB){rej(new Error('no idb'));return;}
    const r=indexedDB.open(_IDB_DB,1);
    r.onupgradeneeded=()=>r.result.createObjectStore(_IDB_STORE);
    r.onsuccess=()=>res(r.result);
    r.onerror=()=>rej(r.error);
  });
}
async function _idbGetHandle(){
  try{const db=await _idbOpen();return await new Promise((res,rej)=>{
    const t=db.transaction(_IDB_STORE,'readonly');
    const g=t.objectStore(_IDB_STORE).get(_IDB_HANDLE_KEY);
    g.onsuccess=()=>res(g.result||null);g.onerror=()=>rej(g.error);
  });}catch(e){return null;}
}
async function _idbSetHandle(handle){
  try{const db=await _idbOpen();await new Promise((res,rej)=>{
    const t=db.transaction(_IDB_STORE,'readwrite');
    const p=t.objectStore(_IDB_STORE).put(handle,_IDB_HANDLE_KEY);
    p.onsuccess=()=>res();p.onerror=()=>rej(p.error);
  });}catch(e){}
}

// Restore in-memory state from a snapshot payload (the same shape written by
// _buildAutoSavePayload). Returns true on success. Replaces pipelines and user
// skills (builtins are preserved in place), resets active pipeline, persists
// to localStorage so the next reload is fast, re-renders the canvas + tabs.
function _restoreFromSnapshot(snapshot){
  if(!snapshot||!Array.isArray(snapshot.pipelines))return false;
  // Replace user skills (preserve builtins)
  for(let i=skills.length-1;i>=0;i--){if(!skills[i].isBuiltin)skills.splice(i,1);}
  if(Array.isArray(snapshot.skills)){
    snapshot.skills.forEach(sk=>{
      if(!sk||!sk.id||!sk.label)return;
      sk.isBuiltin=false;
      skills.push(sk);
    });
  }
  _invSkIdx();
  // Replace pipelines
  pipelines.length=0;
  snapshot.pipelines.forEach(p=>{if(p&&p.id)pipelines.push(p);});
  activePipelineId=pipelines.length?pipelines[0].id:null;
  const ap=activePipeline();
  canvasStack=ap?ap.stack:[{nodes:[],edges:[],tx:{x:0,y:0,s:1},label:'Root',skillId:null}];
  // Persist to localStorage so this state is the new local baseline
  savePipelinesSync();persistSkillsSync();
  try{localStorage.setItem('pb_local_ts',snapshot.timestamp||new Date().toISOString());}catch(e){}
  // Re-render
  rebuildCanvas();renderPipelineTabs();renderLib();checkEmptyState();
  return true;
}

// ── Portable workspace export/import ─────────────────────────
// One file = all open pipelines + user skills. Reuses the same snapshot shape
// and restore path as folder autosave, so it works in every browser (no File
// System Access API, no token, no folder).
function exportWorkspace(){
  const snap=_buildAutoSavePayload();
  const blob=new Blob([JSON.stringify(snap,null,2)],{type:'application/json'});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);
  a.download='guiness-workspace-'+new Date().toISOString().slice(0,10)+'.gwsp';
  a.click();URL.revokeObjectURL(a.href);
  const np=snap.pipelines.length, ns=snap.skills.length;
  showToast('Workspace exported · '+np+' pipeline'+(np!==1?'s':'')+', '+ns+' skill'+(ns!==1?'s':''));
}
function importWorkspace(){
  const inp=document.createElement('input');inp.type='file';inp.accept='.gwsp,.json';
  inp.onchange=()=>{
    const f=inp.files&&inp.files[0];if(!f)return;
    const r=new FileReader();
    r.onload=()=>{
      let data;try{data=JSON.parse(r.result);}catch(e){showToast('Could not read that file as a workspace','err');return;}
      if(pipelines.length && !confirm('Importing a workspace replaces your current pipelines and skills. Continue?'))return;
      if(_restoreFromSnapshot(data)){
        const np=Array.isArray(data.pipelines)?data.pipelines.length:0;
        showToast('Workspace restored · '+np+' pipeline'+(np!==1?'s':''));
      }else{
        showToast('That file is not a valid GUIness workspace','err');
      }
    };
    r.readAsText(f);
  };
  inp.click();
}

// Read the snapshot JSON from an attached directory handle. Returns the parsed
// payload, or null if the file doesn't exist / can't be parsed. Permission
// must already be granted by the caller.
async function _readSnapshotFromDir(handle){
  try{
    const f=await handle.getFileHandle('pb-autosave-snapshot.json');
    const file=await f.getFile();
    const text=await file.text();
    return JSON.parse(text);
  }catch(e){return null;}
}

// On startup, try to re-attach to the autosave folder from IDB and, if the
// folder snapshot is newer than localStorage, replace local state with it.
// Runs async after initial render — UI starts with localStorage contents and
// gets swapped in place if (and only if) the folder is the source of truth.
async function _tryRestoreFromAutoSaveFolder(){
  if(!window.showDirectoryPicker)return; // FSA API unavailable
  const handle=await _idbGetHandle();
  if(!handle)return; // first-open, nothing to restore
  // Re-request permission. Browsers may show a permission prompt the first
  // time per session; subsequent loads in the same session are usually silent.
  try{
    let perm=await handle.queryPermission({mode:'readwrite'});
    if(perm!=='granted')perm=await handle.requestPermission({mode:'readwrite'});
    if(perm!=='granted'){_updateAutoSavePath('');return;}
  }catch(e){_updateAutoSavePath('');return;}
  // Permission granted — attach handle and update UI
  _asDirHandle=handle;
  _updateAutoSavePath(handle.name);
  // Compare timestamps and restore if folder is newer
  const snapshot=await _readSnapshotFromDir(handle);
  if(!snapshot)return; // folder is connected but empty — next autosave will populate it
  const folderTs=snapshot.timestamp||'';
  const localTs=(()=>{try{return localStorage.getItem('pb_local_ts')||'';}catch(e){return '';}})();
  if(folderTs&&folderTs>localTs){
    if(_restoreFromSnapshot(snapshot)){
      const when=folderTs.slice(11,16); // HH:MM from ISO
      showToast('Restored from autosave folder · last saved '+when+' UTC');
    }
  }
}

// ── Auto-save (skills + pipelines + optional file system) ────
const AS_KEY='pb_autosave_interval';
let _asInterval=null;
let _lastAutoSave=null;
let _asDirHandle=null; // File System Access directory handle

function _updateAutoSaveStatus(msg){
  const el=document.getElementById('autosave-status');
  if(el)el.textContent=msg||'';
}
function _updateAutoSavePath(name){
  const el=document.getElementById('autosave-path');
  if(!el)return;
  if(name){el.textContent='→ '+name;el.title='Autosaving to: '+name;el.style.color='var(--grn)';}
  else{el.textContent='';el.title='';el.style.color='';}
}

// Build the autosave payload
function _buildAutoSavePayload(){
  const ap=activePipeline();
  if(ap)ap.stack=canvasStack;
  const userSkills=skills.filter(s=>!s.isBuiltin);
  const plData=pipelines.map(p=>{const {fileHandle,...rest}=p;return rest;});
  return {
    version:1,
    timestamp:new Date().toISOString(),
    skills:userSkills,
    pipelines:plData,
  };
}

// Write autosave to file system directory (if set)
async function _writeAutoSaveToDir(){
  if(!_asDirHandle)return;
  try{
    // Verify permission is still granted
    if((await _asDirHandle.queryPermission({mode:'readwrite'}))!=='granted'){
      if((await _asDirHandle.requestPermission({mode:'readwrite'}))!=='granted'){
        _asDirHandle=null;_updateAutoSavePath('');return;
      }
    }
    const payload=_buildAutoSavePayload();

    // Write skills
    const skillsFile=await _asDirHandle.getFileHandle('pb-skills-autosave.json',{create:true});
    const sw=await skillsFile.createWritable();
    await sw.write(JSON.stringify(payload.skills,null,2));await sw.close();

    // Write pipelines
    const plFile=await _asDirHandle.getFileHandle('pb-pipelines-autosave.json',{create:true});
    const pw=await plFile.createWritable();
    await pw.write(JSON.stringify(payload.pipelines,null,2));await pw.close();

    // Write combined snapshot
    const snapFile=await _asDirHandle.getFileHandle('pb-autosave-snapshot.json',{create:true});
    const snw=await snapFile.createWritable();
    await snw.write(JSON.stringify(payload,null,2));await snw.close();

  }catch(e){
    console.warn('Autosave to file failed:',e);
    _updateAutoSaveStatus('file err');
  }
}

function _runAutoSave(){
  // 1. Always sync active pipeline's canvas into its stack
  const ap=activePipeline();
  if(ap)ap.stack=canvasStack;

  // 2. Save ALL pipelines to localStorage (regardless of dirty flag)
  savePipelines();

  // 3. Save skills library
  persistSkills();

  // 4. Mark pipelines as saved + update UI
  let hadDirty=false;
  pipelines.forEach(p=>{if(!p.saved){p.saved=true;hadDirty=true;}});
  if(hadDirty)renderPipelineTabs();

  // 5. Write to file system if directory is set
  if(_asDirHandle)_writeAutoSaveToDir();

  // 6. Auto-sync to Gist if enabled
  if(_gistAutoSync)_autoGistSync();

  // 7. Update timestamp
  _lastAutoSave=new Date();
  try{localStorage.setItem('pb_local_ts',_lastAutoSave.toISOString());}catch(e){}
  const t=_lastAutoSave.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});
  _updateAutoSaveStatus('saved '+t);
}

function setAutoSave(minutes){
  clearInterval(_asInterval);
  _asInterval=null;
  if(minutes>0){
    _asInterval=setInterval(_runAutoSave,minutes*60*1000);
    // Also run once immediately on enable so nothing is stale
    _runAutoSave();
  }else{
    _updateAutoSaveStatus('off');
  }
  try{localStorage.setItem(AS_KEY,String(minutes));}catch(e){}
}

// Folder picker for autosave destination
document.getElementById('autosave-folder-btn').addEventListener('click',async()=>{
  if(!window.showDirectoryPicker){
    showToast('Your browser does not support the File System Access API. Autosave will continue to use localStorage only.','err');
    return;
  }
  try{
    const handle=await window.showDirectoryPicker({id:'pb-autosave',mode:'readwrite',startIn:'documents'});
    _asDirHandle=handle;
    _updateAutoSavePath(handle.name);
    // Persist to IDB so next reload reconnects automatically
    await _idbSetHandle(handle);
    // If the folder already has a snapshot newer than local, restore from it
    const snapshot=await _readSnapshotFromDir(handle);
    if(snapshot&&snapshot.timestamp){
      const localTs=(()=>{try{return localStorage.getItem('pb_local_ts')||'';}catch(e){return '';}})();
      if(snapshot.timestamp>localTs&&_restoreFromSnapshot(snapshot)){
        const when=snapshot.timestamp.slice(11,16);
        showToast('Restored from autosave folder · last saved '+when+' UTC');
        return; // restore writes to folder via savePipelinesSync; no need to run another save
      }
    }
    // Otherwise local is canonical — write it to the folder
    if(_asInterval)_runAutoSave();
    else _writeAutoSaveToDir();
  }catch(e){
    if(e.name==='AbortError')return; // user cancelled
    console.warn('Directory picker error:',e);
  }
});

// Init auto-save from saved preference
(()=>{
  const saved=parseInt(localStorage.getItem(AS_KEY)||'1',10);
  const inp=document.getElementById('autosave-input');
  inp.value=isNaN(saved)?1:Math.max(0,Math.min(60,saved));
  setAutoSave(Number(inp.value));
  inp.addEventListener('change',()=>{
    const v=Math.max(0,Math.min(60,parseInt(inp.value,10)||0));
    inp.value=v;
    setAutoSave(v);
    flashBtn('btn-save-pipeline',v?'⏱ Auto-save: '+v+'min':'⏱ Auto-save: off','💾 Save Pipeline');
  });
  // Dim folder button if File System Access API not available (Firefox/Safari)
  if(!window.showDirectoryPicker){
    const fb=document.getElementById('autosave-folder-btn');
    fb.style.opacity='.35';
    fb.title='Folder autosave unavailable: this browser does not support the File System Access API';
  }
})();

// Also save on page unload as a safety net
window.addEventListener('beforeunload',()=>{
  const ap=activePipeline();
  if(ap)ap.stack=canvasStack;
  savePipelinesSync();
  persistSkillsSync();
});

// ── Panel collapse/expand ─────────────────────────────────
(function(){
  const LK='pb_left_collapsed',RK='pb_right_collapsed';
  const left=document.getElementById('left'),right=document.getElementById('right');

  function setLeft(collapsed){
    left.classList.toggle('collapsed',collapsed);
    try{localStorage.setItem(LK,collapsed?'1':'0');}catch(e){}
    requestAnimationFrame(()=>renderEdges());
  }
  function setRight(collapsed){
    right.classList.toggle('collapsed',collapsed);
    try{localStorage.setItem(RK,collapsed?'1':'0');}catch(e){}
    requestAnimationFrame(()=>renderEdges());
  }

  document.getElementById('left-collapse').addEventListener('click',()=>setLeft(true));
  document.getElementById('left-expand').addEventListener('click',()=>setLeft(false));
  document.getElementById('right-collapse').addEventListener('click',()=>setRight(true));
  document.getElementById('right-expand').addEventListener('click',()=>setRight(false));

  // Restore saved state
  try{if(localStorage.getItem(LK)==='1')setLeft(true);}catch(e){}
  try{if(localStorage.getItem(RK)==='1')setRight(true);}catch(e){}
})();

renderLib();updateTopbar();renderInspector();applyTx();renderBreadcrumb();renderPipelineTabs();
checkEmptyState();

// ── Native file drag-and-drop on canvas and library panel ──
(function(){
  const leftPanel=document.getElementById('left');
  // Canvas drop
  wrap.addEventListener('dragover',e=>{
    if(!e.dataTransfer.types.includes('Files'))return;
    e.preventDefault();e.dataTransfer.dropEffect='copy';
    wrap.classList.add('drop-file-over');
  });
  wrap.addEventListener('dragleave',e=>{
    if(!wrap.contains(e.relatedTarget))wrap.classList.remove('drop-file-over');
  });
  wrap.addEventListener('drop',e=>{
    e.preventDefault();wrap.classList.remove('drop-file-over');
    if(!e.dataTransfer.files.length)return;
    _handleFileDrop(Array.from(e.dataTransfer.files),'canvas',e.clientX,e.clientY);
  });
  // Library panel drop
  leftPanel.addEventListener('dragover',e=>{
    if(!e.dataTransfer.types.includes('Files'))return;
    e.preventDefault();e.dataTransfer.dropEffect='copy';
    leftPanel.classList.add('drop-file-over');
  });
  leftPanel.addEventListener('dragleave',e=>{
    if(!leftPanel.contains(e.relatedTarget))leftPanel.classList.remove('drop-file-over');
  });
  leftPanel.addEventListener('drop',e=>{
    e.preventDefault();leftPanel.classList.remove('drop-file-over');
    if(!e.dataTransfer.files.length)return;
    _handleFileDrop(Array.from(e.dataTransfer.files),'library',e.clientX,e.clientY);
  });
})();
document.getElementById('nps-new').addEventListener('click',()=>newPipeline());
document.getElementById('nps-open').addEventListener('click',()=>{
  toggleOpenPanel(document.querySelector('.ptab-open')||document.getElementById('pipeline-tabbar'));
});

// Empty-state autosave folder buttons — both call showDirectoryPicker; the
// labels just steer the user's mental model (existing folder vs. create new).
async function _emptyStatePickFolder(hint){
  if(!window.showDirectoryPicker){
    showToast('Folder autosave is not available in this browser. Use Open or New Pipeline instead.','err');
    return;
  }
  try{
    const handle=await window.showDirectoryPicker({id:'pb-autosave',mode:'readwrite',startIn:'documents'});
    _asDirHandle=handle;
    _updateAutoSavePath(handle.name);
    await _idbSetHandle(handle);
    const snapshot=await _readSnapshotFromDir(handle);
    if(snapshot&&_restoreFromSnapshot(snapshot)){
      const when=(snapshot.timestamp||'').slice(11,16);
      showToast('Restored from autosave folder · last saved '+when+' UTC');
    }else{
      // Empty folder (no snapshot yet) — write current state so next reload finds it
      if(_asInterval)_runAutoSave();else _writeAutoSaveToDir();
      showToast(hint==='new'?'New autosave folder connected · '+handle.name:'Autosave folder connected · '+handle.name);
    }
  }catch(e){
    if(e.name==='AbortError')return;
    console.warn('Empty-state folder pick error:',e);
    showToast('Could not open folder: '+(e.message||e.name),'err');
  }
}
document.getElementById('nps-connect-folder').addEventListener('click',()=>_emptyStatePickFolder('existing'));
document.getElementById('nps-create-folder').addEventListener('click',()=>_emptyStatePickFolder('new'));
document.getElementById('nps-import-workspace').addEventListener('click',importWorkspace);
document.getElementById('btn-export-workspace').addEventListener('click',exportWorkspace);
// File System Access API is Chromium-desktop only. On Firefox/Safari/mobile,
// hide the folder buttons and show a note pointing to the cross-browser path.
if(!window.showDirectoryPicker){
  const fb=document.getElementById('nps-folder-btns');
  const note=document.getElementById('nps-folder-note');
  if(fb)fb.style.display='none';
  if(note)note.style.display='';
}

// Rebuild canvas nodes from pre-populated stack
getNodes().forEach(n=>{const el=buildNode(n);if(el)scene.appendChild(el);});
requestAnimationFrame(()=>renderEdges());

// Async: try to re-attach to a previously-connected autosave folder. If the
// folder has a snapshot newer than localStorage, replace state in-place.
_tryRestoreFromAutoSaveFolder();
</script>
</body>
</html>