@geminilight/mindos 0.6.52 → 0.6.54

package/_standalone/components/agents/AgentsPanelA2aTab.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 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 { 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';
@@ -60,7 +60,7 @@ export default function AgentsPanelA2aTab({
         <>
           {/* Remote A2A agent list */}
           {agents.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-8 text-center">
+            <div className="rounded-xl border border-border/40 bg-card/30 p-8 text-center">
               <div className="w-12 h-12 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-3">
                 <Globe size={20} className="text-muted-foreground/50" aria-hidden="true" />
               </div>
@@ -109,7 +109,7 @@ function NetworkEmptyState({
   const p = t.panels.agents;
 
   return (
-    <div className="rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-12 text-center">
+    <div className="rounded-xl border border-border/40 bg-card/30 p-12 text-center">
       <div className="w-14 h-14 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto mb-4">
         <Network size={22} className="text-muted-foreground/50" aria-hidden="true" />
       </div>
@@ -161,6 +161,7 @@ function AcpRegistrySection() {
   const acp = useAcpRegistry();
   const detection = useAcpDetection();
   const acpConfig = useAcpConfig();
+  const [showAvailable, setShowAvailable] = useState(false);
 
   if (acp.loading) {
     return (
@@ -198,7 +199,6 @@ 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 }[] = [];
 
@@ -218,6 +218,7 @@ function AcpRegistrySection() {
 
   return (
     <div className="space-y-3">
+      {/* ── Installed Agents ── */}
       <div className="flex items-center justify-between">
         <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           {p.acpSectionTitle}
@@ -232,43 +233,61 @@ function AcpRegistrySection() {
             <RefreshCw size={10} className={detection.loading ? 'animate-spin' : ''} />
             {p.acpScan}
           </button>
-          <span className="text-2xs text-muted-foreground/60">
-            {p.acpSectionDesc(acp.agents.length)}
-          </span>
+          {installedAgents.length > 0 && (
+            <span className="text-2xs text-muted-foreground/60">
+              {p.acpSectionDesc(installedAgents.length)}
+            </span>
+          )}
         </div>
       </div>
 
-      {/* Installed agents — prominent cards */}
-      {installedAgents.length > 0 && (
+      {installedAgents.length > 0 ? (
         <div className="space-y-2">
           {installedAgents.map(({ agent, info }) => (
             <AcpAgentCard
               key={agent.id}
               agent={agent}
               installed={info}
-              installCmd={null}
-              packageName={null}
               detectionDone={!detection.loading}
-              onInstalled={detection.refresh}
               acpConfig={acpConfig}
             />
           ))}
         </div>
-      )}
+      ) : !detection.loading ? (
+        <div className="rounded-lg border border-border/40 bg-card/30 p-5 text-center">
+          <p className="text-xs text-muted-foreground/70 leading-relaxed max-w-xs mx-auto">
+            {p.acpNoInstalled}
+          </p>
+        </div>
+      ) : null}
 
-      {/* 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}
-            />
-          ))}
+      {/* ── Available (Not Installed) — collapsed by default, shown only after detection completes ── */}
+      {!detection.loading && notInstalledAgents.length > 0 && (
+        <div className="space-y-2">
+          <button
+            type="button"
+            onClick={() => setShowAvailable(v => !v)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground/70 hover:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+          >
+            {showAvailable ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+            <span className="font-medium">{p.acpAvailableTitle}</span>
+            <span className="text-2xs">({p.acpAvailableDesc(notInstalledAgents.length)})</span>
+          </button>
+
+          {showAvailable && (
+            <div className="space-y-1 animate-in fade-in slide-in-from-top-1 duration-150">
+              {notInstalledAgents.map(({ agent, installCmd, packageName }) => (
+                <AcpAgentCompactRow
+                  key={agent.id}
+                  agent={agent}
+                  installCmd={installCmd}
+                  packageName={packageName}
+                  detectionDone={!detection.loading}
+                  onInstalled={detection.refresh}
+                />
+              ))}
+            </div>
+          )}
         </div>
       )}
     </div>
@@ -287,10 +306,7 @@ const TRANSPORT_STYLES: Record<string, string> = {
 function AcpAgentCard({ agent, installed, detectionDone, acpConfig }: {
   agent: AcpRegistryEntry;
   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();
@@ -477,7 +493,7 @@ function AcpAgentCard({ agent, installed, detectionDone, acpConfig }: {
 
 /* ────────── ACP Agent Compact Row (Not Installed — subtle) ────────── */
 
-function AcpAgentCompactRow({ agent, installCmd, packageName, detectionDone, onInstalled }: {
+function AcpAgentCompactRow({ agent, installCmd }: {
   agent: AcpRegistryEntry;
   installCmd: string | null;
   packageName: string | null;
@@ -486,29 +502,17 @@ function AcpAgentCompactRow({ agent, installCmd, packageName, detectionDone, onI
 }) {
   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');
-    }
-  };
+  const [copied, setCopied] = useState(false);
+
+  const effectiveCmd = installCmd || (agent.packageName ? `npm install -g ${agent.packageName}` : null);
+
+  const handleCopy = useCallback(() => {
+    if (!effectiveCmd) return;
+    navigator.clipboard.writeText(effectiveCmd).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }).catch(() => {});
+  }, [effectiveCmd]);
 
   return (
     <div className="group rounded-lg border border-border/60 bg-card/60 px-3 py-2 hover:border-border transition-all duration-150">
@@ -518,24 +522,21 @@ function AcpAgentCompactRow({ agent, installCmd, packageName, detectionDone, onI
         </div>
         <div className="flex-1 min-w-0">
           <p className="text-xs text-muted-foreground truncate">{agent.name}</p>
+          {agent.description && (
+            <p className="text-2xs text-muted-foreground/50 truncate">{agent.description}</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 && (
+        {effectiveCmd && (
           <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}
+            onClick={handleCopy}
+            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 shrink-0"
+            title={effectiveCmd}
           >
-            {installState === 'installing' ? (
-              <><Loader2 size={10} className="animate-spin" /> {p.acpInstalling}</>
+            {copied ? (
+              <><Check size={10} /> {p.acpCopied}</>
             ) : (
-              <><Download size={10} /> {p.acpInstall}</>
+              <><Code2 size={10} /> {p.acpCopyCmd}</>
             )}
           </button>
         )}

package/_standalone/components/agents/AgentsPrimitives.tsx

@@ -119,7 +119,7 @@ export function BulkMessage({ message }: { message: string | null }) {
 
 export function EmptyState({ message, icon, className }: { message: string; icon?: React.ReactNode; className?: string }) {
   return (
-    <div className={`rounded-xl border border-dashed border-border/60 bg-gradient-to-b from-card/80 to-card/40 p-10 text-center ${className ?? ''}`}>
+    <div className={`rounded-xl border border-border/40 bg-card/30 p-10 text-center ${className ?? ''}`}>
       {icon && (
         <div className="w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-3 text-muted-foreground/40">
           {icon}

package/_standalone/components/agents/RecentActivityFeed.tsx

@@ -61,15 +61,15 @@ export default function RecentActivityFeed() {
 
   return (
     <section aria-label="Recent Activity">
-      <div className="flex items-center gap-2 mb-4">
-        <span className="text-[var(--amber)]"><Activity size={13} /></span>
-        <h2 className="text-sm font-semibold font-display text-foreground">
+      <div className="flex items-center gap-2.5 mb-5">
+        <div className="flex items-center justify-center w-6 h-6 rounded-md bg-[var(--amber-subtle)] text-[var(--amber)]"><Activity size={13} /></div>
+        <h2 className="text-[13px] font-semibold text-foreground tracking-wide">
           {copy?.recentActivity ?? 'Recent Activity'}
         </h2>
         <div className="ml-auto">
           <Link
             href="/agents?tab=activity"
-            className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors font-display"
+            className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors"
           >
             <ArrowRight size={12} />
             <span>{copy?.viewAll ?? 'View all'}</span>
@@ -105,7 +105,7 @@ export default function RecentActivityFeed() {
 
               {/* agent name badge */}
               {op.agentName && (
-                <span className="text-[0.6rem] font-medium text-muted-foreground/70 bg-muted/60 px-1.5 py-0.5 rounded-full shrink-0 font-display" title={op.agentName}>
+                <span className="text-[0.6rem] font-medium text-muted-foreground/70 bg-muted/60 px-1.5 py-0.5 rounded-full shrink-0" title={op.agentName}>
                   {op.agentName.length > 20 ? op.agentName.slice(0, 20) + '...' : op.agentName}
                 </span>
               )}
@@ -115,7 +115,7 @@ export default function RecentActivityFeed() {
                 : <AlertCircle size={11} className="shrink-0 text-[var(--error)]/60" />
               }
 
-              <span className="text-2xs text-muted-foreground/40 tabular-nums shrink-0 font-display" title={op.ts}>
+              <span className="text-2xs text-muted-foreground/40 tabular-nums shrink-0" title={op.ts}>
                 {relativeTs(op.ts)}
               </span>
             </div>

package/_standalone/components/agents/SkillDetailPopover.tsx

@@ -418,7 +418,7 @@ export default function SkillDetailPopover({
                 ))}
               </div>
             ) : (
-              <div className="rounded-lg border border-dashed border-border p-3 text-center">
+              <div className="rounded-lg border border-border/40 bg-card/30 p-3 text-center">
                 <p className="text-xs text-muted-foreground">{copy.noAgents}</p>
               </div>
             )}

package/_standalone/components/ask/AskHeader.tsx

@@ -29,7 +29,7 @@ export default memo(function AskHeader({
       )}
       <div className="flex items-center gap-2 text-sm font-medium text-foreground">
         <Sparkles size={isPanel ? 14 : 15} className="text-[var(--amber)]" />
-        <span className={isPanel ? 'font-display text-xs uppercase tracking-wider text-muted-foreground' : 'font-display'}>
+        <span className={isPanel ? 'text-xs uppercase tracking-wider text-muted-foreground' : ''}>
           {isPanel ? 'MindOS Agent' : t.ask.title}
         </span>
       </div>

package/_standalone/components/echo/EchoHero.tsx

@@ -30,7 +30,7 @@ export function EchoHero({
         <p className="mb-4 font-sans text-2xs font-semibold uppercase tracking-[0.2em] text-[var(--amber-text)]">
           {heroKicker}
         </p>
-        <h1 id={titleId} className="font-display text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
+        <h1 id={titleId} className="text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
           {pageTitle}
         </h1>
         <p className="mt-3 max-w-prose font-sans text-base leading-relaxed text-muted-foreground">{lead}</p>

package/_standalone/components/echo/EchoPageSections.tsx

@@ -69,7 +69,7 @@ export function EchoContinuedGroups({
   footer?: ReactNode;
 }) {
   const cell = (label: string, icon: ReactNode) => (
-    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-dashed border-border/80 bg-muted/10 px-4 py-4 transition-colors duration-150 hover:border-[var(--amber)]/25 hover:bg-[var(--amber-dim)]/15">
+    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-border/40 bg-card/30 px-4 py-4 transition-colors duration-150 hover:border-[var(--amber)]/25 hover:bg-[var(--amber-dim)]/15">
       <div className="flex items-center gap-2">
         <span className="shrink-0 text-muted-foreground" aria-hidden>{icon}</span>
         <h3 className="font-sans text-sm font-medium text-foreground">{label}</h3>

package/_standalone/components/explore/UseCaseCard.tsx

@@ -37,7 +37,7 @@ export default function UseCaseCard({ icon, image, title, description, prompt, t
           {icon}
         </span>
         <div className="flex-1 min-w-0">
-          <h3 className="text-sm font-semibold font-display truncate text-foreground" title={title}>
+          <h3 className="text-sm font-semibold truncate text-foreground" title={title}>
             {title}
           </h3>
           <p className="text-xs leading-relaxed mt-1 line-clamp-2 text-muted-foreground" title={description}>