@frontal-labs/react 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,191 @@
-# Temporary Holding Version
+# @frontal-labs/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React hooks for the Frontal SDK. Thin, transport-agnostic, no framework
+lock-in: `useChat` talks to any route that returns
+`toUIMessageStreamResponse(...)`; the other hooks take objects from
+`new Frontal(...)`.
+
+## Installation
+
+```bash
+bun add @frontal-labs/sdk @frontal-labs/react
+```
+
+Peer dependency: `react >= 18`.
+
+## Chat in two files (Next.js App Router)
+
+**`app/api/chat/route.ts`** — the server side. `toUIMessageStreamResponse`
+turns `ai.streamText` into a streaming `Response`; model errors arrive as
+frames the UI can render and retry, not as broken connections.
+
+```ts
+import { Frontal, toUIMessageStreamResponse } from "@frontal-labs/sdk";
+
+const f = new Frontal({ apiKey: process.env.FRONTAL_API_KEY! });
+
+export async function POST(req: Request) {
+  const { messages } = (await req.json()) as {
+    messages: Array<{ role: string; content: string }>;
+  };
+  // Never trust roles from the browser: keep the system prompt server-side.
+  const history = messages
+    .filter((m) => m.role === "user" || m.role === "assistant")
+    .map((m) => ({ role: m.role as "user" | "assistant", content: m.content }));
+
+  return toUIMessageStreamResponse(
+    f.ai.streamText({
+      model: "claude-sonnet-5",
+      prompt: [{ role: "system", content: "You are a helpful assistant." }, ...history],
+      streamRetries: 1,
+    })
+  );
+}
+```
+
+**`app/page.tsx`** — the client side.
+
+```tsx
+"use client";
+import { useChat } from "@frontal-labs/react";
+import { useState } from "react";
+
+export default function Chat() {
+  const { messages, send, status, error, retry, stop } = useChat({ api: "/api/chat" });
+  const [input, setInput] = useState("");
+
+  return (
+    <main>
+      {messages.map((m) => (
+        <div key={m.id}>
+          <b>{m.role}:</b>{" "}
+          {m.parts.map((p, i) =>
+            p.type === "text" ? (
+              <span key={i}>{p.text}</span>
+            ) : p.type === "tool-call" ? (
+              <code key={i}>{p.toolName}({JSON.stringify(p.input)})</code>
+            ) : (
+              <em key={i}>{p.error.message}{p.error.retryable ? " (retryable)" : ""}</em>
+            )
+          )}
+        </div>
+      ))}
+      {error?.retryable && <button onClick={() => retry()}>Retry</button>}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          void send(input);
+          setInput("");
+        }}
+      >
+        <input value={input} onChange={(e) => setInput(e.target.value)} />
+        <button disabled={status === "streaming"}>Send</button>
+        {status === "streaming" && <button type="button" onClick={stop}>Stop</button>}
+      </form>
+    </main>
+  );
+}
+```
+
+That is the whole chatbot. A copy-paste version lives in
+[`templates/chatbot`](../../templates/chatbot).
+
+## Hooks
+
+### `useChat(options)`
+
+| Option | Purpose |
+| --- | --- |
+| `api` | Route URL (default `/api/chat`) **or** a `(messages, { signal }) => Promise<Response>` transport |
+| `id`, `body`, `headers` | Sent with every request |
+| `fetch` | Custom fetch (tests, auth) |
+| `onError(err)` | Every error frame (`err.code`, `err.retryable`, `err.fix`) |
+| `onFinish(message)` | When the assistant message completes |
+
+Returns `{ messages, status, error, send, stop, retry, setMessages }`.
+`messages[i].parts` is a discriminated union of `text`, `tool-call`
+(`state: "pending" | "done" | "error"`) and `error`.
+
+### `useAgentRun(agent, options)`
+
+Agents are event-driven, not chat: `trigger(event, payload)` starts a run and
+streams it. With a `stateSchema` on the accessor, `state` is typed.
+
+```tsx
+import { Frontal } from "@frontal-labs/sdk";
+import { useAgentRun } from "@frontal-labs/react";
+import { z } from "zod";
+
+const f = new Frontal({ apiKey: process.env.NEXT_PUBLIC_FRONTAL_API_KEY! });
+const triage = f.agents.use("agt_ticket_triager", {
+  stateSchema: z.object({ tier: z.string(), score: z.number() }),
+});
+
+export function TriagePanel() {
+  const { trigger, events, state, status, error } = useAgentRun(triage);
+  return (
+    <div>
+      <button onClick={() => trigger("support.ticket.created", { ticketId: "t_987" })}>
+        Run
+      </button>
+      <p>{status}{state ? ` — tier ${state.tier} (${state.score})` : ""}</p>
+      {error && <p>{error.code}: {error.fix ?? error.message}</p>}
+      <ul>{events.map((e, i) => <li key={i}>{e.type === "event" ? e.event : e.type}</li>)}</ul>
+    </div>
+  );
+}
+```
+
+### `useWorkflowApprovals(workflows, options)`
+
+The human side of an agent's `approveWhen` contract.
+
+```tsx
+import { Frontal } from "@frontal-labs/sdk";
+import { useWorkflowApprovals } from "@frontal-labs/react";
+
+const f = new Frontal({ apiKey: process.env.NEXT_PUBLIC_FRONTAL_API_KEY! });
+
+export function Inbox() {
+  const { approvals, approve, reject, loading } = useWorkflowApprovals(f.workflows, {
+    pollIntervalMs: 5_000,
+  });
+  if (loading && approvals.length === 0) return <p>Loading…</p>;
+  return (
+    <ul>
+      {approvals.map((a) => (
+        <li key={a.id}>
+          {a.stepId}
+          <button onClick={() => approve(a.id, "LGTM")}>Approve</button>
+          <button onClick={() => reject(a.id)}>Reject</button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## Testing
+
+Everything runs against mocks — no gateway, no key:
+
+```ts
+import { AISdk, toUIMessageStreamResponse } from "@frontal-labs/ai";
+import { createTestClient, mockLanguageModel } from "@frontal-labs/testing";
+
+const model = mockLanguageModel({ doGenerate: () => ({ text: "Hello!" }) });
+const ai = new AISdk(createTestClient(model.routes).client.httpClient);
+
+// A fake /api/chat for useChat({ fetch })
+const fetchImpl: typeof fetch = async () =>
+  toUIMessageStreamResponse(ai.streamText({ model: "m", prompt: "hi" }));
+```
+
+See `tests/` in this package for `renderHook` examples.
+
+## Environment Variables
+
+| Variable | Required | Description |
+| --- | --- | --- |
+| `FRONTAL_API_KEY` | Server routes | API key (`frt_...`); never ship it to the browser |
+| `NEXT_PUBLIC_FRONTAL_API_KEY` | Client hooks | A browser-scoped key, if your deployment issues them |

package/dist/index.cjs

@@ -0,0 +1,257 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useAgentRun: () => useAgentRun,
+  useChat: () => useChat,
+  useWorkflowApprovals: () => useWorkflowApprovals
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-agent-run.ts
+var import_react = require("react");
+function useAgentRun(agent, options = {}) {
+  const [run, setRun] = (0, import_react.useState)(void 0);
+  const [events, setEvents] = (0, import_react.useState)([]);
+  const [state, setState] = (0, import_react.useState)(void 0);
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [error, setError] = (0, import_react.useState)(void 0);
+  const abortRef = (0, import_react.useRef)(void 0);
+  const watch = (0, import_react.useCallback)(
+    async (runId) => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setEvents([]);
+      setError(void 0);
+      setStatus("streaming");
+      let failed = false;
+      for await (const part of agent.watch(runId, {
+        signal: controller.signal
+      })) {
+        setEvents((prev) => [...prev, part]);
+        if (part.type === "abort") continue;
+        if (part.type === "state") setState(part.state);
+        if (part.type === "error") {
+          failed = true;
+          setError(part.error);
+          options.onError?.(part.error);
+        }
+      }
+      if (abortRef.current === controller) {
+        abortRef.current = void 0;
+        setStatus(failed ? "error" : "completed");
+      }
+    },
+    [agent, options.onError]
+  );
+  const trigger = (0, import_react.useCallback)(
+    async (event, payload = {}) => {
+      setStatus("starting");
+      setError(void 0);
+      try {
+        const started = await agent.message(event, payload);
+        setRun(started);
+        await watch(started.id);
+        return started;
+      } catch (err) {
+        const e = err;
+        setError(e);
+        options.onError?.(e);
+        setStatus("error");
+        return void 0;
+      }
+    },
+    [agent, options.onError, watch]
+  );
+  const stop = (0, import_react.useCallback)(() => {
+    abortRef.current?.abort();
+    abortRef.current = void 0;
+    setStatus("idle");
+  }, []);
+  return { run, events, state, status, error, trigger, watch, stop };
+}
+
+// src/use-chat.ts
+var import_ai = require("@frontal-labs/ai");
+var import_react2 = require("react");
+function toWireMessages(messages) {
+  return messages.map((m) => ({ role: m.role, content: m.text }));
+}
+function useChat(options = {}) {
+  const {
+    api = "/api/chat",
+    id,
+    initialMessages = [],
+    body,
+    headers,
+    fetch: fetchImpl,
+    onError,
+    onFinish
+  } = options;
+  const [messages, setMessages] = (0, import_react2.useState)(initialMessages);
+  const [status, setStatus] = (0, import_react2.useState)("idle");
+  const [error, setError] = (0, import_react2.useState)(void 0);
+  const abortRef = (0, import_react2.useRef)(void 0);
+  const messagesRef = (0, import_react2.useRef)(messages);
+  messagesRef.current = messages;
+  const extrasRef = (0, import_react2.useRef)({ body, headers });
+  extrasRef.current = { body, headers };
+  const transport = (0, import_react2.useMemo)(() => {
+    if (typeof api === "function") return api;
+    return async (msgs, init) => (fetchImpl ?? fetch)(api, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        ...extrasRef.current.headers
+      },
+      body: JSON.stringify({
+        id,
+        messages: toWireMessages(msgs),
+        ...extrasRef.current.body
+      }),
+      signal: init.signal
+    });
+  }, [api, fetchImpl, id]);
+  const run = (0, import_react2.useCallback)(
+    async (history) => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setError(void 0);
+      setStatus("submitted");
+      let assistant = (0, import_ai.createUIMessage)("assistant");
+      setMessages([...history, assistant]);
+      try {
+        const response = await transport(history, {
+          signal: controller.signal
+        });
+        setStatus("streaming");
+        for await (const frame of (0, import_ai.parseUIMessageStream)(response, {
+          signal: controller.signal
+        })) {
+          if (frame.type === "error") {
+            setError(frame.error);
+            onError?.(frame.error);
+          }
+          assistant = (0, import_ai.applyUIFrame)(assistant, frame);
+          const snapshot = assistant;
+          setMessages([...history, snapshot]);
+        }
+      } catch (err) {
+        const e = {
+          code: "TRANSPORT_ERROR",
+          message: err instanceof Error ? err.message : String(err),
+          retryable: true
+        };
+        setError(e);
+        onError?.(e);
+        assistant = (0, import_ai.applyUIFrame)(assistant, { type: "error", error: e });
+        setMessages([...history, assistant]);
+      } finally {
+        if (abortRef.current === controller) abortRef.current = void 0;
+      }
+      setStatus(
+        assistant.parts.some((p) => p.type === "error") ? "error" : "idle"
+      );
+      onFinish?.(assistant);
+    },
+    [onError, onFinish, transport]
+  );
+  const send = (0, import_react2.useCallback)(
+    async (text) => {
+      const history = [...messagesRef.current, (0, import_ai.createUIMessage)("user", text)];
+      await run(history);
+    },
+    [run]
+  );
+  const retry = (0, import_react2.useCallback)(async () => {
+    const current = messagesRef.current;
+    const lastUser = [...current].reverse().findIndex((m) => m.role === "user");
+    if (lastUser === -1) return;
+    const cut = current.length - lastUser;
+    await run(current.slice(0, cut));
+  }, [run]);
+  const stop = (0, import_react2.useCallback)(() => {
+    abortRef.current?.abort();
+    abortRef.current = void 0;
+  }, []);
+  return { messages, status, error, send, stop, retry, setMessages };
+}
+
+// src/use-workflow-run.ts
+var import_react3 = require("react");
+function useWorkflowApprovals(workflows, options = {}) {
+  const { status = "pending", pollIntervalMs = 0, enabled = true } = options;
+  const [approvals, setApprovals] = (0, import_react3.useState)([]);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(void 0);
+  const refresh = (0, import_react3.useCallback)(async () => {
+    setLoading(true);
+    try {
+      const page = await workflows.approvals.list({ status });
+      setApprovals(page.data);
+      setError(void 0);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [status, workflows]);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) return;
+    void refresh();
+    if (!pollIntervalMs) return;
+    const timer = setInterval(() => void refresh(), pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [enabled, pollIntervalMs, refresh]);
+  const act = (0, import_react3.useCallback)(
+    async (fn, id) => {
+      try {
+        const updated = await fn();
+        setApprovals(
+          (prev) => prev.map((a) => a.id === id ? updated : a).filter((a) => a.status === status)
+        );
+        return updated;
+      } catch (err) {
+        setError(err);
+        return void 0;
+      }
+    },
+    [status]
+  );
+  const approve = (0, import_react3.useCallback)(
+    (id, comment) => act(() => workflows.approvals.approve(id, comment), id),
+    [act, workflows]
+  );
+  const reject = (0, import_react3.useCallback)(
+    (id, comment) => act(() => workflows.approvals.reject(id, comment), id),
+    [act, workflows]
+  );
+  return { approvals, loading, error, refresh, approve, reject };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAgentRun,
+  useChat,
+  useWorkflowApprovals
+});

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @frontal-labs/react
+ *
+ * React hooks for the Frontal SDK. Transport-agnostic: `useChat` talks to
+ * any route that returns `toUIMessageStreamResponse(...)`; the other hooks
+ * take SDK objects from `new Frontal(...)`.
+ */
+export type { UIError, UIMessage, UIMessagePart } from "@frontal-labs/ai";
+export type { AgentRunStatus, UseAgentRunOptions, UseAgentRunResult, } from "./use-agent-run";
+export { useAgentRun } from "./use-agent-run";
+export type { ChatStatus, ChatTransport, UseChatOptions, UseChatResult, } from "./use-chat";
+export { useChat } from "./use-chat";
+export type { UseWorkflowApprovalsOptions, UseWorkflowApprovalsResult, } from "./use-workflow-run";
+export { useWorkflowApprovals } from "./use-workflow-run";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EACV,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,233 @@
+"use client";
+
+// src/use-agent-run.ts
+import { useCallback, useRef, useState } from "react";
+function useAgentRun(agent, options = {}) {
+  const [run, setRun] = useState(void 0);
+  const [events, setEvents] = useState([]);
+  const [state, setState] = useState(void 0);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(void 0);
+  const abortRef = useRef(void 0);
+  const watch = useCallback(
+    async (runId) => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setEvents([]);
+      setError(void 0);
+      setStatus("streaming");
+      let failed = false;
+      for await (const part of agent.watch(runId, {
+        signal: controller.signal
+      })) {
+        setEvents((prev) => [...prev, part]);
+        if (part.type === "abort") continue;
+        if (part.type === "state") setState(part.state);
+        if (part.type === "error") {
+          failed = true;
+          setError(part.error);
+          options.onError?.(part.error);
+        }
+      }
+      if (abortRef.current === controller) {
+        abortRef.current = void 0;
+        setStatus(failed ? "error" : "completed");
+      }
+    },
+    [agent, options.onError]
+  );
+  const trigger = useCallback(
+    async (event, payload = {}) => {
+      setStatus("starting");
+      setError(void 0);
+      try {
+        const started = await agent.message(event, payload);
+        setRun(started);
+        await watch(started.id);
+        return started;
+      } catch (err) {
+        const e = err;
+        setError(e);
+        options.onError?.(e);
+        setStatus("error");
+        return void 0;
+      }
+    },
+    [agent, options.onError, watch]
+  );
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = void 0;
+    setStatus("idle");
+  }, []);
+  return { run, events, state, status, error, trigger, watch, stop };
+}
+
+// src/use-chat.ts
+import {
+  applyUIFrame,
+  createUIMessage,
+  parseUIMessageStream
+} from "@frontal-labs/ai";
+import { useCallback as useCallback2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+function toWireMessages(messages) {
+  return messages.map((m) => ({ role: m.role, content: m.text }));
+}
+function useChat(options = {}) {
+  const {
+    api = "/api/chat",
+    id,
+    initialMessages = [],
+    body,
+    headers,
+    fetch: fetchImpl,
+    onError,
+    onFinish
+  } = options;
+  const [messages, setMessages] = useState2(initialMessages);
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2(void 0);
+  const abortRef = useRef2(void 0);
+  const messagesRef = useRef2(messages);
+  messagesRef.current = messages;
+  const extrasRef = useRef2({ body, headers });
+  extrasRef.current = { body, headers };
+  const transport = useMemo(() => {
+    if (typeof api === "function") return api;
+    return async (msgs, init) => (fetchImpl ?? fetch)(api, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        ...extrasRef.current.headers
+      },
+      body: JSON.stringify({
+        id,
+        messages: toWireMessages(msgs),
+        ...extrasRef.current.body
+      }),
+      signal: init.signal
+    });
+  }, [api, fetchImpl, id]);
+  const run = useCallback2(
+    async (history) => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      setError(void 0);
+      setStatus("submitted");
+      let assistant = createUIMessage("assistant");
+      setMessages([...history, assistant]);
+      try {
+        const response = await transport(history, {
+          signal: controller.signal
+        });
+        setStatus("streaming");
+        for await (const frame of parseUIMessageStream(response, {
+          signal: controller.signal
+        })) {
+          if (frame.type === "error") {
+            setError(frame.error);
+            onError?.(frame.error);
+          }
+          assistant = applyUIFrame(assistant, frame);
+          const snapshot = assistant;
+          setMessages([...history, snapshot]);
+        }
+      } catch (err) {
+        const e = {
+          code: "TRANSPORT_ERROR",
+          message: err instanceof Error ? err.message : String(err),
+          retryable: true
+        };
+        setError(e);
+        onError?.(e);
+        assistant = applyUIFrame(assistant, { type: "error", error: e });
+        setMessages([...history, assistant]);
+      } finally {
+        if (abortRef.current === controller) abortRef.current = void 0;
+      }
+      setStatus(
+        assistant.parts.some((p) => p.type === "error") ? "error" : "idle"
+      );
+      onFinish?.(assistant);
+    },
+    [onError, onFinish, transport]
+  );
+  const send = useCallback2(
+    async (text) => {
+      const history = [...messagesRef.current, createUIMessage("user", text)];
+      await run(history);
+    },
+    [run]
+  );
+  const retry = useCallback2(async () => {
+    const current = messagesRef.current;
+    const lastUser = [...current].reverse().findIndex((m) => m.role === "user");
+    if (lastUser === -1) return;
+    const cut = current.length - lastUser;
+    await run(current.slice(0, cut));
+  }, [run]);
+  const stop = useCallback2(() => {
+    abortRef.current?.abort();
+    abortRef.current = void 0;
+  }, []);
+  return { messages, status, error, send, stop, retry, setMessages };
+}
+
+// src/use-workflow-run.ts
+import { useCallback as useCallback3, useEffect, useState as useState3 } from "react";
+function useWorkflowApprovals(workflows, options = {}) {
+  const { status = "pending", pollIntervalMs = 0, enabled = true } = options;
+  const [approvals, setApprovals] = useState3([]);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(void 0);
+  const refresh = useCallback3(async () => {
+    setLoading(true);
+    try {
+      const page = await workflows.approvals.list({ status });
+      setApprovals(page.data);
+      setError(void 0);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [status, workflows]);
+  useEffect(() => {
+    if (!enabled) return;
+    void refresh();
+    if (!pollIntervalMs) return;
+    const timer = setInterval(() => void refresh(), pollIntervalMs);
+    return () => clearInterval(timer);
+  }, [enabled, pollIntervalMs, refresh]);
+  const act = useCallback3(
+    async (fn, id) => {
+      try {
+        const updated = await fn();
+        setApprovals(
+          (prev) => prev.map((a) => a.id === id ? updated : a).filter((a) => a.status === status)
+        );
+        return updated;
+      } catch (err) {
+        setError(err);
+        return void 0;
+      }
+    },
+    [status]
+  );
+  const approve = useCallback3(
+    (id, comment) => act(() => workflows.approvals.approve(id, comment), id),
+    [act, workflows]
+  );
+  const reject = useCallback3(
+    (id, comment) => act(() => workflows.approvals.reject(id, comment), id),
+    [act, workflows]
+  );
+  return { approvals, loading, error, refresh, approve, reject };
+}
+export {
+  useAgentRun,
+  useChat,
+  useWorkflowApprovals
+};