@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlay/data/tutorials/basics/first-project.js

@@ -0,0 +1,284 @@
+/**
+ * Your First Project Tutorial
+ *
+ * Guides users through the dashboard and /new wizard.
+ */
+export const firstProjectTutorial = (s) => ({
+    id: 'first-project',
+    title: 'Your First Project',
+    description: 'Dashboard and /new wizard walkthrough',
+    pages: [
+        // Page 1: What you see first
+        {
+            title: 'What You See First',
+            lines: [
+                '',
+                `  When you run ${s.primary('compilr')} for the first time, you'll see the Dashboard:`,
+                '',
+                `    ${s.muted('─'.repeat(50))}`,
+                `       ${s.muted('Dashboard')}  │  ${s.muted('More')}`,
+                `    ${s.muted('─'.repeat(50))}`,
+                '',
+                `      ${s.primaryBold('WELCOME TO COMPILR DEV CLI')}`,
+                '',
+                `      ${s.muted('Get started by creating a new project or importing an existing')}`,
+                `      ${s.muted('repository. Or use Quick Chat for general assistance.')}`,
+                '',
+                `      ${s.secondary('ACTIONS')}`,
+                `      ${s.primary('❯')} /new Project                 ${s.muted('Create new or import existing project')}`,
+                `        Quick Chat                   ${s.muted('Chat without project context')}`,
+                '',
+                `      ${s.muted('↑↓/jk Navigate   Enter Select   q Quit')}`,
+                '',
+            ],
+        },
+        // Page 2: Your options
+        {
+            title: 'Your Options',
+            lines: [
+                '',
+                `  From the Dashboard you have two choices:`,
+                '',
+                `    ${s.primary('/new Project')}`,
+                `    Create a new project or import an existing one.`,
+                `    Sets up the workflow structure for AI-assisted development.`,
+                '',
+                `    ${s.primary('Quick Chat')}`,
+                `    Chat without project context.`,
+                `    For quick questions or one-off tasks.`,
+                '',
+                `  ${s.secondary('Navigation:')}`,
+                `    ${s.muted('↑/↓')} or ${s.muted('j/k')} to move between options`,
+                `    ${s.muted('Enter')} to select`,
+                `    ${s.muted('Tab')} to switch to the "More" tab`,
+                '',
+            ],
+        },
+        // Page 3: Starting /new [0/8]
+        {
+            title: 'Starting /new',
+            lines: [
+                '',
+                `  Select ${s.primary('/new Project')} and press Enter. You'll see:`,
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[0/8]')}`,
+                '',
+                `     ${s.primary('What would you like to do?')}`,
+                '',
+                `     ${s.primary('>')} 1. Start a new project`,
+                `       2. Add workflow to existing project ${s.muted('(coming soon)')}`,
+                '',
+                `     ${s.muted('Start fresh with a structured project layout')}`,
+                `     ${s.muted('optimized for AI-assisted development.')}`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | q/Esc Cancel')}`,
+                '',
+                `  Select "Start a new project" and press Enter.`,
+                '',
+            ],
+        },
+        // Page 4: Project Name [1/8]
+        {
+            title: 'Project Name',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[1/8]')}`,
+                '',
+                `     ${s.primary('Project name')}`,
+                '',
+                `     ${s.primary('>')} my-first-project${s.muted('|')}`,
+                '',
+                `     ${s.muted('Use lowercase letters, numbers, hyphens (e.g., my-saas-app)')}`,
+                `     ${s.muted('2-50 characters, must start with a letter')}`,
+                '',
+                `     ${s.muted('Enter Confirm | Esc Back')}`,
+                '',
+                `  ${s.warning('TIP:')} Choose a descriptive name - it becomes your folder name.`,
+                '',
+            ],
+        },
+        // Page 5: Description [2/8]
+        {
+            title: 'Description',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[2/8]')}`,
+                '',
+                `     ${s.primary('What are you building?')}`,
+                '',
+                `     ${s.primary('>')} A note-taking app with markdown support${s.muted('|')}`,
+                '',
+                `     ${s.muted('Brief description (1-2 sentences)')}`,
+                `     ${s.muted('Example: "A task management SaaS for small teams"')}`,
+                '',
+                `     ${s.muted('Enter Confirm | Esc Back')}`,
+                '',
+                `  ${s.warning('TIP:')} Be specific! The AI uses this to understand your project.`,
+                '',
+            ],
+        },
+        // Page 6: Documentation Structure [3/8]
+        {
+            title: 'Documentation Structure',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[3/8]')}`,
+                '',
+                `     ${s.primary('Documentation structure')}`,
+                '',
+                `     ${s.primary('>')} 1. Single repo (.compilr/ folder + COMPILR.md in project root)`,
+                `       2. Two repos (project/ + project-docs/ separate repositories)`,
+                '',
+                `     ${s.muted('Single repo: All files in one repository')}`,
+                `     ${s.muted('Two repos: Code and docs in separate repositories')}`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | Esc Back')}`,
+                '',
+                `  ${s.warning('TIP:')} Single repo is simpler for most projects.`,
+                '',
+            ],
+        },
+        // Page 7: Tech Stack [4/8]
+        {
+            title: 'Tech Stack',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[4/8]')}`,
+                '',
+                `     ${s.primary('Tech stack')}`,
+                '',
+                `     ${s.primary('>')} 1. React + Node.js + PostgreSQL`,
+                `       2. React + Python + PostgreSQL`,
+                `       3. Vue + Node.js + PostgreSQL`,
+                `       4. Custom (configure later)`,
+                '',
+                `     ${s.muted('Choose a preset or configure later')}`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | Esc Back')}`,
+                '',
+                `  ${s.warning('TIP:')} You can change this later in your COMPILR.md file.`,
+                '',
+            ],
+        },
+        // Page 8: Coding Standards [5/8]
+        {
+            title: 'Coding Standards',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[5/8]')}`,
+                '',
+                `     ${s.primary('Coding standards preset')}`,
+                '',
+                `     ${s.primary('>')} 1. TypeScript Strict (recommended)`,
+                `       2. TypeScript Relaxed`,
+                `       3. Custom (configure later)`,
+                '',
+                `     ${s.muted('Strict: Full TypeScript with strict mode + ESLint')}`,
+                `     ${s.muted('Relaxed: TypeScript with basic strict mode')}`,
+                `     ${s.muted('Custom: Configure your own standards later')}`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | Esc Back')}`,
+                '',
+            ],
+        },
+        // Page 9: Git Repository [6/8]
+        {
+            title: 'Git Repository',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[6/8]')}`,
+                '',
+                `     ${s.primary('Initialize git repository?')}`,
+                '',
+                `     ${s.primary('>')} Yes`,
+                `       No`,
+                '',
+                `     ${s.muted('Creates git repo with initial commit')}`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Select | Esc Back')}`,
+                '',
+                `  If you select Yes, you can optionally add a remote URL:`,
+                '',
+                `     ${s.primary('Git remote URL (optional)')}`,
+                '',
+                `     ${s.primary('>')} https://github.com/user/my-first-project${s.muted('|')}`,
+                '',
+                `     ${s.muted('Enter Continue · Esc Skip')}`,
+                '',
+            ],
+        },
+        // Page 10: Workflow Mode [7/8]
+        {
+            title: 'Workflow Mode',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[7/8]')}`,
+                '',
+                `     ${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 11: Confirmation [8/8]
+        {
+            title: 'Confirmation',
+            lines: [
+                '',
+                `     ${s.primaryBold('Initialize New Project')} ${s.muted('[8/8]')}`,
+                '',
+                `     ${s.primary('Ready to create project?')}`,
+                '',
+                `     Project:     ${s.primary('my-first-project')}`,
+                `     Location:    ${s.primary('./my-first-project/')}`,
+                `     Structure:   ${s.primary('Single repo')}`,
+                `     Tech:        ${s.primary('React + Node.js + PostgreSQL')}`,
+                `     Standards:   ${s.primary('TypeScript Strict (recommended)')}`,
+                `     Git:         ${s.primary('Yes')}`,
+                `     Remote:      ${s.primary('https://github.com/user/my-first-project')}`,
+                `     Workflow:    ${s.primary('Flexible (user-driven, exploratory)')}`,
+                '',
+                `     ${s.primary('>')} Create`,
+                `       Cancel`,
+                '',
+                `     ${s.muted('Up/Down Navigate | Enter Confirm | Esc Back')}`,
+                '',
+            ],
+        },
+        // Page 12: After Creation
+        {
+            title: 'After Creation',
+            lines: [
+                '',
+                `  After creating your project, you'll see the Dashboard with your project:`,
+                '',
+                `    ${s.muted('─'.repeat(50))}`,
+                `       ${s.muted('Dashboard')}  │  ${s.muted('More')}`,
+                `    ${s.muted('─'.repeat(50))}`,
+                '',
+                `      ${s.secondary('CURRENT PROJECT')}`,
+                `      ${s.primaryBold('★ My First Project')}`,
+                `        ${s.muted('/workspace/projects/my-first-project │ active │ flexible')}`,
+                '',
+                `      ${s.secondary('ACTIONS')}`,
+                `      ${s.primary('❯')} Continue with My First Project   ${s.muted('Resume working on current project')}`,
+                '',
+                `      ${s.muted('[n] /new   [p] Projects   [c] Chat   [w] Workflow')}`,
+                '',
+                `      ${s.muted('↑↓/jk Navigate   Enter Select   q Quit')}`,
+                '',
+                `  Select ${s.primary('Continue')} and press Enter to start chatting!`,
+                `  Try ${s.primary('/design')} to plan your features.`,
+                '',
+            ],
+        },
+    ],
+});

package/dist/ui/overlay/data/tutorials/basics/navigation.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Navigation & Help Tutorial
+ *
+ * How to find your way around the CLI.
+ * Uses shared content from shared-content.ts for consistency with guide tool.
+ */
+import type { TutorialBuilder } from '../../tutorial-types.js';
+export declare const navigationTutorial: TutorialBuilder;

package/dist/ui/overlay/data/tutorials/basics/navigation.js

@@ -0,0 +1,22 @@
+/**
+ * Navigation & Help Tutorial
+ *
+ * How to find your way around the CLI.
+ * Uses shared content from shared-content.ts for consistency with guide tool.
+ */
+import { CONTENT_TOPICS } from '../../../../../guide/shared-content.js';
+import { topicsToPages } from '../../../../../guide/tutorial-helpers.js';
+// Topic IDs from shared content that form this tutorial
+const NAVIGATION_TOPIC_IDS = [
+    'help',
+    'overlay-navigation',
+    'dashboard',
+    'repl',
+    'commands-quick',
+];
+export const navigationTutorial = (s) => ({
+    id: 'navigation',
+    title: 'Navigation & Help',
+    description: 'Finding your way around',
+    pages: topicsToPages(NAVIGATION_TOPIC_IDS, CONTENT_TOPICS, s),
+});

package/dist/ui/overlay/data/tutorials/basics/welcome.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Welcome Tutorial
+ *
+ * Introduces the five pillars philosophy and development workflow overview.
+ */
+import type { TutorialBuilder } from '../../tutorial-types.js';
+export declare const welcomeTutorial: TutorialBuilder;

package/dist/ui/overlay/data/tutorials/basics/welcome.js

@@ -0,0 +1,174 @@
+/**
+ * Welcome Tutorial
+ *
+ * Introduces the five pillars philosophy and development workflow overview.
+ */
+export const welcomeTutorial = (s) => ({
+    id: 'welcome',
+    title: 'Welcome & Philosophy',
+    description: 'Core principles and workflow overview',
+    pages: [
+        // Page 1: Introduction
+        {
+            title: 'Welcome to compilr.dev',
+            lines: [
+                '',
+                `  ${s.primaryBold('Stop rebuilding. Start structuring.')}`,
+                '',
+                `  Have you ever:`,
+                `    ${s.muted('•')} Built the same feature three times?`,
+                `    ${s.muted('•')} Lost context between sessions?`,
+                `    ${s.muted('•')} Watched your codebase become a patchwork of patterns?`,
+                '',
+                `  This is ${s.warning('vibe coding')} - the chaos that emerges when powerful AI`,
+                `  tools meet undisciplined workflows.`,
+                '',
+                `  ${s.primary('compilr.dev')} provides the structure to make AI coding assistants`,
+                `  actually productive.`,
+                '',
+            ],
+        },
+        // Page 2: Pillar 1 - Structured
+        {
+            title: 'Pillar 1: Structured Coding',
+            lines: [
+                '',
+                `  ${s.primaryBold('Every project deserves a skeleton before it has muscles.')}`,
+                '',
+                `  That means:`,
+                '',
+                `    ${s.success('✓')} Explicit folder structures (code + documentation)`,
+                `    ${s.success('✓')} A ${s.primary('COMPILR.md')} file that persists project context`,
+                `    ${s.success('✓')} A ${s.primary('backlog')} that tracks what's done and what's next`,
+                `    ${s.success('✓')} Architecture decisions documented before implemented`,
+                '',
+                `  ${s.muted('Structure isn\'t bureaucracy.')}`,
+                `  ${s.muted('It\'s the difference between building a house and piling up bricks.')}`,
+                '',
+            ],
+        },
+        // Page 3: Pillar 2 - Disciplined
+        {
+            title: 'Pillar 2: Disciplined Development',
+            lines: [
+                '',
+                `  ${s.primaryBold('Discipline is doing the boring things that prevent expensive things.')}`,
+                '',
+                `  That means:`,
+                '',
+                `    ${s.success('✓')} Committing early and often (not "I'll commit when it's done")`,
+                `    ${s.success('✓')} Tracking progress in a backlog (not "I'll remember")`,
+                `    ${s.success('✓')} Following coding standards (not "the AI knows best")`,
+                `    ${s.success('✓')} Reviewing changes before accepting (not "ship it and pray")`,
+                '',
+                `  ${s.muted('Discipline compounds. Undisciplined code compounds too -')}`,
+                `  ${s.muted('in bugs, rework, and frustration.')}`,
+                '',
+            ],
+        },
+        // Page 4: Pillar 3 - Intentional
+        {
+            title: 'Pillar 3: Intentional Decisions',
+            lines: [
+                '',
+                `  ${s.primaryBold('Every choice should be deliberate.')}`,
+                '',
+                `  That means:`,
+                '',
+                `    ${s.success('✓')} Technology stack evaluated upfront, not mid-project`,
+                `    ${s.success('✓')} Database schemas normalized, not ad-hoc`,
+                `    ${s.success('✓')} Security and performance from day one, not bolted on`,
+                `    ${s.success('✓')} Trade-offs documented, not buried in chat`,
+                '',
+                `  ${s.muted('"It just happened" is never the right answer for')}`,
+                `  ${s.muted('how your architecture emerged.')}`,
+                '',
+            ],
+        },
+        // Page 5: Pillar 4 - Engineering-First
+        {
+            title: 'Pillar 4: Engineering-First AI',
+            lines: [
+                '',
+                `  ${s.primaryBold('AI is a tool, not a replacement for engineering judgment.')}`,
+                '',
+                `  That means:`,
+                '',
+                `    ${s.success('✓')} The human sets direction; AI accelerates execution`,
+                `    ${s.success('✓')} DRY principle enforced (AI should know when it duplicates)`,
+                `    ${s.success('✓')} Breaking changes detected before they break things`,
+                `    ${s.success('✓')} Context preserved across sessions, not lost to tokens`,
+                '',
+                `  ${s.muted('The goal isn\'t to code faster.')}`,
+                `  ${s.muted('The goal is to build better software, faster.')}`,
+                '',
+            ],
+        },
+        // Page 6: Pillar 5 - Flexible
+        {
+            title: 'Pillar 5: Flexible Execution',
+            lines: [
+                '',
+                `  ${s.primaryBold('Structure enables change - it doesn\'t prevent it.')}`,
+                '',
+                `  That means:`,
+                '',
+                `    ${s.success('✓')} The backlog is a living document, not a contract`,
+                `    ${s.success('✓')} Priorities shift based on learnings and feedback`,
+                `    ${s.success('✓')} New tasks emerge and get slotted in naturally`,
+                `    ${s.success('✓')} You can pivot features or reorder phases`,
+                '',
+                `  ${s.muted('The difference between flexibility and chaos? Foundations.')}`,
+                `  ${s.muted('Without structure, every change is a risk.')}`,
+                '',
+            ],
+        },
+        // Page 7: The Workflow
+        {
+            title: 'The Development Workflow',
+            lines: [
+                '',
+                `  ${s.secondary('The CLI guides you through five main stages:')}`,
+                '',
+                `    ${s.primary('/new')}        Create your project`,
+                `                 ${s.muted('Sets up structure, COMPILR.md, database record')}`,
+                '',
+                `    ${s.primary('/design')}     Gather requirements`,
+                `                 ${s.muted('Creates a PRD and backlog items')}`,
+                '',
+                `    ${s.primary('/backlog')}    Manage work items`,
+                `                 ${s.muted('Track status, prioritize, break down tasks')}`,
+                '',
+                `    ${s.primary('/build')}      Implement features`,
+                `                 ${s.muted('AI-assisted coding with your approval')}`,
+                '',
+                `    ${s.primary('/workflow')}   Check progress`,
+                `                 ${s.muted('See where you are and what\'s next')}`,
+                '',
+            ],
+        },
+        // Page 8: Getting Started
+        {
+            title: 'Getting Started',
+            lines: [
+                '',
+                `  ${s.secondary('Ready to start? Here are your next steps:')}`,
+                '',
+                `    ${s.muted('1.')} Run ${s.primary('/new')} to create a project`,
+                `        ${s.muted('Or /sketch for a quick outline')}`,
+                '',
+                `    ${s.muted('2.')} Run ${s.primary('/design')} to gather requirements`,
+                `        ${s.muted('Creates a PRD and backlog items')}`,
+                '',
+                `    ${s.muted('3.')} Run ${s.primary('/backlog')} to see your work items`,
+                `        ${s.muted('Pick one and start building!')}`,
+                '',
+                `  ${s.warning('TIP:')} Browse this tutorial to learn all the features.`,
+                `       Use ←/→ to see other topics.`,
+                '',
+                `  ${s.muted('Your AI assistant, your discipline, your code.')}`,
+                '',
+            ],
+        },
+    ],
+});

package/dist/ui/overlay/data/tutorials/config/context-management.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Context Management Tutorial
+ *
+ * Covers /context, /compact, /tokens, /anchors, and auto-compact.
+ */
+import type { TutorialBuilder } from '../../tutorial-types.js';
+export declare const contextManagementTutorial: TutorialBuilder;

package/dist/ui/overlay/data/tutorials/config/context-management.js

@@ -0,0 +1,158 @@
+/**
+ * Context Management Tutorial
+ *
+ * Covers /context, /compact, /tokens, /anchors, and auto-compact.
+ */
+export const contextManagementTutorial = (s) => ({
+    id: 'context-mgmt',
+    title: 'Context Management',
+    description: 'Manage AI memory and token usage',
+    pages: [
+        // Page 1: Introduction
+        {
+            title: 'Understanding Context',
+            lines: [
+                '',
+                `  ${s.primaryBold('Every AI model has a context window — a limit on')}`,
+                `  ${s.primaryBold('how much information it can process at once.')}`,
+                '',
+                `  As your conversation grows, you use more of the window.`,
+                `  When it fills up, the AI loses access to older messages.`,
+                '',
+                `  ${s.secondary('Context management commands:')}`,
+                '',
+                `    ${s.primary('/context')}    View current context usage`,
+                `    ${s.primary('/compact')}    Summarize old messages to free space`,
+                `    ${s.primary('/tokens')}     Detailed token breakdown`,
+                `    ${s.primary('/status')}     Session overview`,
+                `    ${s.primary('/anchors')}    Persistent notes (survive compaction)`,
+                `    ${s.primary('/export')}     Save conversation to markdown`,
+                '',
+            ],
+        },
+        // Page 2: /context
+        {
+            title: 'Viewing Context Usage',
+            lines: [
+                '',
+                `  ${s.secondary('Run /context to see how full your context window is:')}`,
+                '',
+                `  ${s.muted('Context Usage')}`,
+                `  ${s.muted('────────────────────')}`,
+                `  Agent:    ${s.primary('[▲_▲] $dev')}`,
+                `  Usage:    ${s.success('████')}${s.muted('░░░░░░░░░░░░░░░░')} 18.5%`,
+                `  Tokens:   ${s.primary('37,000')} / ${s.muted('200,000')}`,
+                `  Messages: ${s.primary('42')}`,
+                `  Turns:    ${s.primary('21')}`,
+                '',
+                `  ${s.muted('By Agent')}`,
+                `  ${s.muted('────────────────────')}`,
+                `  ${s.success('●')} $dev     ${s.success('████')}${s.muted('░░░░░░')} 18.5%  ${s.muted('200K')}  (42 msgs)`,
+                `  ${s.muted('○')} $pm      ${s.muted('█')}${s.muted('░░░░░░░░░')}  2.1%  ${s.muted('200K')}  (6 msgs)`,
+                '',
+                `  Each agent shows its model's context window (200K, 128K, 1M).`,
+                `  ${s.success('●')} = active agent   ${s.muted('○')} = inactive`,
+                '',
+            ],
+        },
+        // Page 3: /compact
+        {
+            title: 'Compacting Context',
+            lines: [
+                '',
+                `  ${s.primaryBold('When context gets too full, run /compact.')}`,
+                '',
+                `  This summarizes older messages while preserving key info:`,
+                '',
+                `    ${s.success('✓')} Tool results converted to file references`,
+                `    ${s.success('✓')} Conversation history summarized`,
+                `    ${s.success('✓')} Recent messages kept intact`,
+                `    ${s.success('✓')} Anchors always preserved`,
+                '',
+                `  ${s.secondary('Multi-agent compact modes:')}`,
+                '',
+                `    ${s.primary('/compact')}         Use default mode (set in /config)`,
+                `    ${s.primary('/compact all')}     Compact all initialized agents`,
+                `    ${s.primary('/compact auto')}    Compact agents above 70% usage`,
+                `    ${s.primary('/compact $pm')}     Compact a specific agent`,
+                '',
+                `  ${s.warning('TIP:')} Enable ${s.primary('Auto-compact')} in /config for automatic`,
+                `  compaction. Set ${s.primary('Default compact mode')} to control /compact.`,
+                '',
+            ],
+        },
+        // Page 4: Anchors
+        {
+            title: 'Persistent Notes with /anchors',
+            lines: [
+                '',
+                `  ${s.primaryBold('Anchors are notes that survive compaction and persist')}`,
+                `  ${s.primaryBold('across sessions. The AI always sees them.')}`,
+                '',
+                `  ${s.secondary('Use anchors for:')}`,
+                `    Project conventions: ${s.muted('"Always use async/await"')}`,
+                `    Decisions: ${s.muted('"We chose PostgreSQL because..."')}`,
+                `    Reminders: ${s.muted('"Don\'t modify the auth module"')}`,
+                '',
+                `  ${s.secondary('Creating anchors:')}`,
+                `    In the REPL, say: ${s.primary('"Remember that we use tabs not spaces"')}`,
+                `    Or use the /anchors overlay: press ${s.primary('a')} to add`,
+                '',
+                `  ${s.secondary('Anchor properties:')}`,
+                `    Priority:  ${s.error('[!]')} Critical  ${s.warning('[S]')} Safety  ${s.muted('[i]')} Info`,
+                `    Scope:     ${s.primary('[G]')} Global (all projects)  ${s.primary('[P]')} Project only`,
+                '',
+            ],
+        },
+        // Page 5: Anchors Overlay
+        {
+            title: 'The /anchors Overlay',
+            lines: [
+                '',
+                `  ${s.secondary('Tabs filter anchors by priority and scope:')}`,
+                '',
+                `    ${s.muted('All | Critical | Safety | Info | Global | Project')}`,
+                '',
+                `  ${s.secondary('Shortcuts:')}`,
+                '',
+                `    ${s.primary('Up/Down')}      Navigate anchors`,
+                `    ${s.primary('Tab/1-6')}      Switch filter tabs`,
+                `    ${s.primary('a')}            Add new anchor`,
+                `    ${s.primary('e')}            Edit selected anchor`,
+                `    ${s.primary('d')}            Delete (with confirmation)`,
+                `    ${s.primary('/')}            Search anchors`,
+                `    ${s.primary('q/Esc')}        Close`,
+                '',
+                `  ${s.secondary('When adding/editing:')}`,
+                `    Type content (up to 500 chars)`,
+                `    Cycle priority and scope with arrow keys`,
+                `    ${s.primary('Enter')} to save, ${s.primary('Esc')} to cancel`,
+                '',
+            ],
+        },
+        // Page 6: Tips
+        {
+            title: 'Context Tips',
+            lines: [
+                '',
+                `  ${s.warning('TIP:')} Watch for yellow/red in your context bar.`,
+                `  Above 80% the AI starts losing earlier context.`,
+                '',
+                `  ${s.warning('TIP:')} Use ${s.primary('/export')} to save important conversations`,
+                `  before compacting. Example:`,
+                `    ${s.primary('/export meeting-notes.md')}`,
+                '',
+                `  ${s.warning('TIP:')} Create ${s.error('[!]')} Critical anchors for rules the AI`,
+                `  must never forget, even across sessions.`,
+                '',
+                `  ${s.warning('TIP:')} ${s.primary('/tokens')} shows input vs output breakdown.`,
+                `  High output tokens may mean the AI is being verbose -`,
+                `  create an anchor: "Be concise in responses"`,
+                '',
+                `  ${s.warning('TIP:')} When team agents each have their own context,`,
+                `  use ${s.primary('/context')} to see which agent is using the most.`,
+                '',
+            ],
+        },
+    ],
+});