aboutsummaryrefslogtreecommitdiffstats
path: root/PLAN.md
diff options
context:
space:
mode:
Diffstat (limited to 'PLAN.md')
-rw-r--r--PLAN.md258
1 files changed, 258 insertions, 0 deletions
diff --git a/PLAN.md b/PLAN.md
new file mode 100644
index 0000000..4495134
--- /dev/null
+++ b/PLAN.md
@@ -0,0 +1,258 @@
1# Claude Flow
2
3An opinionated coding assistant that enforces a structured workflow: research → plan → annotate → implement.
4
5Built on Electron + React + SQLite, driving Claude Code under the hood.
6
7## Core Principle
8
9**Never let Claude write code until you've reviewed and approved a written plan.**
10
11The separation of planning and execution prevents wasted effort, keeps you in control of architecture decisions, and produces better results than jumping straight to code.
12
13## Workflow Phases
14
15```
16┌──────────┐ ┌──────┐ ┌──────────┐ ┌───────────┐
17│ Research │ ─► │ Plan │ ─► │ Annotate │ ─► │ Implement │
18└──────────┘ └──────┘ └──────────┘ └───────────┘
19 │ │
20 └────── ◄ ────────┘
21 (iterate as needed)
22```
23
24### 1. Research
25- Deep read of relevant codebase sections
26- Output: `research.md` with detailed findings
27- System prompt enforces: "Read deeply, write findings, don't make changes"
28
29### 2. Plan
30- Detailed implementation approach with code snippets
31- Output: `plan.md` with approach, file paths, trade-offs
32- System prompt enforces: "Write detailed plan, don't implement yet"
33
34### 3. Annotate
35- Human adds inline notes directly in `plan.md`
36- Claude addresses notes and updates the document
37- Repeat 1-6 times until plan is approved
38- System prompt enforces: "Address notes, update plan, don't implement yet"
39
40### 4. Implement
41- Execute the approved plan
42- Mark tasks complete as work progresses
43- Run typecheck continuously
44- Terse feedback corrections during this phase
45
46---
47
48## Architecture
49
50### Tech Stack
51- **Electron** - Desktop app with filesystem access
52- **React** - Renderer UI
53- **better-sqlite3** - Local persistence
54- **Vite** - Fast dev builds
55- **Claude Code SDK** - AI engine (`@anthropic-ai/claude-code`)
56
57### SQLite Schema
58
59```sql
60-- Projects (a codebase you're working on)
61CREATE TABLE projects (
62 id TEXT PRIMARY KEY,
63 name TEXT NOT NULL,
64 path TEXT NOT NULL,
65 created_at INTEGER NOT NULL,
66 updated_at INTEGER NOT NULL
67);
68
69-- Sessions (a task/feature within a project)
70CREATE TABLE sessions (
71 id TEXT PRIMARY KEY,
72 project_id TEXT NOT NULL REFERENCES projects(id),
73 name TEXT NOT NULL,
74 phase TEXT NOT NULL DEFAULT 'research',
75 created_at INTEGER NOT NULL,
76 updated_at INTEGER NOT NULL
77);
78
79-- Messages (conversation history per session)
80CREATE TABLE messages (
81 id TEXT PRIMARY KEY,
82 session_id TEXT NOT NULL REFERENCES sessions(id),
83 role TEXT NOT NULL,
84 content TEXT NOT NULL,
85 created_at INTEGER NOT NULL
86);
87
88-- Artifacts (research.md, plan.md per session)
89CREATE TABLE artifacts (
90 id TEXT PRIMARY KEY,
91 session_id TEXT NOT NULL REFERENCES sessions(id),
92 type TEXT NOT NULL,
93 content TEXT NOT NULL,
94 version INTEGER NOT NULL DEFAULT 1,
95 created_at INTEGER NOT NULL,
96 updated_at INTEGER NOT NULL
97);
98```
99
100### Directory Structure
101
102```
103src/main/
104├── index.ts # App lifecycle, window management
105├── preload.ts # IPC bridge to renderer
106├── db/
107│ ├── index.ts # Database connection
108│ ├── schema.ts # Migrations
109│ ├── projects.ts # Project CRUD
110│ └── sessions.ts # Session CRUD
111├── claude/
112│ ├── index.ts # Claude Code SDK wrapper
113│ └── phases.ts # Phase-specific system prompts
114└── ipc/
115 └── handlers.ts # IPC handler registration
116
117renderer/src/
118├── main.tsx
119├── App.tsx
120├── components/
121│ ├── Sidebar.tsx # Projects + sessions list
122│ ├── Chat.tsx # Message thread
123│ ├── ArtifactPane.tsx # research.md / plan.md editor
124│ └── PhaseIndicator.tsx
125├── hooks/
126│ └── useSession.ts
127└── lib/
128 └── ipc.ts # Typed IPC calls
129```
130
131### UI Layout
132
133```
134┌─────────────┬────────────────────────────────────┐
135│ Projects │ [Research] [Plan] [Annotate] [Go] │
136│ └─ Proj A ├────────────────────────────────────┤
137│ ├─ Sess1 │ ┌─────────────┬─────────────────┐ │
138│ └─ Sess2 │ │ Chat │ Artifact │ │
139│ └─ Proj B │ │ pane │ pane │ │
140│ └─ ... │ │ │ (plan.md) │ │
141│ │ └─────────────┴─────────────────┘ │
142└─────────────┴────────────────────────────────────┘
143```
144
145---
146
147## Phase System Prompts
148
149### Research Phase
150```
151You are in RESEARCH mode. Your job is to deeply understand the relevant parts of the codebase.
152
153Rules:
154- Read files thoroughly, not superficially
155- Write all findings to research.md
156- DO NOT make any code changes
157- DO NOT create or modify any files except research.md
158
159When finished, summarize what you learned and wait for the next instruction.
160```
161
162### Plan Phase
163```
164You are in PLANNING mode. Your job is to write a detailed implementation plan.
165
166Rules:
167- Write the plan to plan.md
168- Include specific code snippets showing proposed changes
169- Include file paths that will be modified
170- Include trade-offs and considerations
171- DO NOT implement anything
172- DO NOT modify any source files
173
174The plan should be detailed enough that implementation becomes mechanical.
175```
176
177### Annotate Phase
178```
179You are in ANNOTATION mode. The human has added notes to plan.md.
180
181Rules:
182- Read all inline notes (marked with comments or annotations)
183- Address each note by updating the relevant section
184- DO NOT implement anything
185- DO NOT modify any source files
186- Only update plan.md
187
188When finished, summarize the changes you made to the plan.
189```
190
191### Implement Phase
192```
193You are in IMPLEMENTATION mode. The plan has been approved.
194
195Rules:
196- Follow the plan exactly
197- Mark tasks complete in plan.md as you finish them
198- Run typecheck continuously
199- Do not add unnecessary comments or jsdocs
200- Do not use `any` or `unknown` types
201- Do not stop until all tasks are complete
202
203If you encounter issues not covered by the plan, stop and ask.
204```
205
206---
207
208## Implementation Phases
209
210### Phase 1: Foundation
211- [ ] Set up directory structure
212- [ ] Implement SQLite schema and migrations
213- [ ] Create database CRUD operations
214- [ ] Set up IPC handlers skeleton
215
216### Phase 2: Core UI
217- [ ] Sidebar with project/session tree
218- [ ] Phase indicator and controls
219- [ ] Basic chat pane (messages display)
220- [ ] Artifact pane (markdown editor)
221
222### Phase 3: Claude Integration
223- [ ] Integrate Claude Code SDK
224- [ ] Implement phase-specific system prompts
225- [ ] Wire up chat to Claude
226- [ ] Handle streaming responses
227
228### Phase 4: Workflow Logic
229- [ ] Phase transitions with guards
230- [ ] Artifact versioning
231- [ ] "Don't implement yet" enforcement
232- [ ] Progress tracking during implementation
233
234### Phase 5: Polish
235- [ ] Keyboard shortcuts
236- [ ] Session search/filter
237- [ ] Export sessions
238- [ ] Settings (API key, preferences)
239
240---
241
242## Open Questions
243
2441. **Claude Code SDK vs CLI**: Need to verify SDK capabilities. Fallback to spawning CLI if needed.
245
2462. **Artifact storage**: Store in SQLite (current plan) or as actual files in project directory?
247
2483. **Session context**: How much conversation history to include? Compaction strategy?
249
2504. **Multi-file editing**: How to handle plans that span many files? Tree view of changes?
251
252---
253
254## References
255
256- [How I Use Claude Code](https://boristane.com/blog/how-i-use-claude-code/) - The workflow this is based on
257- [Claude Code SDK](https://www.npmjs.com/package/@anthropic-ai/claude-code) - NPM package
258- [Electron + better-sqlite3 template](https://github.com/ethanmick/minimal-electron-vite-react-better-sqlite) - Starting point