@mazees/mark 5.0.0

package/src/renderer/src/components/neural-core/ProceduralMatrixLobe.jsx

@@ -0,0 +1,193 @@
+import React from 'react'
+import {
+  FaGraduationCap,
+  FaSearch,
+  FaEye,
+  FaTrash,
+  FaBookOpen,
+  FaChevronRight
+} from 'react-icons/fa'
+
+export const ProceduralMatrixLobe = ({
+  learnedSkills = [],
+  skillSearch = '',
+  setSkillSearch,
+  onSelectSkill,
+  onDeleteSkill,
+  isFullView = false,
+  onNavigateToFull
+}) => {
+  const filteredSkills = learnedSkills.filter(
+    (s) =>
+      s.name?.toLowerCase().includes(skillSearch.toLowerCase()) ||
+      (s.description && s.description.toLowerCase().includes(skillSearch.toLowerCase()))
+  )
+
+  if (isFullView) {
+    return (
+      <div className="flex-1 flex flex-col gap-4 min-h-0 overflow-hidden max-w-6xl mx-auto w-full pb-8">
+        {/* Header Vault Toolbar */}
+        <div className="p-4 bg-base-200/60 border border-white/5 rounded-2xl flex flex-wrap items-center justify-between gap-4 backdrop-blur-md shadow-lg">
+          <div>
+            <h2 className="text-sm font-bold font-mono text-base-content flex items-center gap-2 uppercase tracking-wider">
+              <FaGraduationCap className="text-primary" /> Learned Skill
+            </h2>
+            <p className="text-xs text-base-content/60 mt-0.5">
+              Skill yang dipelajari dan dirumuskan sendiri oleh Mark saat menyelesaikan tugas
+              sebelumnya.
+            </p>
+          </div>
+
+          {/* Search Bar */}
+          <div className="relative w-full sm:w-72">
+            <FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40 text-xs" />
+            <input
+              type="text"
+              value={skillSearch}
+              onChange={(e) => setSkillSearch(e.target.value)}
+              placeholder="Cari keahlian atau panduan..."
+              className="w-full bg-base-300/60 border border-white/10 rounded-xl pl-9 pr-3 py-2 text-xs text-base-content placeholder:text-base-content/30 outline-none focus:border-primary/50 font-mono"
+            />
+          </div>
+        </div>
+
+        {/* Skills Card Grid */}
+        <div className="flex-1 overflow-y-auto pr-1 custom-scrollbar">
+          {filteredSkills.length === 0 ? (
+            <div className="h-64 flex flex-col items-center justify-center text-center p-6 bg-base-200/40 border border-white/5 rounded-2xl">
+              <FaGraduationCap className="text-4xl text-base-content/20 mb-3" />
+              <h3 className="text-sm font-bold font-mono text-base-content/80">
+                Belum Ada Keahlian Baru
+              </h3>
+              <p className="text-xs text-base-content/50 max-w-md mt-1 leading-relaxed">
+                Mark akan secara otomatis mencatat keahlian baru ke daftar ini ketika berhasil
+                menyelesaikan tugas teknis yang berulang atau rumit.
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredSkills.map((skill) => (
+                <div
+                  key={skill.id}
+                  className="p-5 bg-base-200/50 hover:bg-base-200/80 border border-white/5 hover:border-primary/30 rounded-2xl backdrop-blur-md transition-all flex flex-col justify-between group shadow-md"
+                >
+                  <div className="flex flex-col gap-3 pb-3">
+                    <div className="flex items-center justify-between">
+                      <span className="font-mono font-bold text-sm text-base-content flex items-center gap-1.5 uppercase">
+                        {skill.name}
+                      </span>
+                    </div>
+                    <p className="text-xs text-base-content/70 leading-relaxed line-clamp-3">
+                      {skill.description || 'Tidak ada deskripsi singkat.'}
+                    </p>
+                    <span className="text-[10px] font-mono text-base-content/40">
+                      {new Date(skill.updatedAt || Date.now()).toLocaleDateString('id-ID', {
+                        dateStyle: 'medium'
+                      })}
+                    </span>
+                  </div>
+
+                  <div className="flex items-center justify-between pt-3 border-t border-white/5">
+                    <button
+                      type="button"
+                      onClick={() => onSelectSkill(skill)}
+                      className="px-3 py-1.5 bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 rounded-xl text-xs font-mono font-semibold transition-all flex items-center gap-1.5 cursor-pointer"
+                    >
+                      <FaEye size={12} /> Buka Panduan
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => onDeleteSkill(skill)}
+                      className="p-2 text-base-content/40 hover:text-error hover:bg-error/10 rounded-xl transition-all cursor-pointer"
+                      title="Hapus Skill"
+                    >
+                      <FaTrash size={12} />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Embedded Column
+  return (
+    <div className="lg:col-span-3 bg-base-200/50 backdrop-blur-md border border-white/5 rounded-2xl p-4 flex flex-col min-h-0 overflow-hidden shadow-xl">
+      <div className="flex items-center justify-between border-b border-white/5 pb-3 mb-3">
+        <div className="flex items-center gap-2 text-sm font-bold font-mono text-base-content">
+          <FaGraduationCap className="text-primary" /> Skill Yang Di Pelajari
+        </div>
+        {onNavigateToFull && (
+          <button
+            type="button"
+            onClick={onNavigateToFull}
+            className="text-[10px] font-mono text-base-content/50 hover:text-base-content flex items-center gap-1 cursor-pointer transition-colors"
+          >
+            Lihat Semua <FaChevronRight size={8} />
+          </button>
+        )}
+      </div>
+
+      {/* Search Mini */}
+      <div className="relative mb-3">
+        <FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/30 text-xs" />
+        <input
+          type="text"
+          value={skillSearch}
+          onChange={(e) => setSkillSearch(e.target.value)}
+          placeholder="Cari keahlian..."
+          className="w-full bg-base-300/60 border border-white/10 rounded-xl pl-8 pr-3 py-1.5 text-xs text-base-content placeholder:text-base-content/30 outline-none focus:border-primary/50 font-mono"
+        />
+      </div>
+
+      {/* Skills List */}
+      <div className="flex-1 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
+        {filteredSkills.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center p-4 text-center text-base-content/40 text-xs">
+            <FaBookOpen className="text-2xl mb-2 text-base-content/20" />
+            <p>Belum ada keahlian yang dipelajari.</p>
+          </div>
+        ) : (
+          filteredSkills.map((skill) => (
+            <div
+              key={skill.id}
+              className="p-2.5 bg-base-300/40 hover:bg-base-300/70 border border-white/5 hover:border-primary/20 rounded-xl transition-all flex flex-col gap-1 group"
+            >
+              <div className="flex items-center justify-between">
+                <span className="font-mono font-bold uppercase text-xs text-base-content/90">
+                  {skill.name}
+                </span>
+                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button
+                    type="button"
+                    onClick={() => onSelectSkill(skill)}
+                    className="p-1 text-base-content/60 hover:text-primary transition-colors"
+                    title="Buka Detail Panduan"
+                  >
+                    <FaEye size={11} />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => onDeleteSkill(skill)}
+                    className="p-1 text-base-content/40 hover:text-error transition-colors"
+                    title="Hapus"
+                  >
+                    <FaTrash size={10} />
+                  </button>
+                </div>
+              </div>
+              <p className="text-[11px] text-base-content/60 line-clamp-2 leading-tight">
+                {skill.description}
+              </p>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ProceduralMatrixLobe

package/src/renderer/src/components/neural-core/ProceduralSkillModal.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { FaGraduationCap, FaTimes } from 'react-icons/fa'
+import rehypeExternalLinks from 'rehype-external-links'
+import { CodeBlock } from '../Chat/CodeBlock'
+
+export const ProceduralSkillModal = ({ skill, onClose }) => {
+  if (!skill) return null
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl flex items-center justify-center p-4 animate-fade-in">
+      <div className="w-full max-w-3xl max-h-[85vh] bg-base-200 border border-white/10 rounded-2xl flex flex-col shadow-2xl overflow-hidden">
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between bg-base-300/60">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary">
+              <FaGraduationCap size={15} />
+            </div>
+            <div>
+              <h3 className="font-mono font-bold text-sm text-base-content uppercase">
+                {skill.name}
+              </h3>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-8 h-8 rounded-xl bg-base-300 hover:bg-base-100 flex items-center justify-center text-base-content/50 hover:text-base-content transition-all cursor-pointer"
+          >
+            <FaTimes size={13} />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-6 font-sans text-sm text-base-content/90 custom-scrollbar leading-relaxed custom-markdown">
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[
+              [rehypeExternalLinks, { target: '_blank', rel: ['noopener', 'noreferrer'] }]
+            ]}
+            components={{
+              code: CodeBlock
+            }}
+          >
+            {skill.content || '*Tidak ada konten instruksi Markdown.*'}
+          </ReactMarkdown>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProceduralSkillModal

package/src/renderer/src/components/neural-core/ResetAiModal.jsx

@@ -0,0 +1,198 @@
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { FaTrash, FaCheckCircle, FaShieldAlt } from 'react-icons/fa'
+
+export const ResetAiModal = ({ isOpen, onClose, onConfirm, isResetting = false }) => {
+  const [step, setStep] = useState(1)
+  const [inputText, setInputText] = useState('')
+  const [isSuccess, setIsSuccess] = useState(false)
+  const CONFIRM_PHRASE = 'RESET MARK'
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape' && isOpen && !isResetting) {
+        handleClose()
+      }
+    }
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown)
+    }
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, isResetting])
+
+  if (!isOpen) return null
+
+  const handleClose = () => {
+    if (isResetting) return
+    setStep(1)
+    setInputText('')
+    setIsSuccess(false)
+    onClose?.()
+  }
+
+  const handleNextStep = () => {
+    setStep(2)
+  }
+
+  const handleExecuteReset = async () => {
+    if (inputText.trim() !== CONFIRM_PHRASE) return
+    const success = await onConfirm()
+    if (success !== false) {
+      setIsSuccess(true)
+      setTimeout(() => {
+        handleClose()
+      }, 1600)
+    }
+  }
+
+  const modalContent = (
+    <div className="modal modal-open z-[99999] fixed inset-0 flex items-center justify-center bg-black/70 backdrop-blur-md animate-[response-fade-in_0.15s_ease-out_forwards]">
+      <div className="modal-box relative bg-base-300 border border-white/10 shadow-2xl z-10 max-w-md">
+        {/* Success State */}
+        {isSuccess ? (
+          <div className="py-6 flex flex-col items-center justify-center text-center gap-3">
+            <div className="w-14 h-14 rounded-full bg-success/20 text-success flex items-center justify-center border border-success/30 shadow-lg">
+              <FaCheckCircle className="text-2xl" />
+            </div>
+            <div>
+              <h3 className="font-bold text-lg text-success">Reset AI Berhasil</h3>
+              <p className="py-2 text-sm opacity-80">
+                Seluruh memori, riwayat chat, dan sifat Mark telah dikembalikan ke kondisi awal.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* Header Title */}
+            <h3 className="font-bold text-lg text-error">Reset Total AI (Tahap {step}/2)</h3>
+
+            {/* Step 1: Warning Details */}
+            {step === 1 && (
+              <div className="py-3 space-y-3">
+                <p className="text-sm opacity-90">
+                  Apakah Anda yakin ingin mereset seluruh data memori dan riwayat Mark?
+                </p>
+                <div className="p-3 bg-base-200/80 rounded-xl border border-white/5 space-y-1.5 text-xs">
+                  <div className="text-error font-semibold flex items-center gap-1.5">
+                    <FaTrash size={10} /> Data yang akan dihapus:
+                  </div>
+                  <ul className="list-disc list-inside opacity-70 space-y-0.5 pl-1">
+                    <li>Seluruh riwayat obrolan & sesi percakapan</li>
+                    <li>Seluruh memori eksplisit (Vector RAG)</li>
+                    <li>Seluruh potongan dokumen tersimpan</li>
+                    <li>Seluruh skill yang dipelajari (Learned Skills)</li>
+                    <li>Status sifat & karakter (kembali ke default netral)</li>
+                    <li>Riwayat tugas mandiri & sub-agen</li>
+                  </ul>
+                  <div className="pt-2 text-primary font-semibold flex items-center gap-1.5 border-t border-white/5">
+                    <FaShieldAlt size={10} /> Data yang dipertahankan:
+                  </div>
+                  <p className="opacity-70 pl-1">
+                    Pengaturan API Key, model provider, prompt, dan konfigurasi umum sistem tetap
+                    aman.
+                  </p>
+                </div>
+
+                <div className="modal-action mt-4">
+                  <button
+                    type="button"
+                    className="btn btn-ghost btn-sm"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      handleClose()
+                    }}
+                  >
+                    Batal
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-error btn-sm shadow-md"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      handleNextStep()
+                    }}
+                  >
+                    Lanjutkan ke Konfirmasi Terakhir
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Step 2: Final Verification via Typing */}
+            {step === 2 && (
+              <div className="py-3 space-y-3">
+                <p className="text-sm opacity-90">
+                  Tindakan ini <strong className="text-error">tidak dapat dibatalkan</strong>. Untuk
+                  mengonfirmasi penghapusan seluruh memori Mark, ketik teks di bawah:
+                </p>
+
+                <div className="p-3 bg-base-200 rounded-xl border border-error/20 text-center font-mono font-bold text-sm tracking-widest text-error select-all">
+                  {CONFIRM_PHRASE}
+                </div>
+
+                <div>
+                  <label className="block text-xs opacity-60 mb-1">
+                    Ketik ulang kata konfirmasi:
+                  </label>
+                  <input
+                    type="text"
+                    autoFocus
+                    value={inputText}
+                    onChange={(e) => setInputText(e.target.value)}
+                    placeholder="Ketik RESET MARK di sini"
+                    className="w-full bg-base-200 border border-white/10 focus:border-error rounded-xl px-3 py-2 text-xs font-mono text-base-content outline-none transition-colors uppercase"
+                  />
+                </div>
+
+                <div className="modal-action mt-4">
+                  <button
+                    type="button"
+                    disabled={isResetting}
+                    className="btn btn-ghost btn-sm"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      setStep(1)
+                    }}
+                  >
+                    Kembali
+                  </button>
+                  <button
+                    type="button"
+                    disabled={inputText.trim() !== CONFIRM_PHRASE || isResetting}
+                    className="btn btn-error btn-sm shadow-md gap-1.5"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      handleExecuteReset()
+                    }}
+                  >
+                    {isResetting && <span className="loading loading-spinner loading-xs" />}
+                    <span>{isResetting ? 'Mereset...' : 'Hapus & Reset AI'}</span>
+                  </button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      <div
+        className="modal-backdrop fixed inset-0 cursor-pointer bg-transparent"
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          handleClose()
+        }}
+      />
+    </div>
+  )
+
+  if (typeof document !== 'undefined') {
+    return createPortal(modalContent, document.body)
+  }
+  return modalContent
+}
+
+export default ResetAiModal

package/src/renderer/src/components/neural-core/SynapticMemoryLobe.jsx

@@ -0,0 +1,204 @@
+import React, { useEffect } from 'react'
+import ForceGraph2D from 'react-force-graph-2d'
+import { FaNetworkWired, FaChevronRight } from 'react-icons/fa'
+import { FiCheckCircle, FiRefreshCw } from 'react-icons/fi'
+
+export const SynapticMemoryLobe = ({
+  graphData,
+  graphDimensions,
+  graphContainerRef,
+  fgRef,
+  groomResult,
+  isGrooming,
+  triggerGrooming,
+  loadBrainData,
+  onSelectNode,
+  isFullView = false,
+  onNavigateToFull
+}) => {
+  useEffect(() => {
+    if (fgRef.current) {
+      fgRef.current.d3Force('charge').strength(-150)
+      fgRef.current.d3Force('link').distance(40)
+    }
+  }, [graphData, fgRef])
+
+  if (isFullView) {
+    return (
+      <div
+        ref={graphContainerRef}
+        className="flex-1 w-full h-full bg-base-200/50 backdrop-blur-md border border-white/5 rounded-2xl relative overflow-hidden shadow-2xl flex flex-col"
+      >
+        {/* Memory Grooming Control Toolbar */}
+        <div className="absolute top-4 left-4 z-20 flex flex-wrap items-center gap-3 p-2.5 bg-base-300/90 backdrop-blur-md border border-white/10 rounded-xl text-xs shadow-lg">
+          <div className="flex items-center gap-2 px-2 text-base-content/70 font-mono text-[11px]">
+            <FiCheckCircle className="text-primary" />
+            <span>
+              Pembersih Memori:{' '}
+              {groomResult.lastChecked
+                ? `Terakhir dirapikan ${new Date(groomResult.lastChecked).toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit'
+                  })}`
+                : 'Siap merapikan data'}
+            </span>
+          </div>
+          {(groomResult.mergedCount > 0 || groomResult.deletedCount > 0) && (
+            <div className="flex items-center gap-2 pl-2 border-l border-white/10 font-mono text-[10px] text-base-content/70">
+              <span>{groomResult.mergedCount} digabung</span>
+              <span>{groomResult.deletedCount} dibersihkan</span>
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={async () => {
+              await triggerGrooming(true)
+              await loadBrainData()
+            }}
+            disabled={isGrooming}
+            className="btn btn-xs btn-primary rounded-lg font-mono flex items-center gap-1.5"
+          >
+            <FiRefreshCw className={isGrooming ? 'animate-spin' : ''} />
+            <span>{isGrooming ? 'Sedang Merapikan...' : 'Rapikan & Bersihkan Duplikat'}</span>
+          </button>
+        </div>
+
+        <div className="flex-1 w-full h-full cursor-crosshair">
+          <ForceGraph2D
+            ref={fgRef}
+            width={graphDimensions.width}
+            height={graphDimensions.height}
+            graphData={graphData}
+            nodeLabel="name"
+            nodeColor={(node) => node.color}
+            nodeRelSize={4}
+            linkColor={() => 'rgba(255,255,255,0.15)'}
+            linkWidth={(link) => (link.source.id === 'core' || link.source === 'core' ? 2 : 1)}
+            linkCurvature={0.25}
+            linkDirectionalParticles={2}
+            linkDirectionalParticleWidth={1.5}
+            linkDirectionalParticleSpeed={0.005}
+            cooldownTicks={60}
+            onEngineStop={() => fgRef.current?.zoomToFit(400, 50)}
+            d3VelocityDecay={0.3}
+            onNodeClick={(node) => {
+              if (node.group === 3) {
+                onSelectNode(node)
+                fgRef.current?.centerAt(node.x, node.y, 1000)
+                fgRef.current?.zoom(3, 1000)
+              } else {
+                fgRef.current?.centerAt(node.x, node.y, 1000)
+                fgRef.current?.zoom(2.5, 1000)
+              }
+            }}
+            nodeCanvasObjectMode={() => 'after'}
+            nodeCanvasObject={(node, ctx, globalScale) => {
+              if (node.group === 0 || node.group === 1 || node.group === 2) {
+                const fontSize =
+                  node.group === 0 ? 15 / globalScale : node.group === 1 ? 13 / globalScale : 10 / globalScale
+                if (globalScale > 0.5) {
+                  ctx.font = `${fontSize}px Sans-Serif`
+                  ctx.textAlign = 'center'
+                  ctx.textBaseline = 'middle'
+                  ctx.fillStyle = 'rgba(255,255,255,0.85)'
+                  ctx.fillText(node.name, node.x, node.y + node.val + 8 / globalScale)
+                }
+              }
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Embedded Column
+  return (
+    <div
+      ref={graphContainerRef}
+      className="lg:col-span-5 bg-base-200/50 backdrop-blur-md border border-white/5 rounded-2xl relative flex flex-col min-h-[380px] lg:min-h-0 overflow-hidden shadow-xl"
+    >
+      <div className="absolute top-3 left-4 z-20 flex items-center justify-between right-4 pointer-events-none">
+        <div className="flex items-center gap-2 text-xs font-bold font-mono text-base-content bg-base-300/80 backdrop-blur-md px-3 py-1.5 rounded-xl border border-white/10 shadow-md">
+          <FaNetworkWired className="text-primary" /> PETA JARINGAN MEMORI
+        </div>
+        {onNavigateToFull && (
+          <button
+            type="button"
+            onClick={onNavigateToFull}
+            className="pointer-events-auto text-[10px] font-mono text-base-content/60 hover:text-base-content bg-base-300/80 px-2.5 py-1.5 rounded-xl border border-white/10 flex items-center gap-1 shadow-md cursor-pointer transition-colors"
+          >
+            Layar Penuh <FaChevronRight size={8} />
+          </button>
+        )}
+      </div>
+
+      {/* Mini Trigger Bar */}
+      <div className="absolute bottom-3 left-3 right-3 z-20 flex items-center justify-between p-2.5 rounded-xl bg-base-300/90 backdrop-blur-md border border-white/10 text-xs text-base-content/80 shadow-md">
+        <div className="flex items-center gap-1.5 text-[11px] font-mono text-primary">
+          <FiCheckCircle className="text-primary" />
+          <span>{groomResult.lastChecked ? 'Memori Rapi' : 'Siap Dirapikan'}</span>
+        </div>
+        <button
+          type="button"
+          onClick={async () => {
+            await triggerGrooming(true)
+            await loadBrainData()
+          }}
+          disabled={isGrooming}
+          className="btn btn-xs btn-primary font-mono text-[10px] flex items-center gap-1"
+        >
+          <FiRefreshCw className={isGrooming ? 'animate-spin' : ''} />
+          <span>{isGrooming ? 'Merapikan...' : 'Rapikan Memori'}</span>
+        </button>
+      </div>
+
+      {/* 2D Canvas ForceGraph */}
+      <div className="flex-1 w-full h-full cursor-crosshair">
+        <ForceGraph2D
+          ref={fgRef}
+          width={graphDimensions.width}
+          height={graphDimensions.height}
+          graphData={graphData}
+          nodeLabel="name"
+          nodeColor={(node) => node.color}
+          nodeRelSize={4}
+          linkColor={() => 'rgba(255,255,255,0.08)'}
+          linkWidth={(link) => (link.source.id === 'core' || link.source === 'core' ? 1.5 : 1)}
+          linkCurvature={0.2}
+          linkDirectionalParticles={1}
+          linkDirectionalParticleWidth={1.2}
+          linkDirectionalParticleSpeed={0.004}
+          cooldownTicks={60}
+          onEngineStop={() => fgRef.current?.zoomToFit(400, 50)}
+          d3VelocityDecay={0.3}
+          onNodeClick={(node) => {
+            if (node.group === 3) {
+              onSelectNode(node)
+              fgRef.current?.centerAt(node.x, node.y, 1000)
+              fgRef.current?.zoom(3, 1000)
+            } else {
+              fgRef.current?.centerAt(node.x, node.y, 1000)
+              fgRef.current?.zoom(2.5, 1000)
+            }
+          }}
+          nodeCanvasObjectMode={() => 'after'}
+          nodeCanvasObject={(node, ctx, globalScale) => {
+            if (node.group === 0 || node.group === 1 || node.group === 2) {
+              const fontSize =
+                node.group === 0 ? 15 / globalScale : node.group === 1 ? 13 / globalScale : 10 / globalScale
+              if (globalScale > 0.5) {
+                ctx.font = `${fontSize}px Sans-Serif`
+                ctx.textAlign = 'center'
+                ctx.textBaseline = 'middle'
+                ctx.fillStyle = 'rgba(255,255,255,0.85)'
+                ctx.fillText(node.name, node.x, node.y + node.val + 8 / globalScale)
+              }
+            }
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SynapticMemoryLobe