cueclaw 0.0.1 → 0.0.3

package/dist/app-UJ4M3TPW.js

@@ -0,0 +1,448 @@
+import {
+  confirmPlan,
+  executeWorkflow,
+  generatePlan,
+  rejectPlan
+} from "./chunk-D77G7ABJ.js";
+import {
+  initDb,
+  listWorkflows
+} from "./chunk-K4PGB2DU.js";
+import {
+  loadConfig
+} from "./chunk-JRHM3Z4C.js";
+import {
+  logger
+} from "./chunk-E7BP6DMO.js";
+
+// src/tui/app.tsx
+import { useReducer, useCallback } from "react";
+import { Box as Box6, useInput as useInput3, useApp } from "ink";
+import { ThemeProvider } from "@inkjs/ui";
+
+// src/tui/theme.ts
+import { extendTheme, defaultTheme } from "@inkjs/ui";
+var cueclawTheme = extendTheme(defaultTheme, {
+  components: {
+    Banner: {
+      styles: {
+        logo: () => ({ color: "cyan" }),
+        tagline: () => ({ color: "gray", dimColor: true })
+      }
+    },
+    PlanView: {
+      styles: {
+        title: () => ({ color: "cyan", bold: true }),
+        stepPending: () => ({ color: "gray" }),
+        stepRunning: () => ({ color: "yellow" }),
+        stepDone: () => ({ color: "green" }),
+        stepFailed: () => ({ color: "red" }),
+        border: () => ({ borderColor: "gray" })
+      }
+    },
+    StatusDashboard: {
+      styles: {
+        executing: () => ({ color: "yellow" }),
+        completed: () => ({ color: "green" }),
+        failed: () => ({ color: "red" }),
+        paused: () => ({ color: "gray", dimColor: true })
+      }
+    },
+    Chat: {
+      styles: {
+        userMessage: () => ({ color: "white", bold: true }),
+        systemMessage: () => ({ color: "cyan" }),
+        prompt: () => ({ color: "green" })
+      }
+    }
+  }
+});
+
+// src/tui/banner.tsx
+import { useEffect } from "react";
+import { Box, Text } from "ink";
+import { useComponentTheme } from "@inkjs/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LOGO = `  \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557      \u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557    \u2588\u2588\u2557
+ \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551    \u2588\u2588\u2551
+ \u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2557 \u2588\u2588\u2551
+ \u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D  \u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2588\u2557\u2588\u2588\u2551
+ \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551  \u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2554\u2588\u2588\u2588\u2554\u255D
+  \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D \u255A\u2550\u2550\u255D\u255A\u2550\u2550\u255D`;
+function Banner({ onComplete }) {
+  const { styles } = useComponentTheme("Banner");
+  const logoStyle = styles?.logo?.() ?? { color: "cyan" };
+  const taglineStyle = styles?.tagline?.() ?? { color: "gray", dimColor: true };
+  useEffect(() => {
+    const timer = setTimeout(onComplete, 1e3);
+    return () => clearTimeout(timer);
+  }, [onComplete]);
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: 1, children: [
+    /* @__PURE__ */ jsx(Text, { ...logoStyle, children: LOGO }),
+    /* @__PURE__ */ jsx(Text, { ...taglineStyle, children: "\n orchestrate your agents with natural language" })
+  ] });
+}
+
+// src/tui/chat.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+import { TextInput, Spinner, useComponentTheme as useComponentTheme2 } from "@inkjs/ui";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Chat({ messages, isGenerating, onSubmit }) {
+  const { styles } = useComponentTheme2("Chat");
+  const userStyle = styles?.userMessage?.() ?? { color: "white", bold: true };
+  const systemStyle = styles?.systemMessage?.() ?? { color: "cyan" };
+  const promptStyle = styles?.prompt?.() ?? { color: "green" };
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: [
+      messages.map((msg, i) => /* @__PURE__ */ jsx2(Box2, { marginBottom: 1, children: msg.role === "user" ? /* @__PURE__ */ jsxs2(Text2, { ...userStyle, children: [
+        "You: ",
+        msg.text
+      ] }) : /* @__PURE__ */ jsxs2(Text2, { ...systemStyle, children: [
+        "CueClaw: ",
+        msg.text
+      ] }) }, i)),
+      isGenerating && /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(Spinner, { label: "Generating plan..." }) })
+    ] }),
+    !isGenerating && /* @__PURE__ */ jsxs2(Box2, { paddingX: 1, children: [
+      /* @__PURE__ */ jsx2(Text2, { ...promptStyle, children: "> " }),
+      /* @__PURE__ */ jsx2(
+        TextInput,
+        {
+          placeholder: "Describe your workflow...",
+          onSubmit: (value) => {
+            if (value.trim()) onSubmit(value.trim());
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/tui/plan-view.tsx
+import { Box as Box3, Text as Text3, useInput } from "ink";
+import { useComponentTheme as useComponentTheme3 } from "@inkjs/ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PlanView({ workflow, onConfirm, onModify, onCancel }) {
+  const { styles } = useComponentTheme3("PlanView");
+  const titleStyle = styles?.title?.() ?? { color: "cyan", bold: true };
+  const pendingStyle = styles?.stepPending?.() ?? { color: "gray" };
+  const borderStyle = styles?.border?.() ?? { borderColor: "gray" };
+  useInput((input) => {
+    if (input === "y" || input === "Y") onConfirm();
+    if (input === "m" || input === "M") onModify();
+    if (input === "n" || input === "N") onCancel();
+  });
+  const trigger = workflow.trigger;
+  const triggerLabel = trigger.type === "manual" ? "manual" : trigger.type === "cron" ? `cron (${trigger.expression})` : `poll (${trigger.interval_seconds}s)`;
+  const failureDesc = workflow.failure_policy.on_step_failure;
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingX: 1, borderStyle: "round", ...borderStyle, children: [
+    /* @__PURE__ */ jsxs3(Text3, { ...titleStyle, children: [
+      "Plan: ",
+      workflow.name
+    ] }),
+    /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "Trigger: ",
+      triggerLabel
+    ] }),
+    /* @__PURE__ */ jsx3(Text3, { children: "" }),
+    workflow.steps.map((step, i) => /* @__PURE__ */ jsx3(StepLine, { step, index: i + 1, style: pendingStyle }, step.id)),
+    /* @__PURE__ */ jsx3(Text3, { children: "" }),
+    /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "Failure policy: ",
+      failureDesc
+    ] }),
+    /* @__PURE__ */ jsx3(Text3, { children: "" }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsx3(Text3, { color: "green", children: "[Y] Confirm" }),
+      "  ",
+      /* @__PURE__ */ jsx3(Text3, { color: "yellow", children: "[M] Modify" }),
+      "  ",
+      /* @__PURE__ */ jsx3(Text3, { color: "red", children: "[N] Cancel" })
+    ] })
+  ] });
+}
+function StepLine({ step, index, style }) {
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs3(Text3, { ...style, children: [
+      index,
+      ". ",
+      step.description
+    ] }),
+    step.depends_on && step.depends_on.length > 0 && /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+      "   \u2514\u2500 depends on: ",
+      step.depends_on.join(", ")
+    ] })
+  ] });
+}
+
+// src/tui/status.tsx
+import { useState } from "react";
+import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Status({ workflows, onSelect, onBack }) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  useInput2((input, key) => {
+    if (key.upArrow && selectedIndex > 0) setSelectedIndex(selectedIndex - 1);
+    if (key.downArrow && selectedIndex < workflows.length - 1) setSelectedIndex(selectedIndex + 1);
+    if (key.return && workflows.length > 0) onSelect(workflows[selectedIndex]);
+    if (key.escape || input === "q") onBack();
+  });
+  const phaseColor = (phase) => {
+    switch (phase) {
+      case "executing":
+        return "yellow";
+      case "active":
+        return "green";
+      case "completed":
+        return "green";
+      case "failed":
+        return "red";
+      case "paused":
+        return "gray";
+      default:
+        return "white";
+    }
+  };
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, borderStyle: "round", borderColor: "gray", children: [
+    /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "Workflows" }),
+    /* @__PURE__ */ jsx4(Text4, { children: "" }),
+    workflows.length === 0 ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "No workflows found. Type a description to create one." }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsx4(Box4, { width: 14, children: /* @__PURE__ */ jsx4(Text4, { bold: true, children: "ID" }) }),
+        /* @__PURE__ */ jsx4(Box4, { width: 28, children: /* @__PURE__ */ jsx4(Text4, { bold: true, children: "Name" }) }),
+        /* @__PURE__ */ jsx4(Box4, { width: 14, children: /* @__PURE__ */ jsx4(Text4, { bold: true, children: "Phase" }) })
+      ] }),
+      workflows.map((wf, i) => /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(Text4, { inverse: i === selectedIndex, children: [
+        /* @__PURE__ */ jsx4(Text4, { children: wf.id.slice(0, 12).padEnd(14) }),
+        /* @__PURE__ */ jsx4(Text4, { children: wf.name.slice(0, 26).padEnd(28) }),
+        /* @__PURE__ */ jsx4(Text4, { color: phaseColor(wf.phase), children: wf.phase })
+      ] }) }, wf.id))
+    ] }),
+    /* @__PURE__ */ jsx4(Text4, { children: "" }),
+    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "[Enter] View  [Q] Back" })
+  ] });
+}
+
+// src/tui/execution-view.tsx
+import { Box as Box5, Text as Text5 } from "ink";
+import { Spinner as Spinner2, useComponentTheme as useComponentTheme4 } from "@inkjs/ui";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ExecutionView({ workflow, stepProgress, output }) {
+  const { styles } = useComponentTheme4("PlanView");
+  const titleStyle = styles?.title?.() ?? { color: "cyan", bold: true };
+  const isRunning = Array.from(stepProgress.values()).some((s) => s.status === "running");
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs5(Box5, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs5(Text5, { ...titleStyle, children: [
+        "Workflow: ",
+        workflow.name
+      ] }),
+      /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        "Status: ",
+        isRunning ? "Running" : "Complete"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5(Text5, { children: "" }),
+    /* @__PURE__ */ jsx5(Text5, { bold: true, children: "Steps:" }),
+    workflow.steps.map((step, i) => {
+      const progress = stepProgress.get(step.id);
+      const status = progress?.status ?? "pending";
+      const icon = statusIcon(status);
+      const durationText = progress?.duration ? ` (${formatDuration(progress.duration)})` : "";
+      return /* @__PURE__ */ jsxs5(Box5, { children: [
+        /* @__PURE__ */ jsxs5(Text5, { color: statusColor(status), children: [
+          icon,
+          " ",
+          i + 1,
+          ". ",
+          step.description,
+          durationText
+        ] }),
+        status === "running" && /* @__PURE__ */ jsx5(Spinner2, {})
+      ] }, step.id);
+    }),
+    output.length > 0 && /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\u2500\u2500 Live Output \u2500\u2500" }),
+      output.slice(-10).map((line, i) => /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: line }, i))
+    ] })
+  ] });
+}
+function statusIcon(status) {
+  switch (status) {
+    case "succeeded":
+      return "\u2713";
+    case "running":
+      return "\u25CF";
+    case "failed":
+      return "\u2717";
+    case "skipped":
+      return "\u25CB";
+    default:
+      return " ";
+  }
+}
+function statusColor(status) {
+  switch (status) {
+    case "succeeded":
+      return "green";
+    case "running":
+      return "yellow";
+    case "failed":
+      return "red";
+    case "skipped":
+      return "gray";
+    default:
+      return "gray";
+  }
+}
+function formatDuration(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${Math.round(ms / 1e3)}s`;
+}
+
+// src/tui/app.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function appReducer(state, action) {
+  switch (action.type) {
+    case "SHOW_CHAT":
+      return { ...state, view: "chat" };
+    case "SHOW_PLAN":
+      return { ...state, view: "plan", workflow: action.workflow };
+    case "SHOW_DASHBOARD":
+      return { ...state, view: "dashboard", workflows: action.workflows };
+    case "SHOW_EXECUTION":
+      return { ...state, view: "execution", workflow: action.workflow, stepProgress: /* @__PURE__ */ new Map(), executionOutput: [] };
+    case "ADD_MESSAGE":
+      return { ...state, messages: [...state.messages, action.message] };
+    case "SET_GENERATING":
+      return { ...state, isGenerating: action.value };
+    case "UPDATE_STEP":
+      return { ...state, stepProgress: new Map(state.stepProgress).set(action.stepId, action.progress) };
+    case "ADD_OUTPUT":
+      return { ...state, executionOutput: [...state.executionOutput, action.line] };
+    default:
+      return state;
+  }
+}
+var initialState = {
+  view: "banner",
+  messages: [],
+  workflow: null,
+  workflows: [],
+  isGenerating: false,
+  stepProgress: /* @__PURE__ */ new Map(),
+  executionOutput: []
+};
+function App({ noBanner, cwd }) {
+  const { exit } = useApp();
+  const config = loadConfig();
+  const db = initDb();
+  const [state, dispatch] = useReducer(appReducer, {
+    ...initialState,
+    view: noBanner ? "chat" : "banner"
+  });
+  useInput3((input, key) => {
+    if (input === "d" && key.ctrl) {
+      const workflows = listWorkflows(db);
+      dispatch({ type: "SHOW_DASHBOARD", workflows });
+    }
+    if (input === "c" && key.ctrl) {
+      exit();
+    }
+  });
+  const handleChatSubmit = useCallback(async (text) => {
+    dispatch({ type: "ADD_MESSAGE", message: { role: "user", text } });
+    dispatch({ type: "SET_GENERATING", value: true });
+    try {
+      const workflow = await generatePlan(text, config);
+      dispatch({ type: "ADD_MESSAGE", message: { role: "system", text: `Generated plan: "${workflow.name}"` } });
+      dispatch({ type: "SET_GENERATING", value: false });
+      dispatch({ type: "SHOW_PLAN", workflow });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      dispatch({ type: "ADD_MESSAGE", message: { role: "system", text: `Error: ${msg}` } });
+      dispatch({ type: "SET_GENERATING", value: false });
+      logger.error({ err }, "Plan generation failed");
+    }
+  }, [config]);
+  const handleConfirm = useCallback(async () => {
+    if (!state.workflow) return;
+    const confirmed = confirmPlan(state.workflow);
+    dispatch({ type: "SHOW_EXECUTION", workflow: confirmed });
+    try {
+      await executeWorkflow({
+        workflow: confirmed,
+        triggerData: null,
+        db,
+        cwd,
+        onProgress: (stepId, msg) => {
+          dispatch({ type: "UPDATE_STEP", stepId, progress: { stepId, status: "running" } });
+          if (typeof msg === "string") {
+            dispatch({ type: "ADD_OUTPUT", line: msg });
+          }
+        }
+      });
+      dispatch({ type: "ADD_MESSAGE", message: { role: "system", text: "Workflow execution completed." } });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      dispatch({ type: "ADD_MESSAGE", message: { role: "system", text: `Execution failed: ${msg}` } });
+      logger.error({ err }, "Workflow execution failed");
+    }
+  }, [state.workflow, db, cwd]);
+  const handleModify = useCallback(() => {
+    dispatch({ type: "SHOW_CHAT" });
+    dispatch({ type: "ADD_MESSAGE", message: { role: "system", text: "Describe your modifications:" } });
+  }, []);
+  const handleCancel = useCallback(() => {
+    if (state.workflow) {
+      rejectPlan(state.workflow);
+    }
+    dispatch({ type: "SHOW_CHAT" });
+    dispatch({ type: "ADD_MESSAGE", message: { role: "system", text: "Plan cancelled." } });
+  }, [state.workflow]);
+  const handleDashboardSelect = useCallback((workflow) => {
+    dispatch({ type: "SHOW_EXECUTION", workflow });
+  }, []);
+  const handleDashboardBack = useCallback(() => {
+    dispatch({ type: "SHOW_CHAT" });
+  }, []);
+  return /* @__PURE__ */ jsx6(ThemeProvider, { theme: cueclawTheme, children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    state.view === "banner" && /* @__PURE__ */ jsx6(Banner, { onComplete: () => dispatch({ type: "SHOW_CHAT" }) }),
+    state.view === "chat" && /* @__PURE__ */ jsx6(
+      Chat,
+      {
+        messages: state.messages,
+        isGenerating: state.isGenerating,
+        onSubmit: handleChatSubmit
+      }
+    ),
+    state.view === "plan" && state.workflow && /* @__PURE__ */ jsx6(
+      PlanView,
+      {
+        workflow: state.workflow,
+        onConfirm: handleConfirm,
+        onModify: handleModify,
+        onCancel: handleCancel
+      }
+    ),
+    state.view === "dashboard" && /* @__PURE__ */ jsx6(
+      Status,
+      {
+        workflows: state.workflows,
+        onSelect: handleDashboardSelect,
+        onBack: handleDashboardBack
+      }
+    ),
+    state.view === "execution" && state.workflow && /* @__PURE__ */ jsx6(
+      ExecutionView,
+      {
+        workflow: state.workflow,
+        stepProgress: state.stepProgress,
+        output: state.executionOutput
+      }
+    )
+  ] }) });
+}
+export {
+  App
+};