agent-stage 0.2.0

package/dist/commands/add-page.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare const addPageCommand: Command;

package/dist/commands/add-page.js

@@ -0,0 +1,132 @@
+import { Command } from 'commander';
+import consola from 'consola';
+import c from 'picocolors';
+import { writeFile, mkdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'pathe';
+import { getWorkspaceDir, isInitialized, readRuntimeConfig } from '../utils/paths.js';
+export const addPageCommand = new Command('add-page')
+    .description('Add a new page with Bridge store')
+    .argument('<name>', 'Page name (e.g., counter, about)')
+    .action(async (name) => {
+    // 检查是否已初始化
+    if (!isInitialized()) {
+        consola.error('Project not initialized. Please run `agentstage init` first.');
+        process.exit(1);
+    }
+    if (!/^[a-z0-9-]+$/.test(name)) {
+        consola.error('Page name must be lowercase letters, numbers, and hyphens');
+        process.exit(1);
+    }
+    try {
+        const workspaceDir = await getWorkspaceDir();
+        const config = await readRuntimeConfig();
+        const routesDir = join(workspaceDir, 'src', 'routes');
+        const pageFile = join(routesDir, `${name}.tsx`);
+        // 确保 routes 目录存在
+        await mkdir(routesDir, { recursive: true });
+        if (existsSync(pageFile)) {
+            consola.error(`Page "${name}" already exists at src/routes/${name}.tsx`);
+            process.exit(1);
+        }
+        const pageContent = `import { z } from 'zod';
+import { createFileRoute } from '@tanstack/react-router';
+import { createBridgeStore } from 'agent-stage-bridge/browser';
+import { useEffect } from 'react';
+import { Button } from '../components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
+
+// Define the page state schema
+const StateSchema = z.object({
+  count: z.number().default(0),
+});
+
+type State = z.infer<typeof StateSchema>;
+
+// Create the bridge store for this page
+const bridgeStore = createBridgeStore<State, { increment: { payload?: number }; decrement: {} }>({
+  pageId: '${name}',
+  storeKey: 'main',
+  description: {
+    schema: StateSchema,
+    actions: {
+      increment: {
+        description: 'Increment the counter by a specified amount (default: 1)',
+        payload: z.number().optional(),
+      },
+      decrement: {
+        description: 'Decrement the counter by 1',
+      },
+    },
+  },
+  createState: (set) => ({
+    count: 0,
+    dispatch: (action) => {
+      switch (action.type) {
+        case 'increment':
+          set((state) => ({ count: state.count + (action.payload ?? 1) }));
+          break;
+        case 'decrement':
+          set((state) => ({ count: state.count - 1 }));
+          break;
+      }
+    },
+  }),
+});
+
+export const Route = createFileRoute('/${name}')({
+  component: ${toPascalCase(name)}Page,
+});
+
+function ${toPascalCase(name)}Page() {
+  // Connect to the bridge when the component mounts
+  useEffect(() => {
+    bridgeStore.connect().catch(console.error);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-background p-8">
+      <div className="mx-auto max-w-2xl">
+        <Card>
+          <CardHeader>
+            <CardTitle>${toTitleCase(name)}</CardTitle>
+            <CardDescription>
+              This page is connected to the Agentstage Bridge.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Edit this page at src/routes/${name}.tsx
+            </p>
+            <div className="flex gap-2">
+              <Button variant="outline">Action 1</Button>
+              <Button>Action 2</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+`;
+        await writeFile(pageFile, pageContent);
+        consola.success(`Page "${name}" created`);
+        console.log(`  File:     ${c.cyan(`src/routes/${name}.tsx`)}`);
+        const port = config?.port || 3000;
+        console.log(`  URL:      ${c.cyan(`http://localhost:${port}/${name}`)}`);
+        console.log(`  Route:    ${c.gray(`/${name}`)} (file-based, auto-registered by TanStack Router)`);
+        console.log();
+        console.log(`  The route is automatically registered by TanStack Router.`);
+        console.log(`  No manual route configuration needed!`);
+    }
+    catch (error) {
+        consola.error('Failed to create page:', error.message);
+        process.exit(1);
+    }
+});
+function toPascalCase(str) {
+    return str.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
+}
+function toTitleCase(str) {
+    return str.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}

package/dist/commands/components.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare const componentsCommand: Command;

package/dist/commands/components.js

@@ -0,0 +1,136 @@
+import { Command } from 'commander';
+import * as p from '@clack/prompts';
+import consola from 'consola';
+import c from 'picocolors';
+import { execa } from 'execa';
+import { readdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'pathe';
+import { getWorkspaceDir, isInitialized } from '../utils/paths.js';
+export const componentsCommand = new Command('components')
+    .description('Manage shadcn/ui components');
+// 检查初始化中间件
+const checkInit = () => {
+    if (!isInitialized()) {
+        consola.error('Project not initialized. Please run `agentstage init` first.');
+        process.exit(1);
+    }
+};
+componentsCommand
+    .command('list')
+    .description('List installed components')
+    .action(async () => {
+    checkInit();
+    try {
+        const workspaceDir = await getWorkspaceDir();
+        // 支持 src/components/ui (TanStack Start) 和 components/ui 两种结构
+        let componentsDir = join(workspaceDir, 'src', 'components', 'ui');
+        if (!existsSync(componentsDir)) {
+            componentsDir = join(workspaceDir, 'components', 'ui');
+        }
+        let installed = [];
+        if (existsSync(componentsDir)) {
+            const files = await readdir(componentsDir);
+            installed = files.filter(f => f.endsWith('.tsx')).map(f => f.replace('.tsx', ''));
+        }
+        console.log();
+        console.log(c.bold(`Installed (${installed.length}):`));
+        if (installed.length > 0) {
+            console.log('  ' + installed.map(n => c.green(n)).join('  '));
+        }
+        else {
+            console.log(c.gray('  None'));
+        }
+        console.log();
+        console.log(`Use ${c.cyan('agentstage components available')} to see available components`);
+        console.log(`Use ${c.cyan('agentstage components add <component>')} to install`);
+        console.log();
+    }
+    catch (error) {
+        consola.error('Failed to list components:', error.message);
+    }
+});
+componentsCommand
+    .command('available')
+    .description('List available components from shadcn/ui registry')
+    .action(async () => {
+    checkInit();
+    try {
+        const workspaceDir = await getWorkspaceDir();
+        console.log();
+        consola.info('Fetching available components from shadcn/ui registry...');
+        console.log();
+        // 使用 shadcn 原生的 list 命令
+        await execa('npx', ['shadcn@latest', 'list', '@shadcn'], {
+            cwd: workspaceDir,
+            stdio: 'inherit',
+        });
+    }
+    catch (error) {
+        consola.error('Failed to list available components:', error.message);
+    }
+});
+componentsCommand
+    .command('search')
+    .description('Search for components in shadcn/ui registry')
+    .argument('<query>', 'Search query')
+    .action(async (query) => {
+    checkInit();
+    try {
+        const workspaceDir = await getWorkspaceDir();
+        console.log();
+        consola.info(`Searching for "${query}"...`);
+        console.log();
+        // 使用 shadcn 原生的 search 命令
+        await execa('npx', ['shadcn@latest', 'search', '@shadcn', '-q', query], {
+            cwd: workspaceDir,
+            stdio: 'inherit',
+        });
+    }
+    catch (error) {
+        consola.error('Failed to search:', error.message);
+    }
+});
+componentsCommand
+    .command('add')
+    .description('Add a shadcn/ui component')
+    .argument('<component>', 'Component name (e.g., button, card, dialog)')
+    .action(async (component) => {
+    checkInit();
+    const s = p.spinner();
+    try {
+        const workspaceDir = await getWorkspaceDir();
+        s.start(`Installing ${component}...`);
+        await execa('npx', ['shadcn@latest', 'add', component, '-y'], {
+            cwd: workspaceDir,
+            stdio: 'pipe',
+        });
+        s.stop(`${c.green('✓')} ${component} installed`);
+    }
+    catch (error) {
+        s.stop('Installation failed');
+        consola.error(error.message);
+        process.exit(1);
+    }
+});
+componentsCommand
+    .command('view')
+    .description('View a component before installing')
+    .argument('<component>', 'Component name to view')
+    .action(async (component) => {
+    checkInit();
+    try {
+        const workspaceDir = await getWorkspaceDir();
+        console.log();
+        consola.info(`Viewing ${component}...`);
+        console.log();
+        // 使用 shadcn 原生的 view 命令
+        await execa('npx', ['shadcn@latest', 'view', component], {
+            cwd: workspaceDir,
+            stdio: 'inherit',
+        });
+    }
+    catch (error) {
+        consola.error('Failed to view component:', error.message);
+    }
+});

package/dist/commands/doctor.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare const doctorCommand: Command;

package/dist/commands/doctor.js

@@ -0,0 +1,247 @@
+import { Command } from 'commander';
+import c from 'picocolors';
+import { execa } from 'execa';
+import { existsSync } from 'fs';
+import { join } from 'pathe';
+import { getWorkspaceDir, readRuntimeConfig, isInitialized } from '../utils/paths.js';
+export const doctorCommand = new Command('doctor')
+    .description('Diagnose Agentstage environment and runtime issues')
+    .option('--fix', 'Attempt to fix common issues')
+    .action(async (options) => {
+    console.log();
+    console.log(c.bold('Agentstage Doctor'));
+    console.log(c.gray('─'.repeat(50)));
+    console.log();
+    const results = [];
+    // 1. Check workspace
+    if (!isInitialized()) {
+        results.push({
+            name: 'Workspace',
+            status: 'error',
+            message: 'Not initialized',
+            details: ['Run: agentstage init'],
+        });
+    }
+    else {
+        try {
+            const workspaceDir = await getWorkspaceDir();
+            results.push({
+                name: 'Workspace',
+                status: 'ok',
+                message: `Found at ${workspaceDir}`,
+            });
+            // Check project structure
+            const checks = [
+                { path: 'src/routes', name: 'Routes directory' },
+                { path: 'src/components/ui', name: 'UI components' },
+                { path: 'package.json', name: 'Package.json' },
+            ];
+            for (const check of checks) {
+                const fullPath = join(workspaceDir, check.path);
+                if (existsSync(fullPath)) {
+                    results.push({
+                        name: check.name,
+                        status: 'ok',
+                        message: `Found (${check.path})`,
+                    });
+                }
+                else {
+                    results.push({
+                        name: check.name,
+                        status: 'error',
+                        message: `Missing: ${check.path}`,
+                    });
+                }
+            }
+            // Check bridge plugin in vite.config.ts
+            const viteConfigPath = join(workspaceDir, 'vite.config.ts');
+            if (existsSync(viteConfigPath)) {
+                const viteConfig = await import('fs/promises').then(fs => fs.readFile(viteConfigPath, 'utf8'));
+                if (viteConfig.includes('bridgePlugin')) {
+                    results.push({
+                        name: 'Bridge plugin',
+                        status: 'ok',
+                        message: 'Configured in vite.config.ts',
+                    });
+                }
+                else {
+                    results.push({
+                        name: 'Bridge plugin',
+                        status: 'error',
+                        message: 'Missing bridgePlugin() in vite.config.ts',
+                    });
+                }
+            }
+            else {
+                results.push({
+                    name: 'Bridge plugin',
+                    status: 'error',
+                    message: 'vite.config.ts not found',
+                });
+            }
+        }
+        catch (error) {
+            results.push({
+                name: 'Workspace',
+                status: 'error',
+                message: error.message,
+            });
+        }
+    }
+    // 2. Check runtime status
+    const config = await readRuntimeConfig();
+    if (config) {
+        try {
+            process.kill(config.pid, 0);
+            results.push({
+                name: 'Runtime',
+                status: 'ok',
+                message: 'Running',
+                details: [`PID: ${config.pid}`, `Port: ${config.port}`],
+            });
+        }
+        catch {
+            results.push({
+                name: 'Runtime',
+                status: 'error',
+                message: 'Not running (stale config file)',
+                details: ['Run: agentstage start'],
+            });
+        }
+    }
+    else {
+        results.push({
+            name: 'Runtime',
+            status: 'warn',
+            message: 'Not started',
+            details: ['Run: agentstage start'],
+        });
+    }
+    // 3. Check ports
+    const portChecks = [
+        { port: 3000, name: 'Web Port (3000)' },
+        { port: 42069, name: 'DevTools Port (42069)' },
+    ];
+    for (const { port, name } of portChecks) {
+        try {
+            const { stdout } = await execa('lsof', ['-ti', `:${port}`], { reject: false });
+            if (stdout.trim()) {
+                results.push({
+                    name,
+                    status: 'warn',
+                    message: `Port ${port} is in use`,
+                    details: [`PID: ${stdout.trim()}`, 'May cause startup issues'],
+                });
+            }
+            else {
+                results.push({
+                    name,
+                    status: 'ok',
+                    message: `Port ${port} is available`,
+                });
+            }
+        }
+        catch {
+            results.push({
+                name,
+                status: 'ok',
+                message: `Port ${port} (unable to check)`,
+            });
+        }
+    }
+    // 4. Check dependencies
+    try {
+        const workspaceDir = await getWorkspaceDir();
+        const nodeModulesPath = join(workspaceDir, 'node_modules');
+        const bridgePath = join(nodeModulesPath, '@agentstage', 'bridge');
+        if (!existsSync(nodeModulesPath)) {
+            results.push({
+                name: 'Dependencies',
+                status: 'error',
+                message: 'node_modules not found',
+                details: ['Run: npm install'],
+            });
+        }
+        else if (!existsSync(bridgePath)) {
+            results.push({
+                name: 'Dependencies',
+                status: 'error',
+                message: 'agent-stage-bridge not installed',
+                details: ['Run: npm install @agentstage/bridge'],
+            });
+        }
+        else {
+            results.push({
+                name: 'Dependencies',
+                status: 'ok',
+                message: 'Core dependencies installed',
+            });
+        }
+    }
+    catch (error) {
+        results.push({
+            name: 'Dependencies',
+            status: 'error',
+            message: error.message,
+        });
+    }
+    // Print results
+    console.log();
+    for (const result of results) {
+        const icon = result.status === 'ok' ? c.green('✓') :
+            result.status === 'warn' ? c.yellow('⚠') : c.red('✗');
+        const statusColor = result.status === 'ok' ? c.green :
+            result.status === 'warn' ? c.yellow : c.red;
+        console.log(`${icon} ${c.bold(result.name)}: ${statusColor(result.message)}`);
+        if (result.details) {
+            for (const detail of result.details) {
+                console.log(`  ${c.gray('→')} ${detail}`);
+            }
+        }
+    }
+    // Summary
+    console.log();
+    console.log(c.gray('─'.repeat(50)));
+    const errors = results.filter(r => r.status === 'error').length;
+    const warnings = results.filter(r => r.status === 'warn').length;
+    if (errors > 0) {
+        console.log(c.red(`Found ${errors} error(s), ${warnings} warning(s)`));
+        console.log();
+        console.log('To fix issues, try:');
+        console.log(`  ${c.cyan('agentstage doctor --fix')}  (attempt automatic fixes)`);
+        console.log(`  ${c.cyan('agentstage stop && agentstage start')}  (restart runtime)`);
+    }
+    else if (warnings > 0) {
+        console.log(c.yellow(`Found ${warnings} warning(s), all checks passed`));
+    }
+    else {
+        console.log(c.green('All checks passed!'));
+    }
+    console.log();
+    // Fix mode
+    if (options.fix && (errors > 0 || warnings > 0)) {
+        console.log(c.bold('Attempting fixes...'));
+        console.log();
+        // Try to kill stale processes
+        try {
+            const { stdout } = await execa('lsof', ['-ti', ':3000'], { reject: false });
+            if (stdout.trim()) {
+                console.log(`Killing process on port 3000: ${stdout.trim()}`);
+                try {
+                    process.kill(parseInt(stdout.trim()), 'SIGKILL');
+                    console.log(c.green('✓ Killed'));
+                }
+                catch (e) {
+                    console.log(c.red('✗ Failed to kill'));
+                }
+            }
+        }
+        catch {
+            // ignore
+        }
+        console.log();
+        console.log('Fixes applied. Run ' + c.cyan('agentstage start') + ' to start runtime.');
+        console.log();
+    }
+    process.exit(errors > 0 ? 1 : 0);
+});

package/dist/commands/exec.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare const execCommand: Command;

package/dist/commands/exec.js

@@ -0,0 +1,59 @@
+import { Command } from 'commander';
+import consola from 'consola';
+import { BridgeClient } from 'agent-stage-bridge/sdk';
+import { readRuntimeConfig, isInitialized } from '../utils/paths.js';
+export const execCommand = new Command('exec')
+    .description('Execute an action on a page or set state')
+    .argument('<page>', 'Page ID')
+    .argument('[action]', 'Action name')
+    .argument('[payload]', 'Action payload as JSON')
+    .option('-s, --state <json>', 'Set state directly')
+    .action(async (pageId, action, payload, options) => {
+    try {
+        // 1. 检查是否已初始化
+        if (!isInitialized()) {
+            consola.error('Project not initialized. Please run `agentstage init` first.');
+            process.exit(1);
+        }
+        // 2. 检查是否已启动
+        const config = await readRuntimeConfig();
+        if (!config) {
+            consola.error('Runtime is not running. Please run `agentstage start` first.');
+            process.exit(1);
+        }
+        const client = new BridgeClient(`ws://localhost:${config.port}/_bridge`);
+        await client.connect();
+        // 查找 page 对应的 store
+        const stores = await client.listStores();
+        consola.info(`Found ${stores.length} stores:`, stores.map(s => `${s.pageId}:${s.storeKey} (${s.id})`));
+        const store = stores.find(s => s.pageId === pageId && s.storeKey === 'main');
+        if (!store) {
+            consola.error(`Page "${pageId}" not found`);
+            consola.info('Available pages:', stores.map(s => s.pageId));
+            client.disconnect();
+            process.exit(1);
+        }
+        if (options.state) {
+            // 设置 state
+            const state = JSON.parse(options.state);
+            await client.setState(store.id, state);
+            consola.success('State updated');
+        }
+        else if (action) {
+            // 执行 action
+            const actionPayload = payload ? JSON.parse(payload) : undefined;
+            await client.dispatch(store.id, { type: action, payload: actionPayload });
+            consola.success(`Action "${action}" executed`);
+        }
+        else {
+            consola.error('Please specify an action or use --state');
+            client.disconnect();
+            process.exit(1);
+        }
+        client.disconnect();
+    }
+    catch (error) {
+        consola.error('Failed to execute:', error.message);
+        process.exit(1);
+    }
+});

package/dist/commands/init.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare const initCommand: Command;