rax-flow 0.1.9 → 0.2.0

package/src/setup/components/ProviderSelector.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface Provider {
+  id: string;
+  name: string;
+  description: string;
+  key: string;
+  requiresApiKey: boolean;
+}
+
+const PROVIDERS: Provider[] = [
+  {
+    id: "host",
+    name: "Host-Native",
+    description: "Use your local AI CLI tool (Claude Code, Codex, etc.)",
+    key: "H",
+    requiresApiKey: false,
+  },
+  {
+    id: "anthropic",
+    name: "Anthropic API",
+    description: "Direct Claude API access",
+    key: "A",
+    requiresApiKey: true,
+  },
+  {
+    id: "openai",
+    name: "OpenAI",
+    description: "GPT-4 and other OpenAI models",
+    key: "O",
+    requiresApiKey: true,
+  },
+  {
+    id: "gemini",
+    name: "Gemini",
+    description: "Google's Gemini models",
+    key: "G",
+    requiresApiKey: true,
+  },
+  {
+    id: "mistral",
+    name: "Mistral",
+    description: "Mistral AI models",
+    key: "M",
+    requiresApiKey: true,
+  },
+  {
+    id: "groq",
+    name: "Groq",
+    description: "Fast inference with Groq",
+    key: "Q",
+    requiresApiKey: true,
+  },
+];
+
+interface ProviderSelectorProps {
+  selectedProviders: string[];
+  onToggle: (providerId: string) => void;
+  onContinue: () => void;
+  onBack: () => void;
+}
+
+export function ProviderSelector({
+  selectedProviders,
+  onToggle,
+  onContinue,
+  onBack,
+}: ProviderSelectorProps) {
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const PRIMARY = "#f97316";
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setFocusedIndex((prev) => (prev === 0 ? PROVIDERS.length - 1 : prev - 1));
+    } else if (key.downArrow) {
+      setFocusedIndex((prev) => (prev === PROVIDERS.length - 1 ? 0 : prev + 1));
+    } else if (key.return) {
+      if (focusedIndex === PROVIDERS.length) {
+        if (selectedProviders.length > 0) {
+          onContinue();
+        }
+      } else if (focusedIndex === PROVIDERS.length + 1) {
+        onBack();
+      } else {
+        onToggle(PROVIDERS[focusedIndex].id);
+      }
+    } else if (input === " ") {
+      if (focusedIndex < PROVIDERS.length) {
+        onToggle(PROVIDERS[focusedIndex].id);
+      }
+    } else if (key.leftArrow || input === "b") {
+      onBack();
+    } else {
+      // Check for key shortcuts
+      const provider = PROVIDERS.find((p) => p.key.toLowerCase() === input.toLowerCase());
+      if (provider) {
+        onToggle(provider.id);
+      }
+    }
+  });
+
+  useEffect(() => {
+    // Add extra navigation items
+  }, []);
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text color="#f97316" bold>
+          SELECT PROVIDERS
+        </Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text color="#a1a1aa" dimColor>
+          Use ↑/↓ to navigate, SPACE to toggle, ENTER to continue
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {PROVIDERS.map((provider, index) => {
+          const isSelected = selectedProviders.includes(provider.id);
+          const isFocused = index === focusedIndex;
+
+          return (
+            <Box key={provider.id} marginBottom={0}>
+              <Text color={isFocused ? PRIMARY : "#27272a"}>
+                {isFocused ? "▶ " : "  "}
+              </Text>
+              <Text color={isSelected ? "#22c55e" : "#a1a1aa"}>
+                [{isSelected ? "■" : " "}]
+              </Text>
+              <Text> </Text>
+              <Text color="#f59e0b">[{provider.key}]</Text>
+              <Text> </Text>
+              <Text color={isFocused ? "#ffffff" : "#a1a1aa"} bold={isFocused}>
+                {provider.name}
+              </Text>
+              <Text color="#71717a"> - {provider.description}</Text>
+            </Box>
+          );
+        })}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="#27272a">{"─".repeat(50)}</Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={focusedIndex === PROVIDERS.length ? PRIMARY : "#a1a1aa"}>
+          {focusedIndex === PROVIDERS.length ? "▶ " : "  "}
+        </Text>
+        <Text color={selectedProviders.length > 0 ? "#22c55e" : "#71717a"}>
+          [CONTINUE]
+        </Text>
+        <Text> </Text>
+        <Text color={focusedIndex === PROVIDERS.length + 1 ? PRIMARY : "#a1a1aa"}>
+          {focusedIndex === PROVIDERS.length + 1 ? "▶ " : "  "}
+        </Text>
+        <Text color="#a1a1aa">[BACK]</Text>
+      </Box>
+
+      {selectedProviders.length === 0 && (
+        <Box marginTop={1}>
+          <Text color="#f59e0b">⚠ Select at least one provider to continue</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export { PROVIDERS };
+export type { Provider };

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 RAX-FLOW Setup Wizard
+              </Text>
+            </Box>
+            <Box marginBottom={1}>
+              <Text color="#71717a" dimColor>
+                This wizard will help you configure RAX-FLOW 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>
+  );
+}