feat: Phase 0 walking skeleton — monorepo, API, web, ML stub

Sets up the full Phase 0 foundation: - pnpm workspaces + turbo build graph; native module build approval - packages/shared-types: HTTP contracts (Tip, Auth, Integrations, User) - services/api: Express modular monolith with better-sqlite3/drizzle - auth: Google OAuth2 + PKCE via openid-client v6, cookie sessions - integrations: Todoist OAuth2 connect/disconnect, token vault - recommender: RandomPolicy over Todoist tasks, feedback sink - user: profile, consent capture, full account deletion (GDPR) - apps/web: Next.js 15, three pages (sign-in → connect → tip) - tip page: black canvas, hold-to-act gesture, action sheet - PWA manifest + theme - ml/serving: FastAPI stub implementing the POST /score contract - infra: docker-compose (core/full profiles), Dockerfiles, CI skeleton - .env.example with all required vars documented Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-14 12:41:24 +00:00
parent 7f173f88d3
commit 65218762be
44 changed files with 4574 additions and 0 deletions
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -0,0 +1,14 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001'}/api/:path*`,
+      },
+    ];
+  },
+};
+
+export default nextConfig;
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@oo/web",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf .next"
+  },
+  "dependencies": {
+    "@oo/shared-types": "workspace:*",
+    "next": "^15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/node": "^22.10.5",
+    "typescript": "^5.7.3"
+  }
+}
--- a/apps/web/public/manifest.json
+++ b/apps/web/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "oO",
+  "short_name": "oO",
+  "description": "One tip. Right now.",
+  "start_url": "/tip",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
--- a/apps/web/src/app/connect/page.tsx
+++ b/apps/web/src/app/connect/page.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { getSession, 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]);
+
+  // Show banner if just connected
+  const justConnected = searchParams.get('connected');
+
+  const isConnected = (provider: string) =>
+    integrations.some((i) => i.provider === provider && i.status === 'connected');
+
+  const handleDisconnect = async (provider: string) => {
+    setDisconnecting(provider);
+    await disconnectIntegration(provider);
+    await load();
+    setDisconnecting(null);
+  };
+
+  if (loading) {
+    return (
+      <main style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ color: 'var(--gray)', fontSize: '0.875rem' }}>Loading…</div>
+      </main>
+    );
+  }
+
+  const todoistConnected = isConnected('todoist');
+
+  return (
+    <main style={{ minHeight: '100vh', padding: '4rem 2rem', maxWidth: '480px', margin: '0 auto' }}>
+      <h2 style={{ fontSize: '1.5rem', fontWeight: 300, marginBottom: '0.5rem', letterSpacing: '-0.02em' }}>
+        Connect your apps
+      </h2>
+      <p style={{ color: 'var(--gray)', fontSize: '0.875rem', marginBottom: '3rem' }}>
+        oO reads what you need, when you need it.
+      </p>
+
+      {justConnected && (
+        <div style={{
+          background: 'rgba(255,255,255,0.06)',
+          borderRadius: '0.5rem',
+          padding: '0.75rem 1rem',
+          marginBottom: '1.5rem',
+          fontSize: '0.875rem',
+          color: 'var(--white)',
+        }}>
+          {justConnected} connected.
+        </div>
+      )}
+
+      {/* Todoist card */}
+      <div style={{
+        border: '1px solid rgba(255,255,255,0.1)',
+        borderRadius: '0.75rem',
+        padding: '1.25rem 1.5rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: '1rem',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.875rem' }}>
+          {/* Todoist logomark */}
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-label="Todoist">
+            <rect width="24" height="24" rx="6" fill="#DB4035"/>
+            <path d="M6 8.5L11 13l7-7" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+          <div>
+            <div style={{ fontWeight: 500, fontSize: '0.9rem' }}>Todoist</div>
+            <div style={{ color: 'var(--gray)', fontSize: '0.75rem', marginTop: '0.1rem' }}>
+              {todoistConnected ? 'Connected' : 'Tasks & to-dos'}
+            </div>
+          </div>
+        </div>
+
+        {todoistConnected ? (
+          <button
+            onClick={() => handleDisconnect('todoist')}
+            disabled={disconnecting === 'todoist'}
+            style={{
+              background: 'transparent',
+              border: '1px solid rgba(255,255,255,0.15)',
+              color: 'var(--gray)',
+              borderRadius: '0.375rem',
+              padding: '0.375rem 0.875rem',
+              fontSize: '0.8rem',
+            }}
+          >
+            {disconnecting === 'todoist' ? '…' : 'Disconnect'}
+          </button>
+        ) : (
+          <a
+            href="/api/integrations/todoist/connect?redirectTo=/connect"
+            style={{
+              background: 'var(--white)',
+              color: 'var(--black)',
+              borderRadius: '0.375rem',
+              padding: '0.375rem 0.875rem',
+              fontSize: '0.8rem',
+              fontWeight: 500,
+            }}
+          >
+            Connect
+          </a>
+        )}
+      </div>
+
+      {todoistConnected && (
+        <div style={{ marginTop: '3rem' }}>
+          <a
+            href="/tip"
+            style={{
+              display: 'block',
+              textAlign: 'center',
+              background: 'var(--white)',
+              color: 'var(--black)',
+              borderRadius: '0.5rem',
+              padding: '0.875rem',
+              fontWeight: 500,
+              fontSize: '0.9rem',
+            }}
+          >
+            See my tip →
+          </a>
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default function ConnectPage() {
+  return (
+    <Suspense>
+      <ConnectPageInner />
+    </Suspense>
+  );
+}
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -0,0 +1,31 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --black: #000;
+  --white: #fff;
+  --gray: #888;
+  --dim: rgba(255,255,255,0.08);
+  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
+}
+
+html, body {
+  height: 100%;
+  background: var(--black);
+  color: var(--white);
+  font-family: var(--font);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata, Viewport } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'oO',
+  description: 'One tip. Right now.',
+  manifest: '/manifest.json',
+  appleWebApp: { capable: true, statusBarStyle: 'black', title: 'oO' },
+};
+
+export const viewport: Viewport = {
+  themeColor: '#000000',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -0,0 +1,6 @@
+// Root redirect: send users to /tip (auth guard lives there)
+import { redirect } from 'next/navigation';
+
+export default function Home() {
+  redirect('/tip');
+}
--- a/apps/web/src/app/sign-in/page.tsx
+++ b/apps/web/src/app/sign-in/page.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getSession } from '@/lib/api';
+
+export default function SignIn() {
+  const router = useRouter();
+
+  useEffect(() => {
+    getSession().then(({ user }) => {
+      if (user) router.replace('/connect');
+    });
+  }, [router]);
+
+  return (
+    <main style={{
+      minHeight: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '2rem',
+      gap: '3rem',
+    }}>
+      <div style={{ textAlign: 'center' }}>
+        <h1 style={{ fontSize: '4rem', fontWeight: 200, letterSpacing: '-0.05em', marginBottom: '0.5rem' }}>oO</h1>
+        <p style={{ color: 'var(--gray)', fontSize: '1rem', fontWeight: 300 }}>
+          one tip. right now.
+        </p>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%', maxWidth: '320px' }}>
+        <a
+          href="/api/auth/login?redirectTo=/connect"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '0.75rem',
+            padding: '0.875rem 1.5rem',
+            background: 'var(--white)',
+            color: 'var(--black)',
+            borderRadius: '0.5rem',
+            fontSize: '0.9rem',
+            fontWeight: 500,
+            letterSpacing: '0.01em',
+          }}
+        >
+          <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden>
+            <path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z"/>
+            <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/>
+            <path fill="#FBBC05" d="M3.964 10.707A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.707V4.961H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.039l3.007-2.332z"/>
+            <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.96l3.007 2.332C4.672 5.163 6.656 3.58 9 3.58z"/>
+          </svg>
+          Continue with Google
+        </a>
+      </div>
+
+      <p style={{ color: 'var(--gray)', fontSize: '0.75rem', textAlign: 'center', maxWidth: '280px', lineHeight: 1.6 }}>
+        By continuing you agree to our{' '}
+        <a href="/legal/terms" style={{ textDecoration: 'underline' }}>Terms</a>
+        {' '}and{' '}
+        <a href="/legal/privacy" style={{ textDecoration: 'underline' }}>Privacy Policy</a>.
+      </p>
+    </main>
+  );
+}
--- a/apps/web/src/app/tip/page.tsx
+++ b/apps/web/src/app/tip/page.tsx
@@ -0,0 +1,218 @@
+'use client';
+
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { getSession, getRecommendation, sendFeedback } from '@/lib/api';
+import type { Tip } from '@oo/shared-types';
+
+type State = 'loading' | 'tip' | 'empty' | 'actions' | 'done';
+
+export default function TipPage() {
+  const router = useRouter();
+  const [tip, setTip] = useState<Tip | null>(null);
+  const [state, setState] = useState<State>('loading');
+  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;
+    }
+    setTip(rec.tip);
+    setState('tip');
+  }, [router]);
+
+  useEffect(() => { loadTip(); }, [loadTip]);
+
+  const react = async (action: 'done' | 'dismiss' | 'snooze') => {
+    if (!tip) return;
+    setState('done');
+    await sendFeedback(tip.id, { action });
+    setTimeout(() => loadTip(), 600);
+  };
+
+  const onPointerDown = () => {
+    if (state !== 'tip') return;
+    setPressed(true);
+    holdTimer.current = setTimeout(() => {
+      setState('actions');
+      setPressed(false);
+    }, 600);
+  };
+
+  const onPointerUp = () => {
+    setPressed(false);
+    if (holdTimer.current) {
+      clearTimeout(holdTimer.current);
+      holdTimer.current = null;
+    }
+  };
+
+  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',
+      }} />
+
+      {state === 'loading' && (
+        <div style={{ color: 'rgba(255,255,255,0.2)', fontSize: '0.75rem', letterSpacing: '0.15em' }}>
+          ···
+        </div>
+      )}
+
+      {state === 'tip' && tip && (
+        <div style={{ textAlign: 'center', maxWidth: '420px' }}>
+          <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',
+            textTransform: 'uppercase',
+          }}>
+            hold to act
+          </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={{
+              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>
+      )}
+
+      {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')} />
+            <button
+              onClick={() => setState('tip')}
+              style={{
+                background: 'transparent',
+                border: 'none',
+                color: 'rgba(255,255,255,0.25)',
+                padding: '0.5rem',
+                fontSize: '0.8rem',
+                marginTop: '0.25rem',
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        </>
+      )}
+    </main>
+  );
+}
+
+function ActionButton({ label, onClick, primary }: { label: string; onClick: () => void; primary?: boolean }) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        background: primary ? 'var(--white)' : 'rgba(255,255,255,0.06)',
+        color: primary ? 'var(--black)' : 'var(--white)',
+        border: 'none',
+        borderRadius: '0.625rem',
+        padding: '1rem',
+        fontSize: '0.95rem',
+        fontWeight: primary ? 500 : 400,
+        width: '100%',
+        textAlign: 'center',
+      }}
+    >
+      {label}
+    </button>
+  );
+}
--- a/apps/web/src/lib/api.ts
+++ b/apps/web/src/lib/api.ts
@@ -0,0 +1,64 @@
+import type { RecommendResponse, TipFeedback, IntegrationsResponse, UserProfile } from '@oo/shared-types';
+
+const API = '/api';
+
+async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${API}${path}`, {
+    credentials: 'include',
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...init?.headers,
+    },
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw Object.assign(new Error(err.error ?? 'API error'), { status: res.status });
+  }
+  if (res.status === 204) return undefined as T;
+  return res.json() as T;
+}
+
+export async function getSession() {
+  return apiFetch<{ user: { id: string; email: string; name?: string; image?: string } | null }>('/auth/session');
+}
+
+export async function getRecommendation(): Promise<RecommendResponse | null> {
+  try {
+    return await apiFetch<RecommendResponse>('/recommend', { method: 'POST' });
+  } catch (e: any) {
+    if (e.status === 204 || e.status === 422) return null;
+    throw e;
+  }
+}
+
+export async function sendFeedback(tipId: string, feedback: TipFeedback) {
+  return apiFetch<{ ok: boolean }>(`/tip/${encodeURIComponent(tipId)}/feedback`, {
+    method: 'POST',
+    body: JSON.stringify(feedback),
+  });
+}
+
+export async function getIntegrations(): Promise<IntegrationsResponse> {
+  return apiFetch<IntegrationsResponse>('/integrations');
+}
+
+export async function disconnectIntegration(provider: string) {
+  return apiFetch<{ ok: boolean }>(`/integrations/${provider}`, { method: 'DELETE' });
+}
+
+export async function getProfile(): Promise<UserProfile> {
+  return apiFetch<UserProfile>('/user/me');
+}
+
+export async function giveConsent() {
+  return apiFetch<{ ok: boolean }>('/user/consent', { method: 'POST' });
+}
+
+export async function deleteAccount() {
+  return apiFetch<{ ok: boolean }>('/user/me', { method: 'DELETE' });
+}
+
+export async function logout() {
+  return apiFetch<{ ok: boolean }>('/auth/logout', { method: 'POST' });
+}
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/apps/web/tsconfig.tsbuildinfo
+++ b/apps/web/tsconfig.tsbuildinfo