@notis_ai/cli 0.2.5 → 0.2.6

package/README.md

@@ -105,9 +105,9 @@ Examples:
 
 ### `npx --package @notis_ai/cli@latest -- notis apps verify [dir]`
 
-Headless render smoke each route in a stub-runtime harness.
+Validate every route and the production Store listing contract.
 
-When to use: After notis apps build, before deploy. Catches render-time crashes and missing runtime calls that the build step cannot detect.
+When to use: After notis apps screenshot, before deploy. Catches render-time crashes, missing runtime calls, and incomplete listing media that the build step cannot detect.
 
 Options:
 - `--routes <slugs>` — Comma-separated route slugs. Default: every route in manifest.
@@ -125,23 +125,25 @@ Examples:
 
 ### `npx --package @notis_ai/cli@latest -- notis apps screenshot [dir]`
 
-Capture listing screenshots of each route via the headless harness.
+Capture configured listing route/scenario states via the headless harness.
 
-When to use: Generate metadata/screenshot-N.png for the App Store listing. Apps are icon-led (like Raycast) — there is no cover image, only these screenshots. Run before notis apps verify / deploy / publish.
+When to use: Generate the 3–6 declared metadata/screenshot-N.png files for the App Store listing. Apps are icon-led (like Raycast) — there is no cover image, only these screenshots. Each screenshot may set a focus selector to remove empty canvas and a light or dark theme that also controls its Store frame. Run before notis apps verify / deploy / publish.
 
 Options:
-- `--routes <slugs>` — Comma-separated route slugs. Default: every route in manifest.
+- `--routes <slugs>` — Comma-separated route slugs. Default: every configured screenshot state.
 - `--port <n>` — Loopback port. Default: auto-pick.
 - `--width <px>` — Viewport width. Default: 2000.
 - `--height <px>` — Viewport height. Default: 1250 (16:10).
 - `--output-dir <dir>` — Where to write screenshot-N.png. Default: metadata/.
 - `--mode <mode>` — stub | live. Default stub. Live renders against real data via the CLI JWT (requires a linked app), so screenshots show actual content instead of empty states.
+- `--raw` — Write the unframed harness capture instead of the default Store presentation.
 - `--skip-build` — Skip notis apps build; reuse existing .notis/output/.
 
 Examples:
-- `npx --package @notis_ai/cli@latest -- notis apps screenshot`
+- `npx --package @notis_ai/cli@latest -- notis apps screenshot  # honors notis.config.ts screenshot scenarios`
 - `npx --package @notis_ai/cli@latest -- notis apps screenshot --routes home,history`
 - `npx --package @notis_ai/cli@latest -- notis apps screenshot --mode live  # populated screenshots from real data`
+- `npx --package @notis_ai/cli@latest -- notis apps screenshot --raw  # diagnostic capture without Store framing`
 
 ### `npx --package @notis_ai/cli@latest -- notis apps link <app-id> [dir]`
 
@@ -184,6 +186,20 @@ Examples:
 - `npx --package @notis_ai/cli@latest -- notis apps deploy --app-id abc123`
 - `npx --package @notis_ai/cli@latest -- notis apps deploy --direct`
 
+### `npx --package @notis_ai/cli@latest -- notis apps publish [dir]`
+
+Submit the deployed app for Store review.
+
+When to use: After the user explicitly confirms the App Details page and Store listing are ready. Requires the current local project to match the latest deployed version.
+
+Options:
+- `--app-id <id>` — Override linked app ID.
+- `--confirm-ready` — Confirm the user approved the current App Details page for Store submission.
+
+Examples:
+- `npx --package @notis_ai/cli@latest -- notis apps publish --confirm-ready`
+- `npx --package @notis_ai/cli@latest -- notis apps publish ./my-app --confirm-ready`
+
 ### `npx --package @notis_ai/cli@latest -- notis apps doctor [dir]`
 
 Check project health and readiness.
@@ -265,13 +281,19 @@ Examples:
 
 ### `npx --package @notis_ai/cli@latest -- notis tools link <toolkit>`
 
-Get the URL to connect an integration toolkit.
+Connect or reconnect an integration toolkit.
 
-When to use: Use this when a tool requires authentication with an external service.
+When to use: Use this when a tool requires authentication or an active connection must be replaced.
+
+Options:
+- `--reconnect` — Replace the existing account instead of adding another connection.
+- `--connection-id <id>` — Exact connection id to replace when multiple accounts exist.
+- `--label <label>` — Account label for a new or replacement connection.
+- `--credentials <json>` — Credential JSON object, @file path, or - for stdin. Prefer stdin so secrets do not enter shell history.
 
 Examples:
 - `npx --package @notis_ai/cli@latest -- notis tools link github`
-- `npx --package @notis_ai/cli@latest -- notis tools link gmail --json`
+- `npx --package @notis_ai/cli@latest -- notis tools link dataforseo --reconnect --credentials - < credentials.json`
 
 
 ## Meta Commands

package/dist/scaffolds/notis-database/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Database Changelog
+
+## [Initial Release] - {PR_MERGE_DATE}
+
+- First Store release.

package/dist/scaffolds/notis-database/notis.config.ts

@@ -8,7 +8,6 @@ export default defineNotisApp({
   author: { name: 'Notis' },
   categories: ['Product & Engineering', 'Operations'],
   tagline: 'Explore every database and schema in your Notis workspace.',
-  versionNotes: 'Initial scaffold release.',
   databases: [],
   routes: [
     {

package/dist/scaffolds/notis-database/src/mock-runtime.ts

@@ -503,6 +503,7 @@ export function installMockRuntime(): NotisRuntime {
       default: true,
       collection: null,
     },
+    databases: [],
     context: {},
     listTools: async () => [
       { name: 'LOCAL_NOTIS_DATABASE_LIST_DATABASES', inputSchema: { type: 'object', properties: {} } },

package/dist/scaffolds/notis-journal/CHANGELOG.md

@@ -0,0 +1,25 @@
+# 5 Minutes Journal Changelog
+
+## [Package Details and History] - 2026-07-17
+
+- Added complete package release history to App Details.
+- Refreshed the light and dark Store screenshots for the latest release.
+
+## [Publisher Attribution] - 2026-07-16
+
+- Shows Florian (Flo) Pariset as the Store publisher.
+
+## [Theme-Aware Store Screenshots] - 2026-07-16
+
+- Added matching light and dark screenshots with the shared deep-blue background.
+- Removed the screenshot shadow and white edge artifacts.
+
+## [5 Minutes Journal Redesign] - 2026-07-16
+
+- Renamed Journal to 5 Minutes Journal.
+- Added focused morning and evening check-in views plus mood, energy, motivation, ritual-consistency, and gratitude statistics.
+- Added guided onboarding for the morning and evening check-in routine.
+
+## [Initial Journal] - 2026-07-14
+
+- Added a browse-first Journal experience powered by entries created through conversations with Notis.

package/dist/scaffolds/notis-journal/app/globals.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* The portal mounts the app inside [data-notis-app-root]; let it fill the width. */
+[data-notis-app-root] {
+  width: 100%;
+}
+
+/*
+ * Dev-preview fallback tokens. Active only under [data-dev-preview], which the
+ * standalone dev entrypoint sets. The production bundle runs inside the portal
+ * shadow root where the host injects real theme tokens, so this rule is scoped
+ * narrowly enough to never collide with portal-provided values.
+ */
+[data-dev-preview] {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 0 0% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}

package/dist/scaffolds/notis-journal/app/insights/page.tsx

@@ -0,0 +1,513 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useNotisNavigation } from '@notis/sdk';
+import {
+  ChartLineUpIcon,
+  FlameIcon,
+  LightningIcon,
+  MoonStarsIcon,
+  NotebookIcon,
+  RocketLaunchIcon,
+  SparkleIcon,
+  SunHorizonIcon,
+} from '@phosphor-icons/react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import {
+  DAY_MOOD_COLOR,
+  ENERGY_COLOR,
+  MOOD_SCALE,
+  MORNING_MOOD_COLOR,
+  MOTIVATION_COLOR,
+  average,
+  computeStreak,
+  dayKey,
+  eveningComplete,
+  formatDay,
+  moodStep,
+  morningComplete,
+  recentGratitudes,
+  round1,
+  topMoodWords,
+  useJournalEntries,
+  type JournalEntry,
+} from '../journal-core';
+import { EmptyState, LoadingState, SectionCard, StatTile } from '../journal-ui';
+
+export default function StatsPage() {
+  const { entries, loading, error } = useJournalEntries();
+  const navigation = useNotisNavigation();
+
+  const chrono = useMemo(() => [...entries].reverse(), [entries]); // oldest -> newest
+  const recent = useMemo(() => chrono.slice(-21), [chrono]); // last ~3 weeks for trends
+
+  const streak = useMemo(() => computeStreak(entries), [entries]);
+  const totals = useMemo(
+    () => ({
+      morningMood: average(entries.map((e) => e.morningMood)),
+      dayMood: average(entries.map((e) => e.dayMood)),
+      energy: average(entries.map((e) => e.energy)),
+      motivation: average(entries.map((e) => e.motivation)),
+    }),
+    [entries],
+  );
+  const lift = useMemo(() => moodLift(entries), [entries]);
+  const consistency = useMemo(() => ritualConsistency(entries, 30), [entries]);
+  const words = useMemo(() => topMoodWords(entries), [entries]);
+  const gratitudes = useMemo(() => recentGratitudes(entries, 12), [entries]);
+
+  if (loading && !entries.length) {
+    return (
+      <div data-store-screenshot="stats" className="mx-auto w-full max-w-6xl px-5 py-6 sm:px-8">
+        <LoadingState label="Reading back through your days…" />
+      </div>
+    );
+  }
+
+  return (
+    <div data-store-screenshot="stats" className="mx-auto w-full max-w-6xl px-5 py-6 sm:px-8">
+      <header className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+            <ChartLineUpIcon size={14} weight="bold" />
+            5 Minutes Journal
+          </div>
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight">Stats</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            What {entries.length} {entries.length === 1 ? 'day' : 'days'} of checking in with
+            yourself add up to.
+          </p>
+        </div>
+        <Button variant="outline" onClick={() => navigation.toRoute('/')} className="gap-1.5">
+          <NotebookIcon size={16} weight="bold" />
+          Back to journal
+        </Button>
+      </header>
+
+      {error ? (
+        <p className="mt-6 rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</p>
+      ) : null}
+
+      {entries.length === 0 ? (
+        <div className="mt-8">
+          <EmptyState
+            icon={ChartLineUpIcon}
+            title="No patterns to show yet"
+            description="After a few mornings and evenings with Notis, your moods, energy, and gratitude will start telling a story here."
+            action={
+              <Button onClick={() => navigation.toRoute('/')} className="gap-1.5">
+                <NotebookIcon size={16} weight="bold" />
+                Open journal
+              </Button>
+            }
+          />
+        </div>
+      ) : (
+        <>
+          <div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+            <StatTile
+              label="Streak"
+              value={streak}
+              suffix={streak === 1 ? 'day' : 'days'}
+              icon={FlameIcon}
+              accent="#f59e0b"
+            />
+            <StatTile label="Days journaled" value={entries.length} icon={NotebookIcon} />
+            <StatTile
+              label="Waking mood"
+              value={totals.morningMood ?? '—'}
+              suffix={totals.morningMood != null ? '/ 7' : undefined}
+              icon={SunHorizonIcon}
+              accent={MORNING_MOOD_COLOR}
+              hint={moodStep(totals.morningMood)?.label}
+            />
+            <StatTile
+              label="Day mood"
+              value={totals.dayMood ?? '—'}
+              suffix={totals.dayMood != null ? '/ 7' : undefined}
+              icon={MoonStarsIcon}
+              accent={DAY_MOOD_COLOR}
+              hint={moodStep(totals.dayMood)?.label}
+            />
+            <StatTile
+              label="Energy"
+              value={totals.energy ?? '—'}
+              suffix={totals.energy != null ? '/ 10' : undefined}
+              icon={LightningIcon}
+              accent={ENERGY_COLOR}
+            />
+            <StatTile
+              label="Motivation"
+              value={totals.motivation ?? '—'}
+              suffix={totals.motivation != null ? '/ 10' : undefined}
+              icon={RocketLaunchIcon}
+              accent={MOTIVATION_COLOR}
+            />
+          </div>
+
+          <div className="mt-6 grid grid-cols-1 gap-5 lg:grid-cols-2">
+            <SectionCard
+              title="Mood, morning to evening"
+              description="How you woke up next to how the day ended, on the pleasant scale"
+              icon={SunHorizonIcon}
+              className="lg:col-span-2"
+            >
+              <MoodTrend entries={recent} />
+              <div className="mt-3 flex items-center gap-4 text-[11px] text-muted-foreground">
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="h-2 w-2 rounded-sm bg-foreground/70" />
+                  Waking mood
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="h-2 w-2 rounded-sm border-[1.5px] border-foreground/70 bg-foreground/20" />
+                  Whole-day mood
+                </span>
+                <span>Bars take the color of the mood itself.</span>
+                {lift != null ? (
+                  <span className="ml-auto">
+                    {lift > 0
+                      ? `Your days tend to end ${lift} above where they start.`
+                      : lift < 0
+                        ? `Your days tend to end ${Math.abs(lift)} below where they start.`
+                        : 'Your days tend to end where they start.'}
+                  </span>
+                ) : (
+                  <span className="ml-auto">Scale 1–7</span>
+                )}
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title="Energy & motivation"
+              description="Morning levels day by day"
+              icon={LightningIcon}
+              className="lg:col-span-2"
+            >
+              <LevelTrend entries={recent} />
+              <div className="mt-3 flex items-center gap-4 text-[11px] text-muted-foreground">
+                <LegendSwatch color={ENERGY_COLOR} label="Energy" />
+                <LegendSwatch color={MOTIVATION_COLOR} label="Motivation" />
+                <span className="ml-auto">Scale 1–10</span>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title="How your days feel"
+              description="Where the whole-day mood lands on the scale"
+              icon={MoonStarsIcon}
+            >
+              <MoodDistribution entries={entries} pick={(e) => e.dayMood} />
+            </SectionCard>
+
+            <SectionCard
+              title="How you wake up"
+              description="Where the waking mood lands on the scale"
+              icon={SunHorizonIcon}
+            >
+              <MoodDistribution entries={entries} pick={(e) => e.morningMood} />
+            </SectionCard>
+
+            <SectionCard
+              title="The ritual"
+              description="Check-ins completed over the last 30 days"
+              icon={FlameIcon}
+            >
+              <div className="space-y-4 pt-1">
+                <ConsistencyRow
+                  icon={SunHorizonIcon}
+                  label="Mornings"
+                  fraction={consistency.morning}
+                  color={MORNING_MOOD_COLOR}
+                />
+                <ConsistencyRow
+                  icon={MoonStarsIcon}
+                  label="Evenings"
+                  fraction={consistency.evening}
+                  color={DAY_MOOD_COLOR}
+                />
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title="Words you reach for"
+              description="The adjectives you use most for your moods"
+              icon={ChartLineUpIcon}
+            >
+              {words.length ? (
+                <div className="flex flex-wrap gap-2">
+                  {words.map(({ word, count }) => (
+                    <span
+                      key={word}
+                      className="inline-flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs font-medium capitalize"
+                    >
+                      {word}
+                      <span className="text-[10px] tabular-nums text-muted-foreground">{count}</span>
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <NoData label="No mood words yet" />
+              )}
+            </SectionCard>
+
+            <SectionCard
+              title="Gratitude wall"
+              description="The latest things you said thank you for"
+              icon={SparkleIcon}
+              className="lg:col-span-2"
+            >
+              {gratitudes.length ? (
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                  {gratitudes.map((item, index) => (
+                    <div
+                      key={`${item.text}-${index}`}
+                      className="rounded-xl border border-border/70 bg-muted/30 px-3.5 py-3"
+                    >
+                      <p className="text-sm leading-snug">{item.text}</p>
+                      <p className="mt-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                        {formatDay(item.date)}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <NoData label="Your gratitudes will collect here" />
+              )}
+            </SectionCard>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Charts
+// ---------------------------------------------------------------------------
+
+function MoodTrend({ entries }: { entries: JournalEntry[] }) {
+  if (!entries.length) return <NoData />;
+  const summary = entries
+    .map(
+      (e) =>
+        `${formatDay(e.date)}: waking ${e.morningMood ?? 'not logged'}, day ${e.dayMood ?? 'not logged'}`,
+    )
+    .join('; ');
+  return (
+    <div
+      className="flex items-end gap-1.5 overflow-x-auto pb-1"
+      style={{ height: 168 }}
+      role="img"
+      aria-label={`Waking and whole-day mood by day, on a 1 to 7 scale. ${summary}`}
+    >
+      {entries.map((entry) => (
+        <div key={entry.id} className="flex min-w-[26px] flex-1 flex-col items-center gap-1.5">
+          <div className="flex h-[128px] w-full items-end justify-center gap-1">
+            <Bar
+              fraction={(entry.morningMood ?? 0) / 7}
+              color={moodStep(entry.morningMood)?.color ?? MORNING_MOOD_COLOR}
+              title={`Waking ${entry.morningMood ?? '—'}`}
+            />
+            <Bar
+              fraction={(entry.dayMood ?? 0) / 7}
+              color={moodStep(entry.dayMood)?.color ?? DAY_MOOD_COLOR}
+              title={`Day ${entry.dayMood ?? '—'}`}
+              hollow
+            />
+          </div>
+          <span className="text-[9px] text-muted-foreground">{shortDay(entry.date)}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function LevelTrend({ entries }: { entries: JournalEntry[] }) {
+  if (!entries.length) return <NoData />;
+  const summary = entries
+    .map(
+      (e) =>
+        `${formatDay(e.date)}: energy ${e.energy ?? 'not logged'}, motivation ${e.motivation ?? 'not logged'}`,
+    )
+    .join('; ');
+  return (
+    <div
+      className="flex items-end gap-1.5 overflow-x-auto pb-1"
+      style={{ height: 168 }}
+      role="img"
+      aria-label={`Energy and motivation by day. ${summary}`}
+    >
+      {entries.map((entry) => (
+        <div key={entry.id} className="flex min-w-[26px] flex-1 flex-col items-center gap-1.5">
+          <div className="flex h-[128px] w-full items-end justify-center gap-1">
+            <Bar fraction={(entry.energy ?? 0) / 10} color={ENERGY_COLOR} title={`Energy ${entry.energy ?? '—'}`} />
+            <Bar
+              fraction={(entry.motivation ?? 0) / 10}
+              color={MOTIVATION_COLOR}
+              title={`Motivation ${entry.motivation ?? '—'}`}
+            />
+          </div>
+          <span className="text-[9px] text-muted-foreground">{shortDay(entry.date)}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Bar({
+  fraction,
+  color,
+  title,
+  hollow,
+}: {
+  fraction: number;
+  color: string;
+  title: string;
+  hollow?: boolean;
+}) {
+  const pct = Math.max(0, Math.min(1, fraction)) * 100;
+  return (
+    <div className="flex h-full w-2.5 items-end" title={title}>
+      <div
+        className="w-full rounded-t-sm transition-all"
+        style={{
+          height: `${Math.max(pct, fraction > 0 ? 4 : 0)}%`,
+          backgroundColor: hollow ? `${color}55` : color,
+          boxShadow: hollow ? `inset 0 0 0 1.5px ${color}` : undefined,
+        }}
+      />
+    </div>
+  );
+}
+
+function MoodDistribution({
+  entries,
+  pick,
+}: {
+  entries: JournalEntry[];
+  pick: (entry: JournalEntry) => number | null;
+}) {
+  const counts = new Map<number, number>();
+  let total = 0;
+  for (const entry of entries) {
+    const value = pick(entry);
+    const step = moodStep(value);
+    if (!step) continue;
+    counts.set(step.value, (counts.get(step.value) ?? 0) + 1);
+    total += 1;
+  }
+  if (!total) return <NoData />;
+  const max = Math.max(1, ...counts.values());
+  // Best mood first, mirroring how the scale reads left to right.
+  const rows = [...MOOD_SCALE].reverse();
+  return (
+    <div className="space-y-2.5">
+      {rows.map((step) => {
+        const count = counts.get(step.value) ?? 0;
+        const pct = Math.round((count / total) * 100);
+        return (
+          <div
+            key={step.value}
+            className="flex items-center gap-3"
+            aria-label={`${step.label}: ${count} days, ${pct} percent`}
+          >
+            <span className="w-32 shrink-0 truncate text-xs font-medium">{step.label}</span>
+            <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full transition-all"
+                style={{ width: `${(count / max) * 100}%`, backgroundColor: step.color }}
+              />
+            </div>
+            <span className="w-14 shrink-0 text-right text-[11px] tabular-nums text-muted-foreground">
+              {count} · {pct}%
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ConsistencyRow({
+  icon: IconCmp,
+  label,
+  fraction,
+  color,
+}: {
+  icon: typeof SunHorizonIcon;
+  label: string;
+  fraction: number;
+  color: string;
+}) {
+  const pct = Math.round(Math.max(0, Math.min(1, fraction)) * 100);
+  return (
+    <div className="flex items-center gap-3">
+      <span className="flex w-24 shrink-0 items-center gap-1.5 text-xs font-medium text-muted-foreground">
+        <IconCmp size={14} weight="bold" style={{ color }} />
+        {label}
+      </span>
+      <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full transition-all"
+          style={{ width: `${pct}%`, backgroundColor: color }}
+        />
+      </div>
+      <span className="w-10 shrink-0 text-right text-xs font-semibold tabular-nums">{pct}%</span>
+    </div>
+  );
+}
+
+function LegendSwatch({ color, label }: { color: string; label: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <span className="h-2 w-2 rounded-sm" style={{ backgroundColor: color }} />
+      {label}
+    </span>
+  );
+}
+
+function NoData({ label = 'Not enough data yet' }: { label?: string }) {
+  return (
+    <div className={cn('flex items-center justify-center py-10 text-xs text-muted-foreground')}>
+      {label}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Aggregation
+// ---------------------------------------------------------------------------
+
+/** Average change from waking mood to whole-day mood, when both were logged. */
+function moodLift(entries: JournalEntry[]): number | null {
+  const deltas = entries
+    .filter((e) => e.morningMood != null && e.dayMood != null)
+    .map((e) => (e.dayMood as number) - (e.morningMood as number));
+  if (!deltas.length) return null;
+  return round1(deltas.reduce((sum, d) => sum + d, 0) / deltas.length);
+}
+
+/** Fraction of the last `windowDays` days with complete morning / evening rituals. */
+function ritualConsistency(
+  entries: JournalEntry[],
+  windowDays: number,
+): { morning: number; evening: number } {
+  const cutoff = new Date();
+  cutoff.setDate(cutoff.getDate() - windowDays);
+  const cutoffKey = dayKey(cutoff.toISOString()) ?? '';
+  const recent = entries.filter((e) => (dayKey(e.date) ?? '') >= cutoffKey);
+  if (!recent.length) return { morning: 0, evening: 0 };
+  return {
+    morning: Math.min(1, recent.filter(morningComplete).length / windowDays),
+    evening: Math.min(1, recent.filter(eveningComplete).length / windowDays),
+  };
+}
+
+function shortDay(value: string | null): string {
+  const key = dayKey(value);
+  if (!key) return '';
+  const [, m, d] = key.split('-');
+  return `${Number(m)}/${Number(d)}`;
+}