Walkthrough: Your First App

Goal: Create planning files only (no app UI code yet).

Create AGENTS.md:
- App name: Focus List
- Stack: vanilla HTML, CSS, JavaScript only; no npm, no frameworks, no backend
- Run: open index.html in a browser
- Data: browser localStorage key focus-list-tasks
- Rules: accessible labels, simple readable code, no drive-by refactors
- Definition of done: open index.html, use the feature, refresh, data still there when relevant

Create JOURNEY.md with this happy path:
1. Open the app
2. See an empty state message when there are no tasks
3. Type a task title and add it
4. See it in the list as active
5. Mark it complete (it should look completed)
6. Filter between All / Active / Done
7. Delete a task
8. Refresh the browser — tasks remain

Out of scope: user accounts, sync across devices, due dates, tags, collaboration, PWA install prompts, dark-mode engines, component libraries

Verification: print both files fully. Stop after that.

@AGENTS.md @JOURNEY.md

Goal: Build the visual shell of Focus List so the page looks like the app.

Create:
- index.html
- css/style.css
- js/main.js

UI must include:
- App title "Focus List"
- Text input with placeholder "What matters today?"
- Add button
- Filter controls: All | Active | Done
- A list region (can show 2–3 fake sample tasks hard-coded for layout only)
- A footer line for counts like "2 items left" (can be hard-coded temporarily)

Constraints:
- Vanilla only; no libraries
- Clean, readable layout; good spacing; works on a laptop browser width
- Use semantic HTML (header, main, ul/li, button, input label)

Verification:
1. Tell me how to open it
2. I should see the full layout with no console errors
3. Buttons do not need full behavior yet — but page must not look broken

Stop when the shell looks good.

@JOURNEY.md @AGENTS.md @index.html @css/style.css @js/main.js

Goal: Implement the full happy path in JOURNEY.md.

Behavior requirements:
- Add task from input via Add button and Enter key; ignore empty/whitespace-only titles
- Clear the input after adding
- Each task shows title, a complete toggle (checkbox or button), and a delete button
- Completed tasks are visually distinct (strike-through or muted style)
- Filters: All / Active / Done — only matching tasks visible; active filter highlighted
- Empty state: when the visible list is empty, show a friendly message
- Item count text updates (e.g. "3 active left")
- Remove any hard-coded fake tasks from the shell phase

Data:
- Keep tasks in a JavaScript array of objects { id, title, done }
- Prefer implementing localStorage persistence now (key focus-list-tasks). If you split work, in-memory first is OK only if you clearly say persistence is next — but please implement persistence in this step if straightforward.

Constraints:
- No frameworks, no npm
- No backend
- Keep code beginner-readable; comment short section headers in main.js

Verification checklist in your reply:
1. How to add
2. How to complete
3. How to delete
4. How filters work
5. Whether refresh keeps data
6. Confirm no dependencies added

I will playtest with the journey steps next.

@js/main.js @index.html

Bug on journey step [number]: I did [x], expected [y], saw [z].
Console: [paste or "none"]
Fix minimal; do not add features.

@js/main.js @AGENTS.md @JOURNEY.md @css/style.css

Goal: Guarantee localStorage persistence and a small polish pass.

Requirements:
- Save tasks to localStorage key focus-list-tasks whenever the list changes
- Load tasks on startup; if missing/corrupt, start with []
- After load, render list and counts correctly
- Polish: focus ring styles for keyboard users; hover states on buttons; mobile-friendly padding
- Optional: "Clear completed" button that removes done tasks (only if simple)

Non-goals: sync, accounts, drag-and-drop reorder (unless already trivial)

Verification:
1. Add two tasks, complete one, refresh twice — state remains
2. Explain how to wipe data manually if I want a reset (e.g. clear site data)
3. No new libraries

# Example next feature (after v1)
@js/main.js @index.html @css/style.css
Add double-click on a task title to edit it inline; Enter saves, Escape cancels.
Persist changes. Verification: edit a title, refresh, new title remains.
No other features.