rax-flow 0.1.8 → 0.2.0

package/src/setup/components/ModeSelector.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface ModeSelectorProps {
+  selectedMode: "hub" | "standalone" | "both" | null;
+  onSelect: (mode: "hub" | "standalone" | "both") => void;
+  onContinue: () => void;
+}
+
+const MODES = [
+  {
+    id: "hub" as const,
+    key: "1",
+    name: "HUB MODE",
+    description: "Use rax-flow within your existing CLI",
+    features: [
+      "Integrates with claude-code, codex, opencode, kilo",
+      "Orchestrates agents inside your preferred tool",
+      "Minimal setup, maximum compatibility",
+    ],
+  },
+  {
+    id: "standalone" as const,
+    key: "2",
+    name: "STANDALONE MODE",
+    description: "Use rax-flow as your main CLI",
+    features: [
+      "Full interactive TUI with panels and visualization",
+      "Complete orchestration from terminal",
+      "Advanced workflow management",
+    ],
+  },
+  {
+    id: "both" as const,
+    key: "3",
+    name: "BOTH",
+    description: "Setup both modes for maximum flexibility",
+    features: [
+      "Full hub integration with your CLIs",
+      "Standalone TUI when you need it",
+      "Best of both worlds",
+    ],
+  },
+];
+
+export function ModeSelector({ selectedMode, onSelect, onContinue }: ModeSelectorProps) {
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const PRIMARY = "#f97316";
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setFocusedIndex((prev) => (prev === 0 ? MODES.length : prev - 1));
+    } else if (key.downArrow) {
+      setFocusedIndex((prev) => (prev === MODES.length ? 0 : prev + 1));
+    } else if (key.return) {
+      if (focusedIndex === MODES.length && selectedMode) {
+        onContinue();
+      } else if (focusedIndex < MODES.length) {
+        onSelect(MODES[focusedIndex].id);
+      }
+    } else if (input === "1" || input === "2" || input === "3") {
+      const index = parseInt(input) - 1;
+      if (index < MODES.length) {
+        onSelect(MODES[index].id);
+        setFocusedIndex(index);
+      }
+    } else if (input === " ") {
+      if (focusedIndex < MODES.length) {
+        onSelect(MODES[focusedIndex].id);
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text color={PRIMARY} bold>
+          SELECT USAGE MODE
+        </Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text color="#a1a1aa" dimColor>
+          Press 1, 2, or 3 to select, ENTER to continue
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {MODES.map((mode, index) => {
+          const isSelected = selectedMode === mode.id;
+          const isFocused = index === focusedIndex;
+
+          return (
+            <Box
+              key={mode.id}
+              flexDirection="column"
+              marginBottom={1}
+              borderStyle={isSelected ? "bold" : "single"}
+              borderColor={isSelected ? PRIMARY : "#27272a"}
+              paddingX={1}
+            >
+              <Box>
+                <Text color={isFocused ? PRIMARY : "#27272a"}>
+                  {isFocused ? "▶ " : "  "}
+                </Text>
+                <Text color="#f59e0b">[{mode.key}]</Text>
+                <Text> </Text>
+                <Text color={isSelected ? PRIMARY : "#ffffff"} bold>
+                  {mode.name}
+                </Text>
+                <Text color="#a1a1aa"> - {mode.description}</Text>
+              </Box>
+
+              {isSelected && (
+                <Box flexDirection="column" marginLeft={4} marginTop={0}>
+                  {mode.features.map((feature, i) => (
+                    <Box key={i}>
+                      <Text color="#71717a">◆</Text>
+                      <Text color="#a1a1aa"> {feature}</Text>
+                    </Box>
+                  ))}
+                </Box>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={focusedIndex === MODES.length ? PRIMARY : "#a1a1aa"}>
+          {focusedIndex === MODES.length ? "▶ " : "  "}
+        </Text>
+        <Text color={selectedMode ? "#22c55e" : "#71717a"}>[CONTINUE]</Text>
+      </Box>
+    </Box>
+  );
+}

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>
+  );
+}