@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlay/data/tutorials/teams/team-overview.js

@@ -0,0 +1,165 @@
+/**
+ * Team Overview Tutorial
+ *
+ * Introduction to multi-agent teams and the /team command.
+ */
+export const teamOverviewTutorial = (s) => ({
+    id: 'team-overview',
+    title: 'Multi-Agent Teams',
+    description: 'Specialized AI assistants',
+    pages: [
+        // Page 1: Introduction
+        {
+            title: 'Multi-Agent Teams',
+            lines: [
+                '',
+                `  Teams let you add ${s.primaryBold('specialized AI agents')} to your project,`,
+                `  each with different expertise, tools, and model tiers.`,
+                '',
+                `  ${s.secondary('Why use teams?')}`,
+                '',
+                `    ${s.muted('•')} ${s.primaryBold('Focused expertise')} — each agent knows its role`,
+                `    ${s.muted('•')} ${s.primaryBold('Cost control')} — use fast models for simple tasks`,
+                `    ${s.muted('•')} ${s.primaryBold('Parallel work')} — run agents in the background`,
+                `    ${s.muted('•')} ${s.primaryBold('Tool isolation')} — agents only see relevant tools`,
+                '',
+                `  ${s.secondary('Quick start:')}`,
+                '',
+                `    ${s.primary('/team')}         Open the team management overlay`,
+                `    ${s.primary('$arch')}         Switch to the Architect agent`,
+                `    ${s.primary('$dev fix it')}   Send a message to the Developer`,
+                '',
+            ],
+        },
+        // Page 2: The /team Overlay
+        {
+            title: 'The /team Overlay',
+            lines: [
+                '',
+                `  The ${s.primary('/team')} command opens an overlay with 3 tabs:`,
+                '',
+                `  ${s.primaryBold('Members')} — Your current team`,
+                '',
+                `    ${s.muted('Team Management [1/1]')}`,
+                '',
+                `    ${s.primary('>')} ${s.muted('[•_•] $default (Assistant) [Balanced]')} ${s.success('●')}`,
+                '',
+                `  ${s.primaryBold('Add Agent')} — Available roles to add`,
+                '',
+                `    ${s.muted('[▣_▣] PM [Planner] [Fast]')}`,
+                `    ${s.muted('[◈_◈] Solution Architect [Architect] [Powerful]')}`,
+                `    ${s.muted('[◉_◉] QA Engineer [QA / Testing] [Fast]')}`,
+                `    ${s.muted('[▲_▲] Developer [Developer] [Balanced]')}`,
+                `    ${s.muted('...')}`,
+                '',
+                `  ${s.primaryBold('Context')} — Per-agent token usage`,
+                '',
+                `  ${s.secondary('Navigation:')} Enter = view/add, Tab = switch tabs`,
+                '',
+            ],
+        },
+        // Page 3: Predefined Roles
+        {
+            title: 'Predefined Roles',
+            lines: [
+                '',
+                `  7 specialized roles are available out of the box:`,
+                '',
+                `    ${s.muted('[▣_▣]')} ${s.primaryBold('$pm')}    PM — planning, task tracking`,
+                `    ${s.muted('[◈_◈]')} ${s.primaryBold('$arch')}  Architect — system design, patterns`,
+                `    ${s.muted('[◉_◉]')} ${s.primaryBold('$qa')}    QA — testing, code review`,
+                `    ${s.muted('[▲_▲]')} ${s.primaryBold('$dev')}   Developer — implementation, debugging`,
+                `    ${s.muted('[◆_◆]')} ${s.primaryBold('$ops')}   DevOps — deployment, CI/CD`,
+                `    ${s.muted('[○_○]')} ${s.primaryBold('$docs')}  Writer — documentation, guides`,
+                `    ${s.muted('[◇_◇]')} ${s.primaryBold('$ba')}    Analyst — requirements, metrics`,
+                '',
+                `  Each role comes with:`,
+                '',
+                `    ${s.muted('•')} A default ${s.primaryBold('tool profile')} (what tools it can use)`,
+                `    ${s.muted('•')} A default ${s.primaryBold('model tier')} (fast/balanced/powerful)`,
+                `    ${s.muted('•')} A ${s.primaryBold('system prompt')} with role-specific guidance`,
+                '',
+            ],
+        },
+        // Page 4: Adding an Agent
+        {
+            title: 'Adding an Agent',
+            lines: [
+                '',
+                `  Go to the ${s.primaryBold('Add Agent')} tab and select a role:`,
+                '',
+                `    ${s.muted('Add [▣_▣] PM')}`,
+                '',
+                `    ${s.muted('  Project planning, task tracking')}`,
+                '',
+                `    ${s.muted('▶ Agent ID: $pm (default)')}`,
+                '',
+                `    ${s.muted('  Model Tier: [Fast (default)]')}`,
+                '',
+                `    ${s.muted('  [ ] Set as default for PM')}`,
+                '',
+                `  You can customize:`,
+                '',
+                `    ${s.muted('•')} ${s.primaryBold('Agent ID')} — custom name (e.g., $sarah)`,
+                `    ${s.muted('•')} ${s.primaryBold('Model Tier')} — override the default tier`,
+                '',
+                `  Press ${s.primaryBold('Enter')} to add the agent to your team.`,
+                '',
+                `    ${s.success('[^_^]')} ${s.muted('Added [▣_▣] $pm (PM) to team')}`,
+                '',
+            ],
+        },
+        // Page 5: Agent Details
+        {
+            title: 'Agent Details',
+            lines: [
+                '',
+                `  In the ${s.primaryBold('Members')} tab, press Enter on an agent to see details:`,
+                '',
+                `    ${s.muted('•')} Agent ID, role, display name`,
+                `    ${s.muted('•')} Model tier and actual model ID`,
+                `    ${s.muted('•')} Status (active, idle)`,
+                '',
+                `  ${s.secondary('Actions in the detail view:')}`,
+                '',
+                `    ${s.primaryBold('Enter')}   Switch to this agent`,
+                `    ${s.primaryBold('t')}       Change model tier (fast/balanced/powerful)`,
+                `    ${s.primaryBold('d')}       Remove from team (except $default)`,
+                `    ${s.primaryBold('Esc')}     Go back`,
+                '',
+                `  ${s.secondary('From the command line:')}`,
+                '',
+                `    ${s.primary('/team add dev')}        Add developer agent`,
+                `    ${s.primary('/team remove qa')}      Remove QA agent`,
+                `    ${s.primary('/team status')}         Quick team overview`,
+                '',
+            ],
+        },
+        // Page 6: The Default Agent
+        {
+            title: 'The Default Agent',
+            lines: [
+                '',
+                `  Every project starts with ${s.primaryBold('$default')} — a general-purpose`,
+                `  agent with full tool access and balanced model tier.`,
+                '',
+                `  ${s.secondary('Key facts:')}`,
+                '',
+                `    ${s.muted('•')} Cannot be removed`,
+                `    ${s.muted('•')} Has access to all tools and skills`,
+                `    ${s.muted('•')} Good for general tasks and exploration`,
+                `    ${s.muted('•')} When you start a conversation, $default is active`,
+                '',
+                `  ${s.secondary('When to add specialized agents:')}`,
+                '',
+                `    ${s.muted('•')} You want a focused perspective (QA, architecture)`,
+                `    ${s.muted('•')} You want to use a cheaper model for simple tasks`,
+                `    ${s.muted('•')} You want agents working in parallel`,
+                '',
+                `  ${s.warning('TIP:')} Start with just $default. Add agents as needed`,
+                `  — you don't have to set up a full team upfront.`,
+                '',
+            ],
+        },
+    ],
+});

package/dist/ui/overlay/data/tutorials/teams/working-with-agents.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Working with Agents Tutorial
+ *
+ * Covers $ prefix switching, autocomplete, custom agents, and tool profiles.
+ */
+import type { TutorialBuilder } from '../../tutorial-types.js';
+export declare const workingWithAgentsTutorial: TutorialBuilder;

package/dist/ui/overlay/data/tutorials/teams/working-with-agents.js

@@ -0,0 +1,172 @@
+/**
+ * Working with Agents Tutorial
+ *
+ * Covers $ prefix switching, autocomplete, custom agents, and tool profiles.
+ */
+export const workingWithAgentsTutorial = (s) => ({
+    id: 'working-with-agents',
+    title: 'Working with Agents',
+    description: 'Switch, mention, and customize',
+    pages: [
+        // Page 1: The $ Prefix
+        {
+            title: 'The $ Prefix',
+            lines: [
+                '',
+                `  The ${s.primaryBold('$')} prefix is how you interact with team agents.`,
+                '',
+                `  ${s.secondary('Switch to an agent:')}`,
+                '',
+                `    ${s.primary('$arch')}                  Switch to the Architect`,
+                `    ${s.primary('$dev fix the bug')}       Switch to Dev and send message`,
+                '',
+                `  ${s.secondary('Autocomplete:')}`,
+                `  Type ${s.primaryBold('$')} and a dropdown shows your team:`,
+                '',
+                `    ${s.primary('>')} ${s.muted('[•_•] $default - Assistant')}`,
+                `      ${s.muted('[▣_▣] $pm - PM')}`,
+                `      ${s.muted('[▲_▲] $dev - Developer')}`,
+                `      ${s.muted('[⊡_⊡] $myagent - hal9000')}`,
+                '',
+                `  Keep typing to filter, then press Enter to select.`,
+                '',
+                `  The footer shows the active agent:`,
+                `    ${s.muted('[⊡_⊡] $myagent (hal9000)     Project: My App')}`,
+                '',
+            ],
+        },
+        // Page 2: Agent Awareness
+        {
+            title: 'Agent Awareness',
+            lines: [
+                '',
+                `  Each agent knows its role and expertise:`,
+                '',
+                `    ${s.primary('$myagent')} ${s.muted('what is your specialty?')}`,
+                '',
+                `    ${s.muted('[⊡_⊡] > I specialize in quality assurance')}`,
+                `    ${s.muted('and testing. My approach is accurate and')}`,
+                `    ${s.muted('detail-oriented.')}`,
+                '',
+                `  Agents also know about their teammates and can`,
+                `  suggest delegation:`,
+                '',
+                `    ${s.muted('[⊡_⊡] > This is outside my specialty.')}`,
+                `    ${s.muted('Try $dev for implementation details')}`,
+                `    ${s.muted('or $pm for task prioritization.')}`,
+                '',
+                `  ${s.secondary('Mention agents in messages:')}`,
+                '',
+                `    ${s.muted('"What did $arch propose for the API?"')}`,
+                `    ${s.muted('"Based on $pm\'s plan, estimate effort"')}`,
+                '',
+            ],
+        },
+        // Page 3: Tool Profiles
+        {
+            title: 'Tool Profiles',
+            lines: [
+                '',
+                `  Each agent has a ${s.primaryBold('tool profile')} that controls what`,
+                `  tools it can access:`,
+                '',
+                `    ${s.primaryBold('Full Access')}    All tools (default agent)`,
+                `    ${s.primaryBold('Developer')}      File access, git, runners`,
+                `    ${s.primaryBold('Planner')}        Planning, backlog, documents`,
+                `    ${s.primaryBold('Architect')}      Read code, design tools`,
+                `    ${s.primaryBold('QA / Testing')}   Read code, run tests`,
+                `    ${s.primaryBold('DevOps')}         Shell, git, runners`,
+                `    ${s.primaryBold('Documentation')} Read code, documents`,
+                `    ${s.primaryBold('Read Only')}      File reading only`,
+                '',
+                `  A QA agent can read code and run tests, but ${s.warning('cannot')}`,
+                `  modify files. A planner can manage backlog but`,
+                `  ${s.warning('cannot')} run shell commands.`,
+                '',
+                `  This keeps agents focused and safe.`,
+                '',
+            ],
+        },
+        // Page 4: Model Tiers
+        {
+            title: 'Model Tiers',
+            lines: [
+                '',
+                `  Each agent has a ${s.primaryBold('model tier')} setting:`,
+                '',
+                `    ${s.primaryBold('Fast')}        Quick responses, low cost`,
+                `    ${s.muted('             Claude Haiku, GPT-4o Mini, Gemini Flash')}`,
+                '',
+                `    ${s.primaryBold('Balanced')}    Good quality/speed balance (default)`,
+                `    ${s.muted('             Claude Sonnet, GPT-4o, Gemini Pro')}`,
+                '',
+                `    ${s.primaryBold('Powerful')}    Maximum capability`,
+                `    ${s.muted('             Claude Opus, GPT-4, Gemini Ultra')}`,
+                '',
+                `  ${s.secondary('Default tiers per role:')}`,
+                '',
+                `    ${s.muted('PM, QA, Docs')}    → Fast (simple tasks)`,
+                `    ${s.muted('Dev, Ops, BA')}    → Balanced (general work)`,
+                `    ${s.muted('Architect')}       → Powerful (complex reasoning)`,
+                '',
+                `  Change an agent's tier: press ${s.primaryBold('t')} in the agent detail`,
+                `  view, or in the team overlay.`,
+                '',
+            ],
+        },
+        // Page 5: Custom Agents
+        {
+            title: 'Custom Agents',
+            lines: [
+                '',
+                `  Create your own agent with the 4-step wizard:`,
+                `  ${s.muted('(select "Create Custom Agent..." in Add Agent tab)')}`,
+                '',
+                `  ${s.primaryBold('Step 1: Basic Info')}`,
+                `    ${s.muted('Agent ID, display name, specialty, personality')}`,
+                '',
+                `  ${s.primaryBold('Step 2: Tool Profile')}`,
+                `    ${s.muted('Full Access, Developer, QA, Custom, etc.')}`,
+                '',
+                `  ${s.primaryBold('Step 3: Skills')}`,
+                `    ${s.muted('Select specific skills or leave empty for all')}`,
+                `    ${s.muted('[x] code-review  [x] debug  [ ] refactor')}`,
+                '',
+                `  ${s.primaryBold('Step 4: Model Tier')}`,
+                `    ${s.muted('Fast / Balanced / Powerful')}`,
+                '',
+                `    ${s.success('Created $myagent (hal9000, QA, Balanced)')}`,
+                '',
+                `  Custom agents are saved per-project and persist`,
+                `  across sessions.`,
+                '',
+            ],
+        },
+        // Page 6: Tips
+        {
+            title: 'Tips & Best Practices',
+            lines: [
+                '',
+                `  ${s.secondary('Start small:')}`,
+                `  Don't add all 7 agents at once. Add them as needed.`,
+                '',
+                `  ${s.secondary('Use fast models for review tasks:')}`,
+                `  QA, docs, and planning don't need powerful models.`,
+                '',
+                `  ${s.secondary('Use $ autocomplete:')}`,
+                `  Type ${s.primaryBold('$')} to see your team at a glance.`,
+                '',
+                `  ${s.secondary('Let agents suggest delegation:')}`,
+                `  Ask one agent and they'll recommend the right teammate.`,
+                '',
+                `  ${s.secondary('Context is isolated:')}`,
+                `  Each agent has its own conversation history.`,
+                `  Use ${s.primary('/team')} Context tab to monitor token usage.`,
+                '',
+                `  ${s.secondary('Next:')} Learn about ${s.primary('Background Execution')}`,
+                `  to run agents in parallel.`,
+                '',
+            ],
+        },
+    ],
+});

package/dist/ui/overlay/impl/agents-overlay-v2.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Agents Overlay V2
+ *
+ * Modal overlay for viewing and managing agent configurations.
+ * Uses TabbedListOverlayV2 for consistent list/tab/search behavior.
+ *
+ * Features:
+ * - Built-in tab: Lists predefined agent types with detail view
+ * - Custom tab: Lists user-defined agents with detail/edit + create new
+ * - Wizard mode: Step-by-step agent creation
+ */
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+import type { AgentLocation } from '../../../agents/types.js';
+interface AgentItem {
+    name: string;
+    model: string;
+    description: string;
+    location?: AgentLocation;
+    systemPrompt?: string;
+    filePath?: string;
+    isBuiltin: boolean;
+    isCreateNew?: boolean;
+}
+export interface AgentsOverlayV2Result {
+    /** Name of newly created agent, if any */
+    created?: string;
+    /** Name of deleted agent, if any */
+    deleted?: string;
+    /** Name of edited agent, if any */
+    edited?: string;
+}
+export declare class AgentsOverlayV2 extends TabbedListOverlayV2<AgentItem, AgentsOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "agents-overlay-v2";
+    private readonly editState;
+    constructor();
+    private static buildItems;
+    private static agentToItem;
+    protected createDetailScreen(item: AgentItem): BaseScreen | null;
+    /**
+     * Refresh items after wizard/edit completes.
+     */
+    private refreshItems;
+}
+export {};