@notis_ai/cli 0.2.4 → 0.2.6

package/dist/scaffolds/notis-journal/app/journal-core.tsx

@@ -0,0 +1,362 @@
+'use client';
+
+/**
+ * Shared data layer + domain model for Journal.
+ *
+ * The journal is capture-less by design: entries are created and completed by
+ * the Notis morning and evening automations, and the app only reads
+ * `journal_entries`. Everything both routes need lives here — the mood scale,
+ * the entry adapter over SDK-normalized documents, completeness helpers, and
+ * formatting utilities.
+ */
+
+import { useMemo } from 'react';
+import { useDocuments, type DocumentRecord } from '@notis/sdk';
+
+export const JOURNAL_DATABASE_SLUG = 'journal_entries';
+
+// Canonical property names as defined on the journal_entries schema.
+export const PROP = {
+  title: 'Name',
+  date: 'Date',
+  morningMood: 'Morning Mood',
+  morningMoodWord: 'Morning Mood Word',
+  morningFeeling: 'Morning Feeling',
+  energy: 'Energy',
+  motivation: 'Motivation',
+  gratitude1: 'Gratitude 1',
+  gratitude2: 'Gratitude 2',
+  gratitude3: 'Gratitude 3',
+  intention: 'Intention',
+  affirmation: 'Affirmation',
+  dayMood: 'Day Mood',
+  dayMoodWord: 'Day Mood Word',
+  highlight: 'Highlight',
+  lesson: 'Lesson',
+} as const;
+
+export interface JournalEntry {
+  id: string;
+  title: string;
+  date: string | null; // YYYY-MM-DD for the day this entry is for
+  /** Waking mood on the 1–7 pleasant scale. */
+  morningMood: number | null;
+  morningMoodWord: string | null;
+  morningFeeling: string | null;
+  energy: number | null; // 1–10
+  motivation: number | null; // 1–10
+  gratitudes: [string | null, string | null, string | null];
+  intention: string | null;
+  affirmation: string | null;
+  /** Whole-day mood on the 1–7 pleasant scale, filled in the evening. */
+  dayMood: number | null;
+  dayMoodWord: string | null;
+  highlight: string | null;
+  lesson: string | null;
+  /** Markdown body — the optional free-form entry dictated to Notis. */
+  freeEntry: string | null;
+  createdAt: string | null;
+  lastEditedTime: string | null;
+}
+
+// ---------------------------------------------------------------------------
+// The pleasant–unpleasant mood scale (Apple-watch style, 1..7)
+// ---------------------------------------------------------------------------
+
+export interface MoodStep {
+  value: number; // 1..7
+  label: string;
+  color: string; // accent used for dots / bars
+  soft: string; // translucent background
+}
+
+export const MOOD_SCALE: MoodStep[] = [
+  { value: 1, label: 'Very unpleasant', color: '#8b5cf6', soft: 'rgba(139,92,246,0.15)' },
+  { value: 2, label: 'Unpleasant', color: '#6366f1', soft: 'rgba(99,102,241,0.15)' },
+  { value: 3, label: 'Slightly unpleasant', color: '#3b82f6', soft: 'rgba(59,130,246,0.15)' },
+  { value: 4, label: 'Neutral', color: '#0ea5e9', soft: 'rgba(14,165,233,0.15)' },
+  { value: 5, label: 'Slightly pleasant', color: '#14b8a6', soft: 'rgba(20,184,166,0.15)' },
+  { value: 6, label: 'Pleasant', color: '#10b981', soft: 'rgba(16,185,129,0.15)' },
+  { value: 7, label: 'Very pleasant', color: '#f59e0b', soft: 'rgba(245,158,11,0.17)' },
+];
+
+export function moodStep(value: number | null | undefined): MoodStep | null {
+  if (value == null) return null;
+  const rounded = Math.round(value);
+  return MOOD_SCALE.find((step) => step.value === rounded) ?? null;
+}
+
+export const ENERGY_COLOR = '#f59e0b';
+export const MOTIVATION_COLOR = '#3b82f6';
+export const MORNING_MOOD_COLOR = '#f59e0b';
+export const DAY_MOOD_COLOR = '#6366f1';
+
+// ---------------------------------------------------------------------------
+// Entry adapter over SDK-normalized documents
+// ---------------------------------------------------------------------------
+
+function str(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
+}
+
+function num(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+export function entryFromDocument(document: DocumentRecord): JournalEntry {
+  const props = document.properties;
+  return {
+    id: document.id,
+    title: str(props[PROP.title]) ?? str(document.title) ?? 'Untitled entry',
+    date: str(props[PROP.date]),
+    morningMood: num(props[PROP.morningMood]),
+    morningMoodWord: str(props[PROP.morningMoodWord]),
+    morningFeeling: str(props[PROP.morningFeeling]),
+    energy: num(props[PROP.energy]),
+    motivation: num(props[PROP.motivation]),
+    gratitudes: [
+      str(props[PROP.gratitude1]),
+      str(props[PROP.gratitude2]),
+      str(props[PROP.gratitude3]),
+    ],
+    intention: str(props[PROP.intention]),
+    affirmation: str(props[PROP.affirmation]),
+    dayMood: num(props[PROP.dayMood]),
+    dayMoodWord: str(props[PROP.dayMoodWord]),
+    highlight: str(props[PROP.highlight]),
+    lesson: str(props[PROP.lesson]),
+    freeEntry: document.contentMarkdown ?? document.plainText ?? null,
+    createdAt: document.createdAt ?? null,
+    lastEditedTime: document.lastEditedTime ?? null,
+  };
+}
+
+/** Newest first, using the entry Date then falling back to creation time. */
+export function sortEntries(entries: JournalEntry[]): JournalEntry[] {
+  return [...entries].sort((a, b) => {
+    const av = a.date ?? a.createdAt ?? '';
+    const bv = b.date ?? b.createdAt ?? '';
+    return av < bv ? 1 : av > bv ? -1 : 0;
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Completeness — what the automations still need to ask for
+// ---------------------------------------------------------------------------
+
+export function gratitudeCount(entry: JournalEntry): number {
+  return entry.gratitudes.filter(Boolean).length;
+}
+
+/** True when any of the morning ritual fields has been captured. */
+export function morningStarted(entry: JournalEntry): boolean {
+  return (
+    entry.morningMood != null ||
+    entry.morningMoodWord != null ||
+    entry.morningFeeling != null ||
+    entry.energy != null ||
+    entry.motivation != null ||
+    gratitudeCount(entry) > 0 ||
+    entry.intention != null ||
+    entry.affirmation != null
+  );
+}
+
+export function morningComplete(entry: JournalEntry): boolean {
+  return (
+    entry.morningMood != null &&
+    entry.morningMoodWord != null &&
+    entry.energy != null &&
+    entry.motivation != null &&
+    gratitudeCount(entry) === 3 &&
+    entry.intention != null &&
+    entry.affirmation != null
+  );
+}
+
+export function eveningStarted(entry: JournalEntry): boolean {
+  return (
+    entry.dayMood != null ||
+    entry.dayMoodWord != null ||
+    entry.highlight != null ||
+    entry.lesson != null
+  );
+}
+
+export function eveningComplete(entry: JournalEntry): boolean {
+  return (
+    entry.dayMood != null &&
+    entry.dayMoodWord != null &&
+    entry.highlight != null &&
+    entry.lesson != null
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Formatting
+// ---------------------------------------------------------------------------
+
+function toDate(value: string | null): Date | null {
+  if (!value) return null;
+  const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (dateOnly) {
+    const [, year, month, day] = dateOnly;
+    const localDate = new Date(Number(year), Number(month) - 1, Number(day));
+    return Number.isNaN(localDate.getTime()) ? null : localDate;
+  }
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/** YYYY-MM-DD in local time, for grouping and comparisons. */
+export function dayKey(value: string | null): string | null {
+  const d = toDate(value);
+  if (!d) return null;
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+export function todayKey(): string {
+  return dayKey(new Date().toISOString()) ?? '';
+}
+
+export function formatDay(value: string | null, opts: { weekday?: boolean } = {}): string {
+  const d = toDate(value);
+  if (!d) return 'No date';
+  return d.toLocaleDateString(undefined, {
+    weekday: opts.weekday ? 'short' : undefined,
+    month: 'short',
+    day: 'numeric',
+    year: d.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',
+  });
+}
+
+/** "Wednesday, July 16" — the headline identity of a day spread. */
+export function formatDayLong(value: string | null): string {
+  const d = toDate(value);
+  if (!d) return 'No date';
+  return d.toLocaleDateString(undefined, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: d.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',
+  });
+}
+
+export function relativeDay(value: string | null): string | null {
+  const key = dayKey(value);
+  if (!key) return null;
+  const today = todayKey();
+  if (key === today) return 'Today';
+  const yesterday = dayKey(new Date(Date.now() - 86400000).toISOString());
+  if (key === yesterday) return 'Yesterday';
+  return null;
+}
+
+/** Short weekday + day-of-month pieces for the timeline rail. */
+export function railDate(value: string | null): { weekday: string; day: string } {
+  const d = toDate(value);
+  if (!d) return { weekday: '—', day: '·' };
+  return {
+    weekday: d.toLocaleDateString(undefined, { weekday: 'short' }),
+    day: String(d.getDate()),
+  };
+}
+
+export function round1(n: number): number {
+  return Math.round(n * 10) / 10;
+}
+
+export function average(values: Array<number | null | undefined>): number | null {
+  const nums = values.filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  if (!nums.length) return null;
+  return round1(nums.reduce((sum, v) => sum + v, 0) / nums.length);
+}
+
+/** Compute a current daily-journaling streak (consecutive days up to today). */
+export function computeStreak(entries: JournalEntry[]): number {
+  const keys = new Set(entries.map((e) => dayKey(e.date)).filter(Boolean) as string[]);
+  if (!keys.size) return 0;
+  let streak = 0;
+  const cursor = new Date();
+  // Allow the streak to "start" yesterday if today has no entry yet.
+  if (!keys.has(dayKey(cursor.toISOString()) ?? '')) {
+    cursor.setDate(cursor.getDate() - 1);
+  }
+  while (keys.has(dayKey(cursor.toISOString()) ?? '')) {
+    streak += 1;
+    cursor.setDate(cursor.getDate() - 1);
+  }
+  return streak;
+}
+
+/** "July 2026" style label for timeline month grouping. */
+export function monthLabel(value: string | null): string {
+  const key = dayKey(value);
+  if (!key) return 'Undated';
+  const [y, m] = key.split('-').map(Number);
+  return new Date(y, m - 1, 1).toLocaleDateString(undefined, {
+    month: 'long',
+    year: 'numeric',
+  });
+}
+
+/**
+ * Most frequent mood adjectives across entries (morning + day words),
+ * lower-cased, best first.
+ */
+export function topMoodWords(
+  entries: JournalEntry[],
+  limit = 12,
+): Array<{ word: string; count: number }> {
+  const counts = new Map<string, number>();
+  for (const entry of entries) {
+    for (const word of [entry.morningMoodWord, entry.dayMoodWord]) {
+      if (!word) continue;
+      const key = word.trim().toLowerCase();
+      if (!key) continue;
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+  }
+  return [...counts.entries()]
+    .map(([word, count]) => ({ word, count }))
+    .sort((a, b) => b.count - a.count || a.word.localeCompare(b.word))
+    .slice(0, limit);
+}
+
+/** Recent gratitudes, newest first, flattened from the three slots. */
+export function recentGratitudes(
+  entries: JournalEntry[],
+  limit = 12,
+): Array<{ text: string; date: string | null }> {
+  const items: Array<{ text: string; date: string | null }> = [];
+  for (const entry of entries) {
+    for (const text of entry.gratitudes) {
+      if (text) items.push({ text, date: entry.date });
+    }
+    if (items.length >= limit) break;
+  }
+  return items.slice(0, limit);
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+export function useJournalEntries() {
+  const { documents, loading, error, refetch } = useDocuments(JOURNAL_DATABASE_SLUG, {
+    // A one-year window keeps the embedded app fast while preserving enough
+    // history for useful trends. Older entries remain available in Notis.
+    pageSize: 365,
+    fetchAll: false,
+  });
+
+  const entries = useMemo(
+    () => sortEntries(documents.map(entryFromDocument)),
+    [documents],
+  );
+
+  return { entries, loading, error: error?.message ?? null, refresh: refetch };
+}

package/dist/scaffolds/notis-journal/app/journal-ui.tsx

@@ -0,0 +1,337 @@
+'use client';
+
+/** Shared presentational building blocks for Journal. */
+
+import type { ReactNode } from 'react';
+import { CircleNotchIcon, type Icon } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { MOOD_SCALE, moodStep } from './journal-core';
+
+/**
+ * The signature mood control: seven dots from very unpleasant to very
+ * pleasant, with the recorded step enlarged and colored, plus the adjective
+ * the user gave. Read-only — the automations do the asking.
+ */
+export function MoodScale({
+  value,
+  word,
+  size = 'md',
+}: {
+  value: number | null;
+  word?: string | null;
+  size?: 'sm' | 'md';
+}) {
+  const active = moodStep(value);
+  const dot = size === 'sm' ? 7 : 9;
+  const activeDot = size === 'sm' ? 13 : 18;
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex items-center gap-1.5" role="img" aria-label={active ? `${active.label} (${active.value} of 7)` : 'No mood recorded'}>
+        {MOOD_SCALE.map((step) => {
+          const isActive = active?.value === step.value;
+          return (
+            <span
+              key={step.value}
+              className="rounded-full transition-all"
+              title={step.label}
+              style={{
+                width: isActive ? activeDot : dot,
+                height: isActive ? activeDot : dot,
+                backgroundColor: isActive ? step.color : 'transparent',
+                boxShadow: isActive
+                  ? `0 0 0 3px ${step.soft}`
+                  : `inset 0 0 0 1.5px ${step.color}55`,
+              }}
+            />
+          );
+        })}
+      </div>
+      {active ? (
+        <span className={cn('font-medium leading-tight', size === 'sm' ? 'text-xs' : 'text-sm')}>
+          {word ? <span className="capitalize">{word}</span> : active.label}
+          {word ? (
+            <span className="ml-1.5 font-normal text-muted-foreground">{active.label.toLowerCase()}</span>
+          ) : null}
+        </span>
+      ) : (
+        <span className="text-xs text-muted-foreground">Not recorded</span>
+      )}
+    </div>
+  );
+}
+
+/** Small colored dot for the timeline rail. Hollow when missing. */
+export function MoodDot({ value, size = 8 }: { value: number | null; size?: number }) {
+  const step = moodStep(value);
+  return (
+    <span
+      aria-hidden
+      className="inline-block shrink-0 rounded-full"
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: step?.color ?? 'transparent',
+        boxShadow: step ? undefined : 'inset 0 0 0 1px hsl(var(--muted-foreground) / 0.4)',
+      }}
+    />
+  );
+}
+
+/** Compact mood pill: colored dot + adjective (or scale label). */
+export function MoodPill({ value, word }: { value: number | null; word?: string | null }) {
+  const step = moodStep(value);
+  if (!step) return <span className="text-xs text-muted-foreground">—</span>;
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium capitalize"
+      style={{ backgroundColor: step.soft, color: step.color }}
+    >
+      <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: step.color }} />
+      {word ?? step.label}
+    </span>
+  );
+}
+
+/** 1..10 level rendered as a labelled row of ten ticks. */
+export function LevelTicks({
+  label,
+  value,
+  color,
+  icon: IconCmp,
+}: {
+  label: string;
+  value: number | null;
+  color: string;
+  icon: Icon;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="flex w-28 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="flex flex-1 items-center gap-1" role="img" aria-label={`${label}: ${value ?? 'not recorded'} out of 10`}>
+        {Array.from({ length: 10 }, (_, i) => {
+          const filled = value != null && i < value;
+          return (
+            <span
+              key={i}
+              className="h-3.5 flex-1 rounded-sm transition-all"
+              style={{
+                maxWidth: 18,
+                backgroundColor: filled ? color : 'hsl(var(--muted))',
+                opacity: filled ? 0.4 + 0.6 * ((i + 1) / 10) : 1,
+              }}
+            />
+          );
+        })}
+      </div>
+      <span className="w-9 shrink-0 text-right text-sm font-semibold tabular-nums">
+        {value ?? '—'}
+      </span>
+    </div>
+  );
+}
+
+/** Section wrapper for the morning / evening halves of a day spread. */
+export function RitualSection({
+  icon: IconCmp,
+  title,
+  accent,
+  aside,
+  children,
+}: {
+  icon: Icon;
+  title: string;
+  accent: string;
+  aside?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <section className="rounded-2xl border border-border bg-card text-card-foreground shadow-sm">
+      <header className="flex items-center justify-between gap-3 border-b border-border/60 px-5 py-3.5 sm:px-6">
+        <div className="flex items-center gap-2.5">
+          <span
+            className="flex h-7 w-7 items-center justify-center rounded-full"
+            style={{ backgroundColor: `${accent}1f`, color: accent }}
+          >
+            <IconCmp size={15} weight="fill" />
+          </span>
+          <h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+            {title}
+          </h2>
+        </div>
+        {aside}
+      </header>
+      <div className="space-y-5 px-5 py-5 sm:px-6">{children}</div>
+    </section>
+  );
+}
+
+/** A prompt of the ritual with its answer, or a gentle "not captured" hint. */
+export function PromptBlock({
+  prompt,
+  children,
+  missingHint,
+}: {
+  prompt: string;
+  children?: ReactNode;
+  missingHint?: string;
+}) {
+  return (
+    <div>
+      <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+        {prompt}
+      </p>
+      {children ? (
+        <div className="mt-1.5 text-sm leading-relaxed">{children}</div>
+      ) : (
+        <p className="mt-1.5 text-sm italic text-muted-foreground/70">
+          {missingHint ?? 'Not captured.'}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/** Status chip for morning / evening capture state on rail rows and headers. */
+export function RitualChip({
+  icon: IconCmp,
+  label,
+  state,
+  accent,
+}: {
+  icon: Icon;
+  label: string;
+  state: 'complete' | 'partial' | 'missing';
+  accent: string;
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[11px] font-medium',
+        state === 'missing'
+          ? 'border-dashed border-border text-muted-foreground'
+          : 'border-transparent',
+      )}
+      style={
+        state === 'missing'
+          ? undefined
+          : { backgroundColor: `${accent}1a`, color: accent }
+      }
+    >
+      <IconCmp size={12} weight={state === 'missing' ? 'regular' : 'fill'} />
+      {label}
+      {state === 'partial' ? <span className="opacity-70">· partial</span> : null}
+    </span>
+  );
+}
+
+export function StatTile({
+  label,
+  value,
+  suffix,
+  hint,
+  icon: IconCmp,
+  accent,
+}: {
+  label: string;
+  value: ReactNode;
+  suffix?: string;
+  hint?: string;
+  icon?: Icon;
+  accent?: string;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-4">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        {IconCmp ? (
+          <IconCmp size={15} weight="bold" style={{ color: accent ?? 'hsl(var(--muted-foreground))' }} />
+        ) : null}
+      </div>
+      <div className="mt-2 flex items-baseline gap-1">
+        <span className="text-2xl font-semibold tracking-tight tabular-nums">{value}</span>
+        {suffix ? <span className="text-sm text-muted-foreground">{suffix}</span> : null}
+      </div>
+      {hint ? <p className="mt-1 text-[11px] text-muted-foreground">{hint}</p> : null}
+    </div>
+  );
+}
+
+export function SectionCard({
+  title,
+  description,
+  action,
+  icon: IconCmp,
+  children,
+  className,
+}: {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  icon?: Icon;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        'rounded-2xl border border-border bg-card text-card-foreground shadow-sm',
+        className,
+      )}
+    >
+      <header className="flex items-start justify-between gap-3 px-5 pt-4 pb-3">
+        <div className="flex items-start gap-2.5">
+          {IconCmp ? (
+            <span className="mt-0.5 flex h-7 w-7 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <IconCmp size={16} weight="bold" />
+            </span>
+          ) : null}
+          <div>
+            <h2 className="text-sm font-semibold tracking-tight">{title}</h2>
+            {description ? (
+              <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+        </div>
+        {action}
+      </header>
+      <div className="px-5 pb-5">{children}</div>
+    </section>
+  );
+}
+
+export function LoadingState({ label = 'Loading…' }: { label?: string }) {
+  return (
+    <div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
+      <CircleNotchIcon size={16} className="animate-spin" />
+      {label}
+    </div>
+  );
+}
+
+export function EmptyState({
+  icon: IconCmp,
+  title,
+  description,
+  action,
+}: {
+  icon: Icon;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-border bg-card/40 px-6 py-14 text-center">
+      <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+        <IconCmp size={20} weight="bold" />
+      </span>
+      <h3 className="mt-3 text-sm font-semibold">{title}</h3>
+      {description ? (
+        <p className="mt-1 max-w-sm text-xs text-muted-foreground">{description}</p>
+      ) : null}
+      {action ? <div className="mt-4">{action}</div> : null}
+    </div>
+  );
+}

package/dist/scaffolds/notis-journal/app/layout.tsx

@@ -0,0 +1,6 @@
+import '@notis/sdk/styles.css';
+import './globals.css';
+
+export default function AppShell({ children }: { children: React.ReactNode }) {
+  return children;
+}