@geminilight/mindos 0.5.63 → 0.5.65

package/app/components/echo/EchoSegmentPageClient.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { ArrowUpRight, Bookmark, Brain, Check, History, Sun, UserRound } from 'lucide-react';
 import type { EchoSegment } from '@/lib/echo-segments';
 import { buildEchoInsightUserPrompt } from '@/lib/echo-insight-prompt';
 import type { Locale, Messages } from '@/lib/i18n';
@@ -44,12 +46,20 @@ function segmentLead(segment: EchoSegment, p: ReturnType<typeof useLocale>['t'][
   }
 }
 
+const SEGMENT_ICON: Record<EchoSegment, ReactNode> = {
+  'about-you': <UserRound size={18} strokeWidth={1.75} />,
+  continued: <Bookmark size={18} strokeWidth={1.75} />,
+  daily: <Sun size={18} strokeWidth={1.75} />,
+  'past-you': <History size={18} strokeWidth={1.75} />,
+  growth: <Brain size={18} strokeWidth={1.75} />,
+};
+
 const fieldLabelClass =
   'block font-sans text-2xs font-semibold uppercase tracking-wide text-muted-foreground';
 const inputClass =
-  'mt-2 w-full min-h-[5rem] resize-y rounded-lg border border-border bg-background px-3 py-2.5 font-sans text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+  'mt-2 w-full min-h-[5rem] resize-y rounded-lg border border-border bg-background px-3 py-2.5 font-sans text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-[var(--amber)]/40';
 const cardSectionClass =
-  'rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow-md sm:p-6';
+  'rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow sm:p-6';
 
 function echoSnapshotCopy(segment: EchoSegment, p: Messages['echoPages']): { title: string; body: string } {
   switch (segment) {
@@ -77,6 +87,15 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
 
   const [dailyLine, setDailyLine] = useState('');
   const [growthIntent, setGrowthIntent] = useState('');
+  const [dailySaved, setDailySaved] = useState(false);
+  const [growthSaved, setGrowthSaved] = useState(false);
+  const dailySavedTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const growthSavedTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => () => {
+    clearTimeout(dailySavedTimer.current);
+    clearTimeout(growthSavedTimer.current);
+  }, []);
 
   const snapshot = useMemo(() => echoSnapshotCopy(segment, p), [segment, p]);
 
@@ -97,6 +116,9 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
     } catch {
       /* ignore */
     }
+    clearTimeout(dailySavedTimer.current);
+    setDailySaved(true);
+    dailySavedTimer.current = setTimeout(() => setDailySaved(false), 1800);
   }, [dailyLine]);
 
   const persistGrowth = useCallback(() => {
@@ -105,6 +127,9 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
     } catch {
       /* ignore */
     }
+    clearTimeout(growthSavedTimer.current);
+    setGrowthSaved(true);
+    growthSavedTimer.current = setTimeout(() => setGrowthSaved(false), 1800);
   }, [growthIntent]);
 
   const openDailyAsk = useCallback(() => {
@@ -150,7 +175,14 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
   );
 
   const secondaryBtnClass =
-    'inline-flex items-center rounded-lg border border-border bg-background px-4 py-2.5 font-sans text-sm font-medium text-foreground transition-colors duration-150 hover:border-[var(--amber)]/35 hover:bg-[var(--amber-dim)]/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+    'inline-flex items-center gap-1.5 rounded-lg border border-border bg-background px-4 py-2.5 font-sans text-sm font-medium text-foreground transition-colors duration-150 hover:border-[var(--amber)]/35 hover:bg-[var(--amber-dim)]/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+
+  const agentBtn = (onClick: () => void) => (
+    <button type="button" onClick={onClick} className={secondaryBtnClass}>
+      {p.continueAgent}
+      <ArrowUpRight size={14} className="shrink-0 text-muted-foreground" aria-hidden />
+    </button>
+  );
 
   return (
     <article
@@ -158,16 +190,13 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
       aria-labelledby={pageTitleId}
     >
       <EchoHero
-        breadcrumbNav={p.breadcrumbNav}
-        parentHref="/echo/about-you"
-        parent={p.parent}
         heroKicker={p.heroKicker}
         pageTitle={title}
         lead={lead}
         titleId={pageTitleId}
-      />
-
-      <EchoSegmentNav activeSegment={segment} />
+      >
+        <EchoSegmentNav activeSegment={segment} />
+      </EchoHero>
 
       <div className="mt-6 space-y-6 sm:mt-8">
         <EchoFactSnapshot
@@ -176,24 +205,15 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
           snapshotBadge={p.snapshotBadge}
           emptyTitle={snapshot.title}
           emptyBody={snapshot.body}
-          actions={
-            segment === 'about-you' ? (
-              <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-                {p.continueAgent}
-              </button>
-            ) : undefined
-          }
+          icon={SEGMENT_ICON[segment]}
+          actions={segment === 'about-you' ? agentBtn(openSegmentAsk) : undefined}
         />
         {segment === 'continued' ? (
           <EchoContinuedGroups
             draftsLabel={p.continuedDrafts}
             todosLabel={p.continuedTodos}
             subEmptyHint={p.subEmptyHint}
-            footer={
-              <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-                {p.continueAgent}
-              </button>
-            }
+            footer={agentBtn(openSegmentAsk)}
           />
         ) : null}
       </div>
@@ -212,11 +232,14 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
             placeholder={p.dailyLinePlaceholder}
             className={inputClass}
           />
-          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.dailySavedNote}</p>
+          <p className="mt-3 flex items-center gap-2 font-sans text-2xs text-muted-foreground">
+            <span>{p.dailySavedNote}</span>
+            <span className="inline-flex items-center gap-1 text-[var(--success)]" aria-live="polite">
+              {dailySaved ? <><Check size={12} aria-hidden /> {p.savedFlash}</> : null}
+            </span>
+          </p>
           <div className="mt-4">
-            <button type="button" onClick={openDailyAsk} className={secondaryBtnClass}>
-              {p.continueAgent}
-            </button>
+            {agentBtn(openDailyAsk)}
           </div>
         </section>
       ) : null}
@@ -235,31 +258,29 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
             placeholder={p.growthIntentPlaceholder}
             className={`${inputClass} min-h-[6.5rem]`}
           />
-          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.growthSavedNote}</p>
+          <p className="mt-3 flex items-center gap-2 font-sans text-2xs text-muted-foreground">
+            <span>{p.growthSavedNote}</span>
+            <span className="inline-flex items-center gap-1 text-[var(--success)]" aria-live="polite">
+              {growthSaved ? <><Check size={12} aria-hidden /> {p.savedFlash}</> : null}
+            </span>
+          </p>
           <div className="mt-4 border-t border-border/60 pt-4">
-            <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-              {p.continueAgent}
-            </button>
+            {agentBtn(openSegmentAsk)}
           </div>
         </section>
       ) : null}
 
       {segment === 'past-you' ? (
         <section className={`${cardSectionClass} mt-6`}>
-          <label className={fieldLabelClass}>{p.pastYouDrawLabel}</label>
-          <button
-            type="button"
-            disabled
-            title={p.pastYouDisabledHint}
-            className="mt-2 inline-flex cursor-not-allowed items-center rounded-lg border border-dashed border-border bg-muted/20 px-4 py-2.5 font-sans text-sm text-muted-foreground opacity-85"
-          >
-            {p.pastYouAnother}
-          </button>
-          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.pastYouDisabledHint}</p>
+          <div className="flex items-center gap-3">
+            <span className={fieldLabelClass}>{p.pastYouDrawLabel}</span>
+            <span className="rounded-full bg-muted px-2 py-0.5 font-sans text-2xs font-medium text-muted-foreground">
+              {p.pastYouComingSoon}
+            </span>
+          </div>
+          <p className="mt-3 font-sans text-sm leading-relaxed text-muted-foreground">{p.pastYouDisabledHint}</p>
           <div className="mt-4 border-t border-border/60 pt-4">
-            <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-              {p.continueAgent}
-            </button>
+            {agentBtn(openSegmentAsk)}
           </div>
         </section>
       ) : null}

package/app/components/explore/ExploreContent.tsx

@@ -31,17 +31,13 @@ export default function ExploreContent() {
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 mb-3">
-          <div className="w-1 h-5 rounded-full" style={{ background: 'var(--amber)' }} />
-          <h1
-            className="text-2xl font-semibold tracking-tight font-display"
-            style={{ color: 'var(--foreground)' }}
-          >
+          <div className="w-1 h-5 rounded-full bg-[var(--amber)]" />
+          <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
             {e.title}
           </h1>
         </div>
         <p
-          className="text-sm leading-relaxed"
-          style={{ color: 'var(--muted-foreground)', paddingLeft: '1rem' }}
+          className="text-sm leading-relaxed text-muted-foreground pl-4"
         >
           {e.subtitle}
         </p>

package/app/components/explore/UseCaseCard.tsx

@@ -13,35 +13,24 @@ interface UseCaseCardProps {
 export default function UseCaseCard({ icon, title, description, prompt, tryItLabel }: UseCaseCardProps) {
   return (
     <div
-      className="group flex flex-col gap-3 p-4 rounded-xl border transition-all duration-150 hover:border-amber-500/30 hover:bg-muted/50"
-      style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
+      className="group flex flex-col gap-3 p-4 rounded-xl border border-border bg-card transition-all duration-150 hover:border-[var(--amber)]/30 hover:bg-muted/50"
     >
       <div className="flex items-start gap-3">
         <span className="text-xl leading-none shrink-0 mt-0.5" suppressHydrationWarning>
           {icon}
         </span>
         <div className="flex-1 min-w-0">
-          <h3
-            className="text-sm font-semibold font-display truncate"
-            style={{ color: 'var(--foreground)' }}
-          >
+          <h3 className="text-sm font-semibold font-display truncate text-foreground">
             {title}
           </h3>
-          <p
-            className="text-xs leading-relaxed mt-1 line-clamp-2"
-            style={{ color: 'var(--muted-foreground)' }}
-          >
+          <p className="text-xs leading-relaxed mt-1 line-clamp-2 text-muted-foreground">
             {description}
           </p>
         </div>
       </div>
       <button
         onClick={() => openAskModal(prompt, 'user')}
-        className="self-start inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 hover:opacity-80 cursor-pointer"
-        style={{
-          background: 'var(--amber-dim)',
-          color: 'var(--amber)',
-        }}
+        className="self-start inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 hover:opacity-80 cursor-pointer bg-[var(--amber-dim)] text-[var(--amber)]"
       >
         {tryItLabel} →
       </button>

package/app/components/panels/AgentsPanel.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import { useState, useRef, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import { Loader2, RefreshCw, ChevronDown, ChevronRight, Settings } from 'lucide-react';
+import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { Loader2, RefreshCw, Settings } from 'lucide-react';
 import { useMcpData } from '@/hooks/useMcpData';
 import { useLocale } from '@/lib/LocaleContext';
-import { Toggle } from '../settings/Primitives';
-import type { SkillInfo } from '../settings/types';
 import PanelHeader from './PanelHeader';
 import { AgentsPanelHubNav } from './AgentsPanelHubNav';
 import { AgentsPanelAgentGroups } from './AgentsPanelAgentGroups';
@@ -15,9 +13,7 @@ interface AgentsPanelProps {
   active: boolean;
   maximized?: boolean;
   onMaximize?: () => void;
-  /** Highlights the row for the agent whose detail is open in the right dock. */
   selectedAgentKey?: string | null;
-  onOpenAgentDetail?: (key: string) => void;
 }
 
 export default function AgentsPanel({
@@ -25,18 +21,13 @@ export default function AgentsPanel({
   maximized,
   onMaximize,
   selectedAgentKey = null,
-  onOpenAgentDetail,
 }: AgentsPanelProps) {
   const { t } = useLocale();
-  const router = useRouter();
   const p = t.panels.agents;
   const mcp = useMcpData();
+  const pathname = usePathname();
   const [refreshing, setRefreshing] = useState(false);
   const [showNotDetected, setShowNotDetected] = useState(false);
-  const [showBuiltinSkills, setShowBuiltinSkills] = useState(false);
-
-  const overviewRef = useRef<HTMLDivElement>(null);
-  const skillsRef = useRef<HTMLDivElement>(null);
 
   const handleRefresh = async () => {
     setRefreshing(true);
@@ -44,10 +35,6 @@ export default function AgentsPanel({
     setRefreshing(false);
   };
 
-  const scrollTo = useCallback((el: HTMLElement | null) => {
-    el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }, []);
-
   const openAdvancedConfig = () => {
     window.dispatchEvent(new CustomEvent('mindos:open-settings', { detail: { tab: 'mcp' } }));
   };
@@ -56,13 +43,23 @@ export default function AgentsPanel({
   const detected = mcp.agents.filter(a => a.present && !a.installed);
   const notFound = mcp.agents.filter(a => !a.present);
 
-  const customSkills = mcp.skills.filter(s => s.source === 'user');
-  const builtinSkills = mcp.skills.filter(s => s.source === 'builtin');
-  const activeSkillCount = mcp.skills.filter(s => s.enabled).length;
+  const installAgentWithRefresh = async (key: string) => {
+    const ok = await mcp.installAgent(key);
+    if (ok) await mcp.refresh();
+    return ok;
+  };
+
+  const routeSelectedAgentKey = pathname?.startsWith('/agents/')
+    ? decodeURIComponent(pathname.slice('/agents/'.length))
+    : null;
+  const effectiveSelectedAgentKey = routeSelectedAgentKey ?? selectedAgentKey;
 
   const listCopy = {
     installing: p.installing,
     install: p.install,
+    installSuccess: p.installSuccess,
+    installFailed: p.installFailed,
+    retryInstall: p.retryInstall,
   };
 
   const hubCopy = {
@@ -75,10 +72,6 @@ export default function AgentsPanel({
     <AgentsPanelHubNav
       copy={hubCopy}
       connectedCount={connected.length}
-      overviewRef={overviewRef}
-      skillsRef={skillsRef}
-      scrollTo={scrollTo}
-      openAdvancedConfig={openAdvancedConfig}
     />
   );
 
@@ -91,15 +84,6 @@ export default function AgentsPanel({
               {connected.length} {p.connected}
             </span>
           )}
-          <button
-            onClick={() => router.push('/agents')}
-            className="px-2 py-1 rounded border border-border text-2xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            aria-label={p.openDashboard}
-            title={p.openDashboard}
-            type="button"
-          >
-            {p.openDashboard}
-          </button>
           <button
             onClick={handleRefresh}
             disabled={refreshing}
@@ -122,28 +106,13 @@ export default function AgentsPanel({
           <div className="flex flex-col gap-2 py-4 px-0">
             {hub}
             <div className="mx-4 border-t border-border" />
-            <div ref={overviewRef} className="mx-3 rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between scroll-mt-2">
-              <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
-              {mcp.status?.running ? (
-                <span className="flex items-center gap-1.5 text-[11px]">
-                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
-                  <span className="text-emerald-600 dark:text-emerald-400">:{mcp.status.port}</span>
-                  <span className="text-muted-foreground">· {mcp.status.toolCount} tools</span>
-                </span>
-              ) : (
-                <span className="flex items-center gap-1.5 text-[11px]">
-                  <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
-                  <span className="text-muted-foreground">{p.stopped}</span>
-                </span>
-              )}
-            </div>
-            <div ref={skillsRef} className="mx-3 scroll-mt-2 rounded-lg border border-dashed border-border px-3 py-3 text-center">
-              <p className="text-xs text-muted-foreground mb-2">{p.noAgents}</p>
+            <div className="mx-3 rounded-lg border border-dashed border-border px-3 py-4 text-center">
+              <p className="text-xs text-muted-foreground mb-1.5">{p.noAgents}</p>
               <p className="text-2xs text-muted-foreground mb-3">{p.skillsEmptyHint}</p>
               <button
                 onClick={handleRefresh}
                 type="button"
-                className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg 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"
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg 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"
               >
                 <RefreshCw size={11} /> {p.retry}
               </button>
@@ -156,30 +125,13 @@ export default function AgentsPanel({
             <div className="mx-4 border-t border-border" />
 
             <div className="px-3 py-3 space-y-4">
-              <div ref={overviewRef} className="rounded-lg border border-border bg-card/50 px-3 py-2.5 flex items-center justify-between scroll-mt-2">
-                <span className="text-xs font-medium text-foreground">{p.mcpServer}</span>
-                {mcp.status?.running ? (
-                  <span className="flex items-center gap-1.5 text-[11px]">
-                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
-                    <span className="text-emerald-600 dark:text-emerald-400">:{mcp.status.port}</span>
-                    <span className="text-muted-foreground">· {mcp.status.toolCount} tools</span>
-                  </span>
-                ) : (
-                  <span className="flex items-center gap-1.5 text-[11px]">
-                    <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
-                    <span className="text-muted-foreground">{p.stopped}</span>
-                  </span>
-                )}
-              </div>
-
               <AgentsPanelAgentGroups
                 connected={connected}
                 detected={detected}
                 notFound={notFound}
-                onOpenDetail={onOpenAgentDetail}
-                selectedAgentKey={selectedAgentKey}
-                mcp={mcp}
+                selectedAgentKey={effectiveSelectedAgentKey}
                 listCopy={listCopy}
+                onInstallAgent={installAgentWithRefresh}
                 showNotDetected={showNotDetected}
                 setShowNotDetected={setShowNotDetected}
                 p={{
@@ -189,55 +141,6 @@ export default function AgentsPanel({
                   sectionNotDetected: p.sectionNotDetected,
                 }}
               />
-
-              <section ref={skillsRef} className="scroll-mt-2">
-                {mcp.skills.length > 0 ? (
-                  <>
-                    <div className="flex items-center justify-between mb-2">
-                      <h3 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
-                        {p.skillsTitle} <span className="normal-case font-normal">{activeSkillCount} {p.skillsActive}</span>
-                      </h3>
-                      <button
-                        type="button"
-                        onClick={openAdvancedConfig}
-                        className="text-2xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
-                      >
-                        {p.newSkill}
-                      </button>
-                    </div>
-
-                    {customSkills.length > 0 && (
-                      <div className="space-y-0.5 mb-2">
-                        {customSkills.map(skill => (
-                          <SkillRow key={skill.name} skill={skill} onToggle={mcp.toggleSkill} />
-                        ))}
-                      </div>
-                    )}
-
-                    {builtinSkills.length > 0 && (
-                      <>
-                        <button
-                          type="button"
-                          onClick={() => setShowBuiltinSkills(!showBuiltinSkills)}
-                          className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors mb-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
-                        >
-                          {showBuiltinSkills ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
-                          {p.builtinSkills} ({builtinSkills.length})
-                        </button>
-                        {showBuiltinSkills && (
-                          <div className="space-y-0.5">
-                            {builtinSkills.map(skill => (
-                              <SkillRow key={skill.name} skill={skill} onToggle={mcp.toggleSkill} />
-                            ))}
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </>
-                ) : (
-                  <p className="text-2xs text-muted-foreground py-1">{p.skillsEmptyHint}</p>
-                )}
-              </section>
             </div>
           </div>
         )}
@@ -256,12 +159,3 @@ export default function AgentsPanel({
     </div>
   );
 }
-
-function SkillRow({ skill, onToggle }: { skill: SkillInfo; onToggle: (name: string, enabled: boolean) => void }) {
-  return (
-    <div className="flex items-center justify-between gap-2 px-2 py-1.5 rounded-md hover:bg-muted/30 transition-colors">
-      <span className="text-xs text-foreground truncate">{skill.name}</span>
-      <Toggle size="sm" checked={skill.enabled} onChange={v => onToggle(skill.name, v)} />
-    </div>
-  );
-}

package/app/components/panels/AgentsPanelAgentDetail.tsx

@@ -12,7 +12,8 @@ export type { AgentsPanelAgentDetailStatus };
 export interface AgentsPanelAgentDetailCopy {
   connected: string;
   installing: string;
-  install: (name: string) => string;
+  install: string;
+  installFailed: string;
   copyConfig: string;
   copied: string;
   transportLocal: string;
@@ -61,7 +62,7 @@ export default function AgentsPanelAgentDetail({
     setResult(
       ok
         ? { type: 'success', text: `${agent.name} ${copy.connected}` }
-        : { type: 'error', text: 'Install failed' },
+        : { type: 'error', text: copy.installFailed },
     );
     setInstalling(false);
   };
@@ -76,7 +77,7 @@ export default function AgentsPanelAgentDetail({
   };
 
   const dot =
-    agentStatus === 'connected' ? 'bg-emerald-500' : agentStatus === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
+    agentStatus === 'connected' ? 'bg-[var(--success)]' : agentStatus === 'detected' ? 'bg-[var(--amber)]' : 'bg-muted-foreground';
 
   return (
     <div className="flex flex-col h-full min-h-0">
@@ -117,14 +118,14 @@ export default function AgentsPanelAgentDetail({
               type="button"
               onClick={handleInstall}
               disabled={installing}
-              className="inline-flex items-center gap-1.5 px-3 py-2 text-xs rounded-lg font-medium text-[var(--amber-foreground)] disabled:opacity-50 bg-[var(--amber)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="inline-flex items-center gap-1.5 px-3 py-2 text-xs rounded-lg font-medium text-white disabled:opacity-50 bg-[var(--amber)] hover:bg-[var(--amber)]/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             >
               {installing ? <Loader2 size={14} className="animate-spin" /> : null}
-              {installing ? copy.installing : copy.install(agent.name)}
+              {installing ? copy.installing : copy.install}
             </button>
             {result && (
               <span
-                className={`flex items-center gap-1 text-2xs ${result.type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-destructive'}`}
+                className={`flex items-center gap-1 text-2xs ${result.type === 'success' ? 'text-success' : 'text-destructive'}`}
               >
                 {result.type === 'success' ? <CheckCircle2 size={12} /> : <AlertCircle size={12} />}
                 {result.text}

package/app/components/panels/AgentsPanelAgentGroups.tsx

@@ -2,7 +2,6 @@
 
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import type { AgentInfo } from '../settings/types';
-import type { McpContextValue } from '@/hooks/useMcpData';
 import AgentsPanelAgentListRow, { type AgentsPanelAgentListRowCopy } from './AgentsPanelAgentListRow';
 
 type AgentsCopy = {
@@ -16,9 +15,8 @@ export function AgentsPanelAgentGroups({
   connected,
   detected,
   notFound,
-  onOpenDetail,
   selectedAgentKey,
-  mcp,
+  onInstallAgent,
   listCopy,
   showNotDetected,
   setShowNotDetected,
@@ -27,16 +25,13 @@ export function AgentsPanelAgentGroups({
   connected: AgentInfo[];
   detected: AgentInfo[];
   notFound: AgentInfo[];
-  onOpenDetail?: (key: string) => void;
   selectedAgentKey?: string | null;
-  mcp: Pick<McpContextValue, 'installAgent'>;
+  onInstallAgent: (key: string) => Promise<boolean>;
   listCopy: AgentsPanelAgentListRowCopy;
   showNotDetected: boolean;
   setShowNotDetected: (v: boolean | ((prev: boolean) => boolean)) => void;
   p: AgentsCopy;
 }) {
-  const open = onOpenDetail ?? (() => {});
-
   return (
     <div>
       <div className="px-0 py-1 mb-0.5">
@@ -54,8 +49,8 @@ export function AgentsPanelAgentGroups({
                 agent={agent}
                 agentStatus="connected"
                 selected={selectedAgentKey === agent.key}
-                onOpenDetail={() => open(agent.key)}
-                onInstallAgent={mcp.installAgent}
+                detailHref={`/agents/${encodeURIComponent(agent.key)}`}
+                onInstallAgent={onInstallAgent}
                 copy={listCopy}
               />
             ))}
@@ -75,8 +70,8 @@ export function AgentsPanelAgentGroups({
                 agent={agent}
                 agentStatus="detected"
                 selected={selectedAgentKey === agent.key}
-                onOpenDetail={() => open(agent.key)}
-                onInstallAgent={mcp.installAgent}
+                detailHref={`/agents/${encodeURIComponent(agent.key)}`}
+                onInstallAgent={onInstallAgent}
                 copy={listCopy}
               />
             ))}
@@ -102,8 +97,8 @@ export function AgentsPanelAgentGroups({
                   agent={agent}
                   agentStatus="notFound"
                   selected={selectedAgentKey === agent.key}
-                  onOpenDetail={() => open(agent.key)}
-                  onInstallAgent={mcp.installAgent}
+                  detailHref={`/agents/${encodeURIComponent(agent.key)}`}
+                  onInstallAgent={onInstallAgent}
                   copy={listCopy}
                 />
               ))}