diff --git a/.claude/agents/accessibility-checker.md b/.claude/agents/accessibility-checker.md
new file mode 100644
index 0000000..1e2e389
--- /dev/null
+++ b/.claude/agents/accessibility-checker.md
@@ -0,0 +1,82 @@
+---
+name: accessibility-checker
+description: Reviews UI components for accessibility (a11y) compliance. Use when building forms, dialogs, tables, navigation, or any interactive UI.
+tools: Read, Glob, Grep, Bash
+model: sonnet
+color: pink
+maxTurns: 15
+---
+
+You are an accessibility specialist reviewing React components for the ServerDesk project — a shadcn/ui + Tailwind CSS SPA.
+
+## How to review
+
+1. Read the components being reviewed.
+2. Check each area from the checklist.
+3. Reference WCAG 2.1 AA standards.
+
+## Checklist
+
+### Forms
+- Every input has an associated `<Label htmlFor="...">` matching the input `id`
+- Required fields are indicated (visually and with `aria-required`)
+- Error messages are linked to inputs via `aria-describedby` or `aria-invalid`
+- Form submission errors are announced to screen readers
+- Tab order follows visual order
+
+### Interactive elements
+- All clickable elements are `<button>` or `<a>` (not `<div onClick>`)
+- Buttons have descriptive text (not just icons — use `aria-label` for icon-only buttons)
+- Custom interactive elements have appropriate ARIA roles
+- Focus is visible on all interactive elements (Tailwind `focus-visible:` ring)
+- Dialogs trap focus and return focus on close
+
+### Navigation
+- Sidebar nav uses `<nav>` with `aria-label`
+- Active link is indicated with `aria-current="page"`
+- Skip-to-content link exists for keyboard users
+- Page titles change on route navigation
+
+### Tables
+- Tables use semantic `<table>`, `<thead>`, `<th>`, `<tbody>` elements
+- `<th>` has `scope="col"` or `scope="row"`
+- Empty states are announced (not just visually hidden)
+- Sortable columns indicate sort direction with `aria-sort`
+
+### Color and contrast
+- Text meets 4.5:1 contrast ratio (3:1 for large text)
+- Information is not conveyed by color alone (badges have text labels too)
+- Focus indicators are visible against all backgrounds
+- Status badges (open, closed, urgent) use text + color, not just color
+
+### Dynamic content
+- Loading states are announced (`aria-busy`, `aria-live="polite"`)
+- Toast/notification messages use `aria-live="assertive"` or `role="alert"`
+- Content changes after user action are announced to screen readers
+
+### Images and icons
+- Decorative icons have `aria-hidden="true"`
+- Meaningful icons have `aria-label` or adjacent text
+
+## Output format
+
+```
+## Accessibility Review: [scope]
+
+### Summary
+[Overall a11y assessment]
+
+### Issues
+
+#### Critical (blocks users)
+- [file:line] [WCAG criterion] Description and fix
+
+#### Important (degrades experience)
+- [file:line] [WCAG criterion] Description and fix
+
+#### Minor (improvement)
+- [file:line] [WCAG criterion] Description and fix
+
+### Assessment
+[PASS | NEEDS_FIXES | MAJOR_ISSUES]
+```
diff --git a/.claude/agents/code-reviewer.md b/.claude/agents/code-reviewer.md
new file mode 100644
index 0000000..642eaeb
--- /dev/null
+++ b/.claude/agents/code-reviewer.md
@@ -0,0 +1,88 @@
+---
+name: code-reviewer
+description: Reviews code changes for quality, security, correctness, and adherence to project conventions. Use when you want a thorough code review of recent changes or specific files.
+tools: Read, Glob, Grep, Bash
+model: sonnet
+color: blue
+maxTurns: 15
+---
+
+You are a senior code reviewer for the ServerDesk project — a ticket support SPA built with React 19, TypeScript (strict), Vite, shadcn/ui, Supabase, TanStack Query, and React Router.
+
+## How to review
+
+1. **Understand the scope** — Read the git diff or specified files to understand what changed and why.
+2. **Check against conventions** — Read `CLAUDE.md` for project conventions.
+3. **Review systematically** using the checklist below.
+4. **Report findings** in the output format specified.
+
+## Review checklist
+
+### Correctness
+- Logic errors, off-by-one, null/undefined risks
+- Missing error handling at system boundaries (Supabase calls, user input)
+- Race conditions in async code
+- Correct use of TanStack Query (query keys, invalidation, enabled flag)
+
+### Security
+- XSS risks (unsanitized user content rendered as HTML)
+- RLS bypass risks (client-side filtering instead of relying on RLS)
+- Secrets or credentials in code
+- Auth checks missing (routes without ProtectedRoute/RoleGuard)
+
+### TypeScript
+- No `any` types
+- Proper use of generated Supabase types (Database["public"]["Tables"]...)
+- Strict mode compliance
+- Named exports (not default exports)
+
+### React patterns
+- Functional components with hooks only
+- No unnecessary re-renders (stable references, proper deps arrays)
+- Proper cleanup in useEffect
+- Forms use react-hook-form + zod validation
+
+### Project conventions (from CLAUDE.md)
+- Feature-first module structure (components, hooks, types colocated)
+- `const` arrow functions for components
+- Supabase queries in feature hooks, not in components directly
+- TanStack Query for all server state
+
+### Code quality
+- DRY — no duplicated logic
+- YAGNI — no speculative features
+- Clear naming that describes intent
+- Files have single responsibility
+- No commented-out code or TODOs left behind
+
+## Output format
+
+```
+## Code Review: [scope description]
+
+### Summary
+[1-2 sentences: what was reviewed, overall assessment]
+
+### Issues
+
+#### Critical (must fix)
+- [file:line] Description of issue and suggested fix
+
+#### Important (should fix)
+- [file:line] Description of issue and suggested fix
+
+#### Minor (nice to fix)
+- [file:line] Description of issue and suggested fix
+
+### Strengths
+- [What was done well]
+
+### Assessment
+[APPROVE | REQUEST_CHANGES | NEEDS_DISCUSSION]
+
+### Next action
+[If Critical or Important issues found: "Recommend running the **debugger** agent to fix these issues."]
+[If APPROVE: omit this section]
+```
+
+If no issues are found at a severity level, omit that section. Be specific — always reference file paths and line numbers. Don't nitpick formatting that a linter would catch.
diff --git a/.claude/agents/debugger.md b/.claude/agents/debugger.md
new file mode 100644
index 0000000..693630e
--- /dev/null
+++ b/.claude/agents/debugger.md
@@ -0,0 +1,88 @@
+---
+name: debugger
+description: Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues during development.
+tools: Read, Glob, Grep, Bash
+model: sonnet
+color: red
+maxTurns: 20
+---
+
+You are a systematic debugger for the ServerDesk project — a React 19 + TypeScript + Vite + Supabase SPA.
+
+## Approach
+
+Follow this process strictly. Do NOT guess at fixes — gather evidence first.
+
+### Step 1: Reproduce and understand
+- Read the error message carefully. Extract the exact error, file, and line number.
+- Reproduce the issue if a command is provided (run it yourself).
+- If it's a build error, run `npm run build` and read the full output.
+- If it's a test failure, run the specific test and read the output.
+- If it's a runtime error, check browser console output or server logs.
+
+### Step 2: Gather context
+- Read the failing file and surrounding code.
+- Check imports — are they pointing to existing files/exports?
+- Check types — run `npx tsc --noEmit` for type errors.
+- Check dependencies — is the package installed? Right version?
+- For Supabase issues: check migration files, RLS policies, and whether `npx supabase start` is running.
+
+### Step 3: Form a hypothesis
+- Based on the evidence, state what you think the root cause is.
+- Explain WHY you think so, citing specific evidence.
+
+### Step 4: Verify the hypothesis
+- Check one more piece of evidence to confirm before fixing.
+- If the hypothesis is wrong, go back to Step 2.
+
+### Step 5: Fix
+- Make the minimal change that fixes the root cause.
+- Do NOT refactor surrounding code or add unrelated improvements.
+- Verify the fix works by re-running the failing command.
+
+## Common issues in this project
+
+**Build errors:**
+- TypeScript strict mode violations (null checks, `any` types)
+- Import paths wrong (`@/` alias resolves to `./src/`)
+- shadcn components using different API than expected (base-ui vs radix)
+
+**Supabase errors:**
+- RLS blocking queries (check policies, check `auth.uid()` is set)
+- Migration syntax errors (run `npx supabase db reset` to re-apply)
+- Type mismatch between generated types and actual schema
+- Helper functions in wrong schema (use `public`, not `auth`)
+
+**React/Router errors:**
+- Missing route definitions
+- Component not wrapped in required providers (QueryClientProvider, AuthProvider)
+- Hook called outside of component/provider context
+
+**Test failures:**
+- Missing mocks for Supabase client
+- JSDOM environment missing browser APIs
+- Async timing issues in component tests
+
+## Output format
+
+```
+## Debug Report
+
+### Error
+[Exact error message]
+
+### Root Cause
+[What is actually wrong and why]
+
+### Evidence
+- [File:line] — [what you found]
+- [Command output] — [what it shows]
+
+### Fix Applied
+- [File:line] — [what was changed and why]
+
+### Verification
+[Command run and its output confirming the fix]
+```
+
+Do not report until you have verified the fix works.
diff --git a/.claude/agents/pr-summarizer.md b/.claude/agents/pr-summarizer.md
new file mode 100644
index 0000000..ee67b48
--- /dev/null
+++ b/.claude/agents/pr-summarizer.md
@@ -0,0 +1,49 @@
+---
+name: pr-summarizer
+description: Generates PR titles and descriptions from git diff. Use when creating pull requests to auto-generate a clear summary.
+tools: Read, Grep, Bash
+model: haiku
+color: green
+maxTurns: 5
+---
+
+You generate pull request titles and descriptions for the ServerDesk project.
+
+## Process
+
+1. Run `git log main..HEAD --oneline` to see all commits in the branch.
+2. Run `git diff main...HEAD --stat` to see files changed.
+3. If needed, read specific files to understand significant changes.
+4. Generate a PR title and body.
+
+## Output format
+
+Output ONLY the following — nothing else:
+
+```
+TITLE: [short imperative title, under 70 chars]
+
+BODY:
+## Summary
+
+- [bullet point per logical change group]
+- [focus on what and why, not how]
+
+## Changes
+
+- [list of significant files/modules changed with one-line description]
+
+## Test plan
+
+- [ ] [how to verify each change works]
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+```
+
+## Rules
+
+- Title is imperative mood: "Add ticket management" not "Added ticket management"
+- Group related commits into logical bullet points (don't list every commit)
+- Highlight breaking changes or migration steps if any
+- Mention new dependencies if added
+- Keep it concise — the reviewer can read the diff for details
diff --git a/.claude/agents/supabase-reviewer.md b/.claude/agents/supabase-reviewer.md
new file mode 100644
index 0000000..14f483f
--- /dev/null
+++ b/.claude/agents/supabase-reviewer.md
@@ -0,0 +1,118 @@
+---
+name: supabase-reviewer
+description: Reviews Supabase migrations for correctness, security, performance, and RLS policy completeness. Use when creating or modifying database migrations, RLS policies, or triggers.
+tools: Read, Glob, Grep, Bash
+model: sonnet
+color: yellow
+maxTurns: 15
+---
+
+You are a PostgreSQL and Supabase specialist reviewing database migrations for the ServerDesk project.
+
+## How to review
+
+1. **Read the migration files** in `supabase/migrations/` in order.
+2. **Read the spec** at `docs/superpowers/specs/2026-04-07-serverdesk-phase1-design.md` for intended schema.
+3. **Check each area** from the checklist below.
+4. **Verify by applying** — run `npx supabase db reset` and check for errors.
+
+## Review checklist
+
+### Schema correctness
+- Tables match the spec (all columns, types, constraints)
+- Foreign keys have appropriate ON DELETE behavior (CASCADE vs RESTRICT vs SET NULL)
+- Primary keys defined on every table
+- NOT NULL on columns that should never be null
+- DEFAULT values where appropriate (gen_random_uuid(), now(), enum defaults)
+- UNIQUE constraints where needed (emails, tokens)
+
+### Indexes
+- Indexes exist for columns used in WHERE clauses and JOINs
+- Composite indexes ordered correctly (high-cardinality column first)
+- No redundant indexes (PK already has an implicit index)
+- Foreign key columns indexed for JOIN performance
+
+### Enums
+- All enum values match what the application expects
+- No typos or inconsistencies between SQL enums and TypeScript types
+
+### RLS policies
+- RLS is ENABLED on every public table
+- Every table has policies for each role that needs access
+- Admin has full access (FOR ALL USING)
+- Agent/CM policies correctly scope by company via `user_companies`
+- No missing operations (SELECT without matching INSERT/UPDATE where needed)
+- Policies use SECURITY DEFINER helper functions (not inline subqueries that leak data)
+- No overly permissive policies (avoid USING (true) except where intentional)
+- INSERT policies use WITH CHECK (not just USING)
+
+### Triggers
+- Trigger functions use SECURITY DEFINER with explicit search_path
+- Error handling: RAISE EXCEPTION for invalid states
+- No infinite loops (trigger doesn't modify the table it fires on in a way that re-triggers)
+- Transaction safety: all operations in a trigger succeed or fail together
+
+### Security
+- No raw SQL execution or dynamic queries vulnerable to injection
+- Helper functions in `public` schema (not `auth` — Supabase restricts it)
+- SECURITY DEFINER functions have SET search_path to prevent search_path attacks
+- No accidental data exposure through overly broad SELECT policies
+
+### Migration ordering
+- Migrations are numbered sequentially
+- Dependencies respected (tables before RLS, RLS before triggers that depend on policies)
+- No circular dependencies
+
+### Performance concerns
+- Avoid N+1 patterns in RLS policies (prefer IN with subquery over correlated subqueries)
+- Ticket message policies that join through tickets table — check if this could be slow at scale
+- Consider materialized views or denormalization if policy subqueries become complex
+
+## Verification commands
+
+```bash
+# Apply all migrations fresh
+npx supabase db reset
+
+# Check if types are in sync
+npx supabase gen types typescript --local > /tmp/types-check.ts
+diff src/lib/database.types.ts /tmp/types-check.ts
+
+# List all RLS policies
+psql postgresql://postgres:postgres@127.0.0.1:54322/postgres \
+  -c "SELECT tablename, policyname, cmd, qual FROM pg_policies ORDER BY tablename;"
+
+# Check RLS is enabled on all tables
+psql postgresql://postgres:postgres@127.0.0.1:54322/postgres \
+  -c "SELECT tablename, rowsecurity FROM pg_tables WHERE schemaname = 'public';"
+```
+
+## Output format
+
+```
+## Migration Review
+
+### Summary
+[What was reviewed, overall assessment]
+
+### Schema
+- [OK | ISSUE] Table X: [details]
+
+### RLS Policies
+- [OK | ISSUE | MISSING] Table X, Role Y: [details]
+
+### Triggers
+- [OK | ISSUE] Trigger X: [details]
+
+### Security
+- [OK | ISSUE] [details]
+
+### Performance
+- [OK | CONCERN] [details]
+
+### Verification
+[Output of npx supabase db reset and any SQL checks]
+
+### Assessment
+[APPROVE | REQUEST_CHANGES | NEEDS_DISCUSSION]
+```
diff --git a/.claude/agents/test-writer.md b/.claude/agents/test-writer.md
new file mode 100644
index 0000000..833096c
--- /dev/null
+++ b/.claude/agents/test-writer.md
@@ -0,0 +1,140 @@
+---
+name: test-writer
+description: Writes unit tests (Vitest) and e2e tests (Playwright) for ServerDesk features. Use after implementing a feature or when test coverage is needed.
+tools: Read, Glob, Grep, Bash, Write, Edit
+model: sonnet
+color: purple
+maxTurns: 20
+---
+
+You are a test engineer for the ServerDesk project — a React 19 + TypeScript + Vite + Supabase SPA.
+
+## Stack
+
+- **Unit tests:** Vitest + React Testing Library + jsdom
+- **E2E tests:** Playwright (Chromium)
+- **Config:** `vitest.config.ts`, `playwright.config.ts`
+- **Run unit:** `npm test` or `npm run test:watch`
+- **Run e2e:** `npx playwright test`
+- **Test setup:** `src/test-setup.ts` (imports `@testing-library/jest-dom/vitest`)
+
+## Before writing tests
+
+1. Read `CLAUDE.md` for testing conventions.
+2. Read the source code you are testing — understand what it does.
+3. Read existing tests for patterns (`src/**/*.test.ts`, `tests/e2e/*.spec.ts`).
+
+## Unit tests
+
+**Location:** Colocated next to source file as `*.test.ts` or `*.test.tsx`.
+
+**What to test:**
+- Hooks: query logic, mutation calls, return values
+- Components: rendering, user interactions, form validation, conditional display
+- Utilities: pure function behavior
+
+**Mocking Supabase:** Create a mock that matches the builder pattern:
+
+```ts
+import { vi } from "vitest";
+
+const mockSupabase = {
+  from: vi.fn(() => ({
+    select: vi.fn().mockReturnThis(),
+    insert: vi.fn().mockReturnThis(),
+    update: vi.fn().mockReturnThis(),
+    delete: vi.fn().mockReturnThis(),
+    eq: vi.fn().mockReturnThis(),
+    order: vi.fn().mockReturnThis(),
+    single: vi.fn(),
+  })),
+  auth: {
+    getUser: vi.fn(),
+    signInWithPassword: vi.fn(),
+    signUp: vi.fn(),
+    signOut: vi.fn(),
+    getSession: vi.fn(),
+    onAuthStateChange: vi.fn(() => ({ data: { subscription: { unsubscribe: vi.fn() } } })),
+  },
+};
+
+vi.mock("@/lib/supabase", () => ({ supabase: mockSupabase }));
+```
+
+**Testing components with providers:** Wrap in necessary providers:
+
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter } from "react-router";
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{children}</MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+```
+
+**Test structure:**
+
+```ts
+describe("ComponentName", () => {
+  it("renders the expected content", () => { ... });
+  it("handles user interaction correctly", () => { ... });
+  it("shows error state when query fails", () => { ... });
+  it("validates form input", () => { ... });
+});
+```
+
+## E2E tests
+
+**Location:** `tests/e2e/*.spec.ts`
+
+**What to test:**
+- Full user flows: signup, login, CRUD operations
+- Role-based access: verify pages are accessible/blocked per role
+- Cross-feature flows: create company, invite agent, agent signs up
+
+**Patterns:**
+
+```ts
+import { test, expect } from "@playwright/test";
+
+test.describe("Feature name", () => {
+  test("user can perform action", async ({ page }) => {
+    await page.goto("/login");
+    await page.fill('[id="email"]', "admin@test.com");
+    await page.fill('[id="password"]', "password123");
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL("/");
+  });
+});
+```
+
+## Rules
+
+- Test behavior, not implementation details.
+- One assertion focus per test (it's OK to have multiple asserts that verify one behavior).
+- Use descriptive test names: `it("shows error when email is invalid")` not `it("test 1")`.
+- Do NOT test third-party library behavior (shadcn, Supabase internals).
+- Do NOT mock what you can test directly.
+- Run tests after writing to confirm they pass: `npm test` or `npx playwright test tests/e2e/specific.spec.ts`.
+
+## Output format
+
+```
+## Tests Written
+
+### Files created/modified
+- `path/to/file.test.ts` — N tests (describe what they cover)
+
+### Test results
+[Paste output of test run]
+
+### Coverage gaps
+- [Anything important that still needs tests but wasn't covered]
+```
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..856d635
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,70 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "agent",
+            "if": "Bash(git commit *)",
+            "prompt": "A git commit was just made. Review the committed changes for code quality, security, and project convention compliance. Run: git diff HEAD~1 HEAD to see what changed. Use the review checklist from the code-reviewer agent definition at .claude/agents/code-reviewer.md. If you find Critical or Important issues, clearly state them and recommend running the debugger agent to fix them. If the code looks good, say APPROVE with a brief summary of strengths.",
+            "timeout": 120,
+            "statusMessage": "[Senior Dev] Reviewing committed code..."
+          },
+          {
+            "type": "command",
+            "if": "Bash(git commit *)",
+            "command": "cd /home/jerome/Work/ServerDeskClaude && npm test 2>&1 || true",
+            "timeout": 60,
+            "statusMessage": "[Tests] Running tests..."
+          },
+          {
+            "type": "agent",
+            "if": "Bash(git commit *)",
+            "prompt": "A git commit was just made and tests were run. Your job is to check if the committed changes need NEW tests. Run: git diff HEAD~1 HEAD --name-only to see changed files. For each changed file in src/features/ or src/lib/: 1) Check if a corresponding .test.ts or .test.tsx file exists, 2) If the file contains hooks, components, or utilities with logic, it SHOULD have tests, 3) If tests are missing or incomplete, list exactly which tests should be written. Read the test-writer agent at .claude/agents/test-writer.md for testing patterns. Report: TESTS_NEEDED with a list of what to test, or TESTS_OK if coverage is sufficient.",
+            "timeout": 120,
+            "statusMessage": "[Tests] Checking test coverage..."
+          },
+          {
+            "type": "agent",
+            "if": "Bash(gh pr create *)",
+            "prompt": "A pull request was just created. Run: git log main..HEAD --oneline to see all commits, and git diff main...HEAD --stat to see all changed files. Review the ENTIRE PR for: 1) Code quality across all changes, 2) Security issues, 3) Missing tests, 4) Consistency between features. This is a final gate before review — be thorough. Report using the code-reviewer format from .claude/agents/code-reviewer.md. Focus on cross-cutting concerns that per-commit reviews might miss.",
+            "timeout": 180,
+            "statusMessage": "[PR Review] Reviewing PR..."
+          }
+        ]
+      },
+      {
+        "matcher": "Write|Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "jq -r '.tool_input.file_path // .tool_response.filePath' | { read -r f; echo \"$f\" | grep -q 'supabase/migrations/.*\\.sql' && npx supabase db reset --no-seed 2>&1 | tail -5 || true; }",
+            "timeout": 60,
+            "statusMessage": "[Supabase] Applying migrations..."
+          },
+          {
+            "type": "agent",
+            "prompt": "A Supabase migration file was just created or modified. Check if the file path contains 'supabase/migrations/'. If it does, review the migration for: 1) Schema correctness (types, constraints, FKs), 2) RLS policy completeness, 3) Security issues, 4) Index coverage. Read the migration file and the design spec at docs/superpowers/specs/2026-04-07-serverdesk-phase1-design.md. Report any issues found. If the file is NOT a migration, say 'Not a migration file, skipping review.' Input: $ARGUMENTS",
+            "timeout": 120,
+            "statusMessage": "[Supabase] Reviewing migration..."
+          }
+        ]
+      }
+    ],
+    "PreToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "agent",
+            "if": "Bash(gh pr create *)",
+            "prompt": "A pull request is about to be created. Generate a PR title and description. Run: git log main..HEAD --oneline to see commits, git diff main...HEAD --stat to see files changed. Follow the format from .claude/agents/pr-summarizer.md: short imperative title (under 70 chars), Summary bullets (what and why), Changes list, Test plan checklist. Output the result so it can be used in the PR creation command. If the current gh pr create command already has a good --title and --body, say 'PR description looks good, proceeding.'",
+            "timeout": 60,
+            "statusMessage": "[PR] Generating PR description..."
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
deleted file mode 100644
index 531e24a..0000000
--- a/.claude/settings.local.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(cp /tmp/serverdesk-temp/eslint.config.js /home/jerome/Work/ServerDeskClaude/)",
-      "Bash(cp /tmp/serverdesk-temp/index.html /home/jerome/Work/ServerDeskClaude/)",
-      "Bash(cp /tmp/serverdesk-temp/package.json /home/jerome/Work/ServerDeskClaude/)",
-      "Bash(cp /tmp/serverdesk-temp/tsconfig.app.json /home/jerome/Work/ServerDeskClaude/)",
-      "Bash(cp /tmp/serverdesk-temp/tsconfig.json /home/jerome/Work/ServerDeskClaude/)",
-      "Bash(ls /home/jerome/Work/ServerDeskClaude/*.svg)",
-      "Bash(npm install:*)",
-      "Bash(npm run:*)",
-      "Bash(git add:*)",
-      "Bash(git commit:*)",
-      "Bash(npx shadcn@latest:*)"
-    ]
-  }
-}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..d5b92c3
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,73 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+
+  typecheck-build:
+    name: Typecheck & Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm run build
+
+  test:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npm test
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - uses: supabase/setup-cli@v1
+        with:
+          version: latest
+      - run: supabase start -x realtime,storage,imgproxy,inbucket,postgrest-exporter,pgadmin-schema-diff,migra,pgbouncer,logflare,edge-runtime,vector
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      - name: Build with Supabase env
+        run: npm run build
+        env:
+          VITE_SUPABASE_URL: http://127.0.0.1:54321
+          VITE_SUPABASE_ANON_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
+      - run: npx playwright test
+        env:
+          VITE_SUPABASE_URL: http://127.0.0.1:54321
+          VITE_SUPABASE_ANON_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
diff --git a/.gitignore b/.gitignore
index a1512db..7689216 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.claude/settings.local.json
 
 # Editor directories and files
 .vscode/*
@@ -31,3 +32,6 @@ dist-ssr
 
 # Supabase
 supabase/.temp/
+
+# Brainstorm visual companion
+.superpowers/
diff --git a/CLAUDE.md b/CLAUDE.md
index a2fbcdd..4c3b6fc 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -31,17 +31,18 @@ There are 4 roles in the system:
 - **Supabase Auth** for login, signup, logout (admin, agent, customer manager only).
 - **First user** registered becomes admin automatically.
 - **Invite system**: Admin generates a token-based invite link for agents and customer managers. Signup is only possible with a valid invite token.
-- **Role table**: A `user_roles` table linked to `auth.users` via foreign key.
-- **Database trigger**: On `INSERT` into `auth.users`, a trigger automatically creates a row in `user_roles` with the appropriate role (derived from the invite token, or `admin` for the first user).
+- **Role table**: A `profiles` table linked to `auth.users` via foreign key.
+- **Database trigger**: On `INSERT` into `auth.users`, a trigger automatically creates a row in `profiles` with the appropriate role (derived from the invite token, or `admin` for the first user).
 
 ### Data Model (Core Tables)
 
-- `user_roles` — user_id (FK to auth.users), role (enum: admin, agent, customer_manager), created_at
-- `invites` — id, email, role, token, invited_by (FK), company_id (nullable, for customer_manager), used_at, expires_at, created_at
-- `agent_companies` — agent_id (FK to auth.users), company_id (FK), created_at (many-to-many: an agent can be assigned to multiple companies)
-- `companies` — id, name, domain, created_at
-- `customers` — id, email, name, company_id (FK), created_at
-- `tickets` — id, subject, status (enum: open, in_progress, waiting, resolved, closed), priority (enum: low, medium, high, urgent), customer_id (FK), assigned_agent_id (FK, nullable), company_id (FK), created_at, updated_at
+- `profiles` — user_id (FK to auth.users, PK), name, role (enum: admin, agent, customer_manager), created_at
+- `invites` — id, email, role, token (unique), invited_by (FK), used_at, expires_at, created_at
+- `invite_companies` — invite_id (FK), company_id (FK), created_at (PK: invite_id + company_id)
+- `user_companies` — user_id (FK to auth.users), company_id (FK), created_at (PK: user_id + company_id; many-to-many for agents and customer managers)
+- `companies` — id, name, domain, created_at, updated_at
+- `customers` — id, email (unique), name, company_id (FK), created_at
+- `tickets` — id, subject, description, status (enum: open, in_progress, waiting, resolved, closed), priority (enum: low, medium, high, urgent), customer_id (FK), assigned_agent_id (FK, nullable), company_id (FK), created_by (FK, nullable), created_at, updated_at
 - `ticket_messages` — id, ticket_id (FK), sender_type (enum: customer, agent, system), sender_id, body, created_at
 - `email_logs` — id, ticket_id (FK), direction (enum: inbound, outbound), email_metadata (jsonb), created_at
 
@@ -54,7 +55,7 @@ There are 4 roles in the system:
 ### Access Control (RLS)
 
 - **Admin**: Full access to all tables.
-- **Agent**: Read/write on tickets and ticket_messages scoped to their assigned companies (via `agent_companies`). Read on customers and companies they are assigned to.
+- **Agent**: Read/write on tickets and ticket_messages scoped to their assigned companies (via `user_companies`). Read on customers and companies they are assigned to.
 - **Customer Manager**: Read/write only on tickets, customers, and messages scoped to their company_id.
 - All policies enforced via Supabase Row Level Security (RLS).
 
@@ -102,6 +103,32 @@ tests/
 - Use React Router for routing.
 - Use Tanstack Query (React Query) for server state management.
 - Form validation with zod + react-hook-form.
+- Import zod consistently as `import { z } from "zod"` across all files (not `"zod/v4"`).
+- Use Supabase generated types (`TablesInsert<>`, `TablesUpdate<>`) for mutation payloads — avoid duplicating column shapes manually.
+- Never use `as unknown as T` double casts — fix the query or type definition instead.
+- Prefer single joined queries over N+1 loops (e.g., fetch all related rows with `.in()` instead of per-item queries in a `for` loop).
+
+## Linting
+
+- **Always run `npm run lint` before considering work complete.** Fix all errors before committing.
+- ESLint flat config (`eslint.config.js`) with TypeScript-ESLint, React Hooks, and React Refresh plugins.
+- **TypeScript-ESLint (recommended rules)**:
+  - No `any` types — use proper types or `unknown`.
+  - No unused variables — remove them or prefix with `_` only if genuinely needed (e.g., rest patterns).
+  - No explicit return types required, but inferred types must be correct.
+  - No `@ts-ignore` — use `@ts-expect-error` with a comment if suppression is truly necessary.
+  - No non-null assertions (`!`) unless you can prove the value is defined.
+- **React Hooks rules**:
+  - All hooks must follow the Rules of Hooks (no conditional hooks, no hooks in loops).
+  - Exhaustive deps in `useEffect`, `useMemo`, `useCallback` — do not suppress the lint warning without a documented reason.
+- **React Refresh**:
+  - Only export React components from `.tsx` files that use Fast Refresh. Do not mix component exports with non-component exports in the same file.
+- **General**:
+  - No `console.log` in committed code — use a proper logger or remove before committing.
+  - No `var` — use `const` or `let`.
+  - Prefer `const` over `let` when the variable is never reassigned.
+  - No unreachable code after `return`, `throw`, `break`, or `continue`.
+  - Run `npm run lint:fix` for auto-fixable issues, then manually fix the rest.
 
 ## Testing
 
@@ -112,16 +139,47 @@ tests/
   - Run: `npx playwright test`
   - Test files in `tests/e2e/`.
 - Write tests for all business logic and critical user paths.
+- **Unit test files with JSX must use `.test.tsx`** (not `.test.ts`) — Vite/OXC won't parse JSX in `.ts` files.
+- **Mock `@/lib/supabase`** in unit tests — all hooks import supabase directly, so mock the module with `vi.mock("@/lib/supabase", ...)`.
+- **Use `@testing-library/react` `renderHook`** for testing React Query hooks — wrap with `QueryClientProvider` (retry: false for deterministic tests).
+- **Test wrapper**: `src/test-utils.tsx` provides `renderWithProviders` (QueryClient + MemoryRouter) and `createTestQueryClient`.
+- **Mock `AuthProvider`** in component tests by mocking `"../AuthProvider"` with a `useAuthContext` that returns controlled values — avoids needing real Supabase auth.
+- **Prefer testing RPC call shapes** over mocking Supabase query chains — RPC mocks are simpler (`vi.fn()` on `supabase.rpc`) and verify the contract with the database.
 
 ## Supabase Guidelines
 
 - Always enable RLS on every table.
-- Write RLS policies that check role from `user_roles` table using `auth.uid()`.
-- Use database triggers (PL/pgSQL) for side effects (e.g., auto-creating user_roles on signup).
+- Write RLS policies that check role from `profiles` table using `auth.uid()`.
+- Use database triggers (PL/pgSQL) for side effects (e.g., auto-creating profile on signup).
 - Use Edge Functions for email webhook processing and sending.
 - Migrations go in `supabase/migrations/` with descriptive names.
 - Run `supabase db push` to apply migrations locally, `supabase db reset` to reset.
 
+### RLS Security Rules
+
+- **Never use `USING (true)`** on SELECT policies — this exposes the entire table to any authenticated user. Scope policies to the user's role or use a `SECURITY DEFINER` function for controlled access.
+- **Always add `WITH CHECK` on UPDATE/INSERT policies** to restrict which columns/values can be written. RLS cannot restrict individual columns, so use `SECURITY DEFINER` functions for column-level control (e.g., letting users update only their `name`, not their `role`).
+- **Validate security-sensitive data server-side**, never client-side only. Invite tokens, role assignments, and access grants must be verified in database triggers or RPC functions, not just in the frontend.
+- **Prevent sender impersonation** — INSERT policies on message tables must enforce `sender_type` and `sender_id = auth.uid()` via `WITH CHECK`.
+- **Protect against race conditions** — use partial unique indexes or advisory locks for critical uniqueness guarantees (e.g., only one admin can exist via auto-signup).
+- **Add `updated_at` triggers** — never rely on client-side timestamps. Create a reusable `set_updated_at()` trigger function for all tables with `updated_at` columns.
+- **Keep schema in sync with CLAUDE.md** — if the data model spec says a column exists, the migration must include it. Flag deviations explicitly.
+- **Generate tokens server-side** — use `gen_random_bytes()` or `gen_random_uuid()` in PL/pgSQL, not `crypto.getRandomValues()` on the client. Client-side token generation can be bypassed.
+- **Prefer `SECURITY DEFINER` RPCs over direct table access** for sensitive operations (invites, role assignments, multi-step mutations). This centralizes authorization checks and ensures atomicity.
+- **Use advisory locks (`pg_advisory_xact_lock`) for first-user race protection** — partial unique indexes prevent ever adding a second row with that value (e.g., `one_admin_profile` prevented multiple admins). Advisory locks only serialize concurrent transactions.
+
+## Error Handling
+
+- **Always check Supabase `.error`** — every Supabase query/mutation returns `{ data, error }`. Never destructure only `data` and ignore `error`.
+- **Always add `.catch()` to standalone promises** — especially `getSession()`, `getUser()`, and any async call in `useEffect`. An uncaught rejection can leave the app stuck permanently.
+- **Always wrap `mutateAsync()` in try/catch** — or use `mutate()` instead. If using `mutateAsync`, catch the error and let React Query's error state handle display. Show `mutation.error?.message` in the UI.
+- **Never use `!` (non-null assertion) on auth data** — `getUser()` can return `null` when the session expires. Always check for null and throw a meaningful error.
+- **Always render error states from queries** — destructure `isError`/`error` from `useQuery` and display them. Never show "No data" when the actual problem is a failed query.
+- **Handle `signOut` errors** — async functions used as `onClick` handlers must catch rejections. Show the error in the UI (e.g., state + `<p className="text-destructive">`), never `console.error`.
+- **Catch `navigator.clipboard` errors** — `writeText()` can throw on permissions denial. Use `.then()/.catch()` instead of `await` in click handlers, or wrap in try/catch.
+- **Guard query params with explicit null checks** — when `useQuery` has `enabled: !!id`, the `queryFn` should still check `if (!id) throw new Error(...)` instead of using `id!`. TypeScript doesn't narrow inside `queryFn` based on `enabled`.
+- **Use atomic operations for multi-step mutations** — delete-then-insert patterns must be wrapped in an RPC/transaction. A partial failure should not leave data in an inconsistent state. Existing examples: `update_agent_companies()` and `create_invite()` RPCs.
+
 ## Commands
 
 ```bash
diff --git a/docs/superpowers/plans/2026-04-07-phase1-implementation.md b/docs/superpowers/plans/2026-04-07-phase1-implementation.md
new file mode 100644
index 0000000..184922e
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-07-phase1-implementation.md
@@ -0,0 +1,4102 @@
+# ServerDesk Phase 1 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 the core ServerDesk application with database schema, authentication with invite system, company/agent/customer management, and ticket CRUD with message threads — all scoped by role via Supabase RLS.
+
+**Architecture:** Feature-first React SPA. Each feature module contains its own components, hooks, and types. Supabase handles auth and database with RLS for authorization. TanStack Query manages server state. Auth state via React Context.
+
+**Tech Stack:** React 19, TypeScript (strict), Vite, Tailwind CSS v4, shadcn/ui, Supabase, React Router, TanStack Query, zod, react-hook-form, Vitest, Playwright
+
+**Spec:** `docs/superpowers/specs/2026-04-07-serverdesk-phase1-design.md`
+
+---
+
+## File Structure
+
+### New files to create
+
+```
+supabase/migrations/
+├── 00001_create_enums.sql
+├── 00002_create_tables.sql
+├── 00003_create_rls_policies.sql
+└── 00004_create_trigger.sql
+
+src/features/auth/
+├── AuthProvider.tsx
+├── components/
+│   ├── LoginForm.tsx
+│   ├── SignupForm.tsx
+│   ├── ProtectedRoute.tsx
+│   └── RoleGuard.tsx
+└── hooks/
+    ├── useAuth.ts
+    └── useProfile.ts
+
+src/features/companies/
+├── components/
+│   ├── CompanyList.tsx
+│   ├── CompanyForm.tsx
+│   ├── CompanyDetail.tsx
+│   └── InviteCMDialog.tsx
+├── hooks/
+│   ├── useCompanies.ts
+│   ├── useCompany.ts
+│   └── useCreateInvite.ts
+└── types.ts
+
+src/features/agents/
+├── components/
+│   ├── AgentList.tsx
+│   ├── InviteAgentDialog.tsx
+│   └── AssignCompaniesDialog.tsx
+├── hooks/
+│   ├── useAgents.ts
+│   ├── useAgent.ts
+│   └── useAgentCompanies.ts
+└── types.ts
+
+src/features/customers/
+├── components/
+│   ├── CustomerList.tsx
+│   └── CustomerForm.tsx
+├── hooks/
+│   └── useCustomers.ts
+└── types.ts
+
+src/features/tickets/
+├── components/
+│   ├── TicketList.tsx
+│   ├── TicketDetail.tsx
+│   ├── TicketMessageThread.tsx
+│   ├── TicketFilters.tsx
+│   ├── TicketStatusBadge.tsx
+│   ├── TicketPriorityBadge.tsx
+│   └── CreateTicketForm.tsx
+├── hooks/
+│   ├── useTickets.ts
+│   ├── useTicket.ts
+│   ├── useTicketMessages.ts
+│   ├── useCreateMessage.ts
+│   └── useUpdateTicket.ts
+└── types.ts
+
+src/features/dashboard/
+├── components/
+│   ├── DashboardStats.tsx
+│   └── StatCard.tsx
+├── hooks/
+│   └── useDashboardStats.ts
+└── types.ts
+```
+
+### Existing files to modify
+
+```
+src/App.tsx                  — wrap with AuthProvider
+src/routes/index.tsx         — real routes with ProtectedRoute/RoleGuard
+src/layouts/AppLayout.tsx    — role-based sidebar navigation
+src/lib/supabase.ts          — add typed client with Database generic
+src/lib/types.ts             — update with generated DB types
+```
+
+---
+
+## Phase A: Database Foundation
+
+### Task 1: Create database enums and tables migration
+
+**Files:**
+- Create: `supabase/migrations/00001_create_enums_and_tables.sql`
+
+- [x] **Step 1: Write the migration SQL**
+
+Create `supabase/migrations/00001_create_enums_and_tables.sql`:
+
+```sql
+-- Enums
+CREATE TYPE app_role AS ENUM ('admin', 'agent', 'customer_manager');
+CREATE TYPE ticket_status AS ENUM ('open', 'in_progress', 'waiting', 'resolved', 'closed');
+CREATE TYPE ticket_priority AS ENUM ('low', 'medium', 'high', 'urgent');
+CREATE TYPE sender_type AS ENUM ('customer', 'agent', 'system');
+
+-- Profiles (one per auth.user)
+CREATE TABLE profiles (
+  user_id uuid PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
+  name text NOT NULL,
+  role app_role NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Companies
+CREATE TABLE companies (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  name text NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- User-company assignments (agents + customer managers)
+CREATE TABLE user_companies (
+  user_id uuid NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  PRIMARY KEY (user_id, company_id)
+);
+
+-- Invites
+CREATE TABLE invites (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  email text NOT NULL,
+  role app_role NOT NULL,
+  token text UNIQUE NOT NULL,
+  invited_by uuid NOT NULL REFERENCES auth.users(id),
+  used_at timestamptz,
+  expires_at timestamptz NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Invite-company assignments (which companies the invite grants)
+CREATE TABLE invite_companies (
+  invite_id uuid NOT NULL REFERENCES invites(id) ON DELETE CASCADE,
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  PRIMARY KEY (invite_id, company_id)
+);
+
+-- Customers (managed by customer managers)
+CREATE TABLE customers (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  email text UNIQUE NOT NULL,
+  name text NOT NULL,
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Tickets
+CREATE TABLE tickets (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  subject text NOT NULL,
+  description text,
+  status ticket_status NOT NULL DEFAULT 'open',
+  priority ticket_priority NOT NULL DEFAULT 'medium',
+  customer_id uuid NOT NULL REFERENCES customers(id),
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_by uuid REFERENCES auth.users(id),
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Ticket messages
+CREATE TABLE ticket_messages (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  ticket_id uuid NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+  sender_type sender_type NOT NULL,
+  sender_id uuid,
+  body text NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Indexes for common queries
+CREATE INDEX idx_user_companies_user ON user_companies(user_id);
+CREATE INDEX idx_user_companies_company ON user_companies(company_id);
+CREATE INDEX idx_tickets_company ON tickets(company_id);
+CREATE INDEX idx_tickets_status ON tickets(status);
+CREATE INDEX idx_tickets_customer ON tickets(customer_id);
+CREATE INDEX idx_ticket_messages_ticket ON ticket_messages(ticket_id);
+CREATE INDEX idx_customers_company ON customers(company_id);
+CREATE INDEX idx_invites_token ON invites(token);
+CREATE INDEX idx_invites_email ON invites(email);
+```
+
+- [x] **Step 2: Verify migration applies**
+
+Start Supabase local (if not running) and apply:
+
+```bash
+npx supabase start
+npx supabase db reset
+```
+
+Expected: Migration applies without errors. Check Supabase Studio at http://127.0.0.1:54323 to verify tables exist.
+
+- [x] **Step 3: Commit**
+
+```bash
+git add supabase/migrations/00001_create_enums_and_tables.sql
+git commit -m "feat(db): create enums and tables for ServerDesk schema"
+```
+
+---
+
+### Task 2: Create RLS policies
+
+**Files:**
+- Create: `supabase/migrations/00002_create_rls_policies.sql`
+
+- [x] **Step 1: Write RLS policies**
+
+Create `supabase/migrations/00002_create_rls_policies.sql`:
+
+```sql
+-- Enable RLS on all tables
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE companies ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_companies ENABLE ROW LEVEL SECURITY;
+ALTER TABLE invites ENABLE ROW LEVEL SECURITY;
+ALTER TABLE invite_companies ENABLE ROW LEVEL SECURITY;
+ALTER TABLE customers ENABLE ROW LEVEL SECURITY;
+ALTER TABLE tickets ENABLE ROW LEVEL SECURITY;
+ALTER TABLE ticket_messages ENABLE ROW LEVEL SECURITY;
+
+-- Helper: get current user's role
+CREATE OR REPLACE FUNCTION auth.user_role()
+RETURNS app_role
+LANGUAGE sql
+STABLE
+SECURITY DEFINER
+AS $$
+  SELECT role FROM profiles WHERE user_id = auth.uid()
+$$;
+
+-- Helper: get current user's company IDs
+CREATE OR REPLACE FUNCTION auth.user_company_ids()
+RETURNS SETOF uuid
+LANGUAGE sql
+STABLE
+SECURITY DEFINER
+AS $$
+  SELECT company_id FROM user_companies WHERE user_id = auth.uid()
+$$;
+
+-- ==================
+-- PROFILES
+-- ==================
+
+-- Users can read their own profile
+CREATE POLICY profiles_select_own ON profiles
+  FOR SELECT USING (user_id = auth.uid());
+
+-- Admin can read all profiles
+CREATE POLICY profiles_select_admin ON profiles
+  FOR SELECT USING (auth.user_role() = 'admin');
+
+-- Admin can update any profile
+CREATE POLICY profiles_update_admin ON profiles
+  FOR UPDATE USING (auth.user_role() = 'admin');
+
+-- Users can update their own profile (name only, not role)
+CREATE POLICY profiles_update_own ON profiles
+  FOR UPDATE USING (user_id = auth.uid());
+
+-- ==================
+-- COMPANIES
+-- ==================
+
+-- Admin: full CRUD
+CREATE POLICY companies_admin ON companies
+  FOR ALL USING (auth.user_role() = 'admin');
+
+-- Agent: read own companies
+CREATE POLICY companies_select_agent ON companies
+  FOR SELECT USING (
+    auth.user_role() = 'agent'
+    AND id IN (SELECT auth.user_company_ids())
+  );
+
+-- Customer manager: read own company
+CREATE POLICY companies_select_cm ON companies
+  FOR SELECT USING (
+    auth.user_role() = 'customer_manager'
+    AND id IN (SELECT auth.user_company_ids())
+  );
+
+-- ==================
+-- USER_COMPANIES
+-- ==================
+
+-- Admin: full access
+CREATE POLICY user_companies_admin ON user_companies
+  FOR ALL USING (auth.user_role() = 'admin');
+
+-- Users can read their own assignments
+CREATE POLICY user_companies_select_own ON user_companies
+  FOR SELECT USING (user_id = auth.uid());
+
+-- ==================
+-- INVITES
+-- ==================
+
+-- Admin: full access
+CREATE POLICY invites_admin ON invites
+  FOR ALL USING (auth.user_role() = 'admin');
+
+-- Anyone can read invite by token (for signup validation)
+-- Using a permissive policy for anonymous access during signup
+CREATE POLICY invites_select_by_token ON invites
+  FOR SELECT USING (true);
+
+-- ==================
+-- INVITE_COMPANIES
+-- ==================
+
+-- Admin: full access
+CREATE POLICY invite_companies_admin ON invite_companies
+  FOR ALL USING (auth.user_role() = 'admin');
+
+-- Readable during signup (linked to invite)
+CREATE POLICY invite_companies_select ON invite_companies
+  FOR SELECT USING (true);
+
+-- ==================
+-- CUSTOMERS
+-- ==================
+
+-- Admin: full access
+CREATE POLICY customers_admin ON customers
+  FOR ALL USING (auth.user_role() = 'admin');
+
+-- Customer manager: CRUD on own company's customers
+CREATE POLICY customers_select_cm ON customers
+  FOR SELECT USING (
+    auth.user_role() = 'customer_manager'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+CREATE POLICY customers_insert_cm ON customers
+  FOR INSERT WITH CHECK (
+    auth.user_role() = 'customer_manager'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+CREATE POLICY customers_update_cm ON customers
+  FOR UPDATE USING (
+    auth.user_role() = 'customer_manager'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+-- ==================
+-- TICKETS
+-- ==================
+
+-- Admin: full access
+CREATE POLICY tickets_admin ON tickets
+  FOR ALL USING (auth.user_role() = 'admin');
+
+-- Agent: read/update tickets in their companies
+CREATE POLICY tickets_select_agent ON tickets
+  FOR SELECT USING (
+    auth.user_role() = 'agent'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+CREATE POLICY tickets_update_agent ON tickets
+  FOR UPDATE USING (
+    auth.user_role() = 'agent'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+-- Customer manager: read/insert/update tickets in their company
+CREATE POLICY tickets_select_cm ON tickets
+  FOR SELECT USING (
+    auth.user_role() = 'customer_manager'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+CREATE POLICY tickets_insert_cm ON tickets
+  FOR INSERT WITH CHECK (
+    auth.user_role() = 'customer_manager'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+CREATE POLICY tickets_update_cm ON tickets
+  FOR UPDATE USING (
+    auth.user_role() = 'customer_manager'
+    AND company_id IN (SELECT auth.user_company_ids())
+  );
+
+-- ==================
+-- TICKET_MESSAGES
+-- ==================
+
+-- Admin: full access
+CREATE POLICY ticket_messages_admin ON ticket_messages
+  FOR ALL USING (auth.user_role() = 'admin');
+
+-- Agent: read/insert messages for tickets in their companies
+CREATE POLICY ticket_messages_select_agent ON ticket_messages
+  FOR SELECT USING (
+    auth.user_role() = 'agent'
+    AND ticket_id IN (
+      SELECT id FROM tickets WHERE company_id IN (SELECT auth.user_company_ids())
+    )
+  );
+
+CREATE POLICY ticket_messages_insert_agent ON ticket_messages
+  FOR INSERT WITH CHECK (
+    auth.user_role() = 'agent'
+    AND ticket_id IN (
+      SELECT id FROM tickets WHERE company_id IN (SELECT auth.user_company_ids())
+    )
+  );
+
+-- Customer manager: read/insert messages for tickets in their company
+CREATE POLICY ticket_messages_select_cm ON ticket_messages
+  FOR SELECT USING (
+    auth.user_role() = 'customer_manager'
+    AND ticket_id IN (
+      SELECT id FROM tickets WHERE company_id IN (SELECT auth.user_company_ids())
+    )
+  );
+
+CREATE POLICY ticket_messages_insert_cm ON ticket_messages
+  FOR INSERT WITH CHECK (
+    auth.user_role() = 'customer_manager'
+    AND ticket_id IN (
+      SELECT id FROM tickets WHERE company_id IN (SELECT auth.user_company_ids())
+    )
+  );
+```
+
+- [x] **Step 2: Apply and verify**
+
+```bash
+npx supabase db reset
+```
+
+Expected: Both migrations apply without errors.
+
+- [x] **Step 3: Commit**
+
+```bash
+git add supabase/migrations/00002_create_rls_policies.sql
+git commit -m "feat(db): add RLS policies for all tables"
+```
+
+---
+
+### Task 3: Create signup trigger
+
+**Files:**
+- Create: `supabase/migrations/00003_create_signup_trigger.sql`
+
+- [x] **Step 1: Write the trigger function**
+
+Create `supabase/migrations/00003_create_signup_trigger.sql`:
+
+```sql
+-- Trigger function: auto-create profile on signup
+CREATE OR REPLACE FUNCTION handle_new_user()
+RETURNS trigger
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  _profile_count int;
+  _invite record;
+  _user_name text;
+BEGIN
+  -- Get the name from user metadata (passed during signup)
+  _user_name := COALESCE(
+    NEW.raw_user_meta_data ->> 'name',
+    split_part(NEW.email, '@', 1)
+  );
+
+  -- Check if this is the first user
+  SELECT count(*) INTO _profile_count FROM profiles;
+
+  IF _profile_count = 0 THEN
+    -- First user becomes admin
+    INSERT INTO profiles (user_id, name, role)
+    VALUES (NEW.id, _user_name, 'admin');
+    RETURN NEW;
+  END IF;
+
+  -- Look up valid invite
+  SELECT * INTO _invite
+  FROM invites
+  WHERE email = NEW.email
+    AND used_at IS NULL
+    AND expires_at > now()
+  ORDER BY created_at DESC
+  LIMIT 1;
+
+  IF _invite IS NULL THEN
+    RAISE EXCEPTION 'No valid invite found for %', NEW.email;
+  END IF;
+
+  -- Create profile with role from invite
+  INSERT INTO profiles (user_id, name, role)
+  VALUES (NEW.id, _user_name, _invite.role);
+
+  -- Copy invite_companies to user_companies
+  INSERT INTO user_companies (user_id, company_id)
+  SELECT NEW.id, ic.company_id
+  FROM invite_companies ic
+  WHERE ic.invite_id = _invite.id;
+
+  -- Mark invite as used
+  UPDATE invites SET used_at = now() WHERE id = _invite.id;
+
+  RETURN NEW;
+END;
+$$;
+
+-- Attach trigger to auth.users
+CREATE TRIGGER on_auth_user_created
+  AFTER INSERT ON auth.users
+  FOR EACH ROW
+  EXECUTE FUNCTION handle_new_user();
+```
+
+- [x] **Step 2: Apply and verify**
+
+```bash
+npx supabase db reset
+```
+
+Expected: All 3 migrations apply without errors.
+
+- [x] **Step 3: Commit**
+
+```bash
+git add supabase/migrations/00003_create_signup_trigger.sql
+git commit -m "feat(db): add signup trigger for auto-profile creation"
+```
+
+---
+
+### Task 4: Generate TypeScript types from database
+
+**Files:**
+- Create: `src/lib/database.types.ts`
+- Modify: `src/lib/supabase.ts`
+- Modify: `src/lib/types.ts`
+
+- [x] **Step 1: Generate types**
+
+```bash
+npx supabase gen types typescript --local > src/lib/database.types.ts
+```
+
+- [x] **Step 2: Update Supabase client with typed client**
+
+Replace `src/lib/supabase.ts`:
+
+```ts
+import { createClient } from "@supabase/supabase-js";
+import type { Database } from "./database.types";
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  throw new Error("Missing Supabase environment variables");
+}
+
+export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);
+```
+
+- [x] **Step 3: Update shared types**
+
+Replace `src/lib/types.ts`:
+
+```ts
+import type { Database } from "./database.types";
+
+// Database row types
+export type Profile = Database["public"]["Tables"]["profiles"]["Row"];
+export type Company = Database["public"]["Tables"]["companies"]["Row"];
+export type UserCompany = Database["public"]["Tables"]["user_companies"]["Row"];
+export type Invite = Database["public"]["Tables"]["invites"]["Row"];
+export type InviteCompany = Database["public"]["Tables"]["invite_companies"]["Row"];
+export type Customer = Database["public"]["Tables"]["customers"]["Row"];
+export type Ticket = Database["public"]["Tables"]["tickets"]["Row"];
+export type TicketMessage = Database["public"]["Tables"]["ticket_messages"]["Row"];
+
+// Enum types
+export type AppRole = Database["public"]["Enums"]["app_role"];
+export type TicketStatus = Database["public"]["Enums"]["ticket_status"];
+export type TicketPriority = Database["public"]["Enums"]["ticket_priority"];
+export type SenderType = Database["public"]["Enums"]["sender_type"];
+```
+
+- [x] **Step 4: Verify build**
+
+```bash
+npm run build
+```
+
+Expected: Build succeeds with no type errors.
+
+- [x] **Step 5: Commit**
+
+```bash
+git add src/lib/database.types.ts src/lib/supabase.ts src/lib/types.ts
+git commit -m "feat(db): generate TypeScript types from database schema"
+```
+
+---
+
+## Phase B: Authentication
+
+### Task 5: AuthProvider and auth hooks
+
+**Files:**
+- Create: `src/features/auth/hooks/useAuth.ts`
+- Create: `src/features/auth/hooks/useProfile.ts`
+- Create: `src/features/auth/AuthProvider.tsx`
+
+- [x] **Step 1: Create useAuth hook**
+
+Create `src/features/auth/hooks/useAuth.ts`:
+
+```ts
+import { supabase } from "@/lib/supabase";
+
+export const useAuth = () => {
+  const signIn = async (email: string, password: string) => {
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    if (error) throw error;
+  };
+
+  const signUp = async (
+    email: string,
+    password: string,
+    name: string,
+  ) => {
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: { name },
+      },
+    });
+    if (error) throw error;
+  };
+
+  const signOut = async () => {
+    const { error } = await supabase.auth.signOut();
+    if (error) throw error;
+  };
+
+  return { signIn, signUp, signOut };
+};
+```
+
+- [x] **Step 2: Create useProfile hook**
+
+Create `src/features/auth/hooks/useProfile.ts`:
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { Profile } from "@/lib/types";
+
+export const useProfile = (userId: string | undefined) => {
+  return useQuery<Profile | null>({
+    queryKey: ["profile", userId],
+    queryFn: async () => {
+      if (!userId) return null;
+      const { data, error } = await supabase
+        .from("profiles")
+        .select("*")
+        .eq("user_id", userId)
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    enabled: !!userId,
+  });
+};
+```
+
+- [x] **Step 3: Create AuthProvider**
+
+Create `src/features/auth/AuthProvider.tsx`:
+
+```tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import type { User, Session } from "@supabase/supabase-js";
+import { supabase } from "@/lib/supabase";
+import { useProfile } from "./hooks/useProfile";
+import type { Profile } from "@/lib/types";
+
+type AuthContextType = {
+  user: User | null;
+  profile: Profile | null;
+  session: Session | null;
+  loading: boolean;
+};
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  profile: null,
+  session: null,
+  loading: true,
+});
+
+export const useAuthContext = () => useContext(AuthContext);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const user = session?.user ?? null;
+  const { data: profile } = useProfile(user?.id);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        profile: profile ?? null,
+        session,
+        loading,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+```
+
+- [x] **Step 4: Verify build**
+
+```bash
+npm run build
+```
+
+Expected: Build succeeds. The AuthProvider is not wired into the app yet — that happens in Task 7.
+
+- [x] **Step 5: Commit**
+
+```bash
+git add src/features/auth/
+git commit -m "feat(auth): add AuthProvider, useAuth, and useProfile hooks"
+```
+
+---
+
+### Task 6: Login and Signup pages
+
+**Files:**
+- Create: `src/features/auth/components/LoginForm.tsx`
+- Create: `src/features/auth/components/SignupForm.tsx`
+
+- [x] **Step 1: Install required shadcn components**
+
+```bash
+npx shadcn@latest add input label card separator -y
+```
+
+- [x] **Step 2: Create LoginForm**
+
+Create `src/features/auth/components/LoginForm.tsx`:
+
+```tsx
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAuth } from "../hooks/useAuth";
+
+const loginSchema = z.object({
+  email: z.email(),
+  password: z.string().min(6, "Password must be at least 6 characters"),
+});
+
+type LoginValues = z.infer<typeof loginSchema>;
+
+export const LoginForm = () => {
+  const navigate = useNavigate();
+  const { signIn } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginValues>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (values: LoginValues) => {
+    try {
+      setError(null);
+      await signIn(values.email, values.password);
+      navigate("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">Sign in to ServerDesk</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              {...register("email")}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              {...register("password")}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive">
+                {errors.password.message}
+              </p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? "Signing in..." : "Sign in"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+```
+
+- [x] **Step 3: Create SignupForm**
+
+Create `src/features/auth/components/SignupForm.tsx`:
+
+```tsx
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { supabase } from "@/lib/supabase";
+import { useAuth } from "../hooks/useAuth";
+
+const signupSchema = z.object({
+  email: z.email(),
+  name: z.string().min(1, "Name is required"),
+  password: z.string().min(6, "Password must be at least 6 characters"),
+});
+
+type SignupValues = z.infer<typeof signupSchema>;
+
+export const SignupForm = () => {
+  const navigate = useNavigate();
+  const { token } = useParams<{ token?: string }>();
+  const { signUp } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const [inviteEmail, setInviteEmail] = useState<string | null>(null);
+  const [validating, setValidating] = useState(!!token);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<SignupValues>({
+    resolver: zodResolver(signupSchema),
+  });
+
+  useEffect(() => {
+    if (!token) {
+      setValidating(false);
+      return;
+    }
+
+    const validateToken = async () => {
+      const { data, error } = await supabase
+        .from("invites")
+        .select("email, used_at, expires_at")
+        .eq("token", token)
+        .single();
+
+      if (error || !data) {
+        setError("Invalid invite link");
+        setValidating(false);
+        return;
+      }
+
+      if (data.used_at) {
+        setError("This invite has already been used");
+        setValidating(false);
+        return;
+      }
+
+      if (new Date(data.expires_at) < new Date()) {
+        setError("This invite has expired");
+        setValidating(false);
+        return;
+      }
+
+      setInviteEmail(data.email);
+      setValue("email", data.email);
+      setValidating(false);
+    };
+
+    validateToken();
+  }, [token, setValue]);
+
+  const onSubmit = async (values: SignupValues) => {
+    try {
+      setError(null);
+      await signUp(values.email, values.password, values.name);
+      navigate("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Signup failed");
+    }
+  };
+
+  if (validating) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-center text-muted-foreground">
+            Validating invite...
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error && !inviteEmail && token) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-center text-destructive">{error}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">
+          {token ? "Complete your registration" : "Create admin account"}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              readOnly={!!inviteEmail}
+              {...register("email")}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              placeholder="Your full name"
+              {...register("name")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              {...register("password")}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive">
+                {errors.password.message}
+              </p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? "Creating account..." : "Create account"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+```
+
+- [x] **Step 4: Verify build**
+
+```bash
+npm run build
+```
+
+Expected: Build succeeds.
+
+- [x] **Step 5: Commit**
+
+```bash
+git add src/features/auth/components/ src/components/ui/
+git commit -m "feat(auth): add LoginForm and SignupForm components"
+```
+
+---
+
+### Task 7: Route protection and app wiring
+
+**Files:**
+- Create: `src/features/auth/components/ProtectedRoute.tsx`
+- Create: `src/features/auth/components/RoleGuard.tsx`
+- Modify: `src/routes/index.tsx`
+- Modify: `src/App.tsx`
+- Modify: `src/layouts/AppLayout.tsx`
+
+- [x] **Step 1: Create ProtectedRoute**
+
+Create `src/features/auth/components/ProtectedRoute.tsx`:
+
+```tsx
+import { Navigate, Outlet } from "react-router";
+import { useAuthContext } from "../AuthProvider";
+
+export const ProtectedRoute = () => {
+  const { user, loading } = useAuthContext();
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Outlet />;
+};
+```
+
+- [x] **Step 2: Create RoleGuard**
+
+Create `src/features/auth/components/RoleGuard.tsx`:
+
+```tsx
+import { Navigate, Outlet } from "react-router";
+import { useAuthContext } from "../AuthProvider";
+import type { AppRole } from "@/lib/types";
+
+type RoleGuardProps = {
+  allowedRoles: AppRole[];
+};
+
+export const RoleGuard = ({ allowedRoles }: RoleGuardProps) => {
+  const { profile, loading } = useAuthContext();
+
+  if (loading || !profile) {
+    return null;
+  }
+
+  if (!allowedRoles.includes(profile.role)) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+};
+```
+
+- [x] **Step 3: Update AppLayout with role-based navigation**
+
+Replace `src/layouts/AppLayout.tsx`:
+
+```tsx
+import { NavLink, Outlet } from "react-router";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { useAuth } from "@/features/auth/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { to: "/", label: "Dashboard", roles: ["admin", "agent", "customer_manager"] },
+  { to: "/tickets", label: "Tickets", roles: ["admin", "agent", "customer_manager"] },
+  { to: "/companies", label: "Companies", roles: ["admin"] },
+  { to: "/agents", label: "Agents", roles: ["admin"] },
+  { to: "/customers", label: "Customers", roles: ["customer_manager"] },
+] as const;
+
+export const AppLayout = () => {
+  const { profile, user } = useAuthContext();
+  const { signOut } = useAuth();
+
+  const visibleItems = navItems.filter(
+    (item) => profile && (item.roles as readonly string[]).includes(profile.role),
+  );
+
+  return (
+    <div className="flex min-h-screen">
+      <aside className="flex w-64 flex-col border-r bg-muted/40 p-4">
+        <h2 className="mb-6 text-lg font-semibold">ServerDesk</h2>
+        <nav className="flex flex-1 flex-col gap-1">
+          {visibleItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === "/"}
+              className={({ isActive }) =>
+                cn(
+                  "rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-primary text-primary-foreground"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="border-t pt-4">
+          <p className="mb-2 truncate text-sm text-muted-foreground">
+            {user?.email}
+          </p>
+          <Button variant="outline" size="sm" className="w-full" onClick={signOut}>
+            Sign out
+          </Button>
+        </div>
+      </aside>
+      <main className="flex-1 p-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
+```
+
+- [x] **Step 4: Update routes**
+
+Replace `src/routes/index.tsx`:
+
+```tsx
+import { createBrowserRouter } from "react-router";
+import { AuthLayout } from "@/layouts/AuthLayout";
+import { AppLayout } from "@/layouts/AppLayout";
+import { ProtectedRoute } from "@/features/auth/components/ProtectedRoute";
+import { RoleGuard } from "@/features/auth/components/RoleGuard";
+import { LoginForm } from "@/features/auth/components/LoginForm";
+import { SignupForm } from "@/features/auth/components/SignupForm";
+
+export const router = createBrowserRouter([
+  {
+    element: <AuthLayout />,
+    children: [
+      { path: "/login", element: <LoginForm /> },
+      { path: "/signup", element: <SignupForm /> },
+      { path: "/signup/:token", element: <SignupForm /> },
+    ],
+  },
+  {
+    element: <ProtectedRoute />,
+    children: [
+      {
+        element: <AppLayout />,
+        children: [
+          { path: "/", element: <div>Dashboard — coming soon</div> },
+          {
+            path: "/tickets",
+            element: <div>Tickets — coming soon</div>,
+          },
+          {
+            element: <RoleGuard allowedRoles={["admin"]} />,
+            children: [
+              {
+                path: "/companies",
+                element: <div>Companies — coming soon</div>,
+              },
+              {
+                path: "/agents",
+                element: <div>Agents — coming soon</div>,
+              },
+            ],
+          },
+          {
+            element: <RoleGuard allowedRoles={["customer_manager"]} />,
+            children: [
+              {
+                path: "/customers",
+                element: <div>Customers — coming soon</div>,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]);
+```
+
+- [x] **Step 5: Wrap App with AuthProvider**
+
+Replace `src/App.tsx`:
+
+```tsx
+import { RouterProvider } from "react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "@/features/auth/AuthProvider";
+import { router } from "@/routes";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60,
+      retry: 1,
+    },
+  },
+});
+
+export const App = () => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <RouterProvider router={router} />
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+};
+```
+
+- [x] **Step 6: Verify build**
+
+```bash
+npm run build
+```
+
+Expected: Build succeeds.
+
+- [x] **Step 7: Commit**
+
+```bash
+git add src/features/auth/components/ src/routes/index.tsx src/App.tsx src/layouts/AppLayout.tsx
+git commit -m "feat(auth): add route protection, role guards, and app wiring"
+```
+
+---
+
+## Phase C: Admin Features
+
+### Task 8: Companies — hooks and list page
+
+**Files:**
+- Create: `src/features/companies/types.ts`
+- Create: `src/features/companies/hooks/useCompanies.ts`
+- Create: `src/features/companies/hooks/useCompany.ts`
+- Create: `src/features/companies/components/CompanyList.tsx`
+- Modify: `src/routes/index.tsx`
+
+- [x] **Step 1: Install shadcn table and dialog components**
+
+```bash
+npx shadcn@latest add table dialog badge textarea select -y
+```
+
+- [x] **Step 2: Create company types**
+
+Create `src/features/companies/types.ts`:
+
+```ts
+import type { Company } from "@/lib/types";
+
+export type CompanyWithCounts = Company & {
+  customer_count: number;
+  ticket_count: number;
+};
+```
+
+- [x] **Step 3: Create useCompanies hook**
+
+Create `src/features/companies/hooks/useCompanies.ts`:
+
+```ts
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { Company } from "@/lib/types";
+
+export const useCompanies = () => {
+  return useQuery<Company[]>({
+    queryKey: ["companies"],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("companies")
+        .select("*")
+        .order("name");
+      if (error) throw error;
+      return data;
+    },
+  });
+};
+
+export const useCreateCompany = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (name: string) => {
+      const { data, error } = await supabase
+        .from("companies")
+        .insert({ name })
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
+    },
+  });
+};
+
+export const useUpdateCompany = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, name }: { id: string; name: string }) => {
+      const { data, error } = await supabase
+        .from("companies")
+        .update({ name, updated_at: new Date().toISOString() })
+        .eq("id", id)
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
+    },
+  });
+};
+
+export const useDeleteCompany = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const { error } = await supabase.from("companies").delete().eq("id", id);
+      if (error) throw error;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
+    },
+  });
+};
+```
+
+- [x] **Step 4: Create useCompany hook**
+
+Create `src/features/companies/hooks/useCompany.ts`:
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { Company } from "@/lib/types";
+
+export const useCompany = (id: string | undefined) => {
+  return useQuery<Company | null>({
+    queryKey: ["company", id],
+    queryFn: async () => {
+      if (!id) return null;
+      const { data, error } = await supabase
+        .from("companies")
+        .select("*")
+        .eq("id", id)
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    enabled: !!id,
+  });
+};
+```
+
+- [x] **Step 5: Create CompanyList component**
+
+Create `src/features/companies/components/CompanyList.tsx`:
+
+```tsx
+import { useState } from "react";
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useCompanies } from "../hooks/useCompanies";
+import { CompanyForm } from "./CompanyForm";
+
+export const CompanyList = () => {
+  const { data: companies, isLoading } = useCompanies();
+  const [showCreate, setShowCreate] = useState(false);
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading companies...</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Companies</h1>
+        <Button onClick={() => setShowCreate(true)}>New Company</Button>
+      </div>
+
+      {showCreate && (
+        <CompanyForm onClose={() => setShowCreate(false)} />
+      )}
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {companies?.map((company) => (
+            <TableRow key={company.id}>
+              <TableCell className="font-medium">{company.name}</TableCell>
+              <TableCell>
+                {new Date(company.created_at).toLocaleDateString()}
+              </TableCell>
+              <TableCell>
+                <Link to={`/companies/${company.id}`}>
+                  <Button variant="ghost" size="sm">
+                    View
+                  </Button>
+                </Link>
+              </TableCell>
+            </TableRow>
+          ))}
+          {companies?.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={3} className="text-center text-muted-foreground">
+                No companies yet
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+```
+
+- [x] **Step 6: Create CompanyForm component**
+
+Create `src/features/companies/components/CompanyForm.tsx`:
+
+```tsx
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { useCreateCompany } from "../hooks/useCompanies";
+
+const companySchema = z.object({
+  name: z.string().min(1, "Company name is required"),
+});
+
+type CompanyValues = z.infer<typeof companySchema>;
+
+type CompanyFormProps = {
+  onClose: () => void;
+};
+
+export const CompanyForm = ({ onClose }: CompanyFormProps) => {
+  const createCompany = useCreateCompany();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CompanyValues>({
+    resolver: zodResolver(companySchema),
+  });
+
+  const onSubmit = async (values: CompanyValues) => {
+    await createCompany.mutateAsync(values.name);
+    onClose();
+  };
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <form onSubmit={handleSubmit(onSubmit)} className="flex items-end gap-4">
+          <div className="flex-1 space-y-2">
+            <Label htmlFor="company-name">Company name</Label>
+            <Input
+              id="company-name"
+              placeholder="Enter company name"
+              {...register("name")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+          <Button type="submit" disabled={createCompany.isPending}>
+            {createCompany.isPending ? "Creating..." : "Create"}
+          </Button>
+          <Button type="button" variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+```
+
+- [x] **Step 7: Wire CompanyList into routes**
+
+Update `src/routes/index.tsx` — replace the companies placeholder route:
+
+Change:
+```tsx
+{ path: "/companies", element: <div>Companies — coming soon</div> }
+```
+To:
+```tsx
+{ path: "/companies", element: <CompanyList /> }
+```
+
+Add the import at the top:
+```tsx
+import { CompanyList } from "@/features/companies/components/CompanyList";
+```
+
+- [x] **Step 8: Verify build**
+
+```bash
+npm run build
+```
+
+- [x] **Step 9: Commit**
+
+```bash
+git add src/features/companies/ src/components/ui/ src/routes/index.tsx
+git commit -m "feat(companies): add company list, create form, and hooks"
+```
+
+---
+
+### Task 9: Company detail page with CM invite
+
+**Files:**
+- Create: `src/features/companies/components/CompanyDetail.tsx`
+- Create: `src/features/companies/components/InviteCMDialog.tsx`
+- Create: `src/features/companies/hooks/useCreateInvite.ts`
+- Modify: `src/routes/index.tsx`
+
+- [x] **Step 1: Create useCreateInvite hook**
+
+Create `src/features/companies/hooks/useCreateInvite.ts`:
+
+```ts
+import { useMutation } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { AppRole } from "@/lib/types";
+
+type CreateInviteParams = {
+  email: string;
+  role: AppRole;
+  companyIds: string[];
+};
+
+const generateToken = () => {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return Array.from(array, (b) => b.toString(16).padStart(2, "0")).join("");
+};
+
+export const useCreateInvite = () => {
+  return useMutation({
+    mutationFn: async ({ email, role, companyIds }: CreateInviteParams) => {
+      const token = generateToken();
+      const expiresAt = new Date();
+      expiresAt.setDate(expiresAt.getDate() + 7); // 7 day expiry
+
+      const { data: invite, error: inviteError } = await supabase
+        .from("invites")
+        .insert({
+          email,
+          role,
+          token,
+          invited_by: (await supabase.auth.getUser()).data.user!.id,
+          expires_at: expiresAt.toISOString(),
+        })
+        .select()
+        .single();
+
+      if (inviteError) throw inviteError;
+
+      if (companyIds.length > 0) {
+        const { error: icError } = await supabase
+          .from("invite_companies")
+          .insert(
+            companyIds.map((companyId) => ({
+              invite_id: invite.id,
+              company_id: companyId,
+            })),
+          );
+        if (icError) throw icError;
+      }
+
+      return { invite, token };
+    },
+  });
+};
+```
+
+- [x] **Step 2: Create InviteCMDialog**
+
+Create `src/features/companies/components/InviteCMDialog.tsx`:
+
+```tsx
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useCreateInvite } from "../hooks/useCreateInvite";
+
+const inviteSchema = z.object({
+  email: z.email("Please enter a valid email"),
+});
+
+type InviteValues = z.infer<typeof inviteSchema>;
+
+type InviteCMDialogProps = {
+  companyId: string;
+  companyName: string;
+};
+
+export const InviteCMDialog = ({
+  companyId,
+  companyName,
+}: InviteCMDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [inviteLink, setInviteLink] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const createInvite = useCreateInvite();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<InviteValues>({
+    resolver: zodResolver(inviteSchema),
+  });
+
+  const onSubmit = async (values: InviteValues) => {
+    const result = await createInvite.mutateAsync({
+      email: values.email,
+      role: "customer_manager",
+      companyIds: [companyId],
+    });
+    setInviteLink(`${window.location.origin}/signup/${result.token}`);
+  };
+
+  const handleCopy = async () => {
+    if (inviteLink) {
+      await navigator.clipboard.writeText(inviteLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setInviteLink(null);
+    setCopied(false);
+    reset();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Invite Customer Manager</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Invite Customer Manager to {companyName}</DialogTitle>
+        </DialogHeader>
+        {inviteLink ? (
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Share this link with the customer manager:
+            </p>
+            <div className="flex gap-2">
+              <Input value={inviteLink} readOnly />
+              <Button onClick={handleCopy}>
+                {copied ? "Copied!" : "Copy"}
+              </Button>
+            </div>
+            <Button variant="outline" className="w-full" onClick={handleClose}>
+              Done
+            </Button>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="invite-email">Email address</Label>
+              <Input
+                id="invite-email"
+                type="email"
+                placeholder="manager@company.com"
+                {...register("email")}
+              />
+              {errors.email && (
+                <p className="text-sm text-destructive">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={createInvite.isPending}
+            >
+              {createInvite.isPending ? "Creating invite..." : "Generate invite link"}
+            </Button>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+```
+
+- [x] **Step 3: Create CompanyDetail**
+
+Create `src/features/companies/components/CompanyDetail.tsx`:
+
+```tsx
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useCompany } from "../hooks/useCompany";
+import { useUpdateCompany, useDeleteCompany } from "../hooks/useCompanies";
+import { InviteCMDialog } from "./InviteCMDialog";
+
+const editSchema = z.object({
+  name: z.string().min(1, "Company name is required"),
+});
+
+type EditValues = z.infer<typeof editSchema>;
+
+export const CompanyDetail = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { data: company, isLoading } = useCompany(id);
+  const updateCompany = useUpdateCompany();
+  const deleteCompany = useDeleteCompany();
+  const [editing, setEditing] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<EditValues>({
+    values: { name: company?.name ?? "" },
+    resolver: zodResolver(editSchema),
+  });
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading...</p>;
+  }
+
+  if (!company) {
+    return <p className="text-destructive">Company not found</p>;
+  }
+
+  const onSubmit = async (values: EditValues) => {
+    await updateCompany.mutateAsync({ id: company.id, name: values.name });
+    setEditing(false);
+  };
+
+  const handleDelete = async () => {
+    if (confirm("Delete this company? This will also delete all related data.")) {
+      await deleteCompany.mutateAsync(company.id);
+      navigate("/companies");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{company.name}</h1>
+        <div className="flex gap-2">
+          <InviteCMDialog companyId={company.id} companyName={company.name} />
+          <Button variant="outline" onClick={() => setEditing(!editing)}>
+            {editing ? "Cancel" : "Edit"}
+          </Button>
+          <Button variant="destructive" onClick={handleDelete}>
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {editing && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Edit Company</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit(onSubmit)} className="flex items-end gap-4">
+              <div className="flex-1 space-y-2">
+                <Label htmlFor="edit-name">Name</Label>
+                <Input id="edit-name" {...register("name")} />
+                {errors.name && (
+                  <p className="text-sm text-destructive">
+                    {errors.name.message}
+                  </p>
+                )}
+              </div>
+              <Button type="submit" disabled={updateCompany.isPending}>
+                Save
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Company Info</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm">
+          <p>
+            <span className="text-muted-foreground">Created:</span>{" "}
+            {new Date(company.created_at).toLocaleDateString()}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+```
+
+- [x] **Step 4: Add company detail route**
+
+In `src/routes/index.tsx`, add the import and route:
+
+Add import:
+```tsx
+import { CompanyDetail } from "@/features/companies/components/CompanyDetail";
+```
+
+Add route inside the admin `RoleGuard` children, after the `/companies` route:
+```tsx
+{ path: "/companies/:id", element: <CompanyDetail /> },
+```
+
+- [x] **Step 5: Verify build**
+
+```bash
+npm run build
+```
+
+- [x] **Step 6: Commit**
+
+```bash
+git add src/features/companies/ src/routes/index.tsx
+git commit -m "feat(companies): add company detail page with CM invite dialog"
+```
+
+---
+
+### Task 10: Agents — list, invite, and company assignment
+
+**Files:**
+- Create: `src/features/agents/types.ts`
+- Create: `src/features/agents/hooks/useAgents.ts`
+- Create: `src/features/agents/hooks/useAgent.ts`
+- Create: `src/features/agents/hooks/useAgentCompanies.ts`
+- Create: `src/features/agents/components/AgentList.tsx`
+- Create: `src/features/agents/components/InviteAgentDialog.tsx`
+- Create: `src/features/agents/components/AssignCompaniesDialog.tsx`
+- Modify: `src/routes/index.tsx`
+
+- [x] **Step 1: Create agent types**
+
+Create `src/features/agents/types.ts`:
+
+```ts
+import type { Profile, Company } from "@/lib/types";
+
+export type AgentWithCompanies = Profile & {
+  email: string;
+  companies: Company[];
+};
+```
+
+- [x] **Step 2: Create useAgents hook**
+
+Create `src/features/agents/hooks/useAgents.ts`:
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { AgentWithCompanies } from "../types";
+
+export const useAgents = () => {
+  return useQuery<AgentWithCompanies[]>({
+    queryKey: ["agents"],
+    queryFn: async () => {
+      // Get all agent profiles
+      const { data: profiles, error: profilesError } = await supabase
+        .from("profiles")
+        .select("*")
+        .eq("role", "agent")
+        .order("name");
+
+      if (profilesError) throw profilesError;
+
+      // Get emails from auth (via a join on user_id)
+      // Since we can't directly query auth.users, we'll use the admin API
+      // For now, get user_companies and companies for each agent
+      const agents: AgentWithCompanies[] = [];
+
+      for (const profile of profiles) {
+        const { data: userCompanies } = await supabase
+          .from("user_companies")
+          .select("company_id, companies(*)")
+          .eq("user_id", profile.user_id);
+
+        const { data: userData } = await supabase.auth.admin.getUserById(
+          profile.user_id,
+        );
+
+        agents.push({
+          ...profile,
+          email: userData?.user?.email ?? "",
+          companies:
+            userCompanies?.map(
+              (uc) => uc.companies as unknown as AgentWithCompanies["companies"][number],
+            ) ?? [],
+        });
+      }
+
+      return agents;
+    },
+  });
+};
+```
+
+- [x] **Step 3: Create useAgentCompanies hook**
+
+Create `src/features/agents/hooks/useAgentCompanies.ts`:
+
+```ts
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+
+export const useUpdateAgentCompanies = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      agentId,
+      companyIds,
+    }: {
+      agentId: string;
+      companyIds: string[];
+    }) => {
+      // Delete existing assignments
+      const { error: deleteError } = await supabase
+        .from("user_companies")
+        .delete()
+        .eq("user_id", agentId);
+
+      if (deleteError) throw deleteError;
+
+      // Insert new assignments
+      if (companyIds.length > 0) {
+        const { error: insertError } = await supabase
+          .from("user_companies")
+          .insert(
+            companyIds.map((companyId) => ({
+              user_id: agentId,
+              company_id: companyId,
+            })),
+          );
+
+        if (insertError) throw insertError;
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+};
+```
+
+- [x] **Step 4: Create InviteAgentDialog**
+
+Create `src/features/agents/components/InviteAgentDialog.tsx`:
+
+```tsx
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useCompanies } from "@/features/companies/hooks/useCompanies";
+import { useCreateInvite } from "@/features/companies/hooks/useCreateInvite";
+
+const inviteSchema = z.object({
+  email: z.email("Please enter a valid email"),
+});
+
+type InviteValues = z.infer<typeof inviteSchema>;
+
+export const InviteAgentDialog = () => {
+  const [open, setOpen] = useState(false);
+  const [inviteLink, setInviteLink] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [selectedCompanies, setSelectedCompanies] = useState<string[]>([]);
+  const { data: companies } = useCompanies();
+  const createInvite = useCreateInvite();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<InviteValues>({
+    resolver: zodResolver(inviteSchema),
+  });
+
+  const toggleCompany = (companyId: string) => {
+    setSelectedCompanies((prev) =>
+      prev.includes(companyId)
+        ? prev.filter((id) => id !== companyId)
+        : [...prev, companyId],
+    );
+  };
+
+  const onSubmit = async (values: InviteValues) => {
+    const result = await createInvite.mutateAsync({
+      email: values.email,
+      role: "agent",
+      companyIds: selectedCompanies,
+    });
+    setInviteLink(`${window.location.origin}/signup/${result.token}`);
+  };
+
+  const handleCopy = async () => {
+    if (inviteLink) {
+      await navigator.clipboard.writeText(inviteLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setInviteLink(null);
+    setCopied(false);
+    setSelectedCompanies([]);
+    reset();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
+      <DialogTrigger asChild>
+        <Button>Invite Agent</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Invite Agent</DialogTitle>
+        </DialogHeader>
+        {inviteLink ? (
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Share this link with the agent:
+            </p>
+            <div className="flex gap-2">
+              <Input value={inviteLink} readOnly />
+              <Button onClick={handleCopy}>
+                {copied ? "Copied!" : "Copy"}
+              </Button>
+            </div>
+            <Button variant="outline" className="w-full" onClick={handleClose}>
+              Done
+            </Button>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="agent-email">Email address</Label>
+              <Input
+                id="agent-email"
+                type="email"
+                placeholder="agent@example.com"
+                {...register("email")}
+              />
+              {errors.email && (
+                <p className="text-sm text-destructive">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label>Assign to companies (optional)</Label>
+              <div className="max-h-40 space-y-2 overflow-y-auto rounded-md border p-3">
+                {companies?.map((company) => (
+                  <label
+                    key={company.id}
+                    className="flex items-center gap-2 text-sm"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedCompanies.includes(company.id)}
+                      onChange={() => toggleCompany(company.id)}
+                    />
+                    {company.name}
+                  </label>
+                ))}
+                {companies?.length === 0 && (
+                  <p className="text-sm text-muted-foreground">
+                    No companies created yet
+                  </p>
+                )}
+              </div>
+            </div>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={createInvite.isPending}
+            >
+              {createInvite.isPending
+                ? "Creating invite..."
+                : "Generate invite link"}
+            </Button>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+```
+
+- [x] **Step 5: Create AssignCompaniesDialog**
+
+Create `src/features/agents/components/AssignCompaniesDialog.tsx`:
+
+```tsx
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { useCompanies } from "@/features/companies/hooks/useCompanies";
+import { useUpdateAgentCompanies } from "../hooks/useAgentCompanies";
+import type { AgentWithCompanies } from "../types";
+
+type AssignCompaniesDialogProps = {
+  agent: AgentWithCompanies;
+};
+
+export const AssignCompaniesDialog = ({
+  agent,
+}: AssignCompaniesDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const { data: companies } = useCompanies();
+  const updateCompanies = useUpdateAgentCompanies();
+
+  useEffect(() => {
+    if (open) {
+      setSelectedIds(agent.companies.map((c) => c.id));
+    }
+  }, [open, agent.companies]);
+
+  const toggleCompany = (companyId: string) => {
+    setSelectedIds((prev) =>
+      prev.includes(companyId)
+        ? prev.filter((id) => id !== companyId)
+        : [...prev, companyId],
+    );
+  };
+
+  const handleSave = async () => {
+    await updateCompanies.mutateAsync({
+      agentId: agent.user_id,
+      companyIds: selectedIds,
+    });
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          Edit companies
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Assign companies to {agent.name}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>Companies</Label>
+            <div className="max-h-60 space-y-2 overflow-y-auto rounded-md border p-3">
+              {companies?.map((company) => (
+                <label
+                  key={company.id}
+                  className="flex items-center gap-2 text-sm"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedIds.includes(company.id)}
+                    onChange={() => toggleCompany(company.id)}
+                  />
+                  {company.name}
+                </label>
+              ))}
+            </div>
+          </div>
+          <Button
+            className="w-full"
+            onClick={handleSave}
+            disabled={updateCompanies.isPending}
+          >
+            {updateCompanies.isPending ? "Saving..." : "Save"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+```
+
+- [x] **Step 6: Create AgentList**
+
+Create `src/features/agents/components/AgentList.tsx`:
+
+```tsx
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useAgents } from "../hooks/useAgents";
+import { InviteAgentDialog } from "./InviteAgentDialog";
+import { AssignCompaniesDialog } from "./AssignCompaniesDialog";
+
+export const AgentList = () => {
+  const { data: agents, isLoading } = useAgents();
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading agents...</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Agents</h1>
+        <InviteAgentDialog />
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Companies</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {agents?.map((agent) => (
+            <TableRow key={agent.user_id}>
+              <TableCell className="font-medium">{agent.name}</TableCell>
+              <TableCell>{agent.email}</TableCell>
+              <TableCell>
+                <div className="flex flex-wrap gap-1">
+                  {agent.companies.map((c) => (
+                    <Badge key={c.id} variant="secondary">
+                      {c.name}
+                    </Badge>
+                  ))}
+                  {agent.companies.length === 0 && (
+                    <span className="text-sm text-muted-foreground">
+                      No companies
+                    </span>
+                  )}
+                </div>
+              </TableCell>
+              <TableCell>
+                <AssignCompaniesDialog agent={agent} />
+              </TableCell>
+            </TableRow>
+          ))}
+          {agents?.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={4} className="text-center text-muted-foreground">
+                No agents yet
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+```
+
+- [x] **Step 7: Wire AgentList into routes**
+
+In `src/routes/index.tsx`, add the import:
+```tsx
+import { AgentList } from "@/features/agents/components/AgentList";
+```
+
+Replace the agents placeholder:
+```tsx
+{ path: "/agents", element: <AgentList /> },
+```
+
+- [x] **Step 8: Verify build**
+
+```bash
+npm run build
+```
+
+- [x] **Step 9: Commit**
+
+```bash
+git add src/features/agents/ src/routes/index.tsx
+git commit -m "feat(agents): add agent list, invite dialog, and company assignment"
+```
+
+---
+
+## Phase D: Customer Manager Features
+
+### Task 11: Customers — list and form
+
+**Files:**
+- Create: `src/features/customers/types.ts`
+- Create: `src/features/customers/hooks/useCustomers.ts`
+- Create: `src/features/customers/components/CustomerList.tsx`
+- Create: `src/features/customers/components/CustomerForm.tsx`
+- Modify: `src/routes/index.tsx`
+
+- [ ] **Step 1: Create customer types**
+
+Create `src/features/customers/types.ts`:
+
+```ts
+import type { Customer } from "@/lib/types";
+
+export type CustomerFormValues = {
+  name: string;
+  email: string;
+};
+
+export type { Customer };
+```
+
+- [ ] **Step 2: Create useCustomers hook**
+
+Create `src/features/customers/hooks/useCustomers.ts`:
+
+```ts
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { Customer } from "@/lib/types";
+
+export const useCustomers = () => {
+  return useQuery<Customer[]>({
+    queryKey: ["customers"],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("customers")
+        .select("*")
+        .order("name");
+      if (error) throw error;
+      return data;
+    },
+  });
+};
+
+export const useCreateCustomer = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      name,
+      email,
+      companyId,
+    }: {
+      name: string;
+      email: string;
+      companyId: string;
+    }) => {
+      const { data, error } = await supabase
+        .from("customers")
+        .insert({ name, email, company_id: companyId })
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["customers"] });
+    },
+  });
+};
+
+export const useUpdateCustomer = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      id,
+      name,
+      email,
+    }: {
+      id: string;
+      name: string;
+      email: string;
+    }) => {
+      const { data, error } = await supabase
+        .from("customers")
+        .update({ name, email })
+        .eq("id", id)
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["customers"] });
+    },
+  });
+};
+```
+
+- [ ] **Step 3: Create CustomerForm**
+
+Create `src/features/customers/components/CustomerForm.tsx`:
+
+```tsx
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useCreateCustomer, useUpdateCustomer } from "../hooks/useCustomers";
+import type { Customer } from "@/lib/types";
+
+const customerSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.email("Please enter a valid email"),
+});
+
+type CustomerValues = z.infer<typeof customerSchema>;
+
+type CustomerFormProps = {
+  companyId: string;
+  customer?: Customer;
+  onClose: () => void;
+};
+
+export const CustomerForm = ({
+  companyId,
+  customer,
+  onClose,
+}: CustomerFormProps) => {
+  const createCustomer = useCreateCustomer();
+  const updateCustomer = useUpdateCustomer();
+  const isEditing = !!customer;
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CustomerValues>({
+    resolver: zodResolver(customerSchema),
+    defaultValues: customer
+      ? { name: customer.name, email: customer.email }
+      : undefined,
+  });
+
+  const onSubmit = async (values: CustomerValues) => {
+    if (isEditing) {
+      await updateCustomer.mutateAsync({
+        id: customer.id,
+        name: values.name,
+        email: values.email,
+      });
+    } else {
+      await createCustomer.mutateAsync({
+        name: values.name,
+        email: values.email,
+        companyId,
+      });
+    }
+    onClose();
+  };
+
+  const isPending = createCustomer.isPending || updateCustomer.isPending;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{isEditing ? "Edit Customer" : "New Customer"}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="customer-name">Name</Label>
+            <Input id="customer-name" {...register("name")} />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="customer-email">Email</Label>
+            <Input id="customer-email" type="email" {...register("email")} />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Saving..." : isEditing ? "Save" : "Create"}
+            </Button>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+```
+
+- [ ] **Step 4: Create CustomerList**
+
+Create `src/features/customers/components/CustomerList.tsx`:
+
+```tsx
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useCustomers } from "../hooks/useCustomers";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { supabase } from "@/lib/supabase";
+import { useQuery } from "@tanstack/react-query";
+import { CustomerForm } from "./CustomerForm";
+import type { Customer } from "@/lib/types";
+
+export const CustomerList = () => {
+  const { data: customers, isLoading } = useCustomers();
+  const { user } = useAuthContext();
+  const [showCreate, setShowCreate] = useState(false);
+  const [editingCustomer, setEditingCustomer] = useState<Customer | null>(null);
+
+  // Get the CM's company ID
+  const { data: userCompany } = useQuery({
+    queryKey: ["user-company", user?.id],
+    queryFn: async () => {
+      if (!user) return null;
+      const { data, error } = await supabase
+        .from("user_companies")
+        .select("company_id")
+        .eq("user_id", user.id)
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    enabled: !!user,
+  });
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading customers...</p>;
+  }
+
+  const companyId = userCompany?.company_id;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Customers</h1>
+        <Button onClick={() => setShowCreate(true)}>New Customer</Button>
+      </div>
+
+      {showCreate && companyId && (
+        <CustomerForm
+          companyId={companyId}
+          onClose={() => setShowCreate(false)}
+        />
+      )}
+
+      {editingCustomer && companyId && (
+        <CustomerForm
+          companyId={companyId}
+          customer={editingCustomer}
+          onClose={() => setEditingCustomer(null)}
+        />
+      )}
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {customers?.map((customer) => (
+            <TableRow key={customer.id}>
+              <TableCell className="font-medium">{customer.name}</TableCell>
+              <TableCell>{customer.email}</TableCell>
+              <TableCell>
+                {new Date(customer.created_at).toLocaleDateString()}
+              </TableCell>
+              <TableCell>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setEditingCustomer(customer)}
+                >
+                  Edit
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+          {customers?.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={4} className="text-center text-muted-foreground">
+                No customers yet
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 5: Wire CustomerList into routes**
+
+In `src/routes/index.tsx`, add the import:
+```tsx
+import { CustomerList } from "@/features/customers/components/CustomerList";
+```
+
+Replace the customers placeholder:
+```tsx
+{ path: "/customers", element: <CustomerList /> },
+```
+
+- [ ] **Step 6: Verify build**
+
+```bash
+npm run build
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/features/customers/ src/routes/index.tsx
+git commit -m "feat(customers): add customer list, create/edit form"
+```
+
+---
+
+## Phase E: Ticket Management
+
+### Task 12: Tickets — hooks and list with filters
+
+**Files:**
+- Create: `src/features/tickets/types.ts`
+- Create: `src/features/tickets/hooks/useTickets.ts`
+- Create: `src/features/tickets/hooks/useUpdateTicket.ts`
+- Create: `src/features/tickets/components/TicketStatusBadge.tsx`
+- Create: `src/features/tickets/components/TicketPriorityBadge.tsx`
+- Create: `src/features/tickets/components/TicketFilters.tsx`
+- Create: `src/features/tickets/components/TicketList.tsx`
+- Modify: `src/routes/index.tsx`
+
+- [ ] **Step 1: Create ticket types**
+
+Create `src/features/tickets/types.ts`:
+
+```ts
+import type { Ticket, TicketStatus, TicketPriority } from "@/lib/types";
+
+export type TicketWithRelations = Ticket & {
+  customers: { name: string; email: string } | null;
+  companies: { name: string } | null;
+};
+
+export type TicketFiltersState = {
+  status?: TicketStatus;
+  priority?: TicketPriority;
+  companyId?: string;
+};
+```
+
+- [ ] **Step 2: Create useTickets hook**
+
+Create `src/features/tickets/hooks/useTickets.ts`:
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { TicketWithRelations, TicketFiltersState } from "../types";
+
+export const useTickets = (filters: TicketFiltersState = {}) => {
+  return useQuery<TicketWithRelations[]>({
+    queryKey: ["tickets", filters],
+    queryFn: async () => {
+      let query = supabase
+        .from("tickets")
+        .select("*, customers(name, email), companies(name)")
+        .order("created_at", { ascending: false });
+
+      if (filters.status) {
+        query = query.eq("status", filters.status);
+      }
+      if (filters.priority) {
+        query = query.eq("priority", filters.priority);
+      }
+      if (filters.companyId) {
+        query = query.eq("company_id", filters.companyId);
+      }
+
+      const { data, error } = await query;
+      if (error) throw error;
+      return data as TicketWithRelations[];
+    },
+  });
+};
+```
+
+- [ ] **Step 3: Create useUpdateTicket hook**
+
+Create `src/features/tickets/hooks/useUpdateTicket.ts`:
+
+```ts
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { TicketStatus, TicketPriority } from "@/lib/types";
+
+type UpdateTicketParams = {
+  id: string;
+  status?: TicketStatus;
+  priority?: TicketPriority;
+};
+
+export const useUpdateTicket = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, ...updates }: UpdateTicketParams) => {
+      const { data, error } = await supabase
+        .from("tickets")
+        .update({ ...updates, updated_at: new Date().toISOString() })
+        .eq("id", id)
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tickets"] });
+    },
+  });
+};
+```
+
+- [ ] **Step 4: Create TicketStatusBadge and TicketPriorityBadge**
+
+Create `src/features/tickets/components/TicketStatusBadge.tsx`:
+
+```tsx
+import { Badge } from "@/components/ui/badge";
+import type { TicketStatus } from "@/lib/types";
+
+const statusConfig: Record<TicketStatus, { label: string; variant: "default" | "secondary" | "outline" | "destructive" }> = {
+  open: { label: "Open", variant: "default" },
+  in_progress: { label: "In Progress", variant: "secondary" },
+  waiting: { label: "Waiting", variant: "outline" },
+  resolved: { label: "Resolved", variant: "secondary" },
+  closed: { label: "Closed", variant: "outline" },
+};
+
+export const TicketStatusBadge = ({ status }: { status: TicketStatus }) => {
+  const config = statusConfig[status];
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+};
+```
+
+Create `src/features/tickets/components/TicketPriorityBadge.tsx`:
+
+```tsx
+import { Badge } from "@/components/ui/badge";
+import type { TicketPriority } from "@/lib/types";
+
+const priorityConfig: Record<TicketPriority, { label: string; variant: "default" | "secondary" | "outline" | "destructive" }> = {
+  low: { label: "Low", variant: "outline" },
+  medium: { label: "Medium", variant: "secondary" },
+  high: { label: "High", variant: "default" },
+  urgent: { label: "Urgent", variant: "destructive" },
+};
+
+export const TicketPriorityBadge = ({ priority }: { priority: TicketPriority }) => {
+  const config = priorityConfig[priority];
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+};
+```
+
+- [ ] **Step 5: Create TicketFilters**
+
+Create `src/features/tickets/components/TicketFilters.tsx`:
+
+```tsx
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { useCompanies } from "@/features/companies/hooks/useCompanies";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import type { TicketFiltersState } from "../types";
+import type { TicketStatus, TicketPriority } from "@/lib/types";
+
+type TicketFiltersProps = {
+  filters: TicketFiltersState;
+  onChange: (filters: TicketFiltersState) => void;
+};
+
+const statuses: TicketStatus[] = [
+  "open",
+  "in_progress",
+  "waiting",
+  "resolved",
+  "closed",
+];
+
+const priorities: TicketPriority[] = ["low", "medium", "high", "urgent"];
+
+export const TicketFilters = ({ filters, onChange }: TicketFiltersProps) => {
+  const { profile } = useAuthContext();
+  const { data: companies } = useCompanies();
+  const isAdmin = profile?.role === "admin";
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Select
+        value={filters.status ?? "all"}
+        onValueChange={(v) =>
+          onChange({
+            ...filters,
+            status: v === "all" ? undefined : (v as TicketStatus),
+          })
+        }
+      >
+        <SelectTrigger className="w-40">
+          <SelectValue placeholder="Status" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All statuses</SelectItem>
+          {statuses.map((s) => (
+            <SelectItem key={s} value={s}>
+              {s.replace("_", " ")}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Select
+        value={filters.priority ?? "all"}
+        onValueChange={(v) =>
+          onChange({
+            ...filters,
+            priority: v === "all" ? undefined : (v as TicketPriority),
+          })
+        }
+      >
+        <SelectTrigger className="w-40">
+          <SelectValue placeholder="Priority" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All priorities</SelectItem>
+          {priorities.map((p) => (
+            <SelectItem key={p} value={p}>
+              {p}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {isAdmin && (
+        <Select
+          value={filters.companyId ?? "all"}
+          onValueChange={(v) =>
+            onChange({
+              ...filters,
+              companyId: v === "all" ? undefined : v,
+            })
+          }
+        >
+          <SelectTrigger className="w-48">
+            <SelectValue placeholder="Company" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All companies</SelectItem>
+            {companies?.map((c) => (
+              <SelectItem key={c.id} value={c.id}>
+                {c.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+
+      {(filters.status || filters.priority || filters.companyId) && (
+        <Button variant="ghost" onClick={() => onChange({})}>
+          Clear filters
+        </Button>
+      )}
+    </div>
+  );
+};
+```
+
+- [ ] **Step 6: Create TicketList**
+
+Create `src/features/tickets/components/TicketList.tsx`:
+
+```tsx
+import { useState } from "react";
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { useTickets } from "../hooks/useTickets";
+import { TicketFilters } from "./TicketFilters";
+import { TicketStatusBadge } from "./TicketStatusBadge";
+import { TicketPriorityBadge } from "./TicketPriorityBadge";
+import type { TicketFiltersState } from "../types";
+
+export const TicketList = () => {
+  const { profile } = useAuthContext();
+  const [filters, setFilters] = useState<TicketFiltersState>({});
+  const { data: tickets, isLoading } = useTickets(filters);
+  const isAdmin = profile?.role === "admin";
+  const isCM = profile?.role === "customer_manager";
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading tickets...</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Tickets</h1>
+        {isCM && (
+          <Link to="/tickets/new">
+            <Button>New Ticket</Button>
+          </Link>
+        )}
+      </div>
+
+      <TicketFilters filters={filters} onChange={setFilters} />
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Subject</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Priority</TableHead>
+            <TableHead>Customer</TableHead>
+            {isAdmin && <TableHead>Company</TableHead>}
+            <TableHead>Date</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {tickets?.map((ticket) => (
+            <TableRow key={ticket.id}>
+              <TableCell>
+                <Link
+                  to={`/tickets/${ticket.id}`}
+                  className="font-medium hover:underline"
+                >
+                  {ticket.subject}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <TicketStatusBadge status={ticket.status} />
+              </TableCell>
+              <TableCell>
+                <TicketPriorityBadge priority={ticket.priority} />
+              </TableCell>
+              <TableCell>{ticket.customers?.name ?? "—"}</TableCell>
+              {isAdmin && (
+                <TableCell>{ticket.companies?.name ?? "—"}</TableCell>
+              )}
+              <TableCell>
+                {new Date(ticket.created_at).toLocaleDateString()}
+              </TableCell>
+            </TableRow>
+          ))}
+          {tickets?.length === 0 && (
+            <TableRow>
+              <TableCell
+                colSpan={isAdmin ? 6 : 5}
+                className="text-center text-muted-foreground"
+              >
+                No tickets found
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 7: Wire TicketList into routes**
+
+In `src/routes/index.tsx`, add the import:
+```tsx
+import { TicketList } from "@/features/tickets/components/TicketList";
+```
+
+Replace the tickets placeholder:
+```tsx
+{ path: "/tickets", element: <TicketList /> },
+```
+
+- [ ] **Step 8: Verify build**
+
+```bash
+npm run build
+```
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add src/features/tickets/ src/routes/index.tsx
+git commit -m "feat(tickets): add ticket list with filters, status/priority badges"
+```
+
+---
+
+### Task 13: Ticket detail page with message thread
+
+**Files:**
+- Create: `src/features/tickets/hooks/useTicket.ts`
+- Create: `src/features/tickets/hooks/useTicketMessages.ts`
+- Create: `src/features/tickets/hooks/useCreateMessage.ts`
+- Create: `src/features/tickets/components/TicketMessageThread.tsx`
+- Create: `src/features/tickets/components/TicketDetail.tsx`
+- Modify: `src/routes/index.tsx`
+
+- [ ] **Step 1: Create useTicket hook**
+
+Create `src/features/tickets/hooks/useTicket.ts`:
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { TicketWithRelations } from "../types";
+
+export const useTicket = (id: string | undefined) => {
+  return useQuery<TicketWithRelations | null>({
+    queryKey: ["ticket", id],
+    queryFn: async () => {
+      if (!id) return null;
+      const { data, error } = await supabase
+        .from("tickets")
+        .select("*, customers(name, email), companies(name)")
+        .eq("id", id)
+        .single();
+      if (error) throw error;
+      return data as TicketWithRelations;
+    },
+    enabled: !!id,
+  });
+};
+```
+
+- [ ] **Step 2: Create useTicketMessages hook**
+
+Create `src/features/tickets/hooks/useTicketMessages.ts`:
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { TicketMessage } from "@/lib/types";
+
+export type MessageWithSender = TicketMessage & {
+  sender_name: string;
+};
+
+export const useTicketMessages = (ticketId: string | undefined) => {
+  return useQuery<MessageWithSender[]>({
+    queryKey: ["ticket-messages", ticketId],
+    queryFn: async () => {
+      if (!ticketId) return [];
+      const { data, error } = await supabase
+        .from("ticket_messages")
+        .select("*")
+        .eq("ticket_id", ticketId)
+        .order("created_at", { ascending: true });
+
+      if (error) throw error;
+
+      // Resolve sender names
+      const messages: MessageWithSender[] = [];
+      for (const msg of data) {
+        let senderName = "System";
+        if (msg.sender_type === "agent" && msg.sender_id) {
+          const { data: profile } = await supabase
+            .from("profiles")
+            .select("name")
+            .eq("user_id", msg.sender_id)
+            .single();
+          senderName = profile?.name ?? "Agent";
+        } else if (msg.sender_type === "customer" && msg.sender_id) {
+          const { data: customer } = await supabase
+            .from("customers")
+            .select("name")
+            .eq("id", msg.sender_id)
+            .single();
+          senderName = customer?.name ?? "Customer";
+        }
+        messages.push({ ...msg, sender_name: senderName });
+      }
+
+      return messages;
+    },
+    enabled: !!ticketId,
+  });
+};
+```
+
+- [ ] **Step 3: Create useCreateMessage hook**
+
+Create `src/features/tickets/hooks/useCreateMessage.ts`:
+
+```ts
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+
+type CreateMessageParams = {
+  ticketId: string;
+  body: string;
+  senderType: "agent" | "customer_manager";
+  senderId: string;
+};
+
+export const useCreateMessage = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      ticketId,
+      body,
+      senderType,
+      senderId,
+    }: CreateMessageParams) => {
+      const { data, error } = await supabase
+        .from("ticket_messages")
+        .insert({
+          ticket_id: ticketId,
+          body,
+          sender_type: senderType === "customer_manager" ? "agent" : senderType,
+          sender_id: senderId,
+        })
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["ticket-messages", variables.ticketId],
+      });
+    },
+  });
+};
+```
+
+- [ ] **Step 4: Create TicketMessageThread**
+
+Create `src/features/tickets/components/TicketMessageThread.tsx`:
+
+```tsx
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { useTicketMessages } from "../hooks/useTicketMessages";
+import { useCreateMessage } from "../hooks/useCreateMessage";
+import { cn } from "@/lib/utils";
+
+const replySchema = z.object({
+  body: z.string().min(1, "Message cannot be empty"),
+});
+
+type ReplyValues = z.infer<typeof replySchema>;
+
+type TicketMessageThreadProps = {
+  ticketId: string;
+};
+
+export const TicketMessageThread = ({
+  ticketId,
+}: TicketMessageThreadProps) => {
+  const { user, profile } = useAuthContext();
+  const { data: messages, isLoading } = useTicketMessages(ticketId);
+  const createMessage = useCreateMessage();
+
+  const { register, handleSubmit, reset, formState: { errors } } =
+    useForm<ReplyValues>({
+      resolver: zodResolver(replySchema),
+    });
+
+  const onSubmit = async (values: ReplyValues) => {
+    if (!user || !profile) return;
+    await createMessage.mutateAsync({
+      ticketId,
+      body: values.body,
+      senderType: profile.role === "agent" ? "agent" : "customer_manager",
+      senderId: user.id,
+    });
+    reset();
+  };
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading messages...</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        {messages?.map((msg) => (
+          <div
+            key={msg.id}
+            className={cn(
+              "rounded-lg border p-4",
+              msg.sender_type === "customer"
+                ? "bg-muted/50"
+                : msg.sender_type === "system"
+                  ? "bg-muted/30 text-center text-sm italic"
+                  : "bg-background",
+            )}
+          >
+            <div className="mb-1 flex items-center justify-between">
+              <span className="text-sm font-medium">{msg.sender_name}</span>
+              <span className="text-xs text-muted-foreground">
+                {new Date(msg.created_at).toLocaleString()}
+              </span>
+            </div>
+            <p className="whitespace-pre-wrap text-sm">{msg.body}</p>
+          </div>
+        ))}
+        {messages?.length === 0 && (
+          <p className="text-center text-sm text-muted-foreground">
+            No messages yet
+          </p>
+        )}
+      </div>
+
+      {profile && profile.role !== "admin" && (
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
+          <Textarea
+            placeholder="Type your reply..."
+            rows={3}
+            {...register("body")}
+          />
+          {errors.body && (
+            <p className="text-sm text-destructive">{errors.body.message}</p>
+          )}
+          <Button type="submit" disabled={createMessage.isPending}>
+            {createMessage.isPending ? "Sending..." : "Send reply"}
+          </Button>
+        </form>
+      )}
+    </div>
+  );
+};
+```
+
+- [ ] **Step 5: Create TicketDetail**
+
+Create `src/features/tickets/components/TicketDetail.tsx`:
+
+```tsx
+import { useParams, Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { useTicket } from "../hooks/useTicket";
+import { useUpdateTicket } from "../hooks/useUpdateTicket";
+import { TicketStatusBadge } from "./TicketStatusBadge";
+import { TicketPriorityBadge } from "./TicketPriorityBadge";
+import { TicketMessageThread } from "./TicketMessageThread";
+import type { TicketStatus, TicketPriority } from "@/lib/types";
+
+const statuses: TicketStatus[] = [
+  "open",
+  "in_progress",
+  "waiting",
+  "resolved",
+  "closed",
+];
+const priorities: TicketPriority[] = ["low", "medium", "high", "urgent"];
+
+export const TicketDetail = () => {
+  const { id } = useParams<{ id: string }>();
+  const { data: ticket, isLoading } = useTicket(id);
+  const { profile } = useAuthContext();
+  const updateTicket = useUpdateTicket();
+  const canEdit = profile?.role === "agent" || profile?.role === "customer_manager";
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading ticket...</p>;
+  }
+
+  if (!ticket) {
+    return <p className="text-destructive">Ticket not found</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Link to="/tickets">
+          <Button variant="ghost" size="sm">
+            &larr; Back
+          </Button>
+        </Link>
+        <h1 className="text-2xl font-bold">{ticket.subject}</h1>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-3">
+        <div className="md:col-span-2 space-y-6">
+          {ticket.description && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Description</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="whitespace-pre-wrap text-sm">{ticket.description}</p>
+              </CardContent>
+            </Card>
+          )}
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Messages</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <TicketMessageThread ticketId={ticket.id} />
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Details</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <p className="mb-1 text-sm text-muted-foreground">Status</p>
+                {canEdit ? (
+                  <Select
+                    value={ticket.status}
+                    onValueChange={(v) =>
+                      updateTicket.mutate({
+                        id: ticket.id,
+                        status: v as TicketStatus,
+                      })
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {statuses.map((s) => (
+                        <SelectItem key={s} value={s}>
+                          {s.replace("_", " ")}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <TicketStatusBadge status={ticket.status} />
+                )}
+              </div>
+
+              <div>
+                <p className="mb-1 text-sm text-muted-foreground">Priority</p>
+                {canEdit ? (
+                  <Select
+                    value={ticket.priority}
+                    onValueChange={(v) =>
+                      updateTicket.mutate({
+                        id: ticket.id,
+                        priority: v as TicketPriority,
+                      })
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {priorities.map((p) => (
+                        <SelectItem key={p} value={p}>
+                          {p}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <TicketPriorityBadge priority={ticket.priority} />
+                )}
+              </div>
+
+              <div>
+                <p className="mb-1 text-sm text-muted-foreground">Customer</p>
+                <p className="text-sm">{ticket.customers?.name ?? "—"}</p>
+                <p className="text-xs text-muted-foreground">
+                  {ticket.customers?.email}
+                </p>
+              </div>
+
+              <div>
+                <p className="mb-1 text-sm text-muted-foreground">Company</p>
+                <p className="text-sm">{ticket.companies?.name ?? "—"}</p>
+              </div>
+
+              <div>
+                <p className="mb-1 text-sm text-muted-foreground">Created</p>
+                <p className="text-sm">
+                  {new Date(ticket.created_at).toLocaleString()}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 6: Add ticket detail route**
+
+In `src/routes/index.tsx`, add the import:
+```tsx
+import { TicketDetail } from "@/features/tickets/components/TicketDetail";
+```
+
+Add route after the `/tickets` route (inside the AppLayout children, NOT inside a RoleGuard):
+```tsx
+{ path: "/tickets/:id", element: <TicketDetail /> },
+```
+
+- [ ] **Step 7: Verify build**
+
+```bash
+npm run build
+```
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add src/features/tickets/ src/routes/index.tsx
+git commit -m "feat(tickets): add ticket detail page with message thread"
+```
+
+---
+
+### Task 14: Create ticket form (customer manager only)
+
+**Files:**
+- Create: `src/features/tickets/components/CreateTicketForm.tsx`
+- Modify: `src/routes/index.tsx`
+
+- [ ] **Step 1: Create CreateTicketForm**
+
+Create `src/features/tickets/components/CreateTicketForm.tsx`:
+
+```tsx
+import { useNavigate } from "react-router";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { supabase } from "@/lib/supabase";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { useCustomers } from "@/features/customers/hooks/useCustomers";
+import type { TicketPriority } from "@/lib/types";
+
+const createTicketSchema = z.object({
+  subject: z.string().min(1, "Subject is required"),
+  description: z.string().optional(),
+  customerId: z.string().min(1, "Please select a customer"),
+  priority: z.enum(["low", "medium", "high", "urgent"]),
+});
+
+type CreateTicketValues = z.infer<typeof createTicketSchema>;
+
+export const CreateTicketForm = () => {
+  const navigate = useNavigate();
+  const { user } = useAuthContext();
+  const { data: customers } = useCustomers();
+  const queryClient = useQueryClient();
+
+  // Get the CM's company
+  const { data: userCompany } = useQuery({
+    queryKey: ["user-company", user?.id],
+    queryFn: async () => {
+      if (!user) return null;
+      const { data, error } = await supabase
+        .from("user_companies")
+        .select("company_id")
+        .eq("user_id", user.id)
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    enabled: !!user,
+  });
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<CreateTicketValues>({
+    resolver: zodResolver(createTicketSchema),
+    defaultValues: { priority: "medium" },
+  });
+
+  const createTicket = useMutation({
+    mutationFn: async (values: CreateTicketValues) => {
+      const { data, error } = await supabase
+        .from("tickets")
+        .insert({
+          subject: values.subject,
+          description: values.description || null,
+          customer_id: values.customerId,
+          company_id: userCompany!.company_id,
+          created_by: user!.id,
+          priority: values.priority as TicketPriority,
+        })
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["tickets"] });
+      navigate(`/tickets/${data.id}`);
+    },
+  });
+
+  const onSubmit = (values: CreateTicketValues) => {
+    createTicket.mutate(values);
+  };
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-4">
+      <h1 className="text-2xl font-bold">New Ticket</h1>
+      <Card>
+        <CardContent className="pt-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="subject">Subject</Label>
+              <Input id="subject" {...register("subject")} />
+              {errors.subject && (
+                <p className="text-sm text-destructive">
+                  {errors.subject.message}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                rows={4}
+                {...register("description")}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Customer</Label>
+              <Select
+                value={watch("customerId") ?? ""}
+                onValueChange={(v) => setValue("customerId", v)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a customer" />
+                </SelectTrigger>
+                <SelectContent>
+                  {customers?.map((c) => (
+                    <SelectItem key={c.id} value={c.id}>
+                      {c.name} ({c.email})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.customerId && (
+                <p className="text-sm text-destructive">
+                  {errors.customerId.message}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label>Priority</Label>
+              <Select
+                value={watch("priority")}
+                onValueChange={(v) =>
+                  setValue("priority", v as CreateTicketValues["priority"])
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="low">Low</SelectItem>
+                  <SelectItem value="medium">Medium</SelectItem>
+                  <SelectItem value="high">High</SelectItem>
+                  <SelectItem value="urgent">Urgent</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex gap-2">
+              <Button type="submit" disabled={createTicket.isPending}>
+                {createTicket.isPending ? "Creating..." : "Create Ticket"}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => navigate("/tickets")}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 2: Add create ticket route**
+
+In `src/routes/index.tsx`, add the import:
+```tsx
+import { CreateTicketForm } from "@/features/tickets/components/CreateTicketForm";
+```
+
+Add a route inside the `customer_manager` RoleGuard children:
+```tsx
+{ path: "/tickets/new", element: <CreateTicketForm /> },
+```
+
+- [ ] **Step 3: Verify build**
+
+```bash
+npm run build
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/features/tickets/components/CreateTicketForm.tsx src/routes/index.tsx
+git commit -m "feat(tickets): add create ticket form for customer managers"
+```
+
+---
+
+## Phase F: Dashboard
+
+### Task 15: Dashboard with role-specific stats
+
+**Files:**
+- Create: `src/features/dashboard/types.ts`
+- Create: `src/features/dashboard/hooks/useDashboardStats.ts`
+- Create: `src/features/dashboard/components/StatCard.tsx`
+- Create: `src/features/dashboard/components/DashboardStats.tsx`
+- Modify: `src/routes/index.tsx`
+
+- [ ] **Step 1: Create dashboard types**
+
+Create `src/features/dashboard/types.ts`:
+
+```ts
+import type { TicketStatus } from "@/lib/types";
+
+export type DashboardStatsData = {
+  companyCount?: number;
+  agentCount?: number;
+  customerCount?: number;
+  ticketCount: number;
+  ticketsByStatus: Record<TicketStatus, number>;
+};
+```
+
+- [ ] **Step 2: Create useDashboardStats hook**
+
+Create `src/features/dashboard/hooks/useDashboardStats.ts`:
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import type { DashboardStatsData } from "../types";
+import type { TicketStatus } from "@/lib/types";
+
+const allStatuses: TicketStatus[] = [
+  "open",
+  "in_progress",
+  "waiting",
+  "resolved",
+  "closed",
+];
+
+export const useDashboardStats = () => {
+  const { profile } = useAuthContext();
+
+  return useQuery<DashboardStatsData>({
+    queryKey: ["dashboard-stats", profile?.role],
+    queryFn: async () => {
+      const stats: DashboardStatsData = {
+        ticketCount: 0,
+        ticketsByStatus: {
+          open: 0,
+          in_progress: 0,
+          waiting: 0,
+          resolved: 0,
+          closed: 0,
+        },
+      };
+
+      // Ticket count (RLS handles scoping)
+      const { count: ticketCount } = await supabase
+        .from("tickets")
+        .select("*", { count: "exact", head: true });
+      stats.ticketCount = ticketCount ?? 0;
+
+      // Tickets by status
+      for (const status of allStatuses) {
+        const { count } = await supabase
+          .from("tickets")
+          .select("*", { count: "exact", head: true })
+          .eq("status", status);
+        stats.ticketsByStatus[status] = count ?? 0;
+      }
+
+      // Role-specific stats
+      if (profile?.role === "admin") {
+        const { count: companyCount } = await supabase
+          .from("companies")
+          .select("*", { count: "exact", head: true });
+        stats.companyCount = companyCount ?? 0;
+
+        const { count: agentCount } = await supabase
+          .from("profiles")
+          .select("*", { count: "exact", head: true })
+          .eq("role", "agent");
+        stats.agentCount = agentCount ?? 0;
+      }
+
+      if (profile?.role === "customer_manager") {
+        const { count: customerCount } = await supabase
+          .from("customers")
+          .select("*", { count: "exact", head: true });
+        stats.customerCount = customerCount ?? 0;
+      }
+
+      return stats;
+    },
+    enabled: !!profile,
+  });
+};
+```
+
+- [ ] **Step 3: Create StatCard**
+
+Create `src/features/dashboard/components/StatCard.tsx`:
+
+```tsx
+import { Card, CardContent } from "@/components/ui/card";
+
+type StatCardProps = {
+  label: string;
+  value: number;
+};
+
+export const StatCard = ({ label, value }: StatCardProps) => {
+  return (
+    <Card>
+      <CardContent className="p-6">
+        <p className="text-sm text-muted-foreground">{label}</p>
+        <p className="text-3xl font-bold">{value}</p>
+      </CardContent>
+    </Card>
+  );
+};
+```
+
+- [ ] **Step 4: Create DashboardStats**
+
+Create `src/features/dashboard/components/DashboardStats.tsx`:
+
+```tsx
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { useDashboardStats } from "../hooks/useDashboardStats";
+import { StatCard } from "./StatCard";
+
+export const DashboardStats = () => {
+  const { profile } = useAuthContext();
+  const { data: stats, isLoading } = useDashboardStats();
+
+  if (isLoading || !stats || !profile) {
+    return <p className="text-muted-foreground">Loading dashboard...</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {profile.role === "admin" && stats.companyCount !== undefined && (
+          <StatCard label="Companies" value={stats.companyCount} />
+        )}
+        {profile.role === "admin" && stats.agentCount !== undefined && (
+          <StatCard label="Agents" value={stats.agentCount} />
+        )}
+        {profile.role === "customer_manager" &&
+          stats.customerCount !== undefined && (
+            <StatCard label="Customers" value={stats.customerCount} />
+          )}
+        <StatCard label="Total Tickets" value={stats.ticketCount} />
+      </div>
+
+      <div>
+        <h2 className="mb-3 text-lg font-semibold">Tickets by Status</h2>
+        <div className="grid gap-4 md:grid-cols-5">
+          <StatCard label="Open" value={stats.ticketsByStatus.open} />
+          <StatCard
+            label="In Progress"
+            value={stats.ticketsByStatus.in_progress}
+          />
+          <StatCard label="Waiting" value={stats.ticketsByStatus.waiting} />
+          <StatCard label="Resolved" value={stats.ticketsByStatus.resolved} />
+          <StatCard label="Closed" value={stats.ticketsByStatus.closed} />
+        </div>
+      </div>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 5: Wire DashboardStats into routes**
+
+In `src/routes/index.tsx`, add the import:
+```tsx
+import { DashboardStats } from "@/features/dashboard/components/DashboardStats";
+```
+
+Replace the dashboard placeholder:
+```tsx
+{ path: "/", element: <DashboardStats /> },
+```
+
+- [ ] **Step 6: Verify build**
+
+```bash
+npm run build
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/features/dashboard/ src/routes/index.tsx
+git commit -m "feat(dashboard): add role-specific dashboard with stats"
+```
+
+---
+
+## Summary
+
+After completing all 15 tasks, ServerDesk Phase 1 will have:
+
+- **Database**: Complete schema with enums, 8 tables, indexes, RLS policies, and signup trigger
+- **Auth**: Login, signup (open first + invite token), logout, route protection, role guards
+- **Companies**: CRUD (admin), detail page with CM invite dialog
+- **Agents**: List with company badges, invite dialog, company assignment
+- **Customers**: List and create/edit form (CM only, scoped to company)
+- **Tickets**: List with filters, detail page with message thread and reply, create form (CM only)
+- **Dashboard**: Role-specific stat cards with ticket status breakdown
+- **Generated TypeScript types** from Supabase schema
diff --git a/docs/superpowers/specs/2026-04-07-serverdesk-phase1-design.md b/docs/superpowers/specs/2026-04-07-serverdesk-phase1-design.md
new file mode 100644
index 0000000..3913ab7
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-07-serverdesk-phase1-design.md
@@ -0,0 +1,331 @@
+# ServerDesk Phase 1 — Design Spec
+
+**Goal:** Build the core ServerDesk application: database schema, authentication with invite system, company/agent/customer management, and ticket CRUD with message threads. All scoped by role via Supabase RLS.
+
+**Phase 2 (later):** Email integration (inbound/outbound via Edge Functions), dashboard with stats, Supabase Realtime subscriptions.
+
+---
+
+## Architecture
+
+Feature-first module structure. Each feature (`auth`, `tickets`, `companies`, etc.) contains its own components, hooks, and types. Supabase queries live in feature-specific hooks using TanStack Query for caching. Auth state managed via a shared `AuthProvider` context. RLS handles all authorization at the database level.
+
+**Stack:** React 19, TypeScript (strict), Vite, Tailwind CSS v4, shadcn/ui, Supabase (Auth, Database, RLS), React Router, TanStack Query, zod, react-hook-form, Vitest, Playwright.
+
+---
+
+## Database Schema
+
+### Enums
+
+- `app_role`: `admin`, `agent`, `customer_manager`
+- `ticket_status`: `open`, `in_progress`, `waiting`, `resolved`, `closed`
+- `ticket_priority`: `low`, `medium`, `high`, `urgent`
+- `sender_type`: `customer`, `agent`, `system`
+
+### Tables
+
+#### `profiles`
+| Column | Type | Constraints |
+|--------|------|-------------|
+| user_id | uuid | PK, FK auth.users ON DELETE CASCADE |
+| name | text | NOT NULL |
+| role | app_role | NOT NULL |
+| created_at | timestamptz | DEFAULT now() |
+
+#### `companies`
+| Column | Type | Constraints |
+|--------|------|-------------|
+| id | uuid | PK, DEFAULT gen_random_uuid() |
+| name | text | NOT NULL |
+| created_at | timestamptz | DEFAULT now() |
+| updated_at | timestamptz | DEFAULT now() |
+
+#### `user_companies`
+Junction table for both agents and customer managers. Agents can have multiple rows (multiple companies). Customer managers have one row.
+
+| Column | Type | Constraints |
+|--------|------|-------------|
+| user_id | uuid | PK, FK auth.users ON DELETE CASCADE |
+| company_id | uuid | PK, FK companies ON DELETE CASCADE |
+| created_at | timestamptz | DEFAULT now() |
+
+#### `invites`
+| Column | Type | Constraints |
+|--------|------|-------------|
+| id | uuid | PK, DEFAULT gen_random_uuid() |
+| email | text | NOT NULL |
+| role | app_role | NOT NULL |
+| token | text | UNIQUE, NOT NULL |
+| invited_by | uuid | FK auth.users |
+| used_at | timestamptz | nullable |
+| expires_at | timestamptz | NOT NULL |
+| created_at | timestamptz | DEFAULT now() |
+
+#### `invite_companies`
+Junction table linking invites to companies. Required for customer_manager invites (exactly one company). Optional for agent invites (zero or more companies).
+
+| Column | Type | Constraints |
+|--------|------|-------------|
+| invite_id | uuid | PK, FK invites ON DELETE CASCADE |
+| company_id | uuid | PK, FK companies ON DELETE CASCADE |
+| created_at | timestamptz | DEFAULT now() |
+
+#### `customers`
+| Column | Type | Constraints |
+|--------|------|-------------|
+| id | uuid | PK, DEFAULT gen_random_uuid() |
+| email | text | UNIQUE, NOT NULL |
+| name | text | NOT NULL |
+| company_id | uuid | FK companies ON DELETE CASCADE |
+| created_at | timestamptz | DEFAULT now() |
+
+#### `tickets`
+| Column | Type | Constraints |
+|--------|------|-------------|
+| id | uuid | PK, DEFAULT gen_random_uuid() |
+| subject | text | NOT NULL |
+| description | text | |
+| status | ticket_status | NOT NULL, DEFAULT 'open' |
+| priority | ticket_priority | NOT NULL, DEFAULT 'medium' |
+| customer_id | uuid | FK customers |
+| company_id | uuid | FK companies ON DELETE CASCADE |
+| created_by | uuid | nullable, FK auth.users |
+| created_at | timestamptz | DEFAULT now() |
+| updated_at | timestamptz | DEFAULT now() |
+
+`created_by` is the app user who created the ticket (null when created via email in Phase 2).
+
+#### `ticket_messages`
+| Column | Type | Constraints |
+|--------|------|-------------|
+| id | uuid | PK, DEFAULT gen_random_uuid() |
+| ticket_id | uuid | FK tickets ON DELETE CASCADE |
+| sender_type | sender_type | NOT NULL |
+| sender_id | uuid | nullable |
+| body | text | NOT NULL |
+| created_at | timestamptz | DEFAULT now() |
+
+`sender_id` references auth.users (for agents/CMs) or customers (for customers). The `sender_type` enum disambiguates.
+
+### Trigger: auto-create profile on signup
+
+On `INSERT` into `auth.users`:
+
+1. Count existing profiles. If zero → create profile with role `admin`, done.
+2. Otherwise, look up `invites` by the new user's email WHERE `used_at IS NULL` AND `expires_at > now()`.
+3. If no valid invite found → raise exception (block signup).
+4. Create profile with role from invite.
+5. Copy rows from `invite_companies` into `user_companies` for the new user.
+6. Set `used_at = now()` on the invite.
+
+### RLS Policies
+
+All tables have RLS enabled.
+
+**Admin** (role = 'admin'):
+- Full SELECT, INSERT, UPDATE, DELETE on all tables.
+
+**Agent** (role = 'agent'):
+- `tickets`: SELECT, UPDATE WHERE `company_id IN (SELECT company_id FROM user_companies WHERE user_id = auth.uid())`
+- `ticket_messages`: SELECT, INSERT WHERE ticket's `company_id` is in agent's companies
+- `companies`: SELECT WHERE `id IN (SELECT company_id FROM user_companies WHERE user_id = auth.uid())`
+- `profiles`: SELECT own profile
+
+**Customer Manager** (role = 'customer_manager'):
+- `tickets`: SELECT, INSERT, UPDATE WHERE `company_id IN (SELECT company_id FROM user_companies WHERE user_id = auth.uid())`
+- `ticket_messages`: SELECT, INSERT WHERE ticket's `company_id` is in their company
+- `customers`: SELECT, INSERT, UPDATE WHERE `company_id IN (SELECT company_id FROM user_companies WHERE user_id = auth.uid())`
+- `companies`: SELECT own company
+- `profiles`: SELECT own profile
+
+---
+
+## Auth Flow
+
+### First user (admin)
+1. User visits the app. No users exist.
+2. App shows open registration form (email, password, name).
+3. On submit → Supabase creates auth.user → trigger creates profile with `admin` role.
+4. User is logged in, redirected to dashboard.
+
+### Invite signup (agent / customer manager)
+1. Admin generates an invite link from the Companies page (for CM) or Agents page (for agent).
+2. Invited person visits `/signup/:token`.
+3. App validates the token (checks it exists, is unused, not expired).
+4. Shows signup form pre-filled with email from invite. User enters password and name.
+5. On submit → Supabase creates auth.user → trigger creates profile + user_companies from invite.
+6. User is logged in, redirected to dashboard.
+
+### Login
+- Standard email/password via `supabase.auth.signInWithPassword()`.
+- After login, fetch profile (role) to determine navigation.
+
+### Logout
+- `supabase.auth.signOut()` → redirect to `/login`.
+
+### Route protection
+- `AuthProvider` context: exposes `user`, `profile`, `loading`, `signIn`, `signUp`, `signOut`.
+- `ProtectedRoute` component: redirects to `/login` if not authenticated.
+- `RoleGuard` component: checks user's role against allowed roles for a route.
+
+---
+
+## Navigation & Pages
+
+### Per-role navigation
+
+| Page | Admin | Agent | Customer Manager |
+|------|-------|-------|-----------------|
+| Dashboard | Stats: companies, agents, tickets | Stats: tickets | Stats: customers, tickets |
+| Tickets | All tickets, all filters | Scoped to assigned companies | Scoped to their company |
+| Companies | CRUD + invite CM button | — | — |
+| Agents | List + invite + assign companies | — | — |
+| Customers | — | — | CRUD, scoped to company |
+
+### Page details
+
+**Dashboard** (`/`)
+- Role-specific stat cards (counts) and ticket status breakdown.
+- Phase 1: static counts via Supabase queries. Phase 2: realtime + charts.
+
+**Tickets** (`/tickets`)
+- List view with columns: subject, status, priority, customer, company (admin only), date.
+- Filters: status, priority, company (admin only).
+- Click row → ticket detail page.
+
+**Ticket Detail** (`/tickets/:id`)
+- Header: subject, status badge, priority badge, customer info, company.
+- Actions: change status, change priority (agents and CMs).
+- Message thread: chronological list of messages (chat-like). Each message shows sender name, type, timestamp.
+- Reply form at bottom (agents and CMs).
+
+**Companies** (`/companies`, admin only)
+- List with company name.
+- "New Company" button → form (name only).
+- Click row → company detail.
+- Company detail: edit name, "Invite Customer Manager" button.
+- Invite CM button → dialog: enter email → generates invite link → shows link + copy button.
+
+**Agents** (`/agents`, admin only)
+- List with name, email, assigned companies (as tags/badges).
+- "Invite Agent" button → dialog: enter email, optional company multi-select → generates link → copy button.
+- Click agent → edit page: assign/remove companies via multi-select.
+
+**Customers** (`/customers`, customer manager only)
+- List with name, email.
+- "New Customer" button → form (name, email). Company is auto-set to CM's company.
+- Edit customer: update name, email.
+
+**Login** (`/login`)
+- Email + password form.
+- If no users exist, redirect to `/signup` (open registration for first admin).
+
+**Signup** (`/signup/:token`)
+- Validates token. Shows error if invalid/expired/used.
+- Pre-fills email from invite. Fields: email (read-only), name, password.
+
+---
+
+## Feature Module Structure
+
+```
+src/features/
+├── auth/
+│   ├── components/
+│   │   ├── LoginForm.tsx
+│   │   ├── SignupForm.tsx
+│   │   └── RoleGuard.tsx
+│   ├── hooks/
+│   │   ├── useAuth.ts          # signIn, signUp, signOut
+│   │   └── useProfile.ts       # fetch current user's profile
+│   └── AuthProvider.tsx         # context: user, profile, loading
+├── tickets/
+│   ├── components/
+│   │   ├── TicketList.tsx
+│   │   ├── TicketDetail.tsx
+│   │   ├── TicketMessageThread.tsx
+│   │   ├── TicketFilters.tsx
+│   │   ├── TicketStatusBadge.tsx
+│   │   ├── TicketPriorityBadge.tsx
+│   │   └── CreateTicketForm.tsx  # CM only
+│   ├── hooks/
+│   │   ├── useTickets.ts        # list with filters
+│   │   ├── useTicket.ts         # single ticket
+│   │   ├── useTicketMessages.ts
+│   │   ├── useCreateMessage.ts
+│   │   └── useUpdateTicket.ts   # status/priority changes
+│   └── types.ts
+├── companies/
+│   ├── components/
+│   │   ├── CompanyList.tsx
+│   │   ├── CompanyForm.tsx
+│   │   ├── CompanyDetail.tsx
+│   │   └── InviteCMDialog.tsx
+│   ├── hooks/
+│   │   ├── useCompanies.ts
+│   │   ├── useCompany.ts
+│   │   └── useCreateInvite.ts
+│   └── types.ts
+├── agents/
+│   ├── components/
+│   │   ├── AgentList.tsx
+│   │   ├── InviteAgentDialog.tsx
+│   │   └── AssignCompaniesDialog.tsx
+│   ├── hooks/
+│   │   ├── useAgents.ts
+│   │   ├── useAgent.ts
+│   │   └── useAgentCompanies.ts  # assign/remove
+│   └── types.ts
+├── customers/
+│   ├── components/
+│   │   ├── CustomerList.tsx
+│   │   └── CustomerForm.tsx
+│   ├── hooks/
+│   │   └── useCustomers.ts
+│   └── types.ts
+└── dashboard/
+    ├── components/
+    │   ├── DashboardStats.tsx
+    │   └── StatCard.tsx
+    ├── hooks/
+    │   └── useDashboardStats.ts
+    └── types.ts
+```
+
+---
+
+## Shared Components & Utilities
+
+- `src/components/ui/` — shadcn primitives (Button, Input, Dialog, Table, Badge, Select, etc.)
+- `src/layouts/AppLayout.tsx` — sidebar nav + main content area. Nav items filtered by role.
+- `src/layouts/AuthLayout.tsx` — centered card layout for login/signup.
+- `src/lib/supabase.ts` — Supabase client (exists).
+- `src/lib/types.ts` — shared enums and types (exists, will be extended with generated DB types).
+
+---
+
+## Testing Strategy
+
+**Unit tests (Vitest):**
+- Hooks: test query/mutation logic with mocked Supabase client.
+- Components: test rendering, user interactions, form validation.
+- Utils: test any helper functions.
+
+**E2E tests (Playwright):**
+- Full auth flow: first admin signup, invite agent, agent signup, login/logout.
+- Ticket CRUD: create ticket (as CM), view list, open detail, reply, change status.
+- Company management: create company, invite CM.
+- Agent management: invite agent, assign companies.
+- Role scoping: verify agent can't see admin pages, CM can't see other companies' data.
+
+---
+
+## Out of Scope (Phase 2)
+
+- Email inbound/outbound (Edge Functions + webhook)
+- Supabase Realtime subscriptions (live updates)
+- Dashboard charts and analytics
+- File attachments on tickets
+- Notification system
+- Search functionality
diff --git a/playwright.config.ts b/playwright.config.ts
index 0792d76..68cf710 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -5,10 +5,10 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 4 : undefined,
   reporter: "html",
   use: {
-    baseURL: "http://localhost:5173",
+    baseURL: process.env.CI ? "http://localhost:4173" : "http://localhost:5173",
     trace: "on-first-retry",
   },
   projects: [
@@ -18,8 +18,8 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: "npm run dev",
-    url: "http://localhost:5173",
+    command: process.env.CI ? "npm run preview" : "npm run dev",
+    url: process.env.CI ? "http://localhost:4173" : "http://localhost:5173",
     reuseExistingServer: !process.env.CI,
   },
 });
diff --git a/src/App.tsx b/src/App.tsx
index 216a9ad..2d233c2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { RouterProvider } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "@/features/auth/AuthProvider";
 import { router } from "@/routes";
 
 const queryClient = new QueryClient({
@@ -14,7 +15,9 @@ const queryClient = new QueryClient({
 export const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <AuthProvider>
+        <RouterProvider router={router} />
+      </AuthProvider>
     </QueryClientProvider>
   );
 };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..d517d65
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,53 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Badge, badgeVariants }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 09df753..f670740 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -55,4 +55,5 @@ function Button({
   )
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..40cac5f
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..3fc1dda
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,158 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..7d21bab
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..f162996
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..e8021f5
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..6e1369e
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..ac9585e
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..04d27f7
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/src/features/agents/components/AgentList.tsx b/src/features/agents/components/AgentList.tsx
new file mode 100644
index 0000000..3ae9e9e
--- /dev/null
+++ b/src/features/agents/components/AgentList.tsx
@@ -0,0 +1,74 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useAgents } from "../hooks/useAgents";
+import { InviteAgentDialog } from "./InviteAgentDialog";
+import { AssignCompaniesDialog } from "./AssignCompaniesDialog";
+
+export const AgentList = () => {
+  const { data: agents, isLoading, isError, error } = useAgents();
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading agents...</p>;
+  }
+
+  if (isError) {
+    return <p className="text-destructive">Failed to load agents: {error.message}</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Agents</h1>
+        <InviteAgentDialog />
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Companies</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {agents?.map((agent) => (
+            <TableRow key={agent.user_id}>
+              <TableCell className="font-medium">{agent.name}</TableCell>
+              <TableCell>
+                <div className="flex flex-wrap gap-1">
+                  {agent.companies.map((c) => (
+                    <Badge key={c.id} variant="secondary">
+                      {c.name}
+                    </Badge>
+                  ))}
+                  {agent.companies.length === 0 && (
+                    <span className="text-sm text-muted-foreground">
+                      No companies
+                    </span>
+                  )}
+                </div>
+              </TableCell>
+              <TableCell>
+                <AssignCompaniesDialog agent={agent} />
+              </TableCell>
+            </TableRow>
+          ))}
+          {agents?.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={3} className="text-center text-muted-foreground">
+                No agents yet
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
diff --git a/src/features/agents/components/AssignCompaniesDialog.tsx b/src/features/agents/components/AssignCompaniesDialog.tsx
new file mode 100644
index 0000000..2a00bcf
--- /dev/null
+++ b/src/features/agents/components/AssignCompaniesDialog.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { useCompanies } from "@/features/companies/hooks/useCompanies";
+import { useUpdateAgentCompanies } from "../hooks/useAgentCompanies";
+import type { AgentWithCompanies } from "../types";
+
+type AssignCompaniesDialogProps = {
+  agent: AgentWithCompanies;
+};
+
+export const AssignCompaniesDialog = ({
+  agent,
+}: AssignCompaniesDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const { data: companies } = useCompanies();
+  const updateCompanies = useUpdateAgentCompanies();
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      setSelectedIds(agent.companies.map((c) => c.id));
+    }
+    setOpen(nextOpen);
+  };
+
+  const toggleCompany = (companyId: string) => {
+    setSelectedIds((prev) =>
+      prev.includes(companyId)
+        ? prev.filter((id) => id !== companyId)
+        : [...prev, companyId],
+    );
+  };
+
+  const handleSave = async () => {
+    try {
+      await updateCompanies.mutateAsync({
+        agentId: agent.user_id,
+        companyIds: selectedIds,
+      });
+      setOpen(false);
+    } catch {
+      // Error is handled by mutation state
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger render={<Button variant="ghost" size="sm" />}>
+        Edit companies
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Assign companies to {agent.name}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>Companies</Label>
+            <div className="max-h-60 space-y-2 overflow-y-auto rounded-md border p-3">
+              {companies?.map((company) => (
+                <label
+                  key={company.id}
+                  className="flex items-center gap-2 text-sm"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedIds.includes(company.id)}
+                    onChange={() => toggleCompany(company.id)}
+                  />
+                  {company.name}
+                </label>
+              ))}
+            </div>
+          </div>
+          {updateCompanies.error && (
+            <p className="text-sm text-destructive">{updateCompanies.error.message}</p>
+          )}
+          <Button
+            className="w-full"
+            onClick={handleSave}
+            disabled={updateCompanies.isPending}
+          >
+            {updateCompanies.isPending ? "Saving..." : "Save"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/features/agents/components/InviteAgentDialog.tsx b/src/features/agents/components/InviteAgentDialog.tsx
new file mode 100644
index 0000000..98e621b
--- /dev/null
+++ b/src/features/agents/components/InviteAgentDialog.tsx
@@ -0,0 +1,161 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useCompanies } from "@/features/companies/hooks/useCompanies";
+import { useCreateInvite } from "@/features/companies/hooks/useCreateInvite";
+
+const inviteSchema = z.object({
+  email: z.email("Please enter a valid email"),
+});
+
+type InviteValues = z.infer<typeof inviteSchema>;
+
+export const InviteAgentDialog = () => {
+  const [open, setOpen] = useState(false);
+  const [inviteLink, setInviteLink] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [selectedCompanies, setSelectedCompanies] = useState<string[]>([]);
+  const { data: companies } = useCompanies();
+  const createInvite = useCreateInvite();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<InviteValues>({
+    resolver: zodResolver(inviteSchema),
+  });
+
+  const toggleCompany = (companyId: string) => {
+    setSelectedCompanies((prev) =>
+      prev.includes(companyId)
+        ? prev.filter((id) => id !== companyId)
+        : [...prev, companyId],
+    );
+  };
+
+  const onSubmit = async (values: InviteValues) => {
+    try {
+      const result = await createInvite.mutateAsync({
+        email: values.email,
+        role: "agent",
+        companyIds: selectedCompanies,
+      });
+      setInviteLink(`${window.location.origin}/signup/${result.token}`);
+    } catch {
+      // Error is handled by mutation state
+    }
+  };
+
+  const handleCopy = () => {
+    if (inviteLink) {
+      navigator.clipboard.writeText(inviteLink).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }).catch(() => {
+        // Clipboard API not available — fall back silently
+      });
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setInviteLink(null);
+    setCopied(false);
+    setSelectedCompanies([]);
+    reset();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
+      <DialogTrigger render={<Button />}>
+        Invite Agent
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Invite Agent</DialogTitle>
+        </DialogHeader>
+        {inviteLink ? (
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Share this link with the agent:
+            </p>
+            <div className="flex gap-2">
+              <Input value={inviteLink} readOnly />
+              <Button onClick={handleCopy}>
+                {copied ? "Copied!" : "Copy"}
+              </Button>
+            </div>
+            <Button variant="outline" className="w-full" onClick={handleClose}>
+              Done
+            </Button>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="agent-email">Email address</Label>
+              <Input
+                id="agent-email"
+                type="email"
+                placeholder="agent@example.com"
+                {...register("email")}
+              />
+              {errors.email && (
+                <p className="text-sm text-destructive">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label>Assign to companies (optional)</Label>
+              <div className="max-h-40 space-y-2 overflow-y-auto rounded-md border p-3">
+                {companies?.map((company) => (
+                  <label
+                    key={company.id}
+                    className="flex items-center gap-2 text-sm"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedCompanies.includes(company.id)}
+                      onChange={() => toggleCompany(company.id)}
+                    />
+                    {company.name}
+                  </label>
+                ))}
+                {companies?.length === 0 && (
+                  <p className="text-sm text-muted-foreground">
+                    No companies created yet
+                  </p>
+                )}
+              </div>
+            </div>
+            {createInvite.error && (
+              <p className="text-sm text-destructive">{createInvite.error.message}</p>
+            )}
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={createInvite.isPending}
+            >
+              {createInvite.isPending
+                ? "Creating invite..."
+                : "Generate invite link"}
+            </Button>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/features/agents/hooks/useAgentCompanies.test.tsx b/src/features/agents/hooks/useAgentCompanies.test.tsx
new file mode 100644
index 0000000..fb0efee
--- /dev/null
+++ b/src/features/agents/hooks/useAgentCompanies.test.tsx
@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode } from "react";
+import { useUpdateAgentCompanies } from "./useAgentCompanies";
+
+const mockRpc = vi.fn();
+
+vi.mock("@/lib/supabase", () => ({
+  supabase: {
+    rpc: (...args: unknown[]) => mockRpc(...args),
+  },
+}));
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe("useUpdateAgentCompanies", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("calls the update_agent_companies RPC with correct params", async () => {
+    mockRpc.mockResolvedValue({ data: null, error: null });
+
+    const { result } = renderHook(() => useUpdateAgentCompanies(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      agentId: "agent-123",
+      companyIds: ["company-1", "company-2"],
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(mockRpc).toHaveBeenCalledWith("update_agent_companies", {
+      p_agent_id: "agent-123",
+      p_company_ids: ["company-1", "company-2"],
+    });
+  });
+
+  it("handles RPC error", async () => {
+    mockRpc.mockResolvedValue({
+      data: null,
+      error: { message: "Permission denied" },
+    });
+
+    const { result } = renderHook(() => useUpdateAgentCompanies(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      agentId: "agent-123",
+      companyIds: ["company-1"],
+    });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+    expect(result.current.error).toEqual({ message: "Permission denied" });
+  });
+
+  it("handles empty companyIds", async () => {
+    mockRpc.mockResolvedValue({ data: null, error: null });
+
+    const { result } = renderHook(() => useUpdateAgentCompanies(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      agentId: "agent-123",
+      companyIds: [],
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(mockRpc).toHaveBeenCalledWith("update_agent_companies", {
+      p_agent_id: "agent-123",
+      p_company_ids: [],
+    });
+  });
+});
diff --git a/src/features/agents/hooks/useAgentCompanies.ts b/src/features/agents/hooks/useAgentCompanies.ts
new file mode 100644
index 0000000..a1b610b
--- /dev/null
+++ b/src/features/agents/hooks/useAgentCompanies.ts
@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+
+export const useUpdateAgentCompanies = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      agentId,
+      companyIds,
+    }: {
+      agentId: string;
+      companyIds: string[];
+    }) => {
+      const { error } = await supabase.rpc("update_agent_companies", {
+        p_agent_id: agentId,
+        p_company_ids: companyIds,
+      });
+
+      if (error) throw error;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+};
diff --git a/src/features/agents/hooks/useAgents.ts b/src/features/agents/hooks/useAgents.ts
new file mode 100644
index 0000000..3a0331d
--- /dev/null
+++ b/src/features/agents/hooks/useAgents.ts
@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { AgentWithCompanies } from "../types";
+
+export const useAgents = () => {
+  return useQuery<AgentWithCompanies[]>({
+    queryKey: ["agents"],
+    queryFn: async () => {
+      // Get all agent profiles
+      const { data: profiles, error: profilesError } = await supabase
+        .from("profiles")
+        .select("*")
+        .eq("role", "agent")
+        .order("name");
+
+      if (profilesError) throw profilesError;
+
+      const agentUserIds = profiles.map((p) => p.user_id);
+
+      const { data: userCompanies, error: ucError } = await supabase
+        .from("user_companies")
+        .select("user_id, companies(*)")
+        .in("user_id", agentUserIds);
+
+      if (ucError) throw ucError;
+
+      const companiesByAgent = new Map<string, AgentWithCompanies["companies"]>();
+      for (const uc of userCompanies ?? []) {
+        if (!uc.companies) continue;
+        const existing = companiesByAgent.get(uc.user_id) ?? [];
+        existing.push(uc.companies as AgentWithCompanies["companies"][number]);
+        companiesByAgent.set(uc.user_id, existing);
+      }
+
+      return profiles.map((profile) => ({
+        ...profile,
+        companies: companiesByAgent.get(profile.user_id) ?? [],
+      }));
+    },
+  });
+};
diff --git a/src/features/agents/types.ts b/src/features/agents/types.ts
new file mode 100644
index 0000000..0f2d9cc
--- /dev/null
+++ b/src/features/agents/types.ts
@@ -0,0 +1,5 @@
+import type { Profile, Company } from "@/lib/types";
+
+export type AgentWithCompanies = Profile & {
+  companies: Company[];
+};
diff --git a/src/features/auth/AuthProvider.test.tsx b/src/features/auth/AuthProvider.test.tsx
new file mode 100644
index 0000000..ad01aaf
--- /dev/null
+++ b/src/features/auth/AuthProvider.test.tsx
@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@/test-utils";
+import { AuthProvider, useAuthContext } from "./AuthProvider";
+
+const mockGetSession = vi.fn();
+const mockOnAuthStateChange = vi.fn();
+
+vi.mock("@/lib/supabase", () => ({
+  supabase: {
+    auth: {
+      getSession: () => mockGetSession(),
+      onAuthStateChange: (...args: unknown[]) => mockOnAuthStateChange(...args),
+    },
+  },
+}));
+
+vi.mock("./hooks/useProfile", () => ({
+  useProfile: (userId: string | undefined) => ({
+    data: userId
+      ? { user_id: userId, name: "Test User", role: "admin", created_at: "" }
+      : undefined,
+  }),
+}));
+
+const AuthConsumer = () => {
+  const { user, profile, loading } = useAuthContext();
+  if (loading) return <div>Loading</div>;
+  if (!user) return <div>No user</div>;
+  return (
+    <div>
+      <span data-testid="email">{user.email}</span>
+      <span data-testid="role">{profile?.role}</span>
+    </div>
+  );
+};
+
+describe("AuthProvider", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockOnAuthStateChange.mockReturnValue({
+      data: { subscription: { unsubscribe: vi.fn() } },
+    });
+  });
+
+  it("shows loading state initially then resolves with session", async () => {
+    mockGetSession.mockResolvedValue({
+      data: {
+        session: {
+          user: { id: "user-1", email: "admin@test.com" },
+          access_token: "token",
+        },
+      },
+    });
+
+    renderWithProviders(
+      <AuthProvider>
+        <AuthConsumer />
+      </AuthProvider>,
+    );
+
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("email")).toHaveTextContent("admin@test.com");
+    });
+    expect(screen.getByTestId("role")).toHaveTextContent("admin");
+  });
+
+  it("handles session load failure gracefully", async () => {
+    mockGetSession.mockRejectedValue(new Error("Network error"));
+
+    renderWithProviders(
+      <AuthProvider>
+        <AuthConsumer />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("No user")).toBeInTheDocument();
+    });
+  });
+
+  it("subscribes to auth state changes and cleans up", () => {
+    const unsubscribe = vi.fn();
+    mockGetSession.mockResolvedValue({ data: { session: null } });
+    mockOnAuthStateChange.mockReturnValue({
+      data: { subscription: { unsubscribe } },
+    });
+
+    const { unmount } = renderWithProviders(
+      <AuthProvider>
+        <AuthConsumer />
+      </AuthProvider>,
+    );
+
+    expect(mockOnAuthStateChange).toHaveBeenCalledTimes(1);
+
+    unmount();
+    expect(unsubscribe).toHaveBeenCalled();
+  });
+});
diff --git a/src/features/auth/AuthProvider.tsx b/src/features/auth/AuthProvider.tsx
new file mode 100644
index 0000000..36b7c25
--- /dev/null
+++ b/src/features/auth/AuthProvider.tsx
@@ -0,0 +1,67 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import type { User, Session } from "@supabase/supabase-js";
+import { supabase } from "@/lib/supabase";
+import { useProfile } from "./hooks/useProfile";
+import type { Profile } from "@/lib/types";
+
+type AuthContextType = {
+  user: User | null;
+  profile: Profile | null;
+  session: Session | null;
+  loading: boolean;
+};
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  profile: null,
+  session: null,
+  loading: true,
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useAuthContext = () => useContext(AuthContext);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    }).catch(() => {
+      setSession(null);
+      setLoading(false);
+    });
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const user = session?.user ?? null;
+  const { data: profile } = useProfile(user?.id);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        profile: profile ?? null,
+        session,
+        loading,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
diff --git a/src/features/auth/components/LoginForm.tsx b/src/features/auth/components/LoginForm.tsx
new file mode 100644
index 0000000..35e9361
--- /dev/null
+++ b/src/features/auth/components/LoginForm.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAuth } from "../hooks/useAuth";
+
+const loginSchema = z.object({
+  email: z.email(),
+  password: z.string().min(6, "Password must be at least 6 characters"),
+});
+
+type LoginValues = z.infer<typeof loginSchema>;
+
+export const LoginForm = () => {
+  const navigate = useNavigate();
+  const { signIn } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginValues>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (values: LoginValues) => {
+    try {
+      setError(null);
+      await signIn(values.email, values.password);
+      navigate("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">Sign in to ServerDesk</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              {...register("email")}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              {...register("password")}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive">
+                {errors.password.message}
+              </p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? "Signing in..." : "Sign in"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/features/auth/components/ProtectedRoute.test.tsx b/src/features/auth/components/ProtectedRoute.test.tsx
new file mode 100644
index 0000000..fd5b442
--- /dev/null
+++ b/src/features/auth/components/ProtectedRoute.test.tsx
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "@/test-utils";
+import { ProtectedRoute } from "./ProtectedRoute";
+import { Route, Routes } from "react-router";
+
+const mockUseAuthContext = vi.fn();
+
+vi.mock("../AuthProvider", () => ({
+  useAuthContext: () => mockUseAuthContext(),
+}));
+
+const renderProtectedRoute = (initialEntries = ["/"]) => {
+  return renderWithProviders(
+    <Routes>
+      <Route element={<ProtectedRoute />}>
+        <Route path="/" element={<div>Protected Content</div>} />
+      </Route>
+      <Route path="/login" element={<div>Login Page</div>} />
+    </Routes>,
+    { initialEntries },
+  );
+};
+
+describe("ProtectedRoute", () => {
+  it("shows loading state while auth is loading", () => {
+    mockUseAuthContext.mockReturnValue({ user: null, loading: true });
+    renderProtectedRoute();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("redirects to /login when user is not authenticated", () => {
+    mockUseAuthContext.mockReturnValue({ user: null, loading: false });
+    renderProtectedRoute();
+    expect(screen.getByText("Login Page")).toBeInTheDocument();
+  });
+
+  it("renders outlet when user is authenticated", () => {
+    mockUseAuthContext.mockReturnValue({
+      user: { id: "user-1", email: "admin@test.com" },
+      loading: false,
+    });
+    renderProtectedRoute();
+    expect(screen.getByText("Protected Content")).toBeInTheDocument();
+  });
+});
diff --git a/src/features/auth/components/ProtectedRoute.tsx b/src/features/auth/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..eaded33
--- /dev/null
+++ b/src/features/auth/components/ProtectedRoute.tsx
@@ -0,0 +1,20 @@
+import { Navigate, Outlet } from "react-router";
+import { useAuthContext } from "../AuthProvider";
+
+export const ProtectedRoute = () => {
+  const { user, loading } = useAuthContext();
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Outlet />;
+};
diff --git a/src/features/auth/components/RoleGuard.test.tsx b/src/features/auth/components/RoleGuard.test.tsx
new file mode 100644
index 0000000..e12b8a7
--- /dev/null
+++ b/src/features/auth/components/RoleGuard.test.tsx
@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "@/test-utils";
+import { RoleGuard } from "./RoleGuard";
+import { Route, Routes } from "react-router";
+
+const mockUseAuthContext = vi.fn();
+
+vi.mock("../AuthProvider", () => ({
+  useAuthContext: () => mockUseAuthContext(),
+}));
+
+const renderRoleGuard = (allowedRoles: ("admin" | "agent" | "customer_manager")[], initialEntries = ["/admin"]) => {
+  return renderWithProviders(
+    <Routes>
+      <Route element={<RoleGuard allowedRoles={allowedRoles} />}>
+        <Route path="/admin" element={<div>Admin Content</div>} />
+      </Route>
+      <Route path="/" element={<div>Home Page</div>} />
+    </Routes>,
+    { initialEntries },
+  );
+};
+
+describe("RoleGuard", () => {
+  it("renders nothing while loading or profile is null", () => {
+    mockUseAuthContext.mockReturnValue({ profile: null, loading: true });
+    const { container } = renderRoleGuard(["admin"]);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("redirects to / when role is not allowed", () => {
+    mockUseAuthContext.mockReturnValue({
+      profile: { user_id: "u1", name: "Agent", role: "agent", created_at: "" },
+      loading: false,
+    });
+    renderRoleGuard(["admin"]);
+    expect(screen.getByText("Home Page")).toBeInTheDocument();
+  });
+
+  it("renders outlet when role is allowed", () => {
+    mockUseAuthContext.mockReturnValue({
+      profile: { user_id: "u1", name: "Admin", role: "admin", created_at: "" },
+      loading: false,
+    });
+    renderRoleGuard(["admin"]);
+    expect(screen.getByText("Admin Content")).toBeInTheDocument();
+  });
+
+  it("allows multiple roles", () => {
+    mockUseAuthContext.mockReturnValue({
+      profile: { user_id: "u1", name: "CM", role: "customer_manager", created_at: "" },
+      loading: false,
+    });
+    renderRoleGuard(["admin", "customer_manager"]);
+    expect(screen.getByText("Admin Content")).toBeInTheDocument();
+  });
+});
diff --git a/src/features/auth/components/RoleGuard.tsx b/src/features/auth/components/RoleGuard.tsx
new file mode 100644
index 0000000..2ddab63
--- /dev/null
+++ b/src/features/auth/components/RoleGuard.tsx
@@ -0,0 +1,21 @@
+import { Navigate, Outlet } from "react-router";
+import { useAuthContext } from "../AuthProvider";
+import type { AppRole } from "@/lib/types";
+
+type RoleGuardProps = {
+  allowedRoles: AppRole[];
+};
+
+export const RoleGuard = ({ allowedRoles }: RoleGuardProps) => {
+  const { profile, loading } = useAuthContext();
+
+  if (loading || !profile) {
+    return null;
+  }
+
+  if (!allowedRoles.includes(profile.role)) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+};
diff --git a/src/features/auth/components/SignupForm.tsx b/src/features/auth/components/SignupForm.tsx
new file mode 100644
index 0000000..f2a0a07
--- /dev/null
+++ b/src/features/auth/components/SignupForm.tsx
@@ -0,0 +1,166 @@
+import { useState, useEffect, useRef } from "react";
+import { useNavigate, useParams } from "react-router";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { supabase } from "@/lib/supabase";
+import { useAuth } from "../hooks/useAuth";
+
+const signupSchema = z.object({
+  email: z.email(),
+  name: z.string().min(1, "Name is required"),
+  password: z.string().min(6, "Password must be at least 6 characters"),
+});
+
+type SignupValues = z.infer<typeof signupSchema>;
+
+export const SignupForm = () => {
+  const navigate = useNavigate();
+  const { token } = useParams<{ token?: string }>();
+  const { signUp } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const [inviteEmail, setInviteEmail] = useState<string | null>(null);
+  const [validating, setValidating] = useState(!!token);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<SignupValues>({
+    resolver: zodResolver(signupSchema),
+  });
+
+  const hasValidated = useRef(false);
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+    if (hasValidated.current) return;
+    hasValidated.current = true;
+
+    const validateToken = async () => {
+      const { data, error: rpcError } = await supabase.rpc("validate_invite", {
+        p_token: token,
+      });
+
+      if (rpcError || !data || data.length === 0) {
+        setError("Invalid or expired invite link");
+        setValidating(false);
+        return;
+      }
+
+      const invite = data[0] as { email: string } | undefined;
+      if (!invite) {
+        setError("Invalid or expired invite link");
+        setValidating(false);
+        return;
+      }
+      setInviteEmail(invite.email);
+      setValue("email", invite.email);
+      setValidating(false);
+    };
+
+
+    validateToken().catch((err: unknown) => {
+      setError(err instanceof Error ? err.message : "Failed to validate invite");
+      setValidating(false);
+    });
+  }, [token, setValue]);
+
+  const onSubmit = async (values: SignupValues) => {
+    try {
+      setError(null);
+      await signUp(values.email, values.password, values.name, token);
+      navigate("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Signup failed");
+    }
+  };
+
+  if (validating) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-center text-muted-foreground">
+            Validating invite...
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error && !inviteEmail && token) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-center text-destructive">{error}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">
+          {token ? "Complete your registration" : "Create admin account"}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              readOnly={!!inviteEmail}
+              {...register("email")}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              placeholder="Your full name"
+              {...register("name")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              {...register("password")}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive">
+                {errors.password.message}
+              </p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? "Creating account..." : "Create account"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/features/auth/hooks/useAuth.test.ts b/src/features/auth/hooks/useAuth.test.ts
new file mode 100644
index 0000000..24d1b24
--- /dev/null
+++ b/src/features/auth/hooks/useAuth.test.ts
@@ -0,0 +1,114 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useAuth } from "./useAuth";
+
+const mockSignInWithPassword = vi.fn();
+const mockSignUp = vi.fn();
+const mockSignOut = vi.fn();
+
+vi.mock("@/lib/supabase", () => ({
+  supabase: {
+    auth: {
+      signInWithPassword: (...args: unknown[]) => mockSignInWithPassword(...args),
+      signUp: (...args: unknown[]) => mockSignUp(...args),
+      signOut: () => mockSignOut(),
+    },
+  },
+}));
+
+describe("useAuth", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("signIn", () => {
+    it("calls supabase signInWithPassword with email and password", async () => {
+      mockSignInWithPassword.mockResolvedValue({ error: null });
+      const { result } = renderHook(() => useAuth());
+
+      await result.current.signIn("test@example.com", "password123");
+
+      expect(mockSignInWithPassword).toHaveBeenCalledWith({
+        email: "test@example.com",
+        password: "password123",
+      });
+    });
+
+    it("throws on supabase error", async () => {
+      mockSignInWithPassword.mockResolvedValue({
+        error: new Error("Invalid credentials"),
+      });
+      const { result } = renderHook(() => useAuth());
+
+      await expect(
+        result.current.signIn("bad@example.com", "wrong"),
+      ).rejects.toThrow("Invalid credentials");
+    });
+  });
+
+  describe("signUp", () => {
+    it("calls supabase signUp with email, password, and name", async () => {
+      mockSignUp.mockResolvedValue({ error: null });
+      const { result } = renderHook(() => useAuth());
+
+      await result.current.signUp("test@example.com", "password123", "Test User");
+
+      expect(mockSignUp).toHaveBeenCalledWith({
+        email: "test@example.com",
+        password: "password123",
+        options: { data: { name: "Test User" } },
+      });
+    });
+
+    it("includes invite_token in metadata when provided", async () => {
+      mockSignUp.mockResolvedValue({ error: null });
+      const { result } = renderHook(() => useAuth());
+
+      await result.current.signUp(
+        "test@example.com",
+        "password123",
+        "Test User",
+        "abc-invite-token",
+      );
+
+      expect(mockSignUp).toHaveBeenCalledWith({
+        email: "test@example.com",
+        password: "password123",
+        options: {
+          data: { name: "Test User", invite_token: "abc-invite-token" },
+        },
+      });
+    });
+
+    it("throws on supabase error", async () => {
+      mockSignUp.mockResolvedValue({
+        error: new Error("Email already registered"),
+      });
+      const { result } = renderHook(() => useAuth());
+
+      await expect(
+        result.current.signUp("taken@example.com", "password123", "Name"),
+      ).rejects.toThrow("Email already registered");
+    });
+  });
+
+  describe("signOut", () => {
+    it("calls supabase signOut", async () => {
+      mockSignOut.mockResolvedValue({ error: null });
+      const { result } = renderHook(() => useAuth());
+
+      await result.current.signOut();
+
+      expect(mockSignOut).toHaveBeenCalled();
+    });
+
+    it("throws on supabase error", async () => {
+      mockSignOut.mockResolvedValue({
+        error: new Error("Network error"),
+      });
+      const { result } = renderHook(() => useAuth());
+
+      await expect(result.current.signOut()).rejects.toThrow("Network error");
+    });
+  });
+});
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
new file mode 100644
index 0000000..06c3fc4
--- /dev/null
+++ b/src/features/auth/hooks/useAuth.ts
@@ -0,0 +1,34 @@
+import { supabase } from "@/lib/supabase";
+
+export const useAuth = () => {
+  const signIn = async (email: string, password: string) => {
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    if (error) throw error;
+  };
+
+  const signUp = async (
+    email: string,
+    password: string,
+    name: string,
+    token?: string,
+  ) => {
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: { name, ...(token ? { invite_token: token } : {}) },
+      },
+    });
+    if (error) throw error;
+  };
+
+  const signOut = async () => {
+    const { error } = await supabase.auth.signOut();
+    if (error) throw error;
+  };
+
+  return { signIn, signUp, signOut };
+};
diff --git a/src/features/auth/hooks/useProfile.ts b/src/features/auth/hooks/useProfile.ts
new file mode 100644
index 0000000..f8467d4
--- /dev/null
+++ b/src/features/auth/hooks/useProfile.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { Profile } from "@/lib/types";
+
+export const useProfile = (userId: string | undefined) => {
+  return useQuery<Profile>({
+    queryKey: ["profile", userId],
+    queryFn: async () => {
+      if (!userId) throw new Error("userId is required");
+      const { data, error } = await supabase
+        .from("profiles")
+        .select("*")
+        .eq("user_id", userId)
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    enabled: !!userId,
+  });
+};
diff --git a/src/features/companies/components/CompanyDetail.tsx b/src/features/companies/components/CompanyDetail.tsx
new file mode 100644
index 0000000..b7e6cc3
--- /dev/null
+++ b/src/features/companies/components/CompanyDetail.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useCompany } from "../hooks/useCompany";
+import { useUpdateCompany, useDeleteCompany } from "../hooks/useCompanies";
+import { InviteCMDialog } from "./InviteCMDialog";
+
+const editSchema = z.object({
+  name: z.string().min(1, "Company name is required"),
+});
+
+type EditValues = z.infer<typeof editSchema>;
+
+export const CompanyDetail = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { data: company, isLoading, isError, error: queryError } = useCompany(id);
+  const updateCompany = useUpdateCompany();
+  const deleteCompany = useDeleteCompany();
+  const [editing, setEditing] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<EditValues>({
+    values: { name: company?.name ?? "" },
+    resolver: zodResolver(editSchema),
+  });
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading...</p>;
+  }
+
+  if (isError) {
+    return <p className="text-destructive">Failed to load company: {queryError.message}</p>;
+  }
+
+  if (!company) {
+    return <p className="text-destructive">Company not found</p>;
+  }
+
+  const onSubmit = async (values: EditValues) => {
+    try {
+      await updateCompany.mutateAsync({ id: company.id, name: values.name });
+      setEditing(false);
+    } catch {
+      // Error is handled by mutation state
+    }
+  };
+
+  const handleDelete = async () => {
+    if (confirm("Delete this company? This will also delete all related data.")) {
+      try {
+        await deleteCompany.mutateAsync(company.id);
+        navigate("/companies");
+      } catch {
+        // Error is handled by mutation state
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{company.name}</h1>
+        <div className="flex gap-2">
+          <InviteCMDialog companyId={company.id} companyName={company.name} />
+          <Button variant="outline" onClick={() => setEditing(!editing)}>
+            {editing ? "Cancel" : "Edit"}
+          </Button>
+          <Button variant="destructive" onClick={handleDelete}>
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {updateCompany.error && (
+        <p className="text-sm text-destructive">{updateCompany.error.message}</p>
+      )}
+      {deleteCompany.error && (
+        <p className="text-sm text-destructive">{deleteCompany.error.message}</p>
+      )}
+
+      {editing && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Edit Company</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit(onSubmit)} className="flex items-end gap-4">
+              <div className="flex-1 space-y-2">
+                <Label htmlFor="edit-name">Name</Label>
+                <Input id="edit-name" {...register("name")} />
+                {errors.name && (
+                  <p className="text-sm text-destructive">
+                    {errors.name.message}
+                  </p>
+                )}
+              </div>
+              <Button type="submit" disabled={updateCompany.isPending}>
+                Save
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Company Info</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm">
+          <p>
+            <span className="text-muted-foreground">Created:</span>{" "}
+            {new Date(company.created_at).toLocaleDateString()}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
diff --git a/src/features/companies/components/CompanyForm.tsx b/src/features/companies/components/CompanyForm.tsx
new file mode 100644
index 0000000..193b988
--- /dev/null
+++ b/src/features/companies/components/CompanyForm.tsx
@@ -0,0 +1,68 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { useCreateCompany } from "../hooks/useCompanies";
+
+const companySchema = z.object({
+  name: z.string().min(1, "Company name is required"),
+});
+
+type CompanyValues = z.infer<typeof companySchema>;
+
+type CompanyFormProps = {
+  onClose: () => void;
+};
+
+export const CompanyForm = ({ onClose }: CompanyFormProps) => {
+  const createCompany = useCreateCompany();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CompanyValues>({
+    resolver: zodResolver(companySchema),
+  });
+
+  const onSubmit = async (values: CompanyValues) => {
+    try {
+      await createCompany.mutateAsync(values.name);
+      onClose();
+    } catch {
+      // Error is handled by mutation state
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <form onSubmit={handleSubmit(onSubmit)} className="flex items-end gap-4">
+          <div className="flex-1 space-y-2">
+            <Label htmlFor="company-name">Company name</Label>
+            <Input
+              id="company-name"
+              placeholder="Enter company name"
+              {...register("name")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+            {createCompany.error && (
+              <p className="text-sm text-destructive">{createCompany.error.message}</p>
+            )}
+          </div>
+          <Button type="submit" disabled={createCompany.isPending}>
+            {createCompany.isPending ? "Creating..." : "Create"}
+          </Button>
+          <Button type="button" variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/features/companies/components/CompanyList.tsx b/src/features/companies/components/CompanyList.tsx
new file mode 100644
index 0000000..c869db9
--- /dev/null
+++ b/src/features/companies/components/CompanyList.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useCompanies } from "../hooks/useCompanies";
+import { CompanyForm } from "./CompanyForm";
+
+export const CompanyList = () => {
+  const { data: companies, isLoading, isError, error } = useCompanies();
+  const [showCreate, setShowCreate] = useState(false);
+
+  if (isLoading) {
+    return <p className="text-muted-foreground">Loading companies...</p>;
+  }
+
+  if (isError) {
+    return <p className="text-destructive">Failed to load companies: {error.message}</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Companies</h1>
+        <Button onClick={() => setShowCreate(true)}>New Company</Button>
+      </div>
+
+      {showCreate && (
+        <CompanyForm onClose={() => setShowCreate(false)} />
+      )}
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {companies?.map((company) => (
+            <TableRow key={company.id}>
+              <TableCell className="font-medium">{company.name}</TableCell>
+              <TableCell>
+                {new Date(company.created_at).toLocaleDateString()}
+              </TableCell>
+              <TableCell>
+                <Link to={`/companies/${company.id}`}>
+                  <Button variant="ghost" size="sm">
+                    View
+                  </Button>
+                </Link>
+              </TableCell>
+            </TableRow>
+          ))}
+          {companies?.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={3} className="text-center text-muted-foreground">
+                No companies yet
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
diff --git a/src/features/companies/components/InviteCMDialog.tsx b/src/features/companies/components/InviteCMDialog.tsx
new file mode 100644
index 0000000..5254a58
--- /dev/null
+++ b/src/features/companies/components/InviteCMDialog.tsx
@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useCreateInvite } from "../hooks/useCreateInvite";
+
+const inviteSchema = z.object({
+  email: z.email("Please enter a valid email"),
+});
+
+type InviteValues = z.infer<typeof inviteSchema>;
+
+type InviteCMDialogProps = {
+  companyId: string;
+  companyName: string;
+};
+
+export const InviteCMDialog = ({
+  companyId,
+  companyName,
+}: InviteCMDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [inviteLink, setInviteLink] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const createInvite = useCreateInvite();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<InviteValues>({
+    resolver: zodResolver(inviteSchema),
+  });
+
+  const onSubmit = async (values: InviteValues) => {
+    try {
+      const result = await createInvite.mutateAsync({
+        email: values.email,
+        role: "customer_manager",
+        companyIds: [companyId],
+      });
+      setInviteLink(`${window.location.origin}/signup/${result.token}`);
+    } catch {
+      // Error is handled by mutation state
+    }
+  };
+
+  const handleCopy = () => {
+    if (inviteLink) {
+      navigator.clipboard.writeText(inviteLink).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }).catch(() => {
+        // Clipboard API not available — fall back silently
+      });
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setInviteLink(null);
+    setCopied(false);
+    reset();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
+      <DialogTrigger render={<Button variant="outline" />}>
+        Invite Customer Manager
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Invite Customer Manager to {companyName}</DialogTitle>
+        </DialogHeader>
+        {inviteLink ? (
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Share this link with the customer manager:
+            </p>
+            <div className="flex gap-2">
+              <Input value={inviteLink} readOnly />
+              <Button onClick={handleCopy}>
+                {copied ? "Copied!" : "Copy"}
+              </Button>
+            </div>
+            <Button variant="outline" className="w-full" onClick={handleClose}>
+              Done
+            </Button>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="invite-email">Email address</Label>
+              <Input
+                id="invite-email"
+                type="email"
+                placeholder="manager@company.com"
+                {...register("email")}
+              />
+              {errors.email && (
+                <p className="text-sm text-destructive">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+            {createInvite.error && (
+              <p className="text-sm text-destructive">{createInvite.error.message}</p>
+            )}
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={createInvite.isPending}
+            >
+              {createInvite.isPending ? "Creating invite..." : "Generate invite link"}
+            </Button>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/features/companies/hooks/useCompanies.test.tsx b/src/features/companies/hooks/useCompanies.test.tsx
new file mode 100644
index 0000000..b5b73a4
--- /dev/null
+++ b/src/features/companies/hooks/useCompanies.test.tsx
@@ -0,0 +1,113 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode } from "react";
+import {
+  useCompanies,
+  useCreateCompany,
+} from "./useCompanies";
+
+const mockSelect = vi.fn();
+const mockInsert = vi.fn();
+
+const chainable = (terminal: (...args: unknown[]) => unknown) => {
+  const chain: Record<string, unknown> = {};
+  chain.select = vi.fn().mockReturnValue(chain);
+  chain.insert = vi.fn().mockReturnValue(chain);
+  chain.update = vi.fn().mockReturnValue(chain);
+  chain.delete = vi.fn().mockReturnValue(chain);
+  chain.eq = vi.fn().mockReturnValue(chain);
+  chain.order = vi.fn().mockImplementation((...args: unknown[]) => terminal(...args));
+  chain.single = vi.fn().mockImplementation((...args: unknown[]) => terminal(...args));
+  return chain;
+};
+
+vi.mock("@/lib/supabase", () => ({
+  supabase: {
+    from: (table: string) => {
+      if (table === "companies") {
+        return {
+          select: (...args: unknown[]) => {
+            const chain = chainable(mockSelect);
+            mockSelect.call(null, ...args);
+            return chain;
+          },
+          insert: (...args: unknown[]) => {
+            mockInsert(...args);
+            return chainable(() => mockInsert.mock.results[mockInsert.mock.results.length - 1]?.value ?? { data: null, error: null });
+          },
+          update: () => {
+            return chainable(() => ({ data: null, error: null }));
+          },
+          delete: () => {
+            return chainable(() => ({ data: null, error: null }));
+          },
+        };
+      }
+      return {};
+    },
+  },
+}));
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe("useCompanies", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("fetches companies list", async () => {
+    const companies = [
+      { id: "c1", name: "Acme", created_at: "", updated_at: "" },
+      { id: "c2", name: "Beta", created_at: "", updated_at: "" },
+    ];
+    mockSelect.mockResolvedValue({ data: companies, error: null });
+
+    const { result } = renderHook(() => useCompanies(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(companies);
+  });
+
+  it("handles fetch error", async () => {
+    mockSelect.mockResolvedValue({
+      data: null,
+      error: { message: "Permission denied" },
+    });
+
+    const { result } = renderHook(() => useCompanies(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+  });
+});
+
+describe("useCreateCompany", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("creates a company", async () => {
+    const newCompany = { id: "c1", name: "New Corp", created_at: "", updated_at: "" };
+    mockInsert.mockResolvedValue({ data: newCompany, error: null });
+
+    const { result } = renderHook(() => useCreateCompany(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate("New Corp");
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(mockInsert).toHaveBeenCalledWith({ name: "New Corp" });
+  });
+});
diff --git a/src/features/companies/hooks/useCompanies.ts b/src/features/companies/hooks/useCompanies.ts
new file mode 100644
index 0000000..8c71f9d
--- /dev/null
+++ b/src/features/companies/hooks/useCompanies.ts
@@ -0,0 +1,70 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { Company } from "@/lib/types";
+
+export const useCompanies = () => {
+  return useQuery<Company[]>({
+    queryKey: ["companies"],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("companies")
+        .select("*")
+        .order("name");
+      if (error) throw error;
+      return data;
+    },
+  });
+};
+
+export const useCreateCompany = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (name: string) => {
+      const { data, error } = await supabase
+        .from("companies")
+        .insert({ name })
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
+    },
+  });
+};
+
+export const useUpdateCompany = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, name }: { id: string; name: string }) => {
+      const { data, error } = await supabase
+        .from("companies")
+        .update({ name })
+        .eq("id", id)
+        .select()
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
+    },
+  });
+};
+
+export const useDeleteCompany = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const { error } = await supabase.from("companies").delete().eq("id", id);
+      if (error) throw error;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["companies"] });
+    },
+  });
+};
diff --git a/src/features/companies/hooks/useCompany.ts b/src/features/companies/hooks/useCompany.ts
new file mode 100644
index 0000000..c3cf32a
--- /dev/null
+++ b/src/features/companies/hooks/useCompany.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { Company } from "@/lib/types";
+
+export const useCompany = (id: string | undefined) => {
+  return useQuery<Company>({
+    queryKey: ["company", id],
+    queryFn: async () => {
+      if (!id) throw new Error("Company id is required");
+      const { data, error } = await supabase
+        .from("companies")
+        .select("*")
+        .eq("id", id)
+        .single();
+      if (error) throw error;
+      return data;
+    },
+    enabled: !!id,
+  });
+};
diff --git a/src/features/companies/hooks/useCreateInvite.test.tsx b/src/features/companies/hooks/useCreateInvite.test.tsx
new file mode 100644
index 0000000..7f5b620
--- /dev/null
+++ b/src/features/companies/hooks/useCreateInvite.test.tsx
@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode } from "react";
+import { useCreateInvite } from "./useCreateInvite";
+
+const mockRpc = vi.fn();
+
+vi.mock("@/lib/supabase", () => ({
+  supabase: {
+    rpc: (...args: unknown[]) => mockRpc(...args),
+  },
+}));
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe("useCreateInvite", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("calls the create_invite RPC with correct params", async () => {
+    mockRpc.mockResolvedValue({
+      data: [{ invite_id: "inv-1", token: "generated-token-abc" }],
+      error: null,
+    });
+
+    const { result } = renderHook(() => useCreateInvite(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      email: "agent@example.com",
+      role: "agent",
+      companyIds: ["company-1"],
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(mockRpc).toHaveBeenCalledWith("create_invite", {
+      p_email: "agent@example.com",
+      p_role: "agent",
+      p_company_ids: ["company-1"],
+    } as Record<string, unknown>);
+
+    expect(result.current.data).toEqual({
+      invite: { id: "inv-1" },
+      token: "generated-token-abc",
+    });
+  });
+
+  it("omits p_company_ids when companyIds is empty", async () => {
+    mockRpc.mockResolvedValue({
+      data: [{ invite_id: "inv-2", token: "token-no-companies" }],
+      error: null,
+    });
+
+    const { result } = renderHook(() => useCreateInvite(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      email: "agent@example.com",
+      role: "agent",
+      companyIds: [],
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(mockRpc).toHaveBeenCalledWith("create_invite", {
+      p_email: "agent@example.com",
+      p_role: "agent",
+    } as Record<string, unknown>);
+  });
+
+  it("handles RPC error", async () => {
+    mockRpc.mockResolvedValue({
+      data: null,
+      error: { message: "Only admins can create invites" },
+    });
+
+    const { result } = renderHook(() => useCreateInvite(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      email: "test@example.com",
+      role: "customer_manager",
+      companyIds: [],
+    });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+    expect(result.current.error).toEqual({
+      message: "Only admins can create invites",
+    });
+  });
+
+  it("handles empty data response", async () => {
+    mockRpc.mockResolvedValue({ data: [], error: null });
+
+    const { result } = renderHook(() => useCreateInvite(), {
+      wrapper: createWrapper(),
+    });
+
+    result.current.mutate({
+      email: "test@example.com",
+      role: "agent",
+      companyIds: [],
+    });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect((result.current.error as Error).message).toBe(
+      "Failed to create invite",
+    );
+  });
+});
diff --git a/src/features/companies/hooks/useCreateInvite.ts b/src/features/companies/hooks/useCreateInvite.ts
new file mode 100644
index 0000000..6639e4d
--- /dev/null
+++ b/src/features/companies/hooks/useCreateInvite.ts
@@ -0,0 +1,31 @@
+import { useMutation } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import type { AppRole } from "@/lib/types";
+
+type CreateInviteParams = {
+  email: string;
+  role: AppRole;
+  companyIds: string[];
+};
+
+export const useCreateInvite = () => {
+  return useMutation({
+    mutationFn: async ({ email, role, companyIds }: CreateInviteParams) => {
+      const params: { p_email: string; p_role: AppRole; p_company_ids?: string[] } = {
+        p_email: email,
+        p_role: role,
+      };
+      if (companyIds.length > 0) {
+        params.p_company_ids = companyIds;
+      }
+      const { data, error } = await supabase.rpc("create_invite", params);
+
+      if (error) throw error;
+
+      const row = data?.[0];
+      if (!row) throw new Error("Failed to create invite");
+
+      return { invite: { id: row.invite_id }, token: row.token };
+    },
+  });
+};
diff --git a/src/features/companies/types.ts b/src/features/companies/types.ts
new file mode 100644
index 0000000..6a08af9
--- /dev/null
+++ b/src/features/companies/types.ts
@@ -0,0 +1,6 @@
+import type { Company } from "@/lib/types";
+
+export type CompanyWithCounts = Company & {
+  customer_count: number;
+  ticket_count: number;
+};
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index 4626771..8b780bf 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -1,11 +1,65 @@
-import { Outlet } from "react-router";
+import { useState } from "react";
+import { NavLink, Outlet } from "react-router";
+import { useAuthContext } from "@/features/auth/AuthProvider";
+import { useAuth } from "@/features/auth/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { to: "/", label: "Dashboard", roles: ["admin", "agent", "customer_manager"] },
+  { to: "/tickets", label: "Tickets", roles: ["admin", "agent", "customer_manager"] },
+  { to: "/companies", label: "Companies", roles: ["admin"] },
+  { to: "/agents", label: "Agents", roles: ["admin"] },
+  { to: "/customers", label: "Customers", roles: ["customer_manager"] },
+] as const;
 
 export const AppLayout = () => {
+  const { profile, user } = useAuthContext();
+  const { signOut } = useAuth();
+  const [signOutError, setSignOutError] = useState<string | null>(null);
+
+  const visibleItems = navItems.filter(
+    (item) => profile && (item.roles as readonly string[]).includes(profile.role),
+  );
+
   return (
     <div className="flex min-h-screen">
-      <aside className="w-64 border-r bg-muted/40 p-4">
-        <h2 className="text-lg font-semibold">ServerDesk</h2>
-        {/* Sidebar nav will go here */}
+      <aside className="flex w-64 flex-col border-r bg-muted/40 p-4">
+        <h2 className="mb-6 text-lg font-semibold">ServerDesk</h2>
+        <nav className="flex flex-1 flex-col gap-1">
+          {visibleItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === "/"}
+              className={({ isActive }) =>
+                cn(
+                  "rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-primary text-primary-foreground"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="border-t pt-4">
+          <p className="mb-2 truncate text-sm text-muted-foreground">
+            {user?.email}
+          </p>
+          {signOutError && (
+            <p className="mb-2 text-sm text-destructive">{signOutError}</p>
+          )}
+          <Button variant="outline" size="sm" className="w-full" onClick={() => {
+            signOut().catch((err: unknown) => {
+              setSignOutError(err instanceof Error ? err.message : "Sign out failed");
+            });
+          }}>
+            Sign out
+          </Button>
+        </div>
       </aside>
       <main className="flex-1 p-6">
         <Outlet />
diff --git a/src/lib/database.types.ts b/src/lib/database.types.ts
new file mode 100644
index 0000000..932a19f
--- /dev/null
+++ b/src/lib/database.types.ts
@@ -0,0 +1,507 @@
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export type Database = {
+  graphql_public: {
+    Tables: {
+      [_ in never]: never
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      graphql: {
+        Args: {
+          extensions?: Json
+          operationName?: string
+          query?: string
+          variables?: Json
+        }
+        Returns: Json
+      }
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+  public: {
+    Tables: {
+      companies: {
+        Row: {
+          created_at: string
+          id: string
+          name: string
+          updated_at: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          name: string
+          updated_at?: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          name?: string
+          updated_at?: string
+        }
+        Relationships: []
+      }
+      email_logs: {
+        Row: {
+          created_at: string
+          direction: Database["public"]["Enums"]["email_direction"]
+          email_metadata: Json
+          id: string
+          ticket_id: string
+        }
+        Insert: {
+          created_at?: string
+          direction: Database["public"]["Enums"]["email_direction"]
+          email_metadata?: Json
+          id?: string
+          ticket_id: string
+        }
+        Update: {
+          created_at?: string
+          direction?: Database["public"]["Enums"]["email_direction"]
+          email_metadata?: Json
+          id?: string
+          ticket_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "email_logs_ticket_id_fkey"
+            columns: ["ticket_id"]
+            isOneToOne: false
+            referencedRelation: "tickets"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      customers: {
+        Row: {
+          company_id: string
+          created_at: string
+          email: string
+          id: string
+          name: string
+        }
+        Insert: {
+          company_id: string
+          created_at?: string
+          email: string
+          id?: string
+          name: string
+        }
+        Update: {
+          company_id?: string
+          created_at?: string
+          email?: string
+          id?: string
+          name?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "customers_company_id_fkey"
+            columns: ["company_id"]
+            isOneToOne: false
+            referencedRelation: "companies"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      invite_companies: {
+        Row: {
+          company_id: string
+          created_at: string
+          invite_id: string
+        }
+        Insert: {
+          company_id: string
+          created_at?: string
+          invite_id: string
+        }
+        Update: {
+          company_id?: string
+          created_at?: string
+          invite_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "invite_companies_company_id_fkey"
+            columns: ["company_id"]
+            isOneToOne: false
+            referencedRelation: "companies"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "invite_companies_invite_id_fkey"
+            columns: ["invite_id"]
+            isOneToOne: false
+            referencedRelation: "invites"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      invites: {
+        Row: {
+          created_at: string
+          email: string
+          expires_at: string
+          id: string
+          invited_by: string
+          role: Database["public"]["Enums"]["app_role"]
+          token: string
+          used_at: string | null
+        }
+        Insert: {
+          created_at?: string
+          email: string
+          expires_at: string
+          id?: string
+          invited_by: string
+          role: Database["public"]["Enums"]["app_role"]
+          token: string
+          used_at?: string | null
+        }
+        Update: {
+          created_at?: string
+          email?: string
+          expires_at?: string
+          id?: string
+          invited_by?: string
+          role?: Database["public"]["Enums"]["app_role"]
+          token?: string
+          used_at?: string | null
+        }
+        Relationships: []
+      }
+      profiles: {
+        Row: {
+          created_at: string
+          name: string
+          role: Database["public"]["Enums"]["app_role"]
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          name: string
+          role: Database["public"]["Enums"]["app_role"]
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          name?: string
+          role?: Database["public"]["Enums"]["app_role"]
+          user_id?: string
+        }
+        Relationships: []
+      }
+      ticket_messages: {
+        Row: {
+          body: string
+          created_at: string
+          id: string
+          sender_id: string | null
+          sender_type: Database["public"]["Enums"]["sender_type"]
+          ticket_id: string
+        }
+        Insert: {
+          body: string
+          created_at?: string
+          id?: string
+          sender_id?: string | null
+          sender_type: Database["public"]["Enums"]["sender_type"]
+          ticket_id: string
+        }
+        Update: {
+          body?: string
+          created_at?: string
+          id?: string
+          sender_id?: string | null
+          sender_type?: Database["public"]["Enums"]["sender_type"]
+          ticket_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "ticket_messages_ticket_id_fkey"
+            columns: ["ticket_id"]
+            isOneToOne: false
+            referencedRelation: "tickets"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      tickets: {
+        Row: {
+          company_id: string
+          created_at: string
+          created_by: string | null
+          customer_id: string
+          description: string | null
+          id: string
+          priority: Database["public"]["Enums"]["ticket_priority"]
+          status: Database["public"]["Enums"]["ticket_status"]
+          subject: string
+          updated_at: string
+        }
+        Insert: {
+          company_id: string
+          created_at?: string
+          created_by?: string | null
+          customer_id: string
+          description?: string | null
+          id?: string
+          priority?: Database["public"]["Enums"]["ticket_priority"]
+          status?: Database["public"]["Enums"]["ticket_status"]
+          subject: string
+          updated_at?: string
+        }
+        Update: {
+          company_id?: string
+          created_at?: string
+          created_by?: string | null
+          customer_id?: string
+          description?: string | null
+          id?: string
+          priority?: Database["public"]["Enums"]["ticket_priority"]
+          status?: Database["public"]["Enums"]["ticket_status"]
+          subject?: string
+          updated_at?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "tickets_company_id_fkey"
+            columns: ["company_id"]
+            isOneToOne: false
+            referencedRelation: "companies"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "tickets_customer_id_fkey"
+            columns: ["customer_id"]
+            isOneToOne: false
+            referencedRelation: "customers"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      user_companies: {
+        Row: {
+          company_id: string
+          created_at: string
+          user_id: string
+        }
+        Insert: {
+          company_id: string
+          created_at?: string
+          user_id: string
+        }
+        Update: {
+          company_id?: string
+          created_at?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "user_companies_company_id_fkey"
+            columns: ["company_id"]
+            isOneToOne: false
+            referencedRelation: "companies"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      create_invite: {
+        Args: {
+          p_email: string
+          p_role: Database["public"]["Enums"]["app_role"]
+          p_company_ids?: string[]
+        }
+        Returns: { invite_id: string; token: string }[]
+      }
+      update_agent_companies: {
+        Args: {
+          p_agent_id: string
+          p_company_ids: string[]
+        }
+        Returns: undefined
+      }
+      update_own_profile: {
+        Args: { p_name: string }
+        Returns: undefined
+      }
+      user_company_ids: { Args: never; Returns: string[] }
+      user_role: {
+        Args: never
+        Returns: Database["public"]["Enums"]["app_role"]
+      }
+      validate_invite: {
+        Args: { p_token: string }
+        Returns: {
+          id: string
+          email: string
+          role: Database["public"]["Enums"]["app_role"]
+          token: string
+          expires_at: string
+        }[]
+      }
+    }
+    Enums: {
+      app_role: "admin" | "agent" | "customer_manager"
+      email_direction: "inbound" | "outbound"
+      sender_type: "customer" | "agent" | "system"
+      ticket_priority: "low" | "medium" | "high" | "urgent"
+      ticket_status: "open" | "in_progress" | "waiting" | "resolved" | "closed"
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+
+type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
+
+type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
+
+export type Tables<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+        DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+      DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])
+    ? (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+
+export type TablesInsert<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+
+export type TablesUpdate<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+
+export type Enums<
+  DefaultSchemaEnumNameOrOptions extends
+    | keyof DefaultSchema["Enums"]
+    | { schema: keyof DatabaseWithoutInternals },
+  EnumName extends DefaultSchemaEnumNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
+    : never = never,
+> = DefaultSchemaEnumNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
+    ? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
+    : never
+
+export type CompositeTypes<
+  PublicCompositeTypeNameOrOptions extends
+    | keyof DefaultSchema["CompositeTypes"]
+    | { schema: keyof DatabaseWithoutInternals },
+  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
+    : never = never,
+> = PublicCompositeTypeNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
+  : PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
+    ? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
+    : never
+
+export const Constants = {
+  graphql_public: {
+    Enums: {},
+  },
+  public: {
+    Enums: {
+      app_role: ["admin", "agent", "customer_manager"],
+      sender_type: ["customer", "agent", "system"],
+      ticket_priority: ["low", "medium", "high", "urgent"],
+      ticket_status: ["open", "in_progress", "waiting", "resolved", "closed"],
+    },
+  },
+} as const
+
diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
index 515b4cc..e725771 100644
--- a/src/lib/supabase.ts
+++ b/src/lib/supabase.ts
@@ -1,4 +1,5 @@
 import { createClient } from "@supabase/supabase-js";
+import type { Database } from "./database.types";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
@@ -7,4 +8,4 @@ if (!supabaseUrl || !supabaseAnonKey) {
   throw new Error("Missing Supabase environment variables");
 }
 
-export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 1709c44..f00fd2c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,10 +1,19 @@
-// Database types will be generated by: npx supabase gen types typescript --local
-// For now, define the app-level role enum used across the app
+import type { Database } from "./database.types";
 
-export type UserRole = "admin" | "agent" | "customer_manager";
+// Database row types
+export type Profile = Database["public"]["Tables"]["profiles"]["Row"];
+export type Company = Database["public"]["Tables"]["companies"]["Row"];
+export type UserCompany = Database["public"]["Tables"]["user_companies"]["Row"];
+export type Invite = Database["public"]["Tables"]["invites"]["Row"];
+export type InviteCompany = Database["public"]["Tables"]["invite_companies"]["Row"];
+export type Customer = Database["public"]["Tables"]["customers"]["Row"];
+export type Ticket = Database["public"]["Tables"]["tickets"]["Row"];
+export type TicketMessage = Database["public"]["Tables"]["ticket_messages"]["Row"];
+export type EmailLog = Database["public"]["Tables"]["email_logs"]["Row"];
 
-export type TicketStatus = "open" | "in_progress" | "waiting" | "resolved" | "closed";
-
-export type TicketPriority = "low" | "medium" | "high" | "urgent";
-
-export type SenderType = "customer" | "agent" | "system";
+// Enum types
+export type AppRole = Database["public"]["Enums"]["app_role"];
+export type TicketStatus = Database["public"]["Enums"]["ticket_status"];
+export type TicketPriority = Database["public"]["Enums"]["ticket_priority"];
+export type SenderType = Database["public"]["Enums"]["sender_type"];
+export type EmailDirection = Database["public"]["Enums"]["email_direction"];
diff --git a/src/lib/utils.test.ts b/src/lib/utils.test.ts
index e369f1b..8e1088d 100644
--- a/src/lib/utils.test.ts
+++ b/src/lib/utils.test.ts
@@ -7,7 +7,8 @@ describe("cn utility", () => {
   });
 
   it("handles conditional classes", () => {
-    expect(cn("px-2", false && "py-1")).toBe("px-2");
+    const condition = false as boolean;
+    expect(cn("px-2", condition && "py-1")).toBe("px-2");
   });
 
   it("deduplicates conflicting tailwind classes", () => {
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 740a4b2..dc55be5 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,35 +1,61 @@
 import { createBrowserRouter } from "react-router";
 import { AuthLayout } from "@/layouts/AuthLayout";
 import { AppLayout } from "@/layouts/AppLayout";
+import { ProtectedRoute } from "@/features/auth/components/ProtectedRoute";
+import { RoleGuard } from "@/features/auth/components/RoleGuard";
+import { LoginForm } from "@/features/auth/components/LoginForm";
+import { SignupForm } from "@/features/auth/components/SignupForm";
+import { CompanyList } from "@/features/companies/components/CompanyList";
+import { CompanyDetail } from "@/features/companies/components/CompanyDetail";
+import { AgentList } from "@/features/agents/components/AgentList";
 
 export const router = createBrowserRouter([
   {
     element: <AuthLayout />,
     children: [
-      {
-        path: "/login",
-        element: <div>Login Page</div>,
-      },
-      {
-        path: "/signup/:token",
-        element: <div>Signup Page</div>,
-      },
+      { path: "/login", element: <LoginForm /> },
+      { path: "/signup", element: <SignupForm /> },
+      { path: "/signup/:token", element: <SignupForm /> },
     ],
   },
   {
-    element: <AppLayout />,
+    element: <ProtectedRoute />,
     children: [
       {
-        path: "/",
-        element: <div>Dashboard</div>,
-      },
-      {
-        path: "/tickets",
-        element: <div>Tickets</div>,
-      },
-      {
-        path: "/companies",
-        element: <div>Companies</div>,
+        element: <AppLayout />,
+        children: [
+          { path: "/", element: <div>Dashboard — coming soon</div> },
+          {
+            path: "/tickets",
+            element: <div>Tickets — coming soon</div>,
+          },
+          {
+            element: <RoleGuard allowedRoles={["admin"]} />,
+            children: [
+              {
+                path: "/companies",
+                element: <CompanyList />,
+              },
+              {
+                path: "/companies/:id",
+                element: <CompanyDetail />,
+              },
+              {
+                path: "/agents",
+                element: <AgentList />,
+              },
+            ],
+          },
+          {
+            element: <RoleGuard allowedRoles={["customer_manager"]} />,
+            children: [
+              {
+                path: "/customers",
+                element: <div>Customers — coming soon</div>,
+              },
+            ],
+          },
+        ],
       },
     ],
   },
diff --git a/src/test-utils.tsx b/src/test-utils.tsx
new file mode 100644
index 0000000..8255e75
--- /dev/null
+++ b/src/test-utils.tsx
@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, type RenderOptions } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+type WrapperOptions = {
+  initialEntries?: string[];
+};
+
+export const createWrapper = (options: WrapperOptions = {}) => {
+  const queryClient = createTestQueryClient();
+  const Wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={options.initialEntries ?? ["/"]}>
+        {children}
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+  return Wrapper;
+};
+
+export const renderWithProviders = (
+  ui: ReactNode,
+  options: WrapperOptions & Omit<RenderOptions, "wrapper"> = {},
+) => {
+  const { initialEntries, ...renderOptions } = options;
+  return render(ui, {
+    wrapper: createWrapper({ initialEntries }),
+    ...renderOptions,
+  });
+};
+
+export { createTestQueryClient };
diff --git a/supabase/migrations/00001_create_enums_and_tables.sql b/supabase/migrations/00001_create_enums_and_tables.sql
new file mode 100644
index 0000000..4bed355
--- /dev/null
+++ b/supabase/migrations/00001_create_enums_and_tables.sql
@@ -0,0 +1,93 @@
+-- Enums
+CREATE TYPE app_role AS ENUM ('admin', 'agent', 'customer_manager');
+CREATE TYPE ticket_status AS ENUM ('open', 'in_progress', 'waiting', 'resolved', 'closed');
+CREATE TYPE ticket_priority AS ENUM ('low', 'medium', 'high', 'urgent');
+CREATE TYPE sender_type AS ENUM ('customer', 'agent', 'system');
+
+-- Profiles (one per auth.user)
+CREATE TABLE profiles (
+  user_id uuid PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
+  name text NOT NULL,
+  role app_role NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Companies
+CREATE TABLE companies (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  name text NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- User-company assignments (agents + customer managers)
+CREATE TABLE user_companies (
+  user_id uuid NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  PRIMARY KEY (user_id, company_id)
+);
+
+-- Invites
+CREATE TABLE invites (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  email text NOT NULL,
+  role app_role NOT NULL,
+  token text UNIQUE NOT NULL,
+  invited_by uuid NOT NULL REFERENCES auth.users(id),
+  used_at timestamptz,
+  expires_at timestamptz NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Invite-company assignments (which companies the invite grants)
+CREATE TABLE invite_companies (
+  invite_id uuid NOT NULL REFERENCES invites(id) ON DELETE CASCADE,
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  PRIMARY KEY (invite_id, company_id)
+);
+
+-- Customers (managed by customer managers)
+CREATE TABLE customers (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  email text UNIQUE NOT NULL,
+  name text NOT NULL,
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Tickets
+CREATE TABLE tickets (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  subject text NOT NULL,
+  description text,
+  status ticket_status NOT NULL DEFAULT 'open',
+  priority ticket_priority NOT NULL DEFAULT 'medium',
+  customer_id uuid NOT NULL REFERENCES customers(id),
+  company_id uuid NOT NULL REFERENCES companies(id) ON DELETE CASCADE,
+  created_by uuid REFERENCES auth.users(id),
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Ticket messages
+CREATE TABLE ticket_messages (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  ticket_id uuid NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+  sender_type sender_type NOT NULL,
+  sender_id uuid,
+  body text NOT NULL,
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Indexes for common queries
+CREATE INDEX idx_user_companies_user ON user_companies(user_id);
+CREATE INDEX idx_user_companies_company ON user_companies(company_id);
+CREATE INDEX idx_tickets_company ON tickets(company_id);
+CREATE INDEX idx_tickets_status ON tickets(status);
+CREATE INDEX idx_tickets_customer ON tickets(customer_id);
+CREATE INDEX idx_ticket_messages_ticket ON ticket_messages(ticket_id);
+CREATE INDEX idx_customers_company ON customers(company_id);
+CREATE INDEX idx_invites_token ON invites(token);
+CREATE INDEX idx_invites_email ON invites(email);
diff --git a/supabase/migrations/00002_create_rls_policies.sql b/supabase/migrations/00002_create_rls_policies.sql
new file mode 100644
index 0000000..92d128e
--- /dev/null
+++ b/supabase/migrations/00002_create_rls_policies.sql
@@ -0,0 +1,75 @@
+-- Enable RLS on all tables
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE companies ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_companies ENABLE ROW LEVEL SECURITY;
+ALTER TABLE invites ENABLE ROW LEVEL SECURITY;
+ALTER TABLE invite_companies ENABLE ROW LEVEL SECURITY;
+ALTER TABLE customers ENABLE ROW LEVEL SECURITY;
+ALTER TABLE tickets ENABLE ROW LEVEL SECURITY;
+ALTER TABLE ticket_messages ENABLE ROW LEVEL SECURITY;
+
+-- Helper: get current user's role
+CREATE OR REPLACE FUNCTION public.user_role()
+RETURNS app_role
+LANGUAGE sql
+STABLE
+SECURITY DEFINER
+SET search_path = public
+AS $$
+  SELECT role FROM profiles WHERE user_id = auth.uid()
+$$;
+
+-- Helper: get current user's company IDs
+CREATE OR REPLACE FUNCTION public.user_company_ids()
+RETURNS SETOF uuid
+LANGUAGE sql
+STABLE
+SECURITY DEFINER
+SET search_path = public
+AS $$
+  SELECT company_id FROM user_companies WHERE user_id = auth.uid()
+$$;
+
+-- PROFILES
+CREATE POLICY profiles_select_own ON profiles FOR SELECT USING (user_id = auth.uid());
+CREATE POLICY profiles_select_admin ON profiles FOR SELECT USING (public.user_role() = 'admin');
+CREATE POLICY profiles_update_admin ON profiles FOR UPDATE USING (public.user_role() = 'admin');
+CREATE POLICY profiles_update_own ON profiles FOR UPDATE USING (user_id = auth.uid());
+
+-- COMPANIES
+CREATE POLICY companies_admin ON companies FOR ALL USING (public.user_role() = 'admin');
+CREATE POLICY companies_select_agent ON companies FOR SELECT USING (public.user_role() = 'agent' AND id IN (SELECT public.user_company_ids()));
+CREATE POLICY companies_select_cm ON companies FOR SELECT USING (public.user_role() = 'customer_manager' AND id IN (SELECT public.user_company_ids()));
+
+-- USER_COMPANIES
+CREATE POLICY user_companies_admin ON user_companies FOR ALL USING (public.user_role() = 'admin');
+CREATE POLICY user_companies_select_own ON user_companies FOR SELECT USING (user_id = auth.uid());
+
+-- INVITES
+CREATE POLICY invites_admin ON invites FOR ALL USING (public.user_role() = 'admin');
+CREATE POLICY invites_select_by_token ON invites FOR SELECT USING (true);
+
+-- INVITE_COMPANIES
+CREATE POLICY invite_companies_admin ON invite_companies FOR ALL USING (public.user_role() = 'admin');
+CREATE POLICY invite_companies_select ON invite_companies FOR SELECT USING (true);
+
+-- CUSTOMERS
+CREATE POLICY customers_admin ON customers FOR ALL USING (public.user_role() = 'admin');
+CREATE POLICY customers_select_cm ON customers FOR SELECT USING (public.user_role() = 'customer_manager' AND company_id IN (SELECT public.user_company_ids()));
+CREATE POLICY customers_insert_cm ON customers FOR INSERT WITH CHECK (public.user_role() = 'customer_manager' AND company_id IN (SELECT public.user_company_ids()));
+CREATE POLICY customers_update_cm ON customers FOR UPDATE USING (public.user_role() = 'customer_manager' AND company_id IN (SELECT public.user_company_ids()));
+
+-- TICKETS
+CREATE POLICY tickets_admin ON tickets FOR ALL USING (public.user_role() = 'admin');
+CREATE POLICY tickets_select_agent ON tickets FOR SELECT USING (public.user_role() = 'agent' AND company_id IN (SELECT public.user_company_ids()));
+CREATE POLICY tickets_update_agent ON tickets FOR UPDATE USING (public.user_role() = 'agent' AND company_id IN (SELECT public.user_company_ids()));
+CREATE POLICY tickets_select_cm ON tickets FOR SELECT USING (public.user_role() = 'customer_manager' AND company_id IN (SELECT public.user_company_ids()));
+CREATE POLICY tickets_insert_cm ON tickets FOR INSERT WITH CHECK (public.user_role() = 'customer_manager' AND company_id IN (SELECT public.user_company_ids()));
+CREATE POLICY tickets_update_cm ON tickets FOR UPDATE USING (public.user_role() = 'customer_manager' AND company_id IN (SELECT public.user_company_ids()));
+
+-- TICKET_MESSAGES
+CREATE POLICY ticket_messages_admin ON ticket_messages FOR ALL USING (public.user_role() = 'admin');
+CREATE POLICY ticket_messages_select_agent ON ticket_messages FOR SELECT USING (public.user_role() = 'agent' AND ticket_id IN (SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids())));
+CREATE POLICY ticket_messages_insert_agent ON ticket_messages FOR INSERT WITH CHECK (public.user_role() = 'agent' AND ticket_id IN (SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids())));
+CREATE POLICY ticket_messages_select_cm ON ticket_messages FOR SELECT USING (public.user_role() = 'customer_manager' AND ticket_id IN (SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids())));
+CREATE POLICY ticket_messages_insert_cm ON ticket_messages FOR INSERT WITH CHECK (public.user_role() = 'customer_manager' AND ticket_id IN (SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids())));
diff --git a/supabase/migrations/00003_create_signup_trigger.sql b/supabase/migrations/00003_create_signup_trigger.sql
new file mode 100644
index 0000000..c9cead0
--- /dev/null
+++ b/supabase/migrations/00003_create_signup_trigger.sql
@@ -0,0 +1,54 @@
+CREATE OR REPLACE FUNCTION handle_new_user()
+RETURNS trigger
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  _profile_count int;
+  _invite record;
+  _user_name text;
+BEGIN
+  _user_name := COALESCE(
+    NEW.raw_user_meta_data ->> 'name',
+    split_part(NEW.email, '@', 1)
+  );
+
+  SELECT count(*) INTO _profile_count FROM profiles;
+
+  IF _profile_count = 0 THEN
+    INSERT INTO profiles (user_id, name, role)
+    VALUES (NEW.id, _user_name, 'admin');
+    RETURN NEW;
+  END IF;
+
+  SELECT * INTO _invite
+  FROM invites
+  WHERE email = NEW.email
+    AND used_at IS NULL
+    AND expires_at > now()
+  ORDER BY created_at DESC
+  LIMIT 1;
+
+  IF _invite IS NULL THEN
+    RAISE EXCEPTION 'No valid invite found for %', NEW.email;
+  END IF;
+
+  INSERT INTO profiles (user_id, name, role)
+  VALUES (NEW.id, _user_name, _invite.role);
+
+  INSERT INTO user_companies (user_id, company_id)
+  SELECT NEW.id, ic.company_id
+  FROM invite_companies ic
+  WHERE ic.invite_id = _invite.id;
+
+  UPDATE invites SET used_at = now() WHERE id = _invite.id;
+
+  RETURN NEW;
+END;
+$$;
+
+CREATE TRIGGER on_auth_user_created
+  AFTER INSERT ON auth.users
+  FOR EACH ROW
+  EXECUTE FUNCTION handle_new_user();
diff --git a/supabase/migrations/00004_fix_security_and_schema.sql b/supabase/migrations/00004_fix_security_and_schema.sql
new file mode 100644
index 0000000..361f066
--- /dev/null
+++ b/supabase/migrations/00004_fix_security_and_schema.sql
@@ -0,0 +1,227 @@
+-- Migration: Fix security vulnerabilities and schema gaps found during PR review
+-- Date: 2026-04-07
+
+BEGIN;
+
+-- ============================================================================
+-- 1. CRITICAL: Fix role escalation via profiles_update_own
+--    Users could set their own role to admin because the policy had no WITH CHECK.
+--    Replace with a SECURITY DEFINER function that only allows updating the name.
+-- ============================================================================
+
+DROP POLICY IF EXISTS profiles_update_own ON profiles;
+
+CREATE OR REPLACE FUNCTION public.update_own_profile(p_name text)
+RETURNS void
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+BEGIN
+  UPDATE profiles
+  SET name = p_name
+  WHERE user_id = auth.uid();
+END;
+$$;
+
+-- ============================================================================
+-- 2. CRITICAL: Fix invite token exposure
+--    invites_select_by_token USING (true) exposed all invite rows to everyone.
+--    Replace with a SECURITY DEFINER function that validates a single token.
+-- ============================================================================
+
+DROP POLICY IF EXISTS invites_select_by_token ON invites;
+
+CREATE OR REPLACE FUNCTION public.validate_invite(p_token text)
+RETURNS TABLE (
+  id uuid,
+  email text,
+  role app_role,
+  token text,
+  expires_at timestamptz
+)
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+BEGIN
+  RETURN QUERY
+  SELECT i.id, i.email, i.role, i.token, i.expires_at
+  FROM invites i
+  WHERE i.token = p_token
+    AND i.used_at IS NULL
+    AND i.expires_at > now()
+  LIMIT 1;
+END;
+$$;
+
+GRANT EXECUTE ON FUNCTION public.validate_invite(text) TO authenticated;
+GRANT EXECUTE ON FUNCTION public.validate_invite(text) TO anon;
+
+-- ============================================================================
+-- 3. CRITICAL: Fix invite_companies exposure
+--    invite_companies_select USING (true) exposed all rows.
+--    The validate_invite function and signup trigger handle this internally.
+-- ============================================================================
+
+DROP POLICY IF EXISTS invite_companies_select ON invite_companies;
+
+-- ============================================================================
+-- 4. CRITICAL: Verify invite token server-side during signup
+--    The trigger previously matched invites by email only. Now it also checks
+--    the token passed via raw_user_meta_data->>'invite_token'.
+-- ============================================================================
+
+CREATE OR REPLACE FUNCTION handle_new_user()
+RETURNS trigger
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  _profile_count int;
+  _invite record;
+  _user_name text;
+  _invite_token text;
+BEGIN
+  _user_name := COALESCE(
+    NEW.raw_user_meta_data ->> 'name',
+    split_part(NEW.email, '@', 1)
+  );
+
+  SELECT count(*) INTO _profile_count FROM profiles;
+
+  IF _profile_count = 0 THEN
+    INSERT INTO profiles (user_id, name, role)
+    VALUES (NEW.id, _user_name, 'admin');
+    RETURN NEW;
+  END IF;
+
+  -- Extract invite token from signup metadata
+  _invite_token := NEW.raw_user_meta_data ->> 'invite_token';
+
+  IF _invite_token IS NULL THEN
+    RAISE EXCEPTION 'No invite token provided during signup';
+  END IF;
+
+  -- Match invite by BOTH email AND token
+  SELECT * INTO _invite
+  FROM invites
+  WHERE email = NEW.email
+    AND token = _invite_token
+    AND used_at IS NULL
+    AND expires_at > now()
+  LIMIT 1;
+
+  IF _invite IS NULL THEN
+    RAISE EXCEPTION 'No valid invite found for % with the provided token', NEW.email;
+  END IF;
+
+  INSERT INTO profiles (user_id, name, role)
+  VALUES (NEW.id, _user_name, _invite.role);
+
+  INSERT INTO user_companies (user_id, company_id)
+  SELECT NEW.id, ic.company_id
+  FROM invite_companies ic
+  WHERE ic.invite_id = _invite.id;
+
+  UPDATE invites SET used_at = now() WHERE id = _invite.id;
+
+  RETURN NEW;
+END;
+$$;
+
+-- ============================================================================
+-- 5. CRITICAL: Prevent agents/CMs from impersonating sender_type
+--    INSERT policies on ticket_messages must enforce sender_type and sender_id.
+-- ============================================================================
+
+DROP POLICY IF EXISTS ticket_messages_insert_agent ON ticket_messages;
+DROP POLICY IF EXISTS ticket_messages_insert_cm ON ticket_messages;
+
+CREATE POLICY ticket_messages_insert_agent ON ticket_messages
+  FOR INSERT
+  WITH CHECK (
+    public.user_role() = 'agent'
+    AND sender_type = 'agent'
+    AND sender_id = auth.uid()
+    AND ticket_id IN (
+      SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids())
+    )
+  );
+
+CREATE POLICY ticket_messages_insert_cm ON ticket_messages
+  FOR INSERT
+  WITH CHECK (
+    public.user_role() = 'customer_manager'
+    AND sender_type = 'agent'
+    AND sender_id = auth.uid()
+    AND ticket_id IN (
+      SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids())
+    )
+  );
+
+-- ============================================================================
+-- 6. SCHEMA: Prevent race condition on first admin signup
+--    Two simultaneous signups could both see count=0 and become admin.
+-- ============================================================================
+
+CREATE UNIQUE INDEX IF NOT EXISTS one_admin_profile
+  ON profiles (role) WHERE role = 'admin';
+
+-- ============================================================================
+-- 7. SCHEMA: Add missing assigned_agent_id column on tickets
+-- ============================================================================
+
+ALTER TABLE tickets ADD COLUMN IF NOT EXISTS assigned_agent_id uuid REFERENCES auth.users(id);
+
+-- ============================================================================
+-- 8. SCHEMA: Add missing domain column on companies
+-- ============================================================================
+
+ALTER TABLE companies ADD COLUMN IF NOT EXISTS domain text;
+
+-- ============================================================================
+-- 9. SCHEMA: Auto-update updated_at via trigger
+-- ============================================================================
+
+CREATE OR REPLACE FUNCTION public.set_updated_at()
+RETURNS trigger
+LANGUAGE plpgsql
+AS $$
+BEGIN
+  NEW.updated_at = now();
+  RETURN NEW;
+END;
+$$;
+
+CREATE OR REPLACE TRIGGER trg_companies_updated_at
+  BEFORE UPDATE ON companies
+  FOR EACH ROW
+  EXECUTE FUNCTION public.set_updated_at();
+
+CREATE OR REPLACE TRIGGER trg_tickets_updated_at
+  BEFORE UPDATE ON tickets
+  FOR EACH ROW
+  EXECUTE FUNCTION public.set_updated_at();
+
+-- ============================================================================
+-- 10. SCHEMA: Add admin FOR ALL policy on profiles, drop redundant ones
+--     FOR ALL covers SELECT, INSERT, UPDATE, DELETE.
+-- ============================================================================
+
+DROP POLICY IF EXISTS profiles_select_admin ON profiles;
+DROP POLICY IF EXISTS profiles_update_admin ON profiles;
+
+CREATE POLICY profiles_admin_all ON profiles
+  FOR ALL
+  USING (public.user_role() = 'admin');
+
+-- ============================================================================
+-- 11. SCHEMA: Drop redundant index on invites.token
+--     The UNIQUE constraint on invites.token already creates an index.
+-- ============================================================================
+
+DROP INDEX IF EXISTS idx_invites_token;
+
+COMMIT;
diff --git a/supabase/migrations/00005_fix_review_issues.sql b/supabase/migrations/00005_fix_review_issues.sql
new file mode 100644
index 0000000..c286fdf
--- /dev/null
+++ b/supabase/migrations/00005_fix_review_issues.sql
@@ -0,0 +1,209 @@
+-- Migration: Fix PR review issues — atomic RPCs, WITH CHECK, email_logs, admin constraint
+-- Date: 2026-04-07
+
+BEGIN;
+
+-- ============================================================================
+-- 1. RPC: Atomic update of agent company assignments
+--    Replaces non-atomic delete-then-insert from the client side.
+-- ============================================================================
+
+CREATE OR REPLACE FUNCTION public.update_agent_companies(
+  p_agent_id uuid,
+  p_company_ids uuid[]
+)
+RETURNS void
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+BEGIN
+  -- Only admins can call this
+  IF public.user_role() <> 'admin' THEN
+    RAISE EXCEPTION 'Only admins can update agent company assignments';
+  END IF;
+
+  DELETE FROM user_companies WHERE user_id = p_agent_id;
+
+  IF array_length(p_company_ids, 1) IS NOT NULL THEN
+    INSERT INTO user_companies (user_id, company_id)
+    SELECT p_agent_id, unnest(p_company_ids);
+  END IF;
+END;
+$$;
+
+GRANT EXECUTE ON FUNCTION public.update_agent_companies(uuid, uuid[]) TO authenticated;
+
+-- ============================================================================
+-- 2. RPC: Atomic invite creation with company associations
+--    Token is generated server-side via gen_random_uuid().
+-- ============================================================================
+
+CREATE OR REPLACE FUNCTION public.create_invite(
+  p_email text,
+  p_role app_role,
+  p_company_ids uuid[]
+)
+RETURNS TABLE (invite_id uuid, token text)
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  _invite_id uuid;
+  _token text;
+  _user_id uuid;
+BEGIN
+  -- Only admins can create invites
+  IF public.user_role() <> 'admin' THEN
+    RAISE EXCEPTION 'Only admins can create invites';
+  END IF;
+
+  _user_id := auth.uid();
+  _token := encode(gen_random_bytes(32), 'hex');
+
+  INSERT INTO invites (email, role, token, invited_by, expires_at)
+  VALUES (p_email, p_role, _token, _user_id, now() + interval '7 days')
+  RETURNING id INTO _invite_id;
+
+  IF array_length(p_company_ids, 1) IS NOT NULL THEN
+    INSERT INTO invite_companies (invite_id, company_id)
+    SELECT _invite_id, unnest(p_company_ids);
+  END IF;
+
+  RETURN QUERY SELECT _invite_id, _token;
+END;
+$$;
+
+GRANT EXECUTE ON FUNCTION public.create_invite(text, app_role, uuid[]) TO authenticated;
+
+-- ============================================================================
+-- 3. Add WITH CHECK to ticket update policies
+--    Prevents agents/CMs from moving tickets to companies they don't belong to.
+-- ============================================================================
+
+DROP POLICY IF EXISTS tickets_update_agent ON tickets;
+DROP POLICY IF EXISTS tickets_update_cm ON tickets;
+
+CREATE POLICY tickets_update_agent ON tickets
+  FOR UPDATE
+  USING (public.user_role() = 'agent' AND company_id IN (SELECT public.user_company_ids()))
+  WITH CHECK (company_id IN (SELECT public.user_company_ids()));
+
+CREATE POLICY tickets_update_cm ON tickets
+  FOR UPDATE
+  USING (public.user_role() = 'customer_manager' AND company_id IN (SELECT public.user_company_ids()))
+  WITH CHECK (company_id IN (SELECT public.user_company_ids()));
+
+-- ============================================================================
+-- 4. Add email_logs table (missing from spec)
+-- ============================================================================
+
+CREATE TYPE email_direction AS ENUM ('inbound', 'outbound');
+
+CREATE TABLE email_logs (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  ticket_id uuid NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+  direction email_direction NOT NULL,
+  email_metadata jsonb NOT NULL DEFAULT '{}',
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+ALTER TABLE email_logs ENABLE ROW LEVEL SECURITY;
+
+CREATE INDEX idx_email_logs_ticket ON email_logs(ticket_id);
+
+CREATE POLICY email_logs_admin ON email_logs
+  FOR ALL
+  USING (public.user_role() = 'admin');
+
+CREATE POLICY email_logs_select_agent ON email_logs
+  FOR SELECT
+  USING (
+    public.user_role() = 'agent'
+    AND ticket_id IN (SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids()))
+  );
+
+CREATE POLICY email_logs_select_cm ON email_logs
+  FOR SELECT
+  USING (
+    public.user_role() = 'customer_manager'
+    AND ticket_id IN (SELECT id FROM tickets WHERE company_id IN (SELECT public.user_company_ids()))
+  );
+
+-- ============================================================================
+-- 5. Fix single-admin constraint — allow multiple admins
+--    The partial unique index on role='admin' prevents ever having >1 admin.
+--    Replace with an advisory lock in the trigger for first-signup safety only.
+-- ============================================================================
+
+DROP INDEX IF EXISTS one_admin_profile;
+
+-- Update the trigger to use advisory lock for first-admin race protection
+CREATE OR REPLACE FUNCTION handle_new_user()
+RETURNS trigger
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  _profile_count int;
+  _invite record;
+  _user_name text;
+  _invite_token text;
+BEGIN
+  _user_name := COALESCE(
+    NEW.raw_user_meta_data ->> 'name',
+    split_part(NEW.email, '@', 1)
+  );
+
+  -- Advisory lock to prevent first-admin race condition
+  PERFORM pg_advisory_xact_lock(42);
+
+  SELECT count(*) INTO _profile_count FROM profiles;
+
+  IF _profile_count = 0 THEN
+    INSERT INTO profiles (user_id, name, role)
+    VALUES (NEW.id, _user_name, 'admin');
+    RETURN NEW;
+  END IF;
+
+  _invite_token := NEW.raw_user_meta_data ->> 'invite_token';
+
+  IF _invite_token IS NULL THEN
+    RAISE EXCEPTION 'No invite token provided during signup';
+  END IF;
+
+  SELECT * INTO _invite
+  FROM invites
+  WHERE email = NEW.email
+    AND token = _invite_token
+    AND used_at IS NULL
+    AND expires_at > now()
+  LIMIT 1;
+
+  IF _invite IS NULL THEN
+    RAISE EXCEPTION 'No valid invite found for % with the provided token', NEW.email;
+  END IF;
+
+  INSERT INTO profiles (user_id, name, role)
+  VALUES (NEW.id, _user_name, _invite.role);
+
+  INSERT INTO user_companies (user_id, company_id)
+  SELECT NEW.id, ic.company_id
+  FROM invite_companies ic
+  WHERE ic.invite_id = _invite.id;
+
+  UPDATE invites SET used_at = now() WHERE id = _invite.id;
+
+  RETURN NEW;
+END;
+$$;
+
+-- ============================================================================
+-- 6. Add missing index on tickets.assigned_agent_id
+-- ============================================================================
+
+CREATE INDEX IF NOT EXISTS idx_tickets_assigned_agent ON tickets(assigned_agent_id);
+
+COMMIT;
diff --git a/supabase/migrations/00006_fix_create_invite_empty_array.sql b/supabase/migrations/00006_fix_create_invite_empty_array.sql
new file mode 100644
index 0000000..a9ca0e1
--- /dev/null
+++ b/supabase/migrations/00006_fix_create_invite_empty_array.sql
@@ -0,0 +1,42 @@
+-- Fix: PostgREST cannot resolve empty JS array [] to uuid[].
+-- Adding a DEFAULT allows the frontend to omit p_company_ids when empty.
+
+DROP FUNCTION IF EXISTS public.create_invite(text, app_role, uuid[]);
+
+CREATE OR REPLACE FUNCTION public.create_invite(
+  p_email text,
+  p_role app_role,
+  p_company_ids uuid[] DEFAULT '{}'::uuid[]
+)
+RETURNS TABLE (invite_id uuid, token text)
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  _invite_id uuid;
+  _token text;
+  _user_id uuid;
+BEGIN
+  -- Only admins can create invites
+  IF public.user_role() <> 'admin' THEN
+    RAISE EXCEPTION 'Only admins can create invites';
+  END IF;
+
+  _user_id := auth.uid();
+  _token := encode(gen_random_bytes(32), 'hex');
+
+  INSERT INTO invites (email, role, token, invited_by, expires_at)
+  VALUES (p_email, p_role, _token, _user_id, now() + interval '7 days')
+  RETURNING id INTO _invite_id;
+
+  IF array_length(p_company_ids, 1) IS NOT NULL THEN
+    INSERT INTO invite_companies (invite_id, company_id)
+    SELECT _invite_id, unnest(p_company_ids);
+  END IF;
+
+  RETURN QUERY SELECT _invite_id, _token;
+END;
+$$;
+
+GRANT EXECUTE ON FUNCTION public.create_invite(text, app_role, uuid[]) TO authenticated;
diff --git a/supabase/migrations/00007_seed_auth_users.sql b/supabase/migrations/00007_seed_auth_users.sql
new file mode 100644
index 0000000..bcb2524
--- /dev/null
+++ b/supabase/migrations/00007_seed_auth_users.sql
@@ -0,0 +1,80 @@
+-- Seed auth users for local development only.
+-- All passwords: password123
+--
+-- We drop the trigger (owned by postgres) before inserting, then recreate it,
+-- to avoid invite token validation for seed users.
+
+DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
+
+INSERT INTO auth.users (
+  instance_id, id, aud, role, email, encrypted_password,
+  email_confirmed_at, created_at, updated_at,
+  raw_app_meta_data, raw_user_meta_data, is_super_admin,
+  confirmation_token, recovery_token, email_change_token_new,
+  email_change_token_current, email_change, email_change_confirm_status,
+  phone_change, phone_change_token, reauthentication_token,
+  is_sso_user, is_anonymous
+) VALUES
+  (
+    '00000000-0000-0000-0000-000000000000',
+    'a0000000-0000-0000-0000-000000000001',
+    'authenticated', 'authenticated',
+    'admin@serverdesk.local',
+    crypt('password123', gen_salt('bf')),
+    now(), now(), now(),
+    '{"provider":"email","providers":["email"]}'::jsonb,
+    '{"name":"Alice Martin"}'::jsonb,
+    false,
+    '', '', '', '', '', 0,
+    '', '', '',
+    false, false
+  ),
+  (
+    '00000000-0000-0000-0000-000000000000',
+    'a0000000-0000-0000-0000-000000000002',
+    'authenticated', 'authenticated',
+    'agent1@serverdesk.local',
+    crypt('password123', gen_salt('bf')),
+    now(), now(), now(),
+    '{"provider":"email","providers":["email"]}'::jsonb,
+    '{"name":"Bob Chen"}'::jsonb,
+    false,
+    '', '', '', '', '', 0,
+    '', '', '',
+    false, false
+  ),
+  (
+    '00000000-0000-0000-0000-000000000000',
+    'a0000000-0000-0000-0000-000000000003',
+    'authenticated', 'authenticated',
+    'agent2@serverdesk.local',
+    crypt('password123', gen_salt('bf')),
+    now(), now(), now(),
+    '{"provider":"email","providers":["email"]}'::jsonb,
+    '{"name":"Carol Reeves"}'::jsonb,
+    false,
+    '', '', '', '', '', 0,
+    '', '', '',
+    false, false
+  ),
+  (
+    '00000000-0000-0000-0000-000000000000',
+    'a0000000-0000-0000-0000-000000000004',
+    'authenticated', 'authenticated',
+    'cm@serverdesk.local',
+    crypt('password123', gen_salt('bf')),
+    now(), now(), now(),
+    '{"provider":"email","providers":["email"]}'::jsonb,
+    '{"name":"Diana Patel"}'::jsonb,
+    false,
+    '', '', '', '', '', 0,
+    '', '', '',
+    false, false
+  )
+ON CONFLICT (id) DO NOTHING;
+
+-- Recreate the trigger
+CREATE TRIGGER on_auth_user_created
+  AFTER INSERT ON auth.users
+  FOR EACH ROW
+  EXECUTE FUNCTION handle_new_user();
diff --git a/supabase/migrations/00008_enable_pgcrypto.sql b/supabase/migrations/00008_enable_pgcrypto.sql
new file mode 100644
index 0000000..68537df
--- /dev/null
+++ b/supabase/migrations/00008_enable_pgcrypto.sql
@@ -0,0 +1,39 @@
+-- Fix: gen_random_bytes() lives in the extensions schema (where pgcrypto is installed),
+-- but create_invite() had search_path = public, so the function was not found.
+-- Add extensions to the search_path so gen_random_bytes() resolves correctly.
+
+CREATE OR REPLACE FUNCTION public.create_invite(
+  p_email text,
+  p_role app_role,
+  p_company_ids uuid[] DEFAULT '{}'::uuid[]
+)
+RETURNS TABLE (invite_id uuid, token text)
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public, extensions
+AS $$
+DECLARE
+  _invite_id uuid;
+  _token text;
+  _user_id uuid;
+BEGIN
+  -- Only admins can create invites
+  IF public.user_role() <> 'admin' THEN
+    RAISE EXCEPTION 'Only admins can create invites';
+  END IF;
+
+  _user_id := auth.uid();
+  _token := encode(gen_random_bytes(32), 'hex');
+
+  INSERT INTO invites (email, role, token, invited_by, expires_at)
+  VALUES (p_email, p_role, _token, _user_id, now() + interval '7 days')
+  RETURNING id INTO _invite_id;
+
+  IF array_length(p_company_ids, 1) IS NOT NULL THEN
+    INSERT INTO invite_companies (invite_id, company_id)
+    SELECT _invite_id, unnest(p_company_ids);
+  END IF;
+
+  RETURN QUERY SELECT _invite_id, _token;
+END;
+$$;
diff --git a/supabase/seed.sql b/supabase/seed.sql
index c53c27c..7944403 100644
--- a/supabase/seed.sql
+++ b/supabase/seed.sql
@@ -1,2 +1,363 @@
--- Seed data for local development
--- Add seed data here as needed
+-- =============================================================================
+-- ServerDesk Seed Data for Local Development
+-- =============================================================================
+--
+-- This seed creates a realistic dataset for local development:
+--   - 4 auth users: 1 admin, 2 agents, 1 customer manager
+--   - 4 companies with domains
+--   - 8 customers spread across companies
+--   - 12 tickets with varied statuses/priorities
+--   - 30+ ticket messages with realistic support conversations
+--
+-- All passwords: password123
+-- All UUIDs are fixed for predictability.
+--
+-- Run with: supabase db reset (which applies migrations then seed)
+-- =============================================================================
+
+-- ---------------------------------------------------------------------------
+-- 0. Clean slate (idempotent) — delete in FK-safe order
+-- ---------------------------------------------------------------------------
+DELETE FROM ticket_messages;
+DELETE FROM tickets;
+DELETE FROM customers;
+DELETE FROM email_logs;
+DELETE FROM user_companies;
+DELETE FROM invite_companies;
+DELETE FROM invites;
+DELETE FROM profiles;
+DELETE FROM companies;
+
+-- ---------------------------------------------------------------------------
+-- 1. Auth users — created via supabase_auth_admin in a separate migration
+--    (00007_seed_auth_users.sql) because seed.sql cannot access auth schema.
+--    The profiles are created here since they live in the public schema.
+-- ---------------------------------------------------------------------------
+INSERT INTO profiles (user_id, name, role) VALUES
+  ('a0000000-0000-0000-0000-000000000001', 'Alice Martin',  'admin'),
+  ('a0000000-0000-0000-0000-000000000002', 'Bob Chen',      'agent'),
+  ('a0000000-0000-0000-0000-000000000003', 'Carol Reeves',  'agent'),
+  ('a0000000-0000-0000-0000-000000000004', 'Diana Patel',   'customer_manager');
+
+-- ---------------------------------------------------------------------------
+-- 5. Companies
+-- ---------------------------------------------------------------------------
+INSERT INTO companies (id, name, domain) VALUES
+  ('c0000000-0000-0000-0000-000000000001', 'Acme Corp',            'acmecorp.com'),
+  ('c0000000-0000-0000-0000-000000000002', 'TechNova Solutions',   'technova.io'),
+  ('c0000000-0000-0000-0000-000000000003', 'GlobalTrade Inc',      'globaltrade.com'),
+  ('c0000000-0000-0000-0000-000000000004', 'Pinnacle Media Group', 'pinnaclemedia.co');
+
+-- ---------------------------------------------------------------------------
+-- 6. User-company assignments
+--    - Agent 1 (Bob)   -> Acme Corp, TechNova Solutions
+--    - Agent 2 (Carol) -> GlobalTrade Inc
+--    - CM (Diana)      -> Acme Corp
+-- ---------------------------------------------------------------------------
+INSERT INTO user_companies (user_id, company_id) VALUES
+  ('a0000000-0000-0000-0000-000000000002', 'c0000000-0000-0000-0000-000000000001'), -- Bob -> Acme
+  ('a0000000-0000-0000-0000-000000000002', 'c0000000-0000-0000-0000-000000000002'), -- Bob -> TechNova
+  ('a0000000-0000-0000-0000-000000000003', 'c0000000-0000-0000-0000-000000000003'), -- Carol -> GlobalTrade
+  ('a0000000-0000-0000-0000-000000000004', 'c0000000-0000-0000-0000-000000000001'); -- Diana -> Acme
+
+-- ---------------------------------------------------------------------------
+-- 7. Customers
+-- ---------------------------------------------------------------------------
+INSERT INTO customers (id, email, name, company_id) VALUES
+  -- Acme Corp customers
+  ('d0000000-0000-0000-0000-000000000001', 'john.smith@acmecorp.com',       'John Smith',       'c0000000-0000-0000-0000-000000000001'),
+  ('d0000000-0000-0000-0000-000000000002', 'sarah.jones@acmecorp.com',      'Sarah Jones',      'c0000000-0000-0000-0000-000000000001'),
+  -- TechNova customers
+  ('d0000000-0000-0000-0000-000000000003', 'mike.lee@technova.io',          'Mike Lee',         'c0000000-0000-0000-0000-000000000002'),
+  ('d0000000-0000-0000-0000-000000000004', 'emma.wilson@technova.io',       'Emma Wilson',      'c0000000-0000-0000-0000-000000000002'),
+  ('d0000000-0000-0000-0000-000000000005', 'raj.kumar@technova.io',         'Raj Kumar',        'c0000000-0000-0000-0000-000000000002'),
+  -- GlobalTrade customers
+  ('d0000000-0000-0000-0000-000000000006', 'lisa.brown@globaltrade.com',    'Lisa Brown',       'c0000000-0000-0000-0000-000000000003'),
+  ('d0000000-0000-0000-0000-000000000007', 'tom.nguyen@globaltrade.com',    'Tom Nguyen',       'c0000000-0000-0000-0000-000000000003'),
+  -- Pinnacle Media customer (no agent assigned to this company yet)
+  ('d0000000-0000-0000-0000-000000000008', 'karen.davis@pinnaclemedia.co',  'Karen Davis',      'c0000000-0000-0000-0000-000000000004');
+
+-- ---------------------------------------------------------------------------
+-- 8. Tickets
+-- ---------------------------------------------------------------------------
+INSERT INTO tickets (id, subject, description, status, priority, customer_id, company_id, assigned_agent_id, created_at, updated_at) VALUES
+  -- Acme Corp tickets (agent: Bob)
+  ('e0000000-0000-0000-0000-000000000001',
+   'Cannot access production server',
+   'Getting a 502 Bad Gateway error when trying to reach our production environment at app.acmecorp.com.',
+   'in_progress', 'urgent',
+   'd0000000-0000-0000-0000-000000000001', 'c0000000-0000-0000-0000-000000000001',
+   'a0000000-0000-0000-0000-000000000002',
+   now() - interval '3 days', now() - interval '1 hour'),
+
+  ('e0000000-0000-0000-0000-000000000002',
+   'Billing discrepancy on March invoice',
+   'Our March invoice shows charges for 10 seats but we only have 7 active users.',
+   'open', 'high',
+   'd0000000-0000-0000-0000-000000000002', 'c0000000-0000-0000-0000-000000000001',
+   NULL,
+   now() - interval '1 day', now() - interval '1 day'),
+
+  ('e0000000-0000-0000-0000-000000000003',
+   'Request for additional storage space',
+   'We are running low on storage. Can we upgrade our plan from 100GB to 500GB?',
+   'resolved', 'medium',
+   'd0000000-0000-0000-0000-000000000001', 'c0000000-0000-0000-0000-000000000001',
+   'a0000000-0000-0000-0000-000000000002',
+   now() - interval '10 days', now() - interval '5 days'),
+
+  -- TechNova tickets (agent: Bob)
+  ('e0000000-0000-0000-0000-000000000004',
+   'SSL certificate expiring soon',
+   'Our SSL cert for api.technova.io expires in 5 days. Need it renewed ASAP.',
+   'in_progress', 'urgent',
+   'd0000000-0000-0000-0000-000000000003', 'c0000000-0000-0000-0000-000000000002',
+   'a0000000-0000-0000-0000-000000000002',
+   now() - interval '2 days', now() - interval '4 hours'),
+
+  ('e0000000-0000-0000-0000-000000000005',
+   'New user onboarding issues',
+   'Several new team members cannot complete the onboarding flow. They get stuck at the email verification step.',
+   'waiting', 'medium',
+   'd0000000-0000-0000-0000-000000000004', 'c0000000-0000-0000-0000-000000000002',
+   'a0000000-0000-0000-0000-000000000002',
+   now() - interval '4 days', now() - interval '2 days'),
+
+  ('e0000000-0000-0000-0000-000000000006',
+   'API rate limits too restrictive',
+   'We are hitting the 100 req/min rate limit during peak hours. Can this be increased?',
+   'open', 'low',
+   'd0000000-0000-0000-0000-000000000005', 'c0000000-0000-0000-0000-000000000002',
+   NULL,
+   now() - interval '6 hours', now() - interval '6 hours'),
+
+  ('e0000000-0000-0000-0000-000000000007',
+   'Database backup restoration request',
+   'We accidentally deleted some records from our production database. Need to restore from last night backup.',
+   'closed', 'urgent',
+   'd0000000-0000-0000-0000-000000000003', 'c0000000-0000-0000-0000-000000000002',
+   'a0000000-0000-0000-0000-000000000002',
+   now() - interval '14 days', now() - interval '12 days'),
+
+  -- GlobalTrade tickets (agent: Carol)
+  ('e0000000-0000-0000-0000-000000000008',
+   'VPN connection dropping frequently',
+   'Our team in the London office keeps losing VPN connectivity every 15-20 minutes.',
+   'in_progress', 'high',
+   'd0000000-0000-0000-0000-000000000006', 'c0000000-0000-0000-0000-000000000003',
+   'a0000000-0000-0000-0000-000000000003',
+   now() - interval '2 days', now() - interval '3 hours'),
+
+  ('e0000000-0000-0000-0000-000000000009',
+   'Need SFTP credentials for data exchange',
+   'We need SFTP access set up for our new EDI integration partner.',
+   'waiting', 'medium',
+   'd0000000-0000-0000-0000-000000000007', 'c0000000-0000-0000-0000-000000000003',
+   'a0000000-0000-0000-0000-000000000003',
+   now() - interval '5 days', now() - interval '3 days'),
+
+  ('e0000000-0000-0000-0000-000000000010',
+   'Monthly uptime report request',
+   'Can you provide us with the uptime report for Q1 2026?',
+   'resolved', 'low',
+   'd0000000-0000-0000-0000-000000000006', 'c0000000-0000-0000-0000-000000000003',
+   'a0000000-0000-0000-0000-000000000003',
+   now() - interval '8 days', now() - interval '6 days'),
+
+  -- Pinnacle Media tickets (no agent assigned to this company)
+  ('e0000000-0000-0000-0000-000000000011',
+   'Website loading very slowly',
+   'Our marketing site pinnaclemedia.co has been loading in 8+ seconds for the past two days.',
+   'open', 'high',
+   'd0000000-0000-0000-0000-000000000008', 'c0000000-0000-0000-0000-000000000004',
+   NULL,
+   now() - interval '1 day', now() - interval '1 day'),
+
+  ('e0000000-0000-0000-0000-000000000012',
+   'Email deliverability issues',
+   'Our transactional emails are landing in spam folders for Gmail users.',
+   'open', 'medium',
+   'd0000000-0000-0000-0000-000000000008', 'c0000000-0000-0000-0000-000000000004',
+   NULL,
+   now() - interval '12 hours', now() - interval '12 hours');
+
+-- ---------------------------------------------------------------------------
+-- 9. Ticket messages
+-- ---------------------------------------------------------------------------
+
+-- Ticket 1: Cannot access production server (in_progress, urgent)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000001', 'e0000000-0000-0000-0000-000000000001', 'customer',
+   'd0000000-0000-0000-0000-000000000001',
+   'Hi, we have been getting 502 Bad Gateway errors on app.acmecorp.com since about 6 AM this morning. None of our team can access the application. This is blocking all of our work.',
+   now() - interval '3 days'),
+  ('f0000000-0000-0000-0000-000000000002', 'e0000000-0000-0000-0000-000000000001', 'system',
+   NULL,
+   'Ticket created and assigned to Bob Chen.',
+   now() - interval '3 days' + interval '1 minute'),
+  ('f0000000-0000-0000-0000-000000000003', 'e0000000-0000-0000-0000-000000000001', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Hi John, I can see the issue on our monitoring dashboard. It looks like the upstream application server ran out of memory and crashed. I am restarting the service now and will investigate the root cause.',
+   now() - interval '3 days' + interval '20 minutes'),
+  ('f0000000-0000-0000-0000-000000000004', 'e0000000-0000-0000-0000-000000000001', 'customer',
+   'd0000000-0000-0000-0000-000000000001',
+   'Thanks Bob. The site is loading again but it feels slower than usual. Is that expected?',
+   now() - interval '3 days' + interval '45 minutes'),
+  ('f0000000-0000-0000-0000-000000000005', 'e0000000-0000-0000-0000-000000000001', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Yes, the application is still warming up its caches. Performance should return to normal within the next hour. I am also adding extra memory to the instance to prevent this from happening again. I will keep this ticket open until we confirm stability.',
+   now() - interval '3 days' + interval '1 hour');
+
+-- Ticket 2: Billing discrepancy (open, high)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000006', 'e0000000-0000-0000-0000-000000000002', 'customer',
+   'd0000000-0000-0000-0000-000000000002',
+   'Hello, I just reviewed our March invoice and noticed we are being charged for 10 seats at $50/seat, but we only have 7 active users. Could you please look into this? Our account ID is ACME-2024-001.',
+   now() - interval '1 day'),
+  ('f0000000-0000-0000-0000-000000000007', 'e0000000-0000-0000-0000-000000000002', 'system',
+   NULL,
+   'Ticket created. Awaiting agent assignment.',
+   now() - interval '1 day' + interval '1 minute');
+
+-- Ticket 3: Request for additional storage (resolved)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000008', 'e0000000-0000-0000-0000-000000000003', 'customer',
+   'd0000000-0000-0000-0000-000000000001',
+   'We are at 92% of our 100GB storage quota. Could you upgrade us to the 500GB tier?',
+   now() - interval '10 days'),
+  ('f0000000-0000-0000-0000-000000000009', 'e0000000-0000-0000-0000-000000000003', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Hi John, I have submitted the upgrade request. The storage increase should take effect within 2 hours. Your new quota will be 500GB at the Pro tier rate. You will see the prorated charge on your next invoice.',
+   now() - interval '10 days' + interval '3 hours'),
+  ('f0000000-0000-0000-0000-000000000010', 'e0000000-0000-0000-0000-000000000003', 'customer',
+   'd0000000-0000-0000-0000-000000000001',
+   'I can confirm the storage now shows 500GB. Thank you for the quick turnaround!',
+   now() - interval '9 days'),
+  ('f0000000-0000-0000-0000-000000000011', 'e0000000-0000-0000-0000-000000000003', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Great to hear. Marking this as resolved. Feel free to reopen if you need anything else.',
+   now() - interval '9 days' + interval '2 hours');
+
+-- Ticket 4: SSL certificate expiring (in_progress, urgent)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000012', 'e0000000-0000-0000-0000-000000000004', 'customer',
+   'd0000000-0000-0000-0000-000000000003',
+   'Our monitoring flagged that the SSL certificate for api.technova.io expires on April 12th. Can you renew it before then? We cannot afford any downtime on our API.',
+   now() - interval '2 days'),
+  ('f0000000-0000-0000-0000-000000000013', 'e0000000-0000-0000-0000-000000000004', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Hi Mike, thanks for the heads up. I have initiated the certificate renewal process. I need to verify domain ownership first. Could you confirm that you can add a CNAME record to your DNS? I will send the details shortly.',
+   now() - interval '2 days' + interval '1 hour'),
+  ('f0000000-0000-0000-0000-000000000014', 'e0000000-0000-0000-0000-000000000004', 'customer',
+   'd0000000-0000-0000-0000-000000000003',
+   'Yes, I have access to our DNS management. Please send the CNAME details and I will add it right away.',
+   now() - interval '2 days' + interval '2 hours');
+
+-- Ticket 5: New user onboarding issues (waiting)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000015', 'e0000000-0000-0000-0000-000000000005', 'customer',
+   'd0000000-0000-0000-0000-000000000004',
+   'We just hired 5 new engineers and none of them can complete the signup process. They all get stuck after entering their email - the verification email never arrives. We checked spam folders too.',
+   now() - interval '4 days'),
+  ('f0000000-0000-0000-0000-000000000016', 'e0000000-0000-0000-0000-000000000005', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Hi Emma, I checked the email logs and it appears the verification emails are being sent but bounced by your mail server. Could you check with your IT team if they have whitelisted our sending domain noreply@serverdesk.io? In the meantime, I can manually verify the accounts if you send me the list of email addresses.',
+   now() - interval '4 days' + interval '4 hours'),
+  ('f0000000-0000-0000-0000-000000000017', 'e0000000-0000-0000-0000-000000000005', 'customer',
+   'd0000000-0000-0000-0000-000000000004',
+   'I have passed this to our IT team. They are looking into the whitelisting. I will get back to you once they confirm.',
+   now() - interval '3 days');
+
+-- Ticket 6: API rate limits (open, low)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000018', 'e0000000-0000-0000-0000-000000000006', 'customer',
+   'd0000000-0000-0000-0000-000000000005',
+   'We are consistently hitting the 100 requests/minute rate limit between 9-11 AM when our batch processing jobs run. Is it possible to increase this to 500 req/min? We are on the Business plan.',
+   now() - interval '6 hours');
+
+-- Ticket 7: Database backup restoration (closed)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000019', 'e0000000-0000-0000-0000-000000000007', 'customer',
+   'd0000000-0000-0000-0000-000000000003',
+   'URGENT: One of our developers accidentally ran a DELETE without a WHERE clause on the orders table. We need to restore from the most recent backup immediately.',
+   now() - interval '14 days'),
+  ('f0000000-0000-0000-0000-000000000020', 'e0000000-0000-0000-0000-000000000007', 'system',
+   NULL,
+   'Ticket created with urgent priority and assigned to Bob Chen.',
+   now() - interval '14 days' + interval '1 minute'),
+  ('f0000000-0000-0000-0000-000000000021', 'e0000000-0000-0000-0000-000000000007', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Mike, I am on this right now. I can see the last successful backup was at 2:00 AM today. I am starting the point-in-time recovery to restore the orders table to its state at 1:59 AM. This should take about 30 minutes. I will restore to a staging environment first so you can verify before we push to production.',
+   now() - interval '14 days' + interval '15 minutes'),
+  ('f0000000-0000-0000-0000-000000000022', 'e0000000-0000-0000-0000-000000000007', 'customer',
+   'd0000000-0000-0000-0000-000000000003',
+   'We verified the staging restore and everything looks correct. Please go ahead and push to production.',
+   now() - interval '14 days' + interval '2 hours'),
+  ('f0000000-0000-0000-0000-000000000023', 'e0000000-0000-0000-0000-000000000007', 'agent',
+   'a0000000-0000-0000-0000-000000000002',
+   'Production restore is complete. All 14,832 records have been recovered. I strongly recommend implementing a database access control policy to prevent direct DELETE operations without approval. Happy to help set that up if you are interested. Closing this ticket.',
+   now() - interval '14 days' + interval '3 hours');
+
+-- Ticket 8: VPN connection dropping (in_progress, high)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000024', 'e0000000-0000-0000-0000-000000000008', 'customer',
+   'd0000000-0000-0000-0000-000000000006',
+   'Our London office team (about 20 people) has been experiencing VPN disconnections every 15-20 minutes since Monday. The New York office is unaffected. We are using the GlobalTrade VPN client v3.2.',
+   now() - interval '2 days'),
+  ('f0000000-0000-0000-0000-000000000025', 'e0000000-0000-0000-0000-000000000008', 'agent',
+   'a0000000-0000-0000-0000-000000000003',
+   'Hi Lisa, thank you for the details. I am seeing elevated packet loss on the London VPN gateway. It looks like the issue started after a firmware update on Monday. I am rolling back the gateway firmware now and will monitor the connection stability.',
+   now() - interval '2 days' + interval '2 hours'),
+  ('f0000000-0000-0000-0000-000000000026', 'e0000000-0000-0000-0000-000000000008', 'customer',
+   'd0000000-0000-0000-0000-000000000006',
+   'Thanks Carol. The disconnections seem less frequent now but still happening occasionally. It went from every 15 minutes to about once per hour.',
+   now() - interval '1 day');
+
+-- Ticket 9: SFTP credentials (waiting)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000027', 'e0000000-0000-0000-0000-000000000009', 'customer',
+   'd0000000-0000-0000-0000-000000000007',
+   'We have a new EDI partner (Logistics Plus) that needs SFTP access to exchange shipping data files. They need read/write access to a dedicated directory. Their IP range for whitelisting is 203.0.113.0/24.',
+   now() - interval '5 days'),
+  ('f0000000-0000-0000-0000-000000000028', 'e0000000-0000-0000-0000-000000000009', 'agent',
+   'a0000000-0000-0000-0000-000000000003',
+   'Hi Tom, I have created the SFTP account and directory. Before I can share the credentials, I need a signed data processing agreement from Logistics Plus. Could you have them fill out the DPA form I am attaching and send it back?',
+   now() - interval '5 days' + interval '5 hours'),
+  ('f0000000-0000-0000-0000-000000000029', 'e0000000-0000-0000-0000-000000000009', 'customer',
+   'd0000000-0000-0000-0000-000000000007',
+   'I have forwarded the DPA form to our contact at Logistics Plus. They said it will take 2-3 business days to get it signed by their legal team.',
+   now() - interval '4 days');
+
+-- Ticket 10: Monthly uptime report (resolved)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000030', 'e0000000-0000-0000-0000-000000000010', 'customer',
+   'd0000000-0000-0000-0000-000000000006',
+   'Hi, per our SLA we need to receive a quarterly uptime report. Could you send us the Q1 2026 report for all our services?',
+   now() - interval '8 days'),
+  ('f0000000-0000-0000-0000-000000000031', 'e0000000-0000-0000-0000-000000000010', 'agent',
+   'a0000000-0000-0000-0000-000000000003',
+   'Hi Lisa, here is your Q1 2026 uptime summary: Web Services 99.97%, API Gateway 99.99%, VPN 99.82%, Email Services 99.95%. The detailed PDF report has been sent to your admin email. The VPN dip was due to the scheduled maintenance window in February.',
+   now() - interval '7 days'),
+  ('f0000000-0000-0000-0000-000000000032', 'e0000000-0000-0000-0000-000000000010', 'customer',
+   'd0000000-0000-0000-0000-000000000006',
+   'Received, thank you. The numbers look good. We are satisfied with the SLA compliance.',
+   now() - interval '6 days');
+
+-- Ticket 11: Website loading slowly (open, high)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000033', 'e0000000-0000-0000-0000-000000000011', 'customer',
+   'd0000000-0000-0000-0000-000000000008',
+   'Our marketing website pinnaclemedia.co has been extremely slow for the past 2 days. Page load times are averaging 8-10 seconds according to our Google Analytics. Before this it was consistently under 2 seconds. We have not made any changes on our end.',
+   now() - interval '1 day'),
+  ('f0000000-0000-0000-0000-000000000034', 'e0000000-0000-0000-0000-000000000011', 'system',
+   NULL,
+   'Ticket created. No agents are currently assigned to Pinnacle Media Group.',
+   now() - interval '1 day' + interval '1 minute');
+
+-- Ticket 12: Email deliverability (open, medium)
+INSERT INTO ticket_messages (id, ticket_id, sender_type, sender_id, body, created_at) VALUES
+  ('f0000000-0000-0000-0000-000000000035', 'e0000000-0000-0000-0000-000000000012', 'customer',
+   'd0000000-0000-0000-0000-000000000008',
+   'We have been getting reports from our clients that our transactional emails (order confirmations, password resets) are going to spam in Gmail. This started about a week ago. Our SPF and DKIM records have not changed. Could you investigate?',
+   now() - interval '12 hours');
+
diff --git a/tests/e2e/auth.spec.ts b/tests/e2e/auth.spec.ts
new file mode 100644
index 0000000..d14165c
--- /dev/null
+++ b/tests/e2e/auth.spec.ts
@@ -0,0 +1,58 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Authentication flows", () => {
+  test("shows login page with form fields", async ({ page }) => {
+    await page.goto("/login");
+
+    await expect(page.getByText(/sign in to serverdesk/i)).toBeVisible();
+    await expect(page.getByLabel("Email")).toBeVisible();
+    await expect(page.getByLabel("Password")).toBeVisible();
+    await expect(page.getByRole("button", { name: /sign in/i })).toBeVisible();
+  });
+
+  test("shows validation errors on empty login submit", async ({ page }) => {
+    await page.goto("/login");
+
+    await page.getByRole("button", { name: /sign in/i }).click();
+
+    // Form validation should prevent submission with empty fields
+    await expect(page.getByLabel("Email")).toBeFocused();
+  });
+
+  test("shows signup page for first admin", async ({ page }) => {
+    await page.goto("/signup");
+
+    await expect(page.getByText(/create admin account/i)).toBeVisible();
+    await expect(page.getByLabel("Email")).toBeVisible();
+    await expect(page.getByLabel("Name")).toBeVisible();
+    await expect(page.getByLabel("Password")).toBeVisible();
+  });
+
+  test("shows invite signup page with token", async ({ page }) => {
+    await page.goto("/signup/test-token-123");
+
+    // Should show validating state initially
+    await expect(
+      page.getByText(/validating invite/i).or(
+        page.getByText(/invalid|expired/i),
+      ),
+    ).toBeVisible();
+  });
+
+  test("redirects unauthenticated user to login", async ({ page }) => {
+    await page.goto("/");
+
+    // ProtectedRoute should redirect to /login
+    await page.waitForURL("**/login");
+    await expect(page).toHaveURL(/\/login/);
+  });
+
+  test("redirects unauthenticated user from /companies to login", async ({
+    page,
+  }) => {
+    await page.goto("/companies");
+
+    await page.waitForURL("**/login");
+    await expect(page).toHaveURL(/\/login/);
+  });
+});
diff --git a/tests/e2e/invite-agent.spec.ts b/tests/e2e/invite-agent.spec.ts
new file mode 100644
index 0000000..473b23c
--- /dev/null
+++ b/tests/e2e/invite-agent.spec.ts
@@ -0,0 +1,99 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Invite agent flow", () => {
+  test.beforeEach(async ({ page }) => {
+    // Log in as admin
+    await page.goto("/login");
+    await page.getByLabel("Email").fill("admin@serverdesk.local");
+    await page.getByLabel("Password").fill("password123");
+    await page.getByRole("button", { name: /sign in/i }).click();
+
+    // Wait for redirect to authenticated area
+    await page.waitForURL("**/");
+    await expect(page.getByText("admin@serverdesk.local")).toBeVisible({
+      timeout: 10000,
+    });
+  });
+
+  test("admin can navigate to agents page", async ({ page }) => {
+    await page.getByRole("link", { name: "Agents" }).click();
+    await page.waitForURL("**/agents");
+    await expect(
+      page.getByRole("heading", { name: /agents/i }),
+    ).toBeVisible();
+  });
+
+  test("admin can open invite agent dialog and generate invite link", async ({
+    page,
+  }) => {
+    await page.getByRole("link", { name: "Agents" }).click();
+    await page.waitForURL("**/agents");
+
+    // Open invite dialog
+    await page.getByRole("button", { name: /invite agent/i }).click();
+    await expect(
+      page.getByRole("heading", { name: /invite agent/i }),
+    ).toBeVisible();
+
+    // Fill in email
+    await page.getByLabel("Email address").fill("newagent@example.com");
+
+    // Submit the form
+    await page.getByRole("button", { name: /generate invite link/i }).click();
+
+    // Should show the invite link (proves gen_random_bytes works)
+    await expect(page.getByText(/share this link/i)).toBeVisible({
+      timeout: 10000,
+    });
+    const linkInput = page.getByRole("textbox");
+    await expect(linkInput).toHaveValue(/\/signup\/.+/);
+  });
+
+  test("generated invite link leads to a valid signup page", async ({
+    page,
+  }) => {
+    await page.getByRole("link", { name: "Agents" }).click();
+    await page.waitForURL("**/agents");
+
+    // Create an invite
+    await page.getByRole("button", { name: /invite agent/i }).click();
+    await page.getByLabel("Email address").fill("agenttest@example.com");
+    await page.getByRole("button", { name: /generate invite link/i }).click();
+
+    await expect(page.getByText(/share this link/i)).toBeVisible({
+      timeout: 10000,
+    });
+
+    // Extract the invite link
+    const linkInput = page.getByRole("textbox");
+    const inviteLink = await linkInput.inputValue();
+
+    // Sign out first
+    await page.getByRole("button", { name: /done/i }).click();
+    await page.getByRole("button", { name: /sign out/i }).click();
+    await page.waitForURL("**/login");
+
+    // Navigate to the invite link
+    const url = new URL(inviteLink);
+    await page.goto(url.pathname);
+
+    // Should show the signup form with email pre-filled
+    await expect(page.getByLabel("Email")).toHaveValue("agenttest@example.com", {
+      timeout: 10000,
+    });
+    await expect(page.getByLabel("Email")).toHaveAttribute("readonly", "");
+  });
+
+  test("invite shows error in dialog on failure", async ({ page }) => {
+    await page.getByRole("link", { name: "Agents" }).click();
+    await page.waitForURL("**/agents");
+
+    // Open dialog but submit with empty email should show validation error
+    await page.getByRole("button", { name: /invite agent/i }).click();
+    await page.getByRole("button", { name: /generate invite link/i }).click();
+
+    await expect(
+      page.getByText(/valid email/i),
+    ).toBeVisible();
+  });
+});
diff --git a/tests/e2e/navigation.spec.ts b/tests/e2e/navigation.spec.ts
new file mode 100644
index 0000000..8cd4fad
--- /dev/null
+++ b/tests/e2e/navigation.spec.ts
@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Navigation and routing", () => {
+  test("app loads with correct title", async ({ page }) => {
+    await page.goto("/");
+    await expect(page).toHaveTitle(/ServerDesk/);
+  });
+
+  test("login page is accessible", async ({ page }) => {
+    await page.goto("/login");
+    await expect(page.getByText(/sign in to serverdesk/i)).toBeVisible();
+  });
+
+  test("signup page is accessible", async ({ page }) => {
+    await page.goto("/signup");
+    await expect(page.getByText(/create admin account/i)).toBeVisible();
+  });
+
+  test("login form shows error for invalid credentials", async ({ page }) => {
+    await page.goto("/login");
+
+    await page.getByLabel("Email").fill("nonexistent@test.com");
+    await page.getByLabel("Password").fill("wrongpassword");
+    await page.getByRole("button", { name: /sign in/i }).click();
+
+    // Should show an error message (Supabase will return invalid credentials)
+    await expect(
+      page.getByText(/invalid|error|failed/i),
+    ).toBeVisible({ timeout: 10000 });
+  });
+
+  test("signup form validates required fields", async ({ page }) => {
+    await page.goto("/signup");
+
+    // Try to submit with only email filled (missing name and password)
+    await page.getByLabel("Email").fill("test@example.com");
+    await page.getByRole("button", { name: /create account/i }).click();
+
+    // Should show validation errors for missing fields
+    await expect(page.getByText(/name is required/i)).toBeVisible();
+  });
+});