overture-mcp 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -110,6 +110,25 @@ Add this to the `mcpServers` object:
110
110
 
111
111
  Restart VS Code for the changes to take effect.
112
112
 
113
+ ### GitHub Copilot
114
+
115
+ Create a `.vscode/mcp.json` file in your project root:
116
+
117
+ ```json
118
+ {
119
+ "servers": {
120
+ "overture": {
121
+ "command": "npx",
122
+ "args": ["overture-mcp"]
123
+ }
124
+ }
125
+ }
126
+ ```
127
+
128
+ After creating the file, reload VS Code (Cmd/Ctrl + Shift + P → "Developer: Reload Window").
129
+
130
+ **Note:** GitHub Copilot MCP support requires VS Code 1.99+ and uses a different configuration format (`servers` instead of `mcpServers`).
131
+
113
132
  ### Global Installation (Optional)
114
133
 
115
134
  If you prefer to install Overture globally instead of using npx:
@@ -200,6 +219,24 @@ Add the `env` object to your MCP server configuration:
200
219
  }
201
220
  ```
202
221
 
222
+ **GitHub Copilot** (`.vscode/mcp.json`)
223
+
224
+ ```json
225
+ {
226
+ "servers": {
227
+ "overture": {
228
+ "command": "npx",
229
+ "args": ["overture-mcp"],
230
+ "env": {
231
+ "OVERTURE_HTTP_PORT": "4000",
232
+ "OVERTURE_WS_PORT": "4001",
233
+ "OVERTURE_AUTO_OPEN": "false"
234
+ }
235
+ }
236
+ }
237
+ }
238
+ ```
239
+
203
240
  **Global Installation (shell)**
204
241
 
205
242
  If you installed globally, set variables in your shell before running:
@@ -1883,6 +1883,51 @@ claude mcp add ${configServerName} --scope user
1883
1883
  claude mcp list
1884
1884
  claude mcp get ${configServerName}
1885
1885
  \`\`\`
1886
+ `;
1887
+ case "gh_copilot":
1888
+ case "gh-copilot":
1889
+ case "github-copilot":
1890
+ case "copilot":
1891
+ return `
1892
+ ### GitHub Copilot MCP Setup Instructions
1893
+
1894
+ **Workspace-level Configuration (Recommended)**
1895
+
1896
+ Create or edit \`.vscode/mcp.json\` in your project root:
1897
+
1898
+ \`\`\`json
1899
+ {
1900
+ "servers": {
1901
+ "${configServerName}": {
1902
+ "command": "npx",
1903
+ "args": ["mcp-server-name"]
1904
+ }
1905
+ }
1906
+ }
1907
+ \`\`\`
1908
+
1909
+ **User-level Configuration**
1910
+
1911
+ Add to your VS Code \`settings.json\`:
1912
+
1913
+ \`\`\`json
1914
+ {
1915
+ "github.copilot.chat.mcpServers": {
1916
+ "${configServerName}": {
1917
+ "command": "npx",
1918
+ "args": ["mcp-server-name"]
1919
+ }
1920
+ }
1921
+ }
1922
+ \`\`\`
1923
+
1924
+ **Steps:**
1925
+ 1. Create/edit the config file at one of the locations above
1926
+ 2. Add the server configuration
1927
+ 3. Save the file
1928
+ 4. Reload VS Code window (Cmd/Ctrl + Shift + P \u2192 "Developer: Reload Window")
1929
+
1930
+ **Important:** Read the existing file first - DO NOT overwrite other servers!
1886
1931
  `;
1887
1932
  default:
1888
1933
  return `
@@ -2534,7 +2579,7 @@ function handleCreateNewPlan(projectId) {
2534
2579
  };
2535
2580
  }
2536
2581
  async function handleGetUsageInstructions(agentType) {
2537
- const availableAgents = ["claude-code", "cline", "cursor", "sixth"];
2582
+ const availableAgents = ["claude-code", "cline", "cursor", "sixth", "gh_copilot"];
2538
2583
  const normalizedType = agentType.toLowerCase().trim();
2539
2584
  const agentMap = {
2540
2585
  "claude-code": "claude-code",
@@ -2543,7 +2588,13 @@ async function handleGetUsageInstructions(agentType) {
2543
2588
  "cline": "cline",
2544
2589
  "cursor": "cursor",
2545
2590
  "sixth": "sixth",
2546
- "6th": "sixth"
2591
+ "6th": "sixth",
2592
+ "gh_copilot": "gh_copilot",
2593
+ "gh-copilot": "gh_copilot",
2594
+ "github-copilot": "gh_copilot",
2595
+ "github_copilot": "gh_copilot",
2596
+ "copilot": "gh_copilot",
2597
+ "ghcopilot": "gh_copilot"
2547
2598
  };
2548
2599
  const mappedType = agentMap[normalizedType];
2549
2600
  if (!mappedType) {
package/dist/cli.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  startHttpServer,
4
4
  wsManager
5
- } from "./chunk-LFRCKLZZ.js";
5
+ } from "./chunk-HCV6SX5I.js";
6
6
 
7
7
  // src/cli.ts
8
8
  import chalk from "chalk";
package/dist/index.js CHANGED
@@ -15,7 +15,7 @@ import {
15
15
  historyStorage,
16
16
  startHttpServer,
17
17
  wsManager
18
- } from "./chunk-LFRCKLZZ.js";
18
+ } from "./chunk-HCV6SX5I.js";
19
19
 
20
20
  // src/index.ts
21
21
  import { Server } from "@modelcontextprotocol/sdk/server/index.js";
@@ -32,12 +32,12 @@ var AUTO_OPEN_BROWSER = process.env.OVERTURE_AUTO_OPEN !== "false";
32
32
  var StreamPlanChunkSchema = z.object({
33
33
  xml_chunk: z.string().describe("A chunk of the plan XML to process"),
34
34
  workspace_path: z.string().optional().describe("Absolute path to the workspace/project directory"),
35
- agent_type: z.string().optional().describe("The type of agent (claude-code, cline, cursor, sixth)")
35
+ agent_type: z.string().optional().describe("The type of agent (claude-code, cline, cursor, sixth, gh_copilot)")
36
36
  });
37
37
  var SubmitPlanSchema = z.object({
38
38
  plan_xml: z.string().describe("The complete plan XML"),
39
39
  workspace_path: z.string().optional().describe("Absolute path to the workspace/project directory"),
40
- agent_type: z.string().optional().describe("The type of agent (claude-code, cline, cursor, sixth)")
40
+ agent_type: z.string().optional().describe("The type of agent (claude-code, cline, cursor, sixth, gh_copilot)")
41
41
  });
42
42
  var GetApprovalSchema = z.object({
43
43
  project_id: z.string().optional().describe("Project ID (optional, uses current project if not specified)")
@@ -112,7 +112,7 @@ var CreateNewPlanSchema = z.object({
112
112
  project_id: z.string().optional().describe("Project ID (optional, uses current project if not specified)")
113
113
  });
114
114
  var GetUsageInstructionsSchema = z.object({
115
- agent_type: z.string().describe("The type of agent requesting instructions (claude-code, cline, cursor, sixth)")
115
+ agent_type: z.string().describe("The type of agent requesting instructions (claude-code, cline, cursor, sixth, gh_copilot)")
116
116
  });
117
117
  var TOOLS = [
118
118
  {
@@ -131,7 +131,7 @@ var TOOLS = [
131
131
  },
132
132
  agent_type: {
133
133
  type: "string",
134
- description: "The type of agent (claude-code, cline, cursor, sixth)"
134
+ description: "The type of agent (claude-code, cline, cursor, sixth, gh_copilot)"
135
135
  }
136
136
  },
137
137
  required: ["xml_chunk"]
@@ -153,7 +153,7 @@ var TOOLS = [
153
153
  },
154
154
  agent_type: {
155
155
  type: "string",
156
- description: "The type of agent (claude-code, cline, cursor, sixth)"
156
+ description: "The type of agent (claude-code, cline, cursor, sixth, gh_copilot)"
157
157
  }
158
158
  },
159
159
  required: ["plan_xml"]
@@ -398,7 +398,7 @@ var TOOLS = [
398
398
  properties: {
399
399
  agent_type: {
400
400
  type: "string",
401
- description: 'The type of agent requesting instructions. Supported: "claude-code", "cline", "cursor", "sixth"'
401
+ description: 'The type of agent requesting instructions. Supported: "claude-code", "cline", "cursor", "sixth", "gh_copilot"'
402
402
  }
403
403
  },
404
404
  required: ["agent_type"]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "overture-mcp",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "MCP Server for Claude Code, Cursor, Cline, Copilot, Windsurf - Visual AI Agent Plan Execution, Approval Workflow, Plan Visualization, Agent Orchestration. See what your AI is thinking before it writes code. Works with Claude, GPT, Gemini, DeepSeek, Qwen. Alternative to blind AI coding.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -19,7 +19,7 @@ Every AI coding agent shares the same fundamental problem: the developer types a
19
19
  - Complex implementations with multiple valid approaches
20
20
  - Tasks where getting alignment upfront saves significant rework
21
21
 
22
- **DO NOT USE** Overture for:
22
+ **DO NOT USE (Except if the user explicitity asks you to)** Overture for:
23
23
  - Simple questions or explanations
24
24
  - Single-file, small edits
25
25
  - Quick bug fixes with obvious solutions
@@ -33,6 +33,10 @@ Every AI coding agent shares the same fundamental problem: the developer types a
33
33
 
34
34
  Unlike simple 5-10 step outlines, Overture expects you to generate **fully decomposed plans** where every task is broken into its smallest meaningful units. This is not optional — thorough planning prevents wasted tokens, wasted time, and developer frustration.
35
35
 
36
+ ### The Golden Rule: ONE COMPONENT = ONE NODE
37
+
38
+ **NEVER combine multiple components or features into a single node.** Each UI component, each API endpoint, each configuration step gets its own dedicated node.
39
+
36
40
  ### Planning Requirements
37
41
 
38
42
  For every task you receive, your plan must include:
@@ -43,7 +47,59 @@ For every task you receive, your plan must include:
43
47
  4. **Dynamic Fields**: Declare any inputs needed from the user (API keys, config, preferences)
44
48
  5. **Logical Dependencies**: Edges should reflect true execution order
45
49
 
46
- ### Example: Proper Decomposition
50
+ ### Example: Good vs. Bad Planning
51
+
52
+ **BAD PLAN (lazy, combined steps - DO NOT DO THIS):**
53
+ ```
54
+ 1. Set up project
55
+ 2. Build the frontend
56
+ 3. Add backend API
57
+ 4. Deploy
58
+ ```
59
+
60
+ **GOOD PLAN (atomic decomposition - THIS IS WHAT WE WANT):**
61
+ ```
62
+ 1. Initialize Next.js project with TypeScript
63
+ 2. Configure Tailwind CSS with custom theme colors
64
+ 3. Create Header component
65
+ - Logo placement and styling
66
+ - Navigation menu items
67
+ - Mobile hamburger menu
68
+ - Dark mode toggle button
69
+ 4. Create Hero section
70
+ - Main headline with gradient text
71
+ - Subheadline copy
72
+ - Primary CTA button with hover states
73
+ - Background image/pattern
74
+ 5. Create Features section
75
+ - Section heading
76
+ - 3-column grid layout
77
+ - Individual FeatureCard component
78
+ - Icons for each feature
79
+ 6. Create Testimonials section
80
+ - Testimonial card component
81
+ - Avatar, name, role, quote
82
+ - Carousel/grid layout
83
+ 7. Create Pricing section
84
+ - Monthly/Annual toggle
85
+ - PricingCard component for each tier
86
+ - Feature comparison list
87
+ 8. Create Footer component
88
+ - Logo and tagline
89
+ - Link columns (Product, Company, Resources)
90
+ - Newsletter signup form
91
+ - Social media icons
92
+ 9. Create Contact form
93
+ - Form fields (name, email, message)
94
+ - Validation logic
95
+ - Submit handler
96
+ 10. Add SEO meta tags and Open Graph
97
+ 11. Configure Vercel deployment
98
+ ```
99
+
100
+ **Notice:** Each component (Header, Hero, Features, Footer, etc.) is its **own separate node**. Do NOT combine "Header, Hero, and Footer" into one "Build UI components" node.
101
+
102
+ ### Example: Full-Stack App Decomposition
47
103
 
48
104
  If a user asks for "a full-stack e-commerce app with Stripe integration," your plan should include nodes like:
49
105
 
@@ -345,6 +401,67 @@ If the user asks for something completely unrelated to the current plan (e.g., "
345
401
 
346
402
  ---
347
403
 
404
+ ## Branching Rules (CRITICAL FOR UI RENDERING)
405
+
406
+ When you create decision nodes with branches, you **MUST** follow these rules for the UI to render correctly:
407
+
408
+ ### Rule 1: Every branch needs follow-up tasks
409
+ For EACH branch option in a decision node, create at least one task node that is linked to that specific branch.
410
+
411
+ ### Rule 2: Use branch_parent and branch_id attributes
412
+ Tasks that belong to a specific branch MUST have both attributes:
413
+ ```xml
414
+ <node id="n3" type="task" branch_parent="n2" branch_id="b1">
415
+ ```
416
+ - `branch_parent`: The ID of the decision node (e.g., "n2")
417
+ - `branch_id`: The ID of the specific branch this task belongs to (e.g., "b1")
418
+
419
+ ### Rule 3: Create parallel branch paths
420
+ If a decision has 3 branches (b1, b2, b3), you need tasks for each:
421
+ ```xml
422
+ <!-- Decision node -->
423
+ <node id="n2" type="decision">
424
+ <branch id="b1" label="Option A">...</branch>
425
+ <branch id="b2" label="Option B">...</branch>
426
+ <branch id="b3" label="Option C">...</branch>
427
+ </node>
428
+
429
+ <!-- Tasks for branch b1 (Option A) -->
430
+ <node id="n3" type="task" branch_parent="n2" branch_id="b1">
431
+ <title>Implement Option A</title>
432
+ </node>
433
+
434
+ <!-- Tasks for branch b2 (Option B) -->
435
+ <node id="n4" type="task" branch_parent="n2" branch_id="b2">
436
+ <title>Implement Option B</title>
437
+ </node>
438
+
439
+ <!-- Tasks for branch b3 (Option C) -->
440
+ <node id="n5" type="task" branch_parent="n2" branch_id="b3">
441
+ <title>Implement Option C</title>
442
+ </node>
443
+
444
+ <!-- Edges connect decision to ALL branch tasks -->
445
+ <edge from="n2" to="n3" />
446
+ <edge from="n2" to="n4" />
447
+ <edge from="n2" to="n5" />
448
+ ```
449
+
450
+ ### Rule 4: Branches can converge
451
+ After branch-specific tasks, you can have a common task that all branches lead to:
452
+ ```xml
453
+ <!-- Common task after all branches -->
454
+ <node id="n6" type="task">
455
+ <title>Continue with shared step</title>
456
+ </node>
457
+
458
+ <edge from="n3" to="n6" />
459
+ <edge from="n4" to="n6" />
460
+ <edge from="n5" to="n6" />
461
+ ```
462
+
463
+ ---
464
+
348
465
  ## Dynamic Field Types
349
466
 
350
467
  | Type | Use Case | Required Attributes |
package/prompts/cline.md CHANGED
@@ -8,6 +8,22 @@ Every AI coding agent shares the same fundamental problem: the developer types a
8
8
 
9
9
  **Overture solves this by making your plan visible, editable, and approvable before execution begins.**
10
10
 
11
+ ## When to Use Overture
12
+
13
+ **USE** Overture for any task involving:
14
+ - Multiple steps or files to create/modify
15
+ - Architectural decisions the user should weigh in on
16
+ - User configuration (API keys, preferences, settings)
17
+ - Complex implementations with multiple valid approaches
18
+ - Tasks where getting alignment upfront saves significant rework
19
+
20
+ **DO NOT USE (Except if the user explicitity asks you to)** Overture for:
21
+ - Simple questions or explanations
22
+ - Single-file, small edits
23
+ - Quick bug fixes with obvious solutions
24
+ - Research or exploration tasks
25
+
26
+
11
27
  ---
12
28
 
13
29
  ## Critical: Extended Planning Mode
@@ -26,16 +42,21 @@ For every task you receive, your plan must include:
26
42
  4. **Dynamic Fields**: Declare any inputs needed from the user (API keys, config, preferences)
27
43
  5. **Logical Dependencies**: Edges should reflect true execution order
28
44
 
45
+ ### The Golden Rule: ONE COMPONENT = ONE NODE
46
+
47
+ **NEVER combine multiple components or features into a single node.** Each UI component, each API endpoint, each configuration step gets its own dedicated node.
48
+
29
49
  ### Example: Good vs. Bad Planning
30
50
 
31
- **Bad Plan** (too vague):
51
+ **BAD PLAN (lazy, combined steps - DO NOT DO THIS):**
32
52
  ```
33
53
  1. Set up project
34
- 2. Build landing page
35
- 3. Deploy
54
+ 2. Build the frontend
55
+ 3. Add backend API
56
+ 4. Deploy
36
57
  ```
37
58
 
38
- **Good Plan** (properly decomposed):
59
+ **GOOD PLAN (atomic decomposition - THIS IS WHAT WE WANT):**
39
60
  ```
40
61
  1. Initialize Vite + React project with TypeScript
41
62
  2. Configure Tailwind CSS with custom theme
@@ -52,16 +73,29 @@ For every task you receive, your plan must include:
52
73
  - Grid layout (3 columns on desktop, 1 on mobile)
53
74
  - Feature card component
54
75
  - Icon selection for each feature
55
- 6. Create Footer component
76
+ 6. Create Testimonials section
77
+ - Testimonial card component
78
+ - Avatar, name, role, quote
79
+ 7. Create Pricing section
80
+ - Monthly/Annual toggle
81
+ - PricingCard component
82
+ - Feature comparison list
83
+ 8. Create Footer component
56
84
  - Link groups
57
85
  - Newsletter signup form
58
86
  - Social media icons
59
- 7. Add SEO meta tags and Open Graph
60
- 8. Configure deployment (Vercel/Netlify)
61
- - Environment variables
62
- - Build configuration
87
+ 9. Create Contact form
88
+ - Form fields (name, email, message)
89
+ - Validation logic
90
+ - Submit handler
91
+ 10. Add SEO meta tags and Open Graph
92
+ 11. Configure deployment (Vercel/Netlify)
93
+ - Environment variables
94
+ - Build configuration
63
95
  ```
64
96
 
97
+ **Notice:** Each component (Header, Hero, Features, Footer, etc.) is its **own separate node**. Do NOT combine "Header, Hero, and Footer" into one "Build UI components" node.
98
+
65
99
  Each of these becomes a node on the visual canvas.
66
100
 
67
101
  ---
@@ -227,6 +261,67 @@ If the user asks for something completely unrelated to the current plan (e.g., "
227
261
 
228
262
  ---
229
263
 
264
+ ## Branching Rules (CRITICAL FOR UI RENDERING)
265
+
266
+ When you create decision nodes with branches, you **MUST** follow these rules for the UI to render correctly:
267
+
268
+ ### Rule 1: Every branch needs follow-up tasks
269
+ For EACH branch option in a decision node, create at least one task node that is linked to that specific branch.
270
+
271
+ ### Rule 2: Use branch_parent and branch_id attributes
272
+ Tasks that belong to a specific branch MUST have both attributes:
273
+ ```xml
274
+ <node id="n3" type="task" branch_parent="n2" branch_id="b1">
275
+ ```
276
+ - `branch_parent`: The ID of the decision node (e.g., "n2")
277
+ - `branch_id`: The ID of the specific branch this task belongs to (e.g., "b1")
278
+
279
+ ### Rule 3: Create parallel branch paths
280
+ If a decision has 3 branches (b1, b2, b3), you need tasks for each:
281
+ ```xml
282
+ <!-- Decision node -->
283
+ <node id="n2" type="decision">
284
+ <branch id="b1" label="Option A">...</branch>
285
+ <branch id="b2" label="Option B">...</branch>
286
+ <branch id="b3" label="Option C">...</branch>
287
+ </node>
288
+
289
+ <!-- Tasks for branch b1 (Option A) -->
290
+ <node id="n3" type="task" branch_parent="n2" branch_id="b1">
291
+ <title>Implement Option A</title>
292
+ </node>
293
+
294
+ <!-- Tasks for branch b2 (Option B) -->
295
+ <node id="n4" type="task" branch_parent="n2" branch_id="b2">
296
+ <title>Implement Option B</title>
297
+ </node>
298
+
299
+ <!-- Tasks for branch b3 (Option C) -->
300
+ <node id="n5" type="task" branch_parent="n2" branch_id="b3">
301
+ <title>Implement Option C</title>
302
+ </node>
303
+
304
+ <!-- Edges connect decision to ALL branch tasks -->
305
+ <edge from="n2" to="n3" />
306
+ <edge from="n2" to="n4" />
307
+ <edge from="n2" to="n5" />
308
+ ```
309
+
310
+ ### Rule 4: Branches can converge
311
+ After branch-specific tasks, you can have a common task that all branches lead to:
312
+ ```xml
313
+ <!-- Common task after all branches -->
314
+ <node id="n6" type="task">
315
+ <title>Continue with shared step</title>
316
+ </node>
317
+
318
+ <edge from="n3" to="n6" />
319
+ <edge from="n4" to="n6" />
320
+ <edge from="n5" to="n6" />
321
+ ```
322
+
323
+ ---
324
+
230
325
  ## Dynamic Field Types
231
326
 
232
327
  | Type | Use Case | Example |
package/prompts/cursor.md CHANGED
@@ -8,6 +8,22 @@ Every AI coding agent shares the same fundamental problem: the developer types a
8
8
 
9
9
  **Overture solves this by making your plan visible, editable, and approvable before execution begins.**
10
10
 
11
+ ## When to Use Overture
12
+
13
+ **USE** Overture for any task involving:
14
+ - Multiple steps or files to create/modify
15
+ - Architectural decisions the user should weigh in on
16
+ - User configuration (API keys, preferences, settings)
17
+ - Complex implementations with multiple valid approaches
18
+ - Tasks where getting alignment upfront saves significant rework
19
+
20
+ **DO NOT USE (Except if the user explicitity asks you to)** Overture for:
21
+ - Simple questions or explanations
22
+ - Single-file, small edits
23
+ - Quick bug fixes with obvious solutions
24
+ - Research or exploration tasks
25
+
26
+
11
27
  ---
12
28
 
13
29
  ## Critical: Extended Planning Mode
@@ -26,20 +42,62 @@ For every task you receive, your plan must include:
26
42
  4. **Dynamic Fields**: Declare any inputs needed from the user (API keys, config, preferences)
27
43
  5. **Logical Dependencies**: Edges should reflect true execution order
28
44
 
29
- ### Example: Proper Decomposition
45
+ ### The Golden Rule: ONE COMPONENT = ONE NODE
46
+
47
+ **NEVER combine multiple components or features into a single node.** Each UI component, each API endpoint, each configuration step gets its own dedicated node.
48
+
49
+ ### Example: Good vs. Bad Planning
50
+
51
+ **BAD PLAN (lazy, combined steps - DO NOT DO THIS):**
52
+ ```
53
+ 1. Set up project
54
+ 2. Build the frontend
55
+ 3. Add backend API
56
+ 4. Deploy
57
+ ```
58
+
59
+ **GOOD PLAN (atomic decomposition - THIS IS WHAT WE WANT):**
30
60
 
31
61
  If a user asks for "a landing page," your plan should NOT just say "build a landing page." It should include:
32
62
 
33
- - Project initialization (framework selection, folder structure, dependency installation)
34
- - Header component (logo placement, navigation items, mobile responsiveness, dark mode toggle)
35
- - Hero section (headline copy, subheadline, CTA button, background image/gradient, animations)
36
- - Features section (grid layout, icon selection, copy for each feature card)
37
- - Social proof / testimonials section
38
- - Pricing section (tier structure, toggle for monthly/annual)
39
- - Footer (links, newsletter signup, social icons)
40
- - SEO setup (meta tags, Open Graph, sitemap)
41
- - Performance optimization (image compression, lazy loading)
42
- - Deployment configuration (CI/CD, environment variables, domain setup)
63
+ ```
64
+ 1. Initialize Next.js project with TypeScript
65
+ 2. Configure Tailwind CSS with custom theme
66
+ 3. Create Header component
67
+ - Logo placement and sizing
68
+ - Navigation items with responsive menu
69
+ - Dark mode toggle
70
+ 4. Create Hero section
71
+ - Headline and subheadline copy
72
+ - CTA button with hover states
73
+ - Background gradient/image
74
+ - Entrance animations
75
+ 5. Create Features section
76
+ - Grid layout (3 columns on desktop, 1 on mobile)
77
+ - Feature card component
78
+ - Icon selection for each feature
79
+ 6. Create Testimonials section
80
+ - Testimonial card component
81
+ - Avatar, name, role, quote
82
+ 7. Create Pricing section
83
+ - Monthly/Annual toggle
84
+ - PricingCard component
85
+ - Feature comparison list
86
+ 8. Create Footer component
87
+ - Link groups
88
+ - Newsletter signup form
89
+ - Social media icons
90
+ 9. Create Contact form
91
+ - Form fields (name, email, message)
92
+ - Validation logic
93
+ - Submit handler
94
+ 10. Add SEO meta tags and Open Graph
95
+ 11. Configure deployment (Vercel/Netlify)
96
+ - Environment variables
97
+ - Build configuration
98
+ ```
99
+
100
+ **Notice:** Each component (Header, Hero, Features, Footer, etc.) is its **own separate node**. Do NOT combine "Header, Hero, and Footer" into one "Build UI components" node.
43
101
 
44
102
  Each of these becomes a node on the visual canvas with full details.
45
103
 
@@ -230,6 +288,67 @@ If the user asks for something completely unrelated to the current plan (e.g., "
230
288
 
231
289
  ---
232
290
 
291
+ ## Branching Rules (CRITICAL FOR UI RENDERING)
292
+
293
+ When you create decision nodes with branches, you **MUST** follow these rules for the UI to render correctly:
294
+
295
+ ### Rule 1: Every branch needs follow-up tasks
296
+ For EACH branch option in a decision node, create at least one task node that is linked to that specific branch.
297
+
298
+ ### Rule 2: Use branch_parent and branch_id attributes
299
+ Tasks that belong to a specific branch MUST have both attributes:
300
+ ```xml
301
+ <node id="n3" type="task" branch_parent="n2" branch_id="b1">
302
+ ```
303
+ - `branch_parent`: The ID of the decision node (e.g., "n2")
304
+ - `branch_id`: The ID of the specific branch this task belongs to (e.g., "b1")
305
+
306
+ ### Rule 3: Create parallel branch paths
307
+ If a decision has 3 branches (b1, b2, b3), you need tasks for each:
308
+ ```xml
309
+ <!-- Decision node -->
310
+ <node id="n2" type="decision">
311
+ <branch id="b1" label="Option A">...</branch>
312
+ <branch id="b2" label="Option B">...</branch>
313
+ <branch id="b3" label="Option C">...</branch>
314
+ </node>
315
+
316
+ <!-- Tasks for branch b1 (Option A) -->
317
+ <node id="n3" type="task" branch_parent="n2" branch_id="b1">
318
+ <title>Implement Option A</title>
319
+ </node>
320
+
321
+ <!-- Tasks for branch b2 (Option B) -->
322
+ <node id="n4" type="task" branch_parent="n2" branch_id="b2">
323
+ <title>Implement Option B</title>
324
+ </node>
325
+
326
+ <!-- Tasks for branch b3 (Option C) -->
327
+ <node id="n5" type="task" branch_parent="n2" branch_id="b3">
328
+ <title>Implement Option C</title>
329
+ </node>
330
+
331
+ <!-- Edges connect decision to ALL branch tasks -->
332
+ <edge from="n2" to="n3" />
333
+ <edge from="n2" to="n4" />
334
+ <edge from="n2" to="n5" />
335
+ ```
336
+
337
+ ### Rule 4: Branches can converge
338
+ After branch-specific tasks, you can have a common task that all branches lead to:
339
+ ```xml
340
+ <!-- Common task after all branches -->
341
+ <node id="n6" type="task">
342
+ <title>Continue with shared step</title>
343
+ </node>
344
+
345
+ <edge from="n3" to="n6" />
346
+ <edge from="n4" to="n6" />
347
+ <edge from="n5" to="n6" />
348
+ ```
349
+
350
+ ---
351
+
233
352
  ## Dynamic Field Types
234
353
 
235
354
  | Type | Use Case | Example |