@geminilight/mindos 0.5.51 → 0.5.54

package/app/components/panels/AgentsPanelAgentGroups.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+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 = {
+  rosterLabel: string;
+  sectionConnected: string;
+  sectionDetected: string;
+  sectionNotDetected: string;
+};
+
+export function AgentsPanelAgentGroups({
+  connected,
+  detected,
+  notFound,
+  onOpenDetail,
+  selectedAgentKey,
+  mcp,
+  listCopy,
+  showNotDetected,
+  setShowNotDetected,
+  p,
+}: {
+  connected: AgentInfo[];
+  detected: AgentInfo[];
+  notFound: AgentInfo[];
+  onOpenDetail?: (key: string) => void;
+  selectedAgentKey?: string | null;
+  mcp: Pick<McpContextValue, 'installAgent'>;
+  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">
+        <span className="text-2xs font-semibold text-muted-foreground uppercase tracking-wider">{p.rosterLabel}</span>
+      </div>
+      {connected.length > 0 && (
+        <section className="mb-3">
+          <h3 className="text-[11px] font-medium text-muted-foreground/90 uppercase tracking-wider mb-2 pl-0.5">
+            {p.sectionConnected} ({connected.length})
+          </h3>
+          <div className="space-y-1.5">
+            {connected.map(agent => (
+              <AgentsPanelAgentListRow
+                key={agent.key}
+                agent={agent}
+                agentStatus="connected"
+                selected={selectedAgentKey === agent.key}
+                onOpenDetail={() => open(agent.key)}
+                onInstallAgent={mcp.installAgent}
+                copy={listCopy}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {detected.length > 0 && (
+        <section className="mb-3">
+          <h3 className="text-[11px] font-medium text-muted-foreground/90 uppercase tracking-wider mb-2 pl-0.5">
+            {p.sectionDetected} ({detected.length})
+          </h3>
+          <div className="space-y-1.5">
+            {detected.map(agent => (
+              <AgentsPanelAgentListRow
+                key={agent.key}
+                agent={agent}
+                agentStatus="detected"
+                selected={selectedAgentKey === agent.key}
+                onOpenDetail={() => open(agent.key)}
+                onInstallAgent={mcp.installAgent}
+                copy={listCopy}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {notFound.length > 0 && (
+        <section>
+          <button
+            type="button"
+            onClick={() => setShowNotDetected(!showNotDetected)}
+            className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm pl-0.5"
+          >
+            {showNotDetected ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+            {p.sectionNotDetected} ({notFound.length})
+          </button>
+          {showNotDetected && (
+            <div className="space-y-1.5">
+              {notFound.map(agent => (
+                <AgentsPanelAgentListRow
+                  key={agent.key}
+                  agent={agent}
+                  agentStatus="notFound"
+                  selected={selectedAgentKey === agent.key}
+                  onOpenDetail={() => open(agent.key)}
+                  onInstallAgent={mcp.installAgent}
+                  copy={listCopy}
+                />
+              ))}
+            </div>
+          )}
+        </section>
+      )}
+    </div>
+  );
+}

package/app/components/panels/AgentsPanelAgentListRow.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRight, Loader2 } from 'lucide-react';
+import type { AgentInfo } from '../settings/types';
+
+export type AgentsPanelAgentListStatus = 'connected' | 'detected' | 'notFound';
+
+export interface AgentsPanelAgentListRowCopy {
+  installing: string;
+  install: (name: string) => string;
+}
+
+export default function AgentsPanelAgentListRow({
+  agent,
+  agentStatus,
+  selected = false,
+  onOpenDetail,
+  onInstallAgent,
+  copy,
+}: {
+  agent: AgentInfo;
+  agentStatus: AgentsPanelAgentListStatus;
+  selected?: boolean;
+  onOpenDetail: () => void;
+  onInstallAgent: (key: string) => Promise<boolean>;
+  copy: AgentsPanelAgentListRowCopy;
+}) {
+  const dot =
+    agentStatus === 'connected' ? 'bg-emerald-500' : agentStatus === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
+
+  return (
+    <div
+      className={`
+        group flex items-center gap-0 rounded-xl border transition-all duration-150
+        ${selected
+          ? 'border-border ring-2 ring-ring/50 bg-[var(--amber-dim)]/45'
+          : 'border-border/70 bg-card/50 hover:border-border hover:bg-muted/25'}
+      `}
+    >
+      <button
+        type="button"
+        onClick={onOpenDetail}
+        className="flex flex-1 min-w-0 items-center gap-2.5 text-left rounded-xl pl-3 pr-2 py-2.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <span className={`w-2 h-2 rounded-full shrink-0 ring-2 ring-background ${dot}`} />
+        <span className="text-sm font-medium text-foreground truncate leading-tight">{agent.name}</span>
+        {agentStatus === 'connected' && agent.transport && (
+          <span className="text-2xs font-mono tabular-nums px-1.5 py-0.5 rounded-md bg-muted/90 text-muted-foreground shrink-0 border border-border/50">
+            {agent.transport}
+          </span>
+        )}
+        <span className="flex-1 min-w-[4px]" />
+        <ChevronRight
+          size={15}
+          className={`shrink-0 transition-opacity duration-150 ${selected ? 'text-[var(--amber)] opacity-90' : 'text-muted-foreground/45 group-hover:text-muted-foreground/80'}`}
+          aria-hidden
+        />
+      </button>
+
+      {agentStatus === 'detected' && (
+        <div className="pr-2 py-2 shrink-0">
+          <AgentInstallButton agentKey={agent.key} agentName={agent.name} onInstallAgent={onInstallAgent} copy={copy} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AgentInstallButton({
+  agentKey,
+  agentName,
+  onInstallAgent,
+  copy,
+}: {
+  agentKey: string;
+  agentName: string;
+  onInstallAgent: (key: string) => Promise<boolean>;
+  copy: AgentsPanelAgentListRowCopy;
+}) {
+  const [installing, setInstalling] = useState(false);
+
+  const handleInstall = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setInstalling(true);
+    await onInstallAgent(agentKey);
+    setInstalling(false);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleInstall}
+      disabled={installing}
+      className="flex items-center gap-1 px-2 py-1.5 text-2xs rounded-lg font-medium text-[var(--amber-foreground)] disabled:opacity-50 transition-colors shrink-0 bg-[var(--amber)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {installing ? <Loader2 size={10} className="animate-spin" /> : null}
+      {installing ? copy.installing : copy.install(agentName)}
+    </button>
+  );
+}

package/app/components/panels/AgentsPanelHubNav.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { type RefObject } from 'react';
+import { LayoutDashboard, Server, Zap } from 'lucide-react';
+import { PanelNavRow } from './PanelNavRow';
+
+type HubCopy = {
+  navOverview: string;
+  navMcp: string;
+  navSkills: string;
+};
+
+export function AgentsPanelHubNav({
+  copy,
+  connectedCount,
+  overviewRef,
+  skillsRef,
+  scrollTo,
+  openAdvancedConfig,
+}: {
+  copy: HubCopy;
+  connectedCount: number;
+  overviewRef: RefObject<HTMLDivElement | null>;
+  skillsRef: RefObject<HTMLDivElement | null>;
+  scrollTo: (el: HTMLElement | null) => void;
+  openAdvancedConfig: () => void;
+}) {
+  return (
+    <div className="py-2">
+      <PanelNavRow
+        icon={<LayoutDashboard size={14} className="text-[var(--amber)]" />}
+        title={copy.navOverview}
+        badge={<span className="text-2xs tabular-nums text-muted-foreground">{connectedCount}</span>}
+        onClick={() => scrollTo(overviewRef.current)}
+      />
+      <PanelNavRow
+        icon={<Server size={14} className="text-muted-foreground" />}
+        title={copy.navMcp}
+        onClick={openAdvancedConfig}
+      />
+      <PanelNavRow
+        icon={<Zap size={14} className="text-muted-foreground" />}
+        title={copy.navSkills}
+        onClick={() => scrollTo(skillsRef.current)}
+      />
+    </div>
+  );
+}

package/app/components/panels/DiscoverPanel.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import Link from 'next/link';
-import { Lightbulb, Blocks, Zap, LayoutTemplate, ChevronRight, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck } from 'lucide-react';
+import { Lightbulb, Blocks, Zap, LayoutTemplate, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck } from 'lucide-react';
 import PanelHeader from './PanelHeader';
+import { PanelNavRow, ComingSoonBadge } from './PanelNavRow';
 import { useLocale } from '@/lib/LocaleContext';
 import { useCases } from '@/components/explore/use-cases';
 import { openAskModal } from '@/hooks/useAskModal';
@@ -13,46 +13,6 @@ interface DiscoverPanelProps {
   onMaximize?: () => void;
 }
 
-/** Navigation entry — clickable row linking to a page or showing coming soon */
-function NavEntry({
-  icon,
-  title,
-  badge,
-  href,
-  onClick,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  badge?: React.ReactNode;
-  href?: string;
-  onClick?: () => void;
-}) {
-  const content = (
-    <>
-      <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0">{icon}</span>
-      <span className="text-sm font-medium text-foreground flex-1">{title}</span>
-      {badge}
-      <ChevronRight size={14} className="text-muted-foreground shrink-0" />
-    </>
-  );
-
-  const className = "flex items-center gap-3 px-4 py-2.5 hover:bg-muted/50 transition-colors cursor-pointer";
-
-  if (href) {
-    return <Link href={href} className={className}>{content}</Link>;
-  }
-  return <button onClick={onClick} className={`${className} w-full`}>{content}</button>;
-}
-
-/** Coming soon badge */
-function ComingSoonBadge({ label }: { label: string }) {
-  return (
-    <span className="text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground shrink-0">
-      {label}
-    </span>
-  );
-}
-
 /** Compact use case row */
 function UseCaseRow({
   icon,
@@ -112,23 +72,23 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
       <div className="flex-1 overflow-y-auto min-h-0">
         {/* Navigation entries */}
         <div className="py-2">
-          <NavEntry
+          <PanelNavRow
             icon={<Lightbulb size={14} className="text-[var(--amber)]" />}
             title={d.useCases}
             badge={<span className="text-2xs tabular-nums text-muted-foreground">{useCases.length}</span>}
             href="/explore"
           />
-          <NavEntry
+          <PanelNavRow
             icon={<Blocks size={14} className="text-muted-foreground" />}
             title={d.pluginMarket}
             badge={<ComingSoonBadge label={d.comingSoon} />}
           />
-          <NavEntry
+          <PanelNavRow
             icon={<Zap size={14} className="text-muted-foreground" />}
             title={d.skillMarket}
             badge={<ComingSoonBadge label={d.comingSoon} />}
           />
-          <NavEntry
+          <PanelNavRow
             icon={<LayoutTemplate size={14} className="text-muted-foreground" />}
             title={d.spaceTemplates}
             badge={<ComingSoonBadge label={d.comingSoon} />}

package/app/components/panels/EchoPanel.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
+import PanelHeader from './PanelHeader';
+import { ComingSoonBadge } from './PanelNavRow';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface EchoPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+function EchoPlaceholdSection({
+  icon,
+  title,
+  hint,
+  comingSoonLabel,
+}: {
+  icon: ReactNode;
+  title: string;
+  hint: string;
+  comingSoonLabel: string;
+}) {
+  return (
+    <div className="px-4 py-2.5 border-b border-border/60 last:border-b-0">
+      <div className="flex items-center gap-2.5">
+        <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0 text-muted-foreground">{icon}</span>
+        <span className="text-sm font-medium text-foreground flex-1 text-left">{title}</span>
+        <ComingSoonBadge label={comingSoonLabel} />
+      </div>
+      <p className="text-2xs text-muted-foreground leading-relaxed mt-1.5 pl-9">{hint}</p>
+    </div>
+  );
+}
+
+export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelProps) {
+  const { t } = useLocale();
+  const e = t.panels.echo;
+  const soon = e.comingSoon;
+
+  return (
+    <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
+      <PanelHeader title={e.title} maximized={maximized} onMaximize={onMaximize} />
+      <div className="flex-1 overflow-y-auto min-h-0">
+        <div className="py-1">
+          <EchoPlaceholdSection
+            icon={<UserRound size={14} />}
+            title={e.aboutYouTitle}
+            hint={e.aboutYouHint}
+            comingSoonLabel={soon}
+          />
+          <EchoPlaceholdSection
+            icon={<Bookmark size={14} />}
+            title={e.continuedTitle}
+            hint={e.continuedHint}
+            comingSoonLabel={soon}
+          />
+          <EchoPlaceholdSection
+            icon={<Sun size={14} />}
+            title={e.dailyEchoTitle}
+            hint={e.dailyEchoHint}
+            comingSoonLabel={soon}
+          />
+          <EchoPlaceholdSection
+            icon={<History size={14} />}
+            title={e.pastYouTitle}
+            hint={e.pastYouHint}
+            comingSoonLabel={soon}
+          />
+          <EchoPlaceholdSection
+            icon={<Brain size={14} />}
+            title={e.intentGrowthTitle}
+            hint={e.intentGrowthHint}
+            comingSoonLabel={soon}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/panels/PanelNavRow.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+
+/** Row matching Discover panel nav: icon tile, title, optional badge, chevron. */
+export function PanelNavRow({
+  icon,
+  title,
+  badge,
+  href,
+  onClick,
+}: {
+  icon: ReactNode;
+  title: string;
+  badge?: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+}) {
+  const content = (
+    <>
+      <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0">{icon}</span>
+      <span className="text-sm font-medium text-foreground flex-1 text-left">{title}</span>
+      {badge}
+      <ChevronRight size={14} className="text-muted-foreground shrink-0" />
+    </>
+  );
+
+  const className =
+    'flex items-center gap-3 px-4 py-2.5 hover:bg-muted/50 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm';
+
+  if (href) {
+    return (
+      <Link href={href} className={className}>
+        {content}
+      </Link>
+    );
+  }
+  return (
+    <button type="button" onClick={onClick} className={`${className} w-full`}>
+      {content}
+    </button>
+  );
+}
+
+export function ComingSoonBadge({ label }: { label: string }) {
+  return (
+    <span className="text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground shrink-0">{label}</span>
+  );
+}

package/app/components/panels/agents-panel-resolve-status.ts

@@ -0,0 +1,13 @@
+export type AgentsPanelAgentDetailStatus = 'connected' | 'detected' | 'notFound';
+
+export function resolveAgentDetailStatus(
+  key: string,
+  connected: { key: string }[],
+  detected: { key: string }[],
+  notFound: { key: string }[],
+): AgentsPanelAgentDetailStatus | null {
+  if (connected.some(a => a.key === key)) return 'connected';
+  if (detected.some(a => a.key === key)) return 'detected';
+  if (notFound.some(a => a.key === key)) return 'notFound';
+  return null;
+}

package/app/components/settings/McpSkillsSection.tsx

@@ -3,10 +3,11 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   Loader2, ChevronDown, ChevronRight,
-  Plus, X, Search,
+  Plus, X, Search, Copy, Check,
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { useMcpDataOptional } from '@/hooks/useMcpData';
+import { copyToClipboard } from '@/lib/clipboard';
 import type { SkillInfo, McpSkillsSectionProps } from './types';
 import SkillRow from './McpSkillRow';
 import SkillCreateForm from './McpSkillCreateForm';
@@ -24,7 +25,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const [createError, setCreateError] = useState('');
 
   const [search, setSearch] = useState('');
-  const [builtinCollapsed, setBuiltinCollapsed] = useState(true);
+  const [builtinCollapsed, setBuiltinCollapsed] = useState(false);
   const [editing, setEditing] = useState<string | null>(null);
   const [editContent, setEditContent] = useState('');
   const [editError, setEditError] = useState('');
@@ -354,6 +355,91 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
           {m?.addSkill ?? '+ Add Skill'}
         </button>
       )}
+
+      {/* CLI install hint with agent selector */}
+      <SkillCliHint
+        agents={mcp?.agents ?? []}
+        skillName={(() => {
+          const mindosEnabled = skills.find(s => s.name === 'mindos')?.enabled ?? true;
+          return mindosEnabled ? 'mindos' : 'mindos-zh';
+        })()}
+        m={m}
+      />
+    </div>
+  );
+}
+
+/* ── Skill CLI Install Hint ── */
+
+function SkillCliHint({ agents, skillName, m }: {
+  agents: { key: string; name: string; present?: boolean; installed?: boolean }[];
+  skillName: string;
+  m: Record<string, any> | undefined;
+}) {
+  const [selectedAgent, setSelectedAgent] = useState('claude-code');
+  const [copied, setCopied] = useState(false);
+
+  const cmd = `npx skills add GeminiLight/MindOS --skill ${skillName} -a ${selectedAgent} -g -y`;
+  const skillPath = `~/.agents/skills/${skillName}/SKILL.md`;
+
+  const handleCopy = async () => {
+    const ok = await copyToClipboard(cmd);
+    if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2000); }
+  };
+
+  // Group agents: connected first, then detected, then not found
+  const connected = agents.filter(a => a.present && a.installed);
+  const detected = agents.filter(a => a.present && !a.installed);
+  const notFound = agents.filter(a => !a.present);
+
+  return (
+    <div className="border-t border-border pt-3 mt-3 space-y-2.5">
+      <p className="text-2xs font-medium text-muted-foreground">
+        {m?.cliInstallHint ?? 'Install via CLI:'}
+      </p>
+
+      {/* Agent selector */}
+      <div className="relative">
+        <select
+          value={selectedAgent}
+          onChange={(e) => setSelectedAgent(e.target.value)}
+          className="w-full appearance-none px-2.5 py-1.5 pr-7 text-2xs rounded-md border border-border bg-background text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        >
+          {connected.length > 0 && (
+            <optgroup label={m?.connectedGroup ?? 'Connected'}>
+              {connected.map(a => <option key={a.key} value={a.key}>✓ {a.name}</option>)}
+            </optgroup>
+          )}
+          {detected.length > 0 && (
+            <optgroup label={m?.detectedGroup ?? 'Detected'}>
+              {detected.map(a => <option key={a.key} value={a.key}>○ {a.name}</option>)}
+            </optgroup>
+          )}
+          {notFound.length > 0 && (
+            <optgroup label={m?.notFoundGroup ?? 'Not Installed'}>
+              {notFound.map(a => <option key={a.key} value={a.key}>· {a.name}</option>)}
+            </optgroup>
+          )}
+        </select>
+        <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+      </div>
+
+      {/* Command */}
+      <div className="flex items-center gap-1.5">
+        <code className="flex-1 text-[10px] font-mono bg-muted/50 border border-border rounded-lg px-2.5 py-2 text-muted-foreground select-all overflow-x-auto whitespace-nowrap">
+          {cmd}
+        </code>
+        <button onClick={handleCopy}
+          className="p-1.5 rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+          {copied ? <Check size={11} /> : <Copy size={11} />}
+        </button>
+      </div>
+
+      {/* Path hint */}
+      <p className="text-2xs text-muted-foreground">
+        {m?.skillPathHint ?? 'Skill files installed at:'}{' '}
+        <code className="font-mono text-[10px] bg-muted px-1 py-0.5 rounded">{skillPath}</code>
+      </p>
     </div>
   );
 }

package/app/components/settings/McpTab.tsx

@@ -219,6 +219,32 @@ function AgentConfigViewer({ connectedAgents, detectedAgents, notFoundAgents, cu
 
       {currentAgent && (
         <>
+          {/* Agent status badge */}
+          <div className="flex items-center gap-2">
+            {currentAgent.present && currentAgent.installed ? (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block" />
+                {m?.tagConnected ?? 'Connected'}
+              </span>
+            ) : currentAgent.present && !currentAgent.installed ? (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium" style={{ background: 'var(--amber-subtle, rgba(200,135,58,0.1))', color: 'var(--amber)' }}>
+                <span className="w-1.5 h-1.5 rounded-full inline-block" style={{ background: 'var(--amber)' }} />
+                {m?.tagDetected ?? 'Detected — not configured'}
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-muted text-muted-foreground">
+                <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 inline-block" />
+                {m?.tagNotInstalled ?? 'Not installed'}
+              </span>
+            )}
+            {currentAgent.transport && (
+              <span className="px-1.5 py-0.5 rounded text-2xs bg-muted text-muted-foreground">{currentAgent.transport}</span>
+            )}
+            {currentAgent.scope && (
+              <span className="px-1.5 py-0.5 rounded text-2xs bg-muted text-muted-foreground">{currentAgent.scope}</span>
+            )}
+          </div>
+
           {/* Transport toggle */}
           <div className="flex items-center rounded-lg border border-border overflow-hidden w-fit">
             <button