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>

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).*)'],
+};