rax-flow 0.1.8 → 0.2.0

package/src/setup/components/StepIndicator.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface StepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+  steps: string[];
+}
+
+export function StepIndicator({ currentStep, totalSteps, steps }: StepIndicatorProps) {
+  const PRIMARY = "#f97316";
+  const SECONDARY = "#a1a1aa";
+  const BORDER = "#27272a";
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color={SECONDARY}>╭</Text>
+        <Text color={BORDER}>{"─".repeat(58)}</Text>
+        <Text color={SECONDARY}>╮</Text>
+      </Box>
+      
+      <Box>
+        <Text color={SECONDARY}>│</Text>
+        <Box width={58} flexDirection="row">
+          {steps.map((step, index) => {
+            const stepNum = index + 1;
+            const isActive = stepNum === currentStep;
+            const isCompleted = stepNum < currentStep;
+            
+            return (
+              <Box key={index} marginRight={1}>
+                {isCompleted ? (
+                  <Text color="#22c55e">✓</Text>
+                ) : isActive ? (
+                  <Text color={PRIMARY} bold>{`[${stepNum}]`}</Text>
+                ) : (
+                  <Text color={SECONDARY}>{` ${stepNum} `}</Text>
+                )}
+                <Text color={isActive ? PRIMARY : SECONDARY}> {step}</Text>
+              </Box>
+            );
+          })}
+        </Box>
+        <Text color={SECONDARY}>│</Text>
+      </Box>
+
+      <Box>
+        <Text color={SECONDARY}>╰</Text>
+        <Text color={BORDER}>{"─".repeat(58)}</Text>
+        <Text color={SECONDARY}>╯</Text>
+      </Box>
+    </Box>
+  );
+}
+
+interface CompactStepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export function CompactStepIndicator({ currentStep, totalSteps }: CompactStepIndicatorProps) {
+  const PRIMARY = "#f97316";
+  
+  return (
+    <Box>
+      <Text color={PRIMARY} bold>
+        STEP {currentStep}/{totalSteps}
+      </Text>
+      <Text color="#27272a"> │ </Text>
+      <Text color="#a1a1aa">{"●".repeat(currentStep)}{"○".repeat(totalSteps - currentStep)}</Text>
+    </Box>
+  );
+}

package/src/setup/components/SuccessScreen.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+
+interface SuccessScreenProps {
+  summary: {
+    mode: "hub" | "standalone" | "both";
+    providers: string[];
+    hubTargets?: string[];
+    filesCreated: string[];
+    warnings?: string[];
+  };
+  onExit: () => void;
+}
+
+const CHECKMARK_ANIMATION = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const SUCCESS_FRAMES = ["✓", "✓", "✓"];
+
+export function SuccessScreen({ summary, onExit }: SuccessScreenProps) {
+  const [animFrame, setAnimFrame] = useState(0);
+  const [showContent, setShowContent] = useState(false);
+  const PRIMARY = "#f97316";
+
+  useEffect(() => {
+    const animInterval = setInterval(() => {
+      setAnimFrame((prev) => {
+        if (prev < CHECKMARK_ANIMATION.length - 1) {
+          return prev + 1;
+        } else {
+          setShowContent(true);
+          clearInterval(animInterval);
+          return prev;
+        }
+      });
+    }, 80);
+
+    return () => clearInterval(animInterval);
+  }, []);
+
+  useEffect(() => {
+    if (showContent) {
+      const timer = setTimeout(() => {
+        // Auto-close after showing content
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [showContent]);
+
+  return (
+    <Box flexDirection="column" alignItems="center">
+      {!showContent ? (
+        <Box>
+          <Text color="#22c55e">{CHECKMARK_ANIMATION[animFrame]}</Text>
+          <Text color="#a1a1aa"> Finalizing setup...</Text>
+        </Box>
+      ) : (
+        <>
+          <Box marginBottom={1}>
+            <Text color="#22c55e" bold>
+              ╔═══════════════════════════════════════════════════════╗
+            </Text>
+          </Box>
+          
+          <Box>
+            <Text color="#22c55e" bold>
+              ║
+            </Text>
+            <Text color="#22c55e" bold>
+              {"          ✓ SETUP COMPLETE                         "}
+            </Text>
+            <Text color="#22c55e" bold>
+              ║
+            </Text>
+          </Box>
+
+          <Box>
+            <Text color="#27272a" bold>
+              ╚═══════════════════════════════════════════════════════╝
+            </Text>
+          </Box>
+
+          <Box marginTop={2} flexDirection="column">
+            <Box marginBottom={1}>
+              <Text color={PRIMARY} bold>
+                CONFIGURATION SUMMARY
+              </Text>
+            </Box>
+
+            <Box>
+              <Text color="#a1a1aa">Mode: </Text>
+              <Text color="#ffffff" bold>
+                {summary.mode.toUpperCase()}
+              </Text>
+            </Box>
+
+            <Box>
+              <Text color="#a1a1aa">Providers: </Text>
+              <Text color="#22c55e">{summary.providers.join(", ")}</Text>
+            </Box>
+
+            {summary.hubTargets && summary.hubTargets.length > 0 && (
+              <Box>
+                <Text color="#a1a1aa">Hub Integration: </Text>
+                <Text color="#f59e0b">{summary.hubTargets.join(", ")}</Text>
+              </Box>
+            )}
+
+            <Box marginTop={1}>
+              <Text color={PRIMARY} bold>
+                FILES CREATED
+              </Text>
+            </Box>
+
+            {summary.filesCreated.map((file, index) => (
+              <Box key={index}>
+                <Text color="#22c55e">  ● </Text>
+                <Text color="#a1a1aa">{file}</Text>
+              </Box>
+            ))}
+
+            {summary.warnings && summary.warnings.length > 0 && (
+              <>
+                <Box marginTop={1}>
+                  <Text color="#f59e0b" bold>
+                    WARNINGS
+                  </Text>
+                </Box>
+                {summary.warnings.map((warning, index) => (
+                  <Box key={index}>
+                    <Text color="#f59e0b">  ⚠ </Text>
+                    <Text color="#a1a1aa">{warning}</Text>
+                  </Box>
+                ))}
+              </>
+            )}
+          </Box>
+
+          <Box marginTop={2} flexDirection="column">
+            <Box marginBottom={1}>
+              <Text color={PRIMARY} bold>
+                NEXT STEPS
+              </Text>
+            </Box>
+
+            <Box>
+              <Text color="#71717a">1. Run </Text>
+              <Text color="#f59e0b">rax-flow doctor</Text>
+              <Text color="#71717a"> to verify setup</Text>
+            </Box>
+
+            <Box>
+              <Text color="#71717a">2. Try </Text>
+              <Text color="#f59e0b">rax-flow</Text>
+              <Text color="#71717a"> to launch the hub</Text>
+            </Box>
+
+            <Box>
+              <Text color="#71717a">3. Run </Text>
+              <Text color="#f59e0b">rax-flow run --prompt "..." --stream</Text>
+              <Text color="#71717a"> to execute</Text>
+            </Box>
+          </Box>
+
+          <Box marginTop={2}>
+            <Text color="#27272a">{"─".repeat(55)}</Text>
+          </Box>
+
+          <Box marginTop={1}>
+            <Text color={PRIMARY}>
+              RAX-FLOW is now the operational backbone of your CLI workflow.
+            </Text>
+          </Box>
+
+          <Box marginTop={1}>
+            <Text color="#71717a" dimColor>
+              Press any key to exit...
+            </Text>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+}
+
+export function ErrorScreen({
+  error,
+  onRetry,
+  onExit,
+}: {
+  error: string;
+  onRetry?: () => void;
+  onExit: () => void;
+}) {
+  return (
+    <Box flexDirection="column" alignItems="center">
+      <Box marginBottom={1}>
+        <Text color="#ef4444" bold>
+          ╔═══════════════════════════════════════════════════════╗
+        </Text>
+      </Box>
+
+      <Box>
+        <Text color="#ef4444" bold>
+          ║
+        </Text>
+        <Text color="#ef4444" bold>
+          {"          ✗ SETUP FAILED                          "}
+        </Text>
+        <Text color="#ef4444" bold>
+          ║
+        </Text>
+      </Box>
+
+      <Box>
+        <Text color="#27272a" bold>
+          ╚═══════════════════════════════════════════════════════╝
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="#ef4444">{error}</Text>
+      </Box>
+
+      <Box marginTop={2}>
+        {onRetry && <Text color="#f59e0b">[R] Retry</Text>}
+        <Text color="#71717a">  [E] Exit</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/setup/index.ts

@@ -0,0 +1,34 @@
+import { render } from "ink";
+import React from "react";
+import { SetupWizard } from "./components/SetupWizard.js";
+
+export async function runSetup(): Promise<number> {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      React.createElement(SetupWizard)
+    );
+
+    // Handle process termination
+    const handleExit = () => {
+      unmount();
+      resolve(0);
+    };
+
+    process.on("exit", handleExit);
+    process.on("SIGINT", () => {
+      unmount();
+      resolve(0);
+    });
+  });
+}
+
+export { SetupWizard } from "./components/SetupWizard.js";
+export { AsciiBanner, IndustrialDivider, IndustrialBox, StatusIndicator } from "./components/AsciiBanner.js";
+export { StepIndicator, CompactStepIndicator } from "./components/StepIndicator.js";
+export { ProviderSelector, PROVIDERS } from "./components/ProviderSelector.js";
+export { ApiKeyInput, ApiKeyCollector } from "./components/ApiKeyInput.js";
+export { CliDetector, CliSelector } from "./components/CliDetector.js";
+export { ModeSelector } from "./components/ModeSelector.js";
+export { SuccessScreen, ErrorScreen } from "./components/SuccessScreen.js";
+export * from "./utils/cli-detection.js";
+export * from "./utils/config-writer.js";

package/src/setup/utils/cli-detection.ts

@@ -0,0 +1,99 @@
+import { execSync } from "node:child_process";
+import { access } from "node:fs/promises";
+import { constants } from "node:fs";
+import path from "node:path";
+import os from "node:os";
+
+export interface DetectedCli {
+  id: string;
+  name: string;
+  detected: boolean;
+  configPath?: string;
+  version?: string;
+}
+
+const CLI_CONFIG_PATHS: Record<string, string[]> = {
+  "claude-code": [
+    path.join(os.homedir(), ".claude"),
+    path.join(os.homedir(), ".config", "claude-code"),
+  ],
+  codex: [
+    path.join(os.homedir(), ".codex"),
+    path.join(os.homedir(), ".config", "codex"),
+  ],
+  opencode: [
+    path.join(os.homedir(), ".opencode"),
+    path.join(os.homedir(), ".config", "opencode"),
+  ],
+  kilo: [
+    path.join(os.homedir(), ".kilo"),
+    path.join(os.homedir(), ".config", "kilo"),
+  ],
+};
+
+const CLI_BOOTSTRAP_FILES: Record<string, string> = {
+  "claude-code": "CLAUDE.md",
+  codex: "CODEX.md",
+  opencode: "OPENCODE.md",
+  kilo: "KILO.md",
+};
+
+export function getCliBootstrapFile(cliId: string): string {
+  return CLI_BOOTSTRAP_FILES[cliId] || "README.md";
+}
+
+export async function detectInstalledClis(): Promise<DetectedCli[]> {
+  const candidates = [
+    { id: "claude-code", name: "Claude Code", cmd: "claude-code --version" },
+    { id: "codex", name: "Codex", cmd: "codex --version" },
+    { id: "opencode", name: "OpenCode", cmd: "opencode --version" },
+    { id: "kilo", name: "Kilo", cmd: "kilo --version" },
+  ];
+
+  const results: DetectedCli[] = [];
+
+  for (const cli of candidates) {
+    let detected = false;
+    let version: string | undefined;
+    let configPath: string | undefined;
+
+    try {
+      const output = execSync(cli.cmd, { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] });
+      detected = true;
+      version = output.trim().split("\n")[0];
+    } catch {
+      // Not in PATH, check config directories
+    }
+
+    // Check for config directories even if not in PATH
+    const configPaths = CLI_CONFIG_PATHS[cli.id] || [];
+    for (const p of configPaths) {
+      try {
+        await access(p, constants.F_OK);
+        configPath = p;
+        if (!detected) detected = true;
+        break;
+      } catch {
+        // Directory doesn't exist
+      }
+    }
+
+    results.push({
+      id: cli.id,
+      name: cli.name,
+      detected,
+      configPath,
+      version,
+    });
+  }
+
+  return results;
+}
+
+export async function detectInstalledClisFast(): Promise<DetectedCli[]> {
+  return detectInstalledClis();
+}
+
+export function getCliConfigPath(cliId: string): string | undefined {
+  return (CLI_CONFIG_PATHS[cliId] || [])[0];
+}

package/src/setup/utils/config-writer.ts

@@ -0,0 +1,249 @@
+import { mkdir, writeFile, access } from "node:fs/promises";
+import { constants } from "node:fs";
+import path from "node:path";
+import os from "node:os";
+
+export interface ProviderConfig {
+  id: string;
+  name: string;
+  apiKey?: string;
+  model?: string;
+  apiKeyEnv?: string;
+}
+
+export interface SetupConfig {
+  mode: "hub" | "standalone" | "both";
+  providers: ProviderConfig[];
+  defaultProvider: string;
+  hubTargets: string[];
+  projectPath: string;
+}
+
+export interface RaxrcConfig {
+  version: number;
+  defaultProvider: string;
+  strongProvider?: string;
+  providers: Record<string, {
+    model?: string;
+    apiKeyEnv?: string;
+    apiKey?: string;
+    mode?: string;
+    bridgeCommand?: string;
+    bridgeCommandEnv?: string;
+  }>;
+  privacyMode: boolean;
+  verifyFixLoops: number;
+}
+
+const ENV_VAR_MAP: Record<string, string> = {
+  anthropic: "ANTHROPIC_API_KEY",
+  openai: "OPENAI_API_KEY",
+  gemini: "GOOGLE_API_KEY",
+  mistral: "MISTRAL_API_KEY",
+  groq: "GROQ_API_KEY",
+};
+
+const MODEL_MAP: Record<string, string> = {
+  anthropic: "claude-3-5-sonnet-latest",
+  openai: "gpt-4o",
+  gemini: "gemini-2.0-flash",
+  mistral: "mistral-large-latest",
+  groq: "llama-3.3-70b-versatile",
+};
+
+export async function ensureDirectory(dir: string): Promise<void> {
+  try {
+    await access(dir, constants.F_OK);
+  } catch {
+    await mkdir(dir, { recursive: true });
+  }
+}
+
+export async function writeRaxrc(targetDir: string, config: SetupConfig): Promise<string> {
+  const raxrc: RaxrcConfig = {
+    version: 1,
+    defaultProvider: config.defaultProvider,
+    providers: {},
+    privacyMode: true,
+    verifyFixLoops: 3,
+  };
+
+  // Add host provider if hub mode
+  if (config.mode === "hub" || config.mode === "both") {
+    const primaryTarget = config.hubTargets[0] || "claude-code";
+    raxrc.providers.host = {
+      model: primaryTarget,
+      mode: "auto",
+      bridgeCommand: primaryTarget,
+      bridgeCommandEnv: "RAX_HOST_BRIDGE_COMMAND",
+    };
+  }
+
+  // Add configured providers
+  for (const provider of config.providers) {
+    if (provider.id === "host") continue;
+    
+    raxrc.providers[provider.id] = {
+      model: provider.model || MODEL_MAP[provider.id] || "unknown",
+      apiKeyEnv: ENV_VAR_MAP[provider.id] || `${provider.id.toUpperCase()}_API_KEY`,
+    };
+
+    if (provider.apiKey) {
+      raxrc.providers[provider.id].apiKey = provider.apiKey;
+    }
+  }
+
+  // Ensure at least one fallback
+  if (!raxrc.providers.openai) {
+    raxrc.providers.openai = {
+      model: "gpt-4o",
+      apiKeyEnv: "OPENAI_API_KEY",
+    };
+  }
+
+  if (!raxrc.providers.anthropic) {
+    raxrc.providers.anthropic = {
+      model: "claude-3-5-sonnet-latest",
+      apiKeyEnv: "ANTHROPIC_API_KEY",
+    };
+  }
+
+  const filePath = path.join(targetDir, ".raxrc");
+  await writeFile(filePath, JSON.stringify(raxrc, null, 2) + "\n", "utf-8");
+  return filePath;
+}
+
+export async function writeHubBootstrap(
+  targetCli: string,
+  configPath: string,
+  projectPath: string
+): Promise<string> {
+  const bootstrapFileName = getBootstrapFileName(targetCli);
+  const raxFlowDir = path.join(configPath, ".rax-flow");
+  
+  await ensureDirectory(raxFlowDir);
+  await ensureDirectory(path.join(raxFlowDir, "workflows"));
+
+  const bootstrapContent = generateBootstrapContent(targetCli, projectPath);
+  const bootstrapPath = path.join(configPath, bootstrapFileName);
+  
+  await writeFile(bootstrapPath, bootstrapContent, "utf-8");
+  
+  // Create example workflow
+  const exampleWorkflow = {
+    id: "default-workflow",
+    nodes: [
+      { id: "analyze", agent: "IntentClassifierAgent", dependsOn: [] },
+      { id: "spec", agent: "SpecAgent", dependsOn: ["analyze"] },
+      { id: "implement", agent: "CodeGeneratorAgent", dependsOn: ["spec"] },
+      { id: "verify", agent: "ValidatorAgent", dependsOn: ["implement"] },
+    ],
+  };
+  
+  const workflowPath = path.join(raxFlowDir, "workflows", "default.json");
+  await writeFile(workflowPath, JSON.stringify(exampleWorkflow, null, 2) + "\n", "utf-8");
+
+  return bootstrapPath;
+}
+
+function getBootstrapFileName(cliId: string): string {
+  const map: Record<string, string> = {
+    "claude-code": "CLAUDE.md",
+    codex: "CODEX.md",
+    opencode: "OPENCODE.md",
+    kilo: "KILO.md",
+  };
+  return map[cliId] || "RAXFLOW.md";
+}
+
+function generateBootstrapContent(cliId: string, projectPath: string): string {
+  return `# RAX-FLOW Bootstrap Configuration
+
+This project is configured to work with RAX-FLOW orchestration.
+
+## Project Context
+- Path: ${projectPath}
+- CLI: ${cliId}
+
+## Available Commands
+- \`rax-flow run --prompt "..." --stream\` - Execute orchestrated workflow
+- \`rax-flow doctor\` - Check system health
+- \`rax-flow status\` - View current state
+
+## Workflows
+Workflows are stored in \`.rax-flow/workflows/\` directory.
+
+## Provider Configuration
+See \`.raxrc\` in the project root for provider settings.
+`;
+}
+
+export async function writeStandaloneConfig(projectPath: string): Promise<{
+  raxFlowDir: string;
+  workflowsDir: string;
+  globalDir: string;
+}> {
+  const raxFlowDir = path.join(projectPath, ".rax-flow");
+  const workflowsDir = path.join(raxFlowDir, "workflows");
+  const globalDir = path.join(os.homedir(), ".rax-flow");
+
+  await ensureDirectory(raxFlowDir);
+  await ensureDirectory(workflowsDir);
+  await ensureDirectory(globalDir);
+
+  // Create default workflow
+  const defaultWorkflow = {
+    id: "default",
+    name: "Default Workflow",
+    nodes: [
+      { id: "classify", agent: "IntentClassifierAgent", dependsOn: [] },
+      { id: "plan", agent: "TaskPlannerAgent", dependsOn: ["classify"] },
+      { id: "code", agent: "CodeGeneratorAgent", dependsOn: ["plan"] },
+      { id: "test", agent: "TestAgent", dependsOn: ["code"] },
+      { id: "fix", agent: "FixAgent", dependsOn: ["test"] },
+    ],
+  };
+
+  const workflowPath = path.join(workflowsDir, "default.json");
+  await writeFile(workflowPath, JSON.stringify(defaultWorkflow, null, 2) + "\n", "utf-8");
+
+  // Create global config
+  const globalConfigPath = path.join(globalDir, "config.json");
+  const globalConfig = {
+    version: 1,
+    createdAt: new Date().toISOString(),
+    lastUsed: new Date().toISOString(),
+  };
+  await writeFile(globalConfigPath, JSON.stringify(globalConfig, null, 2) + "\n", "utf-8");
+
+  return { raxFlowDir, workflowsDir, globalDir };
+}
+
+export async function validateSetup(projectPath: string): Promise<{
+  valid: boolean;
+  errors: string[];
+  warnings: string[];
+}> {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  // Check .raxrc exists
+  try {
+    await access(path.join(projectPath, ".raxrc"), constants.F_OK);
+  } catch {
+    errors.push(".raxrc configuration file not found");
+  }
+
+  // Check .rax-flow directory
+  try {
+    await access(path.join(projectPath, ".rax-flow"), constants.F_OK);
+  } catch {
+    warnings.push(".rax-flow directory not found (optional for hub mode)");
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings,
+  };
+}