@ranker/raxflow 0.2.0

package/src/setup/components/SetupWizard.tsx

@@ -0,0 +1,368 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { AsciiBanner } from "./AsciiBanner.js";
+import { StepIndicator } from "./StepIndicator.js";
+import { ProviderSelector, PROVIDERS } from "./ProviderSelector.js";
+import { ApiKeyCollector } from "./ApiKeyInput.js";
+import { ModeSelector } from "./ModeSelector.js";
+import { CliDetector, CliSelector, DetectedCli } from "./CliDetector.js";
+import { SuccessScreen, ErrorScreen } from "./SuccessScreen.js";
+import {
+  writeRaxrc,
+  writeHubBootstrap,
+  writeStandaloneConfig,
+  SetupConfig,
+} from "../utils/config-writer.js";
+
+type SetupStep =
+  | "welcome"
+  | "providers"
+  | "apikeys"
+  | "mode"
+  | "hub"
+  | "cli-select"
+  | "standalone"
+  | "complete"
+  | "error";
+
+const STEPS = ["Welcome", "Providers", "API Keys", "Mode", "Configure", "Complete"];
+const TOTAL_STEPS = 5;
+
+interface WizardState {
+  step: SetupStep;
+  selectedProviders: string[];
+  apiKeys: Record<string, string>;
+  mode: "hub" | "standalone" | "both" | null;
+  detectedClis: DetectedCli[];
+  selectedClis: string[];
+  filesCreated: string[];
+  error: string | null;
+  currentKeyIndex: number;
+}
+
+export function SetupWizard() {
+  const { exit } = useApp();
+
+  const [state, setState] = useState<WizardState>({
+    step: "welcome",
+    selectedProviders: [],
+    apiKeys: {},
+    mode: null,
+    detectedClis: [],
+    selectedClis: [],
+    filesCreated: [],
+    error: null,
+    currentKeyIndex: 0,
+  });
+
+  const PRIMARY = "#f97316";
+
+  const getStepNumber = useCallback(() => {
+    switch (state.step) {
+      case "welcome":
+        return 1;
+      case "providers":
+        return 2;
+      case "apikeys":
+        return 2;
+      case "mode":
+        return 3;
+      case "hub":
+      case "cli-select":
+      case "standalone":
+        return 4;
+      case "complete":
+        return 5;
+      default:
+        return 1;
+    }
+  }, [state.step]);
+
+  useInput((input, key) => {
+    if (state.step === "welcome") {
+      if (key.return || input === " ") {
+        setState((s) => ({ ...s, step: "providers" }));
+      }
+    }
+
+    if (state.step === "complete") {
+      exit();
+    }
+
+    if (state.step === "error") {
+      if (input.toLowerCase() === "e" || key.escape) {
+        exit();
+      }
+    }
+
+    if (key.ctrl && input === "c") {
+      exit();
+    }
+  });
+
+  const handleProviderToggle = useCallback((providerId: string) => {
+    setState((s) => ({
+      ...s,
+      selectedProviders: s.selectedProviders.includes(providerId)
+        ? s.selectedProviders.filter((id) => id !== providerId)
+        : [...s.selectedProviders, providerId],
+    }));
+  }, []);
+
+  const handleProviderContinue = useCallback(() => {
+    const providersNeedingKeys = PROVIDERS.filter(
+      (p) => p.requiresApiKey && state.selectedProviders.includes(p.id)
+    );
+
+    if (providersNeedingKeys.length > 0) {
+      setState((s) => ({ ...s, step: "apikeys", currentKeyIndex: 0 }));
+    } else {
+      setState((s) => ({ ...s, step: "mode" }));
+    }
+  }, [state.selectedProviders]);
+
+  const handleApiKeySet = useCallback((providerId: string, key: string) => {
+    setState((s) => ({
+      ...s,
+      apiKeys: { ...s.apiKeys, [providerId]: key },
+      step: "mode",
+    }));
+  }, []);
+
+  const handleApiKeySkip = useCallback(() => {
+    setState((s) => ({ ...s, step: "mode" }));
+  }, []);
+
+  const handleModeSelect = useCallback((mode: "hub" | "standalone" | "both") => {
+    setState((s) => ({ ...s, mode }));
+  }, []);
+
+  const handleModeContinue = useCallback(() => {
+    if (state.mode === "hub" || state.mode === "both") {
+      setState((s) => ({ ...s, step: "hub" }));
+    } else {
+      setState((s) => ({ ...s, step: "standalone" }));
+    }
+  }, [state.mode]);
+
+  const handleClisDetected = useCallback((clis: DetectedCli[]) => {
+    setState((s) => ({ ...s, detectedClis: clis }));
+  }, []);
+
+  const handleHubContinue = useCallback(() => {
+    const availableClis = state.detectedClis.filter((c) => c.detected);
+    if (availableClis.length > 0) {
+      setState((s) => ({ ...s, step: "cli-select" }));
+    } else {
+      setState((s) => ({ ...s, step: "standalone" }));
+    }
+  }, [state.detectedClis]);
+
+  const handleCliToggle = useCallback((cliId: string) => {
+    setState((s) => ({
+      ...s,
+      selectedClis: s.selectedClis.includes(cliId)
+        ? s.selectedClis.filter((id) => id !== cliId)
+        : [...s.selectedClis, cliId],
+    }));
+  }, []);
+
+  const handleCliSelectContinue = useCallback(() => {
+    setState((s) => ({ ...s, step: "standalone" }));
+  }, []);
+
+  const handleBack = useCallback((targetStep: SetupStep) => {
+    setState((s) => ({ ...s, step: targetStep }));
+  }, []);
+
+  const runFinalSetup = useCallback(async () => {
+    try {
+      const config: SetupConfig = {
+        mode: state.mode!,
+        providers: state.selectedProviders.map((id) => ({
+          id,
+          name: PROVIDERS.find((p) => p.id === id)?.name || id,
+          apiKey: state.apiKeys[id],
+        })),
+        defaultProvider: state.selectedProviders[0] === "host" ? "host" : state.selectedProviders[0] || "openai",
+        hubTargets: state.selectedClis,
+        projectPath: process.cwd(),
+      };
+
+      const files: string[] = [];
+
+      const raxrcPath = await writeRaxrc(process.cwd(), config);
+      files.push(raxrcPath);
+
+      if (state.mode === "hub" || state.mode === "both") {
+        for (const cliId of state.selectedClis) {
+          const cli = state.detectedClis.find((c) => c.id === cliId);
+          if (cli?.configPath) {
+            const bootstrapPath = await writeHubBootstrap(
+              cliId,
+              cli.configPath,
+              process.cwd()
+            );
+            files.push(bootstrapPath);
+          }
+        }
+      }
+
+      if (state.mode === "standalone" || state.mode === "both") {
+        const { raxFlowDir, globalDir } = await writeStandaloneConfig(process.cwd());
+        files.push(raxFlowDir);
+        files.push(globalDir);
+      }
+
+      setState((s) => ({
+        ...s,
+        filesCreated: files,
+        step: "complete",
+      }));
+    } catch (err) {
+      setState((s) => ({
+        ...s,
+        error: err instanceof Error ? err.message : "Unknown error",
+        step: "error",
+      }));
+    }
+  }, [state.mode, state.selectedProviders, state.apiKeys, state.selectedClis, state.detectedClis]);
+
+  useEffect(() => {
+    if (state.step === "standalone") {
+      runFinalSetup();
+    }
+  }, [state.step, runFinalSetup]);
+
+  const renderStep = () => {
+    switch (state.step) {
+      case "welcome":
+        return (
+          <Box flexDirection="column" alignItems="center">
+            <AsciiBanner />
+            <Box marginTop={2} marginBottom={1}>
+              <Text color="#a1a1aa">
+                Welcome to the RAXFLOW Setup Wizard
+              </Text>
+            </Box>
+            <Box marginBottom={1}>
+              <Text color="#71717a" dimColor>
+                This wizard will help you configure RAXFLOW for your environment.
+              </Text>
+            </Box>
+            <Box marginTop={2}>
+              <Text color={PRIMARY}>Press ENTER to continue...</Text>
+            </Box>
+          </Box>
+        );
+
+      case "providers":
+        return (
+          <ProviderSelector
+            selectedProviders={state.selectedProviders}
+            onToggle={handleProviderToggle}
+            onContinue={handleProviderContinue}
+            onBack={() => handleBack("welcome")}
+          />
+        );
+
+      case "apikeys": {
+        const providersNeedingKeys = PROVIDERS.filter(
+          (p) => p.requiresApiKey && state.selectedProviders.includes(p.id)
+        );
+        return (
+          <ApiKeyCollector
+            providers={providersNeedingKeys}
+            currentIndex={state.currentKeyIndex}
+            keys={state.apiKeys}
+            onSetKey={handleApiKeySet}
+            onSkip={handleApiKeySkip}
+            onBack={() => handleBack("providers")}
+          />
+        );
+      }
+
+      case "mode":
+        return (
+          <ModeSelector
+            selectedMode={state.mode}
+            onSelect={handleModeSelect}
+            onContinue={handleModeContinue}
+          />
+        );
+
+      case "hub":
+        return (
+          <CliDetector
+            onDetected={handleClisDetected}
+            onContinue={handleHubContinue}
+            onBack={() => handleBack("mode")}
+          />
+        );
+
+      case "cli-select":
+        return (
+          <CliSelector
+            detectedClis={state.detectedClis}
+            selectedClis={state.selectedClis}
+            onToggle={handleCliToggle}
+            onContinue={handleCliSelectContinue}
+            onBack={() => handleBack("hub")}
+          />
+        );
+
+      case "standalone":
+        return (
+          <Box flexDirection="column" alignItems="center">
+            <Text color="#f59e0b">Setting up standalone configuration...</Text>
+          </Box>
+        );
+
+      case "complete":
+        return (
+          <SuccessScreen
+            summary={{
+              mode: state.mode!,
+              providers: state.selectedProviders,
+              hubTargets: state.selectedClis,
+              filesCreated: state.filesCreated,
+            }}
+            onExit={exit}
+          />
+        );
+
+      case "error":
+        return (
+          <ErrorScreen
+            error={state.error || "Unknown error"}
+            onExit={exit}
+          />
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Box flexDirection="column" padding={1} height="100%">
+      {state.step !== "welcome" && state.step !== "complete" && state.step !== "error" && (
+        <StepIndicator
+          currentStep={getStepNumber()}
+          totalSteps={TOTAL_STEPS}
+          steps={STEPS}
+        />
+      )}
+      <Box flexGrow={1} flexDirection="column">
+        {renderStep()}
+      </Box>
+      {state.step !== "welcome" && state.step !== "complete" && state.step !== "error" && (
+        <Box marginTop={1}>
+          <Text color="#71717a" dimColor>
+            Ctrl+C to exit
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

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">raxflow doctor</Text>
+              <Text color="#71717a"> to verify setup</Text>
+            </Box>
+
+            <Box>
+              <Text color="#71717a">2. Try </Text>
+              <Text color="#f59e0b">raxflow</Text>
+              <Text color="#71717a"> to launch the hub</Text>
+            </Box>
+
+            <Box>
+              <Text color="#71717a">3. Run </Text>
+              <Text color="#f59e0b">raxflow 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}>
+              RAXFLOW 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";