@geminilight/mindos 0.5.54 → 0.5.55

package/app/app/echo/[segment]/page.tsx

@@ -0,0 +1,15 @@
+import { notFound } from 'next/navigation';
+import { isEchoSegment } from '@/lib/echo-segments';
+import EchoSegmentPageClient from '@/components/echo/EchoSegmentPageClient';
+
+interface PageProps {
+  params: Promise<{ segment: string }>;
+}
+
+export default async function EchoSegmentPage({ params }: PageProps) {
+  const { segment } = await params;
+  if (!isEchoSegment(segment)) {
+    notFound();
+  }
+  return <EchoSegmentPageClient segment={segment} />;
+}

package/app/app/echo/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation';
+import { defaultEchoSegment } from '@/lib/echo-segments';
+
+export default function EchoIndexPage() {
+  redirect(`/echo/${defaultEchoSegment()}`);
+}

package/app/components/RightAskPanel.tsx

@@ -40,7 +40,7 @@ export default function RightAskPanel({
   return (
     <aside
       className={`
-        hidden md:flex fixed top-0 right-0 h-screen z-30
+        hidden md:flex fixed top-0 right-0 h-screen z-40
         flex-col bg-card border-l border-border
         transition-transform duration-200 ease-out
         ${open ? 'translate-x-0' : 'translate-x-full pointer-events-none'}
@@ -61,16 +61,19 @@ export default function RightAskPanel({
           </button>
         </div>
       }>
-        <AskContent
-          visible={open}
-          variant="panel"
-          currentFile={open ? currentFile : undefined}
-          initialMessage={initialMessage}
-          onFirstMessage={onFirstMessage}
-          onClose={onClose}
-          askMode={askMode}
-          onModeSwitch={onModeSwitch}
-        />
+        {/* Flex column + min-h-0 so MessageList flex-1 gets a bounded height (fragment children are direct flex items) */}
+        <div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden">
+          <AskContent
+            visible={open}
+            variant="panel"
+            currentFile={open ? currentFile : undefined}
+            initialMessage={initialMessage}
+            onFirstMessage={onFirstMessage}
+            onClose={onClose}
+            askMode={askMode}
+            onModeSwitch={onModeSwitch}
+          />
+        </div>
       </ErrorBoundary>
 
       {/* Drag resize handle — LEFT edge */}

package/app/components/SidebarLayout.tsx

@@ -115,6 +115,13 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return () => cancelAnimationFrame(id);
   }, [pathname]);
 
+  // Deep-link Echo routes: keep left Echo panel aligned with URL
+  useEffect(() => {
+    if (pathname?.startsWith('/echo')) {
+      lp.setActivePanel('echo');
+    }
+  }, [pathname, lp.setActivePanel]);
+
   const handleAgentDetailWidthCommit = useCallback((w: number) => {
     setAgentDetailWidth(w);
     try {

package/app/components/ask/AskContent.tsx

@@ -12,6 +12,7 @@ import MentionPopover from '@/components/ask/MentionPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
 import FileChip from '@/components/ask/FileChip';
 import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
+import { cn } from '@/lib/utils';
 
 interface AskContentProps {
   /** Controls visibility — 'open' for modal, 'active' for panel */
@@ -414,8 +415,15 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         </form>
       </div>
 
-      {/* Footer hints */}
-      <div className={`${isPanel ? 'px-3 pb-1.5' : 'hidden md:flex px-4 pb-2'} flex items-center gap-${isPanel ? '2' : '3'} text-${isPanel ? '[10px]' : 'xs'} text-muted-foreground/${isPanel ? '40' : '50'} shrink-0`}>
+      {/* Footer hints — use full class strings so Tailwind JIT includes utilities */}
+      <div
+        className={cn(
+          'flex shrink-0 items-center',
+          isPanel
+            ? 'gap-2 px-3 pb-1.5 text-[10px] text-muted-foreground/40'
+            : 'hidden gap-3 px-4 pb-2 text-xs text-muted-foreground/50 md:flex',
+        )}
+      >
         <span><kbd className="font-mono">↵</kbd> {t.ask.send}</span>
         <span><kbd className="font-mono">@</kbd> {t.ask.attachFile}</span>
         {!isPanel && <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>}

package/app/components/echo/EchoHero.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import Link from 'next/link';
+
+/**
+ * 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.
+ */
+export function EchoHero({
+  breadcrumbNav,
+  parentHref,
+  parent,
+  heroKicker,
+  pageTitle,
+  lead,
+  titleId,
+}: {
+  breadcrumbNav: string;
+  parentHref: string;
+  parent: string;
+  heroKicker: string;
+  pageTitle: string;
+  lead: string;
+  titleId: string;
+}) {
+  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">
+      <div
+        className="absolute bottom-5 left-0 top-5 w-0.5 rounded-full bg-[var(--amber)] sm:bottom-6 sm:top-6"
+        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)]">
+          {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>
+    </header>
+  );
+}

package/app/components/echo/EchoInsightCollapsible.tsx

@@ -0,0 +1,184 @@
+'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';
+
+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-[13px] ' +
+  '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();
+
+  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)]/15 hover:shadow-md">
+      <button
+        id={btnId}
+        type="button"
+        className="flex w-full items-center gap-3 px-5 py-4 text-left transition-colors 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-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--amber-dim)] text-[var(--amber)]"
+          aria-hidden
+        >
+          <Sparkles size={17} 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>
+      {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 ? (
+              <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>
+          {!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>
+      ) : null}
+    </div>
+  );
+}

package/app/components/echo/EchoPageSections.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Library } from 'lucide-react';
+
+export function EchoFactSnapshot({
+  headingId,
+  heading,
+  snapshotBadge,
+  emptyTitle,
+  emptyBody,
+  actions,
+}: {
+  headingId: string;
+  heading: string;
+  snapshotBadge: string;
+  emptyTitle: string;
+  emptyBody: string;
+  /** e.g. continue-in-Agent CTA — inside this card so it is not orphaned between sections */
+  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"
+      aria-labelledby={headingId}
+    >
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex items-start gap-3">
+          <span
+            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} />
+          </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>
+        <span className="font-sans text-2xs font-medium uppercase tracking-wide text-[var(--amber)] sm:mt-0.5 sm:shrink-0 rounded-md bg-[var(--amber-dim)] px-2 py-1">
+          {snapshotBadge}
+        </span>
+      </div>
+      <p className="mt-4 border-t border-border/60 pt-4 font-sans text-sm leading-relaxed text-muted-foreground">
+        {emptyBody}
+      </p>
+      {actions ? (
+        <div className="mt-4 border-t border-border/60 pt-4">{actions}</div>
+      ) : null}
+    </section>
+  );
+}
+
+export function EchoContinuedGroups({
+  draftsLabel,
+  todosLabel,
+  subEmptyHint,
+  footer,
+}: {
+  draftsLabel: string;
+  todosLabel: string;
+  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>
+      <p className="mt-2 font-sans text-2xs leading-relaxed text-muted-foreground">{subEmptyHint}</p>
+    </div>
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-3 sm:grid-cols-2">
+        {cell(draftsLabel)}
+        {cell(todosLabel)}
+      </div>
+      {footer ? <div className="border-t border-border/60 pt-4">{footer}</div> : null}
+    </div>
+  );
+}

package/app/components/echo/EchoSegmentNav.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import Link from 'next/link';
+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(
+  segment: EchoSegment,
+  echo: ReturnType<typeof useLocale>['t']['panels']['echo'],
+): string {
+  switch (segment) {
+    case 'about-you':
+      return echo.aboutYouTitle;
+    case 'continued':
+      return echo.continuedTitle;
+    case 'daily':
+      return echo.dailyEchoTitle;
+    case 'past-you':
+      return echo.pastYouTitle;
+    case 'growth':
+      return echo.intentGrowthTitle;
+  }
+}
+
+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-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]">
+        {ECHO_SEGMENT_ORDER.map((segment) => {
+          const href = ECHO_SEGMENT_HREF[segment];
+          const label = labelForSegment(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-[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',
+                  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="truncate">{label}</span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/app/components/echo/EchoSegmentPageClient.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import type { EchoSegment } from '@/lib/echo-segments';
+import { buildEchoInsightUserPrompt } from '@/lib/echo-insight-prompt';
+import type { Locale } from '@/lib/i18n';
+import { useLocale } from '@/lib/LocaleContext';
+import { openAskModal } from '@/hooks/useAskModal';
+import { EchoHero } from './EchoHero';
+import EchoSegmentNav from './EchoSegmentNav';
+import { EchoInsightCollapsible } from './EchoInsightCollapsible';
+import { EchoContinuedGroups, EchoFactSnapshot } from './EchoPageSections';
+
+const STORAGE_DAILY = 'mindos-echo-daily-line';
+const STORAGE_GROWTH = 'mindos-echo-growth-intent';
+
+function segmentTitle(segment: EchoSegment, echo: ReturnType<typeof useLocale>['t']['panels']['echo']): string {
+  switch (segment) {
+    case 'about-you':
+      return echo.aboutYouTitle;
+    case 'continued':
+      return echo.continuedTitle;
+    case 'daily':
+      return echo.dailyEchoTitle;
+    case 'past-you':
+      return echo.pastYouTitle;
+    case 'growth':
+      return echo.intentGrowthTitle;
+  }
+}
+
+function segmentLead(segment: EchoSegment, p: ReturnType<typeof useLocale>['t']['echoPages']): string {
+  switch (segment) {
+    case 'about-you':
+      return p.aboutYouLead;
+    case 'continued':
+      return p.continuedLead;
+    case 'daily':
+      return p.dailyLead;
+    case 'past-you':
+      return p.pastYouLead;
+    case 'growth':
+      return p.growthLead;
+  }
+}
+
+const fieldLabelClass =
+  'block font-sans text-2xs font-semibold uppercase tracking-wide text-muted-foreground';
+const inputClass =
+  'mt-2 w-full min-h-[5rem] resize-y rounded-lg border border-border bg-background px-3 py-2.5 font-sans text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+const cardSectionClass =
+  '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';
+
+export default function EchoSegmentPageClient({ segment }: { segment: EchoSegment }) {
+  const { t, locale } = useLocale();
+  const p = t.echoPages;
+  const echo = t.panels.echo;
+  const title = segmentTitle(segment, echo);
+  const lead = segmentLead(segment, p);
+  const factsHeadingId = useId();
+  const pageTitleId = 'echo-page-title';
+
+  const [dailyLine, setDailyLine] = useState('');
+  const [growthIntent, setGrowthIntent] = useState('');
+
+  useEffect(() => {
+    try {
+      const d = localStorage.getItem(STORAGE_DAILY);
+      if (d) setDailyLine(d);
+      const g = localStorage.getItem(STORAGE_GROWTH);
+      if (g) setGrowthIntent(g);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const persistDaily = useCallback(() => {
+    try {
+      localStorage.setItem(STORAGE_DAILY, dailyLine);
+    } catch {
+      /* ignore */
+    }
+  }, [dailyLine]);
+
+  const persistGrowth = useCallback(() => {
+    try {
+      localStorage.setItem(STORAGE_GROWTH, growthIntent);
+    } catch {
+      /* ignore */
+    }
+  }, [growthIntent]);
+
+  const openDailyAsk = useCallback(() => {
+    persistDaily();
+    openAskModal(p.dailyAskPrefill(dailyLine), 'user');
+  }, [dailyLine, p, persistDaily]);
+
+  const openSegmentAsk = useCallback(() => {
+    openAskModal(`${p.parent} / ${title}\n\n`, 'user');
+  }, [p.parent, title]);
+
+  const insightUserPrompt = useMemo(
+    () =>
+      buildEchoInsightUserPrompt({
+        locale: locale as Locale,
+        segment,
+        segmentTitle: title,
+        factsHeading: p.factsHeading,
+        emptyTitle: p.emptyFactsTitle,
+        emptyBody: p.emptyFactsBody,
+        continuedDrafts: p.continuedDrafts,
+        continuedTodos: p.continuedTodos,
+        subEmptyHint: p.subEmptyHint,
+        dailyLineLabel: p.dailyLineLabel,
+        dailyLine,
+        growthIntentLabel: p.growthIntentLabel,
+        growthIntent,
+      }),
+    [
+      locale,
+      segment,
+      title,
+      p.factsHeading,
+      p.emptyFactsTitle,
+      p.emptyFactsBody,
+      p.continuedDrafts,
+      p.continuedTodos,
+      p.subEmptyHint,
+      p.dailyLineLabel,
+      dailyLine,
+      p.growthIntentLabel,
+      growthIntent,
+    ],
+  );
+
+  const primaryBtnClass =
+    'inline-flex items-center rounded-lg bg-primary px-4 py-2.5 font-sans text-sm font-medium text-primary-foreground transition-opacity duration-150 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+  const secondaryBtnClass =
+    'inline-flex items-center rounded-lg border border-border bg-background px-4 py-2.5 font-sans text-sm font-medium text-foreground transition-colors duration-150 hover:border-[var(--amber)]/35 hover:bg-[var(--amber-dim)]/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+
+  return (
+    <article
+      className="mx-auto max-w-3xl px-4 py-6 sm:px-6 md:py-11"
+      aria-labelledby={pageTitleId}
+    >
+      <EchoHero
+        breadcrumbNav={p.breadcrumbNav}
+        parentHref="/echo/about-you"
+        parent={p.parent}
+        heroKicker={p.heroKicker}
+        pageTitle={title}
+        lead={lead}
+        titleId={pageTitleId}
+      />
+
+      <EchoSegmentNav activeSegment={segment} />
+
+      <div className="mt-6 space-y-6 sm:mt-8">
+        <EchoFactSnapshot
+          headingId={factsHeadingId}
+          heading={p.factsHeading}
+          snapshotBadge={p.snapshotBadge}
+          emptyTitle={p.emptyFactsTitle}
+          emptyBody={p.emptyFactsBody}
+          actions={
+            segment === 'about-you' ? (
+              <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
+                {p.continueAgent}
+              </button>
+            ) : undefined
+          }
+        />
+        {segment === 'continued' ? (
+          <EchoContinuedGroups
+            draftsLabel={p.continuedDrafts}
+            todosLabel={p.continuedTodos}
+            subEmptyHint={p.subEmptyHint}
+            footer={
+              <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
+                {p.continueAgent}
+              </button>
+            }
+          />
+        ) : null}
+      </div>
+
+      {segment === 'daily' ? (
+        <section className={`${cardSectionClass} mt-6`}>
+          <label htmlFor="echo-daily-line" className={fieldLabelClass}>
+            {p.dailyLineLabel}
+          </label>
+          <textarea
+            id="echo-daily-line"
+            value={dailyLine}
+            onChange={(e) => setDailyLine(e.target.value)}
+            onBlur={persistDaily}
+            rows={3}
+            placeholder={p.dailyLinePlaceholder}
+            className={inputClass}
+          />
+          <div className="mt-4">
+            <button type="button" onClick={openDailyAsk} className={primaryBtnClass}>
+              {p.continueAgent}
+            </button>
+          </div>
+        </section>
+      ) : null}
+
+      {segment === 'growth' ? (
+        <section className={`${cardSectionClass} mt-6`}>
+          <label htmlFor="echo-growth-intent" className={fieldLabelClass}>
+            {p.growthIntentLabel}
+          </label>
+          <textarea
+            id="echo-growth-intent"
+            value={growthIntent}
+            onChange={(e) => setGrowthIntent(e.target.value)}
+            onBlur={persistGrowth}
+            rows={4}
+            placeholder={p.growthIntentPlaceholder}
+            className={`${inputClass} min-h-[6.5rem]`}
+          />
+          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.growthSavedNote}</p>
+          <div className="mt-4 border-t border-border/60 pt-4">
+            <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
+              {p.continueAgent}
+            </button>
+          </div>
+        </section>
+      ) : null}
+
+      {segment === 'past-you' ? (
+        <section className={`${cardSectionClass} mt-6`}>
+          <button
+            type="button"
+            disabled
+            title={p.pastYouDisabledHint}
+            className="inline-flex cursor-not-allowed items-center rounded-lg border border-dashed border-border bg-muted/20 px-4 py-2.5 font-sans text-sm text-muted-foreground opacity-85"
+          >
+            {p.pastYouAnother}
+          </button>
+          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.pastYouDisabledHint}</p>
+          <div className="mt-4 border-t border-border/60 pt-4">
+            <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
+              {p.continueAgent}
+            </button>
+          </div>
+        </section>
+      ) : null}
+
+      <EchoInsightCollapsible
+        title={p.insightTitle}
+        showLabel={p.insightShow}
+        hideLabel={p.insightHide}
+        hint={p.insightHint}
+        generateLabel={p.generateInsight}
+        noAiHint={p.generateInsightNoAi}
+        generatingLabel={p.insightGenerating}
+        errorPrefix={p.insightErrorPrefix}
+        retryLabel={p.insightRetry}
+        userPrompt={insightUserPrompt}
+      />
+    </article>
+  );
+}

package/app/components/panels/EchoPanel.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import type { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
 import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
 import PanelHeader from './PanelHeader';
-import { ComingSoonBadge } from './PanelNavRow';
+import { PanelNavRow } from './PanelNavRow';
 import { useLocale } from '@/lib/LocaleContext';
+import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';
 
 interface EchoPanelProps {
   active: boolean;
@@ -12,69 +14,34 @@ interface EchoPanelProps {
   onMaximize?: () => void;
 }
 
-function EchoPlaceholdSection({
-  icon,
-  title,
-  hint,
-  comingSoonLabel,
-}: {
-  icon: ReactNode;
-  title: string;
-  hint: string;
-  comingSoonLabel: string;
-}) {
-  return (
-    <div className="px-4 py-2.5 border-b border-border/60 last:border-b-0">
-      <div className="flex items-center gap-2.5">
-        <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0 text-muted-foreground">{icon}</span>
-        <span className="text-sm font-medium text-foreground flex-1 text-left">{title}</span>
-        <ComingSoonBadge label={comingSoonLabel} />
-      </div>
-      <p className="text-2xs text-muted-foreground leading-relaxed mt-1.5 pl-9">{hint}</p>
-    </div>
-  );
-}
-
 export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelProps) {
   const { t } = useLocale();
   const e = t.panels.echo;
-  const soon = e.comingSoon;
+  const pathname = usePathname() ?? '';
+
+  const rowBySegment: Record<EchoSegment, { icon: ReactNode; title: string }> = {
+    'about-you': { icon: <UserRound size={14} />, title: e.aboutYouTitle },
+    continued: { icon: <Bookmark size={14} />, title: e.continuedTitle },
+    daily: { icon: <Sun size={14} />, title: e.dailyEchoTitle },
+    'past-you': { icon: <History size={14} />, title: e.pastYouTitle },
+    growth: { icon: <Brain size={14} />, title: e.intentGrowthTitle },
+  };
 
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={e.title} maximized={maximized} onMaximize={onMaximize} />
       <div className="flex-1 overflow-y-auto min-h-0">
-        <div className="py-1">
-          <EchoPlaceholdSection
-            icon={<UserRound size={14} />}
-            title={e.aboutYouTitle}
-            hint={e.aboutYouHint}
-            comingSoonLabel={soon}
-          />
-          <EchoPlaceholdSection
-            icon={<Bookmark size={14} />}
-            title={e.continuedTitle}
-            hint={e.continuedHint}
-            comingSoonLabel={soon}
-          />
-          <EchoPlaceholdSection
-            icon={<Sun size={14} />}
-            title={e.dailyEchoTitle}
-            hint={e.dailyEchoHint}
-            comingSoonLabel={soon}
-          />
-          <EchoPlaceholdSection
-            icon={<History size={14} />}
-            title={e.pastYouTitle}
-            hint={e.pastYouHint}
-            comingSoonLabel={soon}
-          />
-          <EchoPlaceholdSection
-            icon={<Brain size={14} />}
-            title={e.intentGrowthTitle}
-            hint={e.intentGrowthHint}
-            comingSoonLabel={soon}
-          />
+        <div className="flex flex-col py-1">
+          {ECHO_SEGMENT_ORDER.map((segment) => {
+            const row = rowBySegment[segment];
+            const href = ECHO_SEGMENT_HREF[segment];
+            const isActive = pathname === href || pathname.startsWith(`${href}/`);
+            return (
+              <div key={segment} className="border-b border-border/60 last:border-b-0">
+                <PanelNavRow href={href} icon={row.icon} title={row.title} active={isActive} />
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>

package/app/components/panels/PanelNavRow.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from 'react';
 import Link from 'next/link';
 import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 /** Row matching Discover panel nav: icon tile, title, optional badge, chevron. */
 export function PanelNavRow({
@@ -11,34 +12,50 @@ export function PanelNavRow({
   badge,
   href,
   onClick,
+  active,
 }: {
   icon: ReactNode;
   title: string;
   badge?: React.ReactNode;
   href?: string;
   onClick?: () => void;
+  /** When true, row shows selected state (e.g. current Echo segment). */
+  active?: boolean;
 }) {
   const content = (
     <>
-      <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0">{icon}</span>
-      <span className="text-sm font-medium text-foreground flex-1 text-left">{title}</span>
+      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted">{icon}</span>
+      <span className="flex-1 text-left text-sm font-medium text-foreground">{title}</span>
       {badge}
-      <ChevronRight size={14} className="text-muted-foreground shrink-0" />
+      <ChevronRight size={14} className="shrink-0 text-muted-foreground" />
     </>
   );
 
-  const className =
-    'flex items-center gap-3 px-4 py-2.5 hover:bg-muted/50 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm';
+  const showRail = Boolean(active && href);
+
+  const className = cn(
+    'relative flex items-center gap-3 py-2.5 transition-colors duration-150 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    showRail ? 'bg-[var(--amber-dim)]/40 pl-3.5 pr-4 text-foreground' : 'px-4',
+    href && !showRail && 'cursor-pointer hover:bg-muted/50',
+    showRail && 'cursor-default',
+    !href && 'cursor-pointer hover:bg-muted/50',
+  );
 
   if (href) {
     return (
-      <Link href={href} className={className}>
+      <Link href={href} className={className} aria-current={active ? 'page' : undefined}>
+        {showRail ? (
+          <span
+            className="pointer-events-none absolute bottom-[22%] left-0 top-[22%] w-0.5 rounded-r-full bg-[var(--amber)]"
+            aria-hidden
+          />
+        ) : null}
         {content}
       </Link>
     );
   }
   return (
-    <button type="button" onClick={onClick} className={`${className} w-full`}>
+    <button type="button" onClick={onClick} className={cn(className, 'w-full')}>
       {content}
     </button>
   );

package/app/hooks/useSettingsAiAvailable.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { isAiConfiguredForAsk, type SettingsJsonForAi } from '@/lib/settings-ai-client';
+
+export function useSettingsAiAvailable(): { ready: boolean; loading: boolean } {
+  const [ready, setReady] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/settings', { cache: 'no-store' })
+      .then((r) => r.json())
+      .then((d: SettingsJsonForAi) => {
+        if (!cancelled) setReady(isAiConfiguredForAsk(d));
+      })
+      .catch(() => {
+        if (!cancelled) setReady(false);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { ready, loading };
+}

package/app/lib/echo-insight-prompt.ts

@@ -0,0 +1,44 @@
+import type { EchoSegment } from '@/lib/echo-segments';
+
+export function buildEchoInsightUserPrompt(opts: {
+  locale: 'en' | 'zh';
+  segment: EchoSegment;
+  segmentTitle: string;
+  factsHeading: string;
+  emptyTitle: string;
+  emptyBody: string;
+  continuedDrafts: string;
+  continuedTodos: string;
+  subEmptyHint: string;
+  dailyLineLabel: string;
+  dailyLine: string;
+  growthIntentLabel: string;
+  growthIntent: string;
+}): string {
+  const lang = opts.locale === 'zh' ? 'Chinese' : 'English';
+  const lines: string[] = [
+    `Echo section: ${opts.segmentTitle}`,
+    `${opts.factsHeading}: ${opts.emptyTitle}`,
+    opts.emptyBody,
+  ];
+
+  if (opts.segment === 'continued') {
+    lines.push(`${opts.continuedDrafts} — ${opts.subEmptyHint}`, `${opts.continuedTodos} — ${opts.subEmptyHint}`);
+  }
+  if (opts.segment === 'daily' && opts.dailyLine.trim()) {
+    lines.push(`${opts.dailyLineLabel}: ${opts.dailyLine.trim()}`);
+  }
+  if (opts.segment === 'growth' && opts.growthIntent.trim()) {
+    lines.push(`${opts.growthIntentLabel}: ${opts.growthIntent.trim()}`);
+  }
+
+  const context = lines.join('\n\n');
+
+  return `You are a reflective assistant inside MindOS Echo (a personal, local-first notes companion). The user is viewing one Echo section. Below is exactly what they see on screen right now—it may be an empty-state placeholder until indexing fills the list.
+
+--- Visible context ---
+${context}
+---
+
+Write a short insight in ${lang} as Markdown (under 220 words). Tone: warm, restrained, "quiet notebook"—not a hype coach. If the context is only generic empty copy, acknowledge that briefly and offer 2–3 reflection prompts instead of inventing files or facts. Do not claim you read their whole library. Prefer answering from this context; avoid unnecessary tool use.`;
+}

package/app/lib/echo-segments.ts

@@ -0,0 +1,27 @@
+/**
+ * Echo content routes: segment slugs and validation.
+ * Keep in sync with `wiki/specs/spec-echo-content-pages.md`.
+ */
+
+export const ECHO_SEGMENT_IDS = ['about-you', 'continued', 'daily', 'past-you', 'growth'] as const;
+
+export type EchoSegment = (typeof ECHO_SEGMENT_IDS)[number];
+
+export const ECHO_SEGMENT_ORDER: readonly EchoSegment[] = ECHO_SEGMENT_IDS;
+
+/** App Router paths for each segment (single source for panel + in-page nav). */
+export const ECHO_SEGMENT_HREF: Record<EchoSegment, string> = {
+  'about-you': '/echo/about-you',
+  continued: '/echo/continued',
+  daily: '/echo/daily',
+  'past-you': '/echo/past-you',
+  growth: '/echo/growth',
+};
+
+export function isEchoSegment(value: string): value is EchoSegment {
+  return (ECHO_SEGMENT_IDS as readonly string[]).includes(value);
+}
+
+export function defaultEchoSegment(): EchoSegment {
+  return 'about-you';
+}

package/app/lib/i18n-en.ts

@@ -177,16 +177,10 @@ export const en = {
     echo: {
       title: 'Echo',
       aboutYouTitle: 'Tied to you',
-      aboutYouHint: 'Paths and links in your library that curve back to your name.',
       continuedTitle: 'Still open',
-      continuedHint: 'Drafts, half-written lines, todos you never closed.',
       dailyEchoTitle: 'Daily echo',
-      dailyEchoHint: 'One quiet line for today—no need to open a full chat.',
       pastYouTitle: 'Who you were',
-      pastYouHint: 'Choices and moods you set down at another point on the timeline.',
       intentGrowthTitle: 'Heart & growth',
-      intentGrowthHint: 'What you are steering toward, and how it slowly shifts. Stays on device; you can wipe it anytime.',
-      comingSoon: 'On its way',
     },
     discover: {
       title: 'Discover',
@@ -203,6 +197,45 @@ export const en = {
       tryIt: 'Try',
     },
   },
+  echoPages: {
+    breadcrumbNav: 'Breadcrumb',
+    parent: 'Echo',
+    heroKicker: 'Echo',
+    segmentNavAria: 'Echo sections',
+    snapshotBadge: 'Local · private',
+    factsHeading: 'Snapshot',
+    emptyFactsTitle: 'Nothing here yet',
+    emptyFactsBody:
+      'Structured clues from your library will appear here when indexing is enabled. Data stays on your device.',
+    insightTitle: 'Insight',
+    insightShow: 'Show insight',
+    insightHide: 'Hide insight',
+    insightHint:
+      'When enabled, only the items listed above are sent as context. There is no full-library upload by default.',
+    generateInsight: 'Generate insight',
+    generateInsightNoAi: 'Add an API key under Settings → AI (or set env vars), then refresh this page.',
+    insightGenerating: 'Generating…',
+    insightErrorPrefix: 'Something went wrong:',
+    insightRetry: 'Try again',
+    continueAgent: 'Continue in MindOS Agent',
+    continuedDrafts: 'Drafts',
+    continuedTodos: 'Open loops',
+    subEmptyHint: 'No items in this group yet.',
+    dailyLineLabel: 'A line for today',
+    dailyLinePlaceholder: 'Write one quiet line…',
+    dailyAskPrefill: (line: string) =>
+      `Echo / Daily — reflect on this line:\n\n${line.trim() || '(empty line)'}`,
+    pastYouAnother: 'Draw another moment',
+    pastYouDisabledHint: 'Random sampling arrives in a later update.',
+    growthIntentLabel: 'What you are steering toward',
+    growthIntentPlaceholder: 'Write your current intent…',
+    growthSavedNote: 'Saved on this device.',
+    aboutYouLead: 'Paths and links in your library that curve back to your name.',
+    continuedLead: 'Pick up where you left off.',
+    dailyLead: 'One quiet line for today — no need to open a full chat.',
+    pastYouLead: 'Choices and moods you set down at another point on the timeline.',
+    growthLead: 'What you are steering toward, and how it slowly shifts.',
+  },
   shortcutPanel: {
     title: 'Keyboard Shortcuts',
     navigation: 'Navigation',

package/app/lib/i18n-zh.ts

@@ -201,16 +201,10 @@ export const zh = {
     echo: {
       title: '回响',
       aboutYouTitle: '与你有关',
-      aboutYouHint: '路径与链接里，绕回你名下的那几笔。',
       continuedTitle: '未完待续',
-      continuedHint: '草稿、写到一半的句子、没收口的待办。',
       dailyEchoTitle: '每日回响',
-      dailyEchoHint: '给今天留一行空白；轻到不必为此开一场对话。',
       pastYouTitle: '历史的你',
-      pastYouHint: '在另一个时间刻度上，你写下的选择与心情。',
       intentGrowthTitle: '心向生长',
-      intentGrowthHint: '你在推的方向，以及它怎样慢慢偏转。只存本机，可随时清空。',
-      comingSoon: '随后到来',
     },
     discover: {
       title: '探索',
@@ -227,6 +221,43 @@ export const zh = {
       tryIt: '试试',
     },
   },
+  echoPages: {
+    breadcrumbNav: '面包屑导航',
+    parent: '回响',
+    heroKicker: '回响',
+    segmentNavAria: '回响模块',
+    snapshotBadge: '本地 · 私密',
+    factsHeading: '所见',
+    emptyFactsTitle: '尚无内容',
+    emptyFactsBody: '开启索引后，笔记库中的结构化线索会出现在此。数据仅保存在本机。',
+    insightTitle: '见解',
+    insightShow: '展开见解',
+    insightHide: '收起见解',
+    insightHint: '启用后，仅将上方列表作为上下文发送；默认不会整库上传。',
+    generateInsight: '生成见解',
+    generateInsightNoAi: '请在 设置 → AI 中填写 API Key（或配置环境变量）后刷新本页。',
+    insightGenerating: '生成中…',
+    insightErrorPrefix: '生成失败：',
+    insightRetry: '重试',
+    continueAgent: '在 MindOS Agent 中继续',
+    continuedDrafts: '草稿',
+    continuedTodos: '未收口',
+    subEmptyHint: '这一组里还没有条目。',
+    dailyLineLabel: '今日一行',
+    dailyLinePlaceholder: '写下一行轻量的文字…',
+    dailyAskPrefill: (line: string) =>
+      `回响 / 每日 — 围绕这一行帮我展开：\n\n${line.trim() || '（空行）'}`,
+    pastYouAnother: '再抽一笔',
+    pastYouDisabledHint: '随机抽样将在后续版本提供。',
+    growthIntentLabel: '当前意图',
+    growthIntentPlaceholder: '写下你正在推进的方向…',
+    growthSavedNote: '已保存在本机。',
+    aboutYouLead: '路径与链接里，绕回你名下的那几笔。',
+    continuedLead: '接上上次停下的地方。',
+    dailyLead: '给今天留一行空白；轻到不必为此开一场对话。',
+    pastYouLead: '在另一个时间刻度上，你写下的选择与心情。',
+    growthLead: '你在推的方向，以及它怎样慢慢偏转。',
+  },
   shortcutPanel: {
     title: '快捷键',
     navigation: '导航',

package/app/lib/settings-ai-client.ts

@@ -0,0 +1,26 @@
+/**
+ * Client-side mirror of "can /api/ask run?" using GET /api/settings payload.
+ * Must stay aligned with server `effectiveAiConfig()` provider + key resolution.
+ */
+
+export type SettingsJsonForAi = {
+  ai?: {
+    provider?: string;
+    providers?: {
+      anthropic?: { apiKey?: string };
+      openai?: { apiKey?: string };
+    };
+  };
+  envOverrides?: Partial<Record<'ANTHROPIC_API_KEY' | 'OPENAI_API_KEY', boolean>>;
+};
+
+export function isAiConfiguredForAsk(data: SettingsJsonForAi): boolean {
+  const prov = data.ai?.provider === 'openai' ? 'openai' : 'anthropic';
+  const env = data.envOverrides ?? {};
+  if (prov === 'openai') {
+    const k = data.ai?.providers?.openai?.apiKey;
+    return (typeof k === 'string' && k.length > 0) || !!env.OPENAI_API_KEY;
+  }
+  const k = data.ai?.providers?.anthropic?.apiKey;
+  return (typeof k === 'string' && k.length > 0) || !!env.ANTHROPIC_API_KEY;
+}

package/app/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geminilight/mindos",
-  "version": "0.5.54",
+  "version": "0.5.55",
   "description": "MindOS — Human-Agent Collaborative Mind System. Local-first knowledge base that syncs your mind to all AI Agents via MCP.",
   "keywords": [
     "mindos",