@geminilight/mindos 0.6.28 → 0.6.30

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/SkillDetailPopover.tsx

@@ -5,7 +5,6 @@ import {
   BookOpen,
   Code2,
   Copy,
-  Check,
   FileText,
   Loader2,
   Plus,
@@ -19,6 +18,7 @@ import {
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
 import type { SkillInfo } from '@/components/settings/types';
 import { Toggle } from '@/components/settings/Primitives';
 import { AgentAvatar, ConfirmDialog } from './AgentsPrimitives';
@@ -187,7 +187,6 @@ export default function SkillDetailPopover({
   const [nativeDesc, setNativeDesc] = useState<string>('');
   const [loading, setLoading] = useState(false);
   const [loadError, setLoadError] = useState(false);
-  const [copied, setCopied] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteMsg, setDeleteMsg] = useState<string | null>(null);
@@ -228,7 +227,6 @@ export default function SkillDetailPopover({
       setContent(null);
       setNativeDesc('');
       setLoadError(false);
-      setCopied(false);
       setDeleteMsg(null);
       setDeleting(false);
       setToggleBusy(false);
@@ -250,10 +248,7 @@ export default function SkillDetailPopover({
   const handleCopy = useCallback(async () => {
     if (!content) return;
     const ok = await copyToClipboard(content);
-    if (ok) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    }
+    if (ok) toast.copy();
   }, [content]);
 
   const handleToggle = useCallback(async (enabled: boolean) => {
@@ -442,8 +437,8 @@ export default function SkillDetailPopover({
                       className="inline-flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1.5 py-0.5"
                       aria-label={copy.copyContent}
                     >
-                      {copied ? <Check size={11} /> : <Copy size={11} />}
-                      {copied ? copy.copied : copy.copyContent}
+                      <Copy size={11} />
+                      {copy.copyContent}
                     </button>
                   )}
                 </div>

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';
+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') return tab;
+  if (tab === 'mcp' || tab === 'skills' || tab === 'a2a' || tab === 'sessions') return tab;
   return 'overview';
 }
 

package/app/components/ask/AgentSelectorCapsule.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Bot, ChevronDown, X, Check } from 'lucide-react';
+import type { AcpAgentSelection } from '@/hooks/useAskModal';
+import type { DetectedAgent } from '@/hooks/useAcpDetection';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface AgentSelectorCapsuleProps {
+  selectedAgent: AcpAgentSelection | null;
+  onSelect: (agent: AcpAgentSelection | null) => void;
+  installedAgents: DetectedAgent[];
+  loading?: boolean;
+}
+
+interface DropdownPos {
+  top: number;
+  left: number;
+  direction: 'up' | 'down';
+}
+
+export default function AgentSelectorCapsule({
+  selectedAgent,
+  onSelect,
+  installedAgents,
+  loading = false,
+}: AgentSelectorCapsuleProps) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<DropdownPos | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Position the dropdown relative to the trigger, rendered via portal
+  useEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const spaceAbove = rect.top;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const estimatedH = 200; // approximate dropdown height
+    const direction: 'up' | 'down' = spaceAbove > spaceBelow && spaceAbove > estimatedH ? 'up' : 'down';
+
+    setPos({
+      left: rect.left,
+      top: direction === 'up' ? rect.top - 6 : rect.bottom + 6,
+      direction,
+    });
+  }, [open]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        triggerRef.current && !triggerRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  // Reposition on scroll/resize while open
+  useEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const reposition = () => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      const spaceAbove = rect.top;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const estimatedH = 200;
+      const direction: 'up' | 'down' = spaceAbove > spaceBelow && spaceAbove > estimatedH ? 'up' : 'down';
+      setPos({
+        left: rect.left,
+        top: direction === 'up' ? rect.top - 6 : rect.bottom + 6,
+        direction,
+      });
+    };
+    window.addEventListener('scroll', reposition, true);
+    window.addEventListener('resize', reposition);
+    return () => {
+      window.removeEventListener('scroll', reposition, true);
+      window.removeEventListener('resize', reposition);
+    };
+  }, [open]);
+
+  const handleSelectDefault = useCallback(() => {
+    onSelect(null);
+    setOpen(false);
+  }, [onSelect]);
+
+  const handleSelectAgent = useCallback((agent: DetectedAgent) => {
+    onSelect({ id: agent.id, name: agent.name });
+    setOpen(false);
+  }, [onSelect]);
+
+  const handleClear = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelect(null);
+  }, [onSelect]);
+
+  const isDefault = !selectedAgent;
+  const displayName = selectedAgent?.name ?? p.acpDefaultAgent;
+
+  // Only show if there are installed agents to choose from
+  if (!loading && installedAgents.length === 0 && !selectedAgent) return null;
+
+  const dropdown = open && pos ? (
+    <div
+      ref={dropdownRef}
+      role="listbox"
+      aria-label={p.acpSelectAgent}
+      className="fixed z-50 min-w-[180px] max-w-[240px] rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
+      style={{
+        left: pos.left,
+        ...(pos.direction === 'up'
+          ? { bottom: window.innerHeight - pos.top }
+          : { top: pos.top }),
+      }}
+    >
+      {/* Default MindOS Agent option */}
+      <button
+        type="button"
+        role="option"
+        aria-selected={isDefault}
+        onClick={handleSelectDefault}
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors hover:bg-muted"
+      >
+        <Bot size={12} className="shrink-0 text-muted-foreground" />
+        <span className="flex-1 truncate font-medium">{p.acpDefaultAgent}</span>
+        {isDefault && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
+      </button>
+
+      {/* Divider */}
+      {installedAgents.length > 0 && (
+        <div className="mx-2 my-1 border-t border-border/60" />
+      )}
+
+      {/* Installed ACP agents */}
+      {installedAgents.map((agent) => {
+        const isSelected = selectedAgent?.id === agent.id;
+        return (
+          <button
+            key={agent.id}
+            type="button"
+            role="option"
+            aria-selected={isSelected}
+            onClick={() => handleSelectAgent(agent)}
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors hover:bg-muted"
+          >
+            <span className="w-2 h-2 rounded-full bg-[var(--success)] shrink-0" />
+            <span className="flex-1 truncate">{agent.name}</span>
+            {isSelected && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
+          </button>
+        );
+      })}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        className={`
+          inline-flex items-center gap-1 rounded-full px-2.5 py-0.5
+          text-2xs font-medium transition-colors
+          border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+          ${isDefault
+            ? 'bg-muted/50 border-border/50 text-muted-foreground hover:bg-muted hover:text-foreground'
+            : 'bg-[var(--amber)]/10 border-[var(--amber)]/25 text-foreground hover:bg-[var(--amber)]/15'
+          }
+        `}
+        title={p.acpChangeAgent}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        {isDefault ? (
+          <Bot size={11} className="shrink-0 text-muted-foreground" />
+        ) : (
+          <span className="w-1.5 h-1.5 rounded-full bg-[var(--success)] shrink-0" />
+        )}
+        <span className="truncate max-w-[120px]">{displayName}</span>
+        {selectedAgent ? (
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={handleClear}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClear(e as unknown as React.MouseEvent); } }}
+            className="p-0.5 -mr-1 rounded-full text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={`Remove ${selectedAgent.name}`}
+          >
+            <X size={9} />
+          </span>
+        ) : (
+          <ChevronDown size={10} className="shrink-0 text-muted-foreground" />
+        )}
+      </button>
+      {typeof document !== 'undefined' && dropdown && createPortal(dropdown, document.body)}
+    </>
+  );
+}