@geminilight/mindos 0.6.73 → 0.6.74

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

@@ -1,129 +0,0 @@
-'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

@@ -1,76 +0,0 @@
-'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

@@ -1,37 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-'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

@@ -1,44 +0,0 @@
-'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

@@ -1,35 +0,0 @@
-'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

@@ -1,197 +0,0 @@
-'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

@@ -1,51 +0,0 @@
-'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

@@ -1,57 +0,0 @@
-'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>
-  );
-}