@geminilight/mindos 0.5.64 → 0.5.65

package/app/components/agents/agents-content-model.ts

@@ -4,7 +4,12 @@ export type AgentsDashboardTab = 'overview' | 'mcp' | 'skills';
 export type AgentResolvedStatus = 'connected' | 'detected' | 'notFound';
 export type SkillCapability = 'research' | 'coding' | 'docs' | 'ops' | 'memory';
 export type SkillSourceFilter = 'all' | 'builtin' | 'user';
+export type UnifiedSourceFilter = 'all' | 'builtin' | 'user' | 'native';
 export type AgentStatusFilter = 'all' | 'connected' | 'detected' | 'notFound';
+export type AgentTransportFilter = 'all' | 'stdio' | 'http' | 'other';
+export type SkillWorkspaceStatusFilter = 'all' | 'enabled' | 'disabled' | 'attention';
+export type SkillCapabilityFilter = SkillCapability | 'all';
+export type AgentDetailSkillSourceFilter = 'all' | 'builtin' | 'user';
 
 export interface RiskItem {
   id: string;
@@ -38,12 +43,7 @@ export function resolveAgentStatus(agent: AgentInfo): AgentResolvedStatus {
 }
 
 export function capabilityForSkill(skill: SkillInfo): SkillCapability {
-  const text = `${skill.name} ${skill.description}`.toLowerCase();
-  if (text.includes('search') || text.includes('research')) return 'research';
-  if (text.includes('doc') || text.includes('write')) return 'docs';
-  if (text.includes('deploy') || text.includes('ops') || text.includes('ci')) return 'ops';
-  if (text.includes('memory') || text.includes('mind')) return 'memory';
-  return 'coding';
+  return capabilityFromText(`${skill.name} ${skill.description}`);
 }
 
 export function groupSkillsByCapability(skills: SkillInfo[]): Record<SkillCapability, SkillInfo[]> {
@@ -56,16 +56,20 @@ export function groupSkillsByCapability(skills: SkillInfo[]): Record<SkillCapabi
   };
 }
 
+function buildBaseRiskItems(args: { mcpRunning: boolean; detectedCount: number; notFoundCount: number }): RiskItem[] {
+  const items: RiskItem[] = [];
+  if (!args.mcpRunning) items.push({ id: 'mcp-stopped', severity: 'error', title: 'MCP server is not running' });
+  if (args.detectedCount > 0) items.push({ id: 'detected-unconfigured', severity: 'warn', title: `${args.detectedCount} detected agent(s) need configuration` });
+  return items;
+}
+
 export function buildRiskQueue(args: {
   mcpRunning: boolean;
   detectedCount: number;
   notFoundCount: number;
   allSkillsDisabled: boolean;
 }): RiskItem[] {
-  const items: RiskItem[] = [];
-  if (!args.mcpRunning) items.push({ id: 'mcp-stopped', severity: 'error', title: 'MCP server is not running' });
-  if (args.detectedCount > 0) items.push({ id: 'detected-unconfigured', severity: 'warn', title: `${args.detectedCount} detected agent(s) need configuration` });
-  if (args.notFoundCount > 0) items.push({ id: 'not-found', severity: 'warn', title: `${args.notFoundCount} agent(s) not detected on this machine` });
+  const items = buildBaseRiskItems(args);
   if (args.allSkillsDisabled) items.push({ id: 'skills-disabled', severity: 'warn', title: 'All skills are disabled' });
   return items;
 }
@@ -80,6 +84,65 @@ export function filterSkills(skills: SkillInfo[], query: string, source: SkillSo
   });
 }
 
+export function buildSkillAttentionSet(skills: SkillInfo[]): Set<string> {
+  return new Set(
+    skills
+      .filter((skill) => (!skill.enabled && skill.source === 'user') || skill.description.trim().length === 0)
+      .map((skill) => skill.name),
+  );
+}
+
+export function filterSkillsForWorkspace(
+  skills: SkillInfo[],
+  filters: {
+    query: string;
+    source: SkillSourceFilter;
+    status: SkillWorkspaceStatusFilter;
+    capability: SkillCapabilityFilter;
+  },
+): SkillInfo[] {
+  const attention = buildSkillAttentionSet(skills);
+  const byQueryAndSource = filterSkills(skills, filters.query, filters.source);
+  return byQueryAndSource.filter((skill) => {
+    if (filters.status === 'enabled' && !skill.enabled) return false;
+    if (filters.status === 'disabled' && skill.enabled) return false;
+    if (filters.status === 'attention' && !attention.has(skill.name)) return false;
+    if (filters.capability !== 'all' && capabilityForSkill(skill) !== filters.capability) return false;
+    return true;
+  });
+}
+
+export function resolveMatrixAgents(agents: AgentInfo[], focusKey: string): AgentInfo[] {
+  if (focusKey === 'all') return agents;
+  const focused = agents.find((agent) => agent.key === focusKey);
+  return focused ? [focused] : [];
+}
+
+export function createBulkSkillTogglePlan(skills: SkillInfo[], targetEnabled: boolean): string[] {
+  return skills.filter((skill) => skill.enabled !== targetEnabled).map((skill) => skill.name);
+}
+
+export interface BulkSkillToggleResult {
+  skillName: string;
+  ok: boolean;
+  reason?: string;
+}
+
+export function summarizeBulkSkillToggleResults(results: BulkSkillToggleResult[]): {
+  total: number;
+  succeeded: number;
+  failed: number;
+  failedSkills: string[];
+} {
+  const failedSkills = results.filter((item) => !item.ok).map((item) => item.skillName);
+  return {
+    total: results.length,
+    succeeded: results.length - failedSkills.length,
+    failed: failedSkills.length,
+    failedSkills,
+  };
+}
+
 export function filterAgentsByStatus(agents: AgentInfo[], status: AgentStatusFilter): AgentInfo[] {
   if (status === 'all') return agents;
   return agents.filter((agent) => resolveAgentStatus(agent) === status);
@@ -94,3 +157,222 @@ export function filterAgentsForMcpTable(agents: AgentInfo[], query: string, stat
     return haystack.includes(q);
   });
 }
+
+export function resolveAgentTransport(agent: AgentInfo): AgentTransportFilter {
+  const transport = (agent.transport ?? agent.preferredTransport ?? '').toLowerCase();
+  if (transport === 'stdio' || transport === 'http') return transport;
+  return 'other';
+}
+
+export function filterAgentsForMcpWorkspace(
+  agents: AgentInfo[],
+  filters: { query: string; status: AgentStatusFilter; transport: AgentTransportFilter },
+): AgentInfo[] {
+  const q = filters.query.trim().toLowerCase();
+  return agents.filter((agent) => {
+    if (filters.status !== 'all' && resolveAgentStatus(agent) !== filters.status) return false;
+    if (filters.transport !== 'all' && resolveAgentTransport(agent) !== filters.transport) return false;
+    if (!q) return true;
+    const haystack = `${agent.name} ${agent.key} ${agent.configPath ?? ''}`.toLowerCase();
+    return haystack.includes(q);
+  });
+}
+
+export function buildMcpRiskQueue(args: {
+  mcpRunning: boolean;
+  detectedCount: number;
+  notFoundCount: number;
+}): RiskItem[] {
+  return buildBaseRiskItems(args);
+}
+
+export interface McpBulkReconnectResult {
+  agentKey: string;
+  ok: boolean;
+}
+
+export function summarizeMcpBulkReconnectResults(results: McpBulkReconnectResult[]): {
+  total: number;
+  succeeded: number;
+  failed: number;
+} {
+  const failed = results.filter((item) => !item.ok).length;
+  return {
+    total: results.length,
+    succeeded: results.length - failed,
+    failed,
+  };
+}
+
+export interface CrossAgentMcpServer {
+  serverName: string;
+  agents: string[];
+}
+
+export function aggregateCrossAgentMcpServers(agents: AgentInfo[]): CrossAgentMcpServer[] {
+  const map = new Map<string, string[]>();
+  for (const agent of agents) {
+    for (const server of agent.configuredMcpServers ?? []) {
+      const existing = map.get(server);
+      if (existing) existing.push(agent.name);
+      else map.set(server, [agent.name]);
+    }
+  }
+  return [...map.entries()]
+    .map(([serverName, agentNames]) => ({ serverName, agents: agentNames }))
+    .sort((a, b) => b.agents.length - a.agents.length || a.serverName.localeCompare(b.serverName));
+}
+
+export interface CrossAgentSkill {
+  skillName: string;
+  agents: string[];
+}
+
+export function aggregateCrossAgentSkills(agents: AgentInfo[]): CrossAgentSkill[] {
+  const map = new Map<string, string[]>();
+  for (const agent of agents) {
+    for (const skill of agent.installedSkillNames ?? []) {
+      const existing = map.get(skill);
+      if (existing) existing.push(agent.name);
+      else map.set(skill, [agent.name]);
+    }
+  }
+  return [...map.entries()]
+    .map(([skillName, agentNames]) => ({ skillName, agents: agentNames }))
+    .sort((a, b) => b.agents.length - a.agents.length || a.skillName.localeCompare(b.skillName));
+}
+
+const STATUS_ORDER: Record<AgentResolvedStatus, number> = { connected: 0, detected: 1, notFound: 2 };
+
+export function sortAgentsByStatus(agents: AgentInfo[]): AgentInfo[] {
+  return [...agents].sort((a, b) => {
+    const sa = STATUS_ORDER[resolveAgentStatus(a)];
+    const sb = STATUS_ORDER[resolveAgentStatus(b)];
+    if (sa !== sb) return sa - sb;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export function filterSkillsForAgentDetail(
+  skills: SkillInfo[],
+  filters: { query: string; source: AgentDetailSkillSourceFilter },
+): SkillInfo[] {
+  const q = filters.query.trim().toLowerCase();
+  return skills.filter((skill) => {
+    if (filters.source !== 'all' && skill.source !== filters.source) return false;
+    if (!q) return true;
+    const haystack = `${skill.name} ${skill.description} ${skill.path}`.toLowerCase();
+    return haystack.includes(q);
+  });
+}
+
+/* ────────── Unified Skill List (MindOS + Native) ────────── */
+
+export interface UnifiedSkillItem {
+  name: string;
+  kind: 'mindos' | 'native';
+  mindosSkill?: SkillInfo;
+  agents: string[];
+  capability: SkillCapability;
+  enabled: boolean;
+  source: 'builtin' | 'user' | 'native';
+  description: string;
+}
+
+export function capabilityFromText(text: string): SkillCapability {
+  const lower = text.toLowerCase();
+  if (lower.includes('search') || lower.includes('research') || lower.includes('arxiv') || lower.includes('paper')) return 'research';
+  if (lower.includes('doc') || lower.includes('write') || lower.includes('readme') || lower.includes('copy') || lower.includes('slide') || lower.includes('ppt')) return 'docs';
+  if (lower.includes('deploy') || lower.includes('ops') || lower.includes('ci') || lower.includes('ship') || lower.includes('qa') || lower.includes('review') || lower.includes('test')) return 'ops';
+  if (lower.includes('memory') || lower.includes('mind') || lower.includes('handoff') || lower.includes('session')) return 'memory';
+  return 'coding';
+}
+
+export function buildUnifiedSkillList(
+  mindosSkills: SkillInfo[],
+  crossAgentSkills: CrossAgentSkill[],
+): UnifiedSkillItem[] {
+  const mindosNames = new Set(mindosSkills.map((s) => s.name));
+  const crossMap = new Map<string, string[]>();
+  for (const cs of crossAgentSkills) crossMap.set(cs.skillName, cs.agents);
+
+  const result: UnifiedSkillItem[] = [];
+
+  for (const skill of mindosSkills) {
+    result.push({
+      name: skill.name,
+      kind: 'mindos',
+      mindosSkill: skill,
+      agents: crossMap.get(skill.name) ?? [],
+      capability: capabilityForSkill(skill),
+      enabled: skill.enabled,
+      source: skill.source,
+      description: skill.description,
+    });
+  }
+
+  for (const cs of crossAgentSkills) {
+    if (mindosNames.has(cs.skillName)) continue;
+    result.push({
+      name: cs.skillName,
+      kind: 'native',
+      agents: cs.agents,
+      capability: capabilityFromText(cs.skillName),
+      enabled: true,
+      source: 'native',
+      description: '',
+    });
+  }
+
+  return result;
+}
+
+export function groupUnifiedSkills(skills: UnifiedSkillItem[]): Record<SkillCapability, UnifiedSkillItem[]> {
+  return {
+    research: skills.filter((s) => s.capability === 'research'),
+    coding: skills.filter((s) => s.capability === 'coding'),
+    docs: skills.filter((s) => s.capability === 'docs'),
+    ops: skills.filter((s) => s.capability === 'ops'),
+    memory: skills.filter((s) => s.capability === 'memory'),
+  };
+}
+
+export function filterUnifiedSkills(
+  skills: UnifiedSkillItem[],
+  filters: {
+    query: string;
+    source: UnifiedSourceFilter;
+    status: SkillWorkspaceStatusFilter;
+    capability: SkillCapabilityFilter;
+  },
+): UnifiedSkillItem[] {
+  const q = filters.query.trim().toLowerCase();
+  const attentionSet = new Set(
+    skills
+      .filter((s) => s.kind === 'mindos' && ((!s.enabled && s.source === 'user') || s.description.trim().length === 0))
+      .map((s) => s.name),
+  );
+
+  return skills.filter((skill) => {
+    if (filters.source !== 'all') {
+      if (filters.source === 'native' && skill.kind !== 'native') return false;
+      if (filters.source === 'builtin' && skill.source !== 'builtin') return false;
+      if (filters.source === 'user' && skill.source !== 'user') return false;
+    }
+    if (filters.status === 'enabled' && !skill.enabled) return false;
+    if (filters.status === 'disabled' && skill.enabled) return false;
+    if (filters.status === 'attention' && !attentionSet.has(skill.name)) return false;
+    if (filters.capability !== 'all' && skill.capability !== filters.capability) return false;
+    if (q) {
+      const haystack = `${skill.name} ${skill.description}`.toLowerCase();
+      if (!haystack.includes(q)) return false;
+    }
+    return true;
+  });
+}
+
+export function createBulkUnifiedTogglePlan(skills: UnifiedSkillItem[], targetEnabled: boolean): string[] {
+  return skills
+    .filter((s) => s.kind === 'mindos' && s.enabled !== targetEnabled)
+    .map((s) => s.name);
+}

package/app/components/ask/AskContent.tsx

@@ -171,6 +171,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
   const [loadingPhase, setLoadingPhase] = useState<'connecting' | 'thinking' | 'streaming'>('connecting');
   const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
   const [showHistory, setShowHistory] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
 
   const session = useAskSession(currentFile);
   const upload = useFileUpload();
@@ -295,9 +296,11 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     const text = input.trim();
     if (!text || isLoading) return;
 
-    const userMsg: Message = { role: 'user', content: text };
+    // Attach current timestamp so backend knows EXACTLY when the user typed this message
+    const userMsg: Message = { role: 'user', content: text, timestamp: Date.now() };
     const requestMessages = [...session.messages, userMsg];
-    session.setMessages([...requestMessages, { role: 'assistant', content: '' }]);
+    // And for the incoming assistant response, give it an initial timestamp
+    session.setMessages([...requestMessages, { role: 'assistant', content: '', timestamp: Date.now() }]);
     setInput('');
     if (onFirstMessage && !firstMessageFired.current) {
       firstMessageFired.current = true;
@@ -409,6 +412,25 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setTimeout(() => inputRef.current?.focus(), 0);
   }, [isLoading, currentFile, session, upload, mention]);
 
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    if (e.dataTransfer.types.includes('text/mindos-path')) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+      setIsDragOver(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback(() => setIsDragOver(false), []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const filePath = e.dataTransfer.getData('text/mindos-path');
+    if (filePath && !attachedFiles.includes(filePath)) {
+      setAttachedFiles(prev => [...prev, filePath]);
+    }
+  }, [attachedFiles]);
+
   const handleLoadSession = useCallback((id: string) => {
     session.loadSession(id);
     setShowHistory(false);
@@ -430,7 +452,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           <div className="absolute top-2 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full bg-muted-foreground/20 md:hidden" />
         )}
         <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <Sparkles size={isPanel ? 14 : 15} style={{ color: 'var(--amber)' }} />
+          <Sparkles size={isPanel ? 14 : 15} className="text-[var(--amber)]" />
           <span className={isPanel ? 'font-display text-xs uppercase tracking-wider text-muted-foreground' : 'font-display'}>
             {isPanel ? 'MindOS Agent' : t.ask.title}
           </span>
@@ -489,8 +511,15 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
 
       {/* Input area — panel: fixed-height shell + top drag handle (persisted); modal: simple block */}
       <div
-        className={cn('shrink-0 border-t border-border', isPanel && 'flex flex-col overflow-hidden bg-card')}
+        className={cn(
+          'shrink-0 border-t border-border',
+          isPanel && 'flex flex-col overflow-hidden bg-card',
+          isDragOver && 'ring-2 ring-[var(--amber)] ring-inset bg-[var(--amber-dim)]',
+        )}
         style={isPanel ? { height: panelComposerHeight } : undefined}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
       >
         {isPanel ? (
           <div
@@ -514,7 +543,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           </div>
         ) : null}
 
-        <div className={cn(isPanel && 'flex min-h-0 flex-1 flex-col overflow-hidden')}>
+        <div className={cn(isPanel && 'flex min-h-0 flex-1 flex-col overflow-y-auto')}>
           {attachedFiles.length > 0 && (
             <div className={cn('shrink-0', isPanel ? 'px-3 pt-2 pb-1' : 'px-4 pt-2.5 pb-1')}>
               <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>

package/app/components/ask/FileChip.tsx

@@ -21,6 +21,7 @@ export default function FileChip({ path, onRemove, variant = 'kb' }: FileChipPro
       <button
         type="button"
         onClick={onRemove}
+        aria-label={`Remove ${name}`}
         className="text-muted-foreground hover:text-foreground ml-0.5 shrink-0"
       >
         <X size={10} />

package/app/components/ask/MentionPopover.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useRef } from 'react';
 import { FileText, Table } from 'lucide-react';
 
 interface MentionPopoverProps {
@@ -9,10 +10,20 @@ interface MentionPopoverProps {
 }
 
 export default function MentionPopover({ results, selectedIndex, onSelect }: MentionPopoverProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = listRef.current;
+    if (!container) return;
+    const selected = container.children[selectedIndex] as HTMLElement | undefined;
+    selected?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
   if (results.length === 0) return null;
 
   return (
     <div className="mx-4 mb-1 border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+      <div ref={listRef} className="max-h-[240px] overflow-y-auto">
       {results.map((f, idx) => {
         const name = f.split('/').pop() ?? f;
         const isCsv = name.endsWith('.csv');
@@ -42,7 +53,8 @@ export default function MentionPopover({ results, selectedIndex, onSelect }: Men
           </button>
         );
       })}
-      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-2xs text-muted-foreground/50">
+      </div>
+      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-2xs text-muted-foreground/50 shrink-0">
         <span>↑↓ navigate</span>
         <span>↵ select</span>
         <span>ESC dismiss</span>

package/app/components/ask/MessageList.tsx

@@ -63,7 +63,7 @@ function AssistantMessageWithParts({ message, isStreaming }: { message: Message;
       })}
       {showTrailingSpinner && (
         <div className="flex items-center gap-2 py-1 mt-1">
-          <Loader2 size={12} className="animate-spin" style={{ color: 'var(--amber)' }} />
+          <Loader2 size={12} className="animate-spin text-[var(--amber)]" />
           <span className="text-xs text-muted-foreground animate-pulse">Executing tool…</span>
         </div>
       )}
@@ -137,16 +137,14 @@ export default function MessageList({
         <div key={i} className={`flex gap-3 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
           {m.role === 'assistant' && (
             <div
-              className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-0.5"
-              style={{ background: 'var(--amber-dim)' }}
+              className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-0.5 bg-[var(--amber-dim)]"
             >
-              <Sparkles size={12} style={{ color: 'var(--amber)' }} />
+              <Sparkles size={12} className="text-[var(--amber)]" />
             </div>
           )}
           {m.role === 'user' ? (
             <div
-              className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap"
-              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+              className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)]"
             >
               {m.content}
             </div>
@@ -168,7 +166,7 @@ export default function MessageList({
                 </>
               ) : isLoading && i === messages.length - 1 ? (
                 <div className="flex items-center gap-2 py-1">
-                  <Loader2 size={14} className="animate-spin" style={{ color: 'var(--amber)' }} />
+                  <Loader2 size={14} className="animate-spin text-[var(--amber)]" />
                   <span className="text-xs text-muted-foreground animate-pulse">
                     {loadingPhase === 'connecting'
                       ? labels.connecting

package/app/components/ask/ToolCallBlock.tsx

@@ -56,7 +56,7 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
   return (
     <div className={`my-1 rounded-md border text-xs font-mono ${
       isDestructive
-        ? 'border-amber-500/30 bg-amber-500/5'
+        ? 'border-[var(--amber)]/30 bg-[var(--amber)]/5'
         : 'border-border/50 bg-muted/30'
     }`}>
       <button
@@ -65,13 +65,13 @@ export default function ToolCallBlock({ part }: { part: ToolCallPart }) {
         className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/50 transition-colors rounded-md"
       >
         {expanded ? <ChevronDown size={12} className="shrink-0 text-muted-foreground" /> : <ChevronRight size={12} className="shrink-0 text-muted-foreground" />}
-        {isDestructive && <AlertTriangle size={11} className="shrink-0 text-amber-500" />}
+        {isDestructive && <AlertTriangle size={11} className="shrink-0 text-[var(--amber)]" />}
         <span>{icon}</span>
-        <span className={`font-medium ${isDestructive ? 'text-amber-600 dark:text-amber-400' : 'text-foreground'}`}>{part.toolName}</span>
+        <span className={`font-medium ${isDestructive ? 'text-[var(--amber)]' : 'text-foreground'}`}>{part.toolName}</span>
         <span className="text-muted-foreground truncate flex-1">({inputSummary})</span>
         <span className="shrink-0 ml-auto">
           {part.state === 'pending' || part.state === 'running' ? (
-            <Loader2 size={12} className="animate-spin text-amber-500" />
+            <Loader2 size={12} className="animate-spin text-[var(--amber)]" />
           ) : part.state === 'done' ? (
             <CheckCircle2 size={12} className="text-success" />
           ) : (

package/app/components/changes/ChangesBanner.tsx

@@ -88,8 +88,7 @@ export default function ChangesBanner() {
       >
         <div className="flex items-start gap-2.5">
           <span
-            className="inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--amber)]"
-            style={{ background: 'color-mix(in srgb, var(--amber) 18%, transparent)' }}
+            className="inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--amber)] bg-[var(--amber-subtle)]"
           >
             <History size={14} />
           </span>

package/app/components/echo/EchoHero.tsx

@@ -1,55 +1,41 @@
 'use client';
 
-import Link from 'next/link';
+import type { ReactNode } from 'react';
 
 /**
- * Echo page hero: kicker, minimal breadcrumb (parent only — h1 holds the section title),
- * lead. Avoids repeating the current segment name in both breadcrumb and h1.
+ * Echo page hero: kicker, h1, lead, and optional embedded children (e.g. segment nav).
+ * The accent bar highlights the text zone; children sit below it inside the card.
  */
 export function EchoHero({
-  breadcrumbNav,
-  parentHref,
-  parent,
   heroKicker,
   pageTitle,
   lead,
   titleId,
+  children,
 }: {
-  breadcrumbNav: string;
-  parentHref: string;
-  parent: string;
   heroKicker: string;
   pageTitle: string;
   lead: string;
   titleId: string;
+  children?: ReactNode;
 }) {
   return (
-    <header className="relative overflow-hidden rounded-xl border border-border bg-card px-5 py-6 shadow-sm sm:px-8 sm:py-8">
+    <header className="relative overflow-hidden rounded-xl border border-border bg-card px-5 pb-5 pt-6 shadow-sm sm:px-8 sm:pb-6 sm:pt-8">
       <div
-        className="absolute bottom-5 left-0 top-5 w-0.5 rounded-full bg-[var(--amber)] sm:bottom-6 sm:top-6"
+        className="absolute left-0 top-5 w-[3px] rounded-full bg-[var(--amber)] sm:top-6"
+        style={{ bottom: children ? '40%' : '1.25rem' }}
         aria-hidden
       />
       <div className="relative pl-4 sm:pl-5">
-        <p className="mb-3 font-sans text-2xs font-semibold uppercase tracking-[0.2em] text-[var(--amber)]">
+        <p className="mb-4 font-sans text-2xs font-semibold uppercase tracking-[0.2em] text-[var(--amber)]">
           {heroKicker}
         </p>
-        <nav aria-label={breadcrumbNav} className="mb-5 font-sans text-sm">
-          <ol className="m-0 list-none p-0">
-            <li>
-              <Link
-                href={parentHref}
-                className="text-muted-foreground transition-colors duration-150 hover:text-[var(--amber)] focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                {parent}
-              </Link>
-            </li>
-          </ol>
-        </nav>
         <h1 id={titleId} className="font-display 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>
       </div>
+      {children}
     </header>
   );
 }