@reactive-agents/vue 0.9.0 → 0.10.4

package/dist/index.d.ts

@@ -0,0 +1,110 @@
+import * as vue from 'vue';
+
+/** Mirrors the AgentStreamEvent union from @reactive-agents/runtime. */
+type AgentStreamEvent = {
+    readonly _tag: "TextDelta";
+    readonly text: string;
+} | {
+    readonly _tag: "StreamCompleted";
+    readonly output: string;
+    readonly metadata: Record<string, unknown>;
+    readonly taskId?: string;
+    readonly agentId?: string;
+} | {
+    readonly _tag: "StreamError";
+    readonly cause: string;
+} | {
+    readonly _tag: "IterationProgress";
+    readonly iteration: number;
+    readonly maxIterations: number;
+    readonly status: string;
+} | {
+    readonly _tag: "StreamCancelled";
+    readonly reason: string;
+    readonly iterationsCompleted: number;
+} | {
+    readonly _tag: string;
+    readonly [key: string]: unknown;
+};
+type AgentHookState = "idle" | "streaming" | "completed" | "error";
+
+/**
+ * Stream agent output token-by-token from an SSE endpoint.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { text, status, error, run, cancel } = useAgentStream("/api/agent");
+ * </script>
+ * ```
+ */
+declare function useAgentStream(endpoint: string, requestInit?: Omit<RequestInit, "method" | "body" | "signal">): {
+    text: Readonly<vue.Ref<string, string>>;
+    events: Readonly<vue.Ref<readonly ({
+        readonly _tag: "TextDelta";
+        readonly text: string;
+    } | {
+        readonly _tag: "StreamCompleted";
+        readonly output: string;
+        readonly metadata: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+        readonly taskId?: string | undefined;
+        readonly agentId?: string | undefined;
+    } | {
+        readonly _tag: "StreamError";
+        readonly cause: string;
+    } | {
+        readonly _tag: "IterationProgress";
+        readonly iteration: number;
+        readonly maxIterations: number;
+        readonly status: string;
+    } | {
+        readonly _tag: "StreamCancelled";
+        readonly reason: string;
+        readonly iterationsCompleted: number;
+    } | {
+        readonly [x: string]: Readonly<unknown>;
+        readonly _tag: string;
+    })[], readonly ({
+        readonly _tag: "TextDelta";
+        readonly text: string;
+    } | {
+        readonly _tag: "StreamCompleted";
+        readonly output: string;
+        readonly metadata: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+        readonly taskId?: string | undefined;
+        readonly agentId?: string | undefined;
+    } | {
+        readonly _tag: "StreamError";
+        readonly cause: string;
+    } | {
+        readonly _tag: "IterationProgress";
+        readonly iteration: number;
+        readonly maxIterations: number;
+        readonly status: string;
+    } | {
+        readonly _tag: "StreamCancelled";
+        readonly reason: string;
+        readonly iterationsCompleted: number;
+    } | {
+        readonly [x: string]: Readonly<unknown>;
+        readonly _tag: string;
+    })[]>>;
+    status: Readonly<vue.Ref<AgentHookState, AgentHookState>>;
+    error: Readonly<vue.Ref<string | null, string | null>>;
+    output: Readonly<vue.Ref<string | null, string | null>>;
+    run: (prompt: string, body?: Record<string, unknown>) => Promise<void>;
+    cancel: () => void;
+};
+
+declare function useAgent(endpoint: string, requestInit?: Omit<RequestInit, "method" | "body">): {
+    output: Readonly<vue.Ref<string | null, string | null>>;
+    loading: Readonly<vue.Ref<boolean, boolean>>;
+    error: Readonly<vue.Ref<string | null, string | null>>;
+    run: (prompt: string, body?: Record<string, unknown>) => Promise<string>;
+};
+
+export { type AgentHookState, type AgentStreamEvent, useAgent, useAgentStream };

package/dist/index.js

@@ -0,0 +1,116 @@
+// src/use-agent-stream.ts
+import { ref, readonly } from "vue";
+function useAgentStream(endpoint, requestInit) {
+  const text = ref("");
+  const events = ref([]);
+  const status = ref("idle");
+  const error = ref(null);
+  const output = ref(null);
+  let abortController = null;
+  function cancel() {
+    abortController?.abort();
+    status.value = "idle";
+  }
+  async function run(prompt, body) {
+    abortController?.abort();
+    abortController = new AbortController();
+    text.value = "";
+    events.value = [];
+    error.value = null;
+    output.value = null;
+    status.value = "streaming";
+    try {
+      const res = await fetch(endpoint, {
+        ...requestInit,
+        method: "POST",
+        signal: abortController.signal,
+        headers: { "Content-Type": "application/json", ...requestInit?.headers },
+        body: JSON.stringify({ prompt, ...body })
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+      if (!res.body) throw new Error("No response body");
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          const raw = line.slice(6).trim();
+          if (!raw) continue;
+          try {
+            const event = JSON.parse(raw);
+            events.value = [...events.value, event];
+            if (event._tag === "TextDelta" && "text" in event) {
+              text.value += event.text;
+            } else if (event._tag === "StreamCompleted" && "output" in event) {
+              output.value = event.output;
+              status.value = "completed";
+              return;
+            } else if (event._tag === "StreamError" && "cause" in event) {
+              throw new Error(event.cause);
+            } else if (event._tag === "StreamCancelled") {
+              status.value = "idle";
+              return;
+            }
+          } catch {
+          }
+        }
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") return;
+      error.value = err instanceof Error ? err.message : String(err);
+      status.value = "error";
+    }
+  }
+  return {
+    text: readonly(text),
+    events: readonly(events),
+    status: readonly(status),
+    error: readonly(error),
+    output: readonly(output),
+    run,
+    cancel
+  };
+}
+
+// src/use-agent.ts
+import { ref as ref2, readonly as readonly2 } from "vue";
+function useAgent(endpoint, requestInit) {
+  const output = ref2(null);
+  const loading = ref2(false);
+  const error = ref2(null);
+  async function run(prompt, body) {
+    loading.value = true;
+    error.value = null;
+    output.value = null;
+    try {
+      const res = await fetch(endpoint, {
+        ...requestInit,
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...requestInit?.headers },
+        body: JSON.stringify({ prompt, ...body })
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+      const data = await res.json();
+      const result = data.output ?? data.result ?? "";
+      output.value = result;
+      return result;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      error.value = msg;
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  }
+  return { output: readonly2(output), loading: readonly2(loading), error: readonly2(error), run };
+}
+export {
+  useAgent,
+  useAgentStream
+};

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@reactive-agents/vue",
-  "version": "0.9.0",
+  "version": "0.10.4",
   "description": "Vue composables for Reactive Agents — useAgentStream, useAgent",
   "type": "module",
   "exports": {
     ".": {
+      "bun": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"