rax-flow 0.1.9 → 0.2.0

package/src/setup/components/ApiKeyInput.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+
+interface ApiKeyInputProps {
+  providerId: string;
+  providerName: string;
+  currentKey?: string;
+  envVar?: string;
+  onSetKey: (key: string) => void;
+  onSkip: () => void;
+  onBack: () => void;
+}
+
+export function ApiKeyInput({
+  providerId,
+  providerName,
+  currentKey,
+  envVar,
+  onSetKey,
+  onSkip,
+  onBack,
+}: ApiKeyInputProps) {
+  const [inputValue, setInputValue] = useState(currentKey || "");
+  const [isEditing, setIsEditing] = useState(true);
+  const [showKey, setShowKey] = useState(false);
+  const PRIMARY = "#f97316";
+
+  const envValue = process.env[envVar || ""];
+
+  useInput((input, key) => {
+    if (!isEditing) {
+      if (key.return || input === "s") {
+        onSkip();
+      } else if (input === "b") {
+        onBack();
+      } else if (input === "e") {
+        setIsEditing(true);
+      }
+    }
+  });
+
+  const handleSubmit = (value: string) => {
+    if (value.trim()) {
+      onSetKey(value.trim());
+    } else {
+      setIsEditing(false);
+    }
+  };
+
+  const maskedValue = (key: string) => {
+    if (key.length <= 8) return "••••••••";
+    return key.slice(0, 4) + "•".repeat(8) + key.slice(-4);
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text color={PRIMARY} bold>
+          CONFIGURE {providerName.toUpperCase()}
+        </Text>
+      </Box>
+
+      {envValue && (
+        <Box marginBottom={1}>
+          <Text color="#22c55e">✓</Text>
+          <Text color="#a1a1aa">
+            {" Found key in "}
+          </Text>
+          <Text color="#f59e0b">{envVar}</Text>
+        </Box>
+      )}
+
+      <Box marginBottom={1}>
+        <Text color="#a1a1aa">Enter your API key (or leave empty to skip):</Text>
+      </Box>
+
+      {isEditing ? (
+        <Box>
+          <Text color="#27272a">{"> "}</Text>
+          <TextInput
+            value={inputValue}
+            onChange={setInputValue}
+            onSubmit={handleSubmit}
+            placeholder={envValue ? "Press Enter to use env variable" : "sk-..."}
+            showCursor={true}
+          />
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {inputValue && (
+            <Box>
+              <Text color="#22c55e">✓ Key set: </Text>
+              <Text color="#a1a1aa">
+                {showKey ? inputValue : maskedValue(inputValue)}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text color="#27272a">{"─".repeat(50)}</Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="#71717a">[E] Edit</Text>
+        <Text color="#71717a">  [S] Skip</Text>
+        <Text color="#71717a">  [B] Back</Text>
+      </Box>
+    </Box>
+  );
+}
+
+interface ApiKeyCollectorProps {
+  providers: Array<{ id: string; name: string; requiresApiKey: boolean }>;
+  currentIndex: number;
+  keys: Record<string, string>;
+  onSetKey: (providerId: string, key: string) => void;
+  onSkip: () => void;
+  onBack: () => void;
+}
+
+const ENV_VAR_MAP: Record<string, string> = {
+  anthropic: "ANTHROPIC_API_KEY",
+  openai: "OPENAI_API_KEY",
+  gemini: "GOOGLE_API_KEY",
+  mistral: "MISTRAL_API_KEY",
+  groq: "GROQ_API_KEY",
+};
+
+export function ApiKeyCollector({
+  providers,
+  currentIndex,
+  keys,
+  onSetKey,
+  onSkip,
+  onBack,
+}: ApiKeyCollectorProps) {
+  const providersNeedingKeys = providers.filter((p) => p.requiresApiKey);
+  const currentProvider = providersNeedingKeys[currentIndex];
+
+  if (!currentProvider) {
+    return null;
+  }
+
+  return (
+    <ApiKeyInput
+      providerId={currentProvider.id}
+      providerName={currentProvider.name}
+      currentKey={keys[currentProvider.id]}
+      envVar={ENV_VAR_MAP[currentProvider.id]}
+      onSetKey={(key) => onSetKey(currentProvider.id, key)}
+      onSkip={onSkip}
+      onBack={onBack}
+    />
+  );
+}

package/src/setup/components/AsciiBanner.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+const PRIMARY = "#f97316";
+const SECONDARY = "#a1a1aa";
+
+const RAX_FLOW_ASCII = `
+╔══════════════════════════════════════════════════════════════════════════╗
+║  ██████╗  █████╗  ██████╗ ██╗  ██╗ █████╗ ███╗   ██╗ ██████╗███████╗    ║
+║  ██╔══██╗██╔══██╗██╔════╝██║ ██╔╝██╔══██╗████╗  ██║██╔════╝██╔════╝    ║
+║  ██████╔╝███████║██║     █████╔╝ ███████║██╔██╗ ██║██║     █████╗      ║
+║  ██╔══██╗██╔══██║██║     ██╔═██╗ ██╔══██║██║╚██╗██║██║     ██╔══╝      ║
+║  ██║  ██║██║  ██║╚██████╗██║  ██╗██║  ██║██║ ╚████║╚██████╗███████╗    ║
+║  ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝ ╚═════╝╚══════╝    ║
+╠══════════════════════════════════════════════════════════════════════════╣
+║  [■■■■■■■■■■] ORCHESTRATOR THAT EVOLVES WITH YOUR HOST TOOLS [■■■■■■]    ║
+╚══════════════════════════════════════════════════════════════════════════╝`;
+
+const RAX_FLOW_ASCII_COMPACT = `
+╔═══════════════════════════════════════════════════════╗
+║  ██████╗ █████╗ ██████╗ ██╗ ██╗███████╗              ║
+║  ██╔══██╗██╔══██╗██╔════╝ ██║ ██║██╔════╝              ║
+║  ██████╔╝███████║██║      █████║█████╗                ║
+║  ██╔══██╗██╔══██║██║      ██╔═██║██╔══╝               ║
+║  ██║  ██║██║  ██║╚██████╗ ██║  ██║███████╗            ║
+║  ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝            ║
+╠═══════════════════════════════════════════════════════╣
+║  [■■■■■] ORCHESTRATOR [■■■■■]                          ║
+╚═══════════════════════════════════════════════════════╝`;
+
+const GEAR_PATTERN = " ⚙ ";
+const CIRCUIT_PATTERN = " │├┤│ ";
+
+interface AsciiBannerProps {
+  compact?: boolean;
+  showTagline?: boolean;
+}
+
+export function AsciiBanner({ compact = false, showTagline = true }: AsciiBannerProps) {
+  const ascii = compact ? RAX_FLOW_ASCII_COMPACT : RAX_FLOW_ASCII;
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box>
+        <Text color={PRIMARY} bold>
+          {ascii}
+        </Text>
+      </Box>
+      {showTagline && (
+        <Box marginTop={1} justifyContent="center">
+          <Text color={SECONDARY} dimColor>
+            {compact ? "Setup Wizard v1.0" : "Multi-Agent Orchestration Framework • Setup Wizard v1.0"}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export function IndustrialDivider({ width = 60 }: { width?: number }) {
+  const segment = "─".repeat(Math.floor(width / 3));
+  const full = `╟${segment}╂${segment}╂${segment}╢`;
+  
+  return (
+    <Box>
+      <Text color="#27272a">{full}</Text>
+    </Box>
+  );
+}
+
+export function IndustrialBox({ 
+  children, 
+  title, 
+  width = 60,
+  active = false,
+}: { 
+  children: React.ReactNode;
+  title?: string;
+  width?: number;
+  active?: boolean;
+}) {
+  const borderColor = active ? PRIMARY : "#27272a";
+  const innerWidth = width - 4;
+  
+  return (
+    <Box flexDirection="column">
+      <Text color={borderColor}>
+        {`┌${title ? `─ ${title} ` : ""}${"─".repeat(innerWidth - (title?.length || 0) - 2)}┐`}
+      </Text>
+      <Box flexDirection="column" borderStyle="single" borderColor={borderColor}>
+        {children}
+      </Box>
+      <Text color={borderColor}>{`└${"─".repeat(innerWidth)}┘`}</Text>
+    </Box>
+  );
+}
+
+export function StatusIndicator({ 
+  status, 
+  label, 
+  active = false 
+}: { 
+  status: "online" | "offline" | "running" | "pending" | "done" | "error";
+  label: string;
+  active?: boolean;
+}) {
+  const indicators: Record<string, { char: string; color: string }> = {
+    online: { char: "●", color: "#22c55e" },
+    offline: { char: "○", color: "#71717a" },
+    running: { char: "▶", color: "#f59e0b" },
+    pending: { char: "◐", color: "#a1a1aa" },
+    done: { char: "✓", color: "#22c55e" },
+    error: { char: "✗", color: "#ef4444" },
+  };
+
+  const { char, color } = indicators[status];
+
+  return (
+    <Box>
+      <Text color={active ? PRIMARY : color}>{char}</Text>
+      <Text> </Text>
+      <Text color={active ? PRIMARY : "#ffffff"}>{label}</Text>
+    </Box>
+  );
+}

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