---
phase: 03-tablos-crud
plan: 02
type: execute
wave: 2
depends_on: [01]
files_modified:
  - backend/internal/web/handlers_tablos.go
  - backend/templates/tablos.templ
  - backend/templates/tablos_templ.go
  - backend/templates/layout.templ
  - backend/templates/layout_templ.go
  - backend/templates/index.templ
  - backend/templates/index_templ.go
  - backend/internal/web/handlers.go
  - backend/internal/web/router.go
  - backend/cmd/web/main.go
autonomous: true
requirements:
  - TABLO-01
  - TABLO-02
  - TABLO-06
tags:
  - go
  - htmx
  - templ
  - chi
  - csrf

must_haves:
  truths:
    - "Signed-in user visiting GET / sees a dashboard titled 'Your Tablos' listing only their tablos newest-first"
    - "Empty state renders 'No tablos yet' + 'Create your first tablo to get started.' when user has zero tablos"
    - "Clicking 'New tablo' fetches an inline form into #create-form-slot via hx-get /tablos/new"
    - "Submitting a valid POST /tablos via HTMX inserts the row, returns 200 with HX-Retarget: #tablos-list + HX-Reswap: afterbegin, prepends a new TabloCard, and clears #create-form-slot via OOB swap"
    - "Submitting POST /tablos without HTMX inserts the row and 303-redirects to /"
    - "Empty-title POST returns 422 with 'Title is required.' field error"
  artifacts:
    - path: "backend/internal/web/handlers_tablos.go"
      provides: "TablosDeps, TablosListHandler, TablosNewHandler, TablosCreateHandler"
      contains: "TablosCreateHandler"
    - path: "backend/templates/tablos.templ"
      provides: "TablosDashboard, TablosEmptyState, TabloCard, TabloCreateFormFragment, TabloCardWithOOBFormClear"
      contains: "TabloCardWithOOBFormClear"
    - path: "backend/internal/web/router.go"
      provides: "GET / → TablosListHandler, GET /tablos/new, POST /tablos route registration"
      contains: "TablosListHandler"
    - path: "backend/cmd/web/main.go"
      provides: "Construct TablosDeps and pass to NewRouter"
      contains: "TablosDeps{Queries: q}"
  key_links:
    - from: "backend/internal/web/router.go"
      to: "TablosCreateHandler"
      via: "r.Post(\"/tablos\", ...)"
      pattern: "r\\.Post\\(\"/tablos\""
    - from: "backend/templates/tablos.templ"
      to: "ui.CSRFField"
      via: "@ui.CSRFField(csrfToken) inside create form"
      pattern: "ui\\.CSRFField"
    - from: "TablosCreateHandler"
      to: "Queries.InsertTablo"
      via: "sqlc binding"
      pattern: "InsertTablo"
---

<objective>
First vertical slice of Phase 3: a signed-in user can SEE their tablos on the dashboard and CREATE a new tablo end-to-end via HTMX, with a graceful non-JS POST fallback. Turns TestTabloList, TestTabloList_Empty, TestTabloCreate, TestTabloCreate_Validation green (TABLO-01, TABLO-02, TABLO-06 partially).

Purpose: Deliver real user-visible value as the first slice — the dashboard renders, the create flow works, and the user can see a brand-new tablo appear without a full reload.

Output:
- handlers_tablos.go with TablosDeps + List/New/Create handlers
- tablos.templ with dashboard page, empty state, card, create form, OOB-clear template
- router.go updated: replace IndexHandler with TablosListHandler; mount /tablos/new and /tablos
- main.go constructs TablosDeps
- layout.templ footer "Phase 3 · Tablos"
- index.templ + IndexHandler removed (or emptied) — dashboard now lives in tablos.templ
</objective>

<execution_context>
@/Users/arthur.belleville/Documents/perso/projects/xtablo-source/.claude/get-shit-done/workflows/execute-plan.md
@/Users/arthur.belleville/Documents/perso/projects/xtablo-source/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/STATE.md
@.planning/phases/03-tablos-crud/03-CONTEXT.md
@.planning/phases/03-tablos-crud/03-RESEARCH.md
@.planning/phases/03-tablos-crud/03-PATTERNS.md
@.planning/phases/03-tablos-crud/03-UI-SPEC.md
@.planning/phases/03-tablos-crud/03-01-SUMMARY.md
@backend/internal/web/handlers_auth.go
@backend/internal/web/router.go
@backend/cmd/web/main.go
@backend/templates/auth_signup.templ
@backend/templates/index.templ
@backend/templates/layout.templ
@backend/internal/web/ui/button.templ
@backend/internal/web/ui/card.templ
@backend/internal/web/ui/variants.go
@backend/internal/db/sqlc/tablos.sql.go

<interfaces>
<!-- Contracts this plan establishes for Plan 03 -->

TablosDeps (declared in backend/internal/web/handlers_tablos.go):
- Queries *sqlc.Queries

Handler constructors (signature pattern matches AuthDeps):
- TablosListHandler(deps TablosDeps) http.HandlerFunc      → GET /
- TablosNewHandler(deps TablosDeps) http.HandlerFunc       → GET /tablos/new  (returns TabloCreateFormFragment)
- TablosCreateHandler(deps TablosDeps) http.HandlerFunc    → POST /tablos

NewRouter new signature (replaces existing):
  func NewRouter(pinger Pinger, staticDir string, deps AuthDeps, tabloDeps TablosDeps, csrfKey []byte, env string, trustedOrigins ...string) http.Handler

Templates (callable by Plan 03):
- TablosDashboard(user *auth.User, csrfToken string, tablos []sqlc.Tablo) — full page
- TablosEmptyState() — empty list state
- TabloCard(t sqlc.Tablo, csrfToken string) — single card on dashboard; wraps in ui.Card with class "tablo-delete-zone" on delete button container
- TabloCreateFormFragment(form TabloCreateForm, errs TabloCreateErrors, csrfToken string) — inline create form
- TabloCardWithOOBFormClear(t sqlc.Tablo, csrfToken string) — card + OOB div clearing #create-form-slot

Form types (declared in backend/templates/tablos.templ or a sibling tablos_forms.go file, mirroring auth_forms.go):
- TabloCreateForm { Title, Description, Color string }
- TabloCreateErrors { Title, General string }
</interfaces>
</context>

<tasks>

<task type="auto" tdd="true">
  <name>Task 1: tablos.templ — dashboard, empty state, card, create form, OOB-clear (+ generate)</name>
  <files>backend/templates/tablos.templ, backend/templates/tablos_templ.go, backend/templates/tablos_forms.go, backend/templates/layout.templ, backend/templates/layout_templ.go</files>
  <read_first>
    backend/templates/auth_signup.templ
    backend/templates/auth_forms.go
    backend/templates/auth_form_errors.templ
    backend/templates/index.templ
    backend/templates/layout.templ
    backend/internal/web/ui/card.templ
    backend/internal/web/ui/button.templ
    backend/internal/web/ui/variants.go
    backend/internal/web/ui/csrf_field.templ
    backend/internal/db/sqlc/models.go (Tablo struct)
    .planning/phases/03-tablos-crud/03-UI-SPEC.md (Component Inventory, Interaction Contracts §1+§2, Copywriting Contract)
    .planning/phases/03-tablos-crud/03-PATTERNS.md (tablos.templ analog block + OOB swap template shape)
    .planning/phases/03-tablos-crud/03-RESEARCH.md (Pattern 4 dual-target swap, Pitfall 5 top-level OOB)
  </read_first>
  <behavior>
    - TablosDashboard renders inside @Layout("Tablos — Xtablo", user, csrfToken).
    - Page heading "Your Tablos" using `text-[28px] font-semibold leading-tight` per UI-SPEC Typography.
    - "New tablo" button (ui.ButtonVariantDefault, ui.ButtonToneSolid, ui.SizeMD, Type "button") fires hx-get="/tablos/new", hx-target="#create-form-slot", hx-swap="innerHTML".
    - `<div id="create-form-slot"></div>` rendered above `<div id="tablos-list">`.
    - When tablos slice is empty → @TablosEmptyState() rendered inside #tablos-list.
    - Empty state copy exactly: heading "No tablos yet", body "Create your first tablo to get started.", CTA button "New tablo" with aria-label "Create your first tablo" and same hx-get="/tablos/new" attrs.
    - TabloCard renders inside @ui.Card with: title (Heading style `text-xl font-semibold leading-snug`), optional description paragraph only when `tablo.Description.Valid && tablo.Description.String != ""` (Pitfall 6), optional color dot (only when `tablo.Color.Valid && tablo.Color.String != ""`) using `inline-block w-2.5 h-2.5 rounded-full` with inline `style="background-color: {tablo.Color.String}"`, link "View" to `/tablos/{id}`, and a `.tablo-delete-zone` wrapper containing the Delete button. (Plan 03 wires delete-confirm; Plan 02 just needs the zone div + a Delete button stub.)
    - TabloCreateFormFragment renders a `<form id="create-form" method="POST" action="/tablos" hx-post="/tablos" hx-target="#create-form-slot" hx-swap="innerHTML">` with @ui.CSRFField(csrfToken), @GeneralError(errs.General), labelled Title input (required), Description textarea (3 rows, optional), Color text input (placeholder "#6366f1 or indigo", optional), submit button "Create tablo", cancel link/button that fires `hx-get="/tablos/new/cancel"` OR simpler: clears the slot via hx-get to an endpoint that returns empty — for Phase 02 use a "Cancel" button with `hx-on:click` not allowed (no JS); use a plain anchor `<a href="/">Cancel</a>` that reloads / and resets the slot.
    - Field error rendering uses @FieldError(errs.Title) directly under the Title input.
    - TabloCardWithOOBFormClear renders @TabloCard(...) as the primary card AND a top-level sibling `<div id="create-form-slot" hx-swap-oob="true"></div>` (must be siblings, not nested per Pitfall 5).
    - layout.templ footer changes from "Phase 2 · Authentication" to "Phase 3 · Tablos".
  </behavior>
  <action>
    Create backend/templates/tablos.templ (package templates) and a sibling backend/templates/tablos_forms.go declaring `type TabloCreateForm struct { Title, Description, Color string }` and `type TabloCreateErrors struct { Title, General string }` (mirrors auth_forms.go).

    Implement these templ components per the behavior block:
    - TablosDashboard(user *auth.User, csrfToken string, tablos []sqlc.Tablo)
    - TablosEmptyState()
    - TabloCard(t sqlc.Tablo, csrfToken string)  — include `<div class="tablo-delete-zone">` wrapper around the Delete button. The Delete button for now uses `hx-get="/tablos/{id}/delete-confirm"`, `hx-target="closest .tablo-delete-zone"`, `hx-swap="outerHTML"`, Variant ButtonVariantDanger, Tone ButtonToneSoft, Size SizeMD, Type "button". Plan 03 implements /delete-confirm.
    - TabloCreateFormFragment(form TabloCreateForm, errs TabloCreateErrors, csrfToken string)
    - TabloCardWithOOBFormClear(t sqlc.Tablo, csrfToken string)  — emit @TabloCard then a `<div id="create-form-slot" hx-swap-oob="true"></div>` as TOP-LEVEL siblings inside the template body (no wrapping container).

    Imports in tablos.templ: "backend/internal/auth", "backend/internal/db/sqlc", "backend/internal/web/ui". Use `{ tablo.Title }`, `{ tablo.Description.String }`, etc. — templ auto-escapes (V5 XSS).

    Modify backend/templates/layout.templ footer text from "Phase 2 · Authentication" → "Phase 3 · Tablos". No other layout edits.

    Run `just generate` (or `templ generate`) to produce tablos_templ.go and the updated layout_templ.go. Pitfall 3.
  </action>
  <verify>
    <automated>cd backend && just generate && grep -q "templ TablosDashboard" templates/tablos.templ && grep -q "templ TablosEmptyState" templates/tablos.templ && grep -q "templ TabloCard" templates/tablos.templ && grep -q "templ TabloCreateFormFragment" templates/tablos.templ && grep -q "templ TabloCardWithOOBFormClear" templates/tablos.templ && grep -q "id=\"create-form-slot\" hx-swap-oob=\"true\"" templates/tablos.templ && grep -q "Phase 3 · Tablos" templates/layout.templ && grep -q "Create your first tablo to get started." templates/tablos.templ && grep -q "No tablos yet" templates/tablos.templ && grep -q "tablo-delete-zone" templates/tablos.templ && grep -q "type TabloCreateForm" templates/tablos_forms.go && go build ./...</automated>
  </verify>
  <acceptance_criteria>
    - File backend/templates/tablos.templ exists with `package templates` and imports "backend/internal/auth", "backend/internal/db/sqlc", "backend/internal/web/ui".
    - File contains the strings: `templ TablosDashboard`, `templ TablosEmptyState`, `templ TabloCard`, `templ TabloCreateFormFragment`, `templ TabloCardWithOOBFormClear`.
    - File contains exact copy strings (UI-SPEC Copywriting Contract): "Your Tablos", "New tablo", "Create a tablo", "Create tablo", "No tablos yet", "Create your first tablo to get started.".
    - File contains `id="create-form-slot"` and `id="tablos-list"`.
    - TabloCardWithOOBFormClear emits `<div id="create-form-slot" hx-swap-oob="true">` as a top-level sibling (grep shows it OUTSIDE the @TabloCard call — verify by reading the templ component body).
    - File contains `class="tablo-delete-zone"` wrapper around the Delete button.
    - tablos.templ guards description rendering with `if tablo.Description.Valid && tablo.Description.String != ""` and color dot with `if tablo.Color.Valid && tablo.Color.String != ""`.
    - tablos_forms.go declares `type TabloCreateForm struct` with Title, Description, Color string fields and `type TabloCreateErrors struct` with Title, General string fields.
    - templates/layout.templ now contains "Phase 3 · Tablos" and does NOT contain "Phase 2 · Authentication".
    - `just generate` produced tablos_templ.go and refreshed layout_templ.go.
    - `go build ./...` exits 0.
  </acceptance_criteria>
  <done>Templates compile, helper form/errors types declared, layout footer updated.</done>
</task>

<task type="auto" tdd="true">
  <name>Task 2: handlers_tablos.go — TablosDeps + List/New/Create handlers + router/main wiring</name>
  <files>backend/internal/web/handlers_tablos.go, backend/internal/web/router.go, backend/internal/web/handlers.go, backend/templates/index.templ, backend/templates/index_templ.go, backend/cmd/web/main.go</files>
  <read_first>
    backend/internal/web/handlers_auth.go
    backend/internal/web/handlers.go
    backend/internal/web/router.go
    backend/internal/web/middleware.go
    backend/cmd/web/main.go
    backend/internal/db/sqlc/tablos.sql.go
    backend/internal/db/sqlc/models.go
    backend/internal/auth/middleware.go (Authed)
    backend/internal/web/handlers_tablos_test.go (RED tests from Plan 01)
    .planning/phases/03-tablos-crud/03-PATTERNS.md (handlers_tablos.go analog block + router/main modify blocks)
    .planning/phases/03-tablos-crud/03-RESEARCH.md (Patterns 1-4, 7, 8 + Pitfalls 1, 2, 5, 6)
    .planning/phases/03-tablos-crud/03-UI-SPEC.md (Interaction Contract §1 + §2 + Validation copy)
  </read_first>
  <behavior>
    - TablosDeps struct holds *sqlc.Queries.
    - TablosListHandler: GET / — extracts user via auth.Authed(ctx); calls Queries.ListTablosByUser(ctx, user.ID); renders TablosDashboard with the slice (empty slice OK, template handles empty state); Content-Type: text/html; charset=utf-8.
    - TablosNewHandler: GET /tablos/new — renders TabloCreateFormFragment with zero-value form/errs; HTMX-only intent but works without HX-Request too.
    - TablosCreateHandler: POST /tablos — reads title/description/color via r.PostFormValue (NOT r.Body — Pitfall 2); validates: title required → "Title is required.", title len > 255 → "Title must be 255 characters or fewer." (UI-SPEC copy). On validation error: status 422, render TabloCreateFormFragment with field errors (HTMX path) or full TablosDashboard with errs (non-HTMX path). Build InsertTabloParams: Title=trimmed title, Description=pgtype.Text{Valid: description != "", String: description}, Color=pgtype.Text{Valid: color != "", String: color}, UserID=user.ID. On success + HX-Request: set HX-Retarget: #tablos-list, HX-Reswap: afterbegin, render TabloCardWithOOBFormClear. On success + non-HTMX: 303 to /.
    - All three handlers extract *auth.User via `_, user, _ := auth.Authed(r.Context())`.
    - Router signature changes to NewRouter(pinger, staticDir, deps AuthDeps, tabloDeps TablosDeps, csrfKey []byte, env string, trustedOrigins ...string).
    - Inside the RequireAuth chi group: GET / → TablosListHandler(tabloDeps), GET /tablos/new → TablosNewHandler(tabloDeps), POST /tablos → TablosCreateHandler(tabloDeps). Static segments declared before parametric (Pitfall 1) — Plan 03 will add /tablos/{id} routes AFTER /tablos/new.
    - cmd/web/main.go constructs `tabloDeps := web.TablosDeps{Queries: q}` and passes it to NewRouter.
    - Delete the old IndexHandler from handlers.go (and templates.Index in index.templ → emptied or file deleted). DemoTimeHandler stays. If deleting index.templ causes any remaining references to break, leave the file but reduce it to a no-op package declaration; remove IndexHandler from handlers.go either way.
    - Stub for Plan 03: also register placeholder routes for endpoints the test scaffold exercises to avoid 404 noise during partial green: leave undefined; Plan 03 implements them. Tests for those endpoints stay RED until Plan 03.
  </behavior>
  <action>
    1) Replace the Plan 01 stub `type TablosDeps struct { Queries *sqlc.Queries }` (or create) at the top of backend/internal/web/handlers_tablos.go in package web. Add full handler implementations following handlers_auth.go style exactly (constructor returns http.HandlerFunc closing over deps).

    2) Implement TablosListHandler, TablosNewHandler, TablosCreateHandler per the behavior block. For nullable insert params use `pgtype.Text{String: s, Valid: s != ""}` (import "github.com/jackc/pgx/v5/pgtype"). For trim/validate, use `strings.TrimSpace`. For error responses use `w.WriteHeader(http.StatusUnprocessableEntity)` + form fragment (HX) or full dashboard (non-HX). For HTMX success use w.Header().Set("HX-Retarget", "#tablos-list") and w.Header().Set("HX-Reswap", "afterbegin"). Status 200 for HTMX success; 303 to "/" otherwise (http.StatusSeeOther — Pitfall 9 from Phase 2 carries over).

    3) Edit backend/internal/web/router.go: change NewRouter signature to add `tabloDeps TablosDeps` as the parameter immediately after `deps AuthDeps`. Inside the existing protected group, replace `r.Get("/", IndexHandler())` with `r.Get("/", TablosListHandler(tabloDeps))` and add (in this order — static-before-parametric, Pitfall 1):
       - r.Get("/tablos/new", TablosNewHandler(tabloDeps))
       - r.Post("/tablos", TablosCreateHandler(tabloDeps))
       Do NOT yet add /tablos/{id} routes — Plan 03 owns those.

    4) Edit backend/cmd/web/main.go: after the existing `deps := web.AuthDeps{...}` line, add `tabloDeps := web.TablosDeps{Queries: q}` and pass it as the new arg to NewRouter (positional, between deps and csrfKey).

    5) Remove backend/internal/web/handlers.go IndexHandler. Remove backend/templates/index.templ (delete or reduce to bare `package templates`). Delete backend/templates/index_templ.go if `just generate` does not regenerate it (templ should remove it on next run if the .templ is gone; if leftover, delete manually).

    6) Run `just generate` then `just test`. TestTabloList, TestTabloList_Empty, TestTabloCreate, TestTabloCreate_Validation must turn green; tests for endpoints not yet implemented (Plan 03) remain red.
  </action>
  <verify>
    <automated>cd backend && just generate && grep -q "type TablosDeps struct" internal/web/handlers_tablos.go && grep -q "func TablosListHandler" internal/web/handlers_tablos.go && grep -q "func TablosNewHandler" internal/web/handlers_tablos.go && grep -q "func TablosCreateHandler" internal/web/handlers_tablos.go && grep -q "HX-Retarget" internal/web/handlers_tablos.go && grep -q "HX-Reswap" internal/web/handlers_tablos.go && grep -q "pgtype.Text" internal/web/handlers_tablos.go && grep -q "r.PostFormValue(\"title\")" internal/web/handlers_tablos.go && grep -q "tabloDeps TablosDeps" internal/web/router.go && grep -q "r.Get(\"/tablos/new\"" internal/web/router.go && grep -q "r.Post(\"/tablos\"" internal/web/router.go && grep -q "TablosDeps{Queries: q}" cmd/web/main.go && ! grep -q "IndexHandler" internal/web/handlers.go && go build ./... && go test ./internal/web/... -run "TestTabloList|TestTabloList_Empty|TestTabloCreate|TestTabloCreate_Validation" -count=1</automated>
  </verify>
  <acceptance_criteria>
    - backend/internal/web/handlers_tablos.go declares: `type TablosDeps struct { Queries *sqlc.Queries }`, `func TablosListHandler(deps TablosDeps) http.HandlerFunc`, `func TablosNewHandler(deps TablosDeps) http.HandlerFunc`, `func TablosCreateHandler(deps TablosDeps) http.HandlerFunc`.
    - handlers_tablos.go uses `r.PostFormValue("title")`, `r.PostFormValue("description")`, `r.PostFormValue("color")` (no r.Body reads).
    - handlers_tablos.go contains literal "Title is required." and "Title must be 255 characters or fewer." strings.
    - handlers_tablos.go sets HX-Retarget and HX-Reswap headers in the create-success path.
    - handlers_tablos.go uses pgtype.Text{...Valid: s != ""...} for nullable Description and Color inserts.
    - router.go signature reads `func NewRouter(pinger Pinger, staticDir string, deps AuthDeps, tabloDeps TablosDeps, csrfKey []byte, env string, trustedOrigins ...string) http.Handler`.
    - router.go protected group contains `r.Get("/", TablosListHandler(tabloDeps))` (no IndexHandler reference), `r.Get("/tablos/new", TablosNewHandler(tabloDeps))` (declared BEFORE any parametric /tablos/{id} route which is added in Plan 03), `r.Post("/tablos", TablosCreateHandler(tabloDeps))`.
    - cmd/web/main.go contains `tabloDeps := web.TablosDeps{Queries: q}` and passes it to NewRouter.
    - backend/internal/web/handlers.go no longer contains the symbol `IndexHandler` (`grep -c IndexHandler handlers.go` == 0).
    - `go build ./...` exits 0.
    - `go test ./internal/web/... -run "TestTabloList|TestTabloList_Empty|TestTabloCreate|TestTabloCreate_Validation"` exits 0 (all four pass).
    - Phase 1/2 tests still pass: `go test ./internal/web/... -run "TestSignup|TestLogin|TestLogout|TestCSRF"` exits 0.
  </acceptance_criteria>
  <done>Dashboard + create slice green; create-form-slot OOB clear verified; non-HTMX 303 verified.</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <name>Task 3: Human verify list + create flow</name>
  <what-built>
    Dashboard at GET / showing user's tablos newest-first or empty state. "New tablo" button expands inline form via HTMX; submitting creates a row, clears the form slot, and prepends the new card without a full reload. Non-JS fallback works via plain form POST.
  </what-built>
  <how-to-verify>
    1. cd backend && just dev (web server on local port).
    2. Open http://localhost:PORT/login, log in with an existing test account (or sign up).
    3. On the dashboard, confirm heading "Your Tablos" and either tablo cards or empty-state text "No tablos yet" + "Create your first tablo to get started.".
    4. Click "New tablo" — inline form appears above the list, no full page reload (check DevTools Network panel: only XHR to /tablos/new).
    5. Submit form with title "My first tablo" + description "Hello" + color "#6366f1": form collapses, new card appears at top of list, no full reload.
    6. Submit form with empty title: form stays open, "Title is required." appears under the field.
    7. Open a private window with no JS — submit the form: page does a real POST and redirects to /; new tablo appears in list.
    8. View page source: verify CSRF token is rendered in the form's hidden _csrf field.
  </how-to-verify>
  <resume-signal>Type "approved" if the dashboard + create flow works as described, or describe issues.</resume-signal>
</task>

</tasks>

<threat_model>
## Trust Boundaries

| Boundary | Description |
|----------|-------------|
| Browser → POST /tablos | Untrusted form input (title, description, color) crosses into the handler. |
| Browser → GET /tablos/new | Authed GET; no body input. |
| Handler → Postgres | Parameterised via sqlc-generated InsertTabloParams. |

## STRIDE Threat Register

| Threat ID | Category | Component | Disposition | Mitigation Plan |
|-----------|----------|-----------|-------------|-----------------|
| T-03-02-01 | Spoofing | session cookie | mitigate (inherited) | RequireAuth middleware from Phase 2 wraps the entire tablos group — unauthed requests redirect to /login. |
| T-03-02-02 | Tampering | CSRF on POST /tablos | mitigate | gorilla/csrf middleware from Phase 2 validates _csrf field; @ui.CSRFField(csrfToken) embedded in TabloCreateFormFragment. Missing token → 403 before handler runs. |
| T-03-02-03 | Tampering | r.Body drained by gorilla/csrf | mitigate | Use r.PostFormValue exclusively (Pitfall 2). |
| T-03-02-04 | DoS | over-long title | mitigate | TablosCreateHandler validates len(strings.TrimSpace(title)) > 0 AND <= 255; >255 returns 422 before DB insert. |
| T-03-02-05 | XSS via title/description/color | Tampering | mitigate | templ auto-escapes all `{ variable }` interpolations; color rendered into inline style attribute is templ-escaped (inline style accepts limited chars, but templ's escaping prevents attribute breakout). No templ.Raw anywhere. |
| T-03-02-06 | Tampering via OOB swap | hx-swap-oob top-level requirement | mitigate | TabloCardWithOOBFormClear emits the OOB div as a top-level sibling (Pitfall 5); template structure asserted in Task 1 acceptance criteria. |
| T-03-02-07 | Elevation of privilege | Listing other users' tablos | mitigate | ListTablosByUser query is scoped by $1 = user.ID from auth.Authed(ctx); no path parameters, no way to widen scope. |
</threat_model>

<verification>
- TestTabloList, TestTabloList_Empty, TestTabloCreate (incl. HTMX + non-HTMX sub-asserts), TestTabloCreate_Validation all pass.
- Full Phase 1/2 test suite still passes (no regression in TestSignup/TestLogin/TestLogout/TestCSRF).
- Manual browser verification of create flow per Task 3 checkpoint.
- `grep -c IndexHandler backend/internal/web/handlers.go` returns 0.
</verification>

<success_criteria>
1. Dashboard at GET / renders user's tablos newest-first (TABLO-01).
2. Empty state appears when user has zero tablos with exact UI-SPEC copy.
3. Creating a tablo via HTMX prepends a new card and clears the form slot in one round trip (TABLO-02 + TABLO-06).
4. Empty-title validation surfaces "Title is required." inline.
5. Non-HTMX POST /tablos redirects 303 to / (TABLO-06 degrade-gracefully).
6. CSRF token present in the create form (AUTH-06 inherited).
7. Plan 03 has the wiring it needs: TablosDeps available, NewRouter signature stable, TabloCard renders a `.tablo-delete-zone` placeholder.
</success_criteria>

<output>
After completion, create `.planning/phases/03-tablos-crud/03-02-SUMMARY.md` documenting: TablosDeps shape, list of new handlers/templates, NewRouter signature change, which tests turned green (4 of 10), and which remain red for Plan 03 (6 of 10).
</output>