@ranker/raxflow 0.2.2 → 0.2.4

package/src/setup/components/SetupWizard.tsx

@@ -1,368 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,229 +0,0 @@
-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>
-  );
-}