red/.planning/phases/03-agent-portal-shell/03-CONTEXT.md

Phase 3: Agent Portal Shell - Context

Gathered: 2026-03-19 Status: Ready for planning

## Phase Boundary

Private authenticated area where Teressa manages clients (create, list, view profiles, edit, delete) and monitors all documents with their current status from a central dashboard. This phase builds the shell and client data model. Real documents are added in Phase 4 — placeholder data is seeded in this phase so the UI looks populated.

## Implementation Decisions

Portal Navigation

• Top nav (horizontal nav bar) — not sidebar
• Agent lands on Dashboard after login
• All portal routes live under a /portal prefix (e.g., /portal/dashboard, /portal/clients, /portal/clients/[id])
• Visual feel: same brand as marketing site (shared colors/fonts) but cleaner and more utilitarian — clearly a logged-in app, not a marketing page

Client List Design

• Card grid layout (not table/list)
• Each card shows: client name, email, document count, last activity date
• New client created via modal/dialog triggered from the client list page (not a separate page)
• Empty state: friendly message ("No clients yet") with a prominent "+ Add your first client" CTA button

Dashboard Document View

• Table layout with color-coded status badges: Draft=gray, Sent=blue, Viewed=amber/yellow, Signed=green
• Columns: Document name, Client, Status badge, Date sent
• Controls: filter by status (dropdown) + sort by date (most recent first)
• Phase 3 seeds a few placeholder document rows (real documents arrive in Phase 4)
• Empty state not needed since data is seeded

Client Profile Page

• Two-section layout: client details header (name, email, edit button) above a documents table
• Back link to Clients list
• Edit client: modal/dialog (consistent with create pattern) — no inline editing
• Documents section: same table style as dashboard (doc name, status badge, date)
• Delete client: delete button on profile with confirmation dialog before removing

Claude's Discretion

• Exact card dimensions and spacing on client grid
• Color palette values for status badges (within brand colors)
• Skeleton/loading states
• Exact wording for empty states and confirmation dialogs
• Mobile responsiveness details

## Specific Ideas

• Portal nav should feel like a real web app (not the marketing site) — utilitarian, clean
• Consistent modal pattern for both create and edit client (same component, different mode)
• Dashboard is the post-login landing page — it should feel like "command central"

## Deferred Ideas

• None — discussion stayed within phase scope

---

Phase: 03-agent-portal-shell Context gathered: 2026-03-19