Spaces:

broadfield-dev
/

OverThinker

Paused

File size: 80,561 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Overthinker - AI-Powered Decision Tree Explorer | Map Decisions with AI</title>

<!-- SEO Meta Tags -->
<meta name="description" content="Overthinker is an AI-powered decision tree explorer that helps you map out complex decisions, explore options, and anticipate outcomes using NVIDIA Nemotron via OpenRouter. Free, interactive, and visual.">
<meta name="keywords" content="decision tree, AI decision maker, overthinker, decision making, AI assistant, nemotron, openrouter, hackathon, build small, decision tree explorer, interactive tree">
<meta name="author" content="Build-small Hackathon">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0f0c29">
<link rel="canonical" href="https://build-small-hackathon-overthinker.hf.space/">

<!-- Open Graph / Facebook -->
<meta property="og:title" content="Overthinker - AI-Powered Decision Tree Explorer">
<meta property="og:description" content="Map out complex decisions, explore options, and anticipate outcomes with AI-powered decision trees. Built with NVIDIA Nemotron.">
<meta property="og:image" content="https://huggingface.co/spaces/build-small-hackathon/OverThinker/resolve/main/overthinker_card.jpg">
<meta property="og:url" content="https://build-small-hackathon-overthinker.hf.space/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Overthinker">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Overthinker - AI-Powered Decision Tree Explorer">
<meta name="twitter:description" content="Map out complex decisions, explore options, and anticipate outcomes with AI-powered decision trees.">
<meta name="twitter:image" content="https://huggingface.co/spaces/build-small-hackathon/OverThinker/resolve/main/overthinker_card.jpg">

<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Overthinker",
  "description": "AI-powered decision tree explorer that helps map complex decisions, explore options, and anticipate outcomes using NVIDIA Nemotron via OpenRouter.",
  "url": "https://build-small-hackathon-overthinker.hf.space/",
  "applicationCategory": "Productivity",
  "operatingSystem": "Web",
  "browserRequirements": "Requires JavaScript and D3.js",
  "softwareVersion": "v30",
  "datePublished": "2026-06-14",
  "author": {
    "@type": "Organization",
    "name": "Build-small Hackathon"
  },
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "featureList": [
    "AI-powered decision tree generation",
    "Option vs Outcome branching",
    "Full path context injection",
    "Interactive D3.js visualization",
    "Export to SVG, JSON, Markdown, PNG",
    "Multi-user session isolation",
    "Browser memory optimized"
  ],
  "keywords": "decision tree, AI, overthinker, nemotron, openrouter, hackathon, decision making"
}
</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { 
    font-family:'Segoe UI',system-ui,sans-serif; 
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    color:#e0e0e0; overflow:hidden; height:100vh; display:flex; flex-direction:column;
}
body.light { background: #f5f7fa; color: #2c2c2c; }
body.light .top-bar { background: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(0,0,0,0.08); }
body.light .prompt-bar { background: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(0,0,0,0.06); }
body.light .prompt-bar textarea { background: rgba(255,255,255,0.8); color: #333; border-color: rgba(0,0,0,0.15); }
body.light .btn-secondary { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #444; }
body.light .btn-secondary:hover { background: rgba(0,0,0,0.1); }
body.light .tile-rect { fill: rgba(255,255,255,0.92) !important; stroke: rgba(0,0,0,0.13) !important; }
body.light .tile-label-line1,
body.light .tile-label-line2 { fill: #d35400 !important; }
body.light .tile-type { fill: #555 !important; }
body.light .tile-badge-depth { fill: #7c5cbf !important; }
body.light .tile-badge-children { fill: #2e86ab !important; }
body.light .link-line { stroke: rgba(0,0,0,0.2) !important; }
body.light .link-line.path-highlight { stroke: #e67e22 !important; }
body.light .sidebar { background: rgba(255,255,255,0.96); border-left: 1px solid rgba(0,0,0,0.08); }
body.light .sidebar textarea { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.12); color: #333; }
body.light .toolbar { background: rgba(255,255,255,0.7); border-top: 1px solid rgba(0,0,0,0.06); }
body.light .stats span { background: rgba(0,0,0,0.04); color: #555; }
body.light .stats .highlight { color: #e67e22; }
body.light .context-menu { background: rgba(255,255,255,0.97); border: 1px solid rgba(0,0,0,0.12); }
body.light .context-menu-item:hover { background: rgba(0,0,0,0.06); }
body.light .onboarding-card { background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.1); }
body.light .onboarding-card p { color: #555; }
body.light .path-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
body.light .path-card:hover { background: rgba(0,0,0,0.08); }
body.light .path-card .card-desc { color: #555; }
body.light .path-card .card-tip { background: rgba(0,0,0,0.04); }
body.light .fo-popup-box { background: rgba(255,255,255,0.96); color: #333; border-color: rgba(0,0,0,0.15); }
body.light .fo-popup-box h4 { color: #d35400; }
body.light .fo-popup-box .full-desc { color: #555; }
body.light .fo-popup-box textarea { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #333; }
body.light #graph-container { background: #f0f4f8; }

.top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 28px; background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(14px); flex-shrink:0; z-index:10; flex-wrap: wrap; gap:8px;
}
.logo h1 {
    font-weight: 600; font-size: 1.3rem; letter-spacing: 0.5px;
    background: linear-gradient(120deg, #f7971e, #ffd200);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.logo span { font-size: 0.7rem; color: #888; letter-spacing: 1px; margin-left: 4px; }
.top-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.top-controls label { font-size: 0.75rem; color: #bbb; margin-right: 1px; }
.top-controls input[type="number"] {
    width: 48px; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    padding: 5px 4px; color: #fff; text-align: center; font-size: 0.8rem;
}
.top-controls input[type="number"]:focus { border-color: #f7971e; outline: none; }
.btn {
    padding: 6px 16px; border-radius: 8px; border: none;
    font-weight: 600; font-size: 0.78rem; cursor: pointer;
    transition: all 0.2s ease; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, #f7971e, #ffd200); color: #1a1a2e; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(247,151,30,0.35); }
.btn-secondary { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #ddd; }
.btn-secondary:hover { background: rgba(255,255,255,0.14); }
.btn-icon { padding: 6px 10px; font-size: 1.1rem; line-height: 1; min-width: 32px; text-align: center; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 3px 10px; font-size: 0.7rem; }

.prompt-bar {
    display: flex; gap: 10px; padding: 12px 28px; align-items: center;
    justify-content: center; flex-wrap: wrap; background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.04); flex-shrink:0;
}
.prompt-bar .input-group { display: flex; gap: 8px; flex: 1; max-width: 700px; min-width: 280px; }
.prompt-bar textarea {
    flex: 1; background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    padding: 10px 14px; color: #fff; font-size: 0.88rem;
    resize: vertical; min-height: 42px; max-height: 80px; outline: none;
}
.prompt-bar textarea:focus { border-color: #f7971e; }
.prompt-bar .btn-generate { padding: 10px 24px; font-size: 0.85rem; }
.prompt-bar .sample-btn { padding: 6px 12px; font-size: 0.72rem; }

#graph-container {
    flex:1; position:relative; overflow:hidden; cursor:grab;
    background: radial-gradient(ellipse at center, #1a1a3a 0%, #0f0c29 70%);
}
#graph-container:active { cursor:grabbing; }
#graph-svg { width:100%; height:100%; }
.node-group { cursor:grab; }
.node-group:active { cursor:grabbing; }
.node-group.selected .tile-rect { stroke:#ffd700; stroke-width:3px; filter:drop-shadow(0 0 6px #ffd700); }
.node-group.path-highlight .tile-rect { stroke:#ffd200; stroke-width:2.5px; filter:drop-shadow(0 0 8px rgba(255,210,0,0.5)); }
.node-group.root-pinned .tile-rect { stroke:#ffd700; stroke-width:3px; filter:drop-shadow(0 0 8px rgba(255,215,0,0.6)); }
.tile-rect.type-root { fill:rgba(25,25,55,0.92); stroke:#ffd700; stroke-width:2.5px; filter:drop-shadow(0 0 6px rgba(255,215,0,0.3)); }
.tile-rect.type-input { fill:rgba(25,25,55,0.92); stroke:#ff6b9d; stroke-width:2px; filter:drop-shadow(0 0 4px rgba(255,107,157,0.2)); }
.tile-rect.type-outcome { fill:rgba(25,25,55,0.92); stroke:#00d4ff; stroke-width:2px; filter:drop-shadow(0 0 4px rgba(0,212,255,0.2)); }
.tile-label-line1,
.tile-label-line2 { fill:#ffd700; font-size:12px; font-weight:700; pointer-events:none; text-anchor:middle; }
.tile-type { font-size:9px; pointer-events:none; text-anchor:middle; }
.tile-type.type-root-label { fill:#ffd700; }
.tile-type.type-input-label { fill:#ff6b9d; }
.tile-type.type-outcome-label { fill:#00d4ff; }
.tile-badge-depth { fill:#c9aaff; font-size:10px; pointer-events:none; text-anchor:start; }
.tile-badge-children { fill:#7ecfff; font-size:10px; pointer-events:none; text-anchor:end; }
.link-line { stroke:rgba(255,210,0,0.2); stroke-width:1.5px; fill:none; transition:stroke-width 0.2s,stroke 0.2s; }
.link-line.path-highlight { stroke:#ffd700; stroke-width:3px; filter:drop-shadow(0 0 4px #ffd700); }

.fo-popup-box {
  background:rgba(20,16,40,0.96);
  border:2px solid #ffd700;
  border-radius:10px;
  padding:12px;
  width:300px;
  max-height:480px;
  overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  font-family:'Segoe UI',system-ui,sans-serif;
  color:#e0e0e0;
  pointer-events:all;
  user-select:text;
}
.fo-popup-box h4 { color:#ffd700; margin-bottom:6px; font-size:0.95em; padding-right:20px; }
.fo-popup-box .type-badge { display:inline-block; padding:2px 6px; border-radius:3px; font-size:0.7em; margin-bottom:6px; font-weight:700; }
.fo-popup-box .type-badge.type-root { background:rgba(255,215,0,0.15); color:#ffd700; }
.fo-popup-box .type-badge.type-input { background:rgba(255,107,157,0.15); color:#ff6b9d; }
.fo-popup-box .type-badge.type-outcome { background:rgba(0,212,255,0.15); color:#00d4ff; }
.fo-popup-box .full-desc { color:#c0c0c0; font-size:0.8em; line-height:1.4; margin-bottom:10px; white-space:pre-wrap; max-height:120px; overflow-y:auto; }
.fo-popup-box textarea { width:100%; padding:8px; border-radius:6px; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.3); color:#e0e0e0; font-size:0.8em; resize:vertical; min-height:50px; outline:none; }
.fo-popup-box textarea:focus { border-color:#ffd700; }
.fo-popup-box .btn-row { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.fo-popup-box .btn-row button { flex:1; min-width:80px; padding:6px 10px; border-radius:5px; border:none; cursor:pointer; font-weight:600; font-size:0.75em; }
.btn-explore-outcome { background:#00d4ff; color:#1a1a2e; }
.btn-explore-outcome:hover { background:#00b8e0; }
.btn-explore-input { background:#ff6b9d; color:#1a1a2e; }
.btn-explore-input:hover { background:#e05a88; }
.btn-regenerate { background:#5b8cc5; color:#fff; }
.btn-regenerate:hover { background:#4a7ab5; }
.btn-add-options { background:#7ec8a0; color:#1a1a2e; }
.btn-add-options:hover { background:#5ea87e; }
.fo-close-btn { position:absolute; top:4px; right:8px; background:none; border:none; color:#c9aaff; font-size:16px; cursor:pointer; z-index:5; }

#sidebar-tab {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  background: rgba(247,151,30,0.9); color: #1a1a2e;
  border: none; border-radius: 8px 0 0 8px;
  padding: 10px 6px; cursor: pointer; z-index: 1000;
  font-size: 1rem; font-weight: bold; writing-mode: vertical-rl;
  text-orientation: mixed; letter-spacing: 2px;
  box-shadow: -2px 0 8px rgba(0,0,0,0.3);
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1), background 0.2s;
  user-select: none;
}
#sidebar-tab:hover { background: #ffd200; }
#sidebar-tab.hidden { transform: translate(340px, -50%); }

#path-sidebar {
  position:fixed; top:0; right:0; width:340px; height:100vh;
  background:rgba(10,10,35,0.97);
  border-left:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(20px);
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
  z-index:999; display:flex; flex-direction:column;
  box-shadow:-4px 0 20px rgba(0,0,0,0.4);
}
#path-sidebar.open { transform:translateX(0); }
#sidebar-header {
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
#sidebar-header h3 { color:#ffd700; font-size:0.9em; }
#sidebar-close { background:none; border:none; color:#c9aaff; font-size:1.2em; cursor:pointer; padding:4px; }
#sidebar-close:hover { color:#ffd700; }
#path-list { flex:1; overflow-y:auto; padding:8px 12px; }
.path-card {
  background:rgba(25,25,55,0.85); border:1px solid rgba(255,255,255,0.08); border-radius:8px;
  padding:8px 10px; margin-bottom:6px; cursor:pointer;
  transition:background 0.2s, border-color 0.2s; position:relative;
}
.path-card:hover { background:rgba(35,35,75,0.9); border-color:#ffd700; }
.path-card.active { border-color:#ffd700; background:rgba(35,35,75,0.9); }
.path-card .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.path-card .card-label { color:#e0e0e0; font-size:0.78em; font-weight:600; word-break:break-word; }
.path-card .card-type { font-size:0.65em; padding:1px 5px; border-radius:3px; font-weight:600; }
.path-card .card-type.root-type { background:rgba(255,215,0,0.15); color:#ffd700; }
.path-card .card-type.input-type { background:rgba(255,107,157,0.15); color:#ff6b9d; }
.path-card .card-type.outcome-type { background:rgba(0,212,255,0.15); color:#00d4ff; }
.path-card .card-desc { font-size:0.7em; color:#aaa; line-height:1.3; margin-bottom:4px; }
.path-card .card-tip { font-size:0.68em; color:#7ec8a0; background:rgba(126,200,160,0.08); padding:4px 6px; border-radius:4px; margin-top:4px; display:none; }
.path-card .card-tip.show { display:block; }
.path-arrow { color:rgba(255,255,255,0.15); text-align:center; font-size:0.7em; margin:-2px 0; }
#sidebar-summary {
  padding:8px 16px; border-top:1px solid rgba(255,255,255,0.06);
  font-size:0.7em; color:#aaa; flex-shrink:0;
}
#sidebar-export-row {
  display: flex; gap: 4px; padding: 6px 12px;
  border-top: 1px solid rgba(255,255,255,0.06); flex-shrink:0;
  justify-content: center; flex-wrap: wrap;
}
#sidebar-export-row .btn { font-size: 0.65rem; padding: 3px 8px; }

.toolbar {
    display: flex; gap: 10px; justify-content: center; align-items: center;
    padding: 8px 20px; background: rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.04); flex-shrink:0; z-index:50;
    flex-wrap: wrap;
}
.toolbar .toolbar-group { display: flex; gap: 4px; align-items: center; }
.toolbar .toolbar-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.1); margin: 0 4px; }
.stats { display: inline-flex; gap: 8px; align-items: center; font-size: 0.72rem; color: #aaa; }
.stats span { background: rgba(255,255,255,0.04); padding: 3px 10px; border-radius: 12px; }
.stats .highlight { color: #ffd700; font-weight: 600; }

#context-menu {
    position: fixed; z-index: 300; background: rgba(15,12,41,0.98);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    padding: 6px 0; min-width: 190px; backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6); display: none;
}
#context-menu.visible { display: block; }
.ctx-item { padding:8px 16px; font-size:0.8em; cursor:pointer; color:#c0c0c0; display:flex; align-items:center; gap:8px; }
.ctx-item:hover { background:rgba(247,151,30,0.15); color:#ffd700; }
.ctx-item .kbd { margin-left:auto; font-size:0.65rem; color:#666; background:rgba(255,255,255,0.06); padding:1px 6px; border-radius:4px; }
.ctx-divider { height:1px; background:rgba(255,255,255,0.06); margin:4px 0; }

.toast {
    position: fixed; top: 60px; right: 20px; z-index: 600;
    padding: 12px 20px; border-radius: 10px; background: rgba(20,16,40,0.95);
    border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);
    color: #e0e0e0; font-size: 0.82rem; transform: translateX(120%);
    transition: transform 0.3s ease; max-width: 320px;
}
.toast.show { transform: translateX(0); }
.toast.success { border-color: #2ecc71; }
.toast.error { border-color: #e74c3c; }
.toast.info { border-color: #3498db; }

@media (max-width:800px) {
    .top-bar { padding:8px 14px; }
    .prompt-bar { padding:8px 14px; }
    .prompt-bar .input-group { min-width:100%; }
    .toolbar { padding:6px 10px; gap:4px; }
    .top-controls label { display:none; }
    .logo h1 { font-size:1rem; }
    #path-sidebar { width:100%; }
    #sidebar-tab { padding: 8px 4px; font-size: 0.8rem; }
}

/* ---------- Info / Help Dropdown ---------- */
.dropdown-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2000; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.dropdown-overlay.show { display: flex; }
.dropdown-box {
  background: rgba(15,12,41,0.97);
  border: 2px solid #ffd700;
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  color: #e0e0e0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  position: relative;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
body.light .dropdown-box { background: rgba(255,255,255,0.97); color: #333; border-color: #e67e22; }
.dropdown-box h3 { color: #ffd700; font-size: 1.15rem; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px; }
body.light .dropdown-box h3 { color: #e67e22; border-bottom-color: rgba(0,0,0,0.08); }
.dropdown-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #c9aaff; font-size: 20px; cursor: pointer; }
.dropdown-close:hover { color: #ffd700; }
body.light .dropdown-close { color: #888; }
body.light .dropdown-close:hover { color: #e67e22; }
.dropdown-section { margin-bottom: 14px; }
.dropdown-section h4 { color: #ffd700; font-size: 0.88rem; margin-bottom: 4px; }
body.light .dropdown-section h4 { color: #e67e22; }
.dropdown-section p { font-size: 0.82rem; line-height: 1.55; color: #c0c0c0; }
body.light .dropdown-section p { color: #555; }
.dropdown-section ul { margin: 4px 0 0 14px; font-size: 0.82rem; line-height: 1.6; color: #c0c0c0; }
body.light .dropdown-section ul { color: #555; }
.dropdown-section code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; font-size: 0.78rem; }
body.light .dropdown-section code { background: rgba(0,0,0,0.06); }
.dropdown-section kbd { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 5px; font-size: 0.75rem; font-family: monospace; }
body.light .dropdown-section kbd { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }

#ensurePngContainer {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
</style>
</head>
<body>

<div class="top-bar">
    <div class="logo"><h1>🧠 Overthinker</h1></div>
    <div class="top-controls">
        <input type="number" id="branch-input" value="3" min="3" max="3" hidden>
        <button class="btn btn-secondary btn-icon" id="theme-btn" title="Toggle Theme">🌓</button>
        <button class="btn btn-secondary" id="info-btn" title="Info">ℹ️</button>
        <button class="btn btn-secondary" id="help-btn" title="Help">❓</button>
    </div>
</div>

<div class="prompt-bar">
    <div class="input-group">
        <textarea id="decision-input" placeholder="What decision are you overthinking? e.g. 'Should I quit my job to start a startup?'..." rows="2"></textarea>
        <button class="btn btn-primary btn-generate" id="generate-btn">🌳 Generate</button>
        <button class="btn btn-secondary sample-btn" id="sample-btn">🎯 Sample</button>
    </div>
</div>

<div id="graph-container">
  <svg id="graph-svg"></svg>
</div>

<div id="ensurePngContainer"></div>

<!-- Hackathon Info Dropdown -->
<div id="info-dropdown" class="dropdown-overlay">
  <div class="dropdown-box">
    <button class="dropdown-close" id="info-close">✕</button>
    <h3>ℹ️ About Overthinker </h3>
    <div class="dropdown-section">
      <h4>🤖 Model</h4>
      <p>Powered by <strong>nvidia/nemotron-3-nano-30b-a3b</strong> via <strong>OpenRouter</strong>. Optimized for structured decision tree generation with dual-prompt architecture (options vs outcomes).</p>
    </div>
    <div class="dropdown-section">
      <h4>🌍 Framework</h4>
      <p>Built on <strong>Gradio.Server</strong> with SQLite per-session persistence. Fully client-side rendering with D3.js for interactive tree visualization. <strong>Browser memory fix applied</strong>: zoom handler cleanup, addOptions replaces children, D3 keyed exit/remove.</p>
    </div>
    <div class="dropdown-section">
      <h4>✨ Key Features</h4>
      <ul>
        <li>🌳 Generate trees from any decision prompt</li>
        <li>🧠 Dual prompt design: Options vs Outcomes</li>
        <li>🔍 Interactive explore / regenerate / add options</li>
        <li>📍 Path sidebar with depth tracking & tips</li>
        <li>🖼 Export: SVG, JSON, Markdown, PNG</li>
        <li>🌓 Dark/Light theme toggle</li>
        <li>⌨ Keyboard shortcuts (E, R, A, F, C)</li>
        <li>🔄 Regenerate with user context</li>
        <li>💾 Multi-user session isolation via SQLite</li>
        <li>📤 Upload trace to HF dataset</li>
        <li>🧩 Browser memory optimized: data arrays cleared, zoom listener cleanup, addOptions replaces children</li>
      </ul>
    </div>
    <div class="dropdown-section">
      <h4>💬 OpenRouter</h4>
      <p>API calls go through <code>openrouter.ai/api/v1/chat/completions</code> with model <code>nvidia/nemotron-3-nano-30b-a3b</code>. Temperature: 0.8, Max tokens: 2048.</p>
    </div>
  </div>
</div>

<!-- Help Dropdown -->
<div id="help-dropdown" class="dropdown-overlay">
  <div class="dropdown-box">
    <button class="dropdown-close" id="help-close">✕</button>
    <h3>❓ How to Use</h3>
    <div class="dropdown-section">
      <h4>1. Enter a Decision</h4>
      <p>Type or paste a decision into the text box (e.g., "Should I quit my job to start a startup?") and click <strong>Generate</strong> or press <kbd>Enter</kbd>.</p>
    </div>
    <div class="dropdown-section">
      <h4>2. Explore the Tree</h4>
      <p>Click any node to see its details. Use the popup to <strong>Explore</strong> (generate more branches), <strong>Regenerate</strong> (with your feedback), or <strong>Add Options</strong>.</p>
    </div>
    <div class="dropdown-section">
      <h4>3. Navigate</h4>
      <ul>
        <li>Click node = select + details popup</li>
        <li>Right-click node = context menu</li>
        <li>Drag canvas = pan view</li>
        <li>Scroll = zoom in/out</li>
        <li><kbd>E</kbd> = Explore, <kbd>R</kbd> = Regenerate, <kbd>A</kbd> = Add Options</li>
        <li><kbd>F</kbd> = Fit view, <kbd>C</kbd> = Clear</li>
        <li><kbd>Esc</kbd> = Close popups</li>
      </ul>
    </div>
    <div class="dropdown-section">
      <h4>4. Track Your Path</h4>
      <p>Click the <strong>Path</strong> tab on the right to see your current decision path with depth and tips. Export path as SVG, JSON, Markdown, or PNG.</p>
    </div>
    <div class="dropdown-section">
      <h4>5. Export</h4>
      <p>Use the toolbar buttons to export the entire tree or just the selected path in your preferred format: SVG, JSON, Markdown, or PNG.</p>
    </div>
    <div class="dropdown-section">
      <h4>6. Upload Trace</h4>
      <p>Click the <strong>Upload Trace</strong> button in the toolbar to upload your decision tree to a shared HuggingFace dataset for public analysis.</p>
    </div>
  </div>
</div>

<button id="sidebar-tab">📍 Path</button>

<div id="path-sidebar">
  <div id="sidebar-header">
    <h3>📍 Decision Path</h3>
    <button id="sidebar-close">✕</button>
  </div>
  <div id="path-list">
    <div style="color:#5a6088; font-size:0.75em; padding:20px; text-align:center;">Click a node to see its path</div>
  </div>
  <div id="sidebar-summary">
    <div><b>Depth:</b> <span id="path-depth">0</span> | <b>Tips:</b> <span id="path-tips-count">0</span></div>
  </div>
  <div id="sidebar-export-row">
    <span style="color:#888;font-size:0.65em;width:100%;text-align:center;margin-bottom:2px;">📤 Export Path:</span>
    <button class="btn btn-secondary btn-sm" id="path-export-svg">🖼 SVG</button>
    <button class="btn btn-secondary btn-sm" id="path-export-json">📄 JSON</button>
    <button class="btn btn-secondary btn-sm" id="path-export-md">📝 MD</button>
    <button class="btn btn-secondary btn-sm" id="path-export-png">📷 PNG</button>
  </div>
</div>

<div class="toolbar" id="toolbar" style="display:none;">
    <div class="toolbar-group">
        <button class="btn btn-secondary btn-icon" id="fit-btn" title="Fit View (F)">🎯</button>
        <button class="btn btn-secondary btn-icon" id="clear-btn" title="Clear (C)">🗑</button>
        <div class="toolbar-divider"></div>
        <button class="btn btn-secondary" id="export-svg-btn">🖼 SVG</button>
        <button class="btn btn-secondary" id="export-json-btn">📄 JSON</button>
        <button class="btn btn-secondary" id="export-md-btn">📝 Markdown</button>
        <button class="btn btn-secondary" id="export-png-btn">📷 PNG</button>
    </div>
    <div class="toolbar-group">
        <button class="btn btn-secondary" id="upload-trace-btn">📤 Upload Trace</button>
    </div>
    <div class="stats">
        <span>Nodes: <span class="highlight" id="stat-nodes">0</span></span>
        <span>Depth: <span class="highlight" id="stat-depth">0</span></span>
        <span>Leaves: <span class="highlight" id="stat-leaves">0</span></span>
        <span>RAM: <span class="highlight" id="stat-ram">0</span> MB</span>
    </div>
</div>

<div id="context-menu">
  <div class="ctx-item" data-action="expand">🔍 Explore <span class="kbd">E</span></div>
  <div class="ctx-item" data-action="regenerate">🔄 Regenerate <span class="kbd">R</span></div>
  <div class="ctx-item" data-action="add">➕ Add Options <span class="kbd">A</span></div>
  <div class="ctx-divider"></div>
  <div class="ctx-item" data-action="copy-path">📋 Copy Path</div>
  <div class="ctx-item" data-action="center">🎯 Center Node</div>
</div>

<div id="loading-overlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:999;align-items:center;justify-content:center;flex-direction:column;">
  <div class="spinner" style="width:40px;height:40px;border:4px solid rgba(255,255,255,0.1);border-top-color:#ffd700;border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:16px;"></div>
  <p id="loading-text" style="color:#ffd700;font-size:0.9em;">Thinking deeply...</p>
</div>

<div class="toast" id="toast"></div>

<style>
@keyframes spin { to { transform: rotate(360deg); } }
</style>

<script>
// =============================================
//  OVER THINKER  — Browser Memory Fixes
//  - Fix 1: addOptions() now replaces children instead of appending
//  - Fix 2: Zoom handler cleanup on initSvg (prevents listener leaks)
//  - Fix 3: Data arrays cleared before each render (via removeChildrenOf + keyed joins)
//  - Fix 4: D3 exit().remove() already present with keyed data bindings
//  All other features preserved: full UI, path sidebar, export, upload trace
// =============================================

let nodes = [];
let links = [];
let selectedNodeId = null;
let parentMap = new Map();
let expandedSet = new Set();
let sessionId = '';
let svg, gLinks, gNodes, gMain, zoomBehavior;
let foreignPopup = null;
let isDark = true;

const CARD_W = 230, CARD_H = 130;
const HEAVY_W = 300, HEAVY_H = 480;
const MIN_HORIZONTAL_GAP = 40;
const VERTICAL_SPACING = 200;
const ROOT_Y = 80;

const container = document.getElementById('graph-container');
const inputEl = document.getElementById('decision-input');
const generateBtn = document.getElementById('generate-btn');
const branchInput = document.getElementById('branch-input');
const loadingOverlay = document.getElementById('loading-overlay');
const loadingText = document.getElementById('loading-text');

function showLoading(msg) { 
  loadingOverlay.style.display = 'flex';
  loadingText.textContent = msg;
}
function hideLoading() { loadingOverlay.style.display = 'none'; }

function getNodeTypeLabel(type) {
  const map = { 'root': '🌳 Root', 'input': '🧠 Input', 'outcome': '📊 Outcome' };
  return map[type] || '📊 Outcome';
}
function getNextTypeLabel(type) {
  const map = { 'root': 'Options/Choices', 'input': 'Outcomes', 'outcome': 'Options/Choices' };
  return map[type] || 'Outcomes';
}
function getNextType(current) {
  const map = { 'root': 'input', 'input': 'outcome', 'outcome': 'input' };
  return map[current] || 'outcome';
}

function showToast(msg, type='info') {
    const toast = document.getElementById('toast');
    toast.textContent = '⚠️ ' + msg;
    toast.className = 'toast ' + type;
    toast.classList.add('show');
    clearTimeout(toast._t);
    toast._t = setTimeout(() => toast.classList.remove('show'), 3000);
}

function escapeHtml(str) {
  if (!str) return '';
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

function splitLabel(label) {
  const maxLen = 22;
  if (!label) return ['', ''];
  if (label.length <= maxLen) return [label, ''];
  let splitIdx = label.lastIndexOf(' ', Math.min(maxLen, label.length));
  if (splitIdx < 5) splitIdx = maxLen;
  return [label.substring(0, splitIdx).trim(), label.substring(splitIdx).trim()];
}

function getSessionId() {
  if (!sessionId) {
    sessionId = localStorage.getItem('overthinker_session_id');
    if (!sessionId) {
      sessionId = crypto.randomUUID();
      localStorage.setItem('overthinker_session_id', sessionId);
    }
  }
  return sessionId;
}

// ---------- LAYOUT ----------
function computeTreeLayout() {
  if (nodes.length === 0) return;
  const childrenMap = {};
  nodes.forEach(n => { childrenMap[n.id] = []; });
  parentMap.forEach((parentId, childId) => {
    if (childrenMap[parentId]) childrenMap[parentId].push(childId);
  });
  const rootId = nodes.find(n => n._type === 'root')?.id || nodes[0].id;
  const depthGroups = {};
  nodes.forEach(n => {
    const d = n.depth || 0;
    if (!depthGroups[d]) depthGroups[d] = [];
    depthGroups[d].push(n);
  });
  const maxDepth = Math.max(...Object.keys(depthGroups).map(Number), 0);
  const canvasW = container.clientWidth;

  const subtreeWidth = {};
  for (let d = maxDepth; d >= 0; d--) {
    (depthGroups[d] || []).forEach(node => {
      const kids = childrenMap[node.id] || [];
      if (kids.length === 0) {
        subtreeWidth[node.id] = CARD_W + MIN_HORIZONTAL_GAP;
      } else {
        let total = kids.reduce((sum, cid) => sum + (subtreeWidth[cid] || (CARD_W + MIN_HORIZONTAL_GAP)), 0);
        total = Math.max(CARD_W + MIN_HORIZONTAL_GAP, total + MIN_HORIZONTAL_GAP * (kids.length - 1));
        subtreeWidth[node.id] = total;
      }
    });
  }

  const positions = {};
  const root = nodes.find(n => n.id === rootId);
  if (root) positions[rootId] = canvasW / 2;
  function positionChildren(nodeId, parentX, availableW) {
    const kids = childrenMap[nodeId] || [];
    if (kids.length === 0) return;
    const totalChildW = kids.reduce((sum, cid) => sum + (subtreeWidth[cid] || (CARD_W + MIN_HORIZONTAL_GAP)), 0);
    const extraSpace = Math.max(0, availableW - totalChildW);
    const gap = kids.length > 1 ? extraSpace / (kids.length - 1) : 0;
    let xCursor = parentX - totalChildW / 2;
    kids.forEach(cid => {
      const sw = subtreeWidth[cid] || (CARD_W + MIN_HORIZONTAL_GAP);
      positions[cid] = xCursor + sw / 2;
      xCursor += sw + gap;
      positionChildren(cid, positions[cid], sw);
    });
  }
  if (root) positionChildren(rootId, positions[rootId], subtreeWidth[rootId] || canvasW);

  const ITER = 50;
  for (let iter = 0; iter < ITER; iter++) {
    let converged = true;
    for (let d = 0; d <= maxDepth; d++) {
      const group = [...(depthGroups[d] || [])].sort((a, b) => (positions[a.id] || 0) - (positions[b.id] || 0));
      for (let i = 0; i < group.length - 1; i++) {
        const a = group[i], b = group[i + 1];
        if (!a || !b) continue;
        const xA = positions[a.id] || 0;
        const xB = positions[b.id] || 0;
        const minDist = CARD_W + MIN_HORIZONTAL_GAP;
        if (xB - xA < minDist) {
          const shift = minDist - (xB - xA);
          positions[b.id] += shift;
          let anc = parentMap.get(b.id);
          while (anc && positions[anc] !== undefined) {
            positions[anc] += shift * 0.7;
            anc = parentMap.get(anc);
          }
          converged = false;
        }
      }
    }
    if (converged) break;
  }

  let minX = Infinity, maxX = -Infinity;
  Object.values(positions).forEach(x => { minX = Math.min(minX, x - CARD_W / 2); maxX = Math.max(maxX, x + CARD_W / 2); });
  const treeW = maxX - minX;
  const offsetX = (canvasW - treeW) / 2 - minX;
  Object.keys(positions).forEach(id => { positions[id] += offsetX; });

  const totalW = Math.max(canvasW, treeW + 80);
  const totalH = ROOT_Y + (maxDepth + 1) * VERTICAL_SPACING + 60;

  nodes.forEach(n => {
    const x = positions[n.id] !== undefined ? positions[n.id] : canvasW / 2;
    const y = ROOT_Y + (n.depth || 0) * VERTICAL_SPACING;
    n.x = x; n.y = y;
  });

  if (svg) {
    svg.attr('viewBox', `0 0 ${totalW} ${totalH}`).attr('width', totalW).attr('height', totalH);
  }
  return { totalW, totalH };
}

// ---------- SVG INIT (Memory Fix 2: zoom handler cleanup) ----------
function initSvg() {
  const w = container.clientWidth, h = container.clientHeight;
  svg = d3.select('#graph-svg').attr('viewBox', `0 0 ${w} ${h}`).attr('width', w).attr('height', h);
  svg.selectAll('*').remove();
  // Remove old zoom behavior listeners to prevent memory leaks
  if (zoomBehavior) {
    svg.on('.zoom', null);
  }
  zoomBehavior = d3.zoom().scaleExtent([0.2, 10]).filter(ev => ev.type === 'wheel' || ev.target === svg.node()).on('zoom', (ev) => {
    if (gMain) gMain.attr('transform', ev.transform);
  });
  svg.call(zoomBehavior);
  gMain = svg.append('g').attr('class','main-group');
  gLinks = gMain.append('g').attr('class','links-group');
  gNodes = gMain.append('g').attr('class','nodes-group');
  foreignPopup = null;
}

function renderCanvas() {
  // Memory Fix 3: No stale data accumulation — tree is rebuilt via removeChildrenOf/add options
  computeTreeLayout();
  initSvg();
  updateLinks();
  updateNodes();
  updateTileTexts();
  if (selectedNodeId) {
    const sn = nodes.find(n => n.id === selectedNodeId);
    if (sn) showPopupForNode(sn);
  }
  updateStats();
}

function updateLinks() {
  // Memory Fix 4: D3 keyed data join with exit().remove() already correct
  const linkJoin = gLinks.selectAll('line').data(links, d => {
    const sid = typeof d.source === 'object' ? d.source.id : d.source;
    const tid = typeof d.target === 'object' ? d.target.id : d.target;
    return sid + '-' + tid;
  });
  linkJoin.exit().remove();
  const linkEnter = linkJoin.enter().append('line').attr('class','link-line');
  const allLinks = linkJoin.merge(linkEnter);
  allLinks
    .attr('x1', d => (typeof d.source === 'object' ? d.source.x : (nodes.find(n=>n.id===d.source)||{}).x) || 0)
    .attr('y1', d => (typeof d.source === 'object' ? d.source.y : (nodes.find(n=>n.id===d.source)||{}).y) || 0)
    .attr('x2', d => (typeof d.target === 'object' ? d.target.x : (nodes.find(n=>n.id===d.target)||{}).x) || 0)
    .attr('y2', d => (typeof d.target === 'object' ? d.target.y : (nodes.find(n=>n.id===d.target)||{}).y) || 0);
  if (selectedNodeId) highlightPath(selectedNodeId);
}

function updateNodes() {
  // Memory Fix 4: D3 keyed data join with exit().remove() already correct
  const nodeJoin = gNodes.selectAll('.node-group').data(nodes, d => d.id);
  nodeJoin.exit().remove();
  const nodeEnter = nodeJoin.enter().append('g').attr('class','node-group')
    .attr('transform', d => `translate(${d.x},${d.y})`)
    .on('contextmenu', function(ev, d) { ev.preventDefault(); showContextMenu(ev, d); });
  nodeEnter.append('rect').attr('class','tile-rect').attr('width',CARD_W).attr('height',CARD_H).attr('x',-CARD_W/2).attr('y',-CARD_H/2);
  nodeEnter.style('opacity', 0).transition().duration(400).style('opacity', 1);
  nodeEnter.append('text').attr('class','tile-label-line1').attr('y',-24);
  nodeEnter.append('text').attr('class','tile-label-line2').attr('y',-8);
  nodeEnter.append('text').attr('class','tile-type').attr('y',10);
  nodeEnter.append('text').attr('class','tile-badge-depth').attr('x',-CARD_W/2+10).attr('y',CARD_H/2-10);
  nodeEnter.append('text').attr('class','tile-badge-children').attr('x',CARD_W/2-10).attr('y',CARD_H/2-10);

  const allNodes = nodeEnter.merge(nodeJoin);
  allNodes.attr('transform', d => `translate(${d.x},${d.y})`);
  allNodes.on('click', function(ev, d) {
    ev.stopPropagation();
    selectNode(d);
  });
  svg.on('click', function(ev) {
    const target = ev.target;
    if (foreignPopup) {
      const foNode = foreignPopup.node();
      if (foNode && (foNode === target || foNode.contains(target))) return;
    }
    selectedNodeId = null;
    removeForeignPopup();
    clearHighlights();
  });
}

function updateTileTexts() {
  gNodes.selectAll('.node-group').each(function(d) {
    const g = d3.select(this);
    const label = d._label || d.label || '?';
    const [line1, line2] = splitLabel(label);
    const type = d._type || 'outcome';
    g.select('.tile-label-line1').text(line1);
    g.select('.tile-label-line2').text(line2 || '');
    g.select('.tile-type').text(getNodeTypeLabel(type).split(' ')[0]);
    g.select('.tile-type').attr('class', 'tile-type type-' + type + '-label');
    g.select('.tile-badge-depth').text('D'+(d.depth||0));
    g.select('.tile-badge-children').text('↳'+(d._childrenCount||0));
    g.select('.tile-rect').attr('class', 'tile-rect type-' + type);
    if (d.depth === 0) g.classed('root-pinned', true);
  });
}

function centerViewOnNode(node, alsoPopup = true) {
  if (!svg || !zoomBehavior || !node) return;
  const containerRect = container.getBoundingClientRect();
  const cw = containerRect.width, ch = containerRect.height;
  let left = node.x - CARD_W/2;
  let right = node.x + CARD_W/2;
  let top = node.y - CARD_H/2;
  let bottom = node.y + CARD_H/2;
  if (alsoPopup && selectedNodeId === node.id && foreignPopup) {
    const popupX = node.x + CARD_W/2 + 10;
    const popupY = node.y - HEAVY_H/2;
    right = Math.max(right, popupX + HEAVY_W + 30);
    top = Math.min(top, popupY);
    bottom = Math.max(bottom, popupY + HEAVY_H + 40);
  }
  const centerX = (left + right) / 2;
  const centerY = (top + bottom) / 2;
  const width = right - left;
  const height = bottom - top;
  const padding = 60;
  const scale = Math.min(cw / (width + padding * 2), ch / (height + padding * 2), 1.8);
  const tx = cw/2 - centerX * scale;
  const ty = ch/2 - centerY * scale;
  svg.transition().duration(500).call(
    zoomBehavior.transform,
    d3.zoomIdentity.translate(tx, ty).scale(scale)
  );
}

// ---------- POPUP ----------
function removeForeignPopup() {
  if (foreignPopup) { foreignPopup.remove(); foreignPopup = null; }
}

function showPopupForNode(node, centerView = true) {
  removeForeignPopup();
  const type = node._type || 'outcome';
  const isExpanded = expandedSet.has(node.id);
  const nextLabel = getNextTypeLabel(type);
  const typeLabel = getNodeTypeLabel(type);
  let buttonsHTML = '';
  if (!isExpanded) {
    buttonsHTML = `<button class="${type === 'outcome' ? 'btn-explore-input' : 'btn-explore-outcome'}" id="fo-explore">🔍 Explore ${nextLabel}</button>`;
  } else {
    buttonsHTML = `<button class="btn-regenerate" id="fo-regen">🔄 Regenerate</button><button class="btn-add-options" id="fo-add">➕ Add Options</button>`;
  }
  const html = `
    <div xmlns="http://www.w3.org/1999/xhtml" class="fo-popup-box">
      <button class="fo-close-btn" id="fo-close">✕</button>
      <h4>${escapeHtml(node._label || node.label || 'Node')}</h4>
      <div class="type-badge type-${type}">${typeLabel}</div>
      <div class="full-desc">${escapeHtml(node._description || node.description || '')}</div>
      ${node._tips && node._tips.length ? `<div style="font-size:0.72em;color:#7ec8a0;margin-bottom:8px;padding:6px;background:rgba(126,200,160,0.08);border-radius:4px;">💡 ${node._tips[0]}</div>` : ''}
      <textarea id="fo-comment" placeholder="Your thought about this..."></textarea>
      <div class="btn-row">${buttonsHTML}</div>
    </div>
  `;
  const px = node.x + CARD_W/2 + 10;
  const py = node.y - HEAVY_H/2;
  foreignPopup = gMain.append('foreignObject')
    .attr('x', px).attr('y', py)
    .attr('width', HEAVY_W + 30).attr('height', HEAVY_H + 40)
    .html(html);
  setTimeout(() => {
    const closeBtn = document.getElementById('fo-close');
    if (closeBtn) closeBtn.addEventListener('click', (ev) => {
      ev.stopPropagation();
      selectedNodeId = null;
      removeForeignPopup();
      clearHighlights();
    });
    const exploreBtn = document.getElementById('fo-explore');
    if (exploreBtn) exploreBtn.addEventListener('click', async (ev) => {
      ev.stopPropagation();
      if (!selectedNodeId) return;
      const count = parseInt(branchInput.value) || 3;
      const commentEl = document.getElementById('fo-comment');
      const comment = commentEl ? commentEl.value.trim() || null : null;
      await exploreNode(selectedNodeId, count, comment);
    });
    const regenBtn = document.getElementById('fo-regen');
    if (regenBtn) regenBtn.addEventListener('click', async (ev) => {
      ev.stopPropagation();
      if (!selectedNodeId) return;
      const count = parseInt(branchInput.value) || 3;
      const commentEl = document.getElementById('fo-comment');
      const comment = commentEl ? commentEl.value.trim() : '';
      if (!comment) { showToast('Add a comment first', 'info'); return; }
      await exploreNode(selectedNodeId, count, comment);
    });
    const addBtn = document.getElementById('fo-add');
    if (addBtn) addBtn.addEventListener('click', async (ev) => {
      ev.stopPropagation();
      if (!selectedNodeId) return;
      const count = parseInt(branchInput.value) || 3;
      await addOptionsToNode(selectedNodeId, count);
    });
  }, 50);
  if (centerView) centerViewOnNode(node, true);
}

function selectNode(node) {
  if (selectedNodeId === node.id && foreignPopup) return;
  selectedNodeId = node.id;
  clearHighlights();
  highlightPath(node.id);
  gNodes.selectAll('.node-group').classed('selected', d => d.id === node.id);
  showPopupForNode(node, true);
  updatePathSidebar();
}

function highlightPath(nodeId) {
  const pathIds = new Set();
  let current = nodeId;
  while (current) { pathIds.add(current); current = parentMap.get(current); }
  gNodes.selectAll('.node-group').classed('path-highlight', d => pathIds.has(d.id));
  gLinks.selectAll('.link-line').classed('path-highlight', d => {
    const sid = typeof d.source === 'object' ? d.source.id : d.source;
    const tid = typeof d.target === 'object' ? d.target.id : d.target;
    return pathIds.has(sid) && pathIds.has(tid);
  });
}

function clearHighlights() {
  gNodes.selectAll('.node-group').classed('selected', false).classed('path-highlight', false);
  gLinks.selectAll('.link-line').classed('path-highlight', false);
}

// ---------- SIDEBAR ----------
const sidebarTab = document.getElementById('sidebar-tab');
const sidebarEl = document.getElementById('path-sidebar');

sidebarTab.addEventListener('click', () => {
  const isOpen = sidebarEl.classList.contains('open');
  if (isOpen) {
    sidebarEl.classList.remove('open');
    sidebarTab.classList.remove('hidden');
  } else {
    sidebarEl.classList.add('open');
    sidebarTab.classList.add('hidden');
    updatePathSidebar();
  }
});

document.getElementById('sidebar-close').addEventListener('click', () => {
  sidebarEl.classList.remove('open');
  sidebarTab.classList.remove('hidden');
});

function updatePathSidebar() {
  const list = document.getElementById('path-list');
  if (!selectedNodeId || !nodes.length) {
    list.innerHTML = '<div style="color:#5a6088; font-size:0.75em; padding:20px; text-align:center;">Click a node to see its path</div>';
    document.getElementById('path-depth').textContent = '0';
    document.getElementById('path-tips-count').textContent = '0';
    return;
  }
  const path = [];
  let current = selectedNodeId;
  while (current) {
    const node = nodes.find(n => n.id === current);
    if (node) path.unshift(node);
    current = parentMap.get(current);
  }
  let html = '';
  let tipCount = 0;
  path.forEach((node, i) => {
    const type = node._type || 'outcome';
    const hasTip = node._tips && node._tips.length > 0;
    if (hasTip) tipCount++;
    const isLast = i === path.length - 1;
    html += `<div class="path-card ${isLast ? 'active' : ''}" data-id="${node.id}">`;
    html += `<div class="card-header"><span class="card-label">${escapeHtml(node._label || '')}</span><span class="card-type ${type}-type">${type.toUpperCase()}</span></div>`;
    if (node._description) {
      html += `<div class="card-desc">${escapeHtml(node._description).substring(0, 80)}${node._description.length > 80 ? '...' : ''}</div>`;
    }
    html += `<div class="card-tip ${hasTip ? 'show' : ''}">${hasTip ? '💡 ' + escapeHtml(node._tips[0]) : ''}</div>`;
    html += '</div>';
    if (!isLast) html += '<div class="path-arrow">↓</div>';
  });
  list.innerHTML = html;
  document.getElementById('path-depth').textContent = path.length;
  document.getElementById('path-tips-count').textContent = tipCount;
  list.querySelectorAll('.path-card').forEach(card => {
    card.addEventListener('click', () => {
      const id = card.dataset.id;
      const node = nodes.find(n => n.id === id);
      if (node) selectNode(node);
    });
  });
}

// ---------- API CALLS (POST with session_id) ----------
async function apiPost(endpoint, payload) {
  const res = await fetch(endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ session_id: getSessionId(), ...payload })
  });
  if (!res.ok) {
    const errData = await res.json().catch(() => ({}));
    throw new Error(errData.detail || `HTTP ${res.status}`);
  }
  return await res.json();
}

async function generateTree() {
  const decision = inputEl.value.trim();
  if (!decision) return;
  generateBtn.textContent = '⏳ Overthinking...';
  generateBtn.disabled = true;
  showLoading('Creating decision root...');
  try {
    const data = await apiPost('/create_tree', { decision });
    const rootNode = data.node;
    nodes = []; links = []; parentMap = new Map(); expandedSet = new Set(); selectedNodeId = null;
    addNodeToGraph(rootNode, null);
    renderCanvas();
    showToast('Root created! Exploring first children...', 'success');
    showLoading('Generating first outcomes...');
    await exploreNode(rootNode.id, parseInt(branchInput.value) || 3, null);
  } catch(e) {
    console.error(e);
    showToast('Generation failed: ' + e.message, 'error');
  } finally {
    hideLoading();
    generateBtn.textContent = '🌳 Generate';
    generateBtn.disabled = false;
    document.getElementById('toolbar').style.display = 'flex';
  }
}

generateBtn.addEventListener('click', generateTree);
inputEl.addEventListener('keydown', (e) => { if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); generateTree(); } });

async function exploreNode(nodeId, count, comment) {
  const node = nodes.find(n => n.id === nodeId);
  if (!node) return;
  const nodeType = node._type || 'outcome';
  showLoading('Generating ' + getNextTypeLabel(nodeType) + '...');
  try {
    const data = await apiPost('/get_children', { 
      node_id: nodeId, 
      count, 
      node_type: nodeType, 
      comment: comment || '' 
    });
    if (expandedSet.has(nodeId)) { removeChildrenOf(nodeId); }
    const children = data.children || [];
    children.forEach(child => addNodeToGraph(child, nodeId));
    expandedSet.add(nodeId);
    node._childrenCount = children.length;
    renderCanvas();
    removeForeignPopup();
    selectedNodeId = null;
    clearHighlights();
    selectedNodeId = nodeId;
    const parentNode = nodes.find(n => n.id === nodeId);
    if (parentNode) showPopupForNode(parentNode, true);
    updatePathSidebar();
  } catch(e) {
    console.error(e);
    showToast('Failed: ' + e.message, 'error');
  } finally { hideLoading(); }
}

// Memory Fix 1: addOptions now removes existing children first (replace instead of append)
async function addOptionsToNode(nodeId, count) {
  showLoading('Adding new options...');
  try {
    // Remove existing children for this node before adding new ones (prevents accumulation)
    removeChildrenOf(nodeId);
    const data = await apiPost('/add_options', { node_id: nodeId, count });
    const newChildren = data.children || [];
    newChildren.forEach(child => addNodeToGraph(child, nodeId));
    const parentNode = nodes.find(n => n.id === nodeId);
    if (parentNode) parentNode._childrenCount = newChildren.length; // set, not add
    renderCanvas();
    removeForeignPopup();
    selectedNodeId = null;
    clearHighlights();
    selectedNodeId = nodeId;
    if (parentNode) showPopupForNode(parentNode, true);
    updatePathSidebar();
  } catch(e) {
    showToast('Failed: ' + e.message, 'error');
  } finally { hideLoading(); }
}

function addNodeToGraph(nodeObj, parentId) {
  nodeObj._label = nodeObj.label || nodeObj._label || 'Untitled';
  nodeObj._description = nodeObj.description || nodeObj._description || '';
  nodeObj._childrenCount = nodeObj._childrenCount || 0;
  nodeObj._type = nodeObj.type || nodeObj._type || 'outcome';
  nodeObj._tips = nodeObj.tips || nodeObj._tips || [];
  nodeObj.depth = parentId ? (nodes.find(n=>n.id===parentId)?.depth ?? 0) + 1 : 0;
  nodeObj.x = 0; nodeObj.y = 0;
  if (!nodes.find(n => n.id === nodeObj.id)) {
    nodes.push(nodeObj);
    if (parentId !== null && parentId !== undefined) {
      parentMap.set(nodeObj.id, parentId);
      links.push({ source: parentId, target: nodeObj.id });
    }
  }
}

function removeChildrenOf(nodeId) {
  const toRemove = new Set();
  function collectDescendants(id) {
    const childIds = [];
    parentMap.forEach((pid, cid) => { if (pid === id) childIds.push(cid); });
    childIds.forEach(cid => { toRemove.add(cid); collectDescendants(cid); });
  }
  collectDescendants(nodeId);
  nodes = nodes.filter(n => !toRemove.has(n.id));
  links = links.filter(l => {
    const src = typeof l.source === 'object' ? l.source.id : l.source;
    const tgt = typeof l.target === 'object' ? l.target.id : l.target;
    return !toRemove.has(src) && !toRemove.has(tgt);
  });
  for (const id of toRemove) { parentMap.delete(id); expandedSet.delete(id); }
  if (toRemove.has(selectedNodeId)) {
    selectedNodeId = null;
    removeForeignPopup();
    clearHighlights();
    updatePathSidebar();
  }
}

function updateStats() {
  document.getElementById('stat-nodes').textContent = nodes.length;
  const maxD = nodes.length > 0 ? Math.max(...nodes.map(n=>n.depth||0)) : 0;
  document.getElementById('stat-depth').textContent = maxD;
  const leaves = nodes.filter(n => (n._childrenCount||0) === 0).length;
  document.getElementById('stat-leaves').textContent = leaves;
  const mb = (nodes.length * 0.08).toFixed(1);
  document.getElementById('stat-ram').textContent = mb;
}

// ---------- CONTEXT MENU ----------
function showContextMenu(ev, d) {
  const menu = document.getElementById('context-menu');
  menu.style.display = 'block';
  menu.style.left = Math.min(ev.clientX, window.innerWidth - 200) + 'px';
  menu.style.top = Math.min(ev.clientY, window.innerHeight - 200) + 'px';
  menu.dataset.nodeId = d.id;
}

document.addEventListener('click', (ev) => {
  const menu = document.getElementById('context-menu');
  if (menu && !menu.contains(ev.target)) menu.style.display = 'none';
});

document.getElementById('context-menu').addEventListener('click', async (ev) => {
  const item = ev.target.closest('.ctx-item');
  if (!item) return;
  const action = item.dataset.action;
  const nodeId = document.getElementById('context-menu').dataset.nodeId;
  if (!nodeId) return;
  document.getElementById('context-menu').style.display = 'none';
  const node = nodes.find(n => n.id === nodeId);
  if (!node) return;
  switch(action) {
    case 'expand':
      selectNode(node);
      if (!expandedSet.has(nodeId)) await exploreNode(nodeId, parseInt(branchInput.value)||3, null);
      break;
    case 'regenerate':
      selectNode(node);
      const comment = prompt('Enter your thought to guide regeneration:');
      if (comment) await exploreNode(nodeId, parseInt(branchInput.value)||3, comment);
      break;
    case 'add':
      selectNode(node);
      await addOptionsToNode(nodeId, parseInt(branchInput.value)||3);
      break;
    case 'copy-path':
      const path = [];
      let cur = nodeId;
      while (cur) {
        const n = nodes.find(n => n.id === cur);
        if (n) path.unshift(n._label);
        cur = parentMap.get(cur);
      }
      navigator.clipboard.writeText(path.join(' → ')).then(() => showToast('Path copied!','success'))
        .catch(() => showToast('Copy failed','error'));
      break;
    case 'center':
      const nodeX = node.x, nodeY = node.y;
      const rect = container.getBoundingClientRect();
      const scale = zoomBehavior ? d3.zoomTransform(svg.node()).k : 1;
      const targetX = rect.width/2 - nodeX*scale;
      const targetY = rect.height/2 - nodeY*scale;
      svg.transition().duration(500).call(zoomBehavior.transform, d3.zoomIdentity.translate(targetX, targetY).scale(scale));
      break;
  }
});

// =============================================
//  EXPORT FUNCTIONS
// =============================================

function computeTextLines(text, maxLen) {
  if (!text) return 0;
  let lines = 0;
  let remaining = text;
  while (remaining.length > 0 && lines < 10) {
    lines++;
    if (remaining.length <= maxLen) break;
    let split = remaining.lastIndexOf(' ', maxLen);
    if (split < 5) split = maxLen;
    remaining = remaining.substring(split).trim();
  }
  return lines;
}

function computePathTileHeight(node) {
  const maxDescLen = 35;
  const descLines = computeTextLines(node._description || '', maxDescLen);
  const cappedDescLines = Math.min(descLines, 3);
  const tipLines = computeTextLines((node._tips && node._tips[0]) ? '💡 ' + node._tips[0] : '', 35);
  const cappedTipLines = Math.min(tipLines, 2);
  let extraHeight = cappedDescLines * 13;
  if (cappedTipLines > 0) extraHeight += 4 + cappedTipLines * 11;
  const baseHeight = 60;
  return Math.max(baseHeight + extraHeight, CARD_H);
}

function computeExportLayout(exportNodes, exportLinks, canvasW) {
  if (!exportNodes.length) return null;
  const childrenMap = {};
  exportNodes.forEach(n => { childrenMap[n.id] = []; });
  exportLinks.forEach(l => {
    const sid = typeof l.source === 'object' ? l.source.id : l.source;
    const tid = typeof l.target === 'object' ? l.target.id : l.target;
    if (childrenMap[sid]) childrenMap[sid].push(tid);
  });

  const depthGroups = {};
  let maxDepth = 0;
  exportNodes.forEach(n => {
    const d = n.depth || 0;
    if (!depthGroups[d]) depthGroups[d] = [];
    depthGroups[d].push(n);
    if (d > maxDepth) maxDepth = d;
  });

  const rootId = exportNodes.find(n => n._type === 'root')?.id || exportNodes[0].id;

  const subtreeWidth = {};
  for (let d = maxDepth; d >= 0; d--) {
    (depthGroups[d] || []).forEach(node => {
      const kids = childrenMap[node.id] || [];
      if (kids.length === 0) {
        subtreeWidth[node.id] = CARD_W + MIN_HORIZONTAL_GAP;
      } else {
        let total = kids.reduce((sum, cid) => sum + (subtreeWidth[cid] || (CARD_W + MIN_HORIZONTAL_GAP)), 0);
        total = Math.max(CARD_W + MIN_HORIZONTAL_GAP, total + MIN_HORIZONTAL_GAP * (kids.length - 1));
        subtreeWidth[node.id] = total;
      }
    });
  }

  const positions = {};
  const root = exportNodes.find(n => n.id === rootId);
  if (root) positions[rootId] = canvasW / 2;

  function positionChildren(nodeId, parentX, availableW) {
    const kids = childrenMap[nodeId] || [];
    if (kids.length === 0) return;
    const totalChildW = kids.reduce((sum, cid) => sum + (subtreeWidth[cid] || (CARD_W + MIN_HORIZONTAL_GAP)), 0);
    const extraSpace = Math.max(0, availableW - totalChildW);
    const gap = kids.length > 1 ? extraSpace / (kids.length - 1) : 0;
    let xCursor = parentX - totalChildW / 2;
    kids.forEach(cid => {
      const sw = subtreeWidth[cid] || (CARD_W + MIN_HORIZONTAL_GAP);
      positions[cid] = xCursor + sw / 2;
      xCursor += sw + gap;
      positionChildren(cid, positions[cid], sw);
    });
  }
  if (root) positionChildren(rootId, positions[rootId], subtreeWidth[rootId] || canvasW);

  const ITER = 30;
  for (let iter = 0; iter < ITER; iter++) {
    let converged = true;
    for (let d = 0; d <= maxDepth; d++) {
      const group = [...(depthGroups[d] || [])].sort((a, b) => (positions[a.id] || 0) - (positions[b.id] || 0));
      for (let i = 0; i < group.length - 1; i++) {
        const a = group[i], b = group[i + 1];
        if (!a || !b) continue;
        const xA = positions[a.id] || 0;
        const xB = positions[b.id] || 0;
        const minDist = CARD_W + MIN_HORIZONTAL_GAP;
        if (xB - xA < minDist) {
          const shift = minDist - (xB - xA);
          positions[b.id] += shift;
          converged = false;
        }
      }
    }
    if (converged) break;
  }

  let minX = Infinity, maxX = -Infinity;
  Object.values(positions).forEach(x => { minX = Math.min(minX, x - CARD_W / 2); maxX = Math.max(maxX, x + CARD_W / 2); });
  const treeW = maxX - minX;
  let maxExportTileH = CARD_H;
  exportNodes.forEach(n => {
    const h = computePathTileHeight(n);
    if (h > maxExportTileH) maxExportTileH = h;
  });
  const minTotalW = Math.max(canvasW, treeW + 80);
  const totalW = minTotalW;
  const offsetX = (totalW - treeW) / 2 - minX;
  Object.keys(positions).forEach(id => { positions[id] += offsetX; });

  let newMinX = Infinity, newMaxX = -Infinity;
  Object.values(positions).forEach(x => { newMinX = Math.min(newMinX, x - CARD_W / 2); newMaxX = Math.max(newMaxX, x + CARD_W / 2); });
  const finalTreeW = newMaxX - newMinX;
  const finalTotalW = Math.max(totalW, finalTreeW + 40);

  const rowHeights = {};
  for (let d = 0; d <= maxDepth; d++) {
    let maxRowH = CARD_H;
    (depthGroups[d] || []).forEach(n => {
      const h = computePathTileHeight(n);
      if (h > maxRowH) maxRowH = h;
    });
    rowHeights[d] = maxRowH;
  }

  const Y_PADDING = 40;
  let totalH = ROOT_Y + 40;
  for (let d = 0; d <= maxDepth; d++) {
    totalH += rowHeights[d] + Y_PADDING;
  }
  totalH += 20;

  exportNodes.forEach(n => {
    let yOffset = 0;
    for (let i = 0; i < (n.depth || 0); i++) {
      yOffset += rowHeights[i] + Y_PADDING;
    }
    n._exportX = positions[n.id] !== undefined ? positions[n.id] : canvasW / 2;
    n._exportY = ROOT_Y + yOffset + (rowHeights[n.depth || 0] || CARD_H) / 2;
    n._exportTileH = computePathTileHeight(n);
  });

  return { totalW: finalTotalW, totalH };
}

function computePathLayoutLinear(exportNodes, exportLinks, canvasW) {
  if (!exportNodes.length) return null;
  const GAP = 40;
  const nodeHeights = [];
  exportNodes.forEach((n, idx) => {
    const h = computePathTileHeight(n);
    nodeHeights.push(h);
  });

  let totalH = ROOT_Y + nodeHeights.reduce((sum, h) => sum + h + GAP, 0) + 60;
  const totalW = Math.max(canvasW, 800);

  let currentY = ROOT_Y;
  exportNodes.forEach((n, idx) => {
    const h = nodeHeights[idx];
    n._exportX = totalW / 2;
    n._exportY = currentY + h / 2;
    n._exportTileH = h;
    currentY += h + GAP;
  });

  return { totalW, totalH };
}

function buildExportSvg(isPathOnly = false) {
  const SVG_NS = 'http://www.w3.org/2000/svg';
  const ns = SVG_NS;

  let exportNodes = nodes;
  let exportLinks = links;
  if (isPathOnly && selectedNodeId) {
    const pathIds = new Set();
    let cur = selectedNodeId;
    while (cur) { pathIds.add(cur); cur = parentMap.get(cur); }
    exportNodes = nodes.filter(n => pathIds.has(n.id));
    exportLinks = links.filter(l => {
      const sid = typeof l.source === 'object' ? l.source.id : l.source;
      const tid = typeof l.target === 'object' ? l.target.id : l.target;
      return pathIds.has(sid) && pathIds.has(tid);
    });
  }

  if (!exportNodes.length) return null;

  const canvasW = 1400;
  const layout = isPathOnly ? computePathLayoutLinear(exportNodes, exportLinks, canvasW) : computeExportLayout(exportNodes, exportLinks, canvasW);
  if (!layout) return null;
  const { totalW, totalH } = layout;

  const svgDoc = document.createElementNS(ns, 'svg');
  svgDoc.setAttribute('xmlns', ns);
  svgDoc.setAttribute('viewBox', `0 0 ${totalW} ${totalH}`);
  svgDoc.setAttribute('width', totalW);
  svgDoc.setAttribute('height', totalH);

  const bg = document.createElementNS(ns, 'rect');
  bg.setAttribute('width', totalW);
  bg.setAttribute('height', totalH);
  bg.setAttribute('fill', isDark ? '#0f0c29' : '#f5f7fa');
  svgDoc.appendChild(bg);

  exportLinks.forEach(l => {
    const sid = typeof l.source === 'object' ? l.source.id : l.source;
    const tid = typeof l.target === 'object' ? l.target.id : l.target;
    const srcNode = exportNodes.find(n => n.id === sid);
    const tgtNode = exportNodes.find(n => n.id === tid);
    if (!srcNode || !tgtNode) return;
    const srcH = srcNode._exportTileH || CARD_H;
    const tgtH = tgtNode._exportTileH || CARD_H;
    const line = document.createElementNS(ns, 'line');
    line.setAttribute('x1', srcNode._exportX);
    line.setAttribute('y1', srcNode._exportY + srcH/2);
    line.setAttribute('x2', tgtNode._exportX);
    line.setAttribute('y2', tgtNode._exportY - tgtH/2);
    line.setAttribute('stroke', isDark ? '#ffd700' : '#2c3e50');
    line.setAttribute('stroke-width', '2');
    line.setAttribute('opacity', '0.3');
    svgDoc.appendChild(line);
  });

  const strokeColors = { root: '#ffd700', input: '#ff6b9d', outcome: '#00d4ff' };
  const fillColor = isDark ? 'rgba(25,25,55,0.92)' : 'rgba(255,255,255,0.92)';
  const labelColor = isDark ? '#ffd700' : '#d35400';
  const typeFillColor = isDark ? '#c0c0c0' : '#555';

  exportNodes.forEach((n) => {
    if (n._exportX === undefined || n._exportY === undefined) return;
    const tileH = n._exportTileH || CARD_H;
    const g = document.createElementNS(ns, 'g');
    g.setAttribute('transform', `translate(${n._exportX},${n._exportY})`);

    const rect = document.createElementNS(ns, 'rect');
    rect.setAttribute('width', CARD_W);
    rect.setAttribute('height', tileH);
    rect.setAttribute('x', -CARD_W/2);
    rect.setAttribute('y', -tileH/2);
    rect.setAttribute('rx', '8');
    rect.setAttribute('fill', fillColor);
    rect.setAttribute('stroke', strokeColors[n._type] || '#00d4ff');
    rect.setAttribute('stroke-width', '2');
    g.appendChild(rect);

    const [line1, line2] = splitLabel(n._label || '');
    const txt1 = document.createElementNS(ns, 'text');
    txt1.setAttribute('x', '0');
    txt1.setAttribute('y', -(tileH/2) + 20);
    txt1.setAttribute('text-anchor', 'middle');
    txt1.setAttribute('fill', labelColor);
    txt1.setAttribute('font-size', '12');
    txt1.setAttribute('font-weight', '700');
    txt1.textContent = line1 || '';
    g.appendChild(txt1);

    if (line2) {
      const txt2 = document.createElementNS(ns, 'text');
      txt2.setAttribute('x', '0');
      txt2.setAttribute('y', -(tileH/2) + 36);
      txt2.setAttribute('text-anchor', 'middle');
      txt2.setAttribute('fill', labelColor);
      txt2.setAttribute('font-size', '12');
      txt2.setAttribute('font-weight', '700');
      txt2.textContent = line2;
      g.appendChild(txt2);
    }

    const typeTxt = document.createElementNS(ns, 'text');
    typeTxt.setAttribute('x', '0');
    typeTxt.setAttribute('y', -(tileH/2) + 52);
    typeTxt.setAttribute('text-anchor', 'middle');
    typeTxt.setAttribute('fill', typeFillColor);
    typeTxt.setAttribute('font-size', '9');
    const typeLabels = { root: '🌳 ROOT', input: '🧠 INPUT', outcome: '📊 OUTCOME' };
    typeTxt.textContent = typeLabels[n._type] || '📊 OUTCOME';
    g.appendChild(typeTxt);

    const maxDescLen = 35;
    const desc = n._description || '';
    if (desc.length > 0) {
      const descLines = [];
      let remaining = desc;
      while (remaining.length > 0 && descLines.length < 3) {
        if (remaining.length <= maxDescLen) {
          descLines.push(remaining);
          break;
        }
        let split = remaining.lastIndexOf(' ', maxDescLen);
        if (split < 5) split = maxDescLen;
        descLines.push(remaining.substring(0, split).trim());
        remaining = remaining.substring(split).trim();
      }
      descLines.forEach((line, i) => {
        const dtxt = document.createElementNS(ns, 'text');
        dtxt.setAttribute('x', '0');
        dtxt.setAttribute('y', -(tileH/2) + 66 + i * 13);
        dtxt.setAttribute('text-anchor', 'middle');
        dtxt.setAttribute('fill', isDark ? '#aaa' : '#666');
        dtxt.setAttribute('font-size', '8');
        dtxt.textContent = line;
        g.appendChild(dtxt);
      });
    }

    const tip = (n._tips && n._tips.length) ? n._tips[0] : '';
    if (tip) {
      const tipLines = [];
      let remainingTip = '💡 ' + tip;
      const maxTipLen = 35;
      while (remainingTip.length > 0 && tipLines.length < 2) {
        if (remainingTip.length <= maxTipLen) {
          tipLines.push(remainingTip);
          break;
        }
        let split = remainingTip.lastIndexOf(' ', maxTipLen);
        if (split < 5) split = maxTipLen;
        tipLines.push(remainingTip.substring(0, split).trim());
        remainingTip = remainingTip.substring(split).trim();
      }
      const descLinesCount = Math.min(computeTextLines(desc, maxDescLen), 3);
      const tipStartY = -(tileH/2) + 66 + descLinesCount * 13 + 4;
      tipLines.forEach((line, i) => {
        const ttxt = document.createElementNS(ns, 'text');
        ttxt.setAttribute('x', '0');
        ttxt.setAttribute('y', tipStartY + i * 11);
        ttxt.setAttribute('text-anchor', 'middle');
        ttxt.setAttribute('fill', '#7ec8a0');
        ttxt.setAttribute('font-size', '8');
        ttxt.textContent = line;
        g.appendChild(ttxt);
      });
    }

    const depthTxt = document.createElementNS(ns, 'text');
    depthTxt.setAttribute('x', -CARD_W/2 + 10);
    depthTxt.setAttribute('y', tileH/2 - 10);
    depthTxt.setAttribute('fill', isDark ? '#c9aaff' : '#7c5cbf');
    depthTxt.setAttribute('font-size', '10');
    depthTxt.textContent = 'D' + (n.depth || 0);
    g.appendChild(depthTxt);

    const chTxt = document.createElementNS(ns, 'text');
    chTxt.setAttribute('x', CARD_W/2 - 10);
    chTxt.setAttribute('y', tileH/2 - 10);
    chTxt.setAttribute('text-anchor', 'end');
    chTxt.setAttribute('fill', isDark ? '#7ecfff' : '#2e86ab');
    chTxt.setAttribute('font-size', '10');
    chTxt.textContent = '↳' + (n._childrenCount || 0);
    g.appendChild(chTxt);

    svgDoc.appendChild(g);
  });

  const title = document.createElementNS(ns, 'text');
  title.setAttribute('x', totalW / 2);
  title.setAttribute('y', 30);
  title.setAttribute('text-anchor', 'middle');
  title.setAttribute('fill', labelColor);
  title.setAttribute('font-size', '18');
  title.setAttribute('font-weight', '700');
  const rootLabel = exportNodes.find(n => n.depth === 0)?._label || 'Decision Tree';
  title.textContent = isPathOnly ? `📍 Path: ${rootLabel}` : `🧠 ${rootLabel}`;
  svgDoc.appendChild(title);

  return svgDoc;
}

function exportSvg() {
  const svgDoc = buildExportSvg(false);
  if (!svgDoc) { showToast('Generate a tree first', 'error'); return; }
  const svgData = new XMLSerializer().serializeToString(svgDoc);
  const blob = new Blob([svgData], {type:'image/svg+xml'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a'); a.href=url; a.download='overthinker_tree.svg'; a.click();
  URL.revokeObjectURL(url);
  showToast('SVG exported!','success');
}

function exportPathSvg() {
  if (!selectedNodeId) { showToast('Select a node first', 'error'); return; }
  const svgDoc = buildExportSvg(true);
  if (!svgDoc) { showToast('Path export failed', 'error'); return; }
  const svgData = new XMLSerializer().serializeToString(svgDoc);
  const blob = new Blob([svgData], {type:'image/svg+xml'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a'); a.href=url; a.download='overthinker_path.svg'; a.click();
  URL.revokeObjectURL(url);
  showToast('Path SVG exported!','success');
}

async function exportJson() {
    try {
        const data = await apiPost('/export_json', {});
        const blob = new Blob([JSON.stringify(data, null, 2)], {type:'application/json'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href=url; a.download='overthinker_tree.json'; a.click();
        URL.revokeObjectURL(url);
        showToast('JSON exported!','success');
    } catch(e) { showToast('Export failed: '+e.message, 'error'); }
}

async function exportPathJson() {
  if (!selectedNodeId) { showToast('Select a node first', 'error'); return; }
  try {
    const data = await apiPost('/export_path_json', { node_id: selectedNodeId });
    const blob = new Blob([JSON.stringify(data, null, 2)], {type:'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href=url; a.download='overthinker_path.json'; a.click();
    URL.revokeObjectURL(url);
    showToast('Path JSON exported!','success');
  } catch(e) { showToast('Export failed: '+e.message, 'error'); }
}

async function exportPathMd() {
  if (!selectedNodeId) { showToast('Select a node first', 'error'); return; }
  try {
    const res = await fetch('/export_path_md', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ session_id: getSessionId(), node_id: selectedNodeId })
    });
    if (!res.ok) {
      const errData = await res.json().catch(() => ({}));
      throw new Error(errData.detail || `HTTP ${res.status}`);
    }
    const md = await res.text();
    const blob = new Blob([md], {type:'text/markdown'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href=url; a.download='overthinker_path.md'; a.click();
    URL.revokeObjectURL(url);
    showToast('Path Markdown exported!','success');
  } catch(e) { showToast('Export failed: '+e.message, 'error'); }
}

function svgToPng(svgDoc, filename) {
  const svgData = new XMLSerializer().serializeToString(svgDoc);
  const blob = new Blob([svgData], {type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const img = new Image();
  const container = document.getElementById('ensurePngContainer');
  container.appendChild(img);
  img.onload = function() {
    try {
      const cv = document.createElement('canvas');
      const ctx = cv.getContext('2d');
      cv.width = img.width * 2;
      cv.height = img.height * 2;
      ctx.scale(2, 2);
      ctx.drawImage(img, 0, 0);
      URL.revokeObjectURL(url);
      cv.toBlob(function(pngBlob) {
        if (!pngBlob) { showToast('PNG export failed', 'error'); container.removeChild(img); return; }
        const pngUrl = URL.createObjectURL(pngBlob);
        const a = document.createElement('a'); a.href=pngUrl; a.download=filename; a.click();
        URL.revokeObjectURL(pngUrl);
        container.removeChild(img);
        showToast('PNG exported!','success');
      }, 'image/png');
    } catch(e) {
      showToast('PNG export failed: ' + e.message, 'error');
      container.removeChild(img);
    }
  };
  img.onerror = function() {
    showToast('PNG export failed, try SVG', 'error');
    URL.revokeObjectURL(url);
    container.removeChild(img);
  };
  img.src = url;
}

function exportPng() {
  const svgDoc = buildExportSvg(false);
  if (!svgDoc) { showToast('Generate a tree first', 'error'); return; }
  showToast('Generating PNG...', 'info');
  svgToPng(svgDoc, 'overthinker_tree.png');
}

function exportPathPng() {
  if (!selectedNodeId) { showToast('Select a node first', 'error'); return; }
  const svgDoc = buildExportSvg(true);
  if (!svgDoc) { showToast('Path export failed', 'error'); return; }
  showToast('Generating Path PNG...', 'info');
  svgToPng(svgDoc, 'overthinker_path.png');
}

function exportMarkdown() {
    if (!nodes.length) { showToast('Generate a tree first', 'error'); return; }
    let md = '# 🧠 Overthinker Decision Tree\n\n';
    const root = nodes.find(n => n.depth === 0);
    if (root) {
        md += `## 🌳 Root Decision\n**${root._label}**\n\n`;
        if (root._description) md += `> ${root._description}\n\n`;
    }
    function collectMd(nodeId, depth) {
        const indent = '  '.repeat(depth);
        const node = nodes.find(n => n.id === nodeId);
        if (!node) return;
        const emoji = node._type === 'root' ? '🌳' : node._type === 'outcome' ? '📊' : '🧠';
        md += `${indent}- ${emoji} **[${node._type.toUpperCase()}] ${node._label}**\n`;
        if (node._description) md += `${indent}  - _${node._description.substring(0, 100)}_\n`;
        if (node._tips && node._tips.length) md += `${indent}  - 💡 ${node._tips[0]}\n`;
        md += '\n';
        const childIds = [];
        parentMap.forEach((pid, cid) => { if (pid === nodeId) childIds.push(cid); });
        childIds.forEach(cid => collectMd(cid, depth+1));
    }
    if (root) collectMd(root.id, 0);
    const blob = new Blob([md], {type:'text/markdown'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href=url; a.download='overthinker_tree.md'; a.click();
    URL.revokeObjectURL(url);
    showToast('Markdown exported!','success');
}

document.getElementById('export-svg-btn').addEventListener('click', exportSvg);
document.getElementById('export-json-btn').addEventListener('click', exportJson);
document.getElementById('export-md-btn').addEventListener('click', exportMarkdown);
document.getElementById('export-png-btn').addEventListener('click', exportPng);

document.getElementById('path-export-svg').addEventListener('click', exportPathSvg);
document.getElementById('path-export-json').addEventListener('click', exportPathJson);
document.getElementById('path-export-md').addEventListener('click', exportPathMd);
document.getElementById('path-export-png').addEventListener('click', exportPathPng);

// ---------- FIT / CLEAR ----------
function fitView() {
  if (svg && zoomBehavior) {
    svg.transition().duration(500).call(zoomBehavior.transform, d3.zoomIdentity);
  }
}

function clearTree() {
  nodes=[]; links=[]; parentMap=new Map(); expandedSet.clear(); selectedNodeId=null; sessionId='';
  localStorage.removeItem('overthinker_session_id');
  if (svg) svg.selectAll('*').remove();
  document.getElementById('toolbar').style.display = 'none';
  removeForeignPopup();
  sidebarEl.classList.remove('open');
  sidebarTab.classList.remove('hidden');
  updateStats();
  inputEl.value = '';
  showToast('Tree cleared', 'info');
}

document.getElementById('fit-btn').addEventListener('click', fitView);
document.getElementById('clear-btn').addEventListener('click', clearTree);

// ---------- UPLOAD TRACE BUTTON ----------
document.getElementById('upload-trace-btn').addEventListener('click', async () => {
  if (!nodes || nodes.length === 0) {
    showToast('Generate a tree first', 'error');
    return;
  }
  showToast('Uploading trace to HF dataset...', 'info');
  try {
    const result = await apiPost('/upload_trace', {});
    if (result.status === 'success') {
      showToast(result.message, 'success');
    } else {
      showToast(result.message || 'Upload failed', 'error');
    }
  } catch(e) {
    showToast('Upload failed: ' + e.message, 'error');
  }
});

// ---------- KEYBOARD SHORTCUTS ----------
document.addEventListener('keydown', (ev) => {
  if (ev.target.tagName === 'TEXTAREA' || ev.target.tagName === 'INPUT') return;
  const key = ev.key.toLowerCase();
  if (key === 'f') { fitView(); ev.preventDefault(); }
  if (key === 'c') { clearTree(); ev.preventDefault(); }
  if (key === 'e' && selectedNodeId) {
    const node = nodes.find(n => n.id === selectedNodeId);
    if (node && !expandedSet.has(selectedNodeId)) exploreNode(selectedNodeId, parseInt(branchInput.value)||3, null);
    ev.preventDefault();
  }
  if (key === 'r' && selectedNodeId) {
    const comment = prompt('Enter your thought:');
    if (comment) exploreNode(selectedNodeId, parseInt(branchInput.value)||3, comment);
    ev.preventDefault();
  }
  if (key === 'a' && selectedNodeId) { addOptionsToNode(selectedNodeId, parseInt(branchInput.value)||3); ev.preventDefault(); }
  if (key === 'escape') {
    document.getElementById('context-menu').style.display = 'none';
    selectedNodeId = null; removeForeignPopup(); clearHighlights();
    sidebarEl.classList.remove('open');
    sidebarTab.classList.remove('hidden');
  }
});

// ---------- THEME ----------
function toggleTheme() {
  isDark = !isDark;
  document.body.classList.toggle('light', !isDark);
  document.getElementById('theme-btn').textContent = isDark ? '🌓' : '🌞';
  localStorage.setItem('overthinker_theme', isDark ? 'dark' : 'light');
}
document.getElementById('theme-btn').addEventListener('click', toggleTheme);

// ---------- INFO / HELP DROPDOWN ----------
document.getElementById('info-btn').addEventListener('click', () => {
  document.getElementById('info-dropdown').classList.add('show');
});
document.getElementById('help-btn').addEventListener('click', () => {
  document.getElementById('help-dropdown').classList.add('show');
});
document.getElementById('info-close').addEventListener('click', () => {
  document.getElementById('info-dropdown').classList.remove('show');
});
document.getElementById('help-close').addEventListener('click', () => {
  document.getElementById('help-dropdown').classList.remove('show');
});
document.querySelectorAll('.dropdown-overlay').forEach(el => {
  el.addEventListener('click', (e) => {
    if (e.target === el) el.classList.remove('show');
  });
});

// ---------- SAMPLE ----------
document.getElementById('sample-btn').addEventListener('click', () => {
  const samples = [
    "Should I quit my job to start a startup?",
    "Should I move to a new city for a job?",
    "Should I invest my savings in the stock market?",
    "Should I learn to code or go to business school?",
    "Should I buy a house now or wait another year?",
    "Should I confront my friend about a problem?",
    "Should I adopt a pet?"
  ];
  inputEl.value = samples[Math.floor(Math.random() * samples.length)];
  generateTree();
});

// ---------- INIT ----------
getSessionId();
initSvg();
if (localStorage.getItem('overthinker_theme') === 'light') toggleTheme();

console.log('🧠 Overthinker - Running), ID:', sessionId);
</script>
</body>
</html>