@geminilight/mindos 0.5.52 → 0.5.55

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