@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/echo/DailyEcho/DailyEchoReportDrawer.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+/**
+ * Daily Echo Report Drawer
+ *
+ * Main UI component for displaying generated daily echo reports
+ */
+
+import { X, RotateCw, Loader2 } from 'lucide-react';
+import type { DailyEchoReport } from '@/lib/daily-echo/types';
+import { DailyEchoSnapshotSection } from './sections/DailyEchoSnapshotSection';
+import { DailyEchoThemesSection } from './sections/DailyEchoThemesSection';
+import { DailyEchoAlignmentSection } from './sections/DailyEchoAlignmentSection';
+import { DailyEchoReflectionSection } from './sections/DailyEchoReflectionSection';
+
+interface DailyEchoReportDrawerProps {
+  isOpen: boolean;
+  report: DailyEchoReport | null;
+  isGenerating: boolean;
+  onClose: () => void;
+  onRegenerate: () => void;
+  onContinueAgent: (content: string) => void;
+  locale?: { t: Record<string, any> };
+}
+
+export default function DailyEchoReportDrawer({
+  isOpen,
+  report,
+  isGenerating,
+  onClose,
+  onRegenerate,
+  onContinueAgent,
+  locale,
+}: DailyEchoReportDrawerProps) {
+  const t = locale?.t || {};
+
+  if (!isOpen && !report) return null;
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className={isOpen ? 'fixed inset-0 z-30 overlay-backdrop transition-opacity duration-200' : 'hidden'}
+        onClick={onClose}
+        role="presentation"
+      />
+
+      {/* Drawer */}
+      <div
+        className={`fixed inset-y-0 right-0 z-40 flex w-full max-w-2xl flex-col bg-background border-l border-border shadow-lg transition-transform duration-200 ease-out ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="daily-echo-drawer-title"
+      >
+        {/* Header */}
+        <div className="border-b border-border bg-background px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2
+                id="daily-echo-drawer-title"
+                className="font-display text-lg font-semibold text-foreground"
+              >
+                {t.dailyReportTitle || 'Echo Report'}
+              </h2>
+              {report && (
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t.dailyReportGenerated || 'Generated at'}{' '}
+                  {new Date(report.generatedAt).toLocaleTimeString()}
+                </p>
+              )}
+            </div>
+            <button
+              onClick={onClose}
+              className="rounded-lg p-2 hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              aria-label="Close"
+              type="button"
+            >
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        {isGenerating ? (
+          <div className="flex flex-1 items-center justify-center">
+            <div className="text-center">
+              <Loader2 size={24} className="mx-auto mb-4 animate-spin text-[var(--amber)]" />
+              <p className="text-sm text-muted-foreground">
+                {t.dailyReportGenerating || 'Generating…'}
+              </p>
+            </div>
+          </div>
+        ) : report ? (
+          <div className="flex-1 overflow-y-auto px-6 py-5">
+            <DailyEchoSnapshotSection snapshot={report.snapshot} locale={locale} />
+            {report.themes && report.themes.length > 0 && (
+              <DailyEchoThemesSection themes={report.themes} locale={locale} />
+            )}
+            <DailyEchoAlignmentSection alignment={report.alignment} locale={locale} />
+            {report.reflectionPrompts && report.reflectionPrompts.prompts.length > 0 && (
+              <DailyEchoReflectionSection prompts={report.reflectionPrompts.prompts} locale={locale} />
+            )}
+          </div>
+        ) : null}
+
+        {/* Footer */}
+        {report && (
+          <div className="border-t border-border bg-background px-6 py-4 flex gap-3">
+            <button
+              onClick={() => onContinueAgent(report.alignment.analysis)}
+              className="flex-1 rounded-lg bg-[var(--amber)] text-[var(--amber-foreground)] px-4 py-2.5 text-sm font-medium transition-colors hover:bg-[var(--amber)]/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              type="button"
+            >
+              {t.dailyReportContinueAgent || 'Chat about this'}
+            </button>
+            <button
+              onClick={onRegenerate}
+              className="rounded-lg border border-border px-3 py-2.5 text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              type="button"
+              title="Regenerate report"
+            >
+              <RotateCw size={16} />
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/_standalone/components/echo/DailyEcho/sections/DailyEchoAlignmentSection.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import type { AlignmentAnalysis } from '@/lib/daily-echo/types';
+
+interface DailyEchoAlignmentSectionProps {
+  alignment: AlignmentAnalysis;
+  locale?: { t: Record<string, any> };
+}
+
+export function DailyEchoAlignmentSection({
+  alignment,
+  locale,
+}: DailyEchoAlignmentSectionProps) {
+  const t = locale?.t || {};
+  const score = alignment.alignmentScore;
+  const percentage = Math.round(score);
+
+  let colorClass = 'bg-destructive/25 text-destructive';
+  let barColorClass = 'bg-destructive';
+  let labelText = t.reportAlignmentMisaligned || 'Drifted';
+
+  if (score >= 70) {
+    colorClass = 'bg-success/25 text-success';
+    barColorClass = 'bg-success';
+    labelText = t.reportAlignmentAligned || 'Aligned';
+  } else if (score >= 40) {
+    colorClass = 'bg-[var(--amber)]/25 text-[var(--amber)]';
+    barColorClass = 'bg-[var(--amber)]';
+    labelText = t.reportAlignmentPartial || 'Partial';
+  }
+
+  return (
+    <section className="mb-8">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+        {t.reportAlignmentTitle || 'Alignment'}
+      </h3>
+
+      <div className="rounded-lg border border-border bg-card/50 p-4 space-y-4">
+        {/* Score Display */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium text-foreground">
+              {t.reportAlignmentScore || 'Alignment'}
+            </span>
+            <span className={`inline-flex px-2.5 py-0.5 rounded text-sm font-semibold ${colorClass}`}>
+              {percentage}/100
+            </span>
+          </div>
+
+          {/* Progress Bar */}
+          <div className="w-full h-2 bg-muted rounded-sm overflow-hidden">
+            <div
+              className={`h-full ${barColorClass} transition-all duration-300`}
+              style={{ width: `${percentage}%` }}
+              role="progressbar"
+              aria-valuenow={percentage}
+              aria-valuemin={0}
+              aria-valuemax={100}
+            />
+          </div>
+
+          <p className="text-xs text-muted-foreground mt-1">{labelText}</p>
+        </div>
+
+        {/* Analysis Text */}
+        <div className="text-sm text-muted-foreground leading-relaxed">{alignment.analysis}</div>
+
+        {alignment.reasoning && (
+          <div className="text-xs text-muted-foreground italic border-l-2 border-border pl-3">
+            {alignment.reasoning}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/_standalone/components/echo/DailyEcho/sections/DailyEchoReflectionSection.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+interface DailyEchoReflectionSectionProps {
+  prompts: string[];
+  locale?: { t: Record<string, any> };
+}
+
+export function DailyEchoReflectionSection({
+  prompts,
+  locale,
+}: DailyEchoReflectionSectionProps) {
+  const t = locale?.t || {};
+
+  return (
+    <section className="mb-8">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+        {t.reportReflectionTitle || 'For tomorrow'}
+      </h3>
+
+      <ol className="space-y-3 list-none">
+        {prompts.map((prompt, idx) => (
+          <li
+            key={idx}
+            className="rounded-lg border border-border/75 bg-muted/25 p-4"
+          >
+            <p className="text-sm text-foreground leading-relaxed">
+              <span className="font-semibold text-[var(--amber)] mr-2">
+                {idx + 1}.
+              </span>
+              {prompt}
+            </p>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}

package/_standalone/components/echo/DailyEcho/sections/DailyEchoSnapshotSection.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import type { DailySnapshot } from '@/lib/daily-echo/types';
+
+interface DailyEchoSnapshotSectionProps {
+  snapshot: DailySnapshot;
+  locale?: { t: Record<string, any> };
+}
+
+export function DailyEchoSnapshotSection({
+  snapshot,
+  locale,
+}: DailyEchoSnapshotSectionProps) {
+  const t = locale?.t || {};
+
+  return (
+    <section className="mb-8">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+        {t.reportSnapshotTitle || 'Activity'}
+      </h3>
+      <div className="grid grid-cols-3 gap-3">
+        {[
+          { value: snapshot.filesEdited, label: t.reportSnapshotFilesEdited || 'Files edited' },
+          { value: snapshot.filesCreated, label: t.reportSnapshotFilesCreated || 'Files created' },
+          { value: snapshot.sessionCount, label: t.reportSnapshotSessions || 'Chat sessions' },
+        ].map((stat) => (
+          <div key={stat.label} className="rounded-lg bg-muted/50 p-3 text-center">
+            <div className="text-lg font-semibold text-foreground">{stat.value}</div>
+            <div className="text-xs text-muted-foreground mt-1">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+      <div className="mt-3 rounded-lg bg-muted/25 px-3 py-2.5 text-sm text-muted-foreground">
+        <span className="font-medium text-foreground">{t.reportSnapshotKbGrowth || 'KB growth'}:</span>{' '}
+        {snapshot.kbGrowth}
+      </div>
+    </section>
+  );
+}

package/_standalone/components/echo/DailyEcho/sections/DailyEchoThemesSection.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import type { DailyTheme } from '@/lib/daily-echo/types';
+
+interface DailyEchoThemesSectionProps {
+  themes: DailyTheme[];
+  locale?: { t: Record<string, any> };
+}
+
+export function DailyEchoThemesSection({
+  themes,
+  locale,
+}: DailyEchoThemesSectionProps) {
+  const t = locale?.t || {};
+
+  return (
+    <section className="mb-8">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-4">
+        {t.reportThemesTitle || 'Themes'}
+      </h3>
+      <div className="space-y-3">
+        {themes.map((theme, idx) => (
+          <div
+            key={idx}
+            className="rounded-lg border border-border bg-card/50 p-4 hover:border-[var(--amber)]/25 transition-colors"
+          >
+            <div className="flex items-start justify-between gap-2 mb-2">
+              <div>
+                <h4 className="font-medium text-foreground">{theme.name}</h4>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {theme.fileCount} {t.reportThemeFiles || 'files'} · {theme.percentage}%
+                </p>
+              </div>
+              <span className="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-muted text-muted-foreground whitespace-nowrap">
+                {theme.workType}
+              </span>
+            </div>
+            <p className="text-sm text-muted-foreground leading-relaxed">{theme.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/_standalone/components/echo/EchoHero.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+/**
+ * Echo page hero: 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({
+  pageTitle,
+  lead,
+  titleId,
+  children,
+}: {
+  pageTitle: string;
+  lead: string;
+  titleId: string;
+  children?: ReactNode;
+}) {
+  return (
+    <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 left-0 top-5 w-[3px] rounded-sm bg-[var(--amber)] sm:top-6 ${children ? 'bottom-[40%]' : 'bottom-5'}`}
+        aria-hidden
+      />
+      <div className="relative pl-4 sm:pl-5">
+        <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/_standalone/components/echo/EchoInsightCollapsible.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { ChevronDown, Loader2, Sparkles } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '@/lib/utils';
+import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
+import { useSettingsAiAvailable } from '@/hooks/useSettingsAiAvailable';
+import { useLocale } from '@/lib/stores/locale-store';
+
+const proseInsight =
+  'prose prose-sm prose-panel dark:prose-invert max-w-none text-foreground ' +
+  'prose-p:my-1 prose-p:leading-relaxed ' +
+  'prose-headings:font-semibold prose-headings:my-2 prose-headings:text-sm ' +
+  'prose-ul:my-1 prose-li:my-0.5 prose-ol:my-1 ' +
+  'prose-code:text-[0.8em] prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none ' +
+  'prose-pre:bg-muted prose-pre:text-foreground prose-pre:text-xs ' +
+  'prose-blockquote:border-l-[var(--amber)] prose-blockquote:text-muted-foreground ' +
+  'prose-a:text-[var(--amber)] prose-a:no-underline hover:prose-a:underline ' +
+  'prose-strong:text-foreground prose-strong:font-semibold';
+
+export function EchoInsightCollapsible({
+  title,
+  showLabel,
+  hideLabel,
+  hint,
+  generateLabel,
+  noAiHint,
+  generatingLabel,
+  errorPrefix,
+  retryLabel,
+  userPrompt,
+}: {
+  title: string;
+  showLabel: string;
+  hideLabel: string;
+  hint: string;
+  generateLabel: string;
+  noAiHint: string;
+  generatingLabel: string;
+  errorPrefix: string;
+  retryLabel: string;
+  userPrompt: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [streaming, setStreaming] = useState(false);
+  const [insightMd, setInsightMd] = useState('');
+  const [err, setErr] = useState('');
+  const panelId = useId();
+  const btnId = `${panelId}-btn`;
+  const abortRef = useRef<AbortController | null>(null);
+  const { ready: aiReady, loading: aiLoading } = useSettingsAiAvailable();
+  const { t } = useLocale();
+
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  const runGenerate = useCallback(async () => {
+    abortRef.current?.abort();
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+    setErr('');
+    setInsightMd('');
+    setStreaming(true);
+    try {
+      const res = await fetch('/api/ask', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: [{ role: 'user', content: userPrompt }],
+          maxSteps: 16,
+        }),
+        signal: ctrl.signal,
+      });
+
+      if (!res.ok) {
+        let msg = `HTTP ${res.status}`;
+        try {
+          const j = (await res.json()) as { error?: { message?: string }; message?: string };
+          msg = j?.error?.message ?? j?.message ?? msg;
+        } catch {
+          /* ignore */
+        }
+        throw new Error(msg);
+      }
+
+      if (!res.body) throw new Error('No response body');
+
+      await consumeUIMessageStream(
+        res.body,
+        (msg) => {
+          setInsightMd(msg.content ?? '');
+        },
+        ctrl.signal,
+      );
+    } catch (e) {
+      if (e instanceof Error && e.name === 'AbortError') return;
+      setErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setStreaming(false);
+      abortRef.current = null;
+    }
+  }, [userPrompt]);
+
+  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)]/25 hover:shadow">
+      <button
+        id={btnId}
+        type="button"
+        className="flex w-full items-center gap-3 px-5 py-4 text-left transition-[background-color] duration-200 hover:bg-muted/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((v) => !v)}
+      >
+          <span
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--amber-dim)] text-[var(--amber)]"
+          aria-hidden
+        >
+          <Sparkles size={16} strokeWidth={1.75} />
+        </span>
+        <span className="flex-1 font-sans text-sm font-medium text-foreground">{title}</span>
+        <ChevronDown
+          size={16}
+          className={cn(
+            'shrink-0 text-muted-foreground transition-transform duration-200',
+            open && 'rotate-180',
+          )}
+          aria-hidden
+        />
+        <span className="sr-only">{open ? hideLabel : showLabel}</span>
+      </button>
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={btnId}
+        className={cn(
+          'grid transition-[grid-template-rows] duration-200 ease-out',
+          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div className="overflow-hidden" {...(!open && { inert: true } as React.HTMLAttributes<HTMLDivElement>)}>
+          <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}
+                title={generateDisabled ? t.hints.aiNotConfigured : undefined}
+                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-[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 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              >
+                {streaming ? (
+                  <Loader2 size={16} className="animate-spin shrink-0" aria-hidden />
+                ) : (
+                  <Sparkles size={15} className="shrink-0" aria-hidden />
+                )}
+                {streaming ? generatingLabel : generateLabel}
+              </button>
+              {err ? (
+                <button
+                  type="button"
+                  onClick={runGenerate}
+                  disabled={streaming || !aiReady}
+                  title={streaming || !aiReady ? t.hints.generationInProgress : undefined}
+                  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>
+            {!aiLoading && !aiReady ? (
+              <p className="mt-2 font-sans text-xs 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/50 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>
+      </div>
+    </div>
+  );
+}

package/_standalone/components/echo/EchoPageSections.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Library } from 'lucide-react';
+
+export function EchoFactSnapshot({
+  headingId,
+  heading,
+  emptyTitle,
+  emptyBody,
+  icon,
+  actions,
+}: {
+  headingId: string;
+  heading: string;
+  emptyTitle: string;
+  emptyBody: string;
+  icon?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <section
+      className="rounded-xl border border-border bg-card p-5 shadow-sm sm:p-6"
+      aria-labelledby={headingId}
+    >
+      <div className="flex items-start gap-3">
+        <span
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--amber-dim)] text-[var(--amber)]"
+          aria-hidden
+        >
+          {icon ?? <Library size={16} strokeWidth={1.75} />}
+        </span>
+        <div>
+          <h2
+            id={headingId}
+            className="font-sans text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+          >
+            {heading}
+          </h2>
+          <p className="mt-2 font-sans font-medium text-foreground">{emptyTitle}</p>
+        </div>
+      </div>
+      <p className="mt-4 font-sans text-sm leading-relaxed text-muted-foreground">
+        {emptyBody}
+      </p>
+      {actions ? (
+        <div className="mt-4">{actions}</div>
+      ) : null}
+    </section>
+  );
+}

package/_standalone/components/echo/EchoSegmentNav.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { Footprints, Brain, Eye } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { cn } from '@/lib/utils';
+import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';
+
+function segmentMeta(
+  segment: EchoSegment,
+  echo: ReturnType<typeof useLocale>['t']['panels']['echo'],
+): { label: string; icon: ReactNode } {
+  switch (segment) {
+    case 'imprint':
+      return { label: echo.imprintTitle, icon: <Footprints size={14} /> };
+    case 'growth':
+      return { label: echo.growthTitle, icon: <Brain size={14} /> };
+    case 'self':
+      return { label: echo.selfTitle, icon: <Eye size={14} /> };
+  }
+}
+
+export default function EchoSegmentNav({ activeSegment }: { activeSegment: EchoSegment }) {
+  const { t } = useLocale();
+  const echo = t.panels.echo;
+  const aria = t.echoPages.segmentNavAria;
+
+  return (
+    <nav aria-label={aria} className="mt-5 border-t border-border/50 pt-4 font-sans">
+      <ul className="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-0.5 [scrollbar-width:thin]">
+        {ECHO_SEGMENT_ORDER.map((segment) => {
+          const href = ECHO_SEGMENT_HREF[segment];
+          const { label, icon } = segmentMeta(segment, echo);
+          const isActive = segment === activeSegment;
+          return (
+            <li key={segment} className="snap-start shrink-0">
+              <Link
+                href={href}
+                aria-current={isActive ? 'page' : undefined}
+                className={cn(
+                  'inline-flex min-h-9 max-w-44 items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-[background-color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+                  isActive
+                    ? 'border-[var(--amber)]/50 bg-[var(--amber-dim)]/50 font-medium text-foreground'
+                    : 'border-transparent bg-muted/25 text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+                )}
+              >
+                <span className={cn('shrink-0', isActive ? 'text-foreground' : 'text-muted-foreground')} aria-hidden>{icon}</span>
+                <span className="truncate">{label}</span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}