@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlay/data/tutorials/planning/scaffold.js

@@ -0,0 +1,164 @@
+/**
+ * Scaffold Tutorial
+ *
+ * Walkthrough of the /scaffold command for creating project foundations.
+ */
+export const scaffoldTutorial = (s) => ({
+    id: 'scaffold',
+    title: 'Project Scaffolding',
+    description: 'Create project foundation',
+    pages: [
+        // Page 1: Introduction
+        {
+            title: 'Project Scaffolding',
+            lines: [
+                '',
+                `  The ${s.primary('/scaffold')} command creates the base project structure`,
+                `  — folders, config files, dependencies, and initial code.`,
+                '',
+                `  ${s.secondary('When to use /scaffold:')}`,
+                '',
+                `    ${s.muted('•')} After ${s.primary('/design')} or ${s.primary('/sketch')} has created your backlog`,
+                `    ${s.muted('•')} When starting from scratch (empty project directory)`,
+                `    ${s.muted('•')} When you need a working foundation before features`,
+                '',
+                `  ${s.secondary('What it produces:')}`,
+                '',
+                `    ${s.muted('•')} Folder structure (src, tests, config)`,
+                `    ${s.muted('•')} Build tooling (package.json, tsconfig, vite, etc.)`,
+                `    ${s.muted('•')} Initial source files (app entry, routes, etc.)`,
+                `    ${s.muted('•')} Dependency installation and verified build`,
+                `    ${s.muted('•')} Initial git commit`,
+                '',
+            ],
+        },
+        // Page 2: Prerequisites
+        {
+            title: 'Prerequisites',
+            lines: [
+                '',
+                `  Before running ${s.primary('/scaffold')}, you need:`,
+                '',
+                `    ${s.primary('1.')} An active project (via ${s.primary('/new')} or ${s.primary('/projects')})`,
+                `    ${s.primary('2.')} A project path set (where files will be created)`,
+                '',
+                `  The agent reads your project's backlog and documents`,
+                `  to understand the tech stack and requirements.`,
+                '',
+                `  ${s.warning('!')} If your working directory differs from the project path,`,
+                `  you'll see a warning:`,
+                '',
+                `    ${s.warning('Working directory differs from project path!')}`,
+                `    ${s.muted('cwd:     /workspace')}`,
+                `    ${s.muted('project: /workspace/projects/my-app')}`,
+                `    ${s.muted('Files will be created in the project path, not cwd.')}`,
+                '',
+                `  This is normal — the agent uses ${s.primaryBold('absolute paths')}.`,
+                '',
+            ],
+        },
+        // Page 3: Model Recommendation
+        {
+            title: 'Model Recommendation',
+            lines: [
+                '',
+                `  Like ${s.primary('/design')}, scaffolding works best with larger models.`,
+                `  If you're on a smaller model, you'll see:`,
+                '',
+                `     ${s.warning('! Model Recommendation')}`,
+                '',
+                `     /scaffold works best with larger models.`,
+                `     Current: ${s.muted('claude-haiku-4-5-20251001 (medium tier)')}`,
+                '',
+                `     ${s.primary('>')} 1. Switch model and continue`,
+                `       2. Use /sketch instead`,
+                `       3. Continue with current model anyway`,
+                '',
+                `  ${s.secondary('Recommendation:')} Sonnet or Opus will produce better`,
+                `  folder structures, config files, and initial code.`,
+                `  Haiku can scaffold but may miss details.`,
+                '',
+            ],
+        },
+        // Page 4: What Happens
+        {
+            title: 'What Happens',
+            lines: [
+                '',
+                `  After you run ${s.primary('/scaffold')}, the agent:`,
+                '',
+                `    ${s.primary('1.')} Reads project documents and backlog`,
+                `       ${s.muted('project_document_list → workitem_query')}`,
+                '',
+                `    ${s.primary('2.')} Asks for confirmation of the tech stack`,
+                `       ${s.muted('e.g., "React + Vite frontend, Node + Express backend?"')}`,
+                '',
+                `    ${s.primary('3.')} Creates a todo plan`,
+                `       ${s.muted('☐ Create directory structure')}`,
+                `       ${s.muted('☐ Create frontend scaffold')}`,
+                `       ${s.muted('☐ Create backend scaffold')}`,
+                `       ${s.muted('☐ Install dependencies')}`,
+                `       ${s.muted('☐ Create initial git commit')}`,
+                '',
+                `    ${s.primary('4.')} Generates files, installs deps, verifies build`,
+                '',
+                `    ${s.primary('5.')} Updates backlog (marks scaffold item complete)`,
+                '',
+            ],
+        },
+        // Page 5: During Execution
+        {
+            title: 'During Execution',
+            lines: [
+                '',
+                `  Scaffolding typically takes ${s.primaryBold('3-5 minutes')} and uses`,
+                `  ${s.primaryBold('30-40 tool calls')}. You'll see progress in real-time:`,
+                '',
+                `  ${s.muted('● write_file(/my-app/package.json)')}`,
+                `    ${s.muted('⎿  File written')}`,
+                '',
+                `  ${s.muted('● write_file(/my-app/frontend/tsconfig.json)')}`,
+                `    ${s.muted('⎿  File written')}`,
+                '',
+                `  ${s.muted('● Bash(npm install)')}`,
+                `    ${s.muted('⎿  added 245 packages')}`,
+                '',
+                `  The footer shows todo progress as items complete:`,
+                '',
+                `  ${s.success('✓')} Create project directory structure`,
+                `  ${s.success('✓')} Create frontend (React + Vite) scaffold`,
+                `  ${s.primary('→')} Create backend (Node.js + Express) scaffold`,
+                `  ${s.muted('☐')} Install dependencies and verify build`,
+                `  ${s.muted('☐')} Create initial git commit`,
+                '',
+            ],
+        },
+        // Page 6: Result
+        {
+            title: 'Result & Next Steps',
+            lines: [
+                '',
+                `  When done, the agent provides a summary showing:`,
+                '',
+                `    ${s.success('✓')} Build status (frontend + backend compile)`,
+                `    ${s.success('✓')} Lint status (0 errors, 0 warnings)`,
+                `    ${s.success('✓')} Git commit hash`,
+                '',
+                `  ${s.secondary('What to do next:')}`,
+                '',
+                `    ${s.primary('/backlog')}    View your work items`,
+                `    ${s.primary('/build')}      Start implementing a backlog item`,
+                `    ${s.muted('or just ask')}  "Start working on REQ-002"`,
+                '',
+                `  ${s.secondary('The typical workflow:')}`,
+                '',
+                `    ${s.primary('/design')} → ${s.primary('/scaffold')} → ${s.primary('/build')} (repeat per item)`,
+                `    ${s.muted('plan       create       implement')}`,
+                '',
+                `  ${s.warning('TIP:')} You can also type "Create project scaffold" in`,
+                `  normal chat — the ${s.primary('/scaffold')} command is a shortcut.`,
+                '',
+            ],
+        },
+    ],
+});

package/dist/ui/overlay/data/tutorials/planning/sketch.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Quick Sketch Tutorial
+ *
+ * Overview of the /sketch command as a lightweight alternative to /design.
+ */
+import type { TutorialBuilder } from '../../tutorial-types.js';
+export declare const sketchTutorial: TutorialBuilder;

package/dist/ui/overlay/data/tutorials/planning/sketch.js

@@ -0,0 +1,58 @@
+/**
+ * Quick Sketch Tutorial
+ *
+ * Overview of the /sketch command as a lightweight alternative to /design.
+ */
+export const sketchTutorial = (s) => ({
+    id: 'sketch',
+    title: 'Quick Sketch',
+    description: 'Fast planning alternative',
+    pages: [
+        // Page 1: Introduction
+        {
+            title: 'Quick Sketch',
+            lines: [
+                '',
+                `  The ${s.primary('/sketch')} command is a lightweight alternative`,
+                `  to ${s.primary('/design')} for fast project planning.`,
+                '',
+                `  ${s.secondary('Key differences from /design:')}`,
+                '',
+                `    ${s.primary('/design')}   Multi-phase, batched questions, thorough`,
+                `              Best with larger models (Sonnet/Opus)`,
+                '',
+                `    ${s.primary('/sketch')}   6 quick questions, one at a time`,
+                `              Works well with ${s.primaryBold('any model')} (including Haiku)`,
+                '',
+                `  Use ${s.primary('/sketch')} when you want to get started quickly`,
+                `  without a full requirements gathering session.`,
+                '',
+            ],
+        },
+        // Page 2: How It Works
+        {
+            title: 'How It Works',
+            lines: [
+                '',
+                `  The agent asks ${s.primaryBold('6 simple questions')}, one at a time:`,
+                '',
+                `    ${s.primary('1.')} What are you building?`,
+                `    ${s.primary('2.')} Who is the target user?`,
+                `    ${s.primary('3.')} What are the core features?`,
+                `    ${s.primary('4.')} What tech stack?`,
+                `    ${s.primary('5.')} Any constraints or requirements?`,
+                `    ${s.primary('6.')} What's the MVP scope?`,
+                '',
+                `  Each question appears as a simple dialog — type your`,
+                `  answer and press Enter to move to the next one.`,
+                '',
+                `  After all questions, the agent generates backlog items`,
+                `  just like ${s.primary('/design')} does.`,
+                '',
+                `  ${s.warning('TIP:')} For a more thorough planning process, see the`,
+                `  ${s.primary('Design Workflow')} tutorial in this section.`,
+                '',
+            ],
+        },
+    ],
+});

package/dist/ui/overlay/data/tutorials/projects/anchors.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Anchors & Context Tutorial
+ *
+ * How to use anchors for persistent information across sessions.
+ */
+import type { TutorialBuilder } from '../../tutorial-types.js';
+export declare const anchorsTutorial: TutorialBuilder;

package/dist/ui/overlay/data/tutorials/projects/anchors.js

@@ -0,0 +1,248 @@
+/**
+ * Anchors & Context Tutorial
+ *
+ * How to use anchors for persistent information across sessions.
+ */
+export const anchorsTutorial = (s) => ({
+    id: 'anchors',
+    title: 'Anchors & Context',
+    description: 'Persistent notes and context management',
+    pages: [
+        // Page 1: Introduction
+        {
+            title: 'What are Anchors?',
+            lines: [
+                '',
+                `  Anchors are ${s.primary('persistent notes')} that the AI always sees.`,
+                '',
+                `  Use them for:`,
+                '',
+                `    ${s.muted('•')} Project conventions ${s.muted('("Always use async/await")')}`,
+                `    ${s.muted('•')} Important decisions ${s.muted('("We chose PostgreSQL because...")')}`,
+                `    ${s.muted('•')} Safety reminders ${s.muted('("Don\'t modify the auth module")')}`,
+                `    ${s.muted('•')} Context that should persist ${s.muted('("User prefers tabs over spaces")')}`,
+                '',
+                `  Unlike conversation history, anchors ${s.primary('survive across sessions')}.`,
+                '',
+            ],
+        },
+        // Page 2: /anchors overlay
+        {
+            title: 'The /anchors Overlay',
+            lines: [
+                '',
+                `  Run ${s.primary('/anchors')} to manage your anchors:`,
+                '',
+                `    ${s.muted('─'.repeat(70))}`,
+                `    ${s.primaryBold('Anchors')} ${s.muted('[3/3]')}`,
+                '',
+                `     ${s.muted('All')}  ${s.muted('Critical')}  ${s.muted('Safety')}  ${s.muted('Info')}  ${s.muted('Global')}  ${s.muted('Project')}`,
+                '',
+                `    ${s.primary('❯')} ${s.error('[S]')} ${s.warning('[G]')} Before deleting files, confirm the path...`,
+                `      ${s.error('[S]')} ${s.warning('[G]')} Before destructive git operations...`,
+                `      ${s.error('[S]')} ${s.warning('[G]')} Before DROP TABLE, TRUNCATE, or DELETE...`,
+                '',
+                `    ${s.muted('─'.repeat(70))}`,
+                '',
+            ],
+        },
+        // Page 3: Anchor badges
+        {
+            title: 'Anchor Badges',
+            lines: [
+                '',
+                `  Each anchor shows badges indicating its properties:`,
+                '',
+                `  ${s.secondary('Priority badges:')}`,
+                `    ${s.error('[C]')}  Critical - Highest priority, always shown first`,
+                `    ${s.error('[S]')}  Safety - Safety-related reminders`,
+                `    ${s.primary('[I]')}  Info - General information`,
+                '',
+                `  ${s.secondary('Scope badges:')}`,
+                `    ${s.warning('[G]')}  Global - Applies to all projects`,
+                `    ${s.primary('[P]')}  Project - Only for current project`,
+                '',
+                `  ${s.muted('Example:')} ${s.error('[S]')} ${s.warning('[G]')} = Safety anchor, global scope`,
+                '',
+            ],
+        },
+        // Page 4: Filtering anchors
+        {
+            title: 'Filtering Anchors',
+            lines: [
+                '',
+                `  Use the tabs to filter anchors:`,
+                '',
+                `     ${s.primary('All')}  ${s.muted('Critical')}  ${s.muted('Safety')}  ${s.muted('Info')}  ${s.muted('Global')}  ${s.muted('Project')}`,
+                '',
+                `    ${s.primary('All')}        Show all anchors`,
+                `    ${s.primary('Critical')}   Only critical priority`,
+                `    ${s.primary('Safety')}     Only safety reminders`,
+                `    ${s.primary('Info')}       Only informational`,
+                `    ${s.primary('Global')}     Anchors for all projects`,
+                `    ${s.primary('Project')}    Anchors for current project only`,
+                '',
+                `  ${s.secondary('Navigation:')}`,
+                `    ${s.primary('Tab')} or ${s.primary('←/→')}    Switch tabs`,
+                `    ${s.primary('1-6')}             Jump to tab by number`,
+                '',
+            ],
+        },
+        // Page 5: Anchor actions
+        {
+            title: 'Managing Anchors',
+            lines: [
+                '',
+                `  From the ${s.primary('/anchors')} list:`,
+                '',
+                `    ${s.primary('a')}        Add new anchor`,
+                `    ${s.primary('e')}        Edit selected anchor`,
+                `    ${s.primary('d')}        Delete anchor`,
+                `    ${s.primary('/')}        Search anchors`,
+                '',
+                `  ${s.secondary('Navigation:')}`,
+                '',
+                `    ${s.primary('↑/↓')} or ${s.primary('j/k')}    Move between anchors`,
+                `    ${s.primary('q')} or ${s.primary('Esc')}      Close overlay`,
+                '',
+            ],
+        },
+        // Page 6: Edit screen
+        {
+            title: 'Editing an Anchor',
+            lines: [
+                '',
+                `  Press ${s.primary('e')} to edit an anchor:`,
+                '',
+                `    ${s.muted('─'.repeat(50))}`,
+                `    ${s.primaryBold('EDIT ANCHOR')}`,
+                '',
+                `    ID: ${s.muted('builtin-file-safety')}`,
+                `    Priority: ${s.error('safety')}`,
+                `    Scope: ${s.warning('global')}`,
+                '',
+                `    ${s.secondary('Content:')}`,
+                `    ${s.muted('Before deleting files or directories, confirm')}`,
+                `    ${s.muted('the path is correct and consider if content')}`,
+                `    ${s.muted('should be backed up...')}`,
+                '',
+                `    ${s.muted('336 chars remaining')}`,
+                `    ${s.muted('─'.repeat(50))}`,
+                `    ${s.muted('←→ Navigate · Enter Save · Esc Cancel')}`,
+                '',
+            ],
+        },
+        // Page 7: Adding via REPL
+        {
+            title: 'Adding Anchors via Chat',
+            lines: [
+                '',
+                `  You can also ask the AI to create anchors:`,
+                '',
+                `    ${s.primary('compilr>')} Remember that we use tabs not spaces`,
+                '',
+                `    ${s.primary('compilr>')} Remember: never modify the auth module`,
+                '',
+                `    ${s.primary('compilr>')} Add an anchor: our API uses REST, not GraphQL`,
+                '',
+                `  The AI will create an anchor for you and confirm.`,
+                '',
+                `  ${s.warning('TIP:')} Be specific! The AI includes your exact wording`,
+                `  in the anchor content.`,
+                '',
+            ],
+        },
+        // Page 8: How AI uses anchors
+        {
+            title: 'How the AI Uses Anchors',
+            lines: [
+                '',
+                `  Anchors are included in the AI's ${s.primary('system prompt')}.`,
+                '',
+                `  This means:`,
+                '',
+                `    ${s.success('✓')} AI sees them at the start of every conversation`,
+                `    ${s.success('✓')} They persist across sessions`,
+                `    ${s.success('✓')} They're not affected by ${s.primary('/compact')}`,
+                `    ${s.success('✓')} Critical and safety anchors are prioritized`,
+                '',
+                `  ${s.secondary('Built-in anchors:')}`,
+                `    The CLI includes default safety anchors for:`,
+                `    ${s.muted('•')} File deletion safety`,
+                `    ${s.muted('•')} Git destructive operations`,
+                `    ${s.muted('•')} Database destructive queries`,
+                '',
+            ],
+        },
+        // Page 9: The /context command
+        {
+            title: 'The /context Command',
+            lines: [
+                '',
+                `  Run ${s.primary('/context')} to see your context usage:`,
+                '',
+                `    ${s.primaryBold('Context Usage')}`,
+                `    ${s.muted('─'.repeat(40))}`,
+                `      Usage:    ${s.success('████████')}${s.muted('████████████')} ${s.primary('42.3%')}`,
+                `      Tokens:   ${s.primary('423,456')} / 1,000,000`,
+                `      Messages: ${s.primary('156')}`,
+                `      Turns:    ${s.primary('78')}`,
+                '',
+                `  ${s.secondary('What each metric means:')}`,
+                '',
+                `    ${s.primary('Usage')}     Percentage of context window used`,
+                `    ${s.primary('Tokens')}    Current tokens / maximum allowed`,
+                `    ${s.primary('Messages')}  Total messages in conversation`,
+                `    ${s.primary('Turns')}     Back-and-forth exchanges`,
+                '',
+            ],
+        },
+        // Page 10: Context with team agents
+        {
+            title: 'Context with Team Agents',
+            lines: [
+                '',
+                `  When using ${s.primary('team agents')}, /context shows per-agent breakdown:`,
+                '',
+                `    ${s.primaryBold('Context Usage')}`,
+                `    ${s.muted('─'.repeat(40))}`,
+                `      Usage:    ${s.success('██████')}${s.muted('██████████████')} ${s.primary('31.2%')}`,
+                `      Tokens:   ${s.primary('312,400')} / 1,000,000`,
+                '',
+                `    ${s.secondary('By Agent')}`,
+                `    ${s.muted('─'.repeat(40))}`,
+                `      ${s.success('●')} ${s.muted('[•_•]')} $default  ${s.success('████')}${s.muted('██████')}  ${s.primary('12.4%')}  (32 msgs)`,
+                `      ${s.primary('○')} ${s.muted('[▣_▣]')} $pm       ${s.primary('███')}${s.muted('███████')}   ${s.primary('8.1%')}  (18 msgs)`,
+                `      ${s.primary('○')} ${s.muted('[◈_◈]')} $arch     ${s.primary('██')}${s.muted('████████')}   ${s.primary('6.2%')}  (14 msgs)`,
+                `      ${s.primary('○')} ${s.muted('[▲_▲]')} $dev      ${s.primary('██')}${s.muted('████████')}   ${s.primary('4.5%')}  (12 msgs)`,
+                '',
+                `  ${s.success('●')} = active agent   ${s.primary('○')} = inactive`,
+                '',
+            ],
+        },
+        // Page 11: Managing context
+        {
+            title: 'Managing Context',
+            lines: [
+                '',
+                `  When context gets full, use ${s.primary('/compact')} to summarize:`,
+                '',
+                `    ${s.primary('compilr>')} /compact`,
+                '',
+                `    ${s.muted('Compacting context...')}`,
+                `    ${s.success('✓')} Reduced from 892,000 to 45,000 tokens`,
+                '',
+                `  ${s.secondary('What /compact does:')}`,
+                '',
+                `    ${s.muted('•')} Summarizes conversation history`,
+                `    ${s.muted('•')} Preserves key decisions and context`,
+                `    ${s.muted('•')} Keeps anchors intact (they're separate)`,
+                `    ${s.muted('•')} Maintains recent messages for continuity`,
+                '',
+                `  ${s.warning('TIP:')} Run ${s.primary('/compact')} when usage exceeds 80%`,
+                `  to avoid hitting the context limit mid-conversation.`,
+                '',
+            ],
+        },
+    ],
+});

package/dist/ui/overlay/data/tutorials/projects/import-project.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Importing an Existing Project Tutorial
+ *
+ * Detailed walkthrough of the /new wizard's "Add workflow to existing project" flow.
+ */
+import type { TutorialBuilder } from '../../tutorial-types.js';
+export declare const importProjectTutorial: TutorialBuilder;

package/dist/ui/overlay/data/tutorials/projects/import-project.js

@@ -0,0 +1,172 @@
+/**
+ * Importing an Existing Project Tutorial
+ *
+ * Detailed walkthrough of the /new wizard's "Add workflow to existing project" flow.
+ */
+export const importProjectTutorial = (s) => ({
+    id: 'import-project',
+    title: 'Importing an Existing Project',
+    description: 'Add compilr workflow to existing code',
+    pages: [
+        // Page 1: Introduction
+        {
+            title: 'Importing an Existing Project',
+            lines: [
+                '',
+                `  Already have a codebase? You can add compilr workflow tracking`,
+                `  to any existing project without changing your code.`,
+                '',
+                `  Run ${s.primary('/new')} and select the second option:`,
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[0/8]')}`,
+                '',
+                `     ${s.primary('What would you like to do?')}`,
+                '',
+                `       1. Start a new project`,
+                `     ${s.primary('>')} 2. Add workflow to existing project`,
+                '',
+                `     ${s.muted('Import an existing codebase and add')}`,
+                `     ${s.muted('compilr workflow tracking.')}`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | q/Esc Cancel')}`,
+                '',
+            ],
+        },
+        // Page 2: Project Path [1/5]
+        {
+            title: 'Project Path',
+            lines: [
+                '',
+                `     ${s.primaryBold('Import Existing Project')} ${s.muted('[1/5]')}`,
+                '',
+                `     ${s.primary('Enter path to existing project')}`,
+                '',
+                `     ${s.primary('>')} my-ext-project${s.muted('|')}`,
+                '',
+                `     ${s.muted('Enter absolute or relative path to project directory')}`,
+                `     ${s.muted('Tab for autocomplete')}`,
+                '',
+                `     ${s.muted('Enter Confirm | Tab Autocomplete | Esc Cancel')}`,
+                '',
+                `  ${s.warning('TIP:')} Use Tab to autocomplete directory names as you type.`,
+                '',
+            ],
+        },
+        // Page 3: Detection Results [2/5]
+        {
+            title: 'Detection Results',
+            lines: [
+                '',
+                `     ${s.primaryBold('Import Existing Project')} ${s.muted('[2/5]')}`,
+                '',
+                `     ${s.primary('Project Detection Results')}`,
+                '',
+                `     ${s.success('✓')} Name: My App ${s.muted('(from package.json)')}`,
+                `     ${s.success('✓')} Language: Node.js / TypeScript`,
+                `     ${s.muted('-')} Framework: Not detected`,
+                `     ${s.success('✓')} Git: https://github.com/user/my-app.git`,
+                `     ${s.success('✓')} COMPILR.md: Found`,
+                '',
+                `     ${s.muted('Press Enter to continue, or Esc to go back')}`,
+                '',
+                `     ${s.muted('Enter Continue | Esc Back')}`,
+                '',
+                `  The wizard auto-detects your project's language, framework,`,
+                `  git remote, and existing COMPILR.md file.`,
+                '',
+            ],
+        },
+        // Page 4: Git Remote [3/5]
+        {
+            title: 'Git Repository Setup',
+            lines: [
+                '',
+                `     ${s.primaryBold('Import Existing Project')} ${s.muted('[3/5]')}`,
+                '',
+                `     ${s.primary('Git Repository Setup')}`,
+                '',
+                `     ${s.muted('Detected remote:')} https://github.com/user/my-app.git`,
+                '',
+                `     ${s.primary('>')} Use detected remote`,
+                `       Enter different remote URL`,
+                `       Skip git remote (local only)`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | Esc Back')}`,
+                '',
+                `  If a git remote is detected, you can use it, change it, or skip.`,
+                '',
+            ],
+        },
+        // Page 5: Workflow Mode [4/5]
+        {
+            title: 'Workflow Mode',
+            lines: [
+                '',
+                `     ${s.primaryBold('Import Existing Project')} ${s.muted('[4/5]')}`,
+                '',
+                `     ${s.primary('Workflow mode')}`,
+                '',
+                `     ${s.primary('>')} 1. Flexible (user-driven, exploratory) ${s.muted('(recommended)')}`,
+                `       2. Guided (structured step-by-step workflow)`,
+                '',
+                `     ${s.muted('Flexible: Work at your own pace, agent responds to requests')}`,
+                `     ${s.muted('Guided: Agent suggests next steps, tracks work item progress')}`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | Esc Back')}`,
+                '',
+                `  ${s.warning('TIP:')} Start with Flexible. Switch to Guided anytime via ${s.primary('/workflow')}.`,
+                '',
+            ],
+        },
+        // Page 6: Confirmation [5/5]
+        {
+            title: 'Confirmation',
+            lines: [
+                '',
+                `     ${s.primaryBold('Import Existing Project')} ${s.muted('[5/5]')}`,
+                '',
+                `     ${s.primary('Ready to import project?')}`,
+                '',
+                `     Path:        ${s.primary('/workspace/my-ext-project')}`,
+                `     Name:        ${s.primary('My App')}`,
+                `     Language:    ${s.primary('Node.js / TypeScript')}`,
+                `     Git Remote:  ${s.primary('https://github.com/user/my-app.git')}`,
+                `     Workflow:    ${s.primary('Flexible (user-driven, exploratory)')}`,
+                '',
+                `     ${s.muted('Will create:')}`,
+                `     ${s.success('✓')} .compilr/config.json ${s.muted('(local config)')}`,
+                `     ${s.success('✓')} Database entry ${s.muted('(project tracking)')}`,
+                '',
+                `     ${s.muted('Note: This project is outside your projects folder.')}`,
+                `     ${s.muted('      It will be tracked at its current location.')}`,
+                '',
+                `     ${s.primary('>')} Import`,
+                `       Cancel`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Confirm | Esc Back')}`,
+                '',
+            ],
+        },
+        // Page 7: What Gets Created
+        {
+            title: 'What Gets Created',
+            lines: [
+                '',
+                `  ${s.secondary('After pressing Import, you get:')}`,
+                '',
+                `    ${s.success('✓')} ${s.primary('.compilr/config.json')} - Local project config`,
+                `       ${s.muted('Added to your existing project directory')}`,
+                '',
+                `    ${s.success('✓')} ${s.primary('Database entry')} - Project tracking`,
+                `       ${s.muted('The CLI now knows about your project')}`,
+                '',
+                `  ${s.secondary('Your existing code is not modified.')}`,
+                `  No files are changed, moved, or deleted.`,
+                '',
+                `  You'll return to the Dashboard with your imported project`,
+                `  selected and ready to use.`,
+                '',
+            ],
+        },
+    ],
+});