@geminilight/mindos 0.5.63 → 0.5.64

package/app/components/agents/AgentsSkillsSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { ChevronDown, ChevronRight, Search } from 'lucide-react';
+import { Search } from 'lucide-react';
 import { Toggle } from '@/components/settings/Primitives';
 import type { McpContextValue } from '@/hooks/useMcpData';
 import type { AgentBuckets, SkillSourceFilter } from './agents-content-model';
@@ -15,12 +15,15 @@ export default function AgentsSkillsSection({
   copy: {
     title: string;
     capabilityGroups: string;
+    tabs: {
+      manage: string;
+      matrix: string;
+    };
     searchPlaceholder: string;
     sourceAll: string;
     sourceBuiltin: string;
     sourceUser: string;
     emptyGroup: string;
-    matrixToggle: string;
     groupLabels: Record<'research' | 'coding' | 'docs' | 'ops' | 'memory', string>;
   };
   mcp: McpContextValue;
@@ -28,72 +31,70 @@ export default function AgentsSkillsSection({
 }) {
   const [query, setQuery] = useState('');
   const [source, setSource] = useState<SkillSourceFilter>('all');
-  const [matrixOpen, setMatrixOpen] = useState(false);
+  const [view, setView] = useState<'manage' | 'matrix'>('manage');
 
   const filtered = useMemo(() => filterSkills(mcp.skills, query, source), [mcp.skills, query, source]);
   const grouped = useMemo(() => groupSkillsByCapability(filtered), [filtered]);
   const knownAgents = useMemo(() => [...buckets.connected, ...buckets.detected, ...buckets.notFound], [buckets]);
 
   return (
-    <section role="tabpanel" id="agents-panel-skills" aria-labelledby="agents-tab-skills" className="rounded-lg border border-border bg-card p-4 space-y-4">
-      <div>
+    <section className="rounded-lg border border-border bg-card p-4 space-y-4">
+      <div className="flex items-center justify-between gap-3">
         <h2 className="text-sm font-medium text-foreground mb-1">{copy.title}</h2>
-        <p className="text-xs text-muted-foreground">{copy.capabilityGroups}</p>
-      </div>
-
-      <div className="flex flex-col md:flex-row gap-2">
-        <label className="relative flex-1">
-          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <input
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder={copy.searchPlaceholder}
-            className="w-full h-9 rounded-md border border-border bg-background pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          />
-        </label>
         <div className="flex items-center gap-1 rounded-md border border-border p-1 bg-background">
-          <SourceFilterButton active={source === 'all'} label={copy.sourceAll} onClick={() => setSource('all')} />
-          <SourceFilterButton active={source === 'builtin'} label={copy.sourceBuiltin} onClick={() => setSource('builtin')} />
-          <SourceFilterButton active={source === 'user'} label={copy.sourceUser} onClick={() => setSource('user')} />
+          <SectionTabButton active={view === 'manage'} label={copy.tabs.manage} onClick={() => setView('manage')} />
+          <SectionTabButton active={view === 'matrix'} label={copy.tabs.matrix} onClick={() => setView('matrix')} />
         </div>
       </div>
+      <p className="text-xs text-muted-foreground">{copy.capabilityGroups}</p>
 
-      <div className="space-y-4">
-        {Object.entries(grouped).map(([groupKey, skills]) => (
-          <div key={groupKey} className="rounded-md border border-border p-3">
-            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
-              {copy.groupLabels[groupKey as keyof typeof copy.groupLabels]} ({skills.length})
+      {view === 'manage' ? (
+        <>
+          <div className="flex flex-col md:flex-row gap-2">
+            <label className="relative flex-1">
+              <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+              <input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={copy.searchPlaceholder}
+                className="w-full h-9 rounded-md border border-border bg-background pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+            </label>
+            <div className="flex items-center gap-1 rounded-md border border-border p-1 bg-background">
+              <SourceFilterButton active={source === 'all'} label={copy.sourceAll} onClick={() => setSource('all')} />
+              <SourceFilterButton active={source === 'builtin'} label={copy.sourceBuiltin} onClick={() => setSource('builtin')} />
+              <SourceFilterButton active={source === 'user'} label={copy.sourceUser} onClick={() => setSource('user')} />
             </div>
-            {skills.length === 0 ? (
-              <p className="text-xs text-muted-foreground">{copy.emptyGroup}</p>
-            ) : (
-              <div className="space-y-1.5">
-                {skills.map((skill) => (
-                  <div key={skill.name} className="flex items-center justify-between gap-2">
-                    <div className="min-w-0">
-                      <p className="text-sm text-foreground truncate">{skill.name}</p>
-                      <p className="text-2xs text-muted-foreground">{skill.source === 'builtin' ? copy.sourceBuiltin : copy.sourceUser}</p>
-                    </div>
-                    <Toggle size="sm" checked={skill.enabled} onChange={(v) => void mcp.toggleSkill(skill.name, v)} />
+          </div>
+
+          <div className="space-y-4">
+            {Object.entries(grouped).map(([groupKey, skills]) => (
+              <div key={groupKey} className="rounded-md border border-border p-3">
+                <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+                  {copy.groupLabels[groupKey as keyof typeof copy.groupLabels]} ({skills.length})
+                </div>
+                {skills.length === 0 ? (
+                  <p className="text-xs text-muted-foreground">{copy.emptyGroup}</p>
+                ) : (
+                  <div className="space-y-1.5">
+                    {skills.map((skill) => (
+                      <div key={skill.name} className="flex items-center justify-between gap-2">
+                        <div className="min-w-0">
+                          <p className="text-sm text-foreground truncate">{skill.name}</p>
+                          <p className="text-2xs text-muted-foreground">{skill.source === 'builtin' ? copy.sourceBuiltin : copy.sourceUser}</p>
+                        </div>
+                        <Toggle size="sm" checked={skill.enabled} onChange={(v) => void mcp.toggleSkill(skill.name, v)} />
+                      </div>
+                    ))}
                   </div>
-                ))}
+                )}
               </div>
-            )}
+            ))}
           </div>
-        ))}
-      </div>
-
-      <div className="rounded-md border border-border bg-background p-3">
-        <button
-          type="button"
-          onClick={() => setMatrixOpen((v) => !v)}
-          className="w-full flex items-center justify-between text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
-        >
-          <span>{copy.matrixToggle}</span>
-          {matrixOpen ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
-        </button>
-        {matrixOpen && (
-          <div className="mt-3 overflow-x-auto">
+        </>
+      ) : (
+        <div className="rounded-md border border-border bg-background p-3">
+          <div className="overflow-x-auto">
             <table className="w-full text-xs">
               <thead>
                 <tr className="border-b border-border">
@@ -117,8 +118,8 @@ export default function AgentsSkillsSection({
               </tbody>
             </table>
           </div>
-        )}
-      </div>
+        </div>
+      )}
     </section>
   );
 }
@@ -144,3 +145,25 @@ function SourceFilterButton({
     </button>
   );
 }
+
+function SectionTabButton({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-2.5 h-7 rounded text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+        active ? 'bg-[var(--amber-dim)] text-[var(--amber)]' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}

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

@@ -4,6 +4,7 @@ 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 AgentStatusFilter = 'all' | 'connected' | 'detected' | 'notFound';
 
 export interface RiskItem {
   id: string;
@@ -78,3 +79,18 @@ export function filterSkills(skills: SkillInfo[], query: string, source: SkillSo
     return haystack.includes(q);
   });
 }
+
+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);
+  });
+}

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,90 @@ 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)]"
+            style={{ background: 'color-mix(in srgb, var(--amber) 18%, transparent)' }}
+          >
+            <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>

package/app/components/changes/ChangesContentPage.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { ChevronDown, ChevronRight, History, RefreshCw } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
 import { collapseDiffContext, buildLineDiff } from './line-diff';
 
 interface ChangeEvent {
@@ -28,18 +29,22 @@ interface ListPayload {
   events: ChangeEvent[];
 }
 
-function relativeTime(ts: string): string {
+function relativeTime(ts: string, t: ReturnType<typeof useLocale>['t']): string {
   const delta = Date.now() - new Date(ts).getTime();
   const mins = Math.floor(delta / 60000);
-  if (mins < 1) return 'just now';
-  if (mins < 60) return `${mins}m ago`;
+  if (mins < 1) return t.changes.relativeTime.justNow;
+  if (mins < 60) return t.changes.relativeTime.minutesAgo(mins);
   const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
-  return `${Math.floor(hours / 24)}d ago`;
+  if (hours < 24) return t.changes.relativeTime.hoursAgo(hours);
+  return t.changes.relativeTime.daysAgo(Math.floor(hours / 24));
 }
 
 export default function ChangesContentPage({ initialPath = '' }: { initialPath?: string }) {
+  const { t } = useLocale();
   const [pathFilter, setPathFilter] = useState(initialPath);
+  const [sourceFilter, setSourceFilter] = useState<'all' | 'agent' | 'user' | 'system'>('all');
+  const [opFilter, setOpFilter] = useState<string>('all');
+  const [queryFilter, setQueryFilter] = useState('');
   const [events, setEvents] = useState<ChangeEvent[]>([]);
   const [summary, setSummary] = useState<SummaryPayload>({ unreadCount: 0, totalCount: 0 });
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
@@ -50,9 +55,12 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
     setLoading(true);
     setError(null);
     try {
-      const listUrl = pathFilter
-        ? `/api/changes?op=list&limit=80&path=${encodeURIComponent(pathFilter)}`
-        : '/api/changes?op=list&limit=80';
+      const params = new URLSearchParams({ op: 'list', limit: '120' });
+      if (pathFilter.trim()) params.set('path', pathFilter.trim());
+      if (sourceFilter !== 'all') params.set('source', sourceFilter);
+      if (opFilter !== 'all') params.set('event_op', opFilter);
+      if (queryFilter.trim()) params.set('q', queryFilter.trim());
+      const listUrl = `/api/changes?${params.toString()}`;
       const [list, summaryData] = await Promise.all([
         apiFetch<ListPayload>(listUrl),
         apiFetch<SummaryPayload>('/api/changes?op=summary'),
@@ -64,7 +72,7 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
     } finally {
       setLoading(false);
     }
-  }, [pathFilter]);
+  }, [pathFilter, sourceFilter, opFilter, queryFilter]);
 
   useEffect(() => {
     void fetchData();
@@ -79,55 +87,116 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
     await fetchData();
   }, [fetchData]);
 
-  const eventCountLabel = useMemo(() => `${events.length} event${events.length === 1 ? '' : 's'}`, [events.length]);
+  const eventCountLabel = useMemo(() => t.changes.eventsCount(events.length), [events.length, t]);
+  const opOptions = useMemo(() => {
+    const ops = Array.from(new Set(events.map((e) => e.op))).sort((a, b) => a.localeCompare(b));
+    if (opFilter !== 'all' && !ops.includes(opFilter)) ops.unshift(opFilter);
+    return ['all', ...ops];
+  }, [events, opFilter]);
+
+  const sourceLabel = useCallback((source: ChangeEvent['source']) => {
+    if (source === 'agent') return t.changes.filters.agent;
+    if (source === 'user') return t.changes.filters.user;
+    return t.changes.filters.system;
+  }, [t]);
 
   return (
     <div className="min-h-screen">
-      <div className="sticky top-[52px] md:top-0 z-20 border-b border-border px-4 md:px-6 py-2.5 bg-background">
-        <div className="content-width xl:mr-[220px] flex items-center justify-between gap-3">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2 text-sm font-medium text-foreground font-display">
-              <History size={15} />
-              Content changes
+      <div className="px-4 md:px-6 pt-6 md:pt-8">
+        <div className="content-width xl:mr-[220px] rounded-xl border border-border bg-card px-4 py-3 md:px-5 md:py-4">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground font-display">
+                <History size={15} />
+                {t.changes.title}
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t.changes.subtitle}
+              </p>
+              <div className="mt-2 flex items-center gap-2 text-xs">
+                <span className="rounded-full bg-muted px-2 py-0.5 text-muted-foreground">{eventCountLabel}</span>
+                <span className="rounded-full bg-[var(--amber-dim)] px-2 py-0.5 text-[var(--amber)]">
+                  {t.changes.unreadCount(summary.unreadCount)}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => void fetchData()}
+                className="px-2.5 py-1.5 rounded-md text-xs font-medium bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <span className="inline-flex items-center gap-1"><RefreshCw size={12} /> {t.changes.refresh}</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => void markSeen()}
+                className="px-2.5 py-1.5 rounded-md 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 className="text-xs text-muted-foreground mt-1">{eventCountLabel} · {summary.unreadCount} unread</div>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void fetchData()}
-              className="px-2.5 py-1.5 rounded-md text-xs font-medium bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              <span className="inline-flex items-center gap-1"><RefreshCw size={12} /> Refresh</span>
-            </button>
-            <button
-              type="button"
-              onClick={() => void markSeen()}
-              className="px-2.5 py-1.5 rounded-md text-xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              Mark seen
-            </button>
           </div>
         </div>
       </div>
 
-      <div className="px-4 md:px-6 py-6 md:py-8">
+      <div className="px-4 md:px-6 py-4 md:py-6">
         <div className="content-width xl:mr-[220px] space-y-3">
           <div className="rounded-lg border border-border bg-card p-3">
-            <label className="text-xs text-muted-foreground">Filter by file path</label>
-            <input
-              value={pathFilter}
-              onChange={(e) => setPathFilter(e.target.value)}
-              placeholder="e.g. Projects/plan.md"
-              className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            />
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-2.5">
+              <label className="block">
+                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.filePath}</span>
+                <input
+                  value={pathFilter}
+                  onChange={(e) => setPathFilter(e.target.value)}
+                  placeholder={t.changes.filters.filePathPlaceholder}
+                  className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+              </label>
+              <label className="block">
+                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.source}</span>
+                <select
+                  value={sourceFilter}
+                  onChange={(e) => setSourceFilter(e.target.value as 'all' | 'agent' | 'user' | 'system')}
+                  className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <option value="all">{t.changes.filters.all}</option>
+                  <option value="agent">{t.changes.filters.agent}</option>
+                  <option value="user">{t.changes.filters.user}</option>
+                  <option value="system">{t.changes.filters.system}</option>
+                </select>
+              </label>
+              <label className="block">
+                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.operation}</span>
+                <select
+                  value={opFilter}
+                  onChange={(e) => setOpFilter(e.target.value)}
+                  className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {opOptions.map((op) => (
+                    <option key={op} value={op}>
+                      {op === 'all' ? t.changes.filters.operationAll : op}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="block">
+                <span className="text-xs text-muted-foreground font-display">{t.changes.filters.keyword}</span>
+                <input
+                  value={queryFilter}
+                  onChange={(e) => setQueryFilter(e.target.value)}
+                  placeholder={t.changes.filters.keywordPlaceholder}
+                  className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+              </label>
+            </div>
           </div>
 
-          {loading && <p className="text-sm text-muted-foreground">Loading changes...</p>}
+          {loading && <p className="text-sm text-muted-foreground">{t.changes.loading}</p>}
           {error && <p className="text-sm text-error">{error}</p>}
           {!loading && !error && events.length === 0 && (
             <div className="rounded-lg border border-border bg-card p-6 text-center text-sm text-muted-foreground">
-              No content changes yet.
+              {t.changes.empty}
             </div>
           )}
 
@@ -135,35 +204,49 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
             const open = !!expanded[event.id];
             const rows = collapseDiffContext(buildLineDiff(event.before ?? '', event.after ?? ''));
             return (
-              <div key={event.id} className="rounded-lg border border-border bg-card overflow-hidden">
+              <div key={event.id} className="rounded-xl border border-border bg-card overflow-hidden">
                 <button
                   type="button"
                   onClick={() => setExpanded((prev) => ({ ...prev, [event.id]: !prev[event.id] }))}
-                  className="w-full px-3 py-2.5 text-left hover:bg-muted/30 focus-visible:ring-2 focus-visible:ring-ring"
+                  className="w-full px-3 py-3 text-left hover:bg-muted/30 focus-visible:ring-2 focus-visible:ring-ring"
                 >
                   <div className="flex items-start gap-2">
                     <span className="pt-0.5 text-muted-foreground">{open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}</span>
                     <div className="min-w-0 flex-1">
                       <div className="text-sm font-medium text-foreground font-display">{event.summary}</div>
-                      <div className="text-xs text-muted-foreground mt-0.5">
-                        {event.path} · {event.op} · {event.source} · {relativeTime(event.ts)}
+                      <div className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+                        <span
+                          className="rounded-md px-2 py-0.5 font-medium"
+                          style={{
+                            background: 'color-mix(in srgb, var(--amber) 16%, var(--muted))',
+                            color: 'var(--foreground)',
+                            border: '1px solid color-mix(in srgb, var(--amber) 36%, var(--border))',
+                          }}
+                        >
+                          {event.path}
+                        </span>
+                        <span>{event.op}</span>
+                        <span>·</span>
+                        <span>{sourceLabel(event.source)}</span>
+                        <span>·</span>
+                        <span>{relativeTime(event.ts, t)}</span>
                       </div>
                     </div>
                     <Link
                       href={`/view/${event.path.split('/').map(encodeURIComponent).join('/')}`}
-                      className="text-xs text-[var(--amber)] hover:underline"
+                      className="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber)] focus-visible:ring-2 focus-visible:ring-ring hover:opacity-90"
                       onClick={(e) => e.stopPropagation()}
                     >
-                      Open
+                      {t.changes.open}
                     </Link>
                   </div>
                 </button>
 
                 {open && (
-                  <div className="border-t border-border bg-background">
+                  <div className="border-t border-border bg-background/70">
                     {rows.map((row, idx) => {
                       if (row.type === 'gap') {
-                        return <div key={`${event.id}-gap-${idx}`} className="px-3 py-1 text-2xs text-muted-foreground">... {row.count} unchanged lines ...</div>;
+                        return <div key={`${event.id}-gap-${idx}`} className="px-3 py-1 text-2xs text-muted-foreground">{t.changes.unchangedLines(row.count)}</div>;
                       }
                       const prefix = row.type === 'insert' ? '+' : row.type === 'delete' ? '-' : ' ';
                       const color = row.type === 'insert'