@ranker/raxflow 0.2.2 → 0.2.4

package/src/setup/components/CliDetector.tsx

@@ -1,230 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Box, Text, useInput } from "ink";
-import Spinner from "ink-spinner";
-import { detectInstalledClis, DetectedCli } from "../utils/cli-detection.js";
-
-export type { DetectedCli };
-
-interface CliDetectorProps {
-  onDetected: (clis: DetectedCli[]) => void;
-  onContinue: () => void;
-  onBack: () => void;
-}
-
-export function CliDetector({ onDetected, onContinue, onBack }: CliDetectorProps) {
-  const [detecting, setDetecting] = useState(true);
-  const [detectedClis, setDetectedClis] = useState<DetectedCli[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const PRIMARY = "#f97316";
-
-  useEffect(() => {
-    detectInstalledClis()
-      .then((clis) => {
-        setDetectedClis(clis);
-        onDetected(clis);
-        setDetecting(false);
-      })
-      .catch((err) => {
-        setError(err.message);
-        setDetecting(false);
-      });
-  }, [onDetected]);
-
-  useInput((input, key) => {
-    if (!detecting) {
-      if (key.return || input === "c") {
-        onContinue();
-      } else if (input === "b") {
-        onBack();
-      }
-    }
-  });
-
-  if (detecting) {
-    return (
-      <Box flexDirection="column">
-        <Box marginBottom={1}>
-          <Text color={PRIMARY} bold>
-            DETECTING INSTALLED TOOLS
-          </Text>
-        </Box>
-        <Box>
-          <Text color="#f59e0b">
-            <Spinner type="dots" />
-          </Text>
-          <Text color="#a1a1aa"> Scanning for compatible CLI tools...</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  if (error) {
-    return (
-      <Box flexDirection="column">
-        <Text color="#ef4444">Error detecting CLIs: {error}</Text>
-        <Box marginTop={1}>
-          <Text color="#71717a">[B] Back</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  const availableClis = detectedClis.filter((c) => c.detected);
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text color={PRIMARY} bold>
-          DETECTED TOOLS
-        </Text>
-      </Box>
-
-      <Box flexDirection="column" marginBottom={1}>
-        {detectedClis.map((cli) => (
-          <Box key={cli.id}>
-            <Text color={cli.detected ? "#22c55e" : "#71717a"}>
-              {cli.detected ? "●" : "○"}
-            </Text>
-            <Text> </Text>
-            <Text color={cli.detected ? "#ffffff" : "#71717a"}>
-              {cli.name}
-            </Text>
-            {cli.version && (
-              <Text color="#a1a1aa"> v{cli.version.split(" ")[0]}</Text>
-            )}
-            {cli.configPath && (
-              <Text color="#71717a" dimColor>
-                {" "}
-                ({cli.configPath})
-              </Text>
-            )}
-          </Box>
-        ))}
-      </Box>
-
-      {availableClis.length === 0 && (
-        <Box marginBottom={1}>
-          <Text color="#f59e0b">
-            ⚠ No compatible CLI tools detected. You can still use cloud providers.
-          </Text>
-        </Box>
-      )}
-
-      <Box>
-        <Text color="#27272a">{"─".repeat(50)}</Text>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color="#22c55e">[C] Continue</Text>
-        <Text color="#71717a">  [B] Back</Text>
-      </Box>
-    </Box>
-  );
-}
-
-interface CliSelectorProps {
-  detectedClis: DetectedCli[];
-  selectedClis: string[];
-  onToggle: (cliId: string) => void;
-  onContinue: () => void;
-  onBack: () => void;
-}
-
-export function CliSelector({
-  detectedClis,
-  selectedClis,
-  onToggle,
-  onContinue,
-  onBack,
-}: CliSelectorProps) {
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const availableClis = detectedClis.filter((c) => c.detected);
-  const PRIMARY = "#f97316";
-
-  useInput((input, key) => {
-    if (key.upArrow) {
-      setFocusedIndex((prev) =>
-        prev === 0 ? availableClis.length : prev - 1
-      );
-    } else if (key.downArrow) {
-      setFocusedIndex((prev) =>
-        prev === availableClis.length ? 0 : prev + 1
-      );
-    } else if (key.return) {
-      if (focusedIndex === availableClis.length) {
-        onContinue();
-      } else {
-        onToggle(availableClis[focusedIndex].id);
-      }
-    } else if (input === " ") {
-      if (focusedIndex < availableClis.length) {
-        onToggle(availableClis[focusedIndex].id);
-      }
-    } else if (input === "b") {
-      onBack();
-    }
-  });
-
-  if (availableClis.length === 0) {
-    return (
-      <Box flexDirection="column">
-        <Text color="#f59e0b">No CLI tools detected. Skipping hub setup...</Text>
-        <Box marginTop={1}>
-          <Text color="#22c55e">[C] Continue</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text color={PRIMARY} bold>
-          SELECT TOOLS TO INTEGRATE
-        </Text>
-      </Box>
-
-      <Box marginBottom={1}>
-        <Text color="#a1a1aa" dimColor>
-          Use ↑/↓ to navigate, SPACE to toggle, ENTER to continue
-        </Text>
-      </Box>
-
-      <Box flexDirection="column">
-        {availableClis.map((cli, index) => {
-          const isSelected = selectedClis.includes(cli.id);
-          const isFocused = index === focusedIndex;
-
-          return (
-            <Box key={cli.id}>
-              <Text color={isFocused ? PRIMARY : "#27272a"}>
-                {isFocused ? "▶ " : "  "}
-              </Text>
-              <Text color={isSelected ? "#22c55e" : "#a1a1aa"}>
-                [{isSelected ? "■" : " "}]
-              </Text>
-              <Text> </Text>
-              <Text color={isFocused ? "#ffffff" : "#a1a1aa"} bold={isFocused}>
-                {cli.name}
-              </Text>
-              {cli.version && (
-                <Text color="#71717a"> {cli.version.split(" ")[0]}</Text>
-              )}
-            </Box>
-          );
-        })}
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color={focusedIndex === availableClis.length ? PRIMARY : "#a1a1aa"}>
-          {focusedIndex === availableClis.length ? "▶ " : "  "}
-        </Text>
-        <Text color="#22c55e">[CONTINUE]</Text>
-      </Box>
-
-      <Box marginTop={1}>
-        <Text color="#71717a">[B] Back</Text>
-      </Box>
-    </Box>
-  );
-}

package/src/setup/components/ModeSelector.tsx

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

@@ -1,175 +0,0 @@
-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 BACK is focused, go back
-      if (focusedIndex === PROVIDERS.length + 1) {
-        onBack();
-      } else if (selectedProviders.length > 0) {
-        // If at least one provider is selected, ENTER should continue
-        onContinue();
-      } else if (focusedIndex < PROVIDERS.length) {
-        // No providers selected yet: toggle the focused provider
-        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 };