@mazees/mark 5.0.0

package/src/renderer/src/components/core/ToolClustersDeck.jsx

@@ -0,0 +1,210 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { Layers, Activity, Puzzle, ChevronRight, CheckCircle2 } from 'lucide-react'
+import ProcessPanel from './ProcessPanel'
+import { buildCompleteToolClusters } from '../../utils/toolClusters'
+import { webApi } from '../../api/web-bridge'
+
+/**
+ * ToolClustersDeck Component
+ * Docked Left Panel di MARK V5 yang merender seluruh kluster tools otonom,
+ * telemetry proses aktif, dan daftar custom plugins yang tersinkronisasi secara real-time.
+ */
+const ToolClustersDeck = ({ activeProcesses = [], dismissProcess, className = '' }) => {
+  const [selectedClusterKey, setSelectedClusterKey] = useState(null)
+  const [plugins, setPlugins] = useState([])
+  const [groupToolsSchema, setGroupToolsSchema] = useState(
+    () => webApi._groupToolsCache?.schema || {}
+  )
+
+  // Ambil data plugins & dengarkan event update
+  useEffect(() => {
+    let isMounted = true
+
+    const loadPlugins = async () => {
+      try {
+        if (webApi && typeof webApi.getPlugins === 'function') {
+          const list = await webApi.getPlugins()
+          if (isMounted) setPlugins(list || [])
+        }
+      } catch (err) {
+        console.error('[ToolClustersDeck] Gagal memuat plugins:', err)
+      }
+
+      try {
+        const groupData = await webApi.getGroupTools()
+        if (isMounted && groupData?.schema) {
+          setGroupToolsSchema(groupData.schema)
+        }
+      } catch (err) {
+        console.error('[ToolClustersDeck] Gagal memuat group tools:', err)
+      }
+    }
+
+    loadPlugins()
+
+    let unsub = null
+    if (webApi && typeof webApi.onPluginsUpdated === 'function') {
+      unsub = webApi.onPluginsUpdated(() => {
+        loadPlugins()
+      })
+    }
+
+    return () => {
+      isMounted = false
+      if (typeof unsub === 'function') unsub()
+    }
+  }, [])
+
+  // Bangun daftar kluster lengkap termasuk custom plugins
+  const clusters = useMemo(() => {
+    return buildCompleteToolClusters(plugins, groupToolsSchema)
+  }, [plugins, groupToolsSchema])
+
+  // Total count tools di seluruh kluster
+  const totalToolsCount = useMemo(() => {
+    return clusters.reduce((acc, c) => acc + (c.tools ? c.tools.length : 0), 0)
+  }, [clusters])
+
+  // Ekstrak nama tools yang sedang aktif berjalan secara real-time dari telemetry
+  const activeToolNames = useMemo(() => {
+    const active = new Set()
+    activeProcesses.forEach((p) => {
+      if (p.status === 'active' || p.status === 'running' || p.status === 'executing') {
+        if (p.type) active.add(p.type.toLowerCase())
+        if (p.name) active.add(p.name.toLowerCase())
+        if (p.tool) active.add(p.tool.toLowerCase())
+        if (p.data?.task) active.add(String(p.data.task).toLowerCase())
+        if (p.data?.tool) active.add(String(p.data.tool).toLowerCase())
+        if (p.data?.action) active.add(String(p.data.action).toLowerCase())
+      }
+    })
+    return active
+  }, [activeProcesses])
+
+  return (
+    <aside
+      className={`absolute left-6 top-18 bottom-24 w-72 lg:w-76 z-20 flex flex-col gap-2.5 pointer-events-auto ${className}`}
+    >
+      <div className="flex-1 bg-black/40 backdrop-blur-xl border border-white/5 rounded-2xl p-3 shadow-2xl flex flex-col min-h-0 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between pb-2 mb-2 border-b border-white/5 px-1">
+          <div className="flex items-center gap-2">
+            <Layers className="w-3.5 h-3.5 text-primary" />
+            <h3 className="text-xs font-bold font-mono tracking-wider text-white uppercase">
+              TOOL CLUSTERS
+            </h3>
+          </div>
+          <span className="text-[10px] font-mono text-white/40">
+            {clusters.length} Hubs · {totalToolsCount} Tools
+          </span>
+        </div>
+
+        {/* Active Process In-Place Card (Jika ada proses/task yang sedang berjalan) */}
+        {activeProcesses && activeProcesses.length > 0 && (
+          <div className="mb-2 shrink-0 max-h-[35vh] overflow-y-auto no-scrollbar">
+            <ProcessPanel
+              processes={activeProcesses}
+              onDismiss={dismissProcess}
+              isEmbedded={true}
+            />
+          </div>
+        )}
+
+        {/* List of Tool Clusters */}
+        <div className="flex-1 overflow-y-auto no-scrollbar space-y-1 pr-0.5">
+          {clusters.map((c) => {
+            const isClusterActive = c.tools.some((t) =>
+              t.matchTools.some(
+                (mt) =>
+                  activeToolNames.has(mt) || [...activeToolNames].some((an) => an.includes(mt))
+              )
+            )
+            const isSelected = selectedClusterKey === c.key
+            const isCustomPluginCluster = c.key === 'custom_plugins'
+
+            return (
+              <div key={c.id} className="flex flex-col">
+                <button
+                  onClick={() => setSelectedClusterKey(isSelected ? null : c.key)}
+                  className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-xl text-xs font-mono transition-all cursor-pointer ${
+                    isClusterActive
+                      ? 'bg-primary/20 text-white font-semibold shadow-[0_0_10px_rgba(0,255,204,0.2)]'
+                      : isSelected
+                        ? 'bg-white/10 text-white'
+                        : 'text-white/70 hover:text-white hover:bg-white/5'
+                  }`}
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    {isCustomPluginCluster ? (
+                      <Puzzle className="w-2.5 h-2.5 text-purple-400 shrink-0" />
+                    ) : (
+                      <span
+                        className={`w-2 h-2 rounded-full shrink-0 ${isClusterActive ? 'animate-ping' : ''}`}
+                        style={{ backgroundColor: c.color }}
+                      />
+                    )}
+                    <span className="truncate">{c.name}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    {isClusterActive && (
+                      <span className="px-1.5 py-0.2 rounded text-[8px] bg-primary text-black font-bold uppercase">
+                        RUN
+                      </span>
+                    )}
+                    <span className="text-[10px] opacity-40">({c.tools.length})</span>
+                  </div>
+                </button>
+
+                {/* Expanded Sub-Tools */}
+                {isSelected && (
+                  <div className="pl-4 pr-1 py-1 flex flex-col gap-1 border-l border-white/10 ml-2.5 my-1 animate-[holo-project-in_0.15s_ease-out_forwards]">
+                    {c.tools.map((t) => {
+                      const isToolActive = t.matchTools.some(
+                        (mt) =>
+                          activeToolNames.has(mt) ||
+                          [...activeToolNames].some((an) => an.includes(mt))
+                      )
+                      return (
+                        <div
+                          key={t.id}
+                          title={t.description || t.name}
+                          className={`px-2 py-1 rounded-lg text-[10px] font-mono flex items-center justify-between transition-colors ${
+                            isToolActive
+                              ? 'bg-primary text-black font-bold shadow-sm'
+                              : 'text-white/60 hover:text-white hover:bg-white/5'
+                          }`}
+                        >
+                          <div className="flex items-center gap-1.5 truncate flex-1 pr-1">
+                            <span
+                              className="w-1.5 h-1.5 rounded-full shrink-0"
+                              style={{ backgroundColor: t.color || c.color }}
+                            />
+                            <span className="truncate">{t.name}</span>
+                          </div>
+                          {isToolActive && (
+                            <span className="w-1.5 h-1.5 rounded-full bg-black animate-pulse shrink-0" />
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Bottom Telemetry One-Liner */}
+        <div className="pt-2 mt-1 border-t border-white/5 flex items-center justify-between text-[11px] font-mono text-white/50 px-1">
+          <div className="flex items-center gap-1.5">
+            <Activity className="w-3 h-3 text-primary" />
+            <span>Active Process</span>
+          </div>
+          <span className="font-bold text-primary">{activeProcesses.length} Active</span>
+        </div>
+      </div>
+    </aside>
+  )
+}
+
+export default React.memo(ToolClustersDeck)

package/src/renderer/src/components/core/native-skills.js

@@ -0,0 +1,43 @@
+export const NATIVE_SKILLS = [
+  {
+    name: 'task',
+    description:
+      'Membuat dan mengeksekusi alur tugas multi-langkah terstruktur (Durable Tasks / Task Workflow)',
+    content: `
+# SISTEM INSTRUKSI SKILL "/task" (DURABLE TASK WORKFLOW)
+Kamu telah diinstruksikan oleh user untuk mengaktifkan fitur **/task** (Task Workflow)!
+
+## ALUR KERJA WAJIB:
+1. INISIASI ALUR KERJA: Panggil tool 'create_agent_task' sebagai tindakan PERTAMA. DILARANG memanggil tool lain (seperti run-powershell, node, dll) atau merespon dengan teks sebelum memanggil 'create_agent_task'.
+2. EKSEKUSI TAHAP AKTIF (DI WORKSPACE PENGGUNA):
+   - Kerjakan sasaran dan target deliverable tahap aktif HANYA di direktori workspace proyek pengguna saat ini menggunakan tool koding yang relevan (seperti 'write-file', 'replace-content', 'read-file', 'run-powershell').
+   - DILARANG LANGSUNG MEMANGGIL 'mark_done_task' SEBELUM PEKERJAAN ATAU FILE DELIVERABLE TAHAP TERSEBUT SELESAI KAMU BUAT!
+   - DILARANG KERAS mencari, membaca, atau mengotak-atik kode internal aplikasi MARK ('src/', 'better-sqlite3', file tool agent, dll)!
+   - DILARANG menyelesaikan seluruh proyek di Tahap 1.
+3. PENGUJIAN & VERIFIKASI WAJIB (TEST & VERIFICATION):
+   - Sebelum menandai suatu tahap selesai, kamu WAJIB memverifikasi atau menguji hasil deliverable tahap tersebut (misal: cek keberadaan & integritas file dengan 'read-file', uji eksekusi script dengan 'run-powershell', atau validasi sintaks).
+   - DILARANG KERAS memanggil 'mark_done_task' tanpa melakukan verifikasi riil!
+4. PENYELESAIAN TAHAP (ONE-SHOT COMPLETION):
+   - 'mark_done_task' BUKAN alat untuk menyimpan draf atau cicilan progress sedikit demi sedikit! Panggil 'mark_done_task' HANYA TEPAT 1 KALI di akhir tahap saat deliverable tahap tersebut 100% tuntas dan teruji.
+   - Panggil 'mark_done_task' dengan parameter:
+     * "taskId": ID task yang sedang berjalan
+     * "stepIndex": Nomor tahap yang diselesaikan (1-based, misal: 1)
+     * "verificationProof": Bukti konkret hasil pengujian/verifikasi bahwa deliverable berfungsi (wajib diisi minimal 15 karakter)
+     * "artifactContent": Isi lengkap dokumen markdown (.md) hasil pengerjaan/spesifikasi tahap ini
+     * "summary": Ringkasan hasil
+   - DILARANG KERAS memanggil 'mark_done_task' berulang kali untuk tahap yang sama.
+5. TRANSISI KE TAHAP BERIKUTNYA:
+   - Setelah 'mark_done_task' berhasil dipanggil untuk Tahap N, DILARANG memanggil 'read_task' untuk membaca ulang artefak yang baru saja kamu simpan sendiri!
+   - Langsung kerjakan deliverable Tahap N+1 di direktori workspace pengguna.
+6. TAHAP TERAKHIR & RANGKUMAN PENUTUP:
+   - Pada TAHAP TERAKHIR dari Task Workflow, saat memanggil 'mark_done_task', kamu WAJIB mengisi parameter 'summary' dengan ringkasan komprehensif seluruh alur kerja proyek dari awal hingga akhir.
+   - Begitu tahap terakhir berhasil di-mark_done_task, alur kerja selesai 100% dan sistem langsung memutus proses serta menampilkan rangkuman akhir tersebut kepada pengguna. DILARANG memanggil tool apapun lagi.`
+  },
+  {
+    name: 'plan',
+    description: 'Alias untuk /task: Menjalankan alur pengerjaan tugas terstruktur (Task Workflow)',
+    content: `
+# ALIAS PERINTAH: /plan -> /task
+Alihkan instruksi ini ke sistem Task Workflow. Segera panggil tool 'create_agent_task' sebagai tindakan pertama dengan judul, sasaran menyeluruh, dan 3-5 tahapan eksekusi terstruktur! Setiap tahap dikerjakan di workspace sebelum diselesaikan dengan 'mark_done_task'.`
+  }
+]

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

@@ -0,0 +1,359 @@
+import {
+  FaFire,
+  FaBrain,
+  FaClock,
+  FaCommentDots,
+  FaChevronRight,
+  FaShieldAlt,
+  FaChartBar,
+  FaTheaterMasks,
+  FaRobot,
+  FaDatabase,
+  FaDownload,
+  FaUpload,
+  FaTrash
+} from 'react-icons/fa'
+import { TRAIT_META, describeLevel, describePersonality } from './traitMeta'
+
+export const EmotionalCortexLobe = ({
+  traits,
+  isFullView = false,
+  onNavigateToFull,
+  onResetAi,
+  onExportDatabase,
+  onRestoreDatabase,
+  isExportingDb = false,
+  isRestoringDb = false
+}) => {
+  if (isFullView) {
+    return (
+      <div className="flex-1 flex flex-col gap-6 min-h-0 overflow-y-auto custom-scrollbar max-w-5xl mx-auto w-full pb-12">
+        {/* Personality Status Banner */}
+        <div className="p-6 rounded-2xl bg-base-200/70 border border-white/5 backdrop-blur-md shadow-lg">
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-xs font-mono font-bold text-primary flex items-center gap-2 uppercase tracking-wider">
+              <FaBrain className="text-primary" /> Status Kepribadian & Karakter Mark
+            </span>
+            {traits?.evalCount > 0 && (
+              <span className="text-xs font-mono text-base-content/50 flex items-center gap-2">
+                <FaClock /> Evaluasi ke-{traits.evalCount}
+              </span>
+            )}
+          </div>
+          <p className="text-base text-base-content/90 leading-relaxed font-sans font-medium">
+            {describePersonality(traits)}
+          </p>
+          {traits?.lastEvaluation && (
+            <p className="text-xs text-base-content/40 mt-3 font-mono">
+              Terakhir diperbarui:{' '}
+              {new Date(traits.lastEvaluation).toLocaleString('id-ID', {
+                dateStyle: 'medium',
+                timeStyle: 'short'
+              })}
+            </p>
+          )}
+        </div>
+
+        {/* 5 Trait Rings Grid */}
+        <div>
+          <h3 className="text-xs font-bold font-mono text-base-content/60 uppercase tracking-wider mb-3">
+            5 Dimensi Sifat & Karakter
+          </h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
+            {TRAIT_META.map((t) => {
+              const val = traits?.[t.key] ?? 0.5
+              const pct = Math.round(val * 100)
+              const r = 38
+              const circ = 2 * Math.PI * r
+              const offset = circ - (pct / 100) * circ
+              return (
+                <div
+                  key={t.key}
+                  className={`p-4 rounded-2xl bg-base-200/50 border border-white/5 ring-1 ${t.ring} flex flex-col items-center text-center gap-3 transition-all hover:bg-base-200/80 shadow-md`}
+                >
+                  <div className="relative w-24 h-24">
+                    <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
+                      <circle
+                        cx="50"
+                        cy="50"
+                        r={r}
+                        fill="none"
+                        strokeWidth="5"
+                        className="stroke-white/5"
+                      />
+                      <circle
+                        cx="50"
+                        cy="50"
+                        r={r}
+                        fill="none"
+                        strokeWidth="5"
+                        strokeLinecap="round"
+                        strokeDasharray={circ}
+                        strokeDashoffset={offset}
+                        stroke={t.hex}
+                        className="transition-all duration-1000 ease-out"
+                      />
+                    </svg>
+                    <div
+                      className={`absolute inset-0 flex flex-col items-center justify-center ${t.color}`}
+                    >
+                      <t.icon className="text-xl mb-0.5 opacity-90" />
+                      <span className="text-xs font-bold font-mono text-base-content">{pct}%</span>
+                    </div>
+                  </div>
+                  <div>
+                    <p className={`text-xs font-bold font-mono ${t.color}`}>{t.label}</p>
+                    <p className="text-[10px] text-base-content/50 leading-tight mt-0.5">
+                      {t.desc}
+                    </p>
+                    <span className="inline-block mt-2 px-2.5 py-0.5 rounded-full text-[10px] font-mono font-medium bg-base-300 border border-white/5 text-base-content/70">
+                      {describeLevel(val)}
+                    </span>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Reasoning Log */}
+        {traits?.reasoning && (
+          <div className="p-5 rounded-2xl bg-base-200/60 border border-white/5 backdrop-blur-md">
+            <p className="text-xs font-mono font-bold text-base-content/60 mb-2 flex items-center gap-2">
+              <FaCommentDots className="text-primary" /> ALASAN PERUBAHAN SIKAP TERAKHIR:
+            </p>
+            <p className="text-sm text-base-content/80 italic font-sans leading-relaxed bg-base-300/60 p-4 rounded-xl border border-white/5">
+              &ldquo;{traits.reasoning}&rdquo;
+            </p>
+          </div>
+        )}
+
+        {/* Stats Grid */}
+        <div>
+          <h3 className="text-xs font-bold font-mono text-base-content/60 uppercase tracking-wider mb-3">
+            Ringkasan Statistik Sifat
+          </h3>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
+            {[
+              {
+                label: 'Total Evaluasi',
+                value: traits?.evalCount || 0,
+                icon: FaChartBar,
+                color: 'text-primary',
+                sub: 'Frekuensi adaptasi'
+              },
+              {
+                label: 'Kehangatan',
+                value: ((traits?.warmth || 0.5) * 100).toFixed(0) + '%',
+                icon: FaFire,
+                color: 'text-error',
+                sub: describeLevel(traits?.warmth || 0.5)
+              },
+              {
+                label: 'Kepercayaan',
+                value: ((traits?.trust || 0.5) * 100).toFixed(0) + '%',
+                icon: FaShieldAlt,
+                color: 'text-success',
+                sub: describeLevel(traits?.trust || 0.5)
+              },
+              {
+                label: 'Sarkasme',
+                value: ((traits?.sarcasm_level || 0.5) * 100).toFixed(0) + '%',
+                icon: FaTheaterMasks,
+                color: 'text-warning',
+                sub: describeLevel(traits?.sarcasm_level || 0.5)
+              },
+              {
+                label: 'Kepatuhan',
+                value: ((traits?.obedience || 0.5) * 100).toFixed(0) + '%',
+                icon: FaRobot,
+                color: 'text-secondary',
+                sub: describeLevel(traits?.obedience || 0.5)
+              }
+            ].map((stat, i) => {
+              const StatIcon = stat.icon
+              return (
+                <div
+                  key={i}
+                  className="p-3.5 rounded-xl bg-base-200/50 border border-white/5 hover:bg-base-200/80 transition-colors"
+                >
+                  <div className="flex items-center gap-1.5 mb-1.5">
+                    <StatIcon className={`text-sm ${stat.color}`} />
+                    <span className="text-[11px] text-base-content/50 leading-none">
+                      {stat.label}
+                    </span>
+                  </div>
+                  <p className={`text-lg font-bold font-mono leading-none ${stat.color}`}>
+                    {stat.value}
+                  </p>
+                  <p className="text-[10px] text-base-content/40 mt-1.5 leading-none">{stat.sub}</p>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Pencadangan, Migrasi & Pemulihan Database */}
+        <div className="p-5 rounded-2xl bg-base-200/70 border border-white/5 backdrop-blur-md shadow-lg flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+          <div>
+            <h4 className="text-xs font-bold font-mono text-base-content/80 uppercase tracking-wider flex items-center gap-2">
+              <FaDatabase className="text-primary" /> Pencadangan & Migrasi Database
+            </h4>
+            <p className="text-xs text-base-content/60 mt-1 max-w-xl">
+              Simpan atau pulihkan seluruh memori kognitif, Skill Yang Di Pelajari, arsip
+              percakapan, dan dokumen Mark dalam format JSON untuk cadangan atau migrasi antar
+              perangkat.
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 shrink-0">
+            {onExportDatabase && (
+              <button
+                type="button"
+                onClick={onExportDatabase}
+                disabled={isExportingDb || isRestoringDb}
+                className="btn btn-sm btn-outline btn-primary rounded-xl font-mono text-xs shadow-sm flex items-center gap-2"
+              >
+                {isExportingDb ? (
+                  <span className="loading loading-spinner loading-xs" />
+                ) : (
+                  <FaDownload size={11} />
+                )}
+                Backup Database (JSON)
+              </button>
+            )}
+            {onRestoreDatabase && (
+              <button
+                type="button"
+                onClick={onRestoreDatabase}
+                disabled={isExportingDb || isRestoringDb}
+                className="btn btn-sm btn-outline btn-warning rounded-xl font-mono text-xs shadow-sm flex items-center gap-2"
+              >
+                {isRestoringDb ? (
+                  <span className="loading loading-spinner loading-xs" />
+                ) : (
+                  <FaUpload size={11} />
+                )}
+                Restore Database
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={onResetAi}
+              disabled={isExportingDb || isRestoringDb}
+              className="btn btn-sm btn-outline btn-error rounded-xl font-mono text-xs shadow-sm flex items-center gap-1.5"
+            >
+              <FaTrash size={11} />
+              Reset Total AI
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Embedded Column
+  return (
+    <div className="lg:col-span-4 bg-base-200/50 backdrop-blur-md border border-white/5 rounded-2xl p-4 flex flex-col min-h-0 overflow-y-auto custom-scrollbar 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">
+          <FaFire className="text-error" /> SIFAT & KARAKTER
+        </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 Penuh <FaChevronRight size={8} />
+          </button>
+        )}
+      </div>
+
+      {/* Ringkasan Kepribadian */}
+      <div className="p-3 bg-base-300/60 rounded-xl border border-white/5 mb-3 text-xs text-base-content/80 leading-relaxed font-sans">
+        <span className="font-bold text-primary block mb-1 font-mono text-[10px] uppercase">
+          SIKAP MARK SAAT INI:
+        </span>
+        {describePersonality(traits)}
+      </div>
+
+      {/* 5 Trait Progress Bars */}
+      <div className="space-y-2.5 flex-1">
+        {TRAIT_META.map((t) => {
+          const val = traits?.[t.key] ?? 0.5
+          const pct = Math.round(val * 100)
+          return (
+            <div
+              key={t.key}
+              className="p-2.5 bg-base-300/40 rounded-xl border border-white/5 flex flex-col gap-1.5"
+            >
+              <div className="flex items-center justify-between text-xs font-mono">
+                <span className={`flex items-center gap-1.5 font-medium ${t.color}`}>
+                  <t.icon className="text-xs" /> {t.label}
+                </span>
+                <span className="font-semibold text-base-content/70">
+                  {pct}% ({describeLevel(val)})
+                </span>
+              </div>
+              <div className="w-full h-1.5 bg-base-content/10 rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-700"
+                  style={{ width: `${pct}%`, backgroundColor: t.hex }}
+                />
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Database Backup, Restore & Reset Buttons */}
+      <div className="mt-3 pt-3 border-t border-white/5 space-y-2">
+        <div className="grid grid-cols-2 gap-2">
+          {onExportDatabase && (
+            <button
+              type="button"
+              onClick={onExportDatabase}
+              disabled={isExportingDb || isRestoringDb}
+              className="btn btn-xs btn-outline btn-primary rounded-lg font-mono text-[10px] flex items-center justify-center gap-1.5"
+              title="Backup Database ke JSON"
+            >
+              {isExportingDb ? (
+                <span className="loading loading-spinner loading-xs" />
+              ) : (
+                <FaDownload size={9} />
+              )}
+              Backup JSON
+            </button>
+          )}
+          {onRestoreDatabase && (
+            <button
+              type="button"
+              onClick={onRestoreDatabase}
+              disabled={isExportingDb || isRestoringDb}
+              className="btn btn-xs btn-outline btn-warning rounded-lg font-mono text-[10px] flex items-center justify-center gap-1.5"
+              title="Pulihkan Database dari JSON"
+            >
+              {isRestoringDb ? (
+                <span className="loading loading-spinner loading-xs" />
+              ) : (
+                <FaUpload size={9} />
+              )}
+              Restore JSON
+            </button>
+          )}
+        </div>
+
+        <button
+          type="button"
+          onClick={onResetAi}
+          disabled={isExportingDb || isRestoringDb}
+          className="w-full py-1.5 bg-error/10 hover:bg-error/20 text-error border border-error/20 rounded-xl text-xs font-mono font-medium transition-all cursor-pointer flex items-center justify-center gap-1.5"
+        >
+          <FaTrash size={10} /> Reset Total AI
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default EmotionalCortexLobe

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import { FaTimes, FaTrash } from 'react-icons/fa'
+
+export const NodeDissectionModal = ({ node, onClose, onDeleteNode }) => {
+  if (!node) return null
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 animate-fade-in">
+      <div className="w-full max-w-lg bg-base-200 border border-white/10 rounded-2xl p-6 shadow-2xl">
+        <div className="flex items-center justify-between mb-3">
+          <span
+            className={`px-2.5 py-0.5 rounded-full text-xs font-mono font-bold ${
+              node.typeLabel === 'Explicit Memory'
+                ? 'bg-secondary/20 text-secondary border border-secondary/30'
+                : node.typeLabel === 'Document Chunk'
+                ? 'bg-warning/20 text-warning border border-warning/30'
+                : node.typeLabel === 'Learned Skill'
+                ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30'
+                : 'bg-primary/20 text-primary border border-primary/30'
+            }`}
+          >
+            {node.typeLabel || 'Data Memori'}
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-base-content/40 hover:text-base-content cursor-pointer transition-colors"
+          >
+            <FaTimes size={14} />
+          </button>
+        </div>
+
+        <p className="text-xs font-mono text-base-content/50 mb-2">{node.date}</p>
+        <div className="p-3.5 bg-base-300/60 border border-white/5 rounded-xl text-sm font-sans text-base-content/90 max-h-60 overflow-y-auto custom-scrollbar mb-4 leading-relaxed whitespace-pre-wrap">
+          {node.fullText}
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <span className="text-[11px] font-mono text-base-content/40">ID: {node.id}</span>
+          {(node.typeLabel === 'Explicit Memory' ||
+            node.typeLabel === 'Chat Archive' ||
+            node.typeLabel === 'Learned Skill') && (
+            <button
+              type="button"
+              onClick={() => onDeleteNode(node)}
+              className="btn btn-xs btn-error btn-outline font-mono flex items-center gap-1.5"
+            >
+              <FaTrash size={11} /> Hapus Data Memori
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NodeDissectionModal