setTitle(e.target.value)} className="w-full rounded-md border border-border bg-surface-warm px-3 py-2 text-sm font-semibold text-fg placeholder:text-muted" data-od-id="notes-add-title" />

setContent(e.target.value)}
        rows={3}
        className="w-full rounded-md border border-border bg-surface-warm px-3 py-2 text-sm text-fg placeholder:text-muted"
        data-od-id="notes-add-content"
      />
      <div className="flex justify-end gap-2">
        <button
          type="button"
          onClick={onCancel}
          disabled={busy}
          className="px-3 py-1.5 text-sm font-semibold text-muted hover:text-fg"
        >
          Cancel
        </button>
        <button
          type="button"
          disabled={busy || !title.trim()}
          onClick={async () => {
            setBusy(true);
            try {
              await onSubmit({ title: title.trim(), content: content.trim() });
            } finally {
              setBusy(false);
            }
          }}
          className="rounded-md bg-accent text-accent-on px-3 py-1.5 text-sm font-semibold disabled:opacity-50"
          data-od-id="notes-add-save"
        >
          Save
        </button>
      </div>
    </div>
  );
}

function EmptyState({ filter }: { filter: Filter }) {
  const msg =
    filter === "open"
      ? "No open notes. Great work."
      : filter === "done"
        ? "No done notes yet."
        : "No notes yet. Click + Add note to get started.";
  return (
    <div className="rounded-md border border-dashed border-border bg-surface-warm px-4 py-8 text-center text-sm text-muted">
      {msg}
    </div>
  );
}
```

- [ ] **Step 2: Verify TypeScript compiles**

Run: `cd "C:\Users\SJ\.minimax-agent\projects\Workflow" ; npx tsc --noEmit`
Expected: error TS2307 "Cannot find module '@/app/api/notes/route'" — expected, the API routes don't exist yet. Don't fix here; resolved in Tasks 5–6.

- [ ] **Step 3: Commit**

```bash
cd "C:\Users\SJ\.minimax-agent\projects\Workflow"
git add app/notes/NotesList.tsx
git commit -m "feat(notes): add NotesList client component with CRUD + filters"
```

---

## Task 5: Create POST handler `app/api/notes/route.ts`

**Files:**
- Create: `app/api/notes/route.ts`

**Interfaces:**
- Consumes: JSON `{ title: string, content?: string }`. Hardcoded `collection = "ysterbaard_notes"`. Allowlist: `title`, `content`, `is_done`, `done_at`.
- Produces: created `YsterbaardNote` JSON, or `{ error: string }` with 400/502.

- [ ] **Step 1: Create the file**

Create `app/api/notes/route.ts` with:

```ts
// app/api/notes/route.ts
// POST /api/notes — create a new note.
// Hardcoded collection = "ysterbaard_notes". Field-allowlisted.

import { NextRequest, NextResponse } from "next/server";
import { createRecord } from "@/lib/pb";
import type { YsterbaardNote } from "@/lib/types";

export const dynamic = "force-dynamic";

const COLLECTION = "ysterbaard_notes";
const FIELD_ALLOWLIST = ["title", "content", "is_done", "done_at"] as const;

export async function POST(req: NextRequest) {
  let body: Record<string, unknown>;
  try {
    body = await req.json();
  } catch {
    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
  }

const title = typeof body.title === "string" ? body.title.trim() : "";
  const content = typeof body.content === "string" ? body.content.trim() : "";

if (!title) {
    return NextResponse.json({ error: "title is required" }, { status: 400 });
  }

const sanitised: Record<string, unknown> = { title };
  if (content) sanitised.content = content;

try {
    const record = await createRecord<YsterbaardNote>(COLLECTION, sanitised);
    return NextResponse.json(record, { status: 200 });
  } catch (err) {
    const message = err instanceof Error ? err.message : "Unknown PB error";
    console.error("[notes create]", message);
    return NextResponse.json({ error: message }, { status: 502 });
  }
}
```

- [ ] **Step 2: Verify TypeScript compiles**

Run: `cd "C:\Users\SJ\.minimax-agent\projects\Workflow" ; npx tsc --noEmit`
Expected: exit 0. (The other errors from Tasks 3–4 only resolve once both API route files exist.)

- [ ] **Step 3: Commit**

```bash
cd "C:\Users\SJ\.minimax-agent\projects\Workflow"
git add app/api/notes/route.ts
git commit -m "feat(notes): add POST /api/notes handler"
```

---

## Task 6: Create PATCH + DELETE handlers `app/api/notes/[id]/route.ts`

**Files:**
- Create: `app/api/notes/[id]/route.ts`

**Interfaces:**
- Consumes:
    - `PATCH`: JSON `{ title?: string, content?: string, is_done?: boolean }`. Hardcoded `collection = "ysterbaard_notes"`. Allowlist: `title`, `content`, `is_done`, `done_at`.
    - `DELETE`: path `[id]`.
- Produces:
    - `PATCH`: updated `YsterbaardNote` JSON.
    - `DELETE`: `{ ok: true }`.

- [ ] **Step 1: Create the file**

Create `app/api/notes/[id]/route.ts` with:

```ts
// app/api/notes/[id]/route.ts
// PATCH /api/notes/[id] — update an existing note (edit text, toggle done).
// DELETE /api/notes/[id] — delete a note.
// Hardcoded collection = "ysterbaard_notes". Field-allowlisted.

import { NextRequest, NextResponse } from "next/server";
import { updateRecord, deleteRecord } from "@/lib/pb";
import type { YsterbaardNote } from "@/lib/types";

export const dynamic = "force-dynamic";

const COLLECTION = "ysterbaard_notes";
const FIELD_ALLOWLIST = ["title", "content", "is_done", "done_at"] as const;

export async function PATCH(
  req: NextRequest,
  { params }: { params: { id: string } },
) {
  const id = params.id;
  let body: Record<string, unknown>;
  try {
    body = await req.json();
  } catch {
    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
  }

const sanitised: Record<string, unknown> = {};

if (typeof body.title === "string") {
    const t = body.title.trim();
    if (!t) return NextResponse.json({ error: "title cannot be empty" }, { status: 400 });
    sanitised.title = t;
  }
  if (typeof body.content === "string") {
    sanitised.content = body.content.trim();
  }

if (typeof body.is_done === "boolean") {
    sanitised.is_done = body.is_done;
    sanitised.done_at = body.is_done ? new Date().toISOString() : null;
  }

// Refuse empty patches so we don't issue pointless PATCH calls.
  if (Object.keys(sanitised).length === 0) {
    return NextResponse.json({ error: "no editable fields supplied" }, { status: 400 });
  }

try {
    const updated = await updateRecord<YsterbaardNote>(COLLECTION, id, sanitised);
    return NextResponse.json(updated, { status: 200 });
  } catch (err) {
    const message = err instanceof Error ? err.message : "Unknown PB error";
    console.error("[notes patch]", id, message);
    return NextResponse.json({ error: message }, { status: 502 });
  }
}

export async function DELETE(
  _req: NextRequest,
  { params }: { params: { id: string } },
) {
  const id = params.id;
  try {
    await deleteRecord(COLLECTION, id);
    return NextResponse.json({ ok: true }, { status: 200 });
  } catch (err) {
    const message = err instanceof Error ? err.message : "Unknown PB error";
    console.error("[notes delete]", id, message);
    return NextResponse.json({ error: message }, { status: 502 });
  }
}
```

- [ ] **Step 2: Verify TypeScript compiles across the whole project**

Run: `cd "C:\Users\SJ\.minimax-agent\projects\Workflow" ; npx tsc --noEmit`
Expected: exit 0, no output.

- [ ] **Step 3: Commit**

```bash
cd "C:\Users\SJ\.minimax-agent\projects\Workflow"
git add app/api/notes/[id]/route.ts
git commit -m "feat(notes): add PATCH + DELETE /api/notes/[id] handlers"
```

---

## Task 7: Lint + build + smoke-test in browser

**Files:**
- Touch: nothing.

- [ ] **Step 1: Run linter**

Run: `cd "C:\Users\SJ\.minimax-agent\projects\Workflow" ; npx next lint --dir app/notes --dir app/api/notes --dir components --dir lib`
Expected: no errors. Warnings are OK if they exist in existing files.

- [ ] **Step 2: Run production build**

Run: `cd "C:\Users\SJ\.minimax-agent\projects\Workflow" ; npm run build`
Expected: build succeeds. The `/notes` route appears in the build output table.

- [ ] **Step 3: Smoke-test the dev server**

```bash
cd "C:\Users\SJ\.minimax-agent\projects\Workflow"
npm run dev
```

Then in another shell:

```bash
curl -i http://localhost:3000/notes
```

Expected: HTTP 200 with the Notes page HTML. (The dev server default port per `package.json` — check `next.config.mjs` / `package.json` scripts if it's not 3000.)

If the PB collection is missing, the page will render the error message telling you to create it. That's the expected failure mode at this stage — Task 8 below is the user-facing fix.

- [ ] **Step 4: Verify nav placement**

Visit `http://localhost:3000` in a browser and confirm:
- `Notes` is the 2nd item in the top nav (after `Overview`).
- `Notes` is the 2nd item in the bottom mobile tab bar (after `Overview`).
- The icon is a notepad (folded corner + ruled line), distinct from the clipboard.

- [ ] **Step 5: Commit build artifacts only if changed**

```bash
cd "C:\Users\SJ\.minimax-agent\projects\Workflow"
git status --short .next
```

Expected: `.next/` is gitignored. No commit needed unless `package-lock.json` or other tracked files moved.

---

## Task 8: User creates PB collection (manual, outside this plan)

This task is **not for the agent**. The user must:

1. Open `https://pb.agent.apphub.co.za/_/`.
2. New collection → name `ysterbaard_notes`.
3. Add fields per the spec: `title` (text, required, max 200), `content` (text, plain), `is_done` (bool, default false), `done_at` (date).
4. Open the API rules: `listRule`, `viewRule`, `createRule`, `updateRule`, `deleteRule` — set each to **empty string**.
5. If after saving the rules the in-app server gets 403 on `/notes`, PATCH the collection once via the admin UI to "wake up" the rules (same fix as `ysterbaard_annual_returns` on 2026-09-16).

Once the user confirms the collection exists, the agent does the smoke test in Task 9.

- [ ] **(user action)** Create `ysterbaard_notes` in PB admin UI.

---

## Task 9: End-to-end CRUD smoke test

- [ ] **Step 1: Confirm the dev server still runs and the page loads**

Visit `http://localhost:3000/notes`. Expected: the page renders the empty state ("No notes yet. Click + Add note to get started.").

- [ ] **Step 2: Create a note**

Click `+ Add note`, type a title (e.g. "Renew BizPortal subscription"), optionally a content body, click Save. Expected: new row appears at top.

- [ ] **Step 3: Toggle done**

Click the checkbox on a note. Expected: row moves to bottom, title strikes through, becomes dim.

- [ ] **Step 4: Edit**

Click `Edit` on a row. Modify the title. Click Save. Expected: title updated in place, edit panel collapses.

- [ ] **Step 5: Filter**

Click `Open` chip. Expected: done rows are hidden. Click `Done` chip. Expected: only done rows show. Click `All` chip. Expected: everything shows.

- [ ] **Step 6: Delete**

Click `Delete` on a row, confirm the dialog. Expected: row disappears.

- [ ] **Step 7: Commit any docs updates**

If during smoke test you noticed copy / wording that should be tweaked in the design spec, update both the spec and this plan in one commit:

```bash
cd "C:\Users\SJ\.minimax-agent\projects\Workflow"
git add docs/superpowers/specs/2026-09-16-notes-tab-design.md
git add docs/superpowers/plans/2026-09-16-notes-tab.md
git commit -m "docs(notes): spec/plan tweaks after smoke test"
```

---

## Self-Review Notes

- **Spec coverage:**
    - Server Component page → Task 3.
    - Client Component list with filter chips → Task 4.
    - POST handler → Task 5.
    - PATCH + DELETE handlers → Task 6.
    - NavBar entry + icon → Task 2.
    - `YsterbaardNote` type → Task 1.
    - Verification → Tasks 7 + 9.
- **Placeholder scan:** no TBD / TODO / vague steps found.
- **Type consistency:** `YsterbaardNote` (Task 1) is consumed by page.tsx (Task 3), NotesList.tsx (Task 4), and `[id]/route.ts` (Task 6). Same field names used everywhere (`title`, `content`, `is_done`, `done_at`).
- **Commit granularity:** each task is its own commit, scoped to one concern. Easy to revert if a single task fails.