@geminilight/mindos 0.6.29 → 0.6.31

package/app/components/agents/AgentsPanelA2aTab.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useState } from 'react';
-import { Clock, Globe, Loader2, Network, RefreshCw, Trash2, Wifi, WifiOff, Zap } from 'lucide-react';
+import { useState, useCallback } from 'react';
+import { Check, ChevronDown, ChevronUp, Clock, Code2, Download, Globe, Loader2, MessageSquare, Network, RefreshCw, RotateCcw, Save, Settings2, Trash2, Wifi, WifiOff, Wrench, Zap } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
+import { useAcpConfig } from '@/hooks/useAcpConfig';
 import type { RemoteAgent, DelegationRecord } from '@/lib/a2a/types';
 import type { AcpRegistryEntry } from '@/lib/acp/types';
 import { useDelegationHistory } from '@/hooks/useDelegationHistory';
@@ -138,6 +139,20 @@ function NetworkEmptyState({
   );
 }
 
+/* ────────── Quick Actions ────────── */
+
+interface QuickAction {
+  labelKey: 'acpQuickReview' | 'acpQuickFix' | 'acpQuickExplain';
+  icon: typeof Code2;
+  promptSuffix: string;
+}
+
+const QUICK_ACTIONS: QuickAction[] = [
+  { labelKey: 'acpQuickReview', icon: Code2, promptSuffix: 'review the code in this project' },
+  { labelKey: 'acpQuickFix', icon: Wrench, promptSuffix: 'find and fix bugs in this project' },
+  { labelKey: 'acpQuickExplain', icon: MessageSquare, promptSuffix: 'explain the structure of this project' },
+];
+
 /* ────────── ACP Registry Section ────────── */
 
 function AcpRegistrySection() {
@@ -145,6 +160,7 @@ function AcpRegistrySection() {
   const p = t.panels.agents;
   const acp = useAcpRegistry();
   const detection = useAcpDetection();
+  const acpConfig = useAcpConfig();
 
   if (acp.loading) {
     return (
@@ -182,8 +198,26 @@ function AcpRegistrySection() {
 
   if (acp.agents.length === 0) return null;
 
+  // Separate installed and not-installed agents
+  const installedAgents: { agent: AcpRegistryEntry; info: { id: string; name: string; binaryPath: string } }[] = [];
+  const notInstalledAgents: { agent: AcpRegistryEntry; installCmd: string | null; packageName: string | null }[] = [];
+
+  for (const agent of acp.agents) {
+    const installed = detection.installedAgents.find((d) => d.id === agent.id);
+    if (installed) {
+      installedAgents.push({ agent, info: installed });
+    } else {
+      const notInstalled = detection.notInstalledAgents.find((d) => d.id === agent.id);
+      notInstalledAgents.push({
+        agent,
+        installCmd: notInstalled?.installCmd ?? null,
+        packageName: notInstalled?.packageName ?? agent.packageName ?? null,
+      });
+    }
+  }
+
   return (
-    <div className="space-y-2">
+    <div className="space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           {p.acpSectionTitle}
@@ -203,26 +237,45 @@ function AcpRegistrySection() {
           </span>
         </div>
       </div>
-      <div className="space-y-1.5">
-        {acp.agents.map((agent) => {
-          const installed = detection.installedAgents.find((d) => d.id === agent.id);
-          const notInstalled = detection.notInstalledAgents.find((d) => d.id === agent.id);
-          return (
-            <AcpAgentRow
+
+      {/* Installed agents — prominent cards */}
+      {installedAgents.length > 0 && (
+        <div className="space-y-2">
+          {installedAgents.map(({ agent, info }) => (
+            <AcpAgentCard
               key={agent.id}
               agent={agent}
-              installed={installed ?? null}
-              installCmd={notInstalled?.installCmd ?? null}
+              installed={info}
+              installCmd={null}
+              packageName={null}
               detectionDone={!detection.loading}
+              onInstalled={detection.refresh}
+              acpConfig={acpConfig}
             />
-          );
-        })}
-      </div>
+          ))}
+        </div>
+      )}
+
+      {/* Not-installed agents — compact rows grouped at bottom */}
+      {notInstalledAgents.length > 0 && (
+        <div className="space-y-1">
+          {notInstalledAgents.map(({ agent, installCmd, packageName }) => (
+            <AcpAgentCompactRow
+              key={agent.id}
+              agent={agent}
+              installCmd={installCmd}
+              packageName={packageName}
+              detectionDone={!detection.loading}
+              onInstalled={detection.refresh}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
 
-/* ────────── ACP Agent Row ────────── */
+/* ────────── ACP Agent Card (Installed — prominent) ────────── */
 
 const TRANSPORT_STYLES: Record<string, string> = {
   npx: 'bg-[var(--amber)]/15 text-[var(--amber)]',
@@ -231,14 +284,21 @@ const TRANSPORT_STYLES: Record<string, string> = {
   stdio: 'bg-muted text-muted-foreground',
 };
 
-function AcpAgentRow({ agent, installed, installCmd, detectionDone }: {
+function AcpAgentCard({ agent, installed, detectionDone, acpConfig }: {
   agent: AcpRegistryEntry;
-  installed: { id: string; name: string; binaryPath: string } | null;
+  installed: { id: string; name: string; binaryPath: string; resolvedCommand?: { cmd: string; args: string[]; source: string } } | null;
   installCmd: string | null;
+  packageName: string | null;
   detectionDone: boolean;
+  onInstalled: () => void;
+  acpConfig: ReturnType<typeof useAcpConfig>;
 }) {
   const { t } = useLocale();
   const p = t.panels.agents;
+  const [configOpen, setConfigOpen] = useState(false);
+  const [editCmd, setEditCmd] = useState('');
+  const [editArgs, setEditArgs] = useState('');
+  const [saveState, setSaveState] = useState<'idle' | 'saved'>('idle');
   const transportLabels: Record<string, string> = {
     npx: p.acpTransportNpx,
     binary: p.acpTransportBinary,
@@ -247,24 +307,61 @@ function AcpAgentRow({ agent, installed, installCmd, detectionDone }: {
   };
 
   const isReady = !!installed;
+  const resolved = installed?.resolvedCommand;
+  const sourceLabel = resolved?.source === 'user-override' ? p.acpConfigSourceUser
+    : resolved?.source === 'descriptor' ? p.acpConfigSourceBuiltin
+    : p.acpConfigSourceRegistry;
+
+  const handleToggleConfig = useCallback(() => {
+    if (!configOpen && resolved) {
+      // Pre-fill with current resolved values
+      setEditCmd(resolved.cmd);
+      setEditArgs(resolved.args.join(' '));
+    }
+    setConfigOpen(v => !v);
+    setSaveState('idle');
+  }, [configOpen, resolved]);
+
+  const handleSave = useCallback(async () => {
+    const args = editArgs.trim() ? editArgs.trim().split(/\s+/) : [];
+    const ok = await acpConfig.save(agent.id, {
+      command: editCmd.trim() || undefined,
+      args: args.length > 0 ? args : undefined,
+    });
+    if (ok) {
+      setSaveState('saved');
+      setTimeout(() => setSaveState('idle'), 2000);
+    }
+  }, [acpConfig, agent.id, editCmd, editArgs]);
+
+  const handleReset = useCallback(async () => {
+    await acpConfig.reset(agent.id);
+    setSaveState('idle');
+    setConfigOpen(false);
+  }, [acpConfig, agent.id]);
 
   const handleUse = () => {
-    openAskModal(`Use ${agent.name} to help me with `);
-    window.dispatchEvent(
-      new CustomEvent('mindos:ask-with-agent', {
-        detail: { agentId: agent.id, agentName: agent.name },
-      }),
-    );
+    openAskModal('', 'user', { id: agent.id, name: agent.name });
+  };
+
+  const handleQuickAction = (action: QuickAction) => {
+    openAskModal(action.promptSuffix, 'user', { id: agent.id, name: agent.name });
   };
 
   return (
-    <div className="group rounded-xl border border-border bg-card p-3 hover:border-border/80 transition-all duration-150">
+    <div className="rounded-xl border border-[var(--amber)]/20 bg-card p-3 hover:border-[var(--amber)]/40 transition-all duration-150">
+      {/* Header row */}
       <div className="flex items-center gap-2.5">
-        <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
-          <Network size={14} className="text-muted-foreground" />
+        <div className="w-8 h-8 rounded-lg bg-[var(--amber)]/10 flex items-center justify-center shrink-0">
+          <Network size={14} className="text-[var(--amber)]" />
         </div>
         <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium text-foreground truncate">{agent.name}</p>
+          <div className="flex items-center gap-1.5">
+            <p className="text-sm font-medium text-foreground truncate">{agent.name}</p>
+            {agent.version && (
+              <span className="text-2xs text-muted-foreground/60 shrink-0">v{agent.version}</span>
+            )}
+          </div>
           {agent.description && (
             <p className="text-2xs text-muted-foreground truncate">{agent.description}</p>
           )}
@@ -273,34 +370,176 @@ function AcpAgentRow({ agent, installed, installCmd, detectionDone }: {
           {transportLabels[agent.transport] ?? agent.transport}
         </span>
         {detectionDone && (
-          <span className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 ${
-            isReady
-              ? 'bg-[var(--success)]/15 text-[var(--success)]'
-              : 'bg-muted text-muted-foreground/60'
-          }`}>
-            {isReady ? p.acpReady : p.acpNotInstalled}
+          <span className="text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 bg-[var(--success)]/15 text-[var(--success)]">
+            {p.acpReady}
           </span>
         )}
         <button
           type="button"
-          disabled={!isReady}
+          onClick={handleToggleConfig}
+          className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          title={p.acpConfigToggle}
+          aria-expanded={configOpen}
+        >
+          <Settings2 size={13} />
+        </button>
+        <button
+          type="button"
           onClick={handleUse}
-          className={`inline-flex items-center gap-1 px-2 py-1 text-2xs font-medium rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-            isReady
-              ? 'border-[var(--amber)] text-[var(--amber)] hover:bg-[var(--amber)]/10 cursor-pointer'
-              : 'border-border text-muted-foreground/50 cursor-not-allowed'
-          }`}
-          title={
-            isReady
-              ? undefined
-              : installCmd
-                ? p.acpInstallHint(installCmd)
-                : p.acpComingSoon
-          }
+          className="inline-flex items-center gap-1 px-2.5 py-1 text-2xs font-medium rounded-md border border-[var(--amber)] text-[var(--amber)] hover:bg-[var(--amber)]/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer"
         >
+          <Zap size={10} />
           {p.acpUseAgent}
         </button>
       </div>
+
+      {/* Collapsible config section */}
+      {configOpen && resolved && (
+        <div className="mt-2.5 pt-2.5 border-t border-border/40 space-y-2">
+          {/* Command */}
+          <div className="flex items-center gap-2">
+            <label className="text-2xs text-muted-foreground w-12 shrink-0">{p.acpConfigCommand}</label>
+            <input
+              type="text"
+              value={editCmd}
+              onChange={e => { setEditCmd(e.target.value); setSaveState('idle'); }}
+              className="flex-1 rounded-md border border-border bg-background text-foreground text-xs font-mono px-2 py-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              placeholder={resolved.cmd}
+            />
+          </div>
+          {/* Args */}
+          <div className="flex items-center gap-2">
+            <label className="text-2xs text-muted-foreground w-12 shrink-0">{p.acpConfigArgs}</label>
+            <input
+              type="text"
+              value={editArgs}
+              onChange={e => { setEditArgs(e.target.value); setSaveState('idle'); }}
+              className="flex-1 rounded-md border border-border bg-background text-foreground text-xs font-mono px-2 py-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              placeholder={resolved.args.join(' ')}
+            />
+          </div>
+          {/* Status row */}
+          <div className="flex items-center gap-2 text-2xs text-muted-foreground">
+            <span>{p.acpConfigSource}:</span>
+            <span className={`px-1.5 py-0.5 rounded font-medium ${
+              resolved.source === 'user-override' ? 'bg-[var(--amber)]/15 text-[var(--amber)]'
+              : 'bg-muted text-muted-foreground'
+            }`}>{sourceLabel}</span>
+            <span className="text-muted-foreground/50">|</span>
+            <span>{p.acpConfigPath}: <span className="font-mono">{installed?.binaryPath}</span></span>
+          </div>
+          {/* Action buttons */}
+          <div className="flex items-center justify-end gap-2 pt-1">
+            {acpConfig.configs[agent.id] && (
+              <button
+                type="button"
+                onClick={handleReset}
+                className="inline-flex items-center gap-1 px-2 py-1 text-2xs font-medium rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <RotateCcw size={10} />
+                {p.acpConfigReset}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={acpConfig.saving}
+              className="inline-flex items-center gap-1 px-2.5 py-1 text-2xs font-medium rounded-md bg-[var(--amber)] text-[var(--amber-foreground)] hover:bg-[var(--amber)]/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            >
+              {saveState === 'saved' ? <><Check size={10} /> {p.acpConfigSaved}</> : <><Save size={10} /> {p.acpConfigSave}</>}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Quick action chips */}
+      {isReady && !configOpen && (
+        <div className="mt-2.5 pt-2 border-t border-border/40 flex items-center gap-1.5 flex-wrap">
+          {QUICK_ACTIONS.map((action) => {
+            const Icon = action.icon;
+            return (
+              <button
+                key={action.labelKey}
+                type="button"
+                onClick={() => handleQuickAction(action)}
+                className="inline-flex items-center gap-1 px-2 py-0.5 text-2xs font-medium rounded-md bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground border border-border/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <Icon size={10} />
+                {p[action.labelKey]}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ────────── ACP Agent Compact Row (Not Installed — subtle) ────────── */
+
+function AcpAgentCompactRow({ agent, installCmd, packageName, detectionDone, onInstalled }: {
+  agent: AcpRegistryEntry;
+  installCmd: string | null;
+  packageName: string | null;
+  detectionDone: boolean;
+  onInstalled: () => void;
+}) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const [installState, setInstallState] = useState<'idle' | 'installing' | 'done' | 'error'>('idle');
+
+  const handleInstall = async () => {
+    if (!packageName || installState === 'installing') return;
+    setInstallState('installing');
+    try {
+      const res = await fetch('/api/acp/install', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agentId: agent.id, packageName }),
+      });
+      if (!res.ok) {
+        setInstallState('error');
+        return;
+      }
+      // Wait a bit for npm install to complete, then re-detect
+      await new Promise((r) => setTimeout(r, 8000));
+      onInstalled();
+      setInstallState('done');
+    } catch {
+      setInstallState('error');
+    }
+  };
+
+  return (
+    <div className="group rounded-lg border border-border/60 bg-card/60 px-3 py-2 hover:border-border transition-all duration-150">
+      <div className="flex items-center gap-2">
+        <div className="w-6 h-6 rounded-md bg-muted/40 flex items-center justify-center shrink-0">
+          <Network size={11} className="text-muted-foreground/60" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-xs text-muted-foreground truncate">{agent.name}</p>
+        </div>
+        {detectionDone && (
+          <span className="text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 bg-muted text-muted-foreground/60">
+            {p.acpNotInstalled}
+          </span>
+        )}
+        {detectionDone && packageName && (
+          <button
+            type="button"
+            disabled={installState === 'installing'}
+            onClick={handleInstall}
+            className="inline-flex items-center gap-1 px-2 py-0.5 text-2xs font-medium rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            title={installCmd ? p.acpInstallHint(installCmd) : undefined}
+          >
+            {installState === 'installing' ? (
+              <><Loader2 size={10} className="animate-spin" /> {p.acpInstalling}</>
+            ) : (
+              <><Download size={10} /> {p.acpInstall}</>
+            )}
+          </button>
+        )}
+      </div>
     </div>
   );
 }

package/app/components/agents/AgentsPanelSessionsTab.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { History, Play, Trash2 } from 'lucide-react';
+import type { AcpSession } from '@/lib/acp/types';
+
+interface SessionEntry {
+  id: string;
+  agentId: string;
+  state: string;
+  cwd?: string;
+  createdAt: string;
+  lastActivityAt: string;
+}
+
+export default function AgentsPanelSessionsTab() {
+  const [sessions, setSessions] = useState<SessionEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSessions = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await fetch('/api/acp/session');
+      if (!res.ok) throw new Error(`Failed to fetch sessions: ${res.status}`);
+      const data = await res.json();
+      setSessions(data.sessions ?? []);
+      setError(null);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchSessions(); }, [fetchSessions]);
+
+  const handleClose = useCallback(async (sessionId: string) => {
+    try {
+      await fetch('/api/acp/session', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId }),
+      });
+      setSessions(prev => prev.filter(s => s.id !== sessionId));
+    } catch (err) {
+      console.error('Failed to close session:', err);
+    }
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="space-y-3 animate-pulse">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="rounded-lg border border-border bg-card p-4">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 rounded-full bg-muted" />
+              <div className="flex-1 space-y-2">
+                <div className="h-4 w-32 bg-muted rounded" />
+                <div className="h-3 w-48 bg-muted rounded" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg border border-border bg-card p-6 text-center">
+        <p className="text-sm text-muted-foreground mb-3">{error}</p>
+        <button
+          onClick={fetchSessions}
+          className="text-sm text-[var(--amber)] hover:underline"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="rounded-lg border border-border bg-card p-8 text-center">
+        <History size={32} className="mx-auto mb-3 text-muted-foreground/40" />
+        <p className="text-sm font-medium text-foreground mb-1">No active sessions</p>
+        <p className="text-xs text-muted-foreground">
+          Sessions appear here when you chat with ACP agents.
+          <br />
+          Select an agent from the Network tab and send a message to start.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between mb-3">
+        <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">
+          Active Sessions ({sessions.length})
+        </p>
+        <button
+          onClick={fetchSessions}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Refresh
+        </button>
+      </div>
+
+      {sessions.map(session => (
+        <div
+          key={session.id}
+          className="group rounded-lg border border-border bg-card hover:border-[var(--amber)]/30 transition-colors p-3.5"
+        >
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-1">
+                <span className={`inline-block w-2 h-2 rounded-full ${
+                  session.state === 'active' ? 'bg-[var(--success)]' :
+                  session.state === 'error' ? 'bg-[var(--error)]' :
+                  'bg-muted-foreground/40'
+                }`} />
+                <span className="text-sm font-medium text-foreground truncate">
+                  {session.agentId}
+                </span>
+                <span className="text-2xs text-muted-foreground/60 px-1.5 py-0.5 rounded bg-muted/40">
+                  {session.state}
+                </span>
+              </div>
+              {session.cwd && (
+                <p className="text-xs text-muted-foreground truncate font-mono">
+                  {session.cwd}
+                </p>
+              )}
+              <p className="text-2xs text-muted-foreground/60 mt-1">
+                {formatRelativeTime(session.lastActivityAt)}
+              </p>
+            </div>
+
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={() => handleClose(session.id)}
+                className="p-1.5 rounded-md hover:bg-muted/60 text-muted-foreground hover:text-[var(--error)] transition-colors"
+                title="Close session"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function formatRelativeTime(isoString: string): string {
+  const now = Date.now();
+  const then = new Date(isoString).getTime();
+  const diff = now - then;
+
+  if (diff < 60_000) return 'just now';
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86400_000) return `${Math.floor(diff / 3600_000)}h ago`;
+  return `${Math.floor(diff / 86400_000)}d ago`;
+}

package/app/components/agents/agents-content-model.ts

@@ -1,6 +1,6 @@
 import type { AgentInfo, SkillInfo } from '@/components/settings/types';
 
-export type AgentsDashboardTab = 'overview' | 'mcp' | 'skills' | 'a2a';
+export type AgentsDashboardTab = 'overview' | 'mcp' | 'skills' | 'a2a' | 'sessions';
 export type AgentResolvedStatus = 'connected' | 'detected' | 'notFound';
 export type SkillCapability = 'research' | 'coding' | 'docs' | 'ops' | 'memory';
 export type SkillSourceFilter = 'all' | 'builtin' | 'user';
@@ -24,7 +24,7 @@ export interface AgentBuckets {
 }
 
 export function parseAgentsTab(tab: string | undefined): AgentsDashboardTab {
-  if (tab === 'mcp' || tab === 'skills' || tab === 'a2a') return tab;
+  if (tab === 'mcp' || tab === 'skills' || tab === 'a2a' || tab === 'sessions') return tab;
   return 'overview';
 }