@mazees/mark 5.0.0

package/src/renderer/src/components/config/AiEngineSection.jsx

@@ -0,0 +1,363 @@
+import { useState } from 'react'
+import { FaCog } from 'react-icons/fa'
+import { AlertTriangle } from 'lucide-react'
+
+export const AiEngineSection = ({ config, setConfig }) => {
+  const [showCustomKey, setShowCustomKey] = useState(false)
+  const [showDeepseekToken, setShowDeepseekToken] = useState(false)
+
+  const handleAiProviderChange = (provider) =>
+    setConfig((prev) => ({ ...prev, aiProvider: provider }))
+
+  const handleModelChange = (e) => setConfig((prev) => ({ ...prev, model: e.target.value }))
+
+  const handleCustomEndpointChange = (e) =>
+    setConfig((prev) => ({ ...prev, customEndpoint: e.target.value }))
+
+  const handleCustomApiKeyChange = (e) =>
+    setConfig((prev) => ({ ...prev, customApiKey: e.target.value }))
+
+  const handleAwarenessEnabledChange = (e) =>
+    setConfig((prev) => ({ ...prev, awarenessEnabled: e.target.checked }))
+
+  const handlePersonalityChange = (e) =>
+    setConfig((prev) => ({ ...prev, personality: e.target.value }))
+
+  const handleTemperatureChange = (e) =>
+    setConfig((prev) => ({ ...prev, temperature: e.target.value }))
+
+  return (
+    <section className="space-y-5">
+      <h2 className="text-base font-bold uppercase tracking-wider opacity-70">AI Engine & Tools</h2>
+
+      {/* AI Provider Selector */}
+      <div id="tour-ai-provider" className="space-y-1.5">
+        <p className="text-sm font-semibold">AI Provider</p>
+        <select
+          className="select select-bordered w-full font-medium"
+          value={config.aiProvider || 'gemini-web'}
+          onChange={(e) => handleAiProviderChange(e.target.value)}
+        >
+          <option value="gemini-web">Gemini Web (Gratis)</option>
+          <option value="deepseek-web">DeepSeek Web (Gratis)</option>
+          <option value="custom">Custom API (OpenAI-Compatible)</option>
+          <option value="lm-studio">LM Studio (Local Offline)</option>
+        </select>
+      </div>
+
+      {config.aiProvider === 'deepseek-web' ? (
+        <div className="space-y-4">
+          {/* Risk Warning Notice */}
+          <div className="p-3 bg-warning/10 border border-warning/30 rounded-xl text-warning text-xs flex items-start gap-2.5 leading-relaxed">
+            <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-warning" />
+            <div>
+              <p className="font-semibold text-warning">Peringatan Risiko:</p>
+              <p className="text-white/80 mt-0.5">
+                Provider ini menggunakan sesi web/OAuth yang tidak dilisensikan secara resmi untuk
+                penggunaan proxy/router pihak ketiga. Akun dapat dibatasi atau diblokir (banned)
+                sementara oleh DeepSeek. Gunakan atas risiko sendiri.
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex justify-between items-center">
+              <p className="text-sm font-semibold">DeepSeek User Token (Bearer)</p>
+              <button
+                type="button"
+                onClick={async () => {
+                  try {
+                    const text = await navigator.clipboard.readText()
+                    if (text) setConfig((prev) => ({ ...prev, deepseekUserToken: text.trim() }))
+                  } catch (_) {}
+                }}
+                className="text-xs text-primary hover:underline cursor-pointer"
+              >
+                Paste dari Clipboard
+              </button>
+            </div>
+            <div className="relative w-full">
+              <input
+                type={showDeepseekToken ? 'text' : 'password'}
+                placeholder="eyJhbGciOi..."
+                className="input input-bordered w-full font-mono text-xs pr-10"
+                value={config.deepseekUserToken || ''}
+                onChange={(e) =>
+                  setConfig((prev) => ({ ...prev, deepseekUserToken: e.target.value }))
+                }
+              />
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 cursor-pointer"
+                onClick={() => setShowDeepseekToken(!showDeepseekToken)}
+                title={showDeepseekToken ? 'Sembunyikan Token' : 'Tampilkan Token'}
+              >
+                {showDeepseekToken ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+                    <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+                    <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+                    <line x1="2" x2="22" y1="2" y2="22" />
+                  </svg>
+                ) : (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                )}
+              </button>
+            </div>
+
+            {/* Panduan Cara Mendapatkan Token */}
+            <div className="p-3 bg-base-200/60 rounded-xl border border-white/5 space-y-2 text-xs">
+              <div className="flex items-center gap-1.5 font-semibold text-primary">
+                <FaCog className="w-3.5 h-3.5" />
+                <span>Cara Mendapatkan User Token DeepSeek:</span>
+              </div>
+              <ol className="list-decimal list-inside space-y-1 text-white/70">
+                <li>
+                  Buka dan login ke akunmu di{' '}
+                  <a
+                    href="https://chat.deepseek.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-primary underline"
+                  >
+                    chat.deepseek.com
+                  </a>{' '}
+                  di browser.
+                </li>
+                <li>
+                  Tekan tombol keyboard <strong>F12</strong> (atau klik kanan &gt; Inspect) lalu
+                  buka tab <strong>Console</strong>.
+                </li>
+                <li>Copy dan paste baris kode berikut ke dalam Console lalu tekan Enter:</li>
+              </ol>
+              <div className="flex items-center justify-between bg-black/50 p-2 rounded-lg border border-white/10 font-mono text-[11px] text-success">
+                <code className="truncate mr-2">
+                  JSON.parse(localStorage.getItem('userToken')).value
+                </code>
+                <button
+                  type="button"
+                  onClick={() =>
+                    navigator.clipboard.writeText(
+                      "JSON.parse(localStorage.getItem('userToken')).value"
+                    )
+                  }
+                  className="btn btn-xs btn-ghost text-white/50 hover:text-white shrink-0"
+                  title="Salin snippet"
+                >
+                  Salin Kode
+                </button>
+              </div>
+              <p className="text-[11px] text-white/40">
+                Salin nilai token yang muncul (tanpa tanda kutip), lalu tempelkan ke kolom input di
+                atas. Token ini otomatis memecahkan challenge anti-bot WASM DeepSeek secara lokal!
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : config.aiProvider === 'gemini-web' || !config.aiProvider ? (
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <p className="text-sm font-semibold">Model Gemini</p>
+            <select
+              className="select select-bordered w-full"
+              value={config.geminiWebModel || 'gemini-3.6-flash'}
+              onChange={(e) => setConfig((prev) => ({ ...prev, geminiWebModel: e.target.value }))}
+            >
+              <option value="gemini-3.6-flash">gemini-3.6-flash (Model Utama Terbaru)</option>
+              <option value="gemini-3.5-flash">gemini-3.5-flash (Stabil & Seimbang)</option>
+              <option value="gemini-3.5-flash-thinking">
+                gemini-3.5-flash-thinking (Penalaran Mendalam)
+              </option>
+              <option value="gemini-3.5-flash-thinking-lite">
+                gemini-3.5-flash-thinking-lite (Penalaran Cepat)
+              </option>
+              <option value="gemini-auto">gemini-auto (Otomatis Server)</option>
+              <option value="gemini-flash-lite">gemini-flash-lite (Super Cepat)</option>
+            </select>
+            <p className="text-xs opacity-50 mt-1">
+              Provider bawaan tanpa API Key. Membutuhkan koneksi internet (tidak mendukung input
+              gambar).
+            </p>
+          </div>
+        </div>
+      ) : config.aiProvider === 'custom' ? (
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <p className="text-sm font-semibold">Custom Endpoint URL</p>
+            <input
+              type="text"
+              placeholder="Contoh: https://api.openai.com/v1/chat/completions"
+              className={`input input-bordered w-full ${config.customEndpoint && !config.customEndpoint.trim().endsWith('/chat/completions') ? 'input-error' : ''}`}
+              value={config.customEndpoint || ''}
+              onChange={handleCustomEndpointChange}
+            />
+            {config.customEndpoint &&
+            !config.customEndpoint.trim().endsWith('/chat/completions') ? (
+              <p className="text-xs text-error mt-1 font-medium">
+                URL endpoint tidak memenuhi standar format OpenAI-Compatible.
+              </p>
+            ) : (
+              <p className="text-xs opacity-50 mt-1">
+                Pastikan Endpoint mendukung standar format <strong>OpenAI-Compatible</strong>.
+              </p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <p className="text-sm font-semibold">Custom Model ID</p>
+            <input
+              type="text"
+              placeholder="Contoh: gpt-4o-mini"
+              className="input input-bordered w-full"
+              value={config.customModel || ''}
+              onChange={(e) => setConfig((prev) => ({ ...prev, customModel: e.target.value }))}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <p className="text-sm font-semibold">Custom API Key</p>
+            <div className="relative w-full">
+              <input
+                type={showCustomKey ? 'text' : 'password'}
+                placeholder="Masukkan API Key (jika diperlukan)"
+                className="input input-bordered w-full pr-10"
+                value={config.customApiKey || ''}
+                onChange={handleCustomApiKeyChange}
+              />
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 cursor-pointer"
+                onClick={() => setShowCustomKey(!showCustomKey)}
+                title={showCustomKey ? 'Sembunyikan API Key' : 'Tampilkan API Key'}
+              >
+                {showCustomKey ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+                    <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+                    <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+                    <line x1="2" x2="22" y1="2" y2="22" />
+                  </svg>
+                ) : (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-1.5">
+          <p className="text-sm font-semibold">Model Selector (LM Studio)</p>
+          <input
+            type="text"
+            placeholder="Contoh: google/gemma-3-4b"
+            className="input input-bordered w-full"
+            value={config.model || ''}
+            onChange={handleModelChange}
+          />
+          <p className="text-xs opacity-40">
+            Nama model yang aktif di LM Studio. Pastikan sudah ter-load.
+          </p>
+        </div>
+      )}
+
+      {/* Awareness Engine Toggle */}
+      <div className="space-y-1.5 p-2 -mx-2 rounded-lg bg-base-200">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-semibold">Awareness Engine</p>
+            <p className="text-xs opacity-50 mt-1">
+              Mengizinkan Mark membaca log sistem/aktivitas dan memulai obrolan secara proaktif di
+              latar belakang.
+            </p>
+          </div>
+          <input
+            type="checkbox"
+            className="toggle toggle-primary"
+            checked={config.awarenessEnabled !== false}
+            onChange={handleAwarenessEnabledChange}
+          />
+        </div>
+      </div>
+
+      {/* System Persona */}
+      <div id="tour-persona" className="space-y-1.5 p-2 -mx-2 rounded-lg">
+        <p className="text-sm font-semibold">Gaya Bicara dan Kepribadian</p>
+        <textarea
+          className="textarea w-full h-72 leading-relaxed no-scrollbar resize-none"
+          placeholder="Deskripsikan kepribadian Mark..."
+          value={config.personality}
+          onChange={handlePersonalityChange}
+        />
+      </div>
+
+      {/* Temperature Slider */}
+      <div id="tour-temperature" className="space-y-2 p-2 -mx-2 rounded-lg">
+        <div className="flex items-center justify-between">
+          <p className="text-sm font-semibold">Temperature</p>
+          <span className="font-mono text-sm text-primary font-bold">{config.temperature}</span>
+        </div>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.1"
+          value={config.temperature}
+          className="range range-primary range-xs w-full"
+          onChange={handleTemperatureChange}
+        />
+        <div className="flex justify-between px-2.5 mt-2 text-xs">
+          <span>0</span>
+          <span>0.2</span>
+          <span>0.4</span>
+          <span>0.6</span>
+          <span>0.8</span>
+          <span>1.0</span>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/renderer/src/components/config/CameraSection.jsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react'
+
+export const ConfigCameraPreview = ({ deviceId, enabled }) => {
+  const videoRef = useRef(null)
+
+  useEffect(() => {
+    if (!enabled) return
+    let stream = null
+    let isMounted = true
+    const startCamera = async () => {
+      try {
+        const constraints = {
+          video: deviceId && deviceId !== 'default' ? { deviceId: { exact: deviceId } } : true
+        }
+        stream = await navigator.mediaDevices.getUserMedia(constraints)
+        if (videoRef.current && isMounted) {
+          videoRef.current.srcObject = stream
+          videoRef.current.play().catch((e) => console.error(e))
+        } else {
+          stream.getTracks().forEach((t) => t.stop())
+        }
+      } catch (err) {
+        console.error('Preview camera error:', err)
+      }
+    }
+    startCamera()
+    return () => {
+      isMounted = false
+      if (stream) stream.getTracks().forEach((t) => t.stop())
+    }
+  }, [deviceId, enabled])
+
+  if (!enabled) return null
+
+  return (
+    <div className="mt-4 rounded-xl overflow-hidden border border-white/10 bg-black/50 aspect-video relative flex items-center justify-center shadow-inner">
+      <video ref={videoRef} autoPlay playsInline muted className="w-full h-full object-cover" />
+      <div className="absolute top-2 left-2 flex items-center gap-2 px-2 py-1 bg-black/60 rounded text-xs font-mono text-white backdrop-blur-md">
+        <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
+        Live Preview
+      </div>
+    </div>
+  )
+}
+
+export const CameraSection = ({ config, setConfig, videoDevices }) => {
+  const handleCameraEnabledChange = (e) =>
+    setConfig((prev) => ({ ...prev, cameraEnabled: e.target.checked }))
+
+  const handleCameraDeviceIdChange = (e) =>
+    setConfig((prev) => ({ ...prev, cameraDeviceId: e.target.value }))
+
+  return (
+    <div className="space-y-6 p-2 -mx-2 rounded-lg">
+      <h2 className="text-base font-bold uppercase tracking-wider opacity-70 mb-5 flex items-center gap-2">
+        Kamera
+      </h2>
+
+      <div className="form-control">
+        <label className="label cursor-pointer p-0">
+          <span className="label-text text-sm font-semibold">Aktifkan Kamera AI</span>
+          <input
+            type="checkbox"
+            className="toggle toggle-primary"
+            checked={config.cameraEnabled !== false}
+            onChange={handleCameraEnabledChange}
+          />
+        </label>
+        <span className="text-xs opacity-50 mt-2 block">
+          Mengizinkan Mark menggunakan kamera (jika diminta) untuk melihat dunia fisik.
+        </span>
+      </div>
+
+      {config.cameraEnabled !== false && (
+        <div className="space-y-1.5">
+          <p className="text-sm font-semibold">Perangkat Kamera</p>
+          <select
+            className="select select-bordered w-full"
+            value={config.cameraDeviceId || 'default'}
+            onChange={handleCameraDeviceIdChange}
+          >
+            <option value="default">Default System Camera</option>
+            {videoDevices.map((cam) => (
+              <option key={cam.deviceId} value={cam.deviceId}>
+                {cam.label || `Camera ${cam.deviceId.substring(0, 5)}...`}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {config.cameraEnabled !== false && (
+        <ConfigCameraPreview
+          deviceId={config.cameraDeviceId}
+          enabled={config.cameraEnabled !== false}
+        />
+      )}
+    </div>
+  )
+}

package/src/renderer/src/components/config/PermissionsSection.jsx

@@ -0,0 +1,130 @@
+import { useState, useEffect } from 'react'
+import { ShieldCheck, Terminal, Folder, Trash2, ShieldAlert } from 'lucide-react'
+import { getAlwaysAllowedPaths, removeAlwaysAllowedPath } from '../../api/db'
+
+export const PermissionsSection = () => {
+  const [paths, setPaths] = useState([])
+  const [isDeleting, setIsDeleting] = useState(null)
+
+  const loadPaths = async () => {
+    try {
+      const list = await getAlwaysAllowedPaths()
+      setPaths(Array.isArray(list) ? list : [])
+    } catch (_) {
+      setPaths([])
+    }
+  }
+
+  useEffect(() => {
+    loadPaths()
+
+    const handleConfigUpdated = (e) => {
+      if (Array.isArray(e.detail?.alwaysAllowedPaths)) {
+        setPaths(e.detail.alwaysAllowedPaths)
+      }
+    }
+    window.addEventListener('config-updated', handleConfigUpdated)
+    return () => window.removeEventListener('config-updated', handleConfigUpdated)
+  }, [])
+
+  const handleDelete = async (target) => {
+    setIsDeleting(target)
+    try {
+      const updated = await removeAlwaysAllowedPath(target)
+      setPaths(Array.isArray(updated) ? updated : [])
+    } catch (e) {
+      console.error('Gagal menghapus izin whitelist:', e)
+    } finally {
+      setIsDeleting(null)
+    }
+  }
+
+  return (
+    <section className="space-y-4 p-2 -mx-2 rounded-lg">
+      <div>
+        <h2 className="text-base font-bold uppercase tracking-wider opacity-70 flex items-center gap-2">
+          <ShieldAlert className="w-4 h-4 text-warning" />
+          Keamanan & Izin Tool (Whitelist)
+        </h2>
+        <p className="text-xs text-white/50 mt-1">
+          Daftar folder dan perintah shell yang diizinkan selamanya tanpa memunculkan permintaan
+          konfirmasi.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        {paths.length === 0 ? (
+          <div className="flex flex-col items-center justify-center p-6 bg-base-200/50 rounded-xl border border-white/5 text-center space-y-2">
+            <ShieldCheck className="w-8 h-8 text-white/30" />
+            <p className="text-xs font-medium text-white/60">
+              Belum ada izin permanen yang tersimpan.
+            </p>
+            <p className="text-[11px] text-white/40 max-w-sm">
+              Ketika Mark meminta izin di percakapan, Anda dapat memilih "Izinkan Selamanya" untuk
+              mendaftarkannya ke sini.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-2 max-h-72 overflow-y-auto custom-scrollbar pr-1">
+            {paths.map((item) => {
+              const isCommand = String(item).startsWith('cmd:')
+              const displayVal = isCommand ? item.slice(4) : item
+
+              return (
+                <div
+                  key={item}
+                  className="flex items-center justify-between p-3 bg-base-200/80 rounded-xl border border-white/5 hover:border-white/10 transition-all gap-3 group"
+                >
+                  <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                    <div className="p-1.5 rounded-lg bg-black/40 text-white/70 shrink-0">
+                      {isCommand ? (
+                        <Terminal className="w-3.5 h-3.5 text-warning" />
+                      ) : (
+                        <Folder className="w-3.5 h-3.5 text-primary" />
+                      )}
+                    </div>
+                    <div className="flex flex-col min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span
+                          className={`badge badge-xs font-mono text-[9px] px-1.5 py-0.5 ${
+                            isCommand
+                              ? 'bg-warning/15 text-warning border-warning/30'
+                              : 'bg-primary/15 text-primary border-primary/30'
+                          }`}
+                        >
+                          {isCommand ? 'Perintah Shell' : 'Folder / Berkas'}
+                        </span>
+                      </div>
+                      <span
+                        className="font-mono text-xs text-white/90 truncate mt-0.5"
+                        title={displayVal}
+                      >
+                        {displayVal}
+                      </span>
+                    </div>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(item)}
+                    disabled={isDeleting === item}
+                    className="btn btn-ghost btn-xs text-error hover:bg-error/20 p-1.5 h-auto rounded-lg transition-colors cursor-pointer shrink-0"
+                    title="Cabut Izin Permanen"
+                  >
+                    {isDeleting === item ? (
+                      <span className="loading loading-spinner loading-xs" />
+                    ) : (
+                      <Trash2 className="w-3.5 h-3.5" />
+                    )}
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default PermissionsSection