@compilr-dev/cli 0.7.2 → 0.7.3
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/dist/compilr-diff-companion.vsix +0 -0
- package/dist/ui/overlay/data/tutorial-registry.js +4 -0
- package/dist/ui/overlay/data/tutorials/basics/image-support.d.ts +8 -0
- package/dist/ui/overlay/data/tutorials/basics/image-support.js +91 -0
- package/dist/ui/overlay/data/tutorials/projects/app-model.d.ts +8 -0
- package/dist/ui/overlay/data/tutorials/projects/app-model.js +120 -0
- package/package.json +2 -2
|
Binary file
|
|
@@ -9,11 +9,13 @@ import { welcomeTutorial } from './tutorials/basics/welcome.js';
|
|
|
9
9
|
import { firstProjectTutorial } from './tutorials/basics/first-project.js';
|
|
10
10
|
import { firstConversationTutorial } from './tutorials/basics/first-conversation.js';
|
|
11
11
|
import { navigationTutorial } from './tutorials/basics/navigation.js';
|
|
12
|
+
import { imageSupportTutorial } from './tutorials/basics/image-support.js';
|
|
12
13
|
import { newProjectTutorial } from './tutorials/projects/new-project.js';
|
|
13
14
|
import { managingProjectsTutorial } from './tutorials/projects/managing-projects.js';
|
|
14
15
|
import { sessionManagementTutorial } from './tutorials/projects/session-management.js';
|
|
15
16
|
import { anchorsTutorial } from './tutorials/projects/anchors.js';
|
|
16
17
|
import { importProjectTutorial } from './tutorials/projects/import-project.js';
|
|
18
|
+
import { appModelTutorial } from './tutorials/projects/app-model.js';
|
|
17
19
|
import { designTutorial } from './tutorials/planning/design.js';
|
|
18
20
|
import { backlogTutorial } from './tutorials/planning/backlog.js';
|
|
19
21
|
import { sketchTutorial } from './tutorials/planning/sketch.js';
|
|
@@ -51,6 +53,7 @@ export function buildTutorialRegistry(s) {
|
|
|
51
53
|
firstProjectTutorial(s),
|
|
52
54
|
firstConversationTutorial(s),
|
|
53
55
|
navigationTutorial(s),
|
|
56
|
+
imageSupportTutorial(s),
|
|
54
57
|
],
|
|
55
58
|
},
|
|
56
59
|
// =========================================================================
|
|
@@ -65,6 +68,7 @@ export function buildTutorialRegistry(s) {
|
|
|
65
68
|
managingProjectsTutorial(s),
|
|
66
69
|
sessionManagementTutorial(s),
|
|
67
70
|
anchorsTutorial(s),
|
|
71
|
+
appModelTutorial(s),
|
|
68
72
|
],
|
|
69
73
|
},
|
|
70
74
|
// =========================================================================
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Image Support Tutorial
|
|
3
|
+
*
|
|
4
|
+
* How to share images (screenshots, mockups, diagrams) with the agent
|
|
5
|
+
* for visual analysis.
|
|
6
|
+
*/
|
|
7
|
+
export const imageSupportTutorial = (s) => ({
|
|
8
|
+
id: 'image-support',
|
|
9
|
+
title: 'Image Support',
|
|
10
|
+
description: 'Share screenshots and diagrams',
|
|
11
|
+
pages: [
|
|
12
|
+
// Page 1: Overview
|
|
13
|
+
{
|
|
14
|
+
title: 'Sharing Images',
|
|
15
|
+
lines: [
|
|
16
|
+
'',
|
|
17
|
+
` The agent can ${s.primaryBold('see images')} — screenshots, mockups, diagrams,`,
|
|
18
|
+
` error dialogs — and reason about them visually.`,
|
|
19
|
+
'',
|
|
20
|
+
` ${s.secondary('Useful for:')}`,
|
|
21
|
+
'',
|
|
22
|
+
` ${s.muted('•')} Showing a UI bug: ${s.muted('"Why is this button misaligned?"')}`,
|
|
23
|
+
` ${s.muted('•')} Translating a mockup into code`,
|
|
24
|
+
` ${s.muted('•')} Asking about an error screenshot`,
|
|
25
|
+
` ${s.muted('•')} Reviewing a diagram or architecture sketch`,
|
|
26
|
+
'',
|
|
27
|
+
` ${s.secondary('Supported formats:')}`,
|
|
28
|
+
'',
|
|
29
|
+
` ${s.primaryBold('PNG')} · ${s.primaryBold('JPEG')} · ${s.primaryBold('GIF')} · ${s.primaryBold('WebP')}`,
|
|
30
|
+
'',
|
|
31
|
+
` ${s.secondary('Supported by:')} Claude, GPT-4o, Gemini (all major vision models)`,
|
|
32
|
+
'',
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
// Page 2: How to Share
|
|
36
|
+
{
|
|
37
|
+
title: 'How to Share an Image',
|
|
38
|
+
lines: [
|
|
39
|
+
'',
|
|
40
|
+
` Just point the agent at the file path. It will call the`,
|
|
41
|
+
` ${s.primaryBold('view_image')} tool to load and analyze it.`,
|
|
42
|
+
'',
|
|
43
|
+
` ${s.secondary('Examples:')}`,
|
|
44
|
+
'',
|
|
45
|
+
` ${s.muted('"Look at /tmp/screenshot.png — what is wrong with the layout?"')}`,
|
|
46
|
+
'',
|
|
47
|
+
` ${s.muted('"Open ~/Desktop/mockup.png and turn it into a React component"')}`,
|
|
48
|
+
'',
|
|
49
|
+
` ${s.muted('"Check the error in ./bug.jpg"')}`,
|
|
50
|
+
'',
|
|
51
|
+
` ${s.secondary('Where images can live:')}`,
|
|
52
|
+
'',
|
|
53
|
+
` ${s.muted('•')} Anywhere on disk (absolute or relative paths work)`,
|
|
54
|
+
` ${s.muted('•')} In your project's knowledge base (pin them with /kb)`,
|
|
55
|
+
` ${s.muted('•')} In a project folder — the agent can list and pick them`,
|
|
56
|
+
'',
|
|
57
|
+
` ${s.warning('TIP:')} If you have multiple shots of the same bug, share them`,
|
|
58
|
+
` in one message — the agent compares views in a single pass.`,
|
|
59
|
+
'',
|
|
60
|
+
],
|
|
61
|
+
},
|
|
62
|
+
// Page 3: Limits and Token Cost
|
|
63
|
+
{
|
|
64
|
+
title: 'Limits and Token Cost',
|
|
65
|
+
lines: [
|
|
66
|
+
'',
|
|
67
|
+
` Images consume tokens. The CLI handles this automatically:`,
|
|
68
|
+
'',
|
|
69
|
+
` ${s.primaryBold('Auto-resize:')}`,
|
|
70
|
+
` Images larger than ${s.primaryBold('1568px')} are resized down to save`,
|
|
71
|
+
` tokens. You don't need to pre-process screenshots.`,
|
|
72
|
+
'',
|
|
73
|
+
` ${s.primaryBold('File size cap:')}`,
|
|
74
|
+
` Maximum ${s.primaryBold('10 MB')} per image. Larger files are rejected.`,
|
|
75
|
+
'',
|
|
76
|
+
` ${s.primaryBold('Image masking:')}`,
|
|
77
|
+
` After a few turns, old images are replaced with text`,
|
|
78
|
+
` placeholders (saves ~1000+ tokens per image). The agent`,
|
|
79
|
+
` can still reference them by description.`,
|
|
80
|
+
'',
|
|
81
|
+
` ${s.secondary('Typical cost per image (post-resize):')}`,
|
|
82
|
+
'',
|
|
83
|
+
` ${s.muted('~800 — 1.500 tokens for a UI screenshot')}`,
|
|
84
|
+
` ${s.muted('~1.500 — 3.000 tokens for a dense diagram')}`,
|
|
85
|
+
'',
|
|
86
|
+
` See ${s.primary('/context')} to inspect current image + token usage.`,
|
|
87
|
+
'',
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Application Model Tutorial
|
|
3
|
+
*
|
|
4
|
+
* Walkthrough of the /app command and ApplicationModel — the structured
|
|
5
|
+
* project blueprint that drives factory_scaffold and entity-aware codegen.
|
|
6
|
+
*/
|
|
7
|
+
import type { TutorialBuilder } from '../../tutorial-types.js';
|
|
8
|
+
export declare const appModelTutorial: TutorialBuilder;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Application Model Tutorial
|
|
3
|
+
*
|
|
4
|
+
* Walkthrough of the /app command and ApplicationModel — the structured
|
|
5
|
+
* project blueprint that drives factory_scaffold and entity-aware codegen.
|
|
6
|
+
*/
|
|
7
|
+
export const appModelTutorial = (s) => ({
|
|
8
|
+
id: 'app-model',
|
|
9
|
+
title: 'Application Model',
|
|
10
|
+
description: 'View entities, relationships, features',
|
|
11
|
+
pages: [
|
|
12
|
+
// Page 1: What is the Application Model
|
|
13
|
+
{
|
|
14
|
+
title: 'What is the Application Model?',
|
|
15
|
+
lines: [
|
|
16
|
+
'',
|
|
17
|
+
` The ${s.primaryBold('Application Model')} is a structured blueprint of your`,
|
|
18
|
+
` project — entities, fields, relationships, and features.`,
|
|
19
|
+
'',
|
|
20
|
+
` It's the bridge between ${s.primary('/design')} (planning) and`,
|
|
21
|
+
` ${s.primary('/scaffold')} (code generation).`,
|
|
22
|
+
'',
|
|
23
|
+
` ${s.secondary('When you have a model, the agent can:')}`,
|
|
24
|
+
'',
|
|
25
|
+
` ${s.muted('•')} Generate full-stack code via ${s.primaryBold('factory_scaffold')}`,
|
|
26
|
+
` ${s.muted('•')} Add entity CRUD pages, API routes, seed data automatically`,
|
|
27
|
+
` ${s.muted('•')} Keep frontend ↔ backend types in sync`,
|
|
28
|
+
` ${s.muted('•')} Apply consistent naming and validation across the app`,
|
|
29
|
+
'',
|
|
30
|
+
` Without a model, scaffolding is best-effort from prose READMEs.`,
|
|
31
|
+
` With a model, scaffolding is precise and reproducible.`,
|
|
32
|
+
'',
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
// Page 2: The /app Command
|
|
36
|
+
{
|
|
37
|
+
title: 'The /app Command',
|
|
38
|
+
lines: [
|
|
39
|
+
'',
|
|
40
|
+
` The ${s.primary('/app')} command opens an interactive overlay`,
|
|
41
|
+
` showing the ApplicationModel for the current project.`,
|
|
42
|
+
'',
|
|
43
|
+
` ${s.secondary('Three tabs (cycle with Tab):')}`,
|
|
44
|
+
'',
|
|
45
|
+
` ${s.primaryBold('Entities')} Browse each entity with fields, types,`,
|
|
46
|
+
` constraints, and relationships`,
|
|
47
|
+
'',
|
|
48
|
+
` ${s.primaryBold('Relationships')} See the connection map: which entities`,
|
|
49
|
+
` link to which (hasMany, belongsTo)`,
|
|
50
|
+
'',
|
|
51
|
+
` ${s.primaryBold('Summary')} Project identity, theme, tech stack,`,
|
|
52
|
+
` feature toggles (auth, search, dark mode)`,
|
|
53
|
+
'',
|
|
54
|
+
` ${s.secondary('Navigation:')}`,
|
|
55
|
+
'',
|
|
56
|
+
` ${s.muted('↑/↓')} Navigate items`,
|
|
57
|
+
` ${s.muted('Enter')} Open entity detail (fields + relationships)`,
|
|
58
|
+
` ${s.muted('/')} Search`,
|
|
59
|
+
` ${s.muted('q/Esc')} Close overlay`,
|
|
60
|
+
'',
|
|
61
|
+
],
|
|
62
|
+
},
|
|
63
|
+
// Page 3: How the Model is Built
|
|
64
|
+
{
|
|
65
|
+
title: 'How the Model is Built',
|
|
66
|
+
lines: [
|
|
67
|
+
'',
|
|
68
|
+
` The ApplicationModel is stored as a project document of type`,
|
|
69
|
+
` ${s.primaryBold('app-model')}. The agent maintains it through three tools:`,
|
|
70
|
+
'',
|
|
71
|
+
` ${s.primaryBold('app_model_get')} Read the current model (scoped reads)`,
|
|
72
|
+
` ${s.primaryBold('app_model_update')} Apply semantic operations:`,
|
|
73
|
+
` ${s.muted('add/remove/rename entity')}`,
|
|
74
|
+
` ${s.muted('add/remove/rename field')}`,
|
|
75
|
+
` ${s.muted('add/remove relationship')}`,
|
|
76
|
+
` ${s.muted('set identity/theme/tech stack')}`,
|
|
77
|
+
` ${s.primaryBold('app_model_validate')} Check consistency before scaffolding`,
|
|
78
|
+
'',
|
|
79
|
+
` ${s.secondary('Typical workflow:')}`,
|
|
80
|
+
'',
|
|
81
|
+
` ${s.primary('1.')} ${s.primary('/design')} or ${s.primary('/prd')} captures entities + features in prose`,
|
|
82
|
+
` ${s.primary('2.')} ${s.primary('/app')} (or the agent) builds the model incrementally`,
|
|
83
|
+
` ${s.primary('3.')} ${s.primary('/scaffold')} reads the model and generates code`,
|
|
84
|
+
'',
|
|
85
|
+
` You don't usually edit the model by hand — ask the agent.`,
|
|
86
|
+
'',
|
|
87
|
+
],
|
|
88
|
+
},
|
|
89
|
+
// Page 4: When a Model Exists
|
|
90
|
+
{
|
|
91
|
+
title: 'When a Model Exists',
|
|
92
|
+
lines: [
|
|
93
|
+
'',
|
|
94
|
+
` If ${s.primary('/app')} shows ${s.warning('"No application model found"')}, you have two`,
|
|
95
|
+
` options to create one:`,
|
|
96
|
+
'',
|
|
97
|
+
` ${s.primaryBold('Option 1 — Start fresh:')}`,
|
|
98
|
+
'',
|
|
99
|
+
` ${s.muted('"Build an app model for this project"')}`,
|
|
100
|
+
` ${s.muted('"What entities should we model for a TODO app?"')}`,
|
|
101
|
+
'',
|
|
102
|
+
` The agent will ask clarifying questions and call`,
|
|
103
|
+
` ${s.muted('app_model_update')} to build the model step by step.`,
|
|
104
|
+
'',
|
|
105
|
+
` ${s.primaryBold('Option 2 — Derive from existing planning docs:')}`,
|
|
106
|
+
'',
|
|
107
|
+
` If you already have a PRD or design doc, just say:`,
|
|
108
|
+
'',
|
|
109
|
+
` ${s.muted('"Build the app model from the PRD"')}`,
|
|
110
|
+
'',
|
|
111
|
+
` The agent reads ${s.primary('project_document_get')} and extracts entities,`,
|
|
112
|
+
` relationships, and features into a structured model.`,
|
|
113
|
+
'',
|
|
114
|
+
` Once the model exists, ${s.primary('/scaffold')} will detect it and use`,
|
|
115
|
+
` ${s.primaryBold('factory_scaffold')} to generate matching code.`,
|
|
116
|
+
'',
|
|
117
|
+
],
|
|
118
|
+
},
|
|
119
|
+
],
|
|
120
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compilr-dev/cli",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.3",
|
|
4
4
|
"description": "AI-powered coding assistant CLI using @compilr-dev/agents",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@compilr-dev/editor-core": "^0.0.2",
|
|
61
61
|
"@compilr-dev/factory": "^0.1.30",
|
|
62
62
|
"@compilr-dev/logger": "^0.1.0",
|
|
63
|
-
"@compilr-dev/sdk": "^0.10.
|
|
63
|
+
"@compilr-dev/sdk": "^0.10.9",
|
|
64
64
|
"@compilr-dev/ui-core": "^0.0.1",
|
|
65
65
|
"@modelcontextprotocol/sdk": "^1.23.0",
|
|
66
66
|
"ansi-escapes": "^7.3.0",
|