feat: Phase 0 walking skeleton — auth, Todoist integration, tip page

- Google OAuth2/PKCE flow via openid-client v6; session cookie (30-day)
- Next.js middleware auth guard — redirects before any client render
- Todoist OAuth2 connect/disconnect; REST v1 task fetch (today|overdue)
- RandomPolicy recommender behind stable POST /recommend contract
- Feedback endpoint (done/dismiss/snooze); marks task complete in Todoist
- 30s in-memory task cache per user (~1ms recommend on cache hit)
- Tip page: pure opacity fade-in (3.5s), fast fade-out (0.3s), no motion
- "reading you…" loading text with breathe animation
- PWA icons + manifest
- Ports pinned: API=3078, web=3079; Caddy at o.alogins.net

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -2,10 +2,11 @@
 
 # API
 SESSION_SECRET=change-me-to-a-random-32-char-string
-PORT=3001
+PORT=3078
 NODE_ENV=development
 DATABASE_PATH=./data/oo.db
-API_BASE_URL=http://localhost:3001
+# API_BASE_URL = public origin only, no path suffix (used to build OAuth redirect URIs)
+API_BASE_URL=http://localhost:3078
 WEB_BASE_URL=http://localhost:3000
 ML_SERVING_URL=http://localhost:8000
 

apps/web/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.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.

apps/web/next.config.ts

@@ -5,7 +5,8 @@ const nextConfig: NextConfig = {
     return [
       {
         source: '/api/:path*',
-        destination: `${process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001'}/api/:path*`,
+        destination: `${process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3078'}/api/:path*`,
+        // In production, Caddy routes /api/* directly to the API — this rewrite only fires in dev
       },
     ];
   },

apps/web/package.json

@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3079",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 3079",
     "lint": "next lint",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf .next"

apps/web/src/app/connect/page.tsx

@@ -1,25 +1,22 @@
 'use client';
 
 import { useEffect, useState, useCallback } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { getSession, getIntegrations, disconnectIntegration } from '@/lib/api';
+import { useSearchParams } from 'next/navigation';
+import { getIntegrations, disconnectIntegration } from '@/lib/api';
 import type { Integration } from '@oo/shared-types';
 import { Suspense } from 'react';
 
 function ConnectPageInner() {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const [integrations, setIntegrations] = useState<Integration[]>([]);
   const [loading, setLoading] = useState(true);
   const [disconnecting, setDisconnecting] = useState<string | null>(null);
 
   const load = useCallback(async () => {
-    const { user } = await getSession();
-    if (!user) { router.replace('/sign-in'); return; }
     const { integrations: list } = await getIntegrations();
     setIntegrations(list);
     setLoading(false);
-  }, [router]);
+  }, []);
 
   useEffect(() => { load(); }, [load]);
 

apps/web/src/app/sign-in/page.tsx

@@ -1,17 +1,7 @@
 'use client';
 
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { getSession } from '@/lib/api';
-
+// Auth redirect is handled by middleware — no client-side session check needed here.
 export default function SignIn() {
-  const router = useRouter();
-
-  useEffect(() => {
-    getSession().then(({ user }) => {
-      if (user) router.replace('/connect');
-    });
-  }, [router]);
 
   return (
     <main style={{

apps/web/src/app/tip/page.tsx

@@ -1,40 +1,71 @@
 'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import { getSession, getRecommendation, sendFeedback } from '@/lib/api';
+import { getRecommendation, sendFeedback } from '@/lib/api';
 import type { Tip } from '@oo/shared-types';
 
 type State = 'loading' | 'tip' | 'empty' | 'actions' | 'done';
 
+// Fade wrapper — children fade in when `visible`, fade out when not
+function Fade({ visible, children, style }: {
+  visible: boolean;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div style={{
+      opacity: visible ? 1 : 0,
+      transition: visible ? 'opacity 3.5s ease' : 'opacity 0.3s ease',
+      pointerEvents: visible ? 'auto' : 'none',
+      ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
+
 export default function TipPage() {
-  const router = useRouter();
   const [tip, setTip] = useState<Tip | null>(null);
   const [state, setState] = useState<State>('loading');
+  const [visible, setVisible] = useState(false);
   const holdTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [pressed, setPressed] = useState(false);
 
-  const loadTip = useCallback(async () => {
-    setState('loading');
-    const { user } = await getSession();
-    if (!user) { router.replace('/sign-in'); return; }
-
-    const rec = await getRecommendation();
-    if (!rec) {
-      setState('empty');
-      return;
+  // Fade in after state change settles
+  useEffect(() => {
+    if (state === 'loading' || state === 'done') {
+      setVisible(false);
+    } else {
+      const t = setTimeout(() => setVisible(true), 30);
+      return () => clearTimeout(t);
     }
-    setTip(rec.tip);
-    setState('tip');
-  }, [router]);
+  }, [state]);
+
+  const loadTip = useCallback(async () => {
+    setVisible(false);
+    setState('loading');
+    try {
+      const rec = await getRecommendation();
+      if (!rec) {
+        setState('empty');
+        return;
+      }
+      setTip(rec.tip);
+      setState('tip');
+    } catch (err: any) {
+      console.error('[tip] loadTip error', err?.status, err?.message);
+      setState('empty');
+    }
+  }, []);
 
   useEffect(() => { loadTip(); }, [loadTip]);
 
   const react = async (action: 'done' | 'dismiss' | 'snooze') => {
     if (!tip) return;
+    setVisible(false);
     setState('done');
     await sendFeedback(tip.id, { action });
-    setTimeout(() => loadTip(), 600);
+    setTimeout(() => loadTip(), 700);
   };
 
   const onPointerDown = () => {
@@ -42,6 +73,7 @@ export default function TipPage() {
     setPressed(true);
     holdTimer.current = setTimeout(() => {
       setState('actions');
+      setVisible(true);
       setPressed(false);
     }, 600);
   };
@@ -55,144 +87,165 @@ export default function TipPage() {
   };
 
   return (
-    <main
-      onPointerDown={onPointerDown}
-      onPointerUp={onPointerUp}
-      onPointerLeave={onPointerUp}
-      style={{
-        minHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '3rem 2rem',
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-        cursor: state === 'tip' ? 'default' : 'pointer',
-        position: 'relative',
-        overflow: 'hidden',
-      }}
-    >
-      {/* Radial glow when pressed */}
-      <div style={{
-        position: 'absolute',
-        inset: 0,
-        background: 'radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, transparent 70%)',
-        opacity: pressed ? 1 : 0,
-        transition: 'opacity 0.3s ease',
-        pointerEvents: 'none',
-      }} />
+    <>
+      <style>{`
+        @keyframes breathe {
+          0%, 100% { opacity: 0.3; }
+          50%       { opacity: 1;   }
+        }
+      `}</style>
 
-      {state === 'loading' && (
-        <div style={{ color: 'rgba(255,255,255,0.2)', fontSize: '0.75rem', letterSpacing: '0.15em' }}>
-          ···
-        </div>
-      )}
+      <main
+        onPointerDown={onPointerDown}
+        onPointerUp={onPointerUp}
+        onPointerLeave={onPointerUp}
+        style={{
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '3rem 2rem',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          cursor: state === 'tip' ? 'default' : 'auto',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Ambient glow — breathes while loading */}
+        <div style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 65%)',
+          animation: state === 'loading' ? 'breathe 4s ease-in-out infinite' : undefined,
+          opacity: state === 'loading' ? undefined : pressed ? 0.3 : 0,
+          transition: state !== 'loading' ? 'opacity 0.4s ease' : undefined,
+          pointerEvents: 'none',
+        }} />
 
-      {state === 'tip' && tip && (
-        <div style={{ textAlign: 'center', maxWidth: '420px' }}>
+        {/* Loading label */}
+        {(state === 'loading' || state === 'done') && (
           <p style={{
-            fontSize: 'clamp(1.25rem, 4vw, 1.75rem)',
-            fontWeight: 300,
-            lineHeight: 1.45,
-            letterSpacing: '-0.01em',
-            color: 'var(--white)',
-            transition: 'opacity 0.2s ease',
-            opacity: pressed ? 0.6 : 1,
-          }}>
-            {tip.content}
-          </p>
-          <p style={{
-            marginTop: '2rem',
-            color: 'rgba(255,255,255,0.2)',
-            fontSize: '0.65rem',
-            letterSpacing: '0.12em',
+            marginTop: '1.25rem',
+            color: 'rgba(255,255,255,0.55)',
+            fontSize: '0.7rem',
+            letterSpacing: '0.18em',
             textTransform: 'uppercase',
+            animation: 'breathe 4s ease-in-out infinite',
           }}>
-            hold to act
+            reading you…
           </p>
-        </div>
-      )}
+        )}
 
-      {state === 'empty' && (
-        <div style={{ textAlign: 'center', color: 'rgba(255,255,255,0.3)' }}>
-          <p style={{ fontSize: '1.1rem', fontWeight: 300 }}>All clear.</p>
-          <button
-            onClick={loadTip}
-            style={{
+        {/* Tip */}
+        {(state === 'tip' || state === 'actions') && tip && (
+          <Fade visible={visible && state !== 'actions'} style={{ textAlign: 'center', maxWidth: '420px' }}>
+            <p style={{
+              fontSize: 'clamp(1.25rem, 4vw, 1.75rem)',
+              fontWeight: 300,
+              lineHeight: 1.45,
+              letterSpacing: '-0.01em',
+              color: 'rgba(255,255,255,1)',
+              transition: 'opacity 0.2s ease',
+              opacity: pressed ? 0.5 : 1,
+            }}>
+              {tip.content}
+            </p>
+            <p style={{
               marginTop: '2rem',
-              background: 'transparent',
-              border: '1px solid rgba(255,255,255,0.1)',
-              color: 'rgba(255,255,255,0.4)',
-              borderRadius: '0.375rem',
-              padding: '0.5rem 1rem',
-              fontSize: '0.8rem',
-            }}
-          >
-            Check again
-          </button>
-        </div>
-      )}
+              color: 'rgba(255,255,255,0.18)',
+              fontSize: '0.65rem',
+              letterSpacing: '0.12em',
+              textTransform: 'uppercase',
+            }}>
+              hold to act
+            </p>
+          </Fade>
+        )}
 
-      {state === 'done' && (
-        <div style={{ color: 'rgba(255,255,255,0.15)', fontSize: '0.75rem', letterSpacing: '0.15em' }}>
-          ···
-        </div>
-      )}
-
-      {/* Action sheet */}
-      {state === 'actions' && (
-        <>
-          <div
-            onClick={() => setState('tip')}
-            style={{
-              position: 'fixed',
-              inset: 0,
-              background: 'rgba(0,0,0,0.5)',
-            }}
-          />
-          <div style={{
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            background: '#111',
-            borderRadius: '1rem 1rem 0 0',
-            padding: '1.5rem 1.5rem 2.5rem',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '0.75rem',
-          }}>
-            {tip && (
-              <p style={{
-                color: 'rgba(255,255,255,0.4)',
-                fontSize: '0.8rem',
-                marginBottom: '0.5rem',
-                lineHeight: 1.4,
-              }}>
-                {tip.content}
-              </p>
-            )}
-            <ActionButton label="Done ✓" onClick={() => react('done')} primary />
-            <ActionButton label="Snooze" onClick={() => react('snooze')} />
-            <ActionButton label="Dismiss" onClick={() => react('dismiss')} />
+        {/* Empty */}
+        {state === 'empty' && (
+          <Fade visible={visible} style={{ textAlign: 'center' }}>
+            <p style={{ fontSize: '1.1rem', fontWeight: 300, color: 'rgba(255,255,255,0.35)' }}>
+              All clear.
+            </p>
             <button
-              onClick={() => setState('tip')}
+              onClick={loadTip}
               style={{
+                marginTop: '2rem',
                 background: 'transparent',
-                border: 'none',
-                color: 'rgba(255,255,255,0.25)',
-                padding: '0.5rem',
+                border: '1px solid rgba(255,255,255,0.1)',
+                color: 'rgba(255,255,255,0.35)',
+                borderRadius: '0.375rem',
+                padding: '0.5rem 1rem',
                 fontSize: '0.8rem',
-                marginTop: '0.25rem',
+                cursor: 'pointer',
               }}
             >
-              Cancel
+              Check again
             </button>
-          </div>
-        </>
-      )}
-    </main>
+          </Fade>
+        )}
+
+        {/* Action sheet */}
+        {state === 'actions' && (
+          <>
+            <div
+              onClick={() => { setState('tip'); }}
+              style={{
+                position: 'fixed',
+                inset: 0,
+                background: 'rgba(0,0,0,0.5)',
+                animation: 'none',
+              }}
+            />
+            <div style={{
+              position: 'fixed',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              background: '#111',
+              borderRadius: '1rem 1rem 0 0',
+              padding: '1.5rem 1.5rem 2.5rem',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.75rem',
+              transform: 'translateY(0)',
+              transition: 'transform 0.3s ease',
+            }}>
+              {tip && (
+                <p style={{
+                  color: 'rgba(255,255,255,0.35)',
+                  fontSize: '0.8rem',
+                  marginBottom: '0.5rem',
+                  lineHeight: 1.4,
+                }}>
+                  {tip.content}
+                </p>
+              )}
+              <ActionButton label="Done ✓" onClick={() => react('done')} primary />
+              <ActionButton label="Snooze" onClick={() => react('snooze')} />
+              <ActionButton label="Dismiss" onClick={() => react('dismiss')} />
+              <button
+                onClick={() => setState('tip')}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  color: 'rgba(255,255,255,0.25)',
+                  padding: '0.5rem',
+                  fontSize: '0.8rem',
+                  cursor: 'pointer',
+                  marginTop: '0.25rem',
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          </>
+        )}
+      </main>
+    </>
   );
 }
 
@@ -210,6 +263,7 @@ function ActionButton({ label, onClick, primary }: { label: string; onClick: ()
         fontWeight: primary ? 500 : 400,
         width: '100%',
         textAlign: 'center',
+        cursor: 'pointer',
       }}
     >
       {label}

apps/web/src/middleware.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+const PUBLIC = ['/sign-in', '/legal'];
+
+export function middleware(req: NextRequest) {
+  const { pathname } = req.nextUrl;
+  const hasCookie = req.cookies.has('sid');
+
+  // Already on a public page with no session — allow through
+  if (!hasCookie && PUBLIC.some((p) => pathname.startsWith(p))) {
+    return NextResponse.next();
+  }
+
+  // No session — redirect to sign-in
+  if (!hasCookie) {
+    const url = req.nextUrl.clone();
+    url.pathname = '/sign-in';
+    return NextResponse.redirect(url);
+  }
+
+  // Has session but hitting sign-in — send to tip
+  if (hasCookie && pathname.startsWith('/sign-in')) {
+    const url = req.nextUrl.clone();
+    url.pathname = '/tip';
+    return NextResponse.redirect(url);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|icon-.*\\.png|manifest\\.json).*)'],
+};

services/api/src/config.ts

@@ -1,4 +1,7 @@
-import 'dotenv/config';
+import { config as dotenvConfig } from 'dotenv';
+// Load .env.local first (takes precedence), then .env as fallback
+dotenvConfig({ path: '../../.env.local', override: false });
+dotenvConfig({ path: '../../.env', override: false });
 
 function require(name: string): string {
   const val = process.env[name];
@@ -11,7 +14,7 @@ function optional(name: string, fallback: string): string {
 }
 
 export const config = {
-  PORT: parseInt(optional('PORT', '3001'), 10),
+  PORT: parseInt(optional('PORT', '3078'), 10),
   NODE_ENV: optional('NODE_ENV', 'development'),
   DATABASE_PATH: optional('DATABASE_PATH', './data/oo.db'),
 

services/api/src/routes/auth.ts

@@ -36,6 +36,7 @@ router.get('/login', async (req: Request, res: Response) => {
   setTimeout(() => pendingStates.delete(state), 10 * 60 * 1000);
 
   const redirectUri = `${config.API_BASE_URL}/api/auth/callback`;
+  console.log('[auth] redirect_uri sent to Google:', redirectUri);
   const authUrl = client.buildAuthorizationUrl(cfg, {
     redirect_uri: redirectUri,
     scope: 'openid email profile',
@@ -59,7 +60,10 @@ router.get('/callback', async (req: Request, res: Response) => {
   pendingStates.delete(state);
 
   const redirectUri = `${config.API_BASE_URL}/api/auth/callback`;
-  const currentUrl = new URL(req.url, config.API_BASE_URL);
+  // req.url is router-relative (/callback?...), so reconstruct the full callback URL
+  // using the known redirectUri base + the query string from the incoming request.
+  const incomingSearch = new URL(req.url, 'http://localhost').search;
+  const currentUrl = new URL(redirectUri + incomingSearch);
 
   let tokens: client.TokenEndpointResponse;
   try {

services/api/src/routes/recommender.ts

@@ -8,27 +8,33 @@ import type { Tip } from '@oo/shared-types';
 
 const router: ExpressRouter = Router();
 
-/** Fetch active Todoist tasks for a user via their stored token */
-async function fetchTodoistTasks(accessToken: string): Promise<Tip[]> {
-  const res = await fetch('https://api.todoist.com/rest/v2/tasks?filter=today|overdue', {
+const CACHE_TTL_MS = 30_000; // 30 seconds
+const taskCache = new Map<string, { tips: Tip[]; fetchedAt: number }>();
+
+/** Fetch active Todoist tasks, with a 30s in-memory cache per user */
+async function fetchTodoistTasks(userId: string, accessToken: string): Promise<Tip[]> {
+  const cached = taskCache.get(userId);
+  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {
+    return cached.tips;
+  }
+
+  const res = await fetch('https://api.todoist.com/api/v1/tasks?filter=today%7Coverdue', {
     headers: { Authorization: `Bearer ${accessToken}` },
   });
 
-  if (!res.ok) return [];
+  if (!res.ok) return cached?.tips ?? [];
 
-  const tasks = (await res.json()) as Array<{
-    id: string;
-    content: string;
-    due?: { string: string };
-  }>;
-
-  return tasks.map((t) => ({
+  const body = (await res.json()) as { results: Array<{ id: string; content: string }> };
+  const tips: Tip[] = (body.results ?? []).map((t) => ({
     id: `todoist:${t.id}`,
     content: t.content,
     source: 'todoist' as const,
     sourceId: t.id,
     createdAt: new Date().toISOString(),
   }));
+
+  taskCache.set(userId, { tips, fetchedAt: Date.now() });
+  return tips;
 }
 
 /**
@@ -41,7 +47,7 @@ function randomPolicy(candidates: Tip[]): Tip | null {
 }
 
 /** POST /api/recommend */
-router.post('/', requireAuth, async (req: AuthenticatedRequest, res: Response) => {
+router.post('/recommend', requireAuth, async (req: AuthenticatedRequest, res: Response) => {
   const [token] = await db
     .select()
     .from(integrationTokens)
@@ -58,7 +64,7 @@ router.post('/', requireAuth, async (req: AuthenticatedRequest, res: Response) =
     return;
   }
 
-  const candidates = await fetchTodoistTasks(token.accessToken);
+  const candidates = await fetchTodoistTasks(req.userId!, token.accessToken);
   const tip = randomPolicy(candidates);
 
   if (!tip) {
@@ -88,6 +94,9 @@ router.post('/tip/:id/feedback', requireAuth, async (req: AuthenticatedRequest,
     createdAt: new Date().toISOString(),
   });
 
+  // Invalidate cache so next recommend fetches fresh tasks
+  taskCache.delete(req.userId!);
+
   // If done, mark complete in Todoist
   if (action === 'done' && tipId.startsWith('todoist:')) {
     const todoistId = tipId.slice(8);
@@ -103,7 +112,7 @@ router.post('/tip/:id/feedback', requireAuth, async (req: AuthenticatedRequest,
       .limit(1);
 
     if (token) {
-      await fetch(`https://api.todoist.com/rest/v2/tasks/${todoistId}/close`, {
+      await fetch(`https://api.todoist.com/api/v1/tasks/${todoistId}/close`, {
         method: 'POST',
         headers: { Authorization: `Bearer ${token.accessToken}` },
       }).catch(() => {});