@compilr-dev/cli 0.6.0 → 0.6.2

package/dist/ui/overlay/impl/app-model-overlay-v2.js

@@ -0,0 +1,232 @@
+/**
+ * App Model Overlay V2
+ *
+ * Terminal visualization of the ApplicationModel (from @compilr-dev/factory).
+ * Three tabs: Entities (list with detail), Relationships (map), Summary (stats).
+ *
+ * Not a replacement for the desktop SVG viewer — text-based tables and lists
+ * for CLI users who want to inspect the model structure.
+ */
+import * as terminal from '../../terminal.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, isEscape, isCtrlC, isClose, renderBorder, wrapText, truncate, } from '../../base/index.js';
+import { parseKeyEvent } from '../key-utils.js';
+// =============================================================================
+// Tab Definitions
+// =============================================================================
+const MODEL_TABS = [
+    { id: 'entities', label: 'Entities' },
+    { id: 'relationships', label: 'Relationships' },
+    { id: 'summary', label: 'Summary' },
+];
+// =============================================================================
+// Main Overlay
+// =============================================================================
+export class AppModelOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'app-model-viewer';
+    model = null;
+    parseError = null;
+    constructor(options) {
+        // Parse model and build list items
+        let model = null;
+        let parseError = null;
+        let items = [];
+        try {
+            model = JSON.parse(options.modelJson);
+            items = buildListItems(model);
+        }
+        catch (e) {
+            parseError = `Failed to parse model: ${e instanceof Error ? e.message : String(e)}`;
+        }
+        // Compute column widths for aligned rendering
+        const maxEntityName = model
+            ? Math.max(8, ...model.entities.map((e) => e.name.length))
+            : 12;
+        const maxRelLabel = items
+            .filter((i) => i.tab === 'relationships')
+            .reduce((max, i) => Math.max(max, i.label.length), 12);
+        const maxSummaryLabel = items
+            .filter((i) => i.tab === 'summary')
+            .reduce((max, i) => Math.max(max, i.label.length), 12);
+        super({
+            title: `Application Model — ${options.projectName}`,
+            tabs: MODEL_TABS,
+            items,
+            pageSize: 15,
+            filterByTab: (item, tabId) => tabId === 'all' || item.tab === tabId,
+            getSearchText: (item) => `${item.label} ${item.detail}`,
+            renderItem: (item, isSelected, s) => {
+                const prefix = isSelected ? s.primary('›') : ' ';
+                if (item.tab === 'entities') {
+                    const entity = item.entity;
+                    const fields = entity ? String(entity.fields.length).padStart(2) : ' 0';
+                    const rels = entity ? String(entity.relationships.length) : '0';
+                    const name = item.label.padEnd(maxEntityName + 2);
+                    const desc = entity?.description ? s.muted(truncate(entity.description, 30)) : '';
+                    return `${prefix} ${isSelected ? s.primary(name) : name} ${s.secondary(`${fields} fields · ${rels} rels`)}  ${desc}`;
+                }
+                if (item.tab === 'relationships') {
+                    const label = item.label.padEnd(maxRelLabel + 2);
+                    return `${prefix} ${isSelected ? s.primary(label) : label} ${s.secondary(item.detail)}`;
+                }
+                // summary
+                const label = (item.label + ':').padEnd(maxSummaryLabel + 3);
+                return `${prefix} ${s.secondary(label)} ${isSelected ? s.primary(item.detail) : item.detail}`;
+            },
+            footerHints: () => '↑↓ Navigate · Enter Detail · Tab/← → Tabs · / Search · q Close',
+        });
+        this.model = model;
+        this.parseError = parseError;
+    }
+    createDetailScreen(item) {
+        if (item.entity) {
+            return new EntityDetailScreen(item.entity, this.getStyles());
+        }
+        return null;
+    }
+}
+// =============================================================================
+// Entity Detail Screen
+// =============================================================================
+class EntityDetailScreen extends BaseScreen {
+    entity;
+    styles;
+    scrollOffset = 0;
+    constructor(entity, styles) {
+        super();
+        this.entity = entity;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const e = this.entity;
+        const lines = [];
+        // Header
+        lines.push(renderBorder(cols, s));
+        lines.push(`  ${s.primaryBold(e.name)}`);
+        lines.push('');
+        if (e.description) {
+            for (const wrapped of wrapText(e.description, cols - 6)) {
+                lines.push(`    ${s.secondary(wrapped)}`);
+            }
+            lines.push('');
+        }
+        // Info line
+        lines.push(`  ${s.muted('Plural:')} ${e.pluralName}   ${s.muted('Views:')} ${e.views.join(', ')}`);
+        lines.push('');
+        // Fields table
+        lines.push(`  ${s.primaryBold('Fields')} ${s.muted(`(${String(e.fields.length)})`)}`);
+        lines.push(`  ${s.muted('─'.repeat(Math.min(cols - 4, 60)))}`);
+        const nameWidth = Math.max(12, ...e.fields.map((f) => f.name.length)) + 1;
+        for (const field of e.fields) {
+            const name = field.name.padEnd(nameWidth);
+            const type = field.type.padEnd(10);
+            const req = field.required ? s.primary('*') : ' ';
+            const enums = field.enumValues ? s.muted(` [${field.enumValues.join(', ')}]`) : '';
+            const def = field.defaultValue !== undefined ? s.muted(` = ${String(field.defaultValue)}`) : '';
+            lines.push(`  ${req} ${name} ${s.secondary(type)}${enums}${def}`);
+        }
+        // Relationships
+        if (e.relationships.length > 0) {
+            lines.push('');
+            lines.push(`  ${s.primaryBold('Relationships')} ${s.muted(`(${String(e.relationships.length)})`)}`);
+            lines.push(`  ${s.muted('─'.repeat(Math.min(cols - 4, 60)))}`);
+            for (const rel of e.relationships) {
+                const arrow = rel.type === 'hasMany' ? '──▸' : '◂──';
+                const label = rel.type === 'hasMany' ? 'has many' : 'belongs to';
+                const via = rel.fieldName ? s.muted(` via ${rel.fieldName}`) : '';
+                lines.push(`  ${e.name} ${arrow} ${s.primary(rel.target)}  ${s.muted(label)}${via}`);
+            }
+        }
+        lines.push('');
+        lines.push(`  ${s.muted('↑↓ Scroll · Esc Back')}`);
+        lines.push(renderBorder(cols, s));
+        return lines;
+    }
+    handleKey(data) {
+        if (isEscape(data) || isCtrlC(data) || isClose(data)) {
+            return popScreen();
+        }
+        const key = parseKeyEvent(data);
+        if (key.name === 'up' && this.scrollOffset > 0) {
+            this.scrollOffset--;
+            return stay();
+        }
+        if (key.name === 'down') {
+            this.scrollOffset++;
+            return stay();
+        }
+        return stay();
+    }
+    getMinHeight() {
+        return 15;
+    }
+}
+// =============================================================================
+// Build list items from model
+// =============================================================================
+function buildListItems(model) {
+    const items = [];
+    // Entity items
+    for (const entity of model.entities) {
+        items.push({
+            id: `entity-${entity.name}`,
+            tab: 'entities',
+            label: entity.name,
+            detail: `${String(entity.fields.length)} fields, ${String(entity.relationships.length)} relationships`,
+            entity,
+        });
+    }
+    // Relationship items (flattened from all entities)
+    for (const entity of model.entities) {
+        for (const rel of entity.relationships) {
+            const arrow = rel.type === 'hasMany' ? '→' : '←';
+            items.push({
+                id: `rel-${entity.name}-${rel.target}-${rel.type}`,
+                tab: 'relationships',
+                label: `${entity.name} ${arrow} ${rel.target}`,
+                detail: rel.type === 'hasMany' ? `has many ${rel.target}` : `belongs to ${rel.target}`,
+            });
+        }
+    }
+    // Summary items
+    const totalFields = model.entities.reduce((sum, e) => sum + e.fields.length, 0);
+    const totalRels = model.entities.reduce((sum, e) => sum + e.relationships.length, 0);
+    const requiredFields = model.entities.reduce((sum, e) => sum + e.fields.filter((f) => f.required).length, 0);
+    const enumFields = model.entities.reduce((sum, e) => sum + e.fields.filter((f) => f.type === 'enum').length, 0);
+    // Identity
+    items.push({ id: 'sum-name', tab: 'summary', label: 'Application', detail: model.identity.name }, { id: 'sum-desc', tab: 'summary', label: 'Description', detail: truncate(model.identity.description, 60) }, { id: 'sum-version', tab: 'summary', label: 'Version', detail: model.identity.version });
+    // Data model stats
+    items.push({ id: 'sum-sep1', tab: 'summary', label: '── Data Model', detail: '' }, { id: 'sum-entities', tab: 'summary', label: 'Entities', detail: String(model.entities.length) }, { id: 'sum-fields', tab: 'summary', label: 'Total Fields', detail: `${String(totalFields)} (${String(requiredFields)} required, ${String(enumFields)} enums)` }, { id: 'sum-rels', tab: 'summary', label: 'Relationships', detail: String(totalRels) });
+    // Configuration
+    const configItems = [];
+    if (model.layout?.shell) {
+        configItems.push({ id: 'sum-layout', tab: 'summary', label: 'Layout', detail: model.layout.shell });
+    }
+    if (model.techStack?.toolkit) {
+        configItems.push({ id: 'sum-toolkit', tab: 'summary', label: 'Toolkit', detail: model.techStack.toolkit });
+    }
+    if (model.theme?.primaryColor) {
+        configItems.push({ id: 'sum-color', tab: 'summary', label: 'Primary Color', detail: model.theme.primaryColor });
+    }
+    const featureList = [];
+    if (model.features?.dashboard)
+        featureList.push('Dashboard');
+    if (model.features?.auth)
+        featureList.push('Auth');
+    if (model.features?.userProfiles)
+        featureList.push('Profiles');
+    if (model.features?.settings)
+        featureList.push('Settings');
+    if (model.features?.darkMode)
+        featureList.push('Dark Mode');
+    if (featureList.length > 0) {
+        configItems.push({ id: 'sum-features', tab: 'summary', label: 'Features', detail: featureList.join(', ') });
+    }
+    if (configItems.length > 0) {
+        items.push({ id: 'sum-sep2', tab: 'summary', label: '── Configuration', detail: '' });
+        items.push(...configItems);
+    }
+    return items;
+}

package/dist/ui/overlay/impl/custom-agent-form-overlay-v2.d.ts

@@ -20,7 +20,7 @@ interface FormField {
     value: string;
     error?: string;
 }
-type WizardStep = 'basic' | 'tools' | 'skills' | 'tier';
+type WizardStep = 'template-select' | 'basic' | 'tools' | 'skills' | 'tier' | 'prompt';
 interface FormState {
     fields: FormField[];
     activeFieldIndex: number;
@@ -35,20 +35,37 @@ interface FormState {
     skillListIndex: number;
     selectedModelTier: ModelTier;
     tierListIndex: number;
+    systemPromptAddition: string;
+    templateListIndex: number;
+    saveAsTemplate: boolean;
+    templateName: string;
+}
+export interface TemplateOption {
+    id: string;
+    name: string;
+    displayName: string;
+    specialty: string;
+    personality?: string;
+    systemPromptAddition?: string;
 }
 export interface CustomAgentFormOptions {
     /** Existing custom agents (for duplicate check) */
     existingCustomAgents: CustomAgentDefinition[];
     /** Current team agent IDs (for duplicate check) */
     teamAgentIds: string[];
+    /** Available templates to load from */
+    templates?: TemplateOption[];
 }
 export interface CustomAgentFormResult {
     cancelled: boolean;
+    /** Template name to save as (if user requested) */
+    saveAsTemplate?: string;
     agent?: {
         id: string;
         displayName: string;
         specialty: string;
         personality?: string;
+        systemPromptAddition?: string;
         toolConfig: ToolConfig;
         enabledSkills: string[];
         modelTier: ModelTier;
@@ -59,8 +76,11 @@ export declare class CustomAgentFormOverlayV2 extends BaseOverlayV2<FormState, C
     readonly id = "custom-agent-form-overlay-v2";
     private readonly existingCustomAgents;
     private readonly teamAgentIds;
+    private readonly templates;
     constructor(options: CustomAgentFormOptions);
     protected renderContent(context: RenderContext): string[];
+    private renderTemplateSelectStep;
+    private handleTemplateSelectKey;
     private renderBasicStep;
     private renderToolsStep;
     private renderGroupItem;
@@ -72,6 +92,8 @@ export declare class CustomAgentFormOverlayV2 extends BaseOverlayV2<FormState, C
     private handleSkillsStepKey;
     private renderTierStep;
     private handleTierStepKey;
+    private renderPromptStep;
+    private handlePromptStepKey;
     private nextField;
     private prevField;
     private validateBasicInfo;