From 85e1a4a778060b30165d2ede238b068095018a85 Mon Sep 17 00:00:00 2001
From: Jay <jay@Jayui-MacBookPro.local>
Date: Sat, 18 Apr 2026 16:50:18 +0900
Subject: [PATCH] chore: add visualizer draft template to workspace

---
 brain-viz.html | 204 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 brain-viz.html
diff --git a/brain-viz.html b/brain-viz.html
new file mode 100644
index 0000000..7448fcc
--- /dev/null
+++ b/brain-viz.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>Connect AI - Neural Construct</title>
+  <style>
+    body { margin: 0; padding: 0; background: #0a0a0a; overflow: hidden; font-family: 'SF Pro Display', -apple-system, sans-serif; }
+    #ui-layer { position: absolute; top: 20px; left: 24px; z-index: 10; pointer-events: none; }
+    #ui-layer h1 { font-size: 22px; margin: 0 0 4px 0; font-weight: 800; letter-spacing: -0.5px; color: #e0e0e0; }
+    #ui-layer h1 span { color: #00cc44; }
+    #ui-layer p { margin: 0; font-size: 12px; color: #555; letter-spacing: 0.3px; }
+    #mem-status { color: #888; font-family: 'SF Mono', monospace; font-size: 11px; }
+    canvas { cursor: grab; }
+    canvas:active { cursor: grabbing; }
+  </style>
+  <script src="https://unpkg.com/force-graph"></script>
+</head>
+<body>
+  <div id="ui-layer">
+    <h1>✦ <span>Neural Construct</span></h1>
+    <p id="mem-status">loading...</p>
+  </div>
+  
+  <div id="graph"></div>
+
+  <script>
+    // ── Realistic knowledge node names ──
+    const clusters = {
+      'AI/ML': [
+        'Transformer Architecture', 'Attention Mechanism', 'Backpropagation', 'Gradient Descent',
+        'Neural Network Layers', 'Loss Function', 'Embedding Space', 'Tokenization',
+        'Fine-tuning', 'Transfer Learning', 'LoRA Adapter', 'RLHF', 'DPO Training',
+        'Prompt Engineering', 'Chain of Thought', 'RAG Pipeline', 'Vector Database',
+      ],
+      'Programming': [
+        'TypeScript', 'React Components', 'Node.js Runtime', 'REST API Design',
+        'GraphQL Schema', 'WebSocket Protocol', 'Docker Container', 'Kubernetes',
+        'CI/CD Pipeline', 'Git Version Control', 'Database Schema', 'SQL Optimization',
+        'Redis Caching', 'Message Queue', 'Microservices', 'Load Balancing',
+      ],
+      'YouTube/Business': [
+        'YouTube Algorithm', 'CTR Optimization', 'Thumbnail Design', 'Title A/B Testing',
+        'Audience Retention', 'Content Calendar', 'Funnel Strategy', 'Email Marketing',
+        'SEO Fundamentals', 'Analytics Dashboard', 'Conversion Rate', 'Growth Hacking',
+        'Brand Positioning', 'Community Building', 'Monetization', 'Ad Revenue Model',
+      ],
+      'Tools/Platform': [
+        'VS Code Extension API', 'Ollama Runtime', 'Gemma Model', 'LLaMA Architecture',
+        'Google Veo', 'Nanobanana Pro', 'NotebookLM', 'Google Stitch',
+        'MCP Protocol', 'Antigravity CLI', 'Agent University', 'Brain Pack Format',
+        'OPAL Framework', 'Gemini API', 'DeepSeek Model', 'Whisper STT',
+      ],
+      'Knowledge Mgmt': [
+        'Second Brain Method', 'Zettelkasten System', 'Spaced Repetition', 'Active Recall',
+        'Mind Mapping', 'Knowledge Graph', 'Semantic Search', 'Document Chunking',
+        'Metadata Extraction', 'Tag Taxonomy', 'Bidirectional Links', 'Atomic Notes',
+      ],
+      'Content/Korean': [
+        '#AI수익화', '#바이브코딩', '#1인기업', '#AI창업',
+        '#코딩기초', '#시니어전성시대', '#자기개발', '#AI쇼핑몰',
+        '#GPT사용법', '#사이트만들기', '#수익화모델', '#노코드',
+        '#AI자동수익', '#VEO3.1', '#왕초보가이드', '#디지털건물주',
+      ],
+      'Math/Science': [
+        'Linear Algebra', 'Probability Theory', 'Calculus', 'Statistics',
+        'Information Theory', 'Game Theory', 'Optimization', 'Graph Theory',
+      ],
+      'MrBeast Pack': [
+        'MrBeast Viral Formula', 'Hook Strategy', 'Retention Graph Analysis',
+        'Challenge Video Format', 'Giveaway ROI Model', 'Production Scaling',
+        'Clickbait Psychology', 'First 30s Rule', 'Re-watch Value',
+        'Comment Engagement', 'Shorts Repurposing', 'Thumbnail Contrast',
+        'Emotional Arc Design', 'Pacing Rhythm', 'Sound Design Impact',
+      ],
+    };
+    
+    let nodeId = 0;
+    const gData = { nodes: [], links: [] };
+    const groupIds = {};
+
+    // Core hub
+    gData.nodes.push({ id: nodeId++, group: -1, name: 'Core Agent', val: 22, connections: 0 });
+
+    // Build nodes per cluster
+    let groupIdx = 0;
+    Object.entries(clusters).forEach(([clusterName, names]) => {
+      groupIds[clusterName] = groupIdx;
+      names.forEach(name => {
+        gData.nodes.push({ id: nodeId++, group: groupIdx, name, val: 2, connections: 0 });
+      });
+      groupIdx++;
+    });
+    
+    // ── Build connections ──
+    const nodesByGroup = {};
+    gData.nodes.forEach(n => {
+      if (n.group < 0) return;
+      if (!nodesByGroup[n.group]) nodesByGroup[n.group] = [];
+      nodesByGroup[n.group].push(n);
+    });
+    
+    // Dense intra-cluster
+    Object.values(nodesByGroup).forEach(group => {
+      for (let i = 0; i < group.length; i++) {
+        for (let j = i + 1; j < group.length; j++) {
+          if (Math.random() < 0.22) {
+            gData.links.push({ source: group[i].id, target: group[j].id });
+            group[i].connections++;
+            group[j].connections++;
+          }
+        }
+      }
+    });
+    
+    // Hub connections
+    gData.nodes.forEach(n => {
+      if (n.group >= 0 && Math.random() < 0.05) {
+        gData.links.push({ source: n.id, target: 0 });
+        n.connections++;
+        gData.nodes[0].connections++;
+      }
+    });
+    
+    // Cross-cluster bridges
+    for (let i = 0; i < 35; i++) {
+      const a = 1 + Math.floor(Math.random() * (gData.nodes.length - 1));
+      const b = 1 + Math.floor(Math.random() * (gData.nodes.length - 1));
+      if (a !== b && gData.nodes[a].group !== gData.nodes[b].group) {
+        gData.links.push({ source: a, target: b });
+        gData.nodes[a].connections++;
+        gData.nodes[b].connections++;
+      }
+    }
+    
+    // Size by connections
+    gData.nodes.forEach(n => { n.val = Math.max(2, n.connections * 1.5); });
+    
+    document.getElementById('mem-status').textContent = 
+      gData.nodes.length + ' nodes · ' + gData.links.length + ' synapses';
+
+    // ── Colors per cluster ──
+    const groupColors = ['#00cc44','#00b7ff','#ff6b6b','#ffaa33','#aa66ff','#00cc44','#66cccc','#00ff88'];
+
+    // ── Render ──
+    const Graph = ForceGraph()(document.getElementById('graph'))
+      .backgroundColor('#0a0a0a')
+      .nodeCanvasObject((node, ctx, globalScale) => {
+        const r = Math.sqrt(node.val) * 1.8;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, r, 0, 2 * Math.PI);
+        
+        if (node.group === -1) {
+          ctx.fillStyle = '#333';
+          ctx.fill();
+          ctx.strokeStyle = '#00cc44';
+          ctx.lineWidth = 1.5;
+          ctx.stroke();
+        } else if (node.connections > 4) {
+          ctx.fillStyle = groupColors[node.group] || '#00cc44';
+          ctx.fill();
+        } else {
+          ctx.fillStyle = '#2a2a2a';
+          ctx.fill();
+        }
+        
+        // Labels — show based on zoom
+        const showLabel = globalScale > 1.2 || node.connections > 3 || node.group === -1;
+        if (showLabel) {
+          const fontSize = Math.max(2.5, Math.min(5, 11 / globalScale));
+          ctx.font = `${fontSize}px -apple-system, sans-serif`;
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'top';
+          ctx.fillStyle = node.connections > 4 ? '#ccc' : '#555';
+          ctx.fillText(node.name, node.x, node.y + r + 1.5);
+        }
+      })
+      .nodePointerAreaPaint((node, color, ctx) => {
+        const r = Math.sqrt(node.val) * 1.8 + 4;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, r, 0, 2 * Math.PI);
+        ctx.fillStyle = color;
+        ctx.fill();
+      })
+      .linkColor(() => 'rgba(255,255,255,0.04)')
+      .linkWidth(0.3)
+      .d3VelocityDecay(0.3)
+      .warmupTicks(150)
+      .cooldownTicks(300)
+      .graphData(gData);
+
+    Graph.d3Force('charge').strength(-100);
+    Graph.d3Force('link').distance(35);
+
+    // Click to zoom
+    Graph.onNodeClick(node => {
+      Graph.centerAt(node.x, node.y, 800);
+      Graph.zoom(4, 1200);
+    });
+    
+    // Start with a nice fit
+    setTimeout(() => Graph.zoomToFit(1500, 40), 500);
+  </script>
+</body>
+</html>
