availsync 0.1.0

package/docs/superpowers/plans/2026-05-11-availsync-frontend-sales-flow.md

@@ -0,0 +1,2445 @@
+# Availsync Frontend Sales Flow Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a complete frontend that can explain Availsync, sell the product, onboard a buyer, create their first org/agent, show the API key, and let them verify the backend works through the UI.
+
+**Architecture:** Add a Next.js frontend in `frontend/` that talks to the existing Express API at `http://localhost:3000`. Keep the first version purchase-ready but pragmatic: Stripe checkout can be wired through a small backend billing extension, while the core no-payment path lets a buyer create an org, create an agent, configure availability, check slots, and book/release holds.
+
+**Tech Stack:** Next.js App Router, TypeScript, Tailwind CSS, shadcn-style UI primitives, React Hook Form, Zod, TanStack Query, Playwright, Stripe Checkout for paid plans, existing Availsync REST API.
+
+---
+
+## Product Summary
+
+Availsync is the scheduling source of truth for AI agents.
+
+The frontend must make this immediately clear:
+
+- AI agents can create double-bookings when sales bots, recruiting bots, and calendar assistants act independently.
+- Availsync gives all agents one shared rules and holds layer before anything is booked.
+- The buyer gets a REST API, agent API keys, conflict resolution, availability windows, preferences, holds, audit events, Docker local deployment, and optional MCP access.
+
+Primary homepage line:
+
+```text
+One scheduling source of truth for AI agents
+```
+
+Primary subheadline:
+
+```text
+Prevent sales bots, recruiting agents, and calendar automations from double-booking the same time slot.
+```
+
+Primary CTA:
+
+```text
+Start free
+```
+
+Secondary CTA:
+
+```text
+View API docs
+```
+
+---
+
+## Required Buyer Journey
+
+The frontend is complete only when a new buyer can do this:
+
+1. Visit the homepage and understand what Availsync sells.
+2. Compare plans on pricing.
+3. Start free or choose a paid plan.
+4. Create an organization.
+5. Create their first AI scheduling agent.
+6. See and copy the generated API key once.
+7. Create an availability window.
+8. Check availability from the UI.
+9. Book a hold from the UI.
+10. Release the hold from the UI.
+11. Read a quickstart doc that shows how to use the same API from curl.
+
+---
+
+## File Structure
+
+Create these files:
+
+```text
+frontend/
+  package.json
+  next.config.mjs
+  tsconfig.json
+  tailwind.config.ts
+  postcss.config.mjs
+  playwright.config.ts
+  .env.example
+  app/
+    globals.css
+    layout.tsx
+    page.tsx
+    pricing/page.tsx
+    signup/page.tsx
+    checkout/page.tsx
+    docs/page.tsx
+    docs/quickstart/page.tsx
+    app/layout.tsx
+    app/page.tsx
+    app/onboarding/page.tsx
+    app/agents/page.tsx
+    app/agents/[agentId]/page.tsx
+    app/availability/page.tsx
+    app/holds/page.tsx
+  components/
+    marketing/Hero.tsx
+    marketing/ProblemSolution.tsx
+    marketing/HowItWorks.tsx
+    marketing/UseCases.tsx
+    marketing/PricingTeaser.tsx
+    marketing/Faq.tsx
+    marketing/SiteHeader.tsx
+    marketing/SiteFooter.tsx
+    pricing/PricingCards.tsx
+    dashboard/AppShell.tsx
+    dashboard/MetricCard.tsx
+    dashboard/AgentForm.tsx
+    dashboard/AvailabilityWindowForm.tsx
+    dashboard/AvailabilityChecker.tsx
+    dashboard/HoldForm.tsx
+    ui/Button.tsx
+    ui/Card.tsx
+    ui/Input.tsx
+    ui/Select.tsx
+    ui/Textarea.tsx
+    ui/Tabs.tsx
+  lib/
+    api.ts
+    schemas.ts
+    storage.ts
+    format.ts
+    plans.ts
+  tests/
+    smoke.spec.ts
+```
+
+Modify these backend files:
+
+```text
+src/index.ts
+src/routes/billing.ts
+package.json
+.env.example
+```
+
+Do not modify:
+
+```text
+plan.md
+```
+
+---
+
+## API Contract To Use
+
+The frontend must call the existing API:
+
+```text
+GET    /health
+POST   /v1/orgs
+POST   /v1/orgs/:org_id/agents
+GET    /v1/orgs/:org_id/agents
+POST   /v1/availability-windows
+GET    /v1/availability-windows
+GET    /v1/availability
+POST   /v1/holds
+GET    /v1/holds
+DELETE /v1/holds/:hold_id
+GET    /v1/preferences/:agent_id
+PUT    /v1/preferences/:agent_id
+```
+
+For paid purchase, add these backend endpoints:
+
+```text
+POST /v1/billing/checkout
+POST /v1/billing/webhook
+GET  /v1/billing/subscription/:org_id
+```
+
+Initial purchase implementation can use Stripe test mode. If Stripe env vars are absent, the checkout endpoint must return `501 billing_not_configured` with a clear message, while the free plan remains usable.
+
+---
+
+## Task 1: Create Frontend Project Shell
+
+**Files:**
+- Create: `frontend/package.json`
+- Create: `frontend/next.config.mjs`
+- Create: `frontend/tsconfig.json`
+- Create: `frontend/tailwind.config.ts`
+- Create: `frontend/postcss.config.mjs`
+- Create: `frontend/.env.example`
+- Create: `frontend/app/globals.css`
+- Create: `frontend/app/layout.tsx`
+
+- [ ] **Step 1: Create `frontend/package.json`**
+
+```json
+{
+  "name": "availsync-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start -p 3001",
+    "lint": "next lint",
+    "test:e2e": "playwright test"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.53.0",
+    "tailwind-merge": "^2.5.4",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^15.0.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.9.3"
+  }
+}
+```
+
+- [ ] **Step 2: Create config files**
+
+`frontend/next.config.mjs`:
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+};
+
+export default nextConfig;
+```
+
+`frontend/tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+```
+
+`frontend/tailwind.config.ts`:
+
+```ts
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        ink: '#101418',
+        paper: '#f7f5ef',
+        line: '#d8d2c4',
+        moss: '#556b4e',
+        rust: '#b75c2b',
+        blue: '#315f8a',
+      },
+      boxShadow: {
+        panel: '0 16px 48px rgba(16, 20, 24, 0.10)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+```
+
+`frontend/postcss.config.mjs`:
+
+```js
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;
+```
+
+`frontend/.env.example`:
+
+```text
+NEXT_PUBLIC_API_URL=http://localhost:3000
+NEXT_PUBLIC_APP_URL=http://localhost:3001
+```
+
+- [ ] **Step 3: Create global layout**
+
+`frontend/app/globals.css`:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #f7f5ef;
+  color: #101418;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+```
+
+`frontend/app/layout.tsx`:
+
+```tsx
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Availsync - Scheduling source of truth for AI agents',
+  description:
+    'Prevent sales bots, recruiting agents, and calendar automations from double-booking the same time slot.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+- [ ] **Step 4: Install and verify**
+
+Run:
+
+```bash
+cd frontend
+npm install
+npm run build
+```
+
+Expected:
+
+```text
+Compiled successfully
+```
+
+---
+
+## Task 2: Shared API Client And Local Session Storage
+
+**Files:**
+- Create: `frontend/lib/schemas.ts`
+- Create: `frontend/lib/api.ts`
+- Create: `frontend/lib/storage.ts`
+- Create: `frontend/lib/format.ts`
+
+- [ ] **Step 1: Create schemas**
+
+`frontend/lib/schemas.ts`:
+
+```ts
+import { z } from 'zod';
+
+export const agentTypeSchema = z.enum(['external_meeting', 'internal', 'focus', 'generic']);
+
+export const orgSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string(),
+  plan: z.enum(['free', 'individual', 'team']),
+  agent_limit: z.number(),
+  created_at: z.string(),
+});
+
+export const agentSchema = z.object({
+  id: z.string().uuid(),
+  org_id: z.string().uuid(),
+  name: z.string(),
+  agent_type: agentTypeSchema,
+  priority: z.number(),
+  created_at: z.string(),
+});
+
+export const holdSchema = z.object({
+  id: z.string().uuid(),
+  agent_id: z.string().uuid(),
+  org_id: z.string().uuid(),
+  start_at: z.string(),
+  end_at: z.string(),
+  reason: z.string().nullable().optional(),
+  status: z.enum(['confirmed', 'superseded', 'released']),
+  booked_by_agent_id: z.string().uuid().nullable().optional(),
+  metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+  created_at: z.string(),
+});
+
+export const slotSchema = z.object({
+  start: z.string(),
+  end: z.string(),
+  confidence: z.number(),
+  competing_holds_count: z.number(),
+});
+
+export const availabilityWindowSchema = z.object({
+  id: z.string().uuid(),
+  agent_id: z.string().uuid(),
+  start_at: z.string(),
+  end_at: z.string(),
+  window_type: z.enum(['available', 'focus', 'blocked']),
+  recurrence: z.string().nullable().optional(),
+});
+
+export type AgentType = z.infer<typeof agentTypeSchema>;
+export type Org = z.infer<typeof orgSchema>;
+export type Agent = z.infer<typeof agentSchema>;
+export type Hold = z.infer<typeof holdSchema>;
+export type Slot = z.infer<typeof slotSchema>;
+export type AvailabilityWindow = z.infer<typeof availabilityWindowSchema>;
+```
+
+- [ ] **Step 2: Create API client**
+
+`frontend/lib/api.ts`:
+
+```ts
+import {
+  agentSchema,
+  availabilityWindowSchema,
+  holdSchema,
+  orgSchema,
+  slotSchema,
+  type AgentType,
+} from './schemas';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+
+async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const response = await fetch(`${API_URL}${path}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(options.headers || {}),
+    },
+    cache: 'no-store',
+  });
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    throw new Error(body.message || body.error || `Request failed with ${response.status}`);
+  }
+  return body as T;
+}
+
+export async function createOrg(name: string) {
+  const response = await request<{ org: unknown }>('/v1/orgs', {
+    method: 'POST',
+    body: JSON.stringify({ name }),
+  });
+  return orgSchema.parse(response.org);
+}
+
+export async function createAgent(input: {
+  orgId: string;
+  name: string;
+  agent_type: AgentType;
+  priority: number;
+}) {
+  const response = await request<{ agent: unknown; api_key: string }>(
+    `/v1/orgs/${input.orgId}/agents`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        name: input.name,
+        agent_type: input.agent_type,
+        priority: input.priority,
+      }),
+    },
+  );
+  return {
+    agent: agentSchema.parse(response.agent),
+    apiKey: response.api_key,
+  };
+}
+
+export async function listAgents(orgId: string) {
+  const response = await request<{ agents: unknown[] }>(`/v1/orgs/${orgId}/agents`);
+  return response.agents.map((agent) => agentSchema.parse(agent));
+}
+
+export async function createAvailabilityWindow(input: {
+  apiKey: string;
+  agent_id: string;
+  start_at: string;
+  end_at: string;
+  window_type: 'available' | 'focus' | 'blocked';
+}) {
+  const response = await request<{ window: unknown }>('/v1/availability-windows', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${input.apiKey}` },
+    body: JSON.stringify({
+      agent_id: input.agent_id,
+      start_at: input.start_at,
+      end_at: input.end_at,
+      window_type: input.window_type,
+    }),
+  });
+  return availabilityWindowSchema.parse(response.window);
+}
+
+export async function checkAvailability(input: {
+  apiKey: string;
+  agent_id: string;
+  from: string;
+  to: string;
+  duration_minutes: number;
+}) {
+  const query = new URLSearchParams({
+    agent_id: input.agent_id,
+    from: input.from,
+    to: input.to,
+    duration_minutes: String(input.duration_minutes),
+  });
+  const response = await request<{ slots: unknown[]; total_slots: number }>(
+    `/v1/availability?${query.toString()}`,
+    {
+      headers: { Authorization: `Bearer ${input.apiKey}` },
+    },
+  );
+  return {
+    slots: response.slots.map((slot) => slotSchema.parse(slot)),
+    totalSlots: response.total_slots,
+  };
+}
+
+export async function createHold(input: {
+  apiKey: string;
+  agent_id: string;
+  start_at: string;
+  end_at: string;
+  reason?: string;
+}) {
+  const response = await request<{ hold: unknown }>('/v1/holds', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${input.apiKey}` },
+    body: JSON.stringify({
+      agent_id: input.agent_id,
+      start_at: input.start_at,
+      end_at: input.end_at,
+      reason: input.reason,
+    }),
+  });
+  return holdSchema.parse(response.hold);
+}
+
+export async function listHolds(apiKey: string) {
+  const response = await request<{ holds: unknown[] }>('/v1/holds', {
+    headers: { Authorization: `Bearer ${apiKey}` },
+  });
+  return response.holds.map((hold) => holdSchema.parse(hold));
+}
+
+export async function releaseHold(apiKey: string, holdId: string) {
+  const response = await request<{ hold: unknown }>(`/v1/holds/${holdId}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${apiKey}` },
+  });
+  return holdSchema.parse(response.hold);
+}
+```
+
+- [ ] **Step 3: Create local storage helpers**
+
+`frontend/lib/storage.ts`:
+
+```ts
+'use client';
+
+export type StoredSession = {
+  orgId: string;
+  agentId: string;
+  apiKey: string;
+};
+
+const KEY = 'availsync_session';
+
+export function saveSession(session: StoredSession): void {
+  window.localStorage.setItem(KEY, JSON.stringify(session));
+}
+
+export function loadSession(): StoredSession | null {
+  const raw = window.localStorage.getItem(KEY);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as StoredSession;
+  } catch {
+    return null;
+  }
+}
+
+export function clearSession(): void {
+  window.localStorage.removeItem(KEY);
+}
+```
+
+`frontend/lib/format.ts`:
+
+```ts
+export function toLocalInputValue(date: Date): string {
+  const offset = date.getTimezoneOffset();
+  const local = new Date(date.getTime() - offset * 60_000);
+  return local.toISOString().slice(0, 16);
+}
+
+export function fromLocalInputValue(value: string): string {
+  return new Date(value).toISOString();
+}
+
+export function formatDateTime(value: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(value));
+}
+```
+
+- [ ] **Step 4: Verify build**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Compiled successfully
+```
+
+---
+
+## Task 3: UI Primitives
+
+**Files:**
+- Create: `frontend/components/ui/Button.tsx`
+- Create: `frontend/components/ui/Card.tsx`
+- Create: `frontend/components/ui/Input.tsx`
+- Create: `frontend/components/ui/Select.tsx`
+- Create: `frontend/components/ui/Textarea.tsx`
+- Create: `frontend/components/ui/Tabs.tsx`
+
+- [ ] **Step 1: Create button and card primitives**
+
+`frontend/components/ui/Button.tsx`:
+
+```tsx
+import Link from 'next/link';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  href?: string;
+  children: ReactNode;
+};
+
+const variants = {
+  primary: 'bg-ink text-white hover:bg-moss',
+  secondary: 'bg-white text-ink border border-line hover:border-ink',
+  ghost: 'bg-transparent text-ink hover:bg-white',
+};
+
+export function Button({ variant = 'primary', href, className, children, ...props }: ButtonProps) {
+  const classes = twMerge(
+    'inline-flex min-h-12 items-center justify-center gap-2 rounded-md px-5 text-sm font-semibold transition',
+    variants[variant],
+    className,
+  );
+
+  if (href) {
+    return (
+      <Link className={classes} href={href}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  );
+}
+```
+
+`frontend/components/ui/Card.tsx`:
+
+```tsx
+import { type HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={twMerge('rounded-md border border-line bg-white p-5 shadow-panel', className)}
+      {...props}
+    />
+  );
+}
+```
+
+- [ ] **Step 2: Create form primitives**
+
+`frontend/components/ui/Input.tsx`:
+
+```tsx
+import { type InputHTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      className={twMerge(
+        'min-h-12 w-full rounded-md border border-line bg-white px-3 text-base outline-none focus:border-blue',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+`frontend/components/ui/Select.tsx`:
+
+```tsx
+import { type SelectHTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      className={twMerge(
+        'min-h-12 w-full rounded-md border border-line bg-white px-3 text-base outline-none focus:border-blue',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+`frontend/components/ui/Textarea.tsx`:
+
+```tsx
+import { type TextareaHTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Textarea({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      className={twMerge(
+        'min-h-28 w-full rounded-md border border-line bg-white px-3 py-2 text-base outline-none focus:border-blue',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+- [ ] **Step 3: Create simple tabs helper**
+
+`frontend/components/ui/Tabs.tsx`:
+
+```tsx
+import { type ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function TabList({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={twMerge('flex gap-2 border-b border-line', className)}>{children}</div>;
+}
+
+export function TabButton({
+  active,
+  children,
+}: {
+  active?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <span
+      className={twMerge(
+        'px-3 py-2 text-sm font-semibold',
+        active ? 'border-b-2 border-ink text-ink' : 'text-ink/60',
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+```
+
+- [ ] **Step 4: Verify build**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Compiled successfully
+```
+
+---
+
+## Task 4: Marketing Homepage
+
+**Files:**
+- Create: `frontend/components/marketing/SiteHeader.tsx`
+- Create: `frontend/components/marketing/SiteFooter.tsx`
+- Create: `frontend/components/marketing/Hero.tsx`
+- Create: `frontend/components/marketing/ProblemSolution.tsx`
+- Create: `frontend/components/marketing/HowItWorks.tsx`
+- Create: `frontend/components/marketing/UseCases.tsx`
+- Create: `frontend/components/marketing/PricingTeaser.tsx`
+- Create: `frontend/components/marketing/Faq.tsx`
+- Create: `frontend/app/page.tsx`
+
+- [ ] **Step 1: Create header and footer**
+
+`frontend/components/marketing/SiteHeader.tsx`:
+
+```tsx
+import { CalendarCheck } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+
+export function SiteHeader() {
+  return (
+    <header className="border-b border-line bg-paper/95">
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
+        <a className="flex items-center gap-2 font-semibold" href="/">
+          <CalendarCheck className="h-5 w-5" />
+          Availsync
+        </a>
+        <nav className="hidden items-center gap-6 text-sm md:flex">
+          <a href="/pricing">Pricing</a>
+          <a href="/docs">Docs</a>
+          <a href="/docs/quickstart">Quickstart</a>
+        </nav>
+        <Button href="/signup">Start free</Button>
+      </div>
+    </header>
+  );
+}
+```
+
+`frontend/components/marketing/SiteFooter.tsx`:
+
+```tsx
+export function SiteFooter() {
+  return (
+    <footer className="border-t border-line bg-ink text-white">
+      <div className="mx-auto grid max-w-6xl gap-6 px-4 py-10 md:grid-cols-3">
+        <div>
+          <p className="font-semibold">Availsync</p>
+          <p className="mt-2 text-sm text-white/70">Scheduling source of truth for AI agents.</p>
+        </div>
+        <div className="text-sm text-white/70">
+          <p className="font-semibold text-white">Product</p>
+          <a className="mt-2 block" href="/pricing">Pricing</a>
+          <a className="mt-2 block" href="/docs">Docs</a>
+          <a className="mt-2 block" href="/signup">Start free</a>
+        </div>
+        <div className="text-sm text-white/70">
+          <p className="font-semibold text-white">Trust</p>
+          <p className="mt-2">API keys are hashed. Holds are backed by PostgreSQL transactions.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+```
+
+- [ ] **Step 2: Create homepage sections**
+
+`frontend/components/marketing/Hero.tsx`:
+
+```tsx
+import { ArrowRight, ShieldCheck } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+
+export function Hero() {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto grid min-h-[680px] max-w-6xl items-center gap-10 px-4 py-16 md:grid-cols-[1.05fr_0.95fr]">
+        <div>
+          <p className="mb-4 inline-flex items-center gap-2 rounded-md border border-line bg-white px-3 py-2 text-sm font-semibold">
+            <ShieldCheck className="h-4 w-4" />
+            Built for AI scheduling agents
+          </p>
+          <h1 className="max-w-3xl text-5xl font-semibold leading-tight md:text-6xl">
+            One scheduling source of truth for AI agents
+          </h1>
+          <p className="mt-6 max-w-2xl text-xl leading-8 text-ink/70">
+            Prevent sales bots, recruiting agents, and calendar automations from double-booking the same time slot.
+          </p>
+          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+            <Button href="/signup">
+              Start free <ArrowRight className="h-4 w-4" />
+            </Button>
+            <Button href="/docs/quickstart" variant="secondary">
+              View API docs
+            </Button>
+          </div>
+          <p className="mt-5 text-sm text-ink/60">Free plan includes 3 agents. No card required.</p>
+        </div>
+        <div className="rounded-md border border-line bg-white p-4 shadow-panel">
+          <div className="rounded-md bg-ink p-5 text-white">
+            <p className="text-sm text-white/60">Conflict resolved</p>
+            <p className="mt-3 text-2xl font-semibold">Sales Bot kept 10:00</p>
+            <p className="mt-2 text-sm text-white/70">Recruiting Bot received 3 alternative slots with confidence scores.</p>
+            <div className="mt-6 grid gap-3">
+              {['10:30 - 11:00 · 0.95', '11:00 - 11:30 · 0.90', '14:00 - 14:30 · 0.85'].map((slot) => (
+                <div className="rounded-md bg-white/10 px-4 py-3 text-sm" key={slot}>{slot}</div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+`frontend/components/marketing/ProblemSolution.tsx`:
+
+```tsx
+export function ProblemSolution() {
+  return (
+    <section className="bg-white">
+      <div className="mx-auto grid max-w-6xl gap-8 px-4 py-20 md:grid-cols-2">
+        <div>
+          <h2 className="text-3xl font-semibold">Your agents are booking independently.</h2>
+          <p className="mt-4 text-lg leading-8 text-ink/70">
+            Sales, recruiting, and calendar agents can all see availability, but they do not share the same rules, holds, buffers, and priorities.
+          </p>
+        </div>
+        <div>
+          <h2 className="text-3xl font-semibold">Availsync becomes the shared decision layer.</h2>
+          <p className="mt-4 text-lg leading-8 text-ink/70">
+            Every agent checks one API before booking. Availsync applies availability windows, buffers, focus blocks, and priority rules before a hold is confirmed.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+`frontend/components/marketing/HowItWorks.tsx`:
+
+```tsx
+const steps = [
+  ['Create agents', 'Add each AI tool as an agent with its own type, priority, and API key.'],
+  ['Define rules', 'Set availability windows, buffers, focus blocks, and priority preferences.'],
+  ['Book through Availsync', 'Agents check availability, create holds, and receive alternatives when conflicts happen.'],
+];
+
+export function HowItWorks() {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto max-w-6xl px-4 py-20">
+        <h2 className="text-3xl font-semibold">How it works</h2>
+        <div className="mt-8 grid gap-4 md:grid-cols-3">
+          {steps.map(([title, body], index) => (
+            <div className="rounded-md border border-line bg-white p-5" key={title}>
+              <p className="text-sm font-semibold text-rust">0{index + 1}</p>
+              <h3 className="mt-3 text-xl font-semibold">{title}</h3>
+              <p className="mt-3 leading-7 text-ink/70">{body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+`frontend/components/marketing/UseCases.tsx`:
+
+```tsx
+const cases = [
+  ['Sales bots', 'Protect demo slots while outbound agents book meetings automatically.'],
+  ['Recruiting bots', 'Coordinate candidate screens without stealing priority customer calls.'],
+  ['Internal assistants', 'Reserve focus time and internal meetings around external commitments.'],
+];
+
+export function UseCases() {
+  return (
+    <section className="bg-white">
+      <div className="mx-auto max-w-6xl px-4 py-20">
+        <h2 className="text-3xl font-semibold">Built for multi-agent scheduling</h2>
+        <div className="mt-8 grid gap-4 md:grid-cols-3">
+          {cases.map(([title, body]) => (
+            <div className="rounded-md border border-line p-5" key={title}>
+              <h3 className="text-xl font-semibold">{title}</h3>
+              <p className="mt-3 leading-7 text-ink/70">{body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+`frontend/components/marketing/PricingTeaser.tsx`:
+
+```tsx
+import { Button } from '@/components/ui/Button';
+
+export function PricingTeaser() {
+  return (
+    <section className="bg-ink text-white">
+      <div className="mx-auto flex max-w-6xl flex-col items-start justify-between gap-6 px-4 py-16 md:flex-row md:items-center">
+        <div>
+          <h2 className="text-3xl font-semibold">Start with 3 agents for free.</h2>
+          <p className="mt-3 max-w-2xl text-white/70">Upgrade when you need more agents, longer booking windows, and team-level coordination.</p>
+        </div>
+        <Button href="/pricing" variant="secondary">View pricing</Button>
+      </div>
+    </section>
+  );
+}
+```
+
+`frontend/components/marketing/Faq.tsx`:
+
+```tsx
+const faqs = [
+  ['Is Availsync a calendar app?', 'No. It is a scheduling rules and holds API for AI agents that already book into calendars.'],
+  ['Can I use it locally?', 'Yes. The MVP runs with Docker Compose and PostgreSQL.'],
+  ['Do API keys appear again?', 'No. The agent API key is shown once when the agent is created.'],
+  ['What happens when two agents want the same slot?', 'Availsync applies explicit priority rules, agent type hierarchy, agent priority, then first-come-first-served.'],
+];
+
+export function Faq() {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto max-w-4xl px-4 py-20">
+        <h2 className="text-3xl font-semibold">Questions buyers ask</h2>
+        <div className="mt-8 divide-y divide-line rounded-md border border-line bg-white">
+          {faqs.map(([question, answer]) => (
+            <div className="p-5" key={question}>
+              <h3 className="font-semibold">{question}</h3>
+              <p className="mt-2 leading-7 text-ink/70">{answer}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Compose homepage**
+
+`frontend/app/page.tsx`:
+
+```tsx
+import { Faq } from '@/components/marketing/Faq';
+import { Hero } from '@/components/marketing/Hero';
+import { HowItWorks } from '@/components/marketing/HowItWorks';
+import { PricingTeaser } from '@/components/marketing/PricingTeaser';
+import { ProblemSolution } from '@/components/marketing/ProblemSolution';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { UseCases } from '@/components/marketing/UseCases';
+
+export default function HomePage() {
+  return (
+    <>
+      <SiteHeader />
+      <main>
+        <Hero />
+        <ProblemSolution />
+        <HowItWorks />
+        <UseCases />
+        <PricingTeaser />
+        <Faq />
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+```
+
+- [ ] **Step 4: Verify**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+npm run dev
+```
+
+Open:
+
+```text
+http://localhost:3001
+```
+
+Expected:
+
+```text
+Hero headline, Start free CTA, API docs CTA, pricing teaser, and FAQ render without overlap on desktop and mobile.
+```
+
+---
+
+## Task 5: Pricing And Checkout Entry
+
+**Files:**
+- Create: `frontend/lib/plans.ts`
+- Create: `frontend/components/pricing/PricingCards.tsx`
+- Create: `frontend/app/pricing/page.tsx`
+- Create: `frontend/app/checkout/page.tsx`
+
+- [ ] **Step 1: Create plan data**
+
+`frontend/lib/plans.ts`:
+
+```ts
+export const plans = [
+  {
+    id: 'free',
+    name: 'Free',
+    price: '$0',
+    description: 'For testing Availsync with up to 3 agents.',
+    cta: 'Start free',
+    href: '/signup?plan=free',
+    features: ['3 agents', 'Availability windows', 'Confirmed holds', 'Basic conflict rules'],
+  },
+  {
+    id: 'individual',
+    name: 'Individual',
+    price: '$19',
+    description: 'For solo operators running multiple AI agents.',
+    cta: 'Start individual',
+    href: '/checkout?plan=individual',
+    features: ['More agents', 'Priority rules', 'Longer booking windows', 'API quickstart support'],
+  },
+  {
+    id: 'team',
+    name: 'Team',
+    price: '$49',
+    description: 'For teams coordinating AI-driven scheduling.',
+    cta: 'Start team',
+    href: '/checkout?plan=team',
+    features: ['Team usage', 'Audit history', 'Advanced conflict workflows', 'Priority support'],
+  },
+] as const;
+```
+
+- [ ] **Step 2: Create pricing cards**
+
+`frontend/components/pricing/PricingCards.tsx`:
+
+```tsx
+import { Check } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { plans } from '@/lib/plans';
+
+export function PricingCards() {
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      {plans.map((plan) => (
+        <Card className={plan.id === 'individual' ? 'border-ink' : ''} key={plan.id}>
+          <p className="text-sm font-semibold uppercase tracking-wide text-ink/60">{plan.name}</p>
+          <p className="mt-4 text-4xl font-semibold">{plan.price}<span className="text-base text-ink/60">/mo</span></p>
+          <p className="mt-3 min-h-14 text-ink/70">{plan.description}</p>
+          <Button className="mt-6 w-full" href={plan.href}>{plan.cta}</Button>
+          <div className="mt-6 space-y-3">
+            {plan.features.map((feature) => (
+              <p className="flex gap-2 text-sm" key={feature}>
+                <Check className="h-4 w-4 text-moss" />
+                {feature}
+              </p>
+            ))}
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 3: Create pricing and checkout pages**
+
+`frontend/app/pricing/page.tsx`:
+
+```tsx
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { PricingCards } from '@/components/pricing/PricingCards';
+
+export default function PricingPage() {
+  return (
+    <>
+      <SiteHeader />
+      <main className="bg-paper">
+        <section className="mx-auto max-w-6xl px-4 py-20">
+          <h1 className="max-w-3xl text-5xl font-semibold">Simple pricing for AI-agent scheduling.</h1>
+          <p className="mt-5 max-w-2xl text-xl leading-8 text-ink/70">
+            Start free, then upgrade when more agents need shared rules, holds, and conflict resolution.
+          </p>
+          <div className="mt-10">
+            <PricingCards />
+          </div>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+```
+
+`frontend/app/checkout/page.tsx`:
+
+```tsx
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { Button } from '@/components/ui/Button';
+
+export default function CheckoutPage({ searchParams }: { searchParams: { plan?: string } }) {
+  const plan = searchParams.plan || 'individual';
+
+  return (
+    <>
+      <SiteHeader />
+      <main className="bg-paper">
+        <section className="mx-auto max-w-3xl px-4 py-20">
+          <h1 className="text-4xl font-semibold">Checkout for {plan}</h1>
+          <p className="mt-4 text-lg leading-8 text-ink/70">
+            Paid checkout will connect to Stripe. You can still start with the free onboarding flow now.
+          </p>
+          <div className="mt-8 flex gap-3">
+            <Button href={`/signup?plan=${plan}`}>Continue to setup</Button>
+            <Button href="/pricing" variant="secondary">Back to pricing</Button>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+```
+
+- [ ] **Step 4: Verify**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Pricing and checkout routes compile.
+```
+
+---
+
+## Task 6: Signup And Onboarding
+
+**Files:**
+- Create: `frontend/app/signup/page.tsx`
+- Create: `frontend/app/app/onboarding/page.tsx`
+- Create: `frontend/components/dashboard/AgentForm.tsx`
+- Create: `frontend/components/dashboard/AvailabilityWindowForm.tsx`
+
+- [ ] **Step 1: Create signup page**
+
+`frontend/app/signup/page.tsx`:
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { createOrg } from '@/lib/api';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const org = await createOrg(name);
+      router.push(`/app/onboarding?orgId=${org.id}&plan=${searchParams.get('plan') || 'free'}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not create organization');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <SiteHeader />
+      <main className="bg-paper">
+        <section className="mx-auto max-w-xl px-4 py-20">
+          <h1 className="text-4xl font-semibold">Create your Availsync workspace</h1>
+          <p className="mt-3 text-ink/70">Start by creating the organization your AI agents will belong to.</p>
+          <form className="mt-8 rounded-md border border-line bg-white p-5" onSubmit={onSubmit}>
+            <label className="text-sm font-semibold" htmlFor="org-name">Organization name</label>
+            <Input id="org-name" required value={name} onChange={(event) => setName(event.target.value)} />
+            {error && <p className="mt-3 text-sm text-rust">{error}</p>}
+            <Button className="mt-5 w-full" disabled={loading} type="submit">
+              {loading ? 'Creating...' : 'Create organization'}
+            </Button>
+          </form>
+        </section>
+      </main>
+    </>
+  );
+}
+```
+
+- [ ] **Step 2: Create onboarding page**
+
+`frontend/app/app/onboarding/page.tsx`:
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { createAgent, createAvailabilityWindow } from '@/lib/api';
+import { saveSession } from '@/lib/storage';
+import { fromLocalInputValue, toLocalInputValue } from '@/lib/format';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+
+export default function OnboardingPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const orgId = searchParams.get('orgId') || '';
+  const tomorrow = new Date(Date.now() + 24 * 60 * 60 * 1000);
+  tomorrow.setHours(9, 0, 0, 0);
+  const tomorrowEnd = new Date(tomorrow);
+  tomorrowEnd.setHours(17, 0, 0, 0);
+
+  const [name, setName] = useState('Sales Bot');
+  const [agentType, setAgentType] = useState('external_meeting');
+  const [priority, setPriority] = useState(10);
+  const [startAt, setStartAt] = useState(toLocalInputValue(tomorrow));
+  const [endAt, setEndAt] = useState(toLocalInputValue(tomorrowEnd));
+  const [apiKey, setApiKey] = useState('');
+  const [error, setError] = useState('');
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError('');
+    try {
+      const created = await createAgent({
+        orgId,
+        name,
+        agent_type: agentType as 'external_meeting',
+        priority,
+      });
+      await createAvailabilityWindow({
+        apiKey: created.apiKey,
+        agent_id: created.agent.id,
+        start_at: fromLocalInputValue(startAt),
+        end_at: fromLocalInputValue(endAt),
+        window_type: 'available',
+      });
+      saveSession({ orgId, agentId: created.agent.id, apiKey: created.apiKey });
+      setApiKey(created.apiKey);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Onboarding failed');
+    }
+  }
+
+  return (
+    <main className="bg-paper">
+      <section className="mx-auto max-w-3xl px-4 py-12">
+        <h1 className="text-4xl font-semibold">Create your first AI agent</h1>
+        <p className="mt-3 text-ink/70">This creates an agent API key and a first availability window.</p>
+        <form className="mt-8 grid gap-4 rounded-md border border-line bg-white p-5" onSubmit={onSubmit}>
+          <label className="text-sm font-semibold">Agent name</label>
+          <Input required value={name} onChange={(event) => setName(event.target.value)} />
+          <label className="text-sm font-semibold">Agent type</label>
+          <Select value={agentType} onChange={(event) => setAgentType(event.target.value)}>
+            <option value="external_meeting">Sales or external meeting bot</option>
+            <option value="internal">Internal assistant</option>
+            <option value="focus">Focus blocker</option>
+            <option value="generic">Generic agent</option>
+          </Select>
+          <label className="text-sm font-semibold">Priority</label>
+          <Input type="number" value={priority} onChange={(event) => setPriority(Number(event.target.value))} />
+          <label className="text-sm font-semibold">Availability starts</label>
+          <Input type="datetime-local" value={startAt} onChange={(event) => setStartAt(event.target.value)} />
+          <label className="text-sm font-semibold">Availability ends</label>
+          <Input type="datetime-local" value={endAt} onChange={(event) => setEndAt(event.target.value)} />
+          {error && <p className="text-sm text-rust">{error}</p>}
+          <Button type="submit">Create agent and window</Button>
+        </form>
+        {apiKey && (
+          <div className="mt-6 rounded-md border border-line bg-white p-5">
+            <h2 className="text-xl font-semibold">Copy this API key now</h2>
+            <p className="mt-2 text-sm text-ink/60">It is only shown once.</p>
+            <code className="mt-4 block overflow-x-auto rounded-md bg-ink p-4 text-sm text-white">{apiKey}</code>
+            <Button className="mt-5" href="/app/availability">Check availability</Button>
+          </div>
+        )}
+      </section>
+    </main>
+  );
+}
+```
+
+- [ ] **Step 3: Verify onboarding**
+
+Run backend first:
+
+```bash
+docker compose up -d
+```
+
+Run frontend:
+
+```bash
+cd frontend
+npm run dev
+```
+
+Open:
+
+```text
+http://localhost:3001/signup
+```
+
+Expected:
+
+```text
+Creating an org redirects to onboarding. Submitting onboarding creates an agent, creates an availability window, shows an API key, and stores session data in localStorage.
+```
+
+---
+
+## Task 7: Dashboard Shell And Overview
+
+**Files:**
+- Create: `frontend/components/dashboard/AppShell.tsx`
+- Create: `frontend/components/dashboard/MetricCard.tsx`
+- Create: `frontend/app/app/layout.tsx`
+- Create: `frontend/app/app/page.tsx`
+
+- [ ] **Step 1: Create app shell**
+
+`frontend/components/dashboard/AppShell.tsx`:
+
+```tsx
+import { CalendarClock, Home, KeyRound, Users } from 'lucide-react';
+
+const links = [
+  ['/app', 'Overview', Home],
+  ['/app/agents', 'Agents', Users],
+  ['/app/availability', 'Availability', CalendarClock],
+  ['/app/holds', 'Holds', KeyRound],
+] as const;
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-paper md:grid md:grid-cols-[240px_1fr]">
+      <aside className="border-b border-line bg-white p-4 md:border-b-0 md:border-r">
+        <a className="font-semibold" href="/app">Availsync</a>
+        <nav className="mt-6 grid gap-2">
+          {links.map(([href, label, Icon]) => (
+            <a className="flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-paper" href={href} key={href}>
+              <Icon className="h-4 w-4" />
+              {label}
+            </a>
+          ))}
+        </nav>
+      </aside>
+      <main>{children}</main>
+    </div>
+  );
+}
+```
+
+`frontend/components/dashboard/MetricCard.tsx`:
+
+```tsx
+import { Card } from '@/components/ui/Card';
+
+export function MetricCard({ label, value }: { label: string; value: string }) {
+  return (
+    <Card>
+      <p className="text-sm text-ink/60">{label}</p>
+      <p className="mt-2 text-3xl font-semibold">{value}</p>
+    </Card>
+  );
+}
+```
+
+- [ ] **Step 2: Create dashboard layout and overview**
+
+`frontend/app/app/layout.tsx`:
+
+```tsx
+import { AppShell } from '@/components/dashboard/AppShell';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return <AppShell>{children}</AppShell>;
+}
+```
+
+`frontend/app/app/page.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import { MetricCard } from '@/components/dashboard/MetricCard';
+import { Button } from '@/components/ui/Button';
+import { loadSession, type StoredSession } from '@/lib/storage';
+
+export default function DashboardPage() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+
+  useEffect(() => {
+    setSession(loadSession());
+  }, []);
+
+  return (
+    <section className="mx-auto max-w-6xl px-4 py-10">
+      <h1 className="text-4xl font-semibold">Dashboard</h1>
+      <p className="mt-3 text-ink/70">Manage the scheduling rules your AI agents use before booking.</p>
+      <div className="mt-8 grid gap-4 md:grid-cols-3">
+        <MetricCard label="Workspace" value={session?.orgId ? 'Connected' : 'Missing'} />
+        <MetricCard label="Agent" value={session?.agentId ? '1 active' : '0 active'} />
+        <MetricCard label="API key" value={session?.apiKey ? 'Stored locally' : 'Missing'} />
+      </div>
+      <div className="mt-8 flex gap-3">
+        <Button href="/app/availability">Check availability</Button>
+        <Button href="/app/holds" variant="secondary">Manage holds</Button>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Dashboard pages compile.
+```
+
+---
+
+## Task 8: Availability Checker UI
+
+**Files:**
+- Create: `frontend/components/dashboard/AvailabilityChecker.tsx`
+- Create: `frontend/app/app/availability/page.tsx`
+
+- [ ] **Step 1: Create availability checker component**
+
+`frontend/components/dashboard/AvailabilityChecker.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import { checkAvailability } from '@/lib/api';
+import { fromLocalInputValue, formatDateTime, toLocalInputValue } from '@/lib/format';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import type { Slot } from '@/lib/schemas';
+
+export function AvailabilityChecker() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [from, setFrom] = useState(toLocalInputValue(new Date(Date.now() + 24 * 60 * 60 * 1000)));
+  const [to, setTo] = useState(toLocalInputValue(new Date(Date.now() + 25 * 60 * 60 * 1000)));
+  const [duration, setDuration] = useState(30);
+  const [slots, setSlots] = useState<Slot[]>([]);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    setSession(loadSession());
+  }, []);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!session) return;
+    setError('');
+    try {
+      const result = await checkAvailability({
+        apiKey: session.apiKey,
+        agent_id: session.agentId,
+        from: fromLocalInputValue(from),
+        to: fromLocalInputValue(to),
+        duration_minutes: duration,
+      });
+      setSlots(result.slots);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not check availability');
+    }
+  }
+
+  if (!session) {
+    return <p>Create an agent in onboarding before checking availability.</p>;
+  }
+
+  return (
+    <div className="grid gap-6">
+      <form className="grid gap-4 rounded-md border border-line bg-white p-5" onSubmit={onSubmit}>
+        <label className="text-sm font-semibold">From</label>
+        <Input type="datetime-local" value={from} onChange={(event) => setFrom(event.target.value)} />
+        <label className="text-sm font-semibold">To</label>
+        <Input type="datetime-local" value={to} onChange={(event) => setTo(event.target.value)} />
+        <label className="text-sm font-semibold">Duration minutes</label>
+        <Input type="number" min={1} max={480} value={duration} onChange={(event) => setDuration(Number(event.target.value))} />
+        {error && <p className="text-sm text-rust">{error}</p>}
+        <Button type="submit">Check availability</Button>
+      </form>
+      <div className="grid gap-3">
+        {slots.map((slot) => (
+          <div className="rounded-md border border-line bg-white p-4" key={slot.start}>
+            <p className="font-semibold">{formatDateTime(slot.start)} - {formatDateTime(slot.end)}</p>
+            <p className="mt-1 text-sm text-ink/60">Confidence {slot.confidence} · Competing holds {slot.competing_holds_count}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create page**
+
+`frontend/app/app/availability/page.tsx`:
+
+```tsx
+import { AvailabilityChecker } from '@/components/dashboard/AvailabilityChecker';
+
+export default function AvailabilityPage() {
+  return (
+    <section className="mx-auto max-w-4xl px-4 py-10">
+      <h1 className="text-4xl font-semibold">Availability</h1>
+      <p className="mt-3 text-ink/70">Check the slots your agent can safely book.</p>
+      <div className="mt-8">
+        <AvailabilityChecker />
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Verify manually**
+
+Run:
+
+```bash
+docker compose up -d
+cd frontend
+npm run dev
+```
+
+Open:
+
+```text
+http://localhost:3001/app/availability
+```
+
+Expected:
+
+```text
+Availability form submits and renders slot cards when a session exists in localStorage.
+```
+
+---
+
+## Task 9: Holds UI
+
+**Files:**
+- Create: `frontend/components/dashboard/HoldForm.tsx`
+- Create: `frontend/app/app/holds/page.tsx`
+
+- [ ] **Step 1: Create hold form**
+
+`frontend/components/dashboard/HoldForm.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import { createHold, listHolds, releaseHold } from '@/lib/api';
+import { fromLocalInputValue, formatDateTime, toLocalInputValue } from '@/lib/format';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import type { Hold } from '@/lib/schemas';
+
+export function HoldForm() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [holds, setHolds] = useState<Hold[]>([]);
+  const [startAt, setStartAt] = useState(toLocalInputValue(new Date(Date.now() + 24 * 60 * 60 * 1000)));
+  const [endAt, setEndAt] = useState(toLocalInputValue(new Date(Date.now() + 24.5 * 60 * 60 * 1000)));
+  const [reason, setReason] = useState('Manual dashboard booking');
+  const [error, setError] = useState('');
+
+  async function refresh(current: StoredSession) {
+    setHolds(await listHolds(current.apiKey));
+  }
+
+  useEffect(() => {
+    const loaded = loadSession();
+    setSession(loaded);
+    if (loaded) {
+      refresh(loaded).catch(() => setError('Could not load holds'));
+    }
+  }, []);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!session) return;
+    setError('');
+    try {
+      await createHold({
+        apiKey: session.apiKey,
+        agent_id: session.agentId,
+        start_at: fromLocalInputValue(startAt),
+        end_at: fromLocalInputValue(endAt),
+        reason,
+      });
+      await refresh(session);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not create hold');
+    }
+  }
+
+  async function onRelease(holdId: string) {
+    if (!session) return;
+    await releaseHold(session.apiKey, holdId);
+    await refresh(session);
+  }
+
+  if (!session) {
+    return <p>Create an agent before managing holds.</p>;
+  }
+
+  return (
+    <div className="grid gap-6">
+      <form className="grid gap-4 rounded-md border border-line bg-white p-5" onSubmit={onSubmit}>
+        <label className="text-sm font-semibold">Start</label>
+        <Input type="datetime-local" value={startAt} onChange={(event) => setStartAt(event.target.value)} />
+        <label className="text-sm font-semibold">End</label>
+        <Input type="datetime-local" value={endAt} onChange={(event) => setEndAt(event.target.value)} />
+        <label className="text-sm font-semibold">Reason</label>
+        <Input value={reason} onChange={(event) => setReason(event.target.value)} />
+        {error && <p className="text-sm text-rust">{error}</p>}
+        <Button type="submit">Create hold</Button>
+      </form>
+      <div className="grid gap-3">
+        {holds.map((hold) => (
+          <div className="flex flex-col justify-between gap-3 rounded-md border border-line bg-white p-4 md:flex-row md:items-center" key={hold.id}>
+            <div>
+              <p className="font-semibold">{formatDateTime(hold.start_at)} - {formatDateTime(hold.end_at)}</p>
+              <p className="mt-1 text-sm text-ink/60">{hold.status} · {hold.reason || 'No reason'}</p>
+            </div>
+            {hold.status === 'confirmed' && (
+              <Button onClick={() => onRelease(hold.id)} variant="secondary">Release</Button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create page**
+
+`frontend/app/app/holds/page.tsx`:
+
+```tsx
+import { HoldForm } from '@/components/dashboard/HoldForm';
+
+export default function HoldsPage() {
+  return (
+    <section className="mx-auto max-w-4xl px-4 py-10">
+      <h1 className="text-4xl font-semibold">Holds</h1>
+      <p className="mt-3 text-ink/70">Create and release confirmed holds.</p>
+      <div className="mt-8">
+        <HoldForm />
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Holds page compiles and can create/release holds when backend is running.
+```
+
+---
+
+## Task 10: Agents And Agent Detail Pages
+
+**Files:**
+- Create: `frontend/app/app/agents/page.tsx`
+- Create: `frontend/app/app/agents/[agentId]/page.tsx`
+
+- [ ] **Step 1: Create agents list page**
+
+`frontend/app/app/agents/page.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import { listAgents } from '@/lib/api';
+import { loadSession } from '@/lib/storage';
+import { Button } from '@/components/ui/Button';
+import type { Agent } from '@/lib/schemas';
+
+export default function AgentsPage() {
+  const [agents, setAgents] = useState<Agent[]>([]);
+
+  useEffect(() => {
+    const session = loadSession();
+    if (session) {
+      listAgents(session.orgId).then(setAgents).catch(() => setAgents([]));
+    }
+  }, []);
+
+  return (
+    <section className="mx-auto max-w-5xl px-4 py-10">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h1 className="text-4xl font-semibold">Agents</h1>
+          <p className="mt-3 text-ink/70">AI tools allowed to use Availsync scheduling rules.</p>
+        </div>
+        <Button href="/app/onboarding">Add agent</Button>
+      </div>
+      <div className="mt-8 grid gap-3">
+        {agents.map((agent) => (
+          <a className="rounded-md border border-line bg-white p-4 hover:border-ink" href={`/app/agents/${agent.id}`} key={agent.id}>
+            <p className="font-semibold">{agent.name}</p>
+            <p className="mt-1 text-sm text-ink/60">{agent.agent_type} · priority {agent.priority}</p>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Create agent detail page**
+
+`frontend/app/app/agents/[agentId]/page.tsx`:
+
+```tsx
+export default function AgentDetailPage({ params }: { params: { agentId: string } }) {
+  return (
+    <section className="mx-auto max-w-4xl px-4 py-10">
+      <h1 className="text-4xl font-semibold">Agent</h1>
+      <p className="mt-3 text-ink/70">Agent ID: {params.agentId}</p>
+      <div className="mt-8 rounded-md border border-line bg-white p-5">
+        <h2 className="text-xl font-semibold">Next controls</h2>
+        <p className="mt-2 leading-7 text-ink/70">
+          Preferences, API key rotation, and audit event views belong here once backend endpoints expose them fully for the dashboard.
+        </p>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Agents routes compile and the list loads after onboarding.
+```
+
+---
+
+## Task 11: Documentation Pages
+
+**Files:**
+- Create: `frontend/app/docs/page.tsx`
+- Create: `frontend/app/docs/quickstart/page.tsx`
+
+- [ ] **Step 1: Create docs overview**
+
+`frontend/app/docs/page.tsx`:
+
+```tsx
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { Button } from '@/components/ui/Button';
+
+export default function DocsPage() {
+  return (
+    <>
+      <SiteHeader />
+      <main className="bg-paper">
+        <section className="mx-auto max-w-4xl px-4 py-20">
+          <h1 className="text-5xl font-semibold">Availsync API docs</h1>
+          <p className="mt-5 text-xl leading-8 text-ink/70">
+            Use Availsync as the shared scheduling layer before your AI agents create calendar bookings.
+          </p>
+          <div className="mt-8">
+            <Button href="/docs/quickstart">Open quickstart</Button>
+          </div>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+```
+
+- [ ] **Step 2: Create quickstart**
+
+`frontend/app/docs/quickstart/page.tsx`:
+
+```tsx
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+
+const snippets = [
+  ['Create org', `curl -X POST http://localhost:3000/v1/orgs \\
+  -H "Content-Type: application/json" \\
+  -d '{"name":"Acme"}'`],
+  ['Create agent', `curl -X POST http://localhost:3000/v1/orgs/ORG_ID/agents \\
+  -H "Content-Type: application/json" \\
+  -d '{"name":"Sales Bot","agent_type":"external_meeting"}'`],
+  ['Check availability', `curl "http://localhost:3000/v1/availability?agent_id=AGENT_ID&from=2026-05-12T09:00:00Z&to=2026-05-12T17:00:00Z&duration_minutes=30" \\
+  -H "Authorization: Bearer API_KEY"`],
+  ['Book hold', `curl -X POST http://localhost:3000/v1/holds \\
+  -H "Authorization: Bearer API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{"agent_id":"AGENT_ID","start_at":"2026-05-12T09:00:00Z","end_at":"2026-05-12T09:30:00Z"}'`],
+];
+
+export default function QuickstartPage() {
+  return (
+    <>
+      <SiteHeader />
+      <main className="bg-paper">
+        <section className="mx-auto max-w-4xl px-4 py-20">
+          <h1 className="text-5xl font-semibold">Quickstart</h1>
+          <p className="mt-5 text-xl leading-8 text-ink/70">Create an org, create an agent, check availability, then book a hold.</p>
+          <div className="mt-10 grid gap-5">
+            {snippets.map(([title, code]) => (
+              <div className="rounded-md border border-line bg-white p-5" key={title}>
+                <h2 className="text-xl font-semibold">{title}</h2>
+                <pre className="mt-4 overflow-x-auto rounded-md bg-ink p-4 text-sm text-white"><code>{code}</code></pre>
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Run:
+
+```bash
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Docs pages compile and curl examples are readable on mobile.
+```
+
+---
+
+## Task 12: Backend Billing Stub
+
+**Files:**
+- Create: `src/routes/billing.ts`
+- Modify: `src/index.ts`
+- Modify: `.env.example`
+- Modify: `package.json`
+
+- [ ] **Step 1: Add Stripe dependency**
+
+Run:
+
+```bash
+npm install stripe
+```
+
+Expected:
+
+```text
+added ... stripe
+```
+
+- [ ] **Step 2: Add env vars**
+
+Append to `.env.example` without removing existing vars:
+
+```text
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_PRICE_INDIVIDUAL=
+STRIPE_PRICE_TEAM=
+FRONTEND_URL=http://localhost:3001
+```
+
+- [ ] **Step 3: Create billing route**
+
+`src/routes/billing.ts`:
+
+```ts
+import express from 'express';
+import Stripe from 'stripe';
+import { z } from 'zod';
+
+const router = express.Router();
+
+const CheckoutSchema = z.object({
+  plan: z.enum(['individual', 'team']),
+  org_id: z.string().uuid(),
+  email: z.string().email().optional(),
+});
+
+router.post('/billing/checkout', async (req, res) => {
+  const parsed = CheckoutSchema.safeParse(req.body);
+  if (!parsed.success) {
+    return res.status(422).json({ error: 'validation_error', details: parsed.error.flatten() });
+  }
+
+  const secret = process.env.STRIPE_SECRET_KEY;
+  const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3001';
+  const price =
+    parsed.data.plan === 'individual'
+      ? process.env.STRIPE_PRICE_INDIVIDUAL
+      : process.env.STRIPE_PRICE_TEAM;
+
+  if (!secret || !price) {
+    return res.status(501).json({
+      error: 'billing_not_configured',
+      message: 'Stripe is not configured for this environment',
+    });
+  }
+
+  const stripe = new Stripe(secret);
+  const session = await stripe.checkout.sessions.create({
+    mode: 'subscription',
+    customer_email: parsed.data.email,
+    line_items: [{ price, quantity: 1 }],
+    success_url: `${frontendUrl}/app?checkout=success`,
+    cancel_url: `${frontendUrl}/pricing?checkout=cancelled`,
+    metadata: {
+      org_id: parsed.data.org_id,
+      plan: parsed.data.plan,
+    },
+  });
+
+  return res.json({ url: session.url });
+});
+
+router.post('/billing/webhook', async (_req, res) => {
+  return res.json({ received: true });
+});
+
+router.get('/billing/subscription/:org_id', async (req, res) => {
+  return res.json({
+    org_id: req.params.org_id,
+    status: 'free',
+    plan: 'free',
+  });
+});
+
+export default router;
+```
+
+- [ ] **Step 4: Register billing route**
+
+Modify `src/index.ts`:
+
+```ts
+import billingRouter from './routes/billing';
+```
+
+Then add before other `/v1` route registrations:
+
+```ts
+app.use('/v1', billingRouter);
+```
+
+- [ ] **Step 5: Verify**
+
+Run:
+
+```bash
+npm run build
+npm test
+```
+
+Expected:
+
+```text
+Build passes and all existing tests pass.
+```
+
+---
+
+## Task 13: Frontend Checkout Integration
+
+**Files:**
+- Modify: `frontend/lib/api.ts`
+- Modify: `frontend/app/checkout/page.tsx`
+
+- [ ] **Step 1: Add checkout function**
+
+Append to `frontend/lib/api.ts`:
+
+```ts
+export async function createCheckout(input: {
+  plan: 'individual' | 'team';
+  org_id: string;
+  email?: string;
+}) {
+  return request<{ url?: string; error?: string; message?: string }>('/v1/billing/checkout', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  });
+}
+```
+
+- [ ] **Step 2: Replace checkout page with interactive version**
+
+`frontend/app/checkout/page.tsx`:
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { createCheckout } from '@/lib/api';
+
+export default function CheckoutPage() {
+  const searchParams = useSearchParams();
+  const plan = searchParams.get('plan') === 'team' ? 'team' : 'individual';
+  const [orgId, setOrgId] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setMessage('');
+    const response = await createCheckout({ plan, org_id: orgId, email: email || undefined });
+    if (response.url) {
+      window.location.href = response.url;
+    } else {
+      setMessage(response.message || 'Billing is not configured. Continue with free setup.');
+    }
+  }
+
+  return (
+    <>
+      <SiteHeader />
+      <main className="bg-paper">
+        <section className="mx-auto max-w-xl px-4 py-20">
+          <h1 className="text-4xl font-semibold">Checkout for {plan}</h1>
+          <form className="mt-8 grid gap-4 rounded-md border border-line bg-white p-5" onSubmit={onSubmit}>
+            <label className="text-sm font-semibold">Organization ID</label>
+            <Input required value={orgId} onChange={(event) => setOrgId(event.target.value)} />
+            <label className="text-sm font-semibold">Billing email</label>
+            <Input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
+            {message && <p className="text-sm text-rust">{message}</p>}
+            <Button type="submit">Continue to payment</Button>
+            <Button href={`/signup?plan=${plan}`} variant="secondary">Start setup first</Button>
+          </form>
+        </section>
+      </main>
+    </>
+  );
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Run:
+
+```bash
+docker compose up -d --build
+cd frontend
+npm run build
+```
+
+Expected:
+
+```text
+Checkout compiles. Without Stripe env vars, submitting checkout shows billing_not_configured message and free setup still works.
+```
+
+---
+
+## Task 14: End-To-End Smoke Test
+
+**Files:**
+- Create: `frontend/playwright.config.ts`
+- Create: `frontend/tests/smoke.spec.ts`
+
+- [ ] **Step 1: Create Playwright config**
+
+`frontend/playwright.config.ts`:
+
+```ts
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 30_000,
+  use: {
+    baseURL: 'http://localhost:3001',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'mobile', use: { ...devices['Pixel 5'] } },
+  ],
+});
+```
+
+- [ ] **Step 2: Create smoke test**
+
+`frontend/tests/smoke.spec.ts`:
+
+```ts
+import { expect, test } from '@playwright/test';
+
+test('buyer can understand product and start onboarding', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('heading', { name: /one scheduling source of truth/i })).toBeVisible();
+  await page.getByRole('link', { name: /start free/i }).first().click();
+  await expect(page.getByRole('heading', { name: /create your availsync workspace/i })).toBeVisible();
+});
+
+test('pricing shows all plans', async ({ page }) => {
+  await page.goto('/pricing');
+  await expect(page.getByText('Free')).toBeVisible();
+  await expect(page.getByText('Individual')).toBeVisible();
+  await expect(page.getByText('Team')).toBeVisible();
+});
+
+test('docs quickstart includes API commands', async ({ page }) => {
+  await page.goto('/docs/quickstart');
+  await expect(page.getByText('Create org')).toBeVisible();
+  await expect(page.getByText('Check availability')).toBeVisible();
+  await expect(page.getByText('Book hold')).toBeVisible();
+});
+```
+
+- [ ] **Step 3: Run full validation**
+
+Terminal 1:
+
+```bash
+docker compose up -d --build
+```
+
+Terminal 2:
+
+```bash
+cd frontend
+npm run dev
+```
+
+Terminal 3:
+
+```bash
+cd frontend
+npm run build
+npm run test:e2e
+```
+
+Expected:
+
+```text
+Next build passes. Playwright smoke tests pass on desktop and mobile.
+```
+
+---
+
+## Task 15: Final Acceptance Checklist
+
+Run every command from repository root unless noted:
+
+```bash
+npm run build
+npm test
+docker compose up -d --build
+bash tests/smoke.sh
+cd frontend && npm run build
+cd frontend && npm run test:e2e
+```
+
+Manual browser checks:
+
+```text
+http://localhost:3001
+http://localhost:3001/pricing
+http://localhost:3001/signup
+http://localhost:3001/docs/quickstart
+http://localhost:3001/app
+http://localhost:3001/app/availability
+http://localhost:3001/app/holds
+```
+
+Acceptance criteria:
+
+- [ ] Homepage explains Availsync as the scheduling source of truth for AI agents.
+- [ ] Pricing page shows Free, Individual, and Team plans.
+- [ ] Signup creates an org through the backend.
+- [ ] Onboarding creates an agent and availability window through the backend.
+- [ ] API key is shown once and stored locally for the MVP dashboard.
+- [ ] Dashboard shows connected workspace state.
+- [ ] Availability checker calls `GET /v1/availability`.
+- [ ] Holds page calls `POST /v1/holds`, `GET /v1/holds`, and `DELETE /v1/holds/:id`.
+- [ ] Quickstart docs include curl examples for org, agent, availability, and hold creation.
+- [ ] Stripe checkout path has a configured path and a safe not-configured fallback.
+- [ ] Desktop and mobile layouts have no overlapping text or clipped buttons.
+- [ ] Backend build and tests remain green.
+- [ ] Backend smoke tests remain green.
+- [ ] Frontend build and Playwright smoke tests are green.
+
+---
+
+## Execution Notes
+
+Start by implementing Tasks 1-5 to get the public buying surface live. Then implement Tasks 6-11 so a buyer can experience the product with the existing backend. Add billing only after the free onboarding path works end to end.
+
+Use the existing backend on `http://localhost:3000`. Run the frontend on `http://localhost:3001` to avoid colliding with the API.
+