@geminilight/mindos 0.5.63 → 0.5.65

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

@@ -4,6 +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;
@@ -37,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[]> {
@@ -55,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;
 }
@@ -78,3 +83,296 @@ export function filterSkills(skills: SkillInfo[], query: string, source: SkillSo
     return haystack.includes(q);
   });
 }
+
+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);
+}
+
+export function filterAgentsForMcpTable(agents: AgentInfo[], query: string, status: AgentStatusFilter): AgentInfo[] {
+  const q = query.trim().toLowerCase();
+  const byStatus = filterAgentsByStatus(agents, status);
+  if (!q) return byStatus;
+  return byStatus.filter((agent) => {
+    const haystack = `${agent.name} ${agent.key} ${agent.configPath ?? ''}`.toLowerCase();
+    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

@@ -1,8 +1,11 @@
 'use client';
 
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { History, X } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
 
 interface ChangeSummaryPayload {
   unreadCount: number;
@@ -10,6 +13,11 @@ interface ChangeSummaryPayload {
 
 export default function ChangesBanner() {
   const [unreadCount, setUnreadCount] = useState(0);
+  const [dismissedAtCount, setDismissedAtCount] = useState<number | null>(null);
+  const [isRendered, setIsRendered] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const pathname = usePathname();
+  const { t } = useLocale();
 
   useEffect(() => {
     let active = true;
@@ -29,21 +37,89 @@ export default function ChangesBanner() {
     };
   }, []);
 
-  if (unreadCount <= 0) return null;
+  const shouldShow = useMemo(() => {
+    if (unreadCount <= 0) return false;
+    if (pathname?.startsWith('/changes')) return false;
+    if (dismissedAtCount !== null && unreadCount <= dismissedAtCount) return false;
+    return true;
+  }, [dismissedAtCount, pathname, unreadCount]);
+
+  useEffect(() => {
+    const durationMs = 160;
+    if (shouldShow) {
+      setIsRendered(true);
+      const raf = requestAnimationFrame(() => setIsVisible(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    setIsVisible(false);
+    const timer = setTimeout(() => setIsRendered(false), durationMs);
+    return () => clearTimeout(timer);
+  }, [shouldShow]);
+
+  async function handleMarkAllRead() {
+    try {
+      await apiFetch('/api/changes', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ op: 'mark_seen' }),
+      });
+    } catch {
+      // Keep UI resilient; polling will recover server state.
+    } finally {
+      setUnreadCount(0);
+      setDismissedAtCount(0);
+    }
+  }
+
+  if (!isRendered) return null;
 
   return (
-    <div className="sticky top-[52px] md:top-0 z-20 border-b bg-[var(--amber-dim)]" style={{ borderColor: 'color-mix(in srgb, var(--amber) 35%, var(--border))' }}>
-      <div className="px-4 md:px-6 py-2">
-        <div className="content-width xl:mr-[220px] flex items-center justify-between gap-3">
-          <p className="text-xs md:text-sm text-foreground font-display">
-            {unreadCount} content change{unreadCount === 1 ? '' : 's'} detected.
-          </p>
-          <Link
-            href="/changes"
-            className="text-xs md:text-sm text-[var(--amber)] hover:underline focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+    <div
+      className={`fixed right-3 top-[60px] md:right-6 md:top-4 z-30 transition-all duration-150 ease-out ${
+        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-2 scale-[0.98] pointer-events-none'
+      }`}
+    >
+      <div
+        className="rounded-2xl border bg-card/95 backdrop-blur px-3 py-2.5 shadow-lg min-w-[260px] max-w-[350px]"
+        style={{
+          borderColor: 'color-mix(in srgb, var(--amber) 45%, var(--border))',
+          boxShadow: '0 12px 28px color-mix(in srgb, var(--amber) 14%, rgba(0,0,0,.24))',
+        }}
+      >
+        <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)] bg-[var(--amber-subtle)]"
+          >
+            <History size={14} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="text-xs text-foreground font-display whitespace-nowrap">
+              {t.changes.unreadBanner(unreadCount)}
+            </p>
+            <div className="mt-1 flex items-center gap-1.5">
+              <Link
+                href="/changes"
+                className="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium bg-[var(--amber)] text-white focus-visible:ring-2 focus-visible:ring-ring hover:opacity-90"
+              >
+                {t.changes.reviewNow}
+              </Link>
+              <button
+                type="button"
+                onClick={() => void handleMarkAllRead()}
+                className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {t.changes.markAllRead}
+              </button>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => setDismissedAtCount(unreadCount)}
+            aria-label={t.changes.dismiss}
+            className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring"
           >
-            Review changes
-          </Link>
+            <X size={14} />
+          </button>
         </div>
       </div>
     </div>