@ranker/raxflow 0.2.0

package/src/setup/components/CliDetector.tsx

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

@@ -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 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

@@ -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 };