feat: add tags/albums UI

docs/plans/2026-02-02-tags-albums-ui.md

@@ -0,0 +1,89 @@
+# Tags/Albums UI Wiring Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add minimal admin UI to manage tags/albums and wire asset detail UI to assign tags and add assets to albums.
+
+**Architecture:** Keep UI changes local to existing Next.js components. Use lightweight fetch calls to existing `/api/tags` and `/api/albums` endpoints with admin header set from sessionStorage, plus inline error handling. Avoid new state management or styling systems.
+
+**Tech Stack:** Next.js app router, React, TypeScript, fetch API, inline styles/Tailwind classes.
+
+### Task 1: Establish admin token input + list/create tags/albums UI
+
+**Files:**
+- Modify: `apps/web/app/admin/page.tsx`
+
+**Step 1: Write the failing test**
+
+No tests for UI wiring are added per user-approved TDD exception. Record rationale in implementation notes.
+
+**Step 2: Run test to verify it fails**
+
+Skipped.
+
+**Step 3: Write minimal implementation**
+
+- Convert page to client component.
+- Add admin token form that reads/writes `sessionStorage`.
+- Add list + create for tags and albums using `fetch` with `X-Porthole-Admin-Token` header.
+- Inline errors per section.
+
+**Step 4: Run test to verify it passes**
+
+Skipped.
+
+**Step 5: Commit**
+
+Include with other tasks once all UI wiring is complete.
+
+### Task 2: Asset detail UI for tag assignment and album add
+
+**Files:**
+- Modify: `apps/web/app/components/MediaPanel.tsx`
+
+**Step 1: Write the failing test**
+
+No tests for UI wiring are added per user-approved TDD exception. Record rationale in implementation notes.
+
+**Step 2: Run test to verify it fails**
+
+Skipped.
+
+**Step 3: Write minimal implementation**
+
+- Add UI section in viewer panel to assign tag(s) to the current asset and add asset to album.
+- Fetch tags/albums lists using admin token from `sessionStorage`.
+- Use inline error handling and disable actions when missing token/asset.
+
+**Step 4: Run test to verify it passes**
+
+Skipped.
+
+**Step 5: Commit**
+
+Include with other tasks once all UI wiring is complete.
+
+### Task 3: Validate behavior manually
+
+**Files:**
+- None
+
+**Step 1: Write the failing test**
+
+No tests for UI wiring are added per user-approved TDD exception. Record rationale in implementation notes.
+
+**Step 2: Run test to verify it fails**
+
+Skipped.
+
+**Step 3: Manual smoke**
+
+- Load `/admin` page, set token, create tag/album, verify list refresh.
+- Open asset viewer in media panel, assign tag/add to album, confirm inline success/error states.
+
+**Step 4: Commit**
+
+```bash
+git add apps/web/app/admin/page.tsx apps/web/app/components/MediaPanel.tsx docs/plans/2026-02-02-tags-albums-ui.md
+git commit -m "feat: add tags/albums UI"
+```