@mazees/mark 5.0.0

package/src/renderer/src/components/subagent/AgentInspector.jsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react'
+import {
+  X,
+  Cpu,
+  Shield,
+  Terminal,
+  CheckCircle2,
+  Trash2
+} from 'lucide-react'
+
+export default function AgentInspector({ subagent, onClose, onDeleteAgent }) {
+  const [activeTab, setActiveTab] = useState('details') // 'details' | 'tools'
+
+  if (!subagent) return null
+
+  const isRunning = subagent.status === 'running'
+  const isCompleted = subagent.status === 'completed'
+
+  return (
+    <aside className="w-80 flex flex-col bg-base-200/60 border-l border-base-content/10 flex-none h-full overflow-hidden select-none">
+      {/* Inspector Header */}
+      <div className="p-3.5 border-b border-base-content/10 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="p-1.5 rounded-xl bg-accent/10 border border-accent/20 text-accent">
+            <Cpu className="w-4 h-4" />
+          </div>
+          <div>
+            <h2 className="text-xs font-bold tracking-wide uppercase text-base-content/90 font-mono">
+              Agent Inspector
+            </h2>
+            <span className="text-[10px] text-base-content/50 font-mono">
+              ID: {subagent.id}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {onDeleteAgent && (
+            <button
+              type="button"
+              onClick={() => onDeleteAgent(subagent.id)}
+              className="btn btn-ghost btn-xs btn-circle text-base-content/40 hover:text-error transition-colors"
+              title="Hapus Agen"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          )}
+          {onClose && (
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn btn-ghost btn-xs btn-circle text-base-content/50 hover:text-base-content"
+              title="Tutup Panel Inspector"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="px-3 pt-2">
+        <div className="flex gap-1 p-0.5 bg-base-300/60 rounded-xl w-full border border-base-content/5 font-mono text-[10px]">
+          <button
+            type="button"
+            onClick={() => setActiveTab('details')}
+            className={`flex-1 py-1 font-medium rounded-lg transition-all ${
+              activeTab === 'details'
+                ? 'bg-base-100 text-base-content shadow-sm font-semibold'
+                : 'text-base-content/50 hover:text-base-content'
+            }`}
+          >
+            Overview
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('tools')}
+            className={`flex-1 py-1 font-medium rounded-lg transition-all ${
+              activeTab === 'tools'
+                ? 'bg-base-100 text-base-content shadow-sm font-semibold'
+                : 'text-base-content/50 hover:text-base-content'
+            }`}
+          >
+            Tools & Sandbox
+          </button>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-y-auto p-3.5 space-y-4 text-xs custom-scrollbar font-mono">
+        {activeTab === 'details' && (
+          <>
+            {/* Identity Card */}
+            <div className="p-3 bg-base-100/50 rounded-xl border border-base-content/10 space-y-2.5">
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] text-base-content/40 uppercase">Status</span>
+                <span
+                  className={`badge badge-xs font-mono text-[9px] py-2 gap-1 ${
+                    isRunning
+                      ? 'badge-primary'
+                      : isCompleted
+                        ? 'badge-success'
+                        : 'badge-ghost text-base-content/60'
+                  }`}
+                >
+                  {isRunning && <span className="w-1.5 h-1.5 rounded-full bg-base-100 animate-ping" />}
+                  {subagent.status}
+                </span>
+              </div>
+
+              <div>
+                <span className="text-[10px] text-base-content/40 uppercase block mb-0.5">Role</span>
+                <p className="font-semibold text-base-content/90 text-xs">
+                  {subagent.role || 'Technical Specialist'}
+                </p>
+              </div>
+
+              <div>
+                <span className="text-[10px] text-base-content/40 uppercase block mb-0.5">Goal</span>
+                <p className="text-base-content/80 text-[11px] leading-relaxed whitespace-pre-wrap bg-base-200/50 p-2 rounded-lg border border-base-content/5">
+                  {subagent.goal || '-'}
+                </p>
+              </div>
+            </div>
+
+            {/* Metrics */}
+            <div className="p-3 bg-base-100/50 rounded-xl border border-base-content/10 space-y-2">
+              <span className="text-[10px] text-base-content/40 uppercase block">Telemetry</span>
+              <div className="grid grid-cols-2 gap-2 text-[11px]">
+                <div className="p-2 bg-base-200/50 rounded-lg border border-base-content/5">
+                  <span className="text-[10px] text-base-content/50 block">Turns</span>
+                  <span className="font-bold text-primary text-sm">{subagent.turnCount || 0}</span>
+                </div>
+                <div className="p-2 bg-base-200/50 rounded-lg border border-base-content/5">
+                  <span className="text-[10px] text-base-content/50 block">Sandbox</span>
+                  <span className="font-bold text-accent text-sm">Puppeteer</span>
+                </div>
+              </div>
+
+              <div className="text-[10px] text-base-content/40 space-y-1 pt-1">
+                <div className="flex justify-between">
+                  <span>Dibuat:</span>
+                  <span>{new Date(subagent.createdAt).toLocaleTimeString()}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Terakhir aktif:</span>
+                  <span>{new Date(subagent.updatedAt).toLocaleTimeString()}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Final Answer / Artifact if available */}
+            {subagent.finalAnswer && (
+              <div className="p-3 bg-base-100/50 rounded-xl border border-base-content/10 space-y-1.5">
+                <span className="text-[10px] text-success uppercase font-semibold flex items-center gap-1">
+                  <CheckCircle2 className="w-3 h-3" /> Laporan Akhir
+                </span>
+                <p className="text-[11px] text-base-content/85 whitespace-pre-wrap leading-relaxed bg-base-200/60 p-2 rounded-lg max-h-48 overflow-y-auto">
+                  {subagent.finalAnswer}
+                </p>
+              </div>
+            )}
+          </>
+        )}
+
+        {activeTab === 'tools' && (
+          <div className="space-y-3">
+            <div className="p-3 bg-base-100/50 rounded-xl border border-base-content/10 space-y-2">
+              <div className="flex items-center gap-1.5 text-primary text-[11px] font-semibold">
+                <Shield className="w-3.5 h-3.5" />
+                <span>Sandbox Security</span>
+              </div>
+              <p className="text-[10px] text-base-content/60 leading-relaxed">
+                Sub-agent berjalan dengan isolasi session Puppeteer dan registry tool native.
+              </p>
+            </div>
+
+            <div className="p-3 bg-base-100/50 rounded-xl border border-base-content/10 space-y-2">
+              <span className="text-[10px] text-base-content/40 uppercase block">Allowed Tools</span>
+              <div className="flex flex-wrap gap-1">
+                {Array.isArray(subagent.allowedTools) && subagent.allowedTools.includes('*') ? (
+                  <span className="badge badge-primary badge-sm text-[10px] font-mono">
+                    All Tools Allowed (*)
+                  </span>
+                ) : Array.isArray(subagent.allowedTools) && subagent.allowedTools.length > 0 ? (
+                  subagent.allowedTools.map((t, idx) => (
+                    <span
+                      key={idx}
+                      className="badge badge-ghost badge-sm text-[10px] font-mono text-base-content/80 border-base-content/10"
+                    >
+                      {t}
+                    </span>
+                  ))
+                ) : (
+                  <span className="text-[10px] text-base-content/40">Default Core Tools</span>
+                )}
+              </div>
+            </div>
+
+            <div className="p-3 bg-base-100/50 rounded-xl border border-base-content/10 space-y-1.5">
+              <span className="text-[10px] text-base-content/40 uppercase block">Inter-Agent Routing</span>
+              <div className="space-y-1 text-[10px] text-base-content/70">
+                <div className="flex items-center gap-1 text-accent">
+                  <Terminal className="w-3 h-3" />
+                  <span>message_agent</span>
+                </div>
+                <p className="text-[10px] text-base-content/50 pl-4">
+                  Dapat memanggil sub-agent spesialis lain secara mandiri.
+                </p>
+                <div className="flex items-center gap-1 text-primary pt-1">
+                  <Terminal className="w-3 h-3" />
+                  <span>report_to_lead</span>
+                </div>
+                <p className="text-[10px] text-base-content/50 pl-4">
+                  Mengirim push notification hasil pekerjaan ke Lead Agent Mark.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </aside>
+  )
+}

package/src/renderer/src/components/subagent/AgentSidebar.jsx

@@ -0,0 +1,216 @@
+import React, { useState } from 'react'
+import {
+  Bot,
+  Plus,
+  Trash2,
+  Cpu,
+  Layers,
+  Search,
+  CheckCircle2,
+  Clock,
+  AlertCircle,
+  Play,
+  Terminal
+} from 'lucide-react'
+
+export default function AgentSidebar({
+  subagents = [],
+  selectedId = null,
+  onSelectAgent = () => {},
+  onOpenNewAgentModal = () => {},
+  onDeleteAgent = () => {}
+}) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterTab, setFilterTab] = useState('all') // 'all' | 'running' | 'idle' | 'completed'
+
+  const filteredAgents = subagents.filter((agent) => {
+    const matchesSearch =
+      agent.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (agent.role && agent.role.toLowerCase().includes(searchQuery.toLowerCase())) ||
+      (agent.goal && agent.goal.toLowerCase().includes(searchQuery.toLowerCase()))
+
+    if (!matchesSearch) return false
+
+    if (filterTab === 'running') return agent.status === 'running'
+    if (filterTab === 'idle') return agent.status === 'idle'
+    if (filterTab === 'completed') return agent.status === 'completed'
+    return true
+  })
+
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case 'running':
+        return (
+          <span className="flex items-center gap-1 text-[10px] text-primary font-mono font-medium">
+            <span className="w-1.5 h-1.5 rounded-full bg-primary animate-ping" />
+            Running
+          </span>
+        )
+      case 'completed':
+        return (
+          <span className="flex items-center gap-1 text-[10px] text-success font-mono font-medium">
+            <CheckCircle2 className="w-2.5 h-2.5" />
+            Done
+          </span>
+        )
+      case 'failed':
+      case 'killed':
+        return (
+          <span className="flex items-center gap-1 text-[10px] text-error font-mono font-medium">
+            <AlertCircle className="w-2.5 h-2.5" />
+            Stopped
+          </span>
+        )
+      default:
+        return (
+          <span className="flex items-center gap-1 text-[10px] text-base-content/50 font-mono">
+            <Clock className="w-2.5 h-2.5" />
+            Idle
+          </span>
+        )
+    }
+  }
+
+  return (
+    <aside className="w-72 md:w-80 flex flex-col bg-base-200/60 border-r border-base-content/10 flex-none select-none h-full overflow-hidden">
+      {/* Header with New Agent Action */}
+      <div className="p-3.5 border-b border-base-content/10 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <div className="p-1.5 rounded-xl bg-primary/10 border border-primary/20 text-primary">
+            <Bot className="w-4 h-4" />
+          </div>
+          <div>
+            <h2 className="text-xs font-bold tracking-wide uppercase text-base-content/90 font-mono">
+              Bots & Agents
+            </h2>
+            <span className="text-[10px] text-base-content/50 font-mono">
+              {subagents.length} terdaftar
+            </span>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={onOpenNewAgentModal}
+          className="btn btn-primary btn-xs rounded-xl gap-1 px-2.5 font-medium shadow-sm shadow-primary/20"
+          title="Tambah Sub-Agent Baru"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          <span className="text-[11px]">New Agent</span>
+        </button>
+      </div>
+
+      {/* Search Input */}
+      <div className="p-2.5 pb-1">
+        <div className="relative">
+          <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40" />
+          <input
+            type="text"
+            placeholder="Cari agen atau peran..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="input input-xs w-full pl-8 pr-3 py-3 rounded-xl bg-base-100/60 border-base-content/10 text-[11px] focus:outline-none focus:border-primary/50"
+          />
+        </div>
+      </div>
+
+      {/* Filter Tabs */}
+      <div className="px-2.5 py-1.5">
+        <div className="flex gap-1 p-0.5 bg-base-300/60 rounded-xl w-full border border-base-content/5">
+          {['all', 'running', 'idle', 'completed'].map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              onClick={() => setFilterTab(tab)}
+              className={`flex-1 py-1 text-[10px] font-medium rounded-lg transition-all capitalize font-mono ${
+                filterTab === tab
+                  ? 'bg-base-100 text-base-content shadow-sm font-semibold'
+                  : 'text-base-content/50 hover:text-base-content'
+              }`}
+            >
+              {tab === 'all' ? 'Semua' : tab}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Agent List */}
+      <div className="flex-1 overflow-y-auto p-2.5 space-y-1.5 custom-scrollbar">
+        {filteredAgents.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center text-center p-6 text-base-content/30 gap-2">
+            <Layers className="w-7 h-7 stroke-[1.5]" />
+            <p className="text-[11px] font-mono">Tidak ada agen ditemukan.</p>
+          </div>
+        ) : (
+          filteredAgents.map((agent) => {
+            const isSelected = agent.id === selectedId
+            const isRunning = agent.status === 'running'
+
+            return (
+              <div
+                key={agent.id}
+                onClick={() => onSelectAgent(agent.id)}
+                className={`p-3 rounded-xl border transition-all cursor-pointer relative group ${
+                  isSelected
+                    ? 'bg-primary/10 border-primary/40 shadow-sm'
+                    : 'bg-base-100/40 border-base-content/5 hover:border-base-content/15 hover:bg-base-100/70'
+                }`}
+              >
+                <div className="flex items-start justify-between gap-2 mb-1">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <div
+                      className={`w-7 h-7 rounded-xl flex items-center justify-center font-bold text-[10px] shrink-0 font-mono ${
+                        isRunning
+                          ? 'bg-primary/20 text-primary border border-primary/40 shadow-sm'
+                          : isSelected
+                            ? 'bg-primary/10 text-primary border border-primary/20'
+                            : 'bg-base-300 text-base-content/70 border border-base-content/10'
+                      }`}
+                    >
+                      {agent.name.slice(0, 2).toUpperCase()}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-1.5">
+                        <span className="font-semibold text-xs text-base-content/95 truncate">
+                          {agent.name}
+                        </span>
+                        {(agent.role?.toLowerCase().includes('curiosity') ||
+                          agent.name.toLowerCase().includes('sideproject')) && (
+                          <span className="text-[8px] font-mono px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 uppercase tracking-tight shrink-0">
+                            Curiosity
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-[10px] text-base-content/50 truncate font-mono">
+                        {agent.role || 'Technical Specialist'}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onDeleteAgent(agent.id)
+                      }}
+                      className="opacity-0 group-hover:opacity-100 text-base-content/40 hover:text-error transition-all p-1 rounded-md hover:bg-base-content/5"
+                      title="Hapus Agen"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between text-[10px] text-base-content/45 font-mono pt-1 border-t border-base-content/5 mt-1.5">
+                  <div className="flex items-center gap-1">{getStatusBadge(agent.status)}</div>
+                  <span>Langkah: {agent.turnCount || 0}</span>
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </aside>
+  )
+}