phase-0: foundation, both apps boot end to end

Monorepo (pnpm workspaces) with two deployable apps and three pure packages. apps/api (Hono on Node): Zod validated env that fails fast and names the problem, Kysely factories for SQLite and Postgres chosen by DATABASE_URL scheme, portable migrations covering the whole SPEC section 5 schema, Better Auth with the four roles and seeded demo accounts, localized error envelope, /healthz and /readyz, graceful SIGTERM drain. Dialect specific SQL is confined to the two factories. apps/web (Next.js App Router): locale routed shell in es and en with a language switcher, sign in screen, and a runtime /api proxy so the browser only ever sees one origin and cookies stay first party. packages/i18n ships both catalogs complete; es is generated from COPY.md and a test re-derives it from the document on every run so it cannot drift. packages/contracts holds the Zod schemas and the typed client the web app uses. Verified: 43 vitest tests, 14 Playwright tests on mobile and desktop, typecheck and lint clean, migrate and seed from a clean database, sign in through the proxy with CSRF rejection of foreign origins. Not verified here: docker compose. This user has no access to the docker socket. RULES.md is absent from docs/, so packages/rules exports only RULES_VERSION and no tax rule, check digit or deadline was invented. See DECISIONS.md. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-03 21:46:35 +00:00
commit ae2ea20b7e
106 changed files with 11541 additions and 0 deletions
@@ -0,0 +1,52 @@
+import { isApiError } from '@impuestos/contracts';
+import { setRequestLocale } from 'next-intl/server';
+import { getT } from '@/i18n/t';
+import { redirect } from '@/i18n/navigation';
+import { Card } from '@/components/ui/card';
+import { LanguageSwitcher } from '@/components/language-switcher';
+import { serverApi } from '@/lib/api-server';
+
+/**
+ * Phase 0 shell. It exists to prove the whole chain end to end: browser to the Next
+ * rewrite, to the API, through the typed client, with the session cookie intact.
+ * The real dashboard (FLOWS.md Flow C) replaces this in phase 4.
+ */
+export default async function InicioPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getT(locale);
+
+  const api = await serverApi();
+  const profile = await api.getProfile().catch((error: unknown) => {
+    if (!isApiError(error)) throw error;
+    // 404 is the documented state for a user who has not finished setup yet.
+    if (error.code === 'not_found') return null;
+    if (error.code === 'unauthorized') redirect({ href: '/login', locale });
+    throw error;
+  });
+
+  return (
+    <div className="mx-auto flex min-h-dvh max-w-2xl flex-col">
+      <header className="flex items-center justify-between px-5 py-4">
+        <h1 className="text-base font-semibold tracking-tight">{t('home.title')}</h1>
+        <LanguageSwitcher />
+      </header>
+
+      <main className="px-5 pb-16">
+        <Card className="space-y-2">
+          {profile ? (
+            <>
+              <p className="text-sm text-[var(--text-muted)]">{t('setup.fullName')}</p>
+              <p className="text-2xl font-semibold tracking-tight">{profile.fullName}</p>
+            </>
+          ) : (
+            <>
+              <h2 className="text-xl font-semibold tracking-tight">{t('setup.step1.title')}</h2>
+              <p className="text-sm text-[var(--text-muted)]">{t('setup.income.help')}</p>
+            </>
+          )}
+        </Card>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { LanguageSwitcher } from '@/components/language-switcher';
+import { useT } from '@/i18n/t';
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+  const t = useT();
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <header className="flex items-center justify-between px-5 py-4">
+        <span className="text-base font-semibold tracking-tight">{t('common.appName')}</span>
+        <LanguageSwitcher />
+      </header>
+      <main className="flex flex-1 items-center justify-center px-5 pb-16">
+        <div className="w-full max-w-sm">{children}</div>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,75 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from '@/i18n/navigation';
+import { useT } from '@/i18n/t';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { authClient } from '@/lib/auth-client';
+
+export function LoginForm() {
+  const t = useT();
+  const router = useRouter();
+
+  const signIn = useMutation({
+    mutationFn: async (form: { email: string; password: string }) => {
+      const { error } = await authClient.signIn.email(form);
+      if (error) throw new Error(error.message ?? 'sign_in_failed');
+    },
+    onSuccess: () => router.push('/inicio'),
+  });
+
+  return (
+    <Card className="space-y-6">
+      <h1 className="text-2xl font-semibold tracking-tight text-balance">{t('auth.login.title')}</h1>
+
+      <form
+        className="space-y-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          const data = new FormData(event.currentTarget);
+          signIn.mutate({
+            email: String(data.get('email') ?? ''),
+            password: String(data.get('password') ?? ''),
+          });
+        }}
+      >
+        <div className="space-y-1.5">
+          <Label htmlFor="email">{t('auth.register.email')}</Label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            aria-invalid={signIn.isError}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="password">{t('auth.login.password')}</Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            aria-invalid={signIn.isError}
+          />
+        </div>
+
+        {signIn.isError ? (
+          <p role="alert" className="text-sm text-overdue">
+            {t('auth.login.failed')}
+          </p>
+        ) : null}
+
+        <Button type="submit" size="lg" block disabled={signIn.isPending}>
+          {signIn.isPending ? t('common.loading') : t('auth.login.submit')}
+        </Button>
+      </form>
+    </Card>
+  );
+}
@@ -0,0 +1,8 @@
+import { setRequestLocale } from 'next-intl/server';
+import { LoginForm } from './login-form';
+
+export default async function LoginPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  return <LoginForm />;
+}
@@ -0,0 +1,49 @@
+import { isLocale } from '@impuestos/i18n';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { NextIntlClientProvider } from 'next-intl';
+import { setRequestLocale } from 'next-intl/server';
+import { getT } from '@/i18n/t';
+import { notFound } from 'next/navigation';
+import type { ReactNode } from 'react';
+import { Providers } from '@/components/providers';
+import { routing } from '@/i18n/routing';
+import '../globals.css';
+
+// Self hosted by next/font: no third party font request at runtime, which keeps the
+// CSP tight (SPEC.md section 14).
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await props.params;
+  const t = await getT(locale);
+  return { title: t('common.appName') };
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  if (!isLocale(locale)) notFound();
+  setRequestLocale(locale);
+
+  return (
+    <html lang={locale} className={inter.variable} suppressHydrationWarning>
+      <body className="min-h-dvh font-sans antialiased">
+        <NextIntlClientProvider>
+          <Providers>{children}</Providers>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,10 @@
+import { redirect } from '@/i18n/navigation';
+
+/**
+ * The landing page (FLOWS.md Flow A1) is built in phase 2. Until then the root goes
+ * straight to sign in so the shell is reachable.
+ */
+export default async function LandingPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  redirect({ href: '/login', locale });
+}
@@ -0,0 +1,68 @@
+import type { NextRequest } from 'next/server';
+
+/**
+ * Single origin proxy: the browser only ever talks to the web origin, and everything
+ * under /api is forwarded to the API container. Cookies stay first party, so there is
+ * no CORS anywhere in v1.
+ *
+ * SPEC-GAP: SPEC.md section 2 specifies Next rewrites for this. Next bakes rewrite
+ * destinations into the build manifest, which would make API_INTERNAL_URL a build time
+ * value and stop one image from running in both compose and k8s. A route handler reads
+ * it per request instead, which is what "all configuration via .env" requires.
+ */
+
+export const dynamic = 'force-dynamic';
+
+/** Set by the proxy or the runtime, never forwarded verbatim. */
+const STRIPPED_REQUEST_HEADERS = new Set([
+  'host',
+  'connection',
+  'content-length',
+  'transfer-encoding',
+  'accept-encoding',
+]);
+
+const STRIPPED_RESPONSE_HEADERS = new Set(['content-encoding', 'content-length', 'transfer-encoding']);
+
+function apiBaseUrl(): string {
+  return (process.env['API_INTERNAL_URL'] ?? 'http://localhost:4000').replace(/\/$/, '');
+}
+
+async function proxy(request: NextRequest): Promise<Response> {
+  const incoming = new URL(request.url);
+  const target = `${apiBaseUrl()}${incoming.pathname}${incoming.search}`;
+
+  const headers = new Headers();
+  request.headers.forEach((value, key) => {
+    if (!STRIPPED_REQUEST_HEADERS.has(key.toLowerCase())) headers.set(key, value);
+  });
+
+  const hasBody = request.method !== 'GET' && request.method !== 'HEAD';
+  const upstream = await fetch(target, {
+    method: request.method,
+    headers,
+    redirect: 'manual',
+    ...(hasBody ? { body: request.body, duplex: 'half' } : {}),
+  } as RequestInit & { duplex?: 'half' });
+
+  const responseHeaders = new Headers();
+  upstream.headers.forEach((value, key) => {
+    const name = key.toLowerCase();
+    if (name === 'set-cookie') return;
+    if (!STRIPPED_RESPONSE_HEADERS.has(name)) responseHeaders.set(key, value);
+  });
+  // Session and CSRF cookies arrive as several Set-Cookie headers and must stay separate.
+  for (const cookie of upstream.headers.getSetCookie()) {
+    responseHeaders.append('set-cookie', cookie);
+  }
+
+  return new Response(upstream.body, { status: upstream.status, headers: responseHeaders });
+}
+
+export const GET = proxy;
+export const POST = proxy;
+export const PUT = proxy;
+export const PATCH = proxy;
+export const DELETE = proxy;
+export const HEAD = proxy;
+export const OPTIONS = proxy;
@@ -0,0 +1,96 @@
+@import 'tailwindcss';
+
+/*
+ * Design tokens, FLOWS.md section 1. Calm fintech: one accent, four semantic status
+ * colors used consistently everywhere, generous whitespace, big confident numbers.
+ */
+@theme {
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+
+  /* Accent: deep teal. Primary actions and links only, nothing else. */
+  --color-accent-50: oklch(0.97 0.02 190);
+  --color-accent-100: oklch(0.93 0.04 190);
+  --color-accent-200: oklch(0.87 0.07 190);
+  --color-accent-400: oklch(0.68 0.11 190);
+  --color-accent-500: oklch(0.58 0.11 190);
+  --color-accent-600: oklch(0.48 0.1 191);
+  --color-accent-700: oklch(0.4 0.085 192);
+  --color-accent-900: oklch(0.27 0.055 194);
+
+  /* Status. positive = a favor, al dia. attention = action required.
+     overdue = missed deadlines and invalid documents ONLY, never "tax to pay".
+     neutral = everything else. */
+  --color-positive: oklch(0.62 0.14 155);
+  --color-positive-soft: oklch(0.95 0.04 155);
+  --color-attention: oklch(0.75 0.15 78);
+  --color-attention-soft: oklch(0.96 0.05 85);
+  --color-overdue: oklch(0.58 0.19 25);
+  --color-overdue-soft: oklch(0.95 0.04 25);
+  --color-neutral-fg: oklch(0.45 0.02 250);
+
+  --radius-card: 1rem;
+}
+
+/* Explicit toggle wins over the system preference in both directions (FLOWS.md
+   section 1: dark mode from system preference plus a toggle). */
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+:root {
+  --surface: oklch(0.99 0.003 250);
+  --surface-raised: oklch(1 0 0);
+  --border-subtle: oklch(0.92 0.005 250);
+  --text: oklch(0.22 0.015 255);
+  --text-muted: oklch(0.52 0.015 255);
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --surface: oklch(0.18 0.012 255);
+    --surface-raised: oklch(0.23 0.014 255);
+    --border-subtle: oklch(0.31 0.012 255);
+    --text: oklch(0.96 0.004 250);
+    --text-muted: oklch(0.72 0.012 255);
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme='dark'] {
+  --surface: oklch(0.18 0.012 255);
+  --surface-raised: oklch(0.23 0.014 255);
+  --border-subtle: oklch(0.31 0.012 255);
+  --text: oklch(0.96 0.004 250);
+  --text-muted: oklch(0.72 0.012 255);
+  color-scheme: dark;
+}
+
+@layer base {
+  * {
+    border-color: var(--border-subtle);
+  }
+
+  body {
+    background-color: var(--surface);
+    color: var(--text);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Every money figure is tabular. FLOWS.md section 1. */
+  .tnum {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'tnum';
+  }
+}
+
+/* Motion is purposeful and always interruptible. This disables the non essential
+   kind globally, which the GSAP context mirrors. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
@@ -0,0 +1,6 @@
+/** Liveness for the web container. Renders nothing and never calls the API. */
+export const dynamic = 'force-dynamic';
+
+export function GET(): Response {
+  return Response.json({ ok: true });
+}