@ranker/raxflow 0.2.0

package/src/tui/styles/indicators.ts

@@ -0,0 +1,54 @@
+export const statusIndicators = {
+  online: { icon: "●", color: "#22c55e" },
+  offline: { icon: "○", color: "#71717a" },
+  pending: { icon: "○", color: "#71717a" },
+  running: { icon: "▶", color: "#f97316" },
+  loading: { icon: "◐", color: "#f59e0b" },
+  queued: { icon: "◐", color: "#f59e0b" },
+  done: { icon: "●", color: "#22c55e" },
+  success: { icon: "●", color: "#22c55e" },
+  error: { icon: "✗", color: "#ef4444" },
+  mutation: { icon: "◆", color: "#f59e0b" },
+  checkpoint: { icon: "■", color: "#f97316" },
+  idle: { icon: "○", color: "#71717a" },
+};
+
+export function getStatusIndicator(status: string): { icon: string; color: string } {
+  const normalized = status.toLowerCase();
+  return statusIndicators[normalized as keyof typeof statusIndicators] || statusIndicators.pending;
+}
+
+export const spinnerFrames = ["◐", "◓", "◑", "◒"];
+
+export const dotsSpinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⼸", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export const circleSpinnerFrames = ["◐", "◓", "◑", "◒"];
+
+export const pulseFrames = ["●", "◐", "○", "◐"];
+
+export const breathFrames = ["●", "●", "◐", "◐", "○", "○", "◐", "◐"];
+
+export const progressMarkerFrames = ["▶", "▸", "▶", "▸"];
+
+export const progressGlowFrames = ["█", "▓", "█", "▓"];
+
+export function getSpinnerFrame(tick: number, type: "circle" | "dots" | "pulse" = "circle"): string {
+  const frames = type === "dots" ? dotsSpinnerFrames : type === "pulse" ? pulseFrames : circleSpinnerFrames;
+  return frames[tick % frames.length];
+}
+
+export function getPulseFrame(tick: number): string {
+  return pulseFrames[tick % pulseFrames.length];
+}
+
+export function getBreathFrame(tick: number): string {
+  return breathFrames[tick % breathFrames.length];
+}
+
+export function getProgressMarker(tick: number): string {
+  return progressMarkerFrames[tick % progressMarkerFrames.length];
+}
+
+export function getProgressGlow(tick: number): string {
+  return progressGlowFrames[tick % progressGlowFrames.length];
+}

package/src/tui/styles/layout.ts

@@ -0,0 +1,44 @@
+export const layout = {
+  defaultWidth: 80,
+  panelWidth: {
+    chat: 40,
+    dag: 38,
+    status: 28,
+    logs: 32,
+    metrics: 28,
+    memory: 30,
+  },
+  padding: {
+    x: 1,
+    y: 0,
+  },
+  progressWidth: 16,
+};
+
+export function formatTimestamp(date: Date): string {
+  return date.toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+export function formatTimestampMs(date: Date): string {
+  const time = date.toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  const ms = String(date.getMilliseconds()).padStart(3, "0");
+  return `${time}.${ms}`;
+}
+
+export function padRight(text: string, width: number): string {
+  const padding = Math.max(0, width - text.length);
+  return text + " ".repeat(padding);
+}
+
+export function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + "...";
+}

package/src/tui/styles/providers.ts

@@ -0,0 +1,32 @@
+export const providerTags = {
+  host: { code: "[H]", name: "Host-Native" },
+  claude: { code: "[C]", name: "Claude Code" },
+  opencode: { code: "[O]", name: "OpenCode" },
+  kilo: { code: "[K]", name: "Kilo" },
+  anthropic: { code: "[A]", name: "Anthropic API" },
+  gemini: { code: "[G]", name: "Gemini" },
+  mistral: { code: "[M]", name: "Mistral" },
+  groq: { code: "[Q]", name: "Groq" },
+  openai: { code: "[O]", name: "OpenAI" },
+};
+
+export function getProviderTag(provider: string): { code: string; name: string } {
+  const normalized = provider.toLowerCase().replace(/[-_\s]/g, "");
+  for (const [key, value] of Object.entries(providerTags)) {
+    if (normalized.includes(key)) {
+      return value;
+    }
+  }
+  return { code: "[?]", name: provider };
+}
+
+export const logStatusTags = {
+  run: { tag: "[RUN]", color: "#f97316" },
+  success: { tag: "[SUCCESS]", color: "#22c55e" },
+  warn: { tag: "[WARN]", color: "#f59e0b" },
+  error: { tag: "[ERROR]", color: "#ef4444" },
+  info: { tag: "[INFO]", color: "#a1a1aa" },
+  mutate: { tag: "[MUTATE]", color: "#f59e0b" },
+  done: { tag: "[DONE]", color: "#22c55e" },
+  start: { tag: "[START]", color: "#f97316" },
+};

package/src/tui/utils/animation.ts

@@ -0,0 +1,124 @@
+export const spinnerSequences = {
+  dots: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+  line: ["─", "┐", "│", "┌"],
+  circle: ["◐", "◓", "◑", "◒"],
+  pulse: ["●", "◐", "○", "◐"],
+  bounce: ["⠁", "⠃", "⠇", "⡇", "⣇", "⣧", "⣷", "⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣭", "⣩", "⣈", "⡈", "⠈"],
+  triangle: ["◢", "◣", "◤", "◥"],
+  square: ["◰", "◳", "◲", "◱"],
+};
+
+export const glowChars = ["░", "▒", "▓", "█"];
+
+export const progressChars = {
+  empty: "░",
+  quarter: "▒",
+  half: "▓",
+  full: "█",
+  head: "▶",
+  marker: "↑",
+};
+
+export const scanlineChars = ["─", "━", "═", "━"];
+
+export function getSpinnerFrame(tick: number, type: keyof typeof spinnerSequences = "dots"): string {
+  const frames = spinnerSequences[type];
+  return frames[tick % frames.length];
+}
+
+export function getGlowChar(intensity: number): string {
+  const index = Math.min(3, Math.max(0, Math.floor(intensity * 4)));
+  return glowChars[index];
+}
+
+export function easeIn(t: number): number {
+  return t * t;
+}
+
+export function easeOut(t: number): number {
+  return 1 - (1 - t) * (1 - t);
+}
+
+export function easeInOut(t: number): number {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+
+export function linear(t: number): number {
+  return t;
+}
+
+export function pingPong(t: number, min: number = 0, max: number = 1): number {
+  const cycle = t % 2;
+  return min + (cycle < 1 ? cycle : 2 - cycle) * (max - min);
+}
+
+export function breathe(t: number, min: number = 0.3, max: number = 1): number {
+  return min + (Math.sin(t * Math.PI * 2) + 1) / 2 * (max - min);
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * clamp(t, 0, 1);
+}
+
+export const bracketProgress = {
+  empty: (width: number = 10): string => `[${".".repeat(width)}]`,
+  progress: (progress: number, width: number = 10): string => {
+    const filled = Math.round(progress * width);
+    const empty = width - filled;
+    return `[${"=".repeat(filled)}${empty > 0 ? ".".repeat(empty) : ""}]`;
+  },
+  animated: (progress: number, tick: number, width: number = 10): string => {
+    const filled = Math.round(progress * width);
+    const empty = width - filled;
+    const head = filled < width ? [">", "=", "-"][tick % 3] : "";
+    return `[${"=".repeat(Math.max(0, filled - 1))}${head}${empty > 0 ? ".".repeat(empty) : ""}]`;
+  },
+};
+
+export function createTypewriterEffect(text: string, progress: number): string {
+  const chars = Math.floor(progress * text.length);
+  return text.slice(0, chars);
+}
+
+export const statusTransitionAnims = {
+  idle_to_running: ["○", "◐", "◑", "●", "▶"],
+  running_to_done: ["▶", "●", "✓"],
+  running_to_error: ["▶", "◐", "✗"],
+  pending_to_running: ["○", "◐", "▶"],
+};
+
+export function getStatusTransitionFrame(
+  from: string,
+  to: string,
+  progress: number
+): string {
+  const key = `${from}_to_${to}` as keyof typeof statusTransitionAnims;
+  const frames = statusTransitionAnims[key];
+  if (!frames) return "●";
+  const index = Math.min(frames.length - 1, Math.floor(progress * frames.length));
+  return frames[index];
+}
+
+export function generateGridOverlay(width: number, height: number, cellSize: number = 10): string[] {
+  const lines: string[] = [];
+  for (let y = 0; y < height; y++) {
+    let line = "";
+    for (let x = 0; x < width; x++) {
+      if (y % cellSize === 0 && x % cellSize === 0) {
+        line += "┼";
+      } else if (y % cellSize === 0) {
+        line += "─";
+      } else if (x % cellSize === 0) {
+        line += "│";
+      } else {
+        line += " ";
+      }
+    }
+    lines.push(line);
+  }
+  return lines;
+}

package/src/vendor-manifests.ts

@@ -0,0 +1,113 @@
+import path from "node:path";
+import { HostTarget } from "./host-init-templates.js";
+
+export interface HostManifestModel {
+  version: number;
+  target: HostTarget;
+  title: string;
+  autoInjectMode: "native" | "scripted" | "manual";
+  bridgeCommand: string;
+  quickCommands: string[];
+  sessionEntryExamples: string[];
+  task: string | null;
+  files: {
+    bootstrapPrompt: string;
+    instructions: string;
+    bridgeAdapter: string;
+    bridgeRuntimeConfig: string;
+    bridgeSmokeTest: string;
+    vendorManifest: string;
+  };
+}
+
+function toRelative(baseDir: string, file: string): string {
+  const rel = path.relative(baseDir, file);
+  return rel.length > 0 ? rel : path.basename(file);
+}
+
+function buildClaudeManifest(baseDir: string, manifest: HostManifestModel) {
+  return {
+    schema: "rax.vendor.claude-code.v1",
+    session: {
+      initMessageFile: toRelative(baseDir, manifest.files.bootstrapPrompt),
+      mode: manifest.autoInjectMode,
+      bridgeCommand: manifest.bridgeCommand
+    },
+    orchestrator: {
+      tool: "rax-flow",
+      quickCommands: manifest.quickCommands
+    }
+  };
+}
+
+function buildCodexManifest(baseDir: string, manifest: HostManifestModel) {
+  return {
+    schema: "rax.vendor.codex.v1",
+    chat: {
+      bootstrapFile: toRelative(baseDir, manifest.files.bootstrapPrompt),
+      strategy: manifest.autoInjectMode
+    },
+    runtime: {
+      bridgeCommand: manifest.bridgeCommand,
+      taskContext: manifest.task
+    }
+  };
+}
+
+function buildOpenCodeManifest(baseDir: string, manifest: HostManifestModel) {
+  return {
+    schema: "rax.vendor.opencode.v1",
+    integration: {
+      startupPromptFile: toRelative(baseDir, manifest.files.bootstrapPrompt),
+      launchMode: manifest.autoInjectMode
+    },
+    orchestration: {
+      quickCommands: manifest.quickCommands,
+      bridgeCommand: manifest.bridgeCommand
+    }
+  };
+}
+
+function buildKiloManifest(baseDir: string, manifest: HostManifestModel) {
+  return {
+    schema: "rax.vendor.kilo.v1",
+    initializer: {
+      promptFile: toRelative(baseDir, manifest.files.bootstrapPrompt),
+      injectMode: manifest.autoInjectMode
+    },
+    runtime: {
+      bridgeCommand: manifest.bridgeCommand,
+      commandHints: manifest.sessionEntryExamples
+    }
+  };
+}
+
+function buildGenericManifest(baseDir: string, manifest: HostManifestModel) {
+  return {
+    schema: "rax.vendor.generic.v1",
+    bootstrap: {
+      file: toRelative(baseDir, manifest.files.bootstrapPrompt)
+    },
+    bridge: {
+      command: manifest.bridgeCommand,
+      mode: manifest.autoInjectMode
+    },
+    commands: manifest.quickCommands
+  };
+}
+
+export function generateVendorManifest(target: HostTarget, baseDir: string, manifest: HostManifestModel): Record<string, unknown> {
+  if (target === "claude-code") return buildClaudeManifest(baseDir, manifest);
+  if (target === "codex") return buildCodexManifest(baseDir, manifest);
+  if (target === "opencode") return buildOpenCodeManifest(baseDir, manifest);
+  if (target === "kilo") return buildKiloManifest(baseDir, manifest);
+  return buildGenericManifest(baseDir, manifest);
+}
+
+export function vendorManifestFilename(target: HostTarget): string {
+  if (target === "claude-code") return "vendor-claude-code.json";
+  if (target === "codex") return "vendor-codex.json";
+  if (target === "opencode") return "vendor-opencode.json";
+  if (target === "kilo") return "vendor-kilo.json";
+  return "vendor-generic.json";
+}

package/src/ws-relay.ts

@@ -0,0 +1,156 @@
+import { WebSocketServer, WebSocket } from "ws";
+import { RuntimeEventBus } from "rax-flow-core";
+import { readdir, readFile, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+export class WebSocketRelay {
+    private wss: WebSocketServer | null = null;
+    private clients = new Set<WebSocket>();
+    private bus: RuntimeEventBus | null = null;
+
+    constructor(private port: number = 3002) { }
+
+    public start(eventBus: RuntimeEventBus): void {
+        this.bus = eventBus;
+        try {
+            this.wss = new WebSocketServer({ port: this.port });
+            console.log(`\n[UI] 📡 WebSocket relay started on ws://localhost:${this.port}`);
+
+            this.wss.on("connection", (ws) => {
+                this.clients.add(ws);
+                ws.send(JSON.stringify({ type: "HELLO", timestamp: Date.now() }));
+
+                ws.on("close", () => {
+                    this.clients.delete(ws);
+                });
+
+                ws.on("message", async (data) => {
+                    try {
+                        const message = JSON.parse(data.toString());
+                        const historyDir = path.join(process.cwd(), ".rax-flow", "history");
+
+                        if (message.type === "GET_HISTORY") {
+                            try {
+                                const files = await readdir(historyDir);
+                                const runs = await Promise.all(
+                                    files.filter(f => f.endsWith(".json")).map(async f => {
+                                        const content = await readFile(path.join(historyDir, f), "utf8");
+                                        const parsed = JSON.parse(content);
+                                        return {
+                                            taskId: parsed.taskId,
+                                            timestamp: parsed.timestamp,
+                                            prompt: parsed.prompt,
+                                            success: parsed.result.success,
+                                            costUsd: parsed.metrics.totalCostUsd
+                                        };
+                                    })
+                                );
+                                ws.send(JSON.stringify({ type: "HISTORY_LIST", runs: runs.sort((a, b) => b.timestamp - a.timestamp) }));
+                            } catch {
+                                ws.send(JSON.stringify({ type: "HISTORY_LIST", runs: [] }));
+                            }
+                        }
+
+                        else if (message.type === "LOAD_RUN") {
+                            try {
+                                const file = path.join(historyDir, `${message.taskId}.json`);
+                                const content = await readFile(file, "utf8");
+                                ws.send(JSON.stringify({ type: "RUN_DATA", data: JSON.parse(content) }));
+                            } catch (err) {
+                                ws.send(JSON.stringify({ type: "ERROR", message: "Run not found" }));
+                            }
+                        }
+
+                        else if (message.type === "LIST_WORKFLOWS") {
+                            const workflowsDir = path.join(process.cwd(), ".rax-flow", "workflows");
+                            try {
+                                const files = await readdir(workflowsDir);
+                                const list = files.filter(f => f.endsWith(".json")).map(f => ({
+                                    id: f.replace(".json", ""),
+                                    filename: f
+                                }));
+                                ws.send(JSON.stringify({ type: "WORKFLOW_LIST", workflows: list }));
+                            } catch {
+                                ws.send(JSON.stringify({ type: "WORKFLOW_LIST", workflows: [] }));
+                            }
+                        }
+
+                        else if (message.type === "RESOLVE_APPROVAL") {
+                            this.bus?.emit({
+                                type: "INTERNAL_RESOLVE_APPROVAL",
+                                taskId: message.taskId,
+                                nodeId: message.nodeId,
+                                approved: message.approved,
+                                feedback: message.feedback
+                            } as any);
+                        }
+
+                        else if (message.type === "SAVE_WORKFLOW") {
+                            try {
+                                const workflowsDir = path.join(process.cwd(), ".rax-flow", "workflows");
+                                await mkdir(workflowsDir, { recursive: true });
+                                const file = path.join(workflowsDir, `${message.id}.json`);
+                                const data = {
+                                    id: message.id,
+                                    nodes: message.nodes,
+                                    edges: message.edges
+                                };
+                                await writeFile(file, JSON.stringify(data, null, 2));
+                                ws.send(JSON.stringify({ type: "INFO", message: `Workflow ${message.id} saved.` }));
+                                this.broadcast({ type: "REFRESH_WORKFLOWS" });
+                            } catch (err) {
+                                ws.send(JSON.stringify({ type: "ERROR", message: "Failed to save workflow" }));
+                            }
+                        }
+
+                        else if (message.type === "DELETE_WORKFLOW") {
+                            try {
+                                const url = path.join(process.cwd(), ".rax-flow", "workflows", `${message.id}.json`);
+                                const { unlink } = await import("node:fs/promises");
+                                await unlink(url);
+                                this.broadcast({ type: "REFRESH_WORKFLOWS" });
+                            } catch (err) {
+                                ws.send(JSON.stringify({ type: "ERROR", message: "Failed to delete workflow" }));
+                            }
+                        }
+                    } catch (e) {
+                        console.error("[WS] Message parse error:", e);
+                    }
+                });
+
+                ws.on("error", () => {
+                    this.clients.delete(ws);
+                });
+            });
+
+            this.wss.on("error", (err) => {
+                console.error(`[UI] WebSocket server error: ${err.message}`);
+            });
+
+            eventBus.onEvent((event) => {
+                this.broadcast(event);
+            });
+        } catch (err) {
+            console.error(`[UI] Failed to start WebSocket server: ${err}`);
+        }
+    }
+
+    private broadcast(event: unknown): void {
+        if (!this.wss) return;
+        const payload = JSON.stringify(event);
+        for (const client of this.clients) {
+            if (client.readyState === WebSocket.OPEN) {
+                client.send(payload);
+            }
+        }
+    }
+
+    public stop(): void {
+        if (this.wss) {
+            this.wss.close();
+            this.wss = null;
+            this.clients.clear();
+            console.log("[UI] 📡 WebSocket relay stopped.");
+        }
+    }
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "esModuleInterop": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../core"
+    },
+    {
+      "path": "../agents"
+    },
+    {
+      "path": "../providers"
+    }
+  ]
+}