@mazees/mark 5.0.0

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

@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+const ConfirmModal = ({ 
+  isOpen,
+  title, 
+  message, 
+  onConfirm, 
+  onCancel,
+  confirmText = "Ya", 
+  cancelText = "Batal", 
+  isError = false,
+  hideCancel = false
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape' && isOpen) {
+        onCancel?.();
+      }
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onCancel]);
+
+  if (!isOpen) return null;
+
+  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">
+        <h3 className={`font-bold text-lg ${isError ? 'text-error' : 'text-primary'}`}>{title}</h3>
+        <p className="py-4 text-sm opacity-80 whitespace-pre-wrap">
+          {message}
+        </p>
+        <div className="modal-action">
+          {!hideCancel && (
+            <button 
+              type="button"
+              className="btn btn-ghost btn-sm" 
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onCancel?.();
+              }}
+            >
+              {cancelText}
+            </button>
+          )}
+          <button 
+            type="button"
+            className={`btn ${isError ? 'btn-error' : 'btn-primary'} btn-sm shadow-md`} 
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onConfirm?.();
+            }}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+      <div 
+        className="modal-backdrop fixed inset-0 cursor-pointer bg-transparent" 
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onCancel?.();
+        }} 
+      />
+    </div>
+  );
+
+  if (typeof document !== 'undefined') {
+    return createPortal(modalContent, document.body);
+  }
+  return modalContent;
+};
+
+export default ConfirmModal;

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

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const DraggableHoloCard = ({ 
+  children, 
+  title, 
+  id, 
+  defaultPosition = { x: window.innerWidth - 400, y: 80 }, 
+  onClose, 
+  isVisible = true 
+}) => {
+  const [pos, setPos] = useState(defaultPosition);
+  const [isDragging, setIsDragging] = useState(false);
+  const [animState, setAnimState] = useState(isVisible ? 'entering' : 'hidden');
+  const dragRef = useRef({ offsetX: 0, offsetY: 0 });
+
+  useEffect(() => {
+    if (isVisible) {
+      setAnimState('entering');
+      const timer = setTimeout(() => setAnimState('visible'), 300);
+      return () => clearTimeout(timer);
+    } else {
+      setAnimState('exiting');
+      const timer = setTimeout(() => setAnimState('hidden'), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible]);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging) return;
+      
+      let newX = e.clientX - dragRef.current.offsetX;
+      let newY = e.clientY - dragRef.current.offsetY;
+
+      // Simple boundary clamping
+      const maxX = window.innerWidth - 100; // at least 100px visible
+      const maxY = window.innerHeight - 50;
+      
+      newX = Math.max(0, Math.min(newX, maxX));
+      newY = Math.max(0, Math.min(newY, maxY));
+
+      setPos({ x: newX, y: newY });
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    dragRef.current = {
+      offsetX: e.clientX - pos.x,
+      offsetY: e.clientY - pos.y
+    };
+  };
+
+  if (animState === 'hidden') return null;
+
+  const animationClass = animState === 'entering' 
+    ? 'animate-[holo-project-in_0.3s_ease-out_forwards]'
+    : animState === 'exiting'
+      ? 'animate-[holo-dismiss_0.3s_ease-in_forwards]'
+      : '';
+
+  const dragClass = isDragging ? 'scale-[1.02] rotate-1 shadow-2xl z-50' : 'shadow-lg z-40';
+
+  return (
+    <div 
+      className={`fixed ${animationClass} ${dragClass} transition-transform duration-75`}
+      style={{ left: pos.x, top: pos.y, width: 'fit-content' }}
+    >
+      <div className="relative overflow-hidden rounded-sm bg-[var(--glass-bg)] backdrop-blur-md border border-[var(--glass-border)] shadow-[0_4px_30px_oklch(var(--p)/0.1)]">
+        
+        {/* Animated Border Flow (Top & Bottom) */}
+        <div className="absolute top-0 left-0 right-0 h-[1px] bg-[var(--color-holo-border)] bg-[length:200%_auto] animate-[holo-border-flow_3s_linear_infinite]" />
+        <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-[var(--color-holo-border)] bg-[length:200%_auto] animate-[holo-border-flow_3s_linear_infinite] rotate-180" />
+        
+        {/* HUD Brackets */}
+        <div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-white/30 pointer-events-none" />
+        <div className="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-white/30 pointer-events-none" />
+        <div className="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-white/30 pointer-events-none" />
+        <div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-white/30 pointer-events-none" />
+
+        {/* Header / Drag Handle */}
+        <div 
+          className="flex items-center justify-between px-4 py-2 bg-base-300/50 cursor-grab active:cursor-grabbing border-b border-white/5 select-none"
+          onMouseDown={handleMouseDown}
+        >
+          <div className="flex items-center gap-2">
+            <span className="w-1.5 h-1.5 bg-success rounded-full animate-pulse shadow-[0_0_8px_oklch(var(--su))]" />
+            <span className="text-xs font-semibold uppercase tracking-wider text-success opacity-90">{title}</span>
+          </div>
+          
+          <button 
+            onClick={onClose}
+            className="text-white/50 hover:text-error transition-colors p-1 -mr-2 rounded-md hover:bg-white/10"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-4 overflow-y-auto max-h-[60vh] custom-scrollbar">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DraggableHoloCard;

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

@@ -0,0 +1,272 @@
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import markLogo from '../../assets/icon.svg'
+import {
+  FaBars,
+  FaTimes,
+  FaCog,
+  FaPuzzlePiece,
+  FaTelegram,
+  FaDatabase,
+  FaBook,
+  FaGoogle,
+  FaBrain,
+  FaRobot,
+  FaCommentAlt,
+  FaChevronRight
+} from 'react-icons/fa'
+
+const FloatingMenu = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const navigate = useNavigate()
+
+  // Handle ESC key to close drawer
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen])
+
+  const handleNav = (path) => {
+    navigate(path)
+    setIsOpen(false)
+  }
+
+  const handleOpenStudio = () => {
+    navigate('/chat')
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className={`h-9 w-9 btn btn-ghost p-0 bg-white/5 hover:bg-white/10 rounded-xl flex items-center justify-center transition-all cursor-pointer ${
+          isOpen ? 'text-white bg-white/20 ring-1 ring-white/20' : 'text-white/70 hover:text-white'
+        }`}
+        title="Buka Menu Navigasi"
+      >
+        <FaBars size={15} />
+      </button>
+
+      {/* Backdrop Overlay */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/75 backdrop-blur-md z-[100] transition-opacity duration-300 animate-[response-fade-in_0.2s_ease-out_forwards]"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+
+      {/* Slide-over Left Navigation Drawer */}
+      <aside
+        className={`fixed top-0 left-0 bottom-0 w-80 max-w-[85vw] bg-base-300/98 border-r border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.9)] z-[110] flex flex-col transition-transform duration-300 ease-out transform ${
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        {/* Drawer Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-white/5 bg-base-200/40">
+          <div className="flex items-center gap-3">
+            <img src={markLogo} alt="Mark Logo" className="size-20 object-contain" />
+            <div>
+              <h2 className="text-sm font-bold font-mono text-white tracking-wider">MARK AGENT</h2>
+              <p className="text-[10px] font-mono text-primary uppercase tracking-widest font-semibold">
+                v{typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '5.0.0'}
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => setIsOpen(false)}
+            className="w-8 h-8 flex items-center justify-center rounded-xl bg-white/5 hover:bg-error hover:text-white text-base-content/60 transition-colors cursor-pointer"
+            title="Tutup Menu"
+          >
+            <FaTimes size={13} />
+          </button>
+        </div>
+
+        {/* Scrollable Navigation Items */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-3.5 space-y-4">
+          {/* Section: Main Studio & Live */}
+          <div>
+            <span className="text-[10px] font-mono font-bold text-base-content/40 uppercase tracking-widest px-2.5 mb-1.5 block">
+              Workspace & Live
+            </span>
+            <div className="space-y-1">
+              <button
+                type="button"
+                onClick={handleOpenStudio}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaCommentAlt className="text-primary text-sm" />
+                  <span>Chat Studio</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+            </div>
+          </div>
+
+          {/* Section: Brain & Cognitive Systems */}
+          <div>
+            <span className="text-[10px] font-mono font-bold text-base-content/40 uppercase tracking-widest px-2.5 mb-1.5 block">
+              Cognitive & Brain
+            </span>
+            <div className="space-y-1">
+              <button
+                type="button"
+                onClick={() => handleNav('/neural-core')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaBrain className="text-primary text-sm" />
+                  <span>Neural Core</span>
+                </div>
+                <span className="text-[9px] px-1.5 py-0.5 rounded-md bg-primary/20 text-primary border border-primary/30 font-bold">
+                  OTAK
+                </span>
+              </button>
+
+              <button
+                type="button"
+                onClick={() => handleNav('/subagents')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaRobot className="text-primary text-sm" />
+                  <span>Sub-Agents</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={() => handleNav('/skills')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaPuzzlePiece className="text-primary text-sm" />
+                  <span>User Skills</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={() => handleNav('/knowledge')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaDatabase className="text-primary text-sm" />
+                  <span>Knowledge (RAG)</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+            </div>
+          </div>
+
+          {/* Section: Ecosystem & Integrations */}
+          <div>
+            <span className="text-[10px] font-mono font-bold text-base-content/40 uppercase tracking-widest px-2.5 mb-1.5 block">
+              Integrations & System
+            </span>
+            <div className="space-y-1">
+              <button
+                type="button"
+                onClick={() => handleNav('/plugins')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaPuzzlePiece className="text-primary text-sm" />
+                  <span>Plugins Hub</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={() => handleNav('/google-workspace')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaGoogle className="text-primary text-sm" />
+                  <span>Google Workspace</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+              <button
+                type="button"
+                onClick={() => handleNav('/telegram-bot')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaTelegram className="text-primary text-sm" />
+                  <span>Telegram Bot</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={() => handleNav('/guidebook')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaBook className="text-primary text-sm" />
+                  <span>Guidebook</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={() => handleNav('/config')}
+                className="w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-white/5 text-base-content/80 hover:text-white text-xs font-medium font-mono transition-colors cursor-pointer group"
+              >
+                <div className="flex items-center gap-3">
+                  <FaCog className="text-primary text-sm" />
+                  <span>Configuration</span>
+                </div>
+                <FaChevronRight
+                  size={10}
+                  className="text-base-content/30 group-hover:text-white/60 group-hover:translate-x-0.5 transition-all"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </>
+  )
+}
+
+export default FloatingMenu

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

@@ -0,0 +1,64 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+const HoloCard = ({ children, title, defaultExpanded = false }) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      if (contentRef.current.scrollHeight > 200) {
+        setIsOverflowing(true);
+      }
+    }
+  }, [children]);
+
+  return (
+    <div className="relative w-full overflow-hidden rounded-sm bg-[var(--glass-bg)] backdrop-blur-md border border-[var(--glass-border)] animate-[holo-enter_0.4s_ease-out_forwards] shadow-xl">
+      
+      {/* Animated Border Flow (Top) */}
+      <div className="absolute top-0 left-0 right-0 h-[1px] bg-[var(--color-holo-border)] bg-[length:200%_auto] animate-[holo-border-flow_3s_linear_infinite]" />
+      <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-[var(--color-holo-border)] bg-[length:200%_auto] animate-[holo-border-flow_3s_linear_infinite] rotate-180" />
+      
+      {/* HUD Brackets */}
+      <div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-white/30" />
+      <div className="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-white/30" />
+      <div className="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-white/30" />
+      <div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-white/30" />
+
+      {/* Scan lines effect */}
+      <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[repeating-linear-gradient(transparent,transparent_2px,oklch(var(--p))_3px,transparent_4px)] mix-blend-screen" />
+
+      <div className="relative z-10 flex flex-col p-5">
+        {title && (
+          <h3 className="text-success font-semibold text-xs mb-3 uppercase tracking-[0.2em] flex items-center gap-2">
+            <span className="w-1.5 h-1.5 bg-success rounded-full animate-pulse shadow-[0_0_8px_oklch(var(--su))]" />
+            {title}
+          </h3>
+        )}
+
+        <div 
+          ref={contentRef}
+          className={`transition-all duration-500 ease-in-out relative custom-markdown text-sm text-[#e2e8f0] ${isExpanded ? 'max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar' : 'max-h-[200px] overflow-hidden'}`}
+        >
+          {children}
+        </div>
+
+        {isOverflowing && (
+          <button 
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="mt-4 flex items-center justify-center gap-2 text-xs font-medium text-success opacity-70 hover:opacity-100 hover:bg-white/10 transition-all bg-white/5 py-2 rounded-lg border border-white/5"
+          >
+            {isExpanded ? (
+              <>▲ Ringkas Detail</>
+            ) : (
+              <>▼ Baca Detail Sepenuhnya</>
+            )}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HoloCard;