@notis_ai/cli 0.2.13 → 0.2.15

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

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

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