@geminilight/mindos 0.5.63 → 0.5.65

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'

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>
   );
 }

package/app/components/echo/EchoInsightCollapsible.tsx

@@ -103,7 +103,7 @@ export function EchoInsightCollapsible({
   const generateDisabled = aiLoading || !aiReady || streaming;
 
   return (
-    <div className="mt-10 overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/15 hover:shadow-md">
+    <div className="mt-10 overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/15 hover:shadow">
       <button
         id={btnId}
         type="button"
@@ -129,56 +129,65 @@ export function EchoInsightCollapsible({
         />
         <span className="sr-only">{open ? hideLabel : showLabel}</span>
       </button>
-      {open ? (
-        <div
-          id={panelId}
-          role="region"
-          aria-labelledby={btnId}
-          className="border-t border-border/60 px-5 pb-5 pt-4"
-        >
-          <p className="font-sans text-sm leading-relaxed text-muted-foreground">{hint}</p>
-          <div className="mt-4 flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              disabled={generateDisabled}
-              onClick={runGenerate}
-              className="inline-flex items-center gap-2 rounded-lg bg-[var(--amber)] px-3 py-2 font-sans text-sm font-medium text-white transition-opacity duration-150 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              {streaming ? <Loader2 size={16} className="animate-spin shrink-0" aria-hidden /> : null}
-              {streaming ? generatingLabel : generateLabel}
-            </button>
-            {err ? (
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={btnId}
+        className={cn(
+          'grid transition-[grid-template-rows] duration-250 ease-out',
+          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="border-t border-border/60 px-5 pb-5 pt-4">
+            <p className="font-sans text-sm leading-relaxed text-muted-foreground">{hint}</p>
+            <div className="mt-4 flex flex-wrap items-center gap-2">
               <button
                 type="button"
+                disabled={generateDisabled}
                 onClick={runGenerate}
-                disabled={streaming || !aiReady}
-                className="font-sans text-sm text-[var(--amber)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                className="inline-flex items-center gap-2 rounded-lg bg-[var(--amber)] px-3 py-2 font-sans text-sm font-medium text-[var(--amber-foreground)] transition-opacity duration-150 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
-                {retryLabel}
+                {streaming ? (
+                  <Loader2 size={16} className="animate-spin shrink-0" aria-hidden />
+                ) : (
+                  <Sparkles size={15} className="shrink-0" aria-hidden />
+                )}
+                {streaming ? generatingLabel : generateLabel}
               </button>
-            ) : null}
-          </div>
-          {!aiLoading && !aiReady ? (
-            <p className="mt-2 font-sans text-2xs text-muted-foreground">{noAiHint}</p>
-          ) : null}
-          {err ? (
-            <p className="mt-3 font-sans text-sm text-error" role="alert">
-              {errorPrefix} {err}
-            </p>
-          ) : null}
-          {insightMd ? (
-            <div className={cn(proseInsight, 'mt-4 border-t border-border/60 pt-4')}>
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>{insightMd}</ReactMarkdown>
-              {streaming ? (
-                <span
-                  className="ml-0.5 inline-block h-3.5 w-1 animate-pulse rounded-sm bg-[var(--amber)] align-middle"
-                  aria-hidden
-                />
+              {err ? (
+                <button
+                  type="button"
+                  onClick={runGenerate}
+                  disabled={streaming || !aiReady}
+                  className="font-sans text-sm text-[var(--amber)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                >
+                  {retryLabel}
+                </button>
               ) : null}
             </div>
-          ) : null}
+            {!aiLoading && !aiReady ? (
+              <p className="mt-2 font-sans text-2xs text-muted-foreground">{noAiHint}</p>
+            ) : null}
+            {err ? (
+              <p className="mt-3 font-sans text-sm text-error" role="alert">
+                {errorPrefix} {err}
+              </p>
+            ) : null}
+            {insightMd ? (
+              <div className={cn(proseInsight, 'mt-4 border-t border-border/60 pt-4')}>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{insightMd}</ReactMarkdown>
+                {streaming ? (
+                  <span
+                    className="ml-0.5 inline-block h-3.5 w-1 animate-pulse rounded-sm bg-[var(--amber)] align-middle"
+                    aria-hidden
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
         </div>
-      ) : null}
+      </div>
     </div>
   );
 }

package/app/components/echo/EchoPageSections.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { Library } from 'lucide-react';
+import { Library, FileText, CircleCheck } from 'lucide-react';
 
 export function EchoFactSnapshot({
   headingId,
@@ -9,6 +9,7 @@ export function EchoFactSnapshot({
   snapshotBadge,
   emptyTitle,
   emptyBody,
+  icon,
   actions,
 }: {
   headingId: string;
@@ -16,12 +17,12 @@ export function EchoFactSnapshot({
   snapshotBadge: string;
   emptyTitle: string;
   emptyBody: string;
-  /** e.g. continue-in-Agent CTA — inside this card so it is not orphaned between sections */
+  icon?: ReactNode;
   actions?: ReactNode;
 }) {
   return (
     <section
-      className="rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow-md sm:p-6"
+      className="rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow sm:p-6"
       aria-labelledby={headingId}
     >
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
@@ -30,7 +31,7 @@ export function EchoFactSnapshot({
             className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--amber-dim)] text-[var(--amber)]"
             aria-hidden
           >
-            <Library size={18} strokeWidth={1.75} />
+            {icon ?? <Library size={18} strokeWidth={1.75} />}
           </span>
           <div>
             <h2
@@ -67,9 +68,12 @@ export function EchoContinuedGroups({
   subEmptyHint: string;
   footer?: ReactNode;
 }) {
-  const cell = (label: string) => (
-    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-dashed border-border/80 bg-muted/10 px-4 py-4">
-      <h3 className="font-sans text-sm font-medium text-foreground">{label}</h3>
+  const cell = (label: string, icon: ReactNode) => (
+    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-dashed border-border/80 bg-muted/10 px-4 py-4 transition-colors duration-150 hover:border-[var(--amber)]/25 hover:bg-[var(--amber-dim)]/15">
+      <div className="flex items-center gap-2">
+        <span className="shrink-0 text-muted-foreground" aria-hidden>{icon}</span>
+        <h3 className="font-sans text-sm font-medium text-foreground">{label}</h3>
+      </div>
       <p className="mt-2 font-sans text-2xs leading-relaxed text-muted-foreground">{subEmptyHint}</p>
     </div>
   );
@@ -77,8 +81,8 @@ export function EchoContinuedGroups({
   return (
     <div className="space-y-4">
       <div className="grid gap-3 sm:grid-cols-2">
-        {cell(draftsLabel)}
-        {cell(todosLabel)}
+        {cell(draftsLabel, <FileText size={15} strokeWidth={1.75} />)}
+        {cell(todosLabel, <CircleCheck size={15} strokeWidth={1.75} />)}
       </div>
       {footer ? <div className="border-t border-border/60 pt-4">{footer}</div> : null}
     </div>

package/app/components/echo/EchoSegmentNav.tsx

@@ -1,25 +1,27 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import Link from 'next/link';
+import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { cn } from '@/lib/utils';
 import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';
 
-function labelForSegment(
+function segmentMeta(
   segment: EchoSegment,
   echo: ReturnType<typeof useLocale>['t']['panels']['echo'],
-): string {
+): { label: string; icon: ReactNode } {
   switch (segment) {
     case 'about-you':
-      return echo.aboutYouTitle;
+      return { label: echo.aboutYouTitle, icon: <UserRound size={13} /> };
     case 'continued':
-      return echo.continuedTitle;
+      return { label: echo.continuedTitle, icon: <Bookmark size={13} /> };
     case 'daily':
-      return echo.dailyEchoTitle;
+      return { label: echo.dailyEchoTitle, icon: <Sun size={13} /> };
     case 'past-you':
-      return echo.pastYouTitle;
+      return { label: echo.pastYouTitle, icon: <History size={13} /> };
     case 'growth':
-      return echo.intentGrowthTitle;
+      return { label: echo.intentGrowthTitle, icon: <Brain size={13} /> };
   }
 }
 
@@ -29,11 +31,11 @@ export default function EchoSegmentNav({ activeSegment }: { activeSegment: EchoS
   const aria = t.echoPages.segmentNavAria;
 
   return (
-    <nav aria-label={aria} className="mt-6 font-sans">
-      <ul className="-mx-1 flex snap-x snap-mandatory gap-1.5 overflow-x-auto px-1 pb-1 [scrollbar-width:thin]">
+    <nav aria-label={aria} className="mt-5 border-t border-border/30 pt-4 font-sans">
+      <ul className="flex snap-x snap-mandatory gap-1.5 overflow-x-auto pb-0.5 [scrollbar-width:thin]">
         {ECHO_SEGMENT_ORDER.map((segment) => {
           const href = ECHO_SEGMENT_HREF[segment];
-          const label = labelForSegment(segment, echo);
+          const { label, icon } = segmentMeta(segment, echo);
           const isActive = segment === activeSegment;
           return (
             <li key={segment} className="snap-start shrink-0">
@@ -41,12 +43,13 @@ export default function EchoSegmentNav({ activeSegment }: { activeSegment: EchoS
                 href={href}
                 aria-current={isActive ? 'page' : undefined}
                 className={cn(
-                  'inline-flex min-h-9 max-w-[11rem] items-center rounded-full border px-3 py-1.5 text-sm transition-[background-color,border-color,color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  'inline-flex min-h-9 max-w-[11rem] items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-[background-color,border-color,color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                   isActive
                     ? 'border-[var(--amber)]/45 bg-[var(--amber-dim)]/50 font-medium text-foreground'
                     : 'border-transparent bg-muted/35 text-muted-foreground hover:bg-muted/55 hover:text-foreground',
                 )}
               >
+                <span className="shrink-0" aria-hidden>{icon}</span>
                 <span className="truncate">{label}</span>
               </Link>
             </li>