const { useState: useStateH } = window.React; /* How it works — 3 step */ const HowItWorks = ({ lang }) => { const steps = lang === "ja" ? [ { n: "01", t: "チャットを開く", d: "ChatGPT・Claude・Geminiを開いたまま、サイドパネルを起動。", mono: "OPEN" }, { n: "02", t: "生成を押す", d: "会話全体を読み取り、階層構造に変換します。", mono: "GENERATE" }, { n: "03", t: "考えを辿る", d: "ノードをクリックして分岐、編集、再生成。時系列の外に出る。", mono: "EXPLORE" }, ] : [ { n: "01", t: "Open a chat", d: "Keep ChatGPT, Claude, or Gemini open. Launch the side panel.", mono: "OPEN" }, { n: "02", t: "Press generate", d: "The whole conversation is parsed into a hierarchy in one pass.", mono: "GENERATE" }, { n: "03", t: "Trace your thinking", d: "Click any node to branch, edit, regenerate. Escape the timeline.", mono: "EXPLORE" }, ]; const COUNT = steps.length; const [demoStep, setDemoStep] = useStateH(0); const sectionRef = window.React.useRef(null); return (
03 STEPS / {lang === "ja" ? "しくみ" : "HOW IT WORKS"}

{lang === "ja" ? <>時系列を辿る。 : <>Break the timeline.}

{steps.map((s, i) => (
{s.n}
{s.mono}
{s.t}
{s.d}
))}
); }; /* Step-aware animated mock screen for HowItWorks */ const HowDemo = ({ lang, step }) => { const ja = lang === "ja"; // Track which steps have been visited so animations play once const visited = window.React.useRef(new Set()); const [phase, setPhase] = useStateH("idle"); window.React.useEffect(() => { if (visited.current.has(step)) return; visited.current.add(step); setPhase("enter"); const t = setTimeout(() => setPhase("active"), 600); return () => clearTimeout(t); }, [step]); const tabs = ja ? ["販売戦略レビュー", "JBN UI改善", "チェックイン画面"] : ["Sales strategy", "JP UI review", "Check-in screen"]; const msgs = ja ? [ { who: "user", t: "明日クライアント（D2Cのスキンケアブランド、年商18億）と販売戦略のキックオフ。" }, { who: "ai", t: "CACが1.4倍になってる時点で、広告倍プッシュは赤字を倍にするだけの確率が高いです。" }, ] : [ { who: "user", t: "Kicking off sales strategy tomorrow with the D2C skincare client (¥1.8B revenue)." }, { who: "ai", t: "With CAC at 1.4×, doubling ad spend likely just doubles the losses." }, ]; // Cursor position per step const cursorPos = step === 0 ? { left: "22%", top: "14%", opacity: phase !== "idle" ? 1 : 0 } : step === 1 ? { left: "82%", top: "38%", opacity: phase !== "idle" ? 1 : 0 } : { left: "78%", top: "55%", opacity: phase !== "idle" ? 1 : 0 }; const showChat = step >= 0 && phase !== "idle"; const showPanel = step >= 1; const showMindmap = step >= 2; return (
{/* titlebar */}
{["#FF5F57","#FEBC2E","#28C840"].map((c,i) => ( ))}
Chrome — chatgpt.com / LLMindMap
{/* body */}
{/* Chat side */}
{/* Chat header with tabs */}
CHATGPT {tabs.map((tab, i) => ( {tab} ))}
{/* Chat messages */}
{msgs.map((m, i) => (
{m.who === "ai" && (
AI
)}
{m.t}
{m.who === "user" && (
YOU
)}
))}
{/* Input bar */}
{ja ? "メッセージを送信…" : "Send a message…"}
{/* LLMindMap brand mark — stays at bottom-right of chat pane */}
{/* Extension panel — slides in at step 1 */}
{/* Animated cursor */}
{/* click ripple */}
); }; /* Mini extension panel for HowItWorks demo */ const HowDemoPanel = ({ lang, showMindmap }) => { const ja = lang === "ja"; const railIcons = [ "M6 4L6 14L10 10.5L14 16L16 15L12 9L16 8L6 4", "M4.5 10 A4.5 4.5 0 0 1 13 7.5 M13 4.5 L13 7.5 L10 7.5", "M3 3 L9 3 L15 9 L9 15 L3 9 Z", "M4 8 A4 4 0 1 1 12 8 A4 4 0 1 1 4 8 M11 11 L15 15", "M5 3 L13 3 L13 15 L9 12 L5 15 Z", ]; return (
{/* Rail */}
{railIcons.map((d, i) => (
))}
{/* Content */}
{/* Header */}
LLMindMap Trace, edit, and surpass any LLM chat
{/* Mindmap area */}
{/* branches */} {[ { x: 90, y: 60 }, { x: 210, y: 50 }, { x: 220, y: 140 }, { x: 80, y: 150 }, { x: 180, y: 170 }, { x: 120, y: 40 }, ].map((p, i) => ( ))} {/* leaves */} {[ { x: 60, y: 40, c: "#E74C3C" }, { x: 90, y: 60, c: "#2E86DE" }, { x: 120, y: 40, c: "#9B59B6" }, { x: 210, y: 50, c: "#27AE60" }, { x: 240, y: 35, c: "#F39C12" }, { x: 220, y: 140, c: "#E74C3C" }, { x: 250, y: 155, c: "#2E86DE" }, { x: 80, y: 150, c: "#9B59B6" }, { x: 50, y: 165, c: "#27AE60" }, { x: 180, y: 170, c: "#F39C12" }, ].map((p, i) => ( ))} {/* hub */} {/* sub branches */} {[ [90, 60, 60, 40], [120, 40, 90, 60], [210, 50, 240, 35], [220, 140, 250, 155], [80, 150, 50, 165], ].map(([x1, y1, x2, y2], i) => ( ))}
); }; /* Features grid */ const FeaturesGrid = ({ lang }) => { const items = lang === "ja" ? [ { mono: "分類", t: "カテゴリ自動分類", d: "課題・質問・アイデア・意思決定・情報・余談・未分類。色でパターンが見える。", v: "chips" }, { mono: "検索", t: "ノード横断検索", d: "すべてのマップを横断して、一語で過去の思考に戻る。", v: "search" }, { mono: "スター", t: "お気に入り", d: "後で戻りたいノードをマーク。時間軸に縛られない読書リスト。", v: "star" }, { mono: "PNG / PDF", t: "ワンクリック書き出し", d: "思考地図をPNGまたはPDFで保存。共有も振り返りも一瞬で。", v: "export" }, { mono: "履歴", t: "ローカル無限履歴", d: "すべてはブラウザに保存。サーバーに送信しない。", v: "history" }, { mono: "JA / EN", t: "日英バイリンガル", d: "UIもエクスポートも、日本語と英語を切り替え。", v: "bilingual" }, { mono: "分析", t: "構造ギャップ検出", d: "チャットでは見えない枝の偏りや孤立した論点を、グラフ構造から発見。", v: "gaps", pro: true }, { mono: "LIVE", t: "ライブ成長", d: "会話の進行に合わせてマインドマップがリアルタイムで育つ。", v: "live", pro: true }, { mono: "思考", t: "思考プロファイル", d: "あなたの思考パターンを可視化。探索深度、評価率、構造変更を分析。", v: "profile", pro: true }, { mono: "統合", t: "グラフ統合", d: "複数の会話を1枚の地図に。重複は自動でマージされる。", v: "merge", upcoming: true }, ] : [ { mono: "CLASSIFY", t: "Color-by-category", d: "Seven roles in plain sight: issue, question, idea, decision, info, aside, unclassified.", v: "chips" }, { mono: "SEARCH", t: "Cross-map search", d: "One query against every map you've ever made. Old thinking, one word away.", v: "search" }, { mono: "STAR", t: "Starred nodes", d: "A reading list that isn't time-ordered. Mark thoughts to return to.", v: "star" }, { mono: "PNG / PDF", t: "One-click export", d: "Save your mind map as PNG or PDF. Share or revisit in seconds.", v: "export" }, { mono: "HISTORY", t: "Local, unbounded", d: "Everything stays in your browser. Nothing ships to a server.", v: "history" }, { mono: "JA / EN", t: "Bilingual throughout", d: "Switch the interface and exports between Japanese and English.", v: "bilingual" }, { mono: "ANALYSIS", t: "Structural gap detection", d: "Find branch imbalance, orphan conclusions, and blind spots invisible in chat.", v: "gaps", pro: true }, { mono: "LIVE", t: "Live grow", d: "Your mindmap grows in real time as the conversation unfolds.", v: "live", pro: true }, { mono: "PROFILE", t: "Thinking profile", d: "Visualize your thinking patterns: exploration depth, evaluation rate, restructuring.", v: "profile", pro: true }, { mono: "MERGE", t: "Graph merging", d: "Multiple conversations fold into a single atlas. Duplicates auto-merge.", v: "merge", upcoming: true }, ]; const COUNT = items.length; const [active, setActive] = useStateH(0); const sectionRef = window.React.useRef(null); window.React.useEffect(() => { let raf = 0; const compute = () => { raf = 0; const el = sectionRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const scrolled = -rect.top; const scrollable = el.offsetHeight - window.innerHeight; if (scrollable <= 0) return; const progress = Math.max(0, Math.min(1, scrolled / scrollable)); setActive(Math.min(COUNT - 1, Math.floor(progress * COUNT))); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); }; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); compute(); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; }, [lang]); return (
FEATURES / {lang === "ja" ? "機能" : "CAPABILITIES"}

{lang === "ja" ? <>より深い思考のための、十の道具。 : <>Ten tools for thinking, not just chatting.}

{items.map((it, i) => (
setActive(i)} style={{ display: "flex", flexDirection: "column", padding: "8px 12px", alignItems: "flex-start", minHeight: 0, overflow: "hidden", cursor: "pointer", opacity: i === active ? 1 : 0.5, background: i === active ? "var(--accent-soft)" : "transparent", borderRadius: 12, border: i === active ? "1px solid rgba(201,88,60,0.2)" : "1px solid transparent", transition: "none", }}>
{String(i + 1).padStart(2, "0")}
{it.mono} {it.pro && PRO} {it.upcoming && COMING SOON}
{it.t}
{it.d}
))}
); }; const FeatureThumb = ({ v, mono, title, upcoming, pro }) => (
{mono} {pro && PRO} {upcoming && COMING SOON} {title}
); const FeatureVignette = ({ v }) => { if (v === "chips") return ; if (v === "search") return ; if (v === "star") return ; if (v === "export") return ; if (v === "history") return ; if (v === "bilingual") return ; if (v === "merge") return ; if (v === "gaps") return ; if (v === "live") return ; if (v === "profile") return ; return null; }; const _C = { accent: "#C9583C", slate: "#536A8A", iris: "#8F6FA3", sage: "#7A9A85", ochre: "#B8864A", ash: "#8A7D86", panelInk: "#3B352D", panelMute: "#8C8070", panel: "#F5F0E8", bg: "#F2EFE8", }; const VChips = () => { // Pellets positioned at their corresponding node locations (viewBox 420×440) // issue(accent) → チャネル別分解 mid (210,128), info(sage) → 時系列推移 mid (145,272) // question(ochre) → 2回目購入率 mid (280,272), decision(slate) → LTV改善 mid (210,320) // idea(iris) → 広告経由 leaf (152,72), aside(ash) → 自然流入 leaf (270,72) const pellets = [ { c: _C.accent, l: "issue", n: 12, x: "50%", y: "26%" }, { c: _C.sage, l: "info", n: 5, x: "28%", y: "58%" }, { c: _C.ochre, l: "question", n: 8, x: "72%", y: "58%" }, { c: _C.slate, l: "decision", n: 9, x: "50%", y: "70%" }, { c: _C.iris, l: "idea", n: 7, x: "30%", y: "12%" }, { c: _C.ash, l: "aside", n: 3, x: "70%", y: "12%" }, ]; return (
{/* Background mindmap */} {/* Pellets overlaid at node positions */} {pellets.map((p, i) => ( {p.l} {p.n} ))}
); }; const VSearch = () => (
cache layer 3 MAPS
{[ { c: _C.iris, t: "Cache layer", m: "Eval pipeline · today", active: true }, { c: _C.iris, t: "L2 cache strategy", m: "Retrieval v3 · 2d ago" }, { c: _C.accent, t: "Cache invalidation", m: "8k ceiling · 6d ago" }, ].map((r, i) => (
{r.t} {r.m}
))}
); const VStar = () => ( ★ STARRED Cache layer ); const VMerge = () => ( {/* Left map — organic radial tree */} {/* branches */} {/* mid dots */} {/* leaf dots */} {/* sub-leaves from mid dots */} {/* Right map — different shape */} {/* mid dots */} {/* leaf dots */} {/* sub-leaves */} {/* Connecting merge links — dashed bridges between the two maps */} {/* Merge badge */} M ); const VExport = () => (
{[ { ext: "PNG", icon: "M3 5h18v14H3z M8.5 10a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z M21 16l-5-5-10 8", color: _C.accent }, { ext: "PDF", icon: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z M14 3v5h5 M9 14h6 M9 17h4", color: _C.slate }, ].map((f, i) => (
.{f.ext}
))}
); const VHistory = () => (
{[ { t: "LLM evaluation pipeline", m: "today", active: true }, { t: "Retrieval v3", m: "2d ago" }, { t: "Onboarding rewrite", m: "5d ago" }, { t: "Pricing tier study", m: "1w ago" }, { t: "8k ceiling", m: "2w ago" }, ].map((r, i) => (
{r.t} {r.m}
))}
LOCAL · 247 MAPS
); const VBilingual = () => (
JA EN
{[ { lab: "課題", text: "取得が遅い", jp: true }, { lab: "ISSUE", text: "Retrieval latency", jp: false }, ].map((n, i) => (
{n.lab}
{n.text}
))}
); const VGaps = () => (
{[ { icon: "M3 12h4l3-9 4 18 3-9h4", label: "Branch imbalance", desc: "Left: 12 nodes · Right: 3 nodes", color: _C.accent }, { icon: "M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0 M12 5v-2 M12 21v-2 M5 12H3 M21 12h-2", label: "Orphan conclusion", desc: "\"Cache layer\" — no parent context", color: _C.ochre }, { icon: "M9 18l6-6-6-6", label: "Asymmetric depth", desc: "Max 5 vs avg 2.1", color: _C.slate }, ].map((f, i) => (
{f.label}
{f.desc}
))}
); const VLive = () => (
GROWING
); const VProfile = () => (
{[ { label: "探索深度", value: "3.8", sub: "Exploration Depth", pct: 76, color: _C.slate }, { label: "評価率", value: "42%", sub: "Evaluation Rate", pct: 42, color: _C.sage }, { label: "構造変更", value: "7", sub: "Restructuring", pct: 58, color: _C.iris }, ].map((s, i) => (
{s.label} {s.value}
{s.sub}
))}
); /* In-product snapshot — exact replica of the LLMindMap side panel, set in a soft sand-bezeled frame with a short text block alongside. */ const ThinkingProfile = ({ lang }) => (
LIVE MODE / {lang === "ja" ? "ライブモード" : "REAL-TIME"}
PRO

{lang === "ja" ? <>リアルタイムで、地図が育つ。 : <>Your map, growing beside the chat.}

{lang === "ja" ? "LLMindMapは常にサイドパネルに常駐。会話を書き進めるほど、構造がリアルタイムで姿を現します。ノードをクリックして分岐、統合、再生成。" : "LLMindMap lives in the side panel. As you write, structure emerges in real time. Click any node to branch, merge, or regenerate — without losing your place in the conversation."}

); /* Live Mode demo — shows a mindmap already generated, then a new prompt auto-types, AI responds, and a new branch grows on the map. Loops. */ const LiveModeWindow = ({ lang }) => { const ja = lang === "ja"; const [loopKey, setLoopKey] = React.useState(0); const [phase, setPhase] = React.useState("idle"); // idle → typing → sent → responding → growing → done const [typedChars, setTypedChars] = React.useState(0); const [responseChars, setResponseChars] = React.useState(0); const [newBranch, setNewBranch] = React.useState(false); const [inView, setInView] = React.useState(false); const rootRef = React.useRef(null); const newPrompt = ja ? "LTV改善の優先順位を整理して" : "Prioritize the LTV improvement actions"; const newResponse = ja ? "まず解約率の高いセグメントを特定して、初回体験の改善から着手するのが最もインパクトが大きいです。" : "Start by identifying the highest churn segment, then focus on first-experience improvement for the biggest impact."; const existingMsgs = ja ? [ { who: "user", t: "リピート率が低下してる原因を整理したい" }, { who: "ai", t: "まず数字を確認しましょう。18ヶ月で42%から31%に落ちているなら、獲得チャネル別に2回目購入率を分解するのが最初の一手です。" }, ] : [ { who: "user", t: "I want to organize the reasons behind declining repeat rate" }, { who: "ai", t: "Let's start with the numbers. If repeat rate dropped from 42% to 31% over 18 months, the first move is breaking down second purchase rate by channel." }, ]; // IntersectionObserver — start animation only when section is visible React.useEffect(() => { const el = rootRef.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold: 0.3 }); obs.observe(el); return () => obs.disconnect(); }, []); // Auto-play sequence — gated on inView React.useEffect(() => { if (!inView) return; const timers = []; timers.push(setTimeout(() => setPhase("typing"), 1500)); return () => timers.forEach(clearTimeout); }, [loopKey, inView]); // Typing effect for new prompt React.useEffect(() => { if (phase !== "typing") return; if (typedChars < newPrompt.length) { const t = setTimeout(() => setTypedChars(c => c + 1), 60); return () => clearTimeout(t); } const t = setTimeout(() => setPhase("sent"), 400); return () => clearTimeout(t); }, [phase, typedChars]); // Send → responding React.useEffect(() => { if (phase !== "sent") return; const t = setTimeout(() => { setPhase("responding"); setResponseChars(0); }, 800); return () => clearTimeout(t); }, [phase]); // AI response typing React.useEffect(() => { if (phase !== "responding") return; if (responseChars < newResponse.length) { const t = setTimeout(() => setResponseChars(c => c + 1), 25); return () => clearTimeout(t); } setPhase("growing"); setNewBranch(true); }, [phase, responseChars]); // Growing → done → loop React.useEffect(() => { if (phase !== "growing") return; const t = setTimeout(() => { setPhase("done"); setTimeout(() => { setPhase("idle"); setTypedChars(0); setResponseChars(0); setNewBranch(false); setLoopKey(k => k + 1); }, 3000); }, 2500); return () => clearTimeout(t); }, [phase]); // Build messages list const allMsgs = [...existingMsgs]; if (phase === "sent" || phase === "responding" || phase === "growing" || phase === "done") { allMsgs.push({ who: "user", t: newPrompt }); } if (phase === "responding" || phase === "growing" || phase === "done") { allMsgs.push({ who: "ai", t: newResponse.slice(0, responseChars) }); } const scrollRef = React.useRef(null); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [allMsgs.length, responseChars]); const baseTree = INTERACTIVE_CONTENT.trees[0]; return (
{/* titlebar */}
{["#FF5F57","#FEBC2E","#28C840"].map((c,i) => ( ))}
Chrome — chatgpt.com / LLMindMap
{/* body */}
{/* Chat pane */}
CHATGPT {ja ? "販売戦略レビュー" : "Sales strategy"}
{allMsgs.map((m, i) => (
{m.who === "ai" && (
AI
)}
{m.t} {i === allMsgs.length - 1 && m.who === "ai" && phase === "responding" && ( )}
{m.who === "user" && (
YOU
)}
))}
{phase === "typing" ? newPrompt.slice(0, typedChars) : (phase === "idle" ? "" : (ja ? "メッセージを送信…" : "Send a message…"))} {phase === "typing" && ( )}
{/* Extension panel with mindmap — uses the real DemoMindmap component */}
{/* Rail */}
{[ { kind: "mark", color: "#6BBF8A" }, { d: "M4.5 10 A4.5 4.5 0 0 1 13 7.5 M13 4.5 L13 7.5 L10 7.5 M13.5 8 A4.5 4.5 0 0 1 5 10.5 M5 13.5 L5 10.5 L8 10.5", color: "#7BAFD4" }, { d: "M3 3 L9 3 L15 9 L9 15 L3 9 Z M6.5 6.5 L6.5 6.5", color: "#D4908A" }, { d: "M4 8 A4 4 0 1 1 12 8 A4 4 0 1 1 4 8 M11 11 L15 15", color: "#D4B85C" }, { d: "M5 3 L13 3 L13 15 L9 12 L5 15 Z", color: "#D4C24E" }, ].map((ic, i) => (
{ic.kind === "mark" ? ( ) : ( )}
))}
{/* Mindmap content */}
LLMindMap LIVE
{/* DemoMindmap — base tree always static, new branch overlaid with animation */}
{/* New branch overlay — same viewBox as DemoMindmap (320×280), center at (160,140) */} {/* Sonar pulses from hub during growth */} {phase === "growing" && [0, 0.4, 0.8].map((delay, i) => ( ))} {newBranch && }
); }; /* LiveGrowBranch — renders ONLY the new "LTV改善" branch + leaves as an animated overlay, matching DemoMindmap's coordinate system exactly. viewBox 0 0 320 280, center (160,140), R1=70, R2=120, startAngle=-π/2. The base tree has 3 branches at -90°, 30°, 150°. This new branch sits at 90° (bottom center — the widest gap between the two lower branches). */ const LiveGrowBranch = ({ lang }) => { const ja = lang === "ja"; const cx = 160, cy = 140, R1 = 70, R2 = 120; // Place the new branch at 90° (π/2 rad) — bottom center gap const angle = Math.PI / 2; const mx = cx + R1 * Math.cos(angle); const my = cy + R1 * Math.sin(angle); const branchLabel = ja ? "LTV改善" : "LTV Fix"; const leaves = [ { ja: "解約率", en: "Churn Rate" }, { ja: "初回体験", en: "First Experience" }, ]; const branchColor = "#536A8A"; // slate blue — distinct from existing 3 branches // Progressive reveal: step 0=nothing, 1=branch link+dot, 2=leaves const [step, setStep] = React.useState(0); React.useEffect(() => { const t1 = setTimeout(() => setStep(1), 100); const t2 = setTimeout(() => setStep(2), 650); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); // Curved path helper — same as DemoMindmap const curvedPath = (x1, y1, x2, y2, curl) => { const pmx = (x1 + x2) / 2, pmy = (y1 + y2) / 2; const dx = x2 - x1, dy = y2 - y1; const len = Math.sqrt(dx * dx + dy * dy) || 1; const px = -dy / len * curl, py = dx / len * curl; return "M " + x1 + " " + y1 + " Q " + (pmx + px) + " " + (pmy + py) + " " + x2 + " " + y2; }; return ( {/* Hub → Branch link */} = 1 ? curvedPath(cx, cy, mx, my, -15) : curvedPath(cx, cy, cx, cy, 0)} stroke="var(--ink-20)" strokeWidth="1.2" fill="none" strokeLinecap="round" style={{ transition: "d 300ms cubic-bezier(0.33, 1, 0.68, 1)" }}/> {/* Branch dot */} = 1 ? 4.5 : 0} fill={branchColor} style={{ transition: "r 180ms cubic-bezier(0.34, 1.56, 0.64, 1) 280ms" }}/> {/* Branch label */} = 1 ? 1 : 0, transition: "opacity 200ms ease-out 400ms" }}> {branchLabel} {/* New node glow pulse */} {step >= 1 && ( )} {/* Leaves */} {leaves.map((leaf, j) => { const leafAngle = angle + (j - (leaves.length - 1) / 2) * 0.45; const lx = cx + R2 * Math.cos(leafAngle); const ly = cy + R2 * Math.sin(leafAngle); const leafLabel = ja ? leaf.ja : leaf.en; const leafCurl = (8 + j * 4) * -1; const vis = step >= 2; return ( {leafLabel} ); })} ); }; /* Panel frame — wraps the extension panel with a soft drop shadow only. The sand bezel was removed; the panel now sits directly on the page bg. */ const PanelFrame = ({ children }) => (
{children}
); /* Exact replica of the LLMindMap Chrome side panel. Takes a `variant` to swap in different mindmap content without altering chrome. */ const ExtensionSnapshot = ({ lang, variant = "checkin", zoom = null, compact = false }) => { // rail icon set — matches actual product rail buttons const railIcons = [ { k: "map", kind: "mark" }, // generate mindmap { k: "refresh", d: "M4.5 10 A4.5 4.5 0 0 1 13 7.5 M13 4.5 L13 7.5 L10 7.5 M13.5 8 A4.5 4.5 0 0 1 5 10.5 M5 13.5 L5 10.5 L8 10.5" }, { k: "divider" }, { k: "tag", d: "M14.5 3H9l-6 6 6 6h5.5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z M7 9h.01" }, // classify { k: "search", d: "M4 8 A4 4 0 1 1 12 8 A4 4 0 1 1 4 8 M11 11 L15 15" }, { k: "star", d: "M9 2l2.2 4.5 5 .7-3.6 3.5.9 5L9 13.3 4.6 15.7l.9-5L1.8 7.2l5-.7L9 2z" }, { k: "q", d: "M9 14 A5 5 0 1 1 9 4 A5 5 0 1 1 9 14 M7.5 7.5a1.5 1.5 0 0 1 3 0c0 1-1.5 1.3-1.5 2.5 M9 12.5L9 12.51" }, // questions { k: "glasses", d: "M5 9a3 3 0 1 0 6 0 3 3 0 1 0-6 0 M7 9h4 M11 9a3 3 0 1 0 6 0 3 3 0 1 0-6 0 M2 9L3.5 7 M16 9L14.5 7" }, // analyze gaps { k: "history", d: "M9 14 A5 5 0 1 1 9 4 A5 5 0 1 1 9 14 M9 6v3l2 2" }, { k: "divider" }, { k: "download", d: "M15 11v3a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 3 14v-3 M5.5 8L9 11.5 12.5 8 M9 11.5V3" }, // export ]; // mindmap data per variant — different topic, same layout const variants = { checkin: { title: lang === "ja" ? "履歴 (3/3)" : "History (3/3)", tabs: lang === "ja" ? ["チェックイン画面…", "JBN日本語UI改善", "チェックイン画面…", "チェックイン画面…", "チェックイン画面…"] : ["check-in screen…", "JBN JP UI revisions", "check-in screen…", "check-in screen…", "check-in screen…"], activeTab: 4, banner: lang === "ja" ? "会話データが更新されました" : "Conversation synced", stats: [ { k: "issue", jp: "課題", en: "issue", c: "#C9583C", n: 4 }, { k: "decision", jp: "決定", en: "decision", c: "#6B8CAE", n: 6 }, { k: "info", jp: "情報", en: "info", c: "#8FA896", n: 3 }, ], scene: compact ? "checkinDesign" : "product", }, generation: { title: lang === "ja" ? "履歴 (1/3)" : "History (1/3)", tabs: [ lang === "ja" ? "評価基盤v2…" : "eval harness v2…", lang === "ja" ? "キャッシュ層…" : "cache layer…", lang === "ja" ? "8k制限…" : "8k ceiling…", lang === "ja" ? "回帰テスト…" : "regression…", ], activeTab: 2, banner: lang === "ja" ? "新しいマップを生成しました" : "New map generated", stats: [ { k: "idea", jp: "アイデア", en: "idea", c: "#8F6FA3", n: 7 }, { k: "decision", jp: "決定", en: "decision", c: "#6B8CAE", n: 9 }, { k: "info", jp: "情報", en: "info", c: "#8FA896", n: 5 }, ], scene: "eval", }, }; const v = variants[variant] || variants.checkin; return (
{/* Rail */}
{railIcons.map((ic, i) => { if (ic.k === "divider") return (
); const active = i === 0; return (
{ic.kind === "mark" ? ( ) : ( )}
); })}
{/* Bottom buttons: settings, theme, JA, count, LIVE */}
☽
JA
20
LIVE
{/* Main */}
{/* Header with big logo */}
{/* 6-arm radial brand mark */}
LL Mind Map
Trace, edit, and surpass any LLM chat
kkh.sigma@gmail.com {lang === "ja" ? "サインアウト" : "Sign out"}
{/* Sub-header: history label + small arrow */}
{v.title}
{!compact && ( <> {/* Banner pill */}
{v.banner}
{/* Category indicator chips — same pattern as global cat-chip, tuned for the panel's cool palette */} {v.stats && (
{v.stats.map(s => ( {lang === "ja" ? s.jp : s.en} {s.n} ))}
)} )} {/* Tabs row */}
{v.tabs.map((t, i) => { const isActive = i === v.activeTab; return (
{t} {isActive && ( × )}
); })}
{/* Map canvas */}
); }; /* Hand-authored radial mindmap matching the real product. Accepts a `scene` prop selecting one of the pre-composed layouts. Each layout has a hub, a small stub, 4 mids at NW/NE/SW/SE, and varied leaf counts with curved paths + one highlighted leaf. */ const RadialMindmap = ({ scene = "product", zoom = null }) => { const W = 1000, H = 820; // hub coords — most scenes center it; checkinDesign offsets it to lower-right const SCENE_HUB = { checkinDesign: { cx: 760, cy: 600 }, }; const { cx, cy } = SCENE_HUB[scene] || { cx: 500, cy: 440 }; // zoom presets — tighter viewBox onto a node cluster (random-feeling pick: SE leaves) const zoomBoxes = { leaf: { x: 540, y: 440, w: 460, h: 380 }, // SE cluster: 4-block screen layout mid: { x: 280, y: 280, w: 520, h: 420 }, // upper hub area }; const vb = zoom && zoomBoxes[zoom] ? `${zoomBoxes[zoom].x} ${zoomBoxes[zoom].y} ${zoomBoxes[zoom].w} ${zoomBoxes[zoom].h}` : `0 0 ${W} ${H}`; const INK = "#3B352D"; const DARK = "#2C3142"; const GRAY = "#8C8070"; const FAINT = "#B8BCCB"; const scenes = { // Design-focused conversation — generic & readable product: { hub: "プロダクト設計の方向性", stub: { label: "実装継続を確認", dx: 120, dy: -4 }, groups: [ { mid: { label: "優先順位の整理", x: cx - 130, y: cy - 120 }, leaves: [ { x: cx - 340, y: cy - 250, c1x: cx - 230, c1y: cy - 150, label: "言葉が最優先推奨", anchor: "end" }, { x: cx - 280, y: cy - 340, c1x: cx - 220, c1y: cy - 220, label: "CTAの見た目（押したくなるか）", anchor: "end" }, { x: cx - 60, y: cy - 380, c1x: cx - 130, c1y: cy - 240, label: "回答後メッセージのパターン設計", anchor: "end" }, ], }, { mid: { label: "既存機能の確認", x: cx + 140, y: cy - 120 }, leaves: [ { x: cx + 130, y: cy - 360, c1x: cx + 150, c1y: cy - 220, label: "チェックインはlocalStorageのみ", anchor: "start" }, { x: cx + 310, y: cy - 280, c1x: cx + 230, c1y: cy - 180, label: "API・DBは存在するが未接続", anchor: "start" }, { x: cx + 370, y: cy - 160, c1x: cx + 260, c1y: cy - 140, label: "DB接続は次フェーズ", anchor: "start" }, ], }, { mid: { label: "UX細部の設計方針", x: cx - 150, y: cy + 100 }, leaves: [ { x: cx - 370, y: cy + 70, c1x: cx - 270, c1y: cy + 90, label: "強制はNG", anchor: "end" }, { x: cx - 320, y: cy + 250, c1x: cx - 250, c1y: cy + 180, label: "人っぽいメッセージ返す", anchor: "end" }, { x: cx - 240, y: cy + 370, c1x: cx - 200, c1y: cy + 250, label: "0.3〜0.5秒遅延で体験感を出す", anchor: "end" }, ], }, { mid: { label: "画面4ブロック構成", x: cx + 120, y: cy + 110 }, leaves: [ { x: cx + 340, y: cy + 170, c1x: cx + 230, c1y: cy + 150, label: "①感情：状態の把握", anchor: "start" }, { x: cx + 360, y: cy + 270, c1x: cx + 240, c1y: cy + 220, label: "②サマリー：数字1〜2個のみ", anchor: "start" }, { x: cx + 310, y: cy + 360, c1x: cx + 220, c1y: cy + 280, label: "③コンディション選択（4択）", anchor: "start", highlight: true }, { x: cx + 180, y: cy + 400, c1x: cx + 170, c1y: cy + 300, label: "④CTA：順番の固定", anchor: "start" }, ], }, ], }, // Live-demo variant — eval pipeline topic, same character eval: { hub: "LLM評価パイプライン", stub: { label: "CI統合を確認", dx: 120, dy: -4 }, groups: [ { mid: { label: "プロンプト設計", x: cx - 130, y: cy - 120 }, leaves: [ { x: cx - 340, y: cy - 230, c1x: cx - 230, c1y: cy - 150, label: "指示の明確化", anchor: "end" }, { x: cx - 290, y: cy - 330, c1x: cx - 220, c1y: cy - 220, label: "few-shot 例の選定", anchor: "end" }, { x: cx - 70, y: cy - 370, c1x: cx - 130, c1y: cy - 240, label: "ガードレール設計", anchor: "end" }, ], }, { mid: { label: "評価指標の定義", x: cx + 140, y: cy - 120 }, leaves: [ { x: cx + 140, y: cy - 360, c1x: cx + 150, c1y: cy - 220, label: "精度・再現率", anchor: "start" }, { x: cx + 320, y: cy - 270, c1x: cx + 240, c1y: cy - 180, label: "コスト・レイテンシ", anchor: "start" }, { x: cx + 370, y: cy - 150, c1x: cx + 260, c1y: cy - 140, label: "人手レビュースコア", anchor: "start" }, ], }, { mid: { label: "データセット整備", x: cx - 150, y: cy + 100 }, leaves: [ { x: cx - 370, y: cy + 70, c1x: cx - 270, c1y: cy + 90, label: "合成は最小限", anchor: "end" }, { x: cx - 320, y: cy + 250, c1x: cx - 250, c1y: cy + 180, label: "難例の集中収集", anchor: "end" }, { x: cx - 240, y: cy + 370, c1x: cx - 200, c1y: cy + 250, label: "分布のドリフト監視", anchor: "end" }, ], }, { mid: { label: "結果の可視化", x: cx + 120, y: cy + 110 }, leaves: [ { x: cx + 340, y: cy + 170, c1x: cx + 230, c1y: cy + 150, label: "①モデル間の比較", anchor: "start" }, { x: cx + 360, y: cy + 270, c1x: cx + 240, c1y: cy + 220, label: "②失敗例のクラスタ", anchor: "start" }, { x: cx + 310, y: cy + 360, c1x: cx + 220, c1y: cy + 280, label: "③回帰の早期検出", anchor: "start", highlight: true }, { x: cx + 180, y: cy + 400, c1x: cx + 170, c1y: cy + 300, label: "④リリース判定", anchor: "start" }, ], }, ], }, // Reference-style: hub at lower-right, branches reach NW/N/W with // a few outliers at NE/E/S. Lots of empty space across the canvas. checkinDesign: { hub: "チェックイン画面設計", hubAnchor: "start", // label sits to right of hub hubDx: 18, hubDy: 6, // text offset from hub stub: { label: "常時表", dx: 130, dy: 0 }, groups: [ { // upper-NW cluster — three leaves, character of "phase 3/4 + 次は…" mid: { label: "段階的実装フェーズ", x: cx - 230, y: cy + 60 }, leaves: [ { x: cx - 660, y: cy - 230, label: "Phase4：雪・雨パーティクル", anchor: "start" }, { x: cx - 760, y: cy - 80, label: "hase3：グラデ微動アニメ", anchor: "start" }, { x: cx - 230, y: cy - 320, label: "次はカード優先順位設計", anchor: "end" }, ], }, { // S cluster — bg/weather + 雨も mid: { label: "背景：時間帯×天気で変化", x: cx - 200, y: cy + 180 }, leaves: [ { x: cx - 660, y: cy + 200, label: "・雨も背景に反映", anchor: "start" }, ], }, { // E cluster — completely separated branches mid: { label: "通常時と完全分離", x: cx + 180, y: cy - 60 }, leaves: [ { x: cx + 250, y: cy + 170, label: "フルスクリーン表示内容", anchor: "start", highlight: true }, ], }, ], }, // Sales strategy / repeat-rate conversation — matches LiveDemo chat context // ~75% spread — fills the demo container without clipping liveDemo: { hub: "リピート率低下", stub: { label: "初期データ確認", dx: 70, dy: -4 }, groups: [ { mid: { label: "チャネル別分解", x: cx - 100, y: cy - 95 }, leaves: [ { x: cx - 260, y: cy - 195, label: "広告経由", anchor: "end" }, { x: cx - 215, y: cy - 265, label: "自然流入", anchor: "end" }, { x: cx - 50, y: cy - 300, label: "購入率 42%→31%", anchor: "end" }, ], }, { mid: { label: "時系列推移", x: cx + 110, y: cy - 95 }, leaves: [ { x: cx + 100, y: cy - 285, label: "18ヶ月の推移", anchor: "start" }, { x: cx + 245, y: cy - 225, label: "獲得チャネル変化", anchor: "start" }, { x: cx + 290, y: cy - 130, label: "季節変動の影響", anchor: "start" }, ], }, { mid: { label: "LTV改善", x: cx - 115, y: cy + 80 }, leaves: [ { x: cx - 290, y: cy + 55, label: "解約率の高いセグメント", anchor: "end" }, { x: cx - 250, y: cy + 195, label: "初回体験の改善", anchor: "end" }, { x: cx - 190, y: cy + 290, label: "CAC 1.4倍増", anchor: "end" }, ], }, { mid: { label: "ファネル分析", x: cx + 95, y: cy + 90 }, leaves: [ { x: cx + 270, y: cy + 135, label: "LP離脱率", anchor: "start" }, { x: cx + 285, y: cy + 215, label: "CVR低下", anchor: "start" }, { x: cx + 245, y: cy + 285, label: "クリエイティブ疲弊", anchor: "start", highlight: true }, { x: cx + 140, y: cy + 315, label: "CACモニタリング", anchor: "start" }, ], }, ], }, }; const s = scenes[scene] || scenes.product; return ( {/* Hub → each mid : cubic curl matching the leaf character */} {s.groups.map((g, i) => { const curlSign = [1, -1, -1, 1][i] || 1; const vx = g.mid.x - cx, vy = g.mid.y - cy; const d = Math.sqrt(vx*vx + vy*vy) || 1; const px = -vy / d, py = vx / d; const curl = d * 0.35 * curlSign; const c1x = cx + vx * 0.2 + px * curl; const c1y = cy + vy * 0.2 + py * curl; const c2x = cx + vx * 0.75 + px * curl * 0.4; const c2y = cy + vy * 0.75 + py * curl * 0.4; return ( ); })} {/* Hub → stub (small lateral branch) */} {s.stub.label} {/* Per-group leaves with cubic-Bézier curl. Each leaf's curve is computed from its mid→leaf vector: c1 launches tangentially from the mid (perpendicular to the direct line, in the group's curl direction), c2 approaches the leaf from a softened angle. This creates the lazy wind-swept feel of the original. */} {s.groups.map((g, i) => { // Group curl direction: alternates NW/NE/SW/SE for organic variety. // Positive = counterclockwise sweep, negative = clockwise. const curlSign = [1, -1, -1, 1][i] || 1; return g.leaves.map((l, j) => { const mx = g.mid.x, my = g.mid.y; const lx = l.x, ly = l.y; const vx = lx - mx, vy = ly - my; const dist = Math.sqrt(vx * vx + vy * vy) || 1; // unit perpendicular (rotated 90° CCW) const px = -vy / dist, py = vx / dist; // curl magnitude scales with distance (longer branches curl more) const curl = dist * 0.55 * curlSign; // c1: launch tangentially from mid — heavily perpendicular, little forward const c1x = mx + vx * 0.15 + px * curl; const c1y = my + vy * 0.15 + py * curl; // c2: arrive at leaf with softened approach — mostly forward, gentle perp const c2x = mx + vx * 0.75 + px * curl * 0.35; const c2y = my + vy * 0.75 + py * curl * 0.35; return ( {l.label} ); }); })} {/* Mid nodes */} {s.groups.map((g, i) => { const anchor = g.mid.x > cx ? "start" : "end"; const tx = g.mid.x + (anchor === "start" ? 9 : -9); return ( {g.mid.label} ); })} {/* Central hub */} {s.hubAnchor === "start" ? ( {s.hub} ) : ( {s.hub} )} ); }; /* ─── Mind Tracing — snapshot of the opt-in + metrics card ────────────────── Styled after the control-panel's neumorphic dialect: soft lavender background, inset/outset shadows, pill toggle. Mirrors the in-product UI. */ const MindTracing = ({ lang }) => { const stats = [ { jp: "質問力", en: "Inquiry", v: 68, bg: "#EDE7F6", accent: "#7E57C2" }, { jp: "決断力", en: "Decisive", v: 52, bg: "#E3F2FD", accent: "#4A90C4" }, { jp: "探索力", en: "Exploration", v: 81, bg: "#E8F5E9", accent: "#5BA36B" }, { jp: "編集力", en: "Editing", v: 44, bg: "#FFF3E0", accent: "#C48A4A" }, ]; const [inView, setInView] = useStateH(false); const [toggleOn, setToggleOn] = useStateH(true); const sRef = window.React.useRef(null); window.React.useEffect(() => { const el = sRef.current; if (!el) return; const obs = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { threshold: 0.3 }); obs.observe(el); return () => obs.disconnect(); }, []); window.React.useEffect(() => { if (!inView) return; const id = setInterval(() => setToggleOn(v => !v), 3000); return () => clearInterval(id); }, [inView]); return (
{/* Left: copy */}
MIND TRACING / {lang === "ja" ? "思考の軌跡" : "YOUR PATTERNS"}

{lang === "ja" ? <>地図は、
あなたを覚えている。 : <>The map remembers
how you think.}

{lang === "ja" ? "すべての操作は匿名パターンとして記録され、四つの傾向として返ってくる。問うのが得意か、決めるのが得意か。オプトインで、いつでもオフに。" : "Every action is recorded as an anonymous pattern and returned to you as four tendencies. Are you better at asking or deciding? Opt-in, switchable, yours."}

    {(lang === "ja" ? [ "データはあなたのもの：閲覧・エクスポート・削除可能", "許可なく共有されることはありません", "匿名化されたパターンのみ（本文は外部に出ません）", ] : [ "Your data stays yours — view, export, or delete anytime", "Never shared without your explicit consent", "Only anonymized patterns leave your browser (never the text itself)", ]).map((t, i) => (
  • ✓ {t}
    • ))}
{/* Right: neumorphic snapshot */}
{/* Mind Tracing card */}
Mind Tracing
{toggleOn ? "ON" : "OFF"}

{lang === "ja" ? "LLMindMapはマインドマップの操作を記録し、あなたの思考パターンを可視化できます。" : "LLMindMap logs your interactions and visualizes your thinking patterns over time."}

    {(lang === "ja" ? ["データはあなたのもの：閲覧・エクスポート・削除可能", "許可なく共有されることはありません", "匿名化されたパターンのみ（本文は外部に出ません）"] : ["Your data: view, export, or delete it", "Never shared without consent", "Anonymized patterns only (text stays local)"] ).map((t, i) => (
  • ✓ {t}
    • ))}
{/* toggle — animates on/off */}
{/* Thinking pattern label */}
{lang === "ja" ? "思考パターン" : "Thinking pattern"} · THINKING PATTERN
{/* 2x2 metric cards */}
{stats.map((s, i) => (
{lang === "ja" ? s.jp : s.en}
{s.v} %
))}
); }; /* Category classification explainer */ const CategoryExplainer = ({ lang }) => { const [hovCat, setHovCat] = useStateH(null); const cats = [ { k: "issue", jp: "課題", en: "ISSUE", c: "var(--accent)", n: 12, sample: lang === "ja" ? "取得が遅い" : "Retrieval latency" }, { k: "question", jp: "質問", en: "QUESTION", c: "var(--ochre)", n: 8, sample: lang === "ja" ? "なぜ8k制限？" : "Why 8k ceiling?" }, { k: "idea", jp: "アイデア", en: "IDEA", c: "#8F6FA3", n: 7, sample: lang === "ja" ? "キャッシュ層" : "Cache layer" }, { k: "decision", jp: "決定", en: "DECISION", c: "var(--slate)", n: 9, sample: lang === "ja" ? "評価基盤v2" : "Eval harness v2" }, { k: "info", jp: "情報", en: "INFO", c: "var(--sage)", n: 5, sample: lang === "ja" ? "料金の階層" : "Token pricing" }, { k: "aside", jp: "余談", en: "ASIDE", c: "#8A7D86", n: 3, sample: lang === "ja" ? "回帰テスト" : "Regression bench" }, { k: "uncl", jp: "未分類", en: "UNCLASSIFIED", c: "var(--ink-40)", n: 2, sample: "—" }, ]; return (
{/* Centered title */}
CLASSIFICATION / {lang === "ja" ? "分類体系" : "SEVEN CATEGORIES"}

{lang === "ja" ? <>色が、構造を語る。 : <>Color reveals shape.}

{lang === "ja" ? "すべてのノードは、7つの分類のいずれかに属す。色が地図の性格を決める。" : "Every node belongs to one of seven roles. Color becomes the personality of the map."}

{/* Center-stage mindmap */}
{/* Links — hub to mids (product-style arcs) */} {/* Links — mids to leaves */} {/* Leaf nodes — colored by category */} {lang === "ja" ? "広告経由" : "Paid channels"} {lang === "ja" ? "自然流入" : "Organic traffic"} {lang === "ja" ? "18ヶ月" : "18 months"} 42%→31% {lang === "ja" ? "初回体験" : "First experience"} {lang === "ja" ? "解約率" : "Churn rate"} {/* Mid nodes — category colored */} {lang === "ja" ? "チャネル別分解" : "Channel breakdown"} {lang === "ja" ? "時系列推移" : "Time series"} {lang === "ja" ? "2回目購入率" : "2nd purchase rate"} {/* Starred mid node — gold ring */} {lang === "ja" ? "LTV改善" : "Improve LTV"} {/* Hub */} {lang === "ja" ? "リピート率低下" : "Repeat rate decline"}
{/* Floating legend — cat-chips centered below */}
{cats.map((c) => ( setHovCat(c.k)} onMouseLeave={() => setHovCat(null)} style={{ cursor: "pointer", transition: "transform 200ms ease, box-shadow 200ms ease", transform: hovCat === c.k ? "scale(1.08)" : "scale(1)" }}> {lang === "ja" ? c.jp : c.en.toLowerCase()} {c.n} ))}
); }; /* Animated overlay branch for LiveDemo — renders a mid node + leaves with path draw-in, node pop, sonar glow, matching RadialMindmap's organic cubic-Bézier curves. */ const LiveDemoBranch = ({ branch, hubCx, hubCy }) => { const [step, setStep] = useStateH(0); window.React.useEffect(() => { const t1 = setTimeout(() => setStep(1), 100); const t2 = setTimeout(() => setStep(2), 700); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); const GRAY = "#8C8070", INK = "#3B352D", FAINT = "#B8BCCB"; const mx = branch.mid.x, my = branch.mid.y; const vx = mx - hubCx, vy = my - hubCy; const d = Math.sqrt(vx * vx + vy * vy) || 1; const px = -vy / d, py = vx / d; const curl = d * 0.35 * (branch.curlSign || 1); const c1x = hubCx + vx * 0.2 + px * curl; const c1y = hubCy + vy * 0.2 + py * curl; const c2x = hubCx + vx * 0.75 + px * curl * 0.4; const c2y = hubCy + vy * 0.75 + py * curl * 0.4; const hubPath = `M ${hubCx} ${hubCy} C ${c1x} ${c1y} ${c2x} ${c2y} ${mx} ${my}`; const midAnchor = mx > hubCx ? "start" : "end"; const midTx = mx + (midAnchor === "start" ? 9 : -9); return ( = 1 ? 0 : 600, transition: "stroke-dashoffset 500ms cubic-bezier(0.33,1,0.68,1)" }}/> = 1 ? 5 : 0} fill={branch.color || "#2C3142"} style={{ transition: "r 300ms cubic-bezier(0.34,1.56,0.64,1) 100ms" }}/> = 1 ? 1 : 0, transition: "opacity 250ms ease-out 300ms" }}> {branch.label} {step >= 1 && [0, 0.4].map((dl, i) => ( ))} {branch.leaves.map((l, j) => { const lx = l.x, ly = l.y; const lvx = lx - mx, lvy = ly - my; const ld = Math.sqrt(lvx * lvx + lvy * lvy) || 1; const lpx = -lvy / ld, lpy = lvx / ld; const lcurl = ld * 0.55 * (branch.curlSign || 1); const lc1x = mx + lvx * 0.15 + lpx * lcurl; const lc1y = my + lvy * 0.15 + lpy * lcurl; const lc2x = mx + lvx * 0.75 + lpx * lcurl * 0.35; const lc2y = my + lvy * 0.75 + lpy * lcurl * 0.35; const leafPath = `M ${mx} ${my} C ${lc1x} ${lc1y} ${lc2x} ${lc2y} ${lx} ${ly}`; const tx = lx + (l.anchor === "start" ? 10 : -10); return ( = 2 ? 0 : 400, transition: "stroke-dashoffset 400ms cubic-bezier(0.33,1,0.68,1)" }}/> = 2 ? 3.2 : 0} fill={GRAY} style={{ transition: "r 250ms cubic-bezier(0.34,1.56,0.64,1) 100ms" }}/> = 2 ? 1 : 0, transition: "opacity 200ms ease-out 250ms" }}> {l.label} ); })} ); }; /* Animated mindmap — progressive reveal matching the actual product's D3 animation. Link draw-in (300ms easeCubicOut) → dot pop (180ms easeBackOut 1.2, delayed 300ms) → label fade (200ms, delayed 500ms). Leaves stagger 220ms apart per group. */ const AnimatedMindmap = ({ treeStep = 0, overlays = [], showSonar = false, lang = "ja" }) => { const W = 1000, H = 820, cx = 500, cy = 440; const INK = "#3B352D", DARK = "#2C3142", GRAY = "#8C8070", FAINT = "#B8BCCB"; const EASE_LINK = "cubic-bezier(0.33,1,0.68,1)"; const EASE_DOT = "cubic-bezier(0.34,1.56,0.64,1)"; const ja = lang === "ja"; const groups = [ { mid: { label: ja ? "チャネル別分解" : "Channel Breakdown", x: 400, y: 345 }, leaves: [ { x: 240, y: 245, label: ja ? "広告経由" : "Paid Ads", anchor: "end" }, { x: 285, y: 175, label: ja ? "自然流入" : "Organic", anchor: "end" }, { x: 450, y: 140, label: ja ? "購入率 42%→31%" : "Purchase 42%→31%", anchor: "end" }, ] }, { mid: { label: ja ? "時系列推移" : "Timeline Trend", x: 610, y: 345 }, leaves: [ { x: 600, y: 155, label: ja ? "18ヶ月の推移" : "18-month trend", anchor: "start" }, { x: 745, y: 215, label: ja ? "獲得チャネル変化" : "Channel shift", anchor: "start" }, { x: 790, y: 310, label: ja ? "季節変動の影響" : "Seasonal impact", anchor: "start" }, ] }, { mid: { label: ja ? "LTV改善" : "LTV Improvement", x: 385, y: 520 }, leaves: [ { x: 210, y: 495, label: ja ? "解約率の高いセグメント" : "High-churn segment", anchor: "end" }, { x: 250, y: 635, label: ja ? "初回体験の改善" : "First experience fix", anchor: "end" }, { x: 310, y: 730, label: ja ? "CAC 1.4倍増" : "CAC up 1.4×", anchor: "end" }, ] }, { mid: { label: ja ? "ファネル分析" : "Funnel Analysis", x: 595, y: 530 }, leaves: [ { x: 770, y: 575, label: ja ? "LP離脱率" : "LP Drop-off", anchor: "start" }, { x: 785, y: 655, label: ja ? "CVR低下" : "CVR Decline", anchor: "start" }, { x: 745, y: 725, label: ja ? "クリエイティブ疲弊" : "Creative fatigue", anchor: "start", highlight: true }, { x: 640, y: 755, label: ja ? "CACモニタリング" : "CAC Monitoring", anchor: "start" }, ] }, ]; const curlSigns = [1, -1, -1, 1]; const bezier = (ax, ay, bx, by, curl) => { const vx = bx - ax, vy = by - ay; const d = Math.sqrt(vx * vx + vy * vy) || 1; const px = -vy / d, py = vx / d; const c1x = ax + vx * 0.2 + px * curl; const c1y = ay + vy * 0.2 + py * curl; const c2x = ax + vx * 0.75 + px * curl * 0.4; const c2y = ay + vy * 0.75 + py * curl * 0.4; return `M ${ax} ${ay} C ${c1x} ${c1y} ${c2x} ${c2y} ${bx} ${by}`; }; const leafBez = (mx, my, lx, ly, curl) => { const vx = lx - mx, vy = ly - my; const d = Math.sqrt(vx * vx + vy * vy) || 1; const px = -vy / d, py = vx / d; const c = d * 0.55 * curl; const c1x = mx + vx * 0.15 + px * c; const c1y = my + vy * 0.15 + py * c; const c2x = mx + vx * 0.75 + px * c * 0.35; const c2y = my + vy * 0.75 + py * c * 0.35; return `M ${mx} ${my} C ${c1x} ${c1y} ${c2x} ${c2y} ${lx} ${ly}`; }; const hubOn = treeStep > 0; return ( {/* Layer 1 — hub→mid links */} {groups.map((g, i) => { const show = treeStep > i + 1; const vx = g.mid.x - cx, vy = g.mid.y - cy; const d = Math.sqrt(vx * vx + vy * vy) || 1; const curl = d * 0.35 * curlSigns[i]; return ( ); })} {/* Layer 2 — mid→leaf links */} {groups.map((g, i) => { const show = treeStep > i + 1; return g.leaves.map((l, j) => { const delay = 600 + j * 220; return ( ); }); })} {/* Layer 3 — leaf dots + labels */} {groups.map((g, i) => { const show = treeStep > i + 1; return g.leaves.map((l, j) => { const delay = 600 + j * 220; return ( {l.label} ); }); })} {/* Layer 4 — mid dots + labels */} {groups.map((g, i) => { const show = treeStep > i + 1; const anchor = g.mid.x > cx ? "start" : "end"; return ( {g.mid.label} ); })} {/* Stub */} {ja ? "初期データ確認" : "Initial data check"} {/* Sonar — 3 concentric rings, product timing (0 / 0.6 / 1.2s) */} {showSonar && [0, 0.6, 1.2].map((dl, i) => ( ))} {/* Hub dot (topmost) */} {ja ? "リピート率低下" : "Repeat Rate Decline"} {/* Overlay branches — animate in via LiveDemoBranch */} {overlays.map((branch, i) => ( ))} ); }; /* Live demo — product-accurate extension panel with animated mindmap expansion */ const LiveDemo = ({ lang }) => { const ja = lang === "ja"; const [loopKey, setLoopKey] = useStateH(0); const [round, setRound] = useStateH(0); // 0,1,2 — three expansion rounds const [phase, setPhase] = useStateH("idle"); const [typedChars, setTypedChars] = useStateH(0); const [responseChars, setResponseChars] = useStateH(0); const [grownBranches, setGrownBranches] = useStateH([]); const [treeStep, setTreeStep] = useStateH(0); // 0=nothing, 1=hub, 2-5=groups 0-3 const [inView, setInView] = useStateH(false); const rootRef = window.React.useRef(null); const scrollRef = window.React.useRef(null); // Three rounds of prompt → response → branch growth const rounds = ja ? [ { prompt: "競合との差別化ポイントを整理して", response: "まず価格・機能・UXの3軸で比較表を作り、自社が勝てる象限を特定しましょう。" }, { prompt: "次の四半期のKPIを設定して", response: "リピート率35%回復、CAC1.2倍以下、NPS+10を主要KPIに据えるのが現実的です。" }, { prompt: "チーム体制の見直しを提案して", response: "グロースチームを分離し、プロダクト・マーケ・データの3名体制にするのが最小構成です。" }, ] : [ { prompt: "Organize our differentiation points vs competitors", response: "Start with a 3-axis comparison — price, features, UX — then identify the quadrant where you win." }, { prompt: "Set KPIs for next quarter", response: "Target repeat rate recovery to 35%, CAC under 1.2x, and NPS +10 as your primary KPIs." }, { prompt: "Propose a team restructure", response: "Spin out a dedicated growth team — product, marketing, and data — three people minimum." }, ]; const currentRound = rounds[round]; // Existing messages — continues from LiveModeWindow's conversation const baseMsgs = ja ? [ { who: "user", t: "リピート率が低下してる原因を整理したい" }, { who: "ai", t: "獲得チャネル別に2回目購入率を分解するのが最初の一手です。" }, { who: "user", t: "LTV改善の優先順位を整理して" }, { who: "ai", t: "解約率の高いセグメントを特定して、初回体験の改善から着手しましょう。" }, ] : [ { who: "user", t: "I want to organize the reasons behind declining repeat rate" }, { who: "ai", t: "Break down second purchase rate by acquisition channel first." }, { who: "user", t: "Prioritize the LTV improvement actions" }, { who: "ai", t: "Identify the highest churn segment, then focus on first-experience improvement." }, ]; // IntersectionObserver window.React.useEffect(() => { const el = rootRef.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold: 0.3 }); obs.observe(el); return () => obs.disconnect(); }, []); // Progressive reveal — hub first, then groups, then typing starts window.React.useEffect(() => { if (!inView) return; const ts = []; ts.push(setTimeout(() => setTreeStep(1), 100)); // hub for (let i = 0; i < 4; i++) ts.push(setTimeout(() => setTreeStep(i + 2), 400 + i * 350)); ts.push(setTimeout(() => setPhase("typing"), 2400)); // start typing return () => ts.forEach(clearTimeout); }, [loopKey, inView]); // Typing window.React.useEffect(() => { if (phase !== "typing") return; if (typedChars < currentRound.prompt.length) { const t = setTimeout(() => setTypedChars(c => c + 1), 50); return () => clearTimeout(t); } const t = setTimeout(() => setPhase("sent"), 400); return () => clearTimeout(t); }, [phase, typedChars]); // Sent → responding window.React.useEffect(() => { if (phase !== "sent") return; const t = setTimeout(() => { setPhase("responding"); setResponseChars(0); }, 700); return () => clearTimeout(t); }, [phase]); // AI response window.React.useEffect(() => { if (phase !== "responding") return; if (responseChars < currentRound.response.length) { const t = setTimeout(() => setResponseChars(c => c + 1), 20); return () => clearTimeout(t); } setPhase("growing"); setGrownBranches(prev => [...prev, round]); }, [phase, responseChars]); // Growing → next round or loop window.React.useEffect(() => { if (phase !== "growing") return; const t = setTimeout(() => { if (round < 2) { setRound(r => r + 1); setTypedChars(0); setResponseChars(0); setPhase("typing"); } else { setPhase("done"); setTimeout(() => { setRound(0); setTypedChars(0); setResponseChars(0); setGrownBranches([]); setTreeStep(0); setPhase("idle"); setLoopKey(k => k + 1); }, 3000); } }, 1800); return () => clearTimeout(t); }, [phase, round]); // Build visible messages const allMsgs = [...baseMsgs]; for (let r = 0; r <= round; r++) { if (r < round || phase === "sent" || phase === "responding" || phase === "growing" || phase === "done") { allMsgs.push({ who: "user", t: rounds[r].prompt }); } if (r < round || phase === "responding" || phase === "growing" || phase === "done") { allMsgs.push({ who: "ai", t: r < round ? rounds[r].response : rounds[r].response.slice(0, responseChars) }); } } window.React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [allMsgs.length, responseChars]); // New branches for RadialMindmap overlay (viewBox 1000×820, hub 500,440) const HUB_CX = 500, HUB_CY = 440; const newBranches = [ { // Top-right gap — right of NE group (max leaf at 790,310) label: ja ? "差別化戦略" : "Differentiation", mid: { x: 830, y: 170 }, leaves: [ { label: ja ? "価格比較" : "Price Gap", x: 885, y: 95, anchor: "start" }, { label: ja ? "UX優位性" : "UX Edge", x: 880, y: 245, anchor: "start" }, ], color: "#8F6FA3", curlSign: -1, }, { // Left gap — left of NW/SW groups (min leaf at 210,495) label: ja ? "Q2 KPI" : "Q2 KPIs", mid: { x: 150, y: 400 }, leaves: [ { label: ja ? "リピート35%" : "Repeat 35%", x: 85, y: 315, anchor: "end" }, { label: ja ? "CAC目標" : "CAC Target", x: 75, y: 545, anchor: "end" }, ], color: "#7A9A85", curlSign: 1, }, { // Bottom-right gap — right of SE group (max leaf at 785,655) label: ja ? "体制変更" : "Restructure", mid: { x: 830, y: 560 }, leaves: [ { label: ja ? "グロース分離" : "Growth Team", x: 880, y: 490, anchor: "start" }, { label: ja ? "3名体制" : "3-person", x: 880, y: 630, anchor: "start" }, ], color: "#B8864A", curlSign: -1, }, ]; const demoRailIcons = [ { kind: "mark" }, { d: "M4.5 10 A4.5 4.5 0 0 1 13 7.5 M13 4.5 L13 7.5 L10 7.5 M13.5 8 A4.5 4.5 0 0 1 5 10.5 M5 13.5 L5 10.5 L8 10.5" }, { d: "M3 3 L9 3 L15 9 L9 15 L3 9 Z M6.5 6.5 L6.5 6.5" }, { d: "M4 8 A4 4 0 1 1 12 8 A4 4 0 1 1 4 8 M11 11 L15 15" }, { d: "M5 3 L13 3 L13 15 L9 12 L5 15 Z" }, { d: "M9 3 L11 7 L15 7.5 L12 10.5 L13 15 L9 12.5 L5 15 L6 10.5 L3 7.5 L7 7 Z" }, { d: "M6 7 A3 3 0 1 1 10 9.5 L9 11 M9 14 L9 14.01" }, { d: "M3 4 L15 4 L15 14 L3 14 Z M3 12 L7 8 L10 11 L13 7 L15 9 M11 7 L11 7.01" }, { d: "M5 3 L11 3 L13 5 L13 15 L5 15 Z M11 3 L11 5 L13 5" }, ]; const demoStats = [ { jp: "課題", en: "issue", c: "#C9583C", n: 4 }, { jp: "決定", en: "decision", c: "#6B8CAE", n: 6 }, { jp: "情報", en: "info", c: "#8FA896", n: 3 }, ]; const demoTabs = ja ? ["リピート率分析…", "LTV改善計画…", "販売戦略レビュー"] : ["Repeat rate…", "LTV improve…", "Sales strategy"]; return (
LIVE / {ja ? "実演" : "DEMO"}

{ja ? <>思考が、広がる。 : <>Watch it unfold.}

{/* Titlebar */}
{["#FF5F57","#FEBC2E","#28C840"].map((c,i) => ( ))}
Chrome — chatgpt.com / LLMindMap
{/* Content split */}
{/* ChatGPT pane */}
CHATGPT {ja ? "販売戦略レビュー" : "Sales strategy"}
{allMsgs.map((m, i) => (
{m.who === "ai" && (
AI
)}
{m.t} {i === allMsgs.length - 1 && m.who === "ai" && phase === "responding" && ( )}
{m.who === "user" && (
YOU
)}
))} {phase === "typing" && (
{currentRound.prompt.slice(0, typedChars)}
YOU
)}
{ja ? "メッセージを送信…" : "Send a message…"}
{/* LLMindMap extension panel — product-accurate chrome */}
{/* Rail */}
{demoRailIcons.map((ic, i) => { const railColors = ["#6BBF8A","#7BAFD4","#D4908A","#D4B85C","#D4C24E","#D4956A","#5CBBAA","#5CBBAA","#A8A29E","#D4B85C"]; const iconColor = railColors[i] || "#8C8070"; return (
{ic.kind === "mark" ? ( ) : ( )}
); })}
JA
{/* Main column */}
{/* Header with logo + LIVE badge */}
LL Mind Map
Trace, edit, and surpass any LLM chat
LIVE
{/* History label */}
{ja ? "履歴 (3/3)" : "History (3/3)"}
{/* Banner */}
{ja ? "会話データが更新されました" : "Conversation synced"}
{/* Category chips */}
{demoStats.map(s => ( {ja ? s.jp : s.en} {s.n} ))}
{/* Tabs */}
{demoTabs.map((t, i) => { const isActive = i === demoTabs.length - 1; return (
{t} {isActive && ×}
); })}
{/* Mindmap area — progressive reveal matching product animation */}
newBranches[ri])} showSonar={phase === "growing"} lang={lang} />
{/* Round indicators */}
{rounds.map((_, i) => ( ))}
); }; /* CTA band */ const Pricing = ({ lang }) => { const ja = lang === "ja"; const free = [ ja ? "マインドマップ生成 20回/月" : "20 mindmaps / month", ja ? "7種自動カテゴリ分類" : "7-way auto-categorize", ja ? "スターノード" : "Starred nodes", ja ? "PNG・PDF書き出し" : "PNG & PDF export", ja ? "ローカル履歴（3件）" : "Local history (3 maps)", ja ? "横断検索" : "Cross-map search", ja ? "日本語 / 英語 UI" : "JA / EN interface", ]; const pro = [ ja ? "マインドマップ生成 無制限" : "Unlimited mindmaps", ja ? "構造的ギャップ検出" : "Structural gap detection", ja ? "Markdown・SVG書き出し" : "Markdown & SVG export", ja ? "履歴 無制限" : "Unlimited history", ja ? "ライブ成長" : "Live grow", ja ? "思考プロファイル" : "Thinking profile", ]; const check = ( ); const cardBase = { borderRadius: 20, padding: "36px 32px", display: "flex", flexDirection: "column", }; return (
PRICING / {ja ? "料金" : "PLANS"}

{ja ? <>無料で整理。
Proで、思考する。 : <>Free organizes.
Pro thinks with you.}

{/* Free */}
FREE
{ja ? "¥0" : "$0"}
{ja ? "ずっと無料" : "Free forever"}
{free.map((f, i) => (
{check} {f}
))}
{ja ? "無料で始める" : "Get started free"}
{/* Pro */}
PRO
{ja ? "¥1,500" : "$15"} {ja ? "/月" : "/​mo"}
{ja ? "年払い ¥15,000/年（2ヶ月分お得）" : "$150/year — save 2 months"}
{pro.map((p, i) => (
{check} {p}
))}
{ja ? "Proを始める" : "Start Pro"}
); }; const BigCTA = ({ lang }) => (
INSTALL

{lang === "ja" ? <>60秒で、あなたの
思考地図が始まる。 : <>Sixty seconds
to your first map.}

); /* Coming Soon — roadmap tease for unreleased features */ const ComingSoon = ({ lang }) => { const items = lang === "ja" ? [ { mono: "統合", t: "グラフ統合", d: "複数の会話を1枚の地図に。重複は自動でマージされる。", icon: "M18 21V8a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v13 M6 15l6-6 6 6", }, ] : [ { mono: "MERGE", t: "Graph merging", d: "Multiple conversations fold into a single atlas. Duplicates auto-merge.", icon: "M18 21V8a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v13 M6 15l6-6 6 6", }, ]; return (
COMING SOON / {lang === "ja" ? "開発中" : "ROADMAP"}

{lang === "ja" ? "次に届くもの。" : "What\u2019s next."}

{items.map((item, i) => (
{item.mono}
{item.t}

{item.d}

))}
); }; Object.assign(window, { HowItWorks, FeaturesGrid, ThinkingProfile, MindTracing, CategoryExplainer, LiveDemo, Pricing, BigCTA, ComingSoon, ExtensionSnapshot, PanelFrame });