Learn Claude Code by Building DevPulse · Chapter 2

Tasks saved in a file, and a Week view

In chapter 1, Claude decided everything itself, and the tasks lived in one browser only. By the end of this chapter, Claude will ask you first, show you its plan, and build a DevPulse that saves every task to a file.

One sitting~8 min read, ~20 min to build along
You start fromchapter 1's index.html
You builda small Python server and a Today and Week view
Chapter 2 of 15plan first, then build
Goes with Episode 2"How do I make Claude Code think before it codes?". The video is being made. This page teaches the same steps, at your own pace.
In a hurry?Jump to the quick reference: every command and key in this chapter, what it does, and when to use it.
Every prompt, ready to copyThis chapter's prompts and commands, each with a Copy button. Type them yourself first; copy if you are stuck or behind.
Where you areYou have chapter 1's page: one file, index.html, in your projects\devpulse folder.

It decided everything without you

In chapter 1, Claude built a page in 19 seconds. It chose to save the tasks in one browser. It added a delete button and a dark mode. It asked nothing.

Say a builder makes your kitchen without asking where you want the sink. It may be a fine kitchen. It is still not yours.

The question for this chapter

How do you make Claude Code ask you first, and show you the plan before it writes any code?

Four modes, one key

Start Claude Code in your folder, as before. Now look at the line under the input box. It says auto mode on.

Press Shift+Tab. The line changes. Press it again, and again. There are four modes:

ModeWhat Claude does
autoDecides for itself; asks only when an action looks risky. The default.
manualAsks before every file change and every command.
accept editsChanges files freely; still asks before commands.
planReads and asks questions. Writes nothing until you approve a plan.

Stop at plan mode.

Claude Code's start screen with the footer reading 'plan mode on (shift+tab to cycle)' while the planning prompt is being typed.
The footer now reads plan mode on. The prompt is being typed above it.

Ask for a plan, not for code

This time we describe what we want, and we invite questions.

Type this into Claude Code, as one linePlan DevPulse properly before any code. Tasks have a title, a tag and minutes. Save them in data/tasks.json through a small Python server that uses only the standard library. Two views: Today (add, list, mark done) and Week (hours per day and a streak of days with at least one task). Ask me questions if anything is unclear.

Claude reads the folder first. Then it asks four questions, one at a time, each with choices. Here are the four, and what we picked:

  1. Keep chapter 1's page, or start again? Evolve it.
  2. What is a tag? Free text, one per task.
  3. Do unfinished tasks count in the Week view? All tasks count.
  4. Which seven days make a week? The last 7 days.
The same four questions, as Claude asked them. The tabs on top tick off each one. Last comes the review screen with all four answers: choose Submit answers.

Answer with the arrow keys and Enter.

Careful here

Answer these questions while you are at the screen. In our recording, a question left alone for about half a minute was answered with the recommended choice. Read, then pick.

Change the plan before any code

Now Claude writes a plan and asks if it may go ahead.

Ready to code? Claude has written up a plan. Options: 1. Yes, and use auto mode, 2. Yes, manually approve edits, 3. Tell Claude what to change.
Three ways forward. We want one change first, so choose 3. Tell Claude what to change.

Choosing 3 prints the whole plan in the conversation, so you can read it. It lists the files, the data, the views and how it will be tested. Then type your change.

Type this into Claude CodeOne change: show minutes as 1 h 30 min everywhere in the app.

Claude updates the plan and asks again. This time choose 2. Yes, manually approve edits. Now it will ask before each file it writes.

Three answers to "Do you want to…?"

First it wants to create server.py. You see the code it is about to write, and a question.

The end of server.py and the question: Do you want to create server.py? 1. Yes, 2. Yes, and switch to accept edits for this session, 3. No.
A permission prompt. We chose 1. Yes: this file only.

Next it wants to change index.html. A change to an existing file shows in red and green: red lines go, green lines come in.

A diff of index.html: lines 186 and 188 in red are removed, lines 362 to 365 in green are added; then: Do you want to overwrite index.html?
Here we chose 2. Yes, and switch to accept edits. From now on in this session, file changes go through without asking.

Then it wants to run its tests. Commands still ask, even in accept edits.

Bash command: python test_server.py. This command requires approval. Do you want to proceed? 1. Yes, 2. Yes, and don't ask again for: python test_server.py, 3. Yes, and switch to auto mode, 4. No.
Running tests is harmless, so we chose 2. Yes, and don't ask again for this one command.

So you have three answers: yes once, yes for the session, or no. Say yes freely to what you would do yourself. Say no to anything you do not understand.

Claude's summary: durations shown as 1 h 30 min everywhere as you asked, test_server.py runs against a temporary data file, run it with python server.py, then open http://127.0.0.1:8000; Crunched for 1m 13s.
Done in 1 minute 13 seconds. Note "shown as 1 h 30 min everywhere, as you asked", and how to run it. The grey line in the input box is only a suggestion.

Run the server in a second tab

DevPulse now has a small server. It must keep running while you use the page, so give it its own terminal tab. In Windows Terminal, press Ctrl+Shift+T for a new tab, then go to your folder.

Windows: type this in the new PowerShell tabcd projects\devpulse python server.py
Mac: type this in a new Terminal tab (Cmd+T)cd projects/devpulse python3 server.py
The second tab: python server.py prints DevPulse running at http://127.0.0.1:8000 (data: ...projects\devpulse\data\tasks.json).
The server is running, and it tells you where the tasks are saved: data\tasks.json.

Open http://127.0.0.1:8000 in your browser. Add three tasks, each with a tag. Tick one as done. Then press F5.

DevPulse Today view after a refresh: three tasks with tags planning, backend and review; the first is ticked and struck through; total 2 h 20 min; Wrote the tasks API shows 1 h 30 min.
After F5, all three are still there, saved in a file this time. And 90 minutes shows as 1 h 30 min, the change we asked for.
The Week view: a 1 day streak, and a bar chart of the last 7 days with one bar on Thursday, 2 h 20 min.
The Week view: hours per day for the last seven days, and the streak.

What planning costs, and what is still missing

Planning took longer than in chapter 1. You read questions, a plan and three prompts. That is the price. In return, every decision in this version was yours.

But close Claude Code and start it again tomorrow. Will it remember that tasks live in data/tasks.json, or that times show as "1 h 30 min"?

It will not. A new session starts with an empty memory. That is chapter 3.

Quick reference

The prompts from this chapter, ready to copy: every prompt, chapter 2.

Command or keyWhat it doesUse it when
Shift+TabCycles the modes: auto, manual, accept edits, planYou want Claude to ask more, or less
plan modeClaude reads and asks, and writes nothing until you approveThe change is big, or the decisions are yours
Tell Claude what to changeShows the full plan and lets you change itThe plan is nearly right
YesAllows this one actionYou want to see each step
Yes, and switch to accept editsAllows all file changes for this sessionYou trust the plan; commands still ask
Yes, and don't ask againAlways allows this one commandThe command is harmless, like running tests
Ctrl+Shift+T (Mac: Cmd+T)Opens a new terminal tabSomething must keep running, like a server

References

Where each mode and prompt on this page comes from. Every screenshot is from our own recording on 29 Oct 2026, Claude Code 2.1.312.

  1. Anthropic · Permission modes Auto, manual (default), accept edits and plan mode, and switching between them with Shift+Tab. https://code.claude.com/docs/en/permission-modes
  2. Anthropic · Common workflows: plan mode Plan mode: Claude reads and asks, and writes no code until you approve the plan. https://code.claude.com/docs/en/common-workflows
  3. Python · http.server The standard-library web server our server.py is built on; nothing to install. https://docs.python.org/3/library/http.server.html
  4. My own recording · 29 Oct 2026, Windows 11 From the planning prompt to a tested server and two views took 1 minute 13 seconds of building.