@mazees/mark 5.0.0

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

@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react'
+import { FaCheckCircle, FaListUl, FaBolt, FaCheck, FaChevronRight } from 'react-icons/fa'
+
+const ProcessPanel = ({ processes = [], onDismiss, isEmbedded = false }) => {
+  const [renderedProcesses, setRenderedProcesses] = useState([])
+  const executingTaskCount = processes.filter(
+    (process) => process.type === 'planning' && process.status === 'active'
+  ).length
+
+  // Sync rendered processes with delayed unmount
+  useEffect(() => {
+    setRenderedProcesses((prev) => {
+      let next = prev.map((rp) => {
+        const updated = processes.find((p) => p.id === rp.id)
+        if (updated) return { ...updated, isExiting: false }
+        if (!rp.isExiting) return { ...rp, isExiting: true }
+        return rp
+      })
+
+      processes.forEach((p) => {
+        if (!prev.find((rp) => rp.id === p.id)) {
+          next.push({ ...p, isExiting: false })
+        }
+      })
+
+      return next
+    })
+  }, [processes])
+
+  // Clean up exiting processes after animation
+  useEffect(() => {
+    const hasExiting = renderedProcesses.some((p) => p.isExiting)
+    if (hasExiting) {
+      const timer = setTimeout(() => {
+        setRenderedProcesses((prev) => prev.filter((p) => !p.isExiting))
+      }, 250)
+      return () => clearTimeout(timer)
+    }
+  }, [renderedProcesses])
+
+  // Auto-dismiss logic for 'done' and 'failed' status
+  useEffect(() => {
+    const timers = []
+    processes.forEach((proc) => {
+      if (proc.status === 'done' || proc.status === 'completed' || proc.status === 'failed') {
+        const timeout = proc.type === 'planning' ? 1200 : 2500
+        const timer = setTimeout(() => {
+          if (onDismiss) onDismiss(proc.id)
+        }, timeout)
+        timers.push(timer)
+      }
+    })
+    return () => {
+      timers.forEach((t) => clearTimeout(t))
+    }
+  }, [processes, onDismiss])
+
+  if (!renderedProcesses || renderedProcesses.length === 0) return null
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      {renderedProcesses.map((proc) => {
+        if (proc.type === 'planning') {
+          const { steps, currentStep, reasoning } = proc.data || {}
+          const isDone = proc.status === 'done'
+          const isFailed = proc.status === 'failed'
+          const isPaused = proc.status === 'paused'
+          const executionTitle =
+            executingTaskCount === 1
+              ? 'Executing 1 Task'
+              : `Executing ${Math.max(executingTaskCount, 1)} Tasks`
+
+          return (
+            <div
+              key={proc.id}
+              className="bg-black/60 border border-primary/20 rounded-xl p-3 shadow-lg flex flex-col gap-1.5 animate-[holo-project-in_0.2s_ease-out_forwards]"
+            >
+              <div className="flex items-center justify-between border-b border-white/5 pb-1.5 text-xs font-mono font-bold">
+                <div className="flex items-center gap-1.5 text-primary">
+                  {isDone ? (
+                    <FaCheckCircle className="text-success" />
+                  ) : isFailed ? (
+                    <FaBolt className="text-error" />
+                  ) : isPaused ? (
+                    <FaBolt className="text-warning" />
+                  ) : (
+                    <FaListUl className="text-primary animate-pulse" />
+                  )}
+                  <span>{isDone ? 'Task Completed' : isFailed ? 'Task Failed' : executionTitle}</span>
+                </div>
+                {onDismiss && (
+                  <button
+                    onClick={() => onDismiss(proc.id)}
+                    className="text-white/40 hover:text-white text-xs cursor-pointer px-1"
+                  >
+                    ✕
+                  </button>
+                )}
+              </div>
+
+              {reasoning && (
+                <details className="group mt-1">
+                  <summary className="text-[10px] cursor-pointer select-none flex items-center gap-1 opacity-50 hover:opacity-100 transition-opacity uppercase tracking-wider">
+                    <FaChevronRight className="group-open:rotate-90 transition-transform text-[8px]" />
+                    Proses Pemikiran
+                  </summary>
+                  <div className="text-[10px] opacity-70 border-l border-primary/30 pl-2 mt-1 mb-1 font-mono whitespace-pre-wrap">
+                    {reasoning}
+                  </div>
+                </details>
+              )}
+
+              {steps && steps.length > 0 && (
+                <div className="flex flex-col gap-1 mt-1">
+                  {steps.map((step, idx) => {
+                    let prefix = `${idx + 1}.`
+                    let opacity = 'opacity-40 text-white/70'
+                    let suffix = ''
+
+                    if (idx < currentStep) {
+                      prefix = <FaCheck className="inline" size={9} />
+                      opacity = 'opacity-100 text-success font-bold'
+                    } else if (idx === currentStep && !isDone) {
+                      opacity = 'opacity-100 text-primary font-bold animate-pulse'
+                      suffix = '...'
+                    }
+
+                    const hasQuery = typeof step === 'object' && step.query
+                    const taskTitle = typeof step === 'object' ? step.task : step
+
+                    return (
+                      <div key={idx} className={`flex items-start text-[10px] font-mono ${opacity}`}>
+                        <span className="w-3.5 shrink-0 inline-block">{prefix}</span>
+                        <div className="flex-1 min-w-0">
+                          {hasQuery ? (
+                            <details className="group/step outline-none">
+                              <summary className="cursor-pointer select-none flex items-center hover:opacity-100 outline-none list-none [&::-webkit-details-marker]:hidden transition-opacity">
+                                <FaChevronRight className="group-open/step:rotate-90 transition-transform text-[8px] mr-1 opacity-50 shrink-0" />
+                                <span className="truncate">{taskTitle} {suffix}</span>
+                              </summary>
+                              <div className="mt-1 pl-2 opacity-80 text-[9px] border-l border-primary/30 ml-1 mb-1 break-words font-mono bg-black/40 p-1.5 rounded text-primary/90 max-h-32 overflow-y-auto">
+                                {typeof step.query === 'object' ? JSON.stringify(step.query, null, 2) : step.query}
+                              </div>
+                            </details>
+                          ) : (
+                            <div className="truncate">
+                              {taskTitle} {suffix}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        }
+
+        if (proc.type === 'plugin-execution') {
+          const hasQuery = !!proc.data?.query
+          return (
+            <div
+              key={proc.id}
+              className="bg-black/60 border border-primary/20 rounded-xl p-2.5 shadow-lg text-xs font-mono text-white/80 animate-[holo-project-in_0.2s_ease-out_forwards]"
+            >
+              <div className="flex items-center justify-between mb-1">
+                <div className="text-primary flex items-center gap-1 text-[11px] font-bold">
+                  <FaBolt size={10} className="animate-pulse" /> {proc.data?.action}
+                </div>
+                {onDismiss && (
+                  <button
+                    onClick={() => onDismiss(proc.id)}
+                    className="text-white/40 hover:text-white text-xs cursor-pointer px-1"
+                  >
+                    ✕
+                  </button>
+                )}
+              </div>
+              {hasQuery ? (
+                <details className="group/plugin outline-none">
+                  <summary className="text-[10px] text-white/70 cursor-pointer select-none flex items-center hover:opacity-100 outline-none list-none [&::-webkit-details-marker]:hidden transition-opacity">
+                    <FaChevronRight className="group-open/plugin:rotate-90 transition-transform text-[8px] mr-1 opacity-50 shrink-0" />
+                    <span className="truncate">
+                      Mengeksekusi: <span className="text-primary font-semibold">{proc.data?.action}</span>
+                    </span>
+                  </summary>
+                  <div className="mt-1 pl-2 opacity-80 text-[9px] border-l border-primary/30 ml-1 mb-1 font-mono bg-black/40 p-1.5 rounded text-primary/90 max-h-28 overflow-y-auto whitespace-pre-wrap break-all">
+                    {typeof proc.data.query === 'object'
+                      ? JSON.stringify(proc.data.query, null, 2)
+                      : String(proc.data.query)}
+                  </div>
+                </details>
+              ) : (
+                <div className="text-[10px] text-white/70 truncate">
+                  Mengeksekusi: <span className="text-primary">{proc.data?.action}</span>
+                </div>
+              )}
+              {proc.data?.result && (
+                <div className="mt-1 p-1.5 bg-primary/10 text-primary border border-primary/20 rounded text-[9px] font-mono whitespace-pre-wrap max-h-24 overflow-y-auto">
+                  {typeof proc.data.result === 'object'
+                    ? JSON.stringify(proc.data.result, null, 2)
+                    : String(proc.data.result)}
+                </div>
+              )}
+            </div>
+          )
+        }
+
+        return null
+      })}
+    </div>
+  )
+}
+
+export default ProcessPanel

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

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react'
+import { FaLightbulb } from 'react-icons/fa'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeExternalLinks from 'rehype-external-links'
+import { CodeBlock } from '../Chat/CodeBlock'
+import PluginExecutionBubble from '../Chat/PluginExecutionBubble'
+
+const ResponseArea = ({ currentResponse }) => {
+  const [animState, setAnimState] = useState('idle') // 'fade-out', 'fade-in', 'idle'
+  const [displayResponse, setDisplayResponse] = useState(currentResponse)
+
+  useEffect(() => {
+    if (currentResponse !== displayResponse) {
+      if (displayResponse) {
+        setAnimState('fade-out')
+        const timer = setTimeout(() => {
+          setDisplayResponse(currentResponse)
+          setAnimState('fade-in')
+        }, 150)
+        return () => clearTimeout(timer)
+      } else {
+        setDisplayResponse(currentResponse)
+        setAnimState('fade-in')
+      }
+    }
+  }, [currentResponse, displayResponse])
+
+  if (!displayResponse) return null
+
+  const { text, type, pluginResult } = displayResponse
+
+  const animationClass =
+    animState === 'fade-out'
+      ? 'animate-[response-fade-out_0.15s_ease-out_forwards]'
+      : animState === 'fade-in'
+        ? 'animate-[response-fade-in_0.2s_ease-out_forwards]'
+        : ''
+
+  const markdownComponents = {
+    code({ node, inline, className, children, ...props }) {
+      const match = /language-(\w+)/.exec(className || '')
+      return !inline ? (
+        <CodeBlock match={match} children={children} />
+      ) : (
+        <code
+          className={`px-1.5 py-0.5 rounded bg-white/10 text-primary font-mono text-xs ${className || ''}`}
+          {...props}
+        >
+          {children}
+        </code>
+      )
+    },
+    a: ({ node, ...props }) => {
+      let url = props.href || '#'
+      if (url !== '#' && !url.startsWith('http://') && !url.startsWith('https://')) {
+        url = 'https://' + url
+      }
+      return (
+        <a
+          {...props}
+          className="text-primary hover:underline"
+          onClick={(e) => {
+            e.preventDefault()
+            if (window.api && window.api.openExternal && url !== '#') {
+              window.api.openExternal(url)
+            }
+          }}
+        />
+      )
+    }
+  }
+
+  const renderContent = () => {
+    if (displayResponse.isThinking) {
+      return (
+        <div className="w-full">
+          <div className="p-4 rounded-xl bg-white/[0.03] text-left text-xs md:text-sm font-mono leading-relaxed text-white/90">
+            <div className="flex flex-col items-center justify-center gap-3 py-3">
+              <div className="relative w-8 h-8 flex items-center justify-center text-primary">
+                <svg
+                  viewBox="0 0 50 50"
+                  className="w-full h-full animate-[spin_3s_linear_infinite]"
+                >
+                  <circle
+                    cx="25"
+                    cy="25"
+                    r="20"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeDasharray="30 15"
+                    className="opacity-40"
+                  />
+                  <circle
+                    cx="25"
+                    cy="25"
+                    r="14"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeDasharray="20 10"
+                    className="opacity-80 animate-[spin_2s_linear_infinite_reverse]"
+                    style={{ transformOrigin: 'center' }}
+                  />
+                </svg>
+                <FaLightbulb className="absolute animate-pulse text-primary" size={10} />
+              </div>
+              <div className="text-[10px] uppercase tracking-widest text-primary/80 font-mono">
+                {text !== 'Bentar, mikir dlu...' && text !== 'Memproses...'
+                  ? text
+                  : 'PROCESSING DATA...'}
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="w-full">
+        <div className="p-3.5 rounded-xl bg-white/[0.03] text-left text-xs md:text-sm font-mono leading-relaxed text-white/90">
+          <Markdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }]]}
+            components={markdownComponents}
+          >
+            {text}
+          </Markdown>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`w-full flex flex-col gap-3 ${animationClass}`}>
+      {renderContent()}
+
+      {/* Plugin Execution Result Chip */}
+      {pluginResult && (
+        <div className="w-full">
+          <PluginExecutionBubble pluginExecution={pluginResult} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(ResponseArea)

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

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import { FaCheckCircle, FaInfoCircle, FaExclamationTriangle, FaTimesCircle } from 'react-icons/fa';
+
+const StatusIndicator = ({ notifications }) => {
+  const [activeToasts, setActiveToasts] = useState([]);
+
+  useEffect(() => {
+    if (notifications && notifications.length > 0) {
+      const newNotifs = notifications.filter(n => !activeToasts.find(t => t.id === n.id));
+      if (newNotifs.length > 0) {
+        // Prepare toasts with types
+        const enhancedNotifs = newNotifs.map(notif => {
+          let alertType = 'alert-info';
+          let Icon = FaInfoCircle;
+          const typeStr = String(notif?.type || '').toLowerCase();
+
+          if (typeStr.includes('memory') || typeStr === 'plugin-done' || typeStr === 'success') {
+            alertType = 'alert-success';
+            Icon = FaCheckCircle;
+          } else if (typeStr === 'plugin-executing') {
+            alertType = 'alert-warning';
+            Icon = FaExclamationTriangle;
+          } else if (typeStr === 'error') {
+            alertType = 'alert-error';
+            Icon = FaTimesCircle;
+          }
+
+          return { ...notif, alertType, Icon };
+        });
+
+        setActiveToasts(prev => [...prev, ...enhancedNotifs]);
+        
+        enhancedNotifs.forEach(notif => {
+          setTimeout(() => {
+            setActiveToasts(prev => prev.filter(t => t.id !== notif.id));
+          }, 3000);
+        });
+      }
+    }
+  }, [notifications]);
+
+  if (activeToasts.length === 0) return null;
+
+  return (
+    <div className="toast toast-top toast-end z-[9999] p-4">
+      {activeToasts.map(toast => (
+        <div 
+          key={toast.id} 
+          className={`alert ${toast.alertType} shadow-lg rounded-xl flex items-center gap-3 animate-fade-in`}
+        >
+          <toast.Icon className="w-5 h-5" />
+          <span className="text-sm font-medium pr-2">{toast.message}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default StatusIndicator;

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

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from 'react';
+import { FaCheck, FaSpinner, FaBrain } from 'react-icons/fa';
+
+const ThoughtNeuralFlow = ({ processes }) => {
+  const [displayedPlan, setDisplayedPlan] = useState(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    let activePlan = processes.find(p => p.type === 'planning');
+    
+    if (!activePlan && processes.length > 0) {
+      const runningProc = processes.find(p => p.status !== 'done');
+      if (runningProc) {
+        let taskName = runningProc.type === 'web-search' ? 'Mencari Data...' : 
+                       runningProc.type === 'plugin-execution' ? 'Eksekusi Plugin...' : 
+                       'Memproses...';
+        activePlan = {
+          status: runningProc.status,
+          data: {
+            plan: ['Analisis', taskName, 'Sintesis'],
+            currentStep: 1,
+            reasoning: 'Fast Track Execution'
+          }
+        };
+      }
+    }
+
+    if (activePlan) {
+      setDisplayedPlan(activePlan);
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  }, [processes]);
+
+  const plan = displayedPlan?.data?.plan || [];
+  const currentStep = displayedPlan?.data?.currentStep || 0;
+  const reasoning = displayedPlan?.data?.reasoning || '';
+  const isDone = displayedPlan?.status === 'done';
+
+  return (
+    <div
+      className={`absolute inset-0 z-0 pointer-events-none flex items-center justify-center transition-all duration-500 ease-out
+        ${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-90'}
+      `}
+    >
+      {/* Reasoning text removed as per user request */}
+
+      {/* Nodes around the Orb */}
+      {plan.map((step, idx) => {
+        const isCompleted = idx < currentStep;
+        const isActive = idx === currentStep && !isDone;
+        const isPending = idx > currentStep;
+        const stepText = typeof step === 'object' ? step.task : step;
+
+        const totalNodes = plan.length;
+        const span = totalNodes > 3 ? 180 : 140; // Expand span if there are many nodes
+        const startAngle = -90 - (span / 2);
+        const stepAngle = totalNodes > 1 ? span / (totalNodes - 1) : 0;
+        
+        const angleDeg = startAngle + (idx * stepAngle);
+        const angleRad = (angleDeg * Math.PI) / 180;
+        
+        // Push nodes further away if there are many to avoid overlapping labels
+        // Use a zigzag pattern for radius if there are many nodes (alternating distances)
+        const baseRadius = totalNodes > 3 ? 170 : 150;
+        const radius = totalNodes > 3 ? baseRadius + (idx % 2 === 0 ? 0 : 40) : baseRadius;
+        
+        const x = Math.cos(angleRad) * radius;
+        const y = Math.sin(angleRad) * radius;
+
+        // Holographic glass styles
+        let glassClass = 'from-base-content/10 to-base-content/5 border-base-content/20 text-base-content/40';
+        if (isCompleted) glassClass = 'from-primary/40 to-primary/10 border-primary/50 text-primary shadow-[inset_0_0_10px_oklch(var(--p)/0.2)]';
+        if (isActive) glassClass = 'from-secondary/50 to-secondary/20 border-secondary/60 text-secondary shadow-[inset_0_0_15px_oklch(var(--s)/0.4)] animate-pulse scale-110';
+
+        // Calculate line coordinates so they start from the surface of the Node and end at the surface of the Orb
+        // Node is at (x,y) relative to Orb(0,0).
+        // The SVG center (150,150) represents the Node.
+        const distance = radius; 
+        const nodeClearance = 16; // Don't draw inside the 32px neuron cube
+        const orbClearance = 60; // Don't draw inside the 96px main orb
+
+        // Direction from Node to Orb is (-x, -y)
+        const dirX = -x / distance;
+        const dirY = -y / distance;
+
+        const startX = 150 + (dirX * nodeClearance);
+        const startY = 150 + (dirY * nodeClearance);
+
+        const endX = 150 + (dirX * (distance - orbClearance));
+        const endY = 150 + (dirY * (distance - orbClearance));
+
+        return (
+          <div 
+            key={idx} 
+            className="absolute flex flex-col items-center"
+            style={{ 
+              transform: `translate(${x}px, ${y}px)`,
+              transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+              transitionDelay: `${idx * 100}ms`
+            }}
+          >
+            {/* Draw SVG line connecting to center (Orb) */}
+            <svg className="absolute w-[300px] h-[300px] pointer-events-none overflow-visible" style={{ top: -150, left: -150 }}>
+               <line 
+                 x1={startX} y1={startY} 
+                 x2={endX} y2={endY} 
+                 stroke="currentColor" 
+                 className={isCompleted ? 'text-primary opacity-50' : isActive ? 'text-secondary opacity-80' : 'text-base-content opacity-20'}
+                 strokeWidth="2"
+                 strokeDasharray="4 4"
+               />
+            </svg>
+
+            {/* The Node (3D Neuron) */}
+            <div className="relative w-8 h-8 z-10 perspective-1000">
+              <div 
+                className="w-full h-full relative" 
+                style={{ 
+                  transformStyle: 'preserve-3d', 
+                  animation: isActive ? 'neuron-spin 4s linear infinite' : 'neuron-spin 10s linear infinite' 
+                }}
+              >
+                {['front', 'back', 'right', 'left', 'top', 'bottom'].map((face) => {
+                  let transform = '';
+                  // 8 = 2rem = 32px -> half is 16px
+                  if (face === 'front') transform = 'translateZ(16px)';
+                  if (face === 'back') transform = 'rotateY(180deg) translateZ(16px)';
+                  if (face === 'right') transform = 'rotateY(90deg) translateZ(16px)';
+                  if (face === 'left') transform = 'rotateY(-90deg) translateZ(16px)';
+                  if (face === 'top') transform = 'rotateX(90deg) translateZ(16px)';
+                  if (face === 'bottom') transform = 'rotateX(-90deg) translateZ(16px)';
+
+                  return (
+                    <div 
+                      key={face} 
+                      className={`absolute inset-0 m-auto w-full h-full rounded-[4px] border backdrop-blur-sm bg-gradient-to-br flex items-center justify-center transition-all duration-700 ease-in-out ${glassClass}`}
+                      style={{ transform }}
+                    >
+                      {face === 'front' && (
+                        <div className="relative w-4 h-4 flex items-center justify-center">
+                           <div className={`absolute inset-0 flex items-center justify-center transition-all duration-500 ${isCompleted ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-50 -rotate-90'}`}>
+                             <FaCheck size={10} />
+                           </div>
+                           <div className={`absolute inset-0 flex items-center justify-center transition-all duration-500 ${isActive ? 'opacity-100 scale-100' : 'opacity-0 scale-50'}`}>
+                             <FaSpinner className="animate-spin" size={10} />
+                           </div>
+                           <div className={`absolute inset-0 flex items-center justify-center transition-all duration-500 ${isPending ? 'opacity-100 scale-100' : 'opacity-0 scale-50'}`}>
+                             <span className="text-[10px]">{idx + 1}</span>
+                           </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            
+            {/* Text labels removed as per user request */}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ThoughtNeuralFlow;