archy/loop/plan.md

Overnight Plan — Content Surfacing Hardening & Feature Completion

Format: - [ ] = pending, - [x] = done. Make at least 30 attempts on any difficult task before moving on. Loop reads this file.

Phase 1: Critical ContentPanel Wiring Gaps

• T1 — Wire ImageGrid + ImageDetail into ContentPanel.vue. Import components, destructure panelImages, selectedImage, openImageDetail, closeImageDetail from useContentPanel(). Add ImageGrid render block following BookGrid/TVSeriesGrid pattern. Add ImageDetail overlay following BookDetail pattern. Add selectedImage to hasDetailOpen computed. Reference ContentGridView.vue for how ImageGrid is already used there.

• T2 — Wire PlaceGrid + PlaceDetail into ContentPanel.vue. Import components, destructure panelPlaces, selectedPlace, openPlaceDetail, closePlaceDetail from useContentPanel(). Add PlaceGrid render block + PlaceDetail overlay. Add selectedPlace to hasDetailOpen computed. Follow same patterns as T1.

• T3 — Verify code tab rendering in ContentPanel.vue. Ensure panelCodeBlocks is destructured and code content renders when the code tab is active. If missing, add a code block display component or inline rendering with syntax highlighting. The code tab should show extracted code blocks from AI responses.

• TEST:P1 — Run cd packages/app && npx vitest run and pnpm typecheck && pnpm lint. Fix all failures before proceeding.

Phase 2: Content Extraction Hardening

• T4 — Expand extraction quality test suite to 100+ tests. Add tests for: podcast extraction (library [[podcast:p1]] tags + [[podcast_ext:]] tags), app extraction (extractApps), film extraction (library [[film:f1]] tags + [[film_ext:]] tags), magazine section extraction, websites/news detection from markdown links and bare domain extraction, edge cases (empty strings, very long text, unicode characters, special chars in titles), mixed content with 3+ types in one response, filterTabsByContext with every specialized path (news+TV, nostr+apps, app+code, etc). Each test should use realistic AI response text patterns. File: packages/app/src/__tests__/extractionQuality.test.ts

• T5 — Fix any extraction bugs found during T4 testing. Run the expanded test suite, fix all failures in contentExtraction.ts and/or contentFiltering.ts. Iterate until all tests pass. Document any patterns that needed fixing.

• T6 — Verify filterTabsByContext prioritization is correct for all paths. The function was recently refactored to use a prioritize() helper that appends remaining content after priority tabs. Write specific tests ensuring: news queries show news/magazine first but include TV/books/etc if present, nostr queries show nostr first but include other content, app queries show apps first, preferred tab from preferredFirstTab() is always first in general case, no content type is ever silently dropped. File: packages/app/src/__tests__/extractionQuality.test.ts

• TEST:P2 — Run cd packages/app && npx vitest run src/__tests__/extractionQuality.test.ts — must have 100+ tests all passing. Then run pnpm typecheck && pnpm lint.

Phase 3: Code Mode UX Completion

• T7 — Add Esc key to exit code mode on desktop. In ChatWindow.vue or ChatPage.vue, add a keydown event listener for Escape that calls exitCodeMode() from useCodeContext when code mode is active (codeMode.value === true). Only handle on desktop (not mobile). The listener should be added in onMounted and cleaned up in onUnmounted.

• T8 — Show selected project indicator near chat input when in code mode. When codeMode is true and a project is selected (currentProject from useCodeContext), display the project name as a small pill/badge near the chat input area. Use accent/orange styling consistent with the code mode input styling (bg-accent/15, text-accent). Show in ChatInput.vue or as a banner above it in ChatWindow.vue.

• T9 — Wire selected design tokens + files into AI context. When sending a message in code mode, include any selected design tokens and selected file contents as context. In useAI.ts sendMessage(), check if code mode is active, read selectedDesignTokens and selectedFiles from useCodeContext(), read file contents for selected files, and prepend this context to the system prompt or as a prefixed user message section. Keep context concise — include file paths and key content, not full files.

• TEST:P3 — Run pnpm typecheck && pnpm lint. Fix all failures before proceeding.

Phase 4: Final Verification

• T10 — Final verification pass. Run pnpm test (all tests pass), pnpm typecheck (no new type errors — archyBridge.ts error is pre-existing and acceptable), pnpm lint (0 errors). Fix any issues found. Commit all remaining changes with a summary commit message.