@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/agents/AgentsPanelA2aTab.tsx

@@ -1,298 +0,0 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { Check, ChevronDown, ChevronUp, Clock, Code2, Globe, Loader2, MessageSquare, Network, RefreshCw, RotateCcw, Save, Settings2, Trash2, Wifi, WifiOff, Wrench, Zap } from 'lucide-react';
-import { useLocale } from '@/lib/stores/locale-store';
-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';
-import { useAcpRegistry } from '@/hooks/useAcpRegistry';
-import { useAcpDetection } from '@/hooks/useAcpDetection';
-import { openAskModal } from '@/hooks/useAskModal';
-import DiscoverAgentModal from './DiscoverAgentModal';
-
-/* ────────── Props ────────── */
-
-interface AgentsPanelA2aTabProps {
-  agents: RemoteAgent[];
-  discovering: boolean;
-  error: string | null;
-  onDiscover: (url: string) => Promise<RemoteAgent | null>;
-  onRemove: (id: string) => void;
-}
-
-/* ────────── Main Component ────────── */
-
-export default function AgentsPanelA2aTab({
-  agents,
-  discovering,
-  error,
-  onDiscover,
-  onRemove,
-}: AgentsPanelA2aTabProps) {
-  const { t } = useLocale();
-  const p = t.panels.agents;
-  const [showModal, setShowModal] = useState(false);
-  const { delegations } = useDelegationHistory(true);
-  const acp = useAcpRegistry();
-
-  const isEmpty = agents.length === 0 && !acp.loading && acp.agents.length === 0;
-
-  return (
-    <div className="space-y-6">
-      {/* Header + Discover button — [V-1] clear section title hierarchy */}
-      <div className="flex items-center justify-between">
-        <h2 className="text-sm font-medium text-foreground flex items-center gap-2">
-          <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]">
-            <Globe size={13} />
-          </div>
-          {p.a2aTabTitle}
-        </h2>
-        <button
-          type="button"
-          onClick={() => setShowModal(true)}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-foreground text-background hover:bg-foreground/90 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          <Globe size={12} />
-          {p.a2aDiscover}
-        </button>
-      </div>
-
-      {/* Unified empty state — [P-1] better first-time UX */}
-      {isEmpty ? (
-        <NetworkEmptyState
-          onDiscover={() => setShowModal(true)}
-          onBrowseRegistry={acp.retry}
-        />
-      ) : (
-        <>
-          {/* Remote A2A agent list — [A-3] semantic list */}
-          {agents.length === 0 ? (
-            <div className="rounded-lg border border-border/40 bg-card/30 p-8 text-center">
-              <div className="w-12 h-12 rounded-xl bg-muted/40 flex items-center justify-center mx-auto mb-3">
-                <Globe size={20} className="text-muted-foreground/50" aria-hidden="true" />
-              </div>
-              <p className="text-sm font-medium text-muted-foreground mb-1">{p.a2aTabEmpty}</p>
-              <p className="text-xs text-muted-foreground/60 leading-relaxed max-w-xs mx-auto">
-                {p.a2aTabEmptyHint}
-              </p>
-            </div>
-          ) : (
-            <ul role="list" className="space-y-2">
-              {agents.map((agent) => (
-                <li key={agent.id}>
-                  <RemoteAgentRow agent={agent} onRemove={onRemove} removeCopy={p.a2aRemoveAgent} skillsCopy={p.a2aSkills} />
-                </li>
-              ))}
-            </ul>
-          )}
-
-          {/* ACP Registry section */}
-          <AcpRegistrySection />
-
-          {/* Recent Delegations */}
-          <DelegationHistorySection delegations={delegations} />
-        </>
-      )}
-
-      <DiscoverAgentModal
-        open={showModal}
-        onClose={() => setShowModal(false)}
-        onDiscover={onDiscover}
-        discovering={discovering}
-        error={error}
-      />
-    </div>
-  );
-}
-
-/* ────────── Network Empty State — [P-1] enhanced first-time UX ────────── */
-
-function NetworkEmptyState({
-  onDiscover,
-  onBrowseRegistry,
-}: {
-  onDiscover: () => void;
-  onBrowseRegistry: () => void;
-}) {
-  const { t } = useLocale();
-  const p = t.panels.agents;
-
-  return (
-    <div className="rounded-lg border border-border/40 bg-card/30 p-10 text-center">
-      <div className="w-14 h-14 rounded-xl bg-muted/40 flex items-center justify-center mx-auto mb-4">
-        <Network size={22} className="text-muted-foreground/50" aria-hidden="true" />
-      </div>
-      <p className="text-base font-semibold text-foreground mb-1">{p.networkEmptyTitle}</p>
-      <p className="text-xs text-muted-foreground/60 leading-relaxed max-w-sm mx-auto mb-6">
-        {p.networkEmptyDesc}
-      </p>
-      {/* [S-1] gap-3 (12px) instead of gap-2.5 (10px) */}
-      <div className="flex items-center justify-center gap-3">
-        <button
-          type="button"
-          onClick={onDiscover}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-foreground text-background hover:bg-foreground/90 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          <Globe size={12} />
-          {p.networkDiscoverBtn}
-        </button>
-        <button
-          type="button"
-          onClick={onBrowseRegistry}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          <Network size={12} />
-          {p.networkBrowseBtn}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/* ────────── Quick Actions ────────── */
-
-import AcpRegistrySection from './AcpRegistrySection';
-
-function DelegationHistorySection({ delegations }: { delegations: DelegationRecord[] }) {
-  const { t } = useLocale();
-  const p = t.panels.agents;
-
-  return (
-    <section className="space-y-2" aria-labelledby="delegation-section-title">
-      <h3 id="delegation-section-title" className="text-xs font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-2">
-        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Clock size={13} /></div>
-        {p.a2aDelegations}
-      </h3>
-      {delegations.length === 0 ? (
-        <p className="text-xs text-muted-foreground/50 py-3">{p.a2aDelegationsEmpty}</p>
-      ) : (
-        <ul role="list" className="space-y-1.5">
-          {delegations.map((d) => (
-            <li key={d.id}>
-              <DelegationRow record={d} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </section>
-  );
-}
-
-/* ────────── Delegation Row ────────── */
-
-const STATUS_STYLES: Record<DelegationRecord['status'], string> = {
-  pending: 'bg-muted text-muted-foreground',
-  completed: 'bg-[var(--success)]/15 text-[var(--success)]',
-  failed: 'bg-[var(--error)]/15 text-[var(--error)]',
-};
-
-function DelegationRow({ record }: { record: DelegationRecord }) {
-  const { t } = useLocale();
-  const p = t.panels.agents;
-  const statusLabels: Record<DelegationRecord['status'], string> = {
-    pending: p.a2aDelegationPending,
-    completed: p.a2aDelegationCompleted,
-    failed: p.a2aDelegationFailed,
-  };
-
-  const duration = record.completedAt
-    ? formatDuration(new Date(record.startedAt), new Date(record.completedAt))
-    : null;
-
-  return (
-    <div className="rounded-lg border border-border/40 bg-card/60 px-3 py-2.5 flex items-center gap-2">
-      <div className="flex-1 min-w-0">
-        <p className="text-xs font-medium text-foreground truncate">{record.agentName}</p>
-        <p className="text-2xs text-muted-foreground/50 truncate" title={record.message}>
-          {record.message.length > 60 ? record.message.slice(0, 60) + '...' : record.message}
-        </p>
-      </div>
-      <span className={`text-2xs px-1.5 py-0.5 rounded font-medium shrink-0 ${STATUS_STYLES[record.status]}`}>
-        {statusLabels[record.status]}
-      </span>
-      {duration && (
-        <span className="text-2xs text-muted-foreground/40 shrink-0 flex items-center gap-0.5">
-          <Clock size={10} aria-hidden="true" />
-          {duration}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function formatDuration(start: Date, end: Date): string {
-  const ms = end.getTime() - start.getTime();
-  if (ms < 1000) return `${ms}ms`;
-  const secs = Math.round(ms / 1000);
-  if (secs < 60) return `${secs}s`;
-  const mins = Math.floor(secs / 60);
-  const remSecs = secs % 60;
-  return remSecs > 0 ? `${mins}m ${remSecs}s` : `${mins}m`;
-}
-
-/* ────────── Remote Agent Row ────────── */
-
-function RemoteAgentRow({
-  agent,
-  onRemove,
-  removeCopy,
-  skillsCopy,
-}: {
-  agent: RemoteAgent;
-  onRemove: (id: string) => void;
-  removeCopy: string;
-  skillsCopy: string;
-}) {
-  const StatusIcon = agent.reachable ? Wifi : WifiOff;
-  const statusColor = agent.reachable
-    ? 'text-[var(--success)]'
-    : 'text-muted-foreground/50';
-
-  return (
-    <div className="group rounded-lg border border-border bg-card p-4 hover:border-[var(--amber)]/30 transition-colors duration-150">
-      <div className="flex items-center gap-2">
-        <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
-          <Globe size={14} className="text-muted-foreground" />
-        </div>
-        <div className="flex-1 min-w-0">
-          {/* [V-1] agent name stronger */}
-          <p className="text-base font-semibold text-foreground truncate leading-tight">{agent.card.name}</p>
-          <p className="text-2xs text-muted-foreground/50 truncate mt-0.5">{agent.card.description}</p>
-        </div>
-        <StatusIcon size={13} className={statusColor} aria-hidden="true" />
-        {/* [P-4] Delete button — visible on hover, accessible via keyboard */}
-        <button
-          type="button"
-          onClick={() => onRemove(agent.id)}
-          className="p-1.5 rounded-md text-muted-foreground/50 hover:text-[var(--error)] hover:bg-[var(--error)]/10 transition-colors duration-150 opacity-0 group-hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100"
-          aria-label={removeCopy}
-          title={removeCopy}
-        >
-          <Trash2 size={12} />
-        </button>
-      </div>
-      {agent.card.skills.length > 0 && (
-        <div className="mt-3 pt-2.5 border-t border-border/30 flex items-center gap-1.5">
-          <Zap size={11} className="text-muted-foreground/40 shrink-0" aria-hidden="true" />
-          <span className="text-2xs text-muted-foreground/60">{skillsCopy}: {agent.card.skills.length}</span>
-          <div className="flex flex-wrap gap-1 ml-1">
-            {agent.card.skills.slice(0, 3).map((s) => (
-              <span
-                key={s.id}
-                className="text-2xs px-1.5 py-0.5 rounded bg-muted/60 text-muted-foreground border border-border/30"
-                title={s.description}
-              >
-                {s.name}
-              </span>
-            ))}
-            {agent.card.skills.length > 3 && (
-              <span className="text-2xs text-muted-foreground/40">+{agent.card.skills.length - 3}</span>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/_standalone/components/agents/AgentsPanelSessionsTab.tsx

@@ -1,171 +0,0 @@
-'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();
-    const onVisible = () => { if (document.visibilityState === 'visible') fetchSessions(); };
-    document.addEventListener('visibilitychange', onVisible);
-    return () => { document.removeEventListener('visibilitychange', onVisible); };
-  }, [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`;
-}