@agent-factory-platform/agent-react 0.2.0

package/dist/agent-react.css

@@ -0,0 +1 @@
+.af-agent-chat,.af-agent-studio{color:var(--color-ink);font-family:var(--font-product, system-ui, sans-serif)}.af-agent-chat{display:grid;grid-template-columns:minmax(12rem,15rem) minmax(0,1fr);min-height:36rem;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--color-surface-card)}.af-agent-chat>.af-agent-conversation:only-child{grid-column:1 / -1}.af-agent-threads{display:flex;min-width:0;flex-direction:column;border-right:1px solid var(--color-divider);background:var(--color-surface-fog)}.af-agent-threads__header,.af-agent-conversation__header{display:flex;min-height:3.5rem;align-items:center;justify-content:space-between;gap:.75rem;padding:.625rem .75rem;border-bottom:1px solid var(--color-divider)}.af-agent-threads__list{min-height:0;overflow-y:auto;padding:.375rem}.af-agent-thread-row{display:flex;align-items:center;border-radius:var(--radius-control)}.af-agent-thread-row:hover,.af-agent-thread-row[data-active]{background:var(--color-surface-hover)}.af-agent-thread-row__select{display:flex;min-height:2.75rem;min-width:0;flex:1;align-items:center;justify-content:space-between;gap:.5rem;padding:0 .625rem;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.af-agent-thread-row__select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.af-agent-icon-button{display:grid;width:2.75rem;height:2.75rem;place-items:center;border:0;background:transparent;color:var(--color-graphite);cursor:pointer}.af-agent-thread-row:not(:hover):not(:focus-within) .af-agent-icon-button{opacity:0}.af-agent-conversation{display:grid;min-width:0;min-height:36rem;grid-template-rows:auto minmax(0,1fr) auto;background:var(--color-surface-canvas)}.af-agent-conversation__header{flex-wrap:wrap;background:var(--color-surface-card)}.af-agent-title{display:flex;min-width:0;align-items:center;gap:.625rem}.af-agent-title>div{display:grid;min-width:0}.af-agent-title strong{font-size:.875rem}.af-agent-title span{overflow:hidden;color:var(--color-graphite);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.af-agent-resources{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.375rem}.af-agent-resources button{min-height:2rem}.af-agent-option-meta{max-width:10rem;overflow:hidden;color:var(--color-graphite);font-size:.6875rem;text-overflow:ellipsis;white-space:nowrap}.af-agent-messages{min-height:0;overflow-y:auto;padding:1.25rem clamp(.75rem,3vw,2.5rem)}.af-agent-message{display:grid;max-width:52rem;grid-template-columns:1.875rem minmax(0,1fr);gap:.625rem;margin:0 auto 1.25rem}.af-agent-message__body>strong{display:block;margin-bottom:.25rem;font-size:.75rem}.af-agent-message__content{font-size:.875rem;line-height:1.65;white-space:pre-wrap}.af-agent-message[data-role=user] .af-agent-message__content{display:inline-block;padding:.625rem .75rem;border-radius:var(--radius-selection);background:var(--color-surface-warm)}.af-agent-thinking{color:var(--color-graphite)}.af-agent-thinking:after{content:"";display:inline-block;width:1.1rem;height:.25rem;margin-left:.25rem;background:radial-gradient(circle,var(--color-graphite) 1.5px,transparent 2px) 0 50% / .35rem .25rem repeat-x;animation:af-agent-pulse 1s ease-in-out infinite}.af-agent-surface{margin-top:.75rem}.af-agent-trace{max-width:52rem;margin:0 auto 1rem;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-card);font-size:.75rem}.af-agent-trace summary{display:flex;min-height:2.75rem;align-items:center;gap:.5rem;padding:0 .75rem;cursor:pointer}.af-agent-trace ol{margin:0;padding:0 .75rem .625rem 2rem;color:var(--color-graphite)}.af-agent-trace li{padding:.25rem 0}.af-agent-trace li span{display:flex;align-items:center;gap:.375rem}.af-agent-trace li span:last-child{margin-left:1.125rem;font-size:.6875rem}.af-agent-composer{display:grid;width:calc(100% - 1.5rem);max-width:52rem;grid-template-columns:minmax(0,1fr) 2.75rem;align-items:end;gap:.5rem;margin:0 auto .75rem;padding:.625rem;border:1px solid var(--color-border);border-radius:var(--radius-overlay);background:var(--color-surface-card);box-shadow:var(--shadow-pop)}.af-agent-composer textarea{min-height:2.75rem;max-height:10rem;resize:none}.af-agent-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.75rem}.af-agent-action [class*=CardLabel],.af-agent-action p{margin-top:.375rem;color:var(--color-graphite);font-size:.75rem}.af-agent-action__buttons{display:flex;grid-column:1 / -1;gap:.5rem}.af-agent-persona{display:grid;gap:1rem}.af-agent-persona__intro{display:flex;align-items:center;gap:.75rem}.af-agent-persona label{display:grid;gap:.375rem;color:var(--color-graphite);font-size:.75rem}.af-agent-studio{display:grid;grid-template-columns:minmax(18rem,24rem) minmax(0,1fr);overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--color-surface-card)}.af-agent-studio>section{min-width:0;padding:1rem}.af-agent-studio>section+section{border-left:1px solid var(--color-divider);background:var(--color-surface-canvas)}@keyframes af-agent-pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.af-agent-thinking:after{animation:none}}@media(max-width:720px){.af-agent-chat{grid-template-columns:minmax(0,1fr);min-height:42rem}.af-agent-threads{max-height:8rem;border-right:0;border-bottom:1px solid var(--color-divider)}.af-agent-threads__list{display:flex;gap:.25rem}.af-agent-thread-row{min-width:10rem}.af-agent-thread-row:not(:hover):not(:focus-within) .af-agent-icon-button{opacity:1}.af-agent-conversation{min-height:34rem}.af-agent-conversation__header{align-items:flex-start}.af-agent-resources{flex-basis:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.125rem}.af-agent-studio{grid-template-columns:1fr}.af-agent-studio>section+section{border-top:1px solid var(--color-divider);border-left:0}}

package/dist/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { AgentDataSlots, AgentSessionModel } from "@agent-factory-platform/client";
+export declare function useAgentSession<Slots extends AgentDataSlots = AgentDataSlots>(model: AgentSessionModel<Slots>): import("@agent-factory-platform/client").AgentSessionState<Slots>;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import "./styles.css";
+export { useAgentSession } from "./hooks";
+export { AgentSlotRegistry, dataFallback, type AgentDataDecoder, type AgentSlot, type AgentSlotProps, type AgentSlotValues, type DecodedAgentDataProjection } from "./registry";
+export { AgentActionCard, AgentChat, AgentComposer, AgentConversation, AgentExecutionTrace, AgentProfileEditor, AgentResourceBar, AgentSessionList, AgentStudio, DEFAULT_AGENT_UI_LABELS, type AgentUiLabels } from "./ui";
+export { AgentSessionModel, type AgentProjectionItem, type AgentSessionProjection, type AgentSessionState, type AgentSessionTransport } from "@agent-factory-platform/client";

package/dist/index.js

@@ -0,0 +1,297 @@
+var ne = Object.defineProperty;
+var W = (e) => {
+  throw TypeError(e);
+};
+var te = (e, a, s) => a in e ? ne(e, a, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[a] = s;
+var U = (e, a, s) => te(e, typeof a != "symbol" ? a + "" : a, s), $ = (e, a, s) => a.has(e) || W("Cannot " + s);
+var u = (e, a, s) => ($(e, a, "read from private field"), s ? s.call(e) : a.get(e)), S = (e, a, s) => a.has(e) ? W("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, s), J = (e, a, s, o) => ($(e, a, "write to private field"), o ? o.call(e, s) : a.set(e, s), s), C = (e, a, s) => ($(e, a, "access private method"), s);
+import { useSyncExternalStore as X, useState as q, useMemo as se } from "react";
+import { jsx as t, jsxs as i, Fragment as K } from "react/jsx-runtime";
+import { Card as re, CardLabel as Z, CardTitle as y, Tag as k, Button as w, AvatarBadge as Y, Textarea as F, StateView as L, Input as P } from "@agent-factory-platform/ui-kit";
+import { Wrench as oe, CircleStop as ie, Send as le, Bot as ee, Sparkles as ce, Check as de, MessageSquarePlus as ue, ChevronRight as he, Trash2 as pe } from "lucide-react";
+import { AgentSessionModel as je } from "@agent-factory-platform/client";
+function fe(e) {
+  return X(e.subscribe, e.getSnapshot, e.getSnapshot);
+}
+var f, g, A, R, v, z;
+class qe {
+  constructor() {
+    S(this, v);
+    S(this, f, /* @__PURE__ */ new Map());
+    S(this, g, /* @__PURE__ */ new Map());
+    S(this, A, /* @__PURE__ */ new Set());
+    S(this, R, 0);
+    U(this, "getSnapshot", () => u(this, R));
+    U(this, "subscribe", (a) => (u(this, A).add(a), () => u(this, A).delete(a)));
+  }
+  register(a, s) {
+    const o = s;
+    return u(this, f).set(a, o), C(this, v, z).call(this), () => {
+      if (u(this, f).get(a) !== o) return !1;
+      const n = u(this, f).delete(a);
+      return n && C(this, v, z).call(this), n;
+    };
+  }
+  registerData(a, s, o) {
+    const n = { decode: s, renderer: o };
+    return u(this, g).set(a, n), C(this, v, z).call(this), () => {
+      if (u(this, g).get(a) !== n) return !1;
+      const c = u(this, g).delete(a);
+      return c && C(this, v, z).call(this), c;
+    };
+  }
+  render(a, s) {
+    if (a === "data") {
+      const n = s, c = u(this, g).get(n.name);
+      if (!c) return B(n.name, "unknown");
+      try {
+        const r = { ...n, value: c.decode(n.value) }, l = c.renderer;
+        return /* @__PURE__ */ t(l, { value: r });
+      } catch {
+        return B(n.name, "malformed");
+      }
+    }
+    const o = u(this, f).get(a);
+    return o ? /* @__PURE__ */ t(o, { value: s }) : null;
+  }
+}
+f = new WeakMap(), g = new WeakMap(), A = new WeakMap(), R = new WeakMap(), v = new WeakSet(), z = function() {
+  J(this, R, u(this, R) + 1), u(this, A).forEach((a) => a());
+};
+function B(e, a) {
+  return /* @__PURE__ */ i("span", { "data-agent-data-fallback": a, children: [
+    a === "malformed" ? "Invalid" : "Unsupported",
+    " data slot: ",
+    e || "(unnamed)"
+  ] });
+}
+const G = {
+  assistant: "Assistant",
+  newSession: "New conversation",
+  sessions: "Conversations",
+  emptyTitle: "How can I help?",
+  emptyDescription: "Ask a question in this profile-pinned session.",
+  composer: "Message the assistant",
+  send: "Send",
+  stop: "Stop",
+  retry: "Retry",
+  execution: "Execution",
+  explicitSkill: "Invoke skill"
+}, D = (e) => ({ ...G, ...e }), ge = () => () => {
+}, O = () => 0;
+function I(e) {
+  X((e == null ? void 0 : e.subscribe) ?? ge, (e == null ? void 0 : e.getSnapshot) ?? O, (e == null ? void 0 : e.getSnapshot) ?? O);
+}
+function ve({ sessions: e, activeSessionId: a, onSelect: s, onNew: o, onDelete: n, labels: c }) {
+  const r = D(c);
+  return /* @__PURE__ */ i("aside", { className: "af-agent-threads", "aria-label": r.sessions, children: [
+    /* @__PURE__ */ i("div", { className: "af-agent-threads__header", children: [
+      /* @__PURE__ */ t("strong", { children: r.sessions }),
+      /* @__PURE__ */ t(w, { size: "icon", variant: "ghost", onClick: o, "aria-label": r.newSession, children: /* @__PURE__ */ t(ue, { size: 17, "aria-hidden": !0 }) })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "af-agent-threads__list", children: e.map((l) => /* @__PURE__ */ i("div", { className: "af-agent-thread-row", "data-active": l.id === a || void 0, children: [
+      /* @__PURE__ */ i("button", { type: "button", className: "af-agent-thread-row__select", onClick: () => s(l.id), children: [
+        /* @__PURE__ */ t("span", { children: l.profileRevisionId }),
+        /* @__PURE__ */ t(he, { size: 14, "aria-hidden": !0 })
+      ] }),
+      n && /* @__PURE__ */ t("button", { type: "button", className: "af-agent-icon-button", onClick: () => n(l.id), "aria-label": `Delete ${l.id}`, children: /* @__PURE__ */ t(pe, { size: 14, "aria-hidden": !0 }) })
+    ] }, l.id)) })
+  ] });
+}
+function be({ profileRevisionId: e, explicitSkillSlug: a, onExplicitSkillChange: s, labels: o, registry: n }) {
+  I(n);
+  const c = n == null ? void 0 : n.render("resource-bar", { profileRevisionId: e, explicitSkillSlug: a, setExplicitSkillSlug: s });
+  if (c) return c;
+  const r = D(o);
+  return /* @__PURE__ */ i("div", { className: "af-agent-resources", "aria-label": "Agent resources", children: [
+    /* @__PURE__ */ t(k, { tone: "cool", children: e }),
+    /* @__PURE__ */ t(P, { "aria-label": r.explicitSkill, placeholder: r.explicitSkill, value: a, onChange: (l) => s(l.target.value) })
+  ] });
+}
+function me({ items: e, label: a = G.execution, registry: s }) {
+  I(s);
+  const o = e.filter((n) => n.kind === "step_started" || n.kind === "step_finished" || n.kind === "retry_scheduled");
+  return o.length ? /* @__PURE__ */ i("details", { className: "af-agent-trace", children: [
+    /* @__PURE__ */ i("summary", { children: [
+      /* @__PURE__ */ t(ce, { size: 14, "aria-hidden": !0 }),
+      a,
+      /* @__PURE__ */ t(k, { size: "micro", tone: "cool", children: o.length })
+    ] }),
+    /* @__PURE__ */ t("ol", { children: o.map((n) => /* @__PURE__ */ t("li", { children: (s == null ? void 0 : s.render("trace-item", n)) ?? /* @__PURE__ */ i(K, { children: [
+      /* @__PURE__ */ i("span", { children: [
+        /* @__PURE__ */ t(de, { size: 13, "aria-hidden": !0 }),
+        n.kind
+      ] }),
+      /* @__PURE__ */ t("span", { children: n.status })
+    ] }) }, n.anchorSeq.toString())) })
+  ] }) : null;
+}
+function Se({ interaction: e, onResolve: a }) {
+  const [s, o] = q(!1), [n, c] = q(""), r = async (l) => {
+    o(!0), c("");
+    try {
+      await a(l);
+    } catch (d) {
+      c(d instanceof Error ? d.message : String(d));
+    } finally {
+      o(!1);
+    }
+  };
+  return /* @__PURE__ */ i(re, { as: "article", tone: "warm", className: "af-agent-action", children: [
+    /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ i(Z, { children: [
+        /* @__PURE__ */ t(oe, { size: 14, "aria-hidden": !0 }),
+        " Approval required"
+      ] }),
+      /* @__PURE__ */ t(y, { children: e.kind })
+    ] }),
+    /* @__PURE__ */ t(k, { tone: e.status === "pending" ? "warning" : "neutral", children: e.status }),
+    e.status === "pending" && /* @__PURE__ */ i("div", { className: "af-agent-action__buttons", children: [
+      /* @__PURE__ */ t(w, { size: "compact", disabled: s, onClick: () => void r("confirmed"), children: s ? "Resolving…" : "Confirm" }),
+      /* @__PURE__ */ t(w, { size: "compact", variant: "secondary", disabled: s, onClick: () => void r("rejected"), children: "Reject" })
+    ] }),
+    n && /* @__PURE__ */ t("p", { role: "alert", children: n })
+  ] });
+}
+function ke({ value: e, onChange: a, onSubmit: s, running: o, onStop: n, labels: c }) {
+  const r = D(c);
+  return /* @__PURE__ */ i("form", { className: "af-agent-composer", onSubmit: (d) => {
+    d.preventDefault(), e.trim() && !o && s();
+  }, children: [
+    /* @__PURE__ */ t(F, { rows: 2, variant: "bare", value: e, onChange: (d) => a(d.target.value), "aria-label": r.composer, placeholder: r.composer, onKeyDown: (d) => {
+      d.key === "Enter" && !d.shiftKey && (d.preventDefault(), e.trim() && !o && s());
+    } }),
+    o ? /* @__PURE__ */ t(w, { type: "button", size: "icon", variant: "secondary", onClick: n, "aria-label": r.stop, children: /* @__PURE__ */ t(ie, { size: 17, "aria-hidden": !0 }) }) : /* @__PURE__ */ t(w, { type: "submit", size: "icon", disabled: !e.trim(), "aria-label": r.send, children: /* @__PURE__ */ t(le, { size: 17, "aria-hidden": !0 }) })
+  ] });
+}
+function Ae({ items: e, registry: a, onResolveInteraction: s }) {
+  I(a);
+  const o = e.filter((n) => n.slot !== "trace-item" && (n.slot !== "message-content" || n.text.length > 0));
+  return /* @__PURE__ */ t(K, { children: o.map((n) => n.slot === "message-content" ? /* @__PURE__ */ i("article", { className: "af-agent-message", "data-role": n.role, "data-anchor-seq": n.anchorSeq.toString(), "data-last-updated-seq": n.lastUpdatedSeq.toString(), children: [
+    /* @__PURE__ */ t(Y, { initials: n.role === "user" ? "You" : "AF", size: 30 }),
+    /* @__PURE__ */ i("div", { className: "af-agent-message__body", children: [
+      /* @__PURE__ */ t("strong", { children: n.role === "user" ? "You" : "Agent" }),
+      /* @__PURE__ */ t("div", { className: "af-agent-message__content", children: (a == null ? void 0 : a.render("message-content", n)) ?? n.text })
+    ] })
+  ] }, `message-${n.anchorSeq}`) : /* @__PURE__ */ t("div", { className: "af-agent-surface", "data-slot": n.slot, "data-anchor-seq": n.anchorSeq.toString(), "data-last-updated-seq": n.lastUpdatedSeq.toString(), children: n.slot === "tool-card" ? (a == null ? void 0 : a.render("tool-card", n)) ?? /* @__PURE__ */ i(k, { tone: n.error ? "warning" : "cool", children: [
+    n.phase,
+    " · ",
+    n.name || n.callId
+  ] }) : n.slot === "action" ? (a == null ? void 0 : a.render("action", n)) ?? (s ? /* @__PURE__ */ t(Se, { interaction: { id: n.interactionId, kind: Q(n), status: n.phase === "requested" ? "pending" : "resolved" }, onResolve: (c) => s(n.interactionId, c) }) : /* @__PURE__ */ i(k, { tone: "warning", children: [
+    Q(n),
+    " · ",
+    n.phase
+  ] })) : n.slot === "citation" ? (a == null ? void 0 : a.render("citation", n)) ?? /* @__PURE__ */ t(k, { children: n.resourceId }) : a ? a.render("data", n) : B(n.name, "unknown") }, n.slot === "tool-card" ? `tool-${n.callId}` : n.slot === "action" ? `action-${n.interactionId}` : `${n.slot}-${n.anchorSeq}-${n.blockIndex}`)) });
+}
+function Q(e) {
+  const a = e.payload && typeof e.payload == "object" && !Array.isArray(e.payload) ? e.payload.action : void 0;
+  return a && typeof a == "object" && !Array.isArray(a) && typeof a.kind == "string" ? a.kind : e.kind;
+}
+function we({ model: e, explicitSkillSlug: a = "", registry: s, header: o, labels: n, onError: c }) {
+  var H, V;
+  I(s);
+  const r = D(n), l = fe(e), [d, p] = q(""), [T, N] = q(""), _ = l.status === "submitting" || l.status === "queued" || l.status === "running" || l.status === "waiting_for_input", b = l.projection.items.filter((h) => h.slot === "trace-item"), E = l.projection.items.filter((h) => h.slot !== "trace-item" && (h.slot !== "message-content" || h.text.length > 0)), M = (h) => c == null ? void 0 : c(h instanceof Error ? h : new Error(String(h))), j = async (h) => {
+    var x;
+    const m = h.trim();
+    if (m) {
+      p(""), N(m);
+      try {
+        await e.submitText(m, a);
+      } catch (ae) {
+        p(((x = e.getSnapshot().retryDraft) == null ? void 0 : x.text) ?? m), M(ae);
+      }
+    }
+  };
+  return /* @__PURE__ */ i("section", { className: "af-agent-conversation", "aria-label": r.assistant, children: [
+    o && /* @__PURE__ */ t("header", { className: "af-agent-conversation__header", children: o }),
+    /* @__PURE__ */ i("div", { className: "af-agent-messages", "aria-live": "polite", children: [
+      !E.length && l.status === "idle" && /* @__PURE__ */ t(L, { size: "md", title: r.emptyTitle, description: r.emptyDescription, icon: /* @__PURE__ */ t(ee, { size: 24, "aria-hidden": !0 }) }),
+      /* @__PURE__ */ t(Ae, { items: E, registry: s, onResolveInteraction: async (h, m) => {
+        try {
+          await e.resolveInteraction(h, m);
+        } catch (x) {
+          throw M(x), x;
+        }
+      } }),
+      l.status !== "waiting_for_input" && _ && /* @__PURE__ */ t("span", { className: "af-agent-thinking", children: "Thinking…" }),
+      l.status === "disconnected" && /* @__PURE__ */ t(L, { variant: "error", size: "sm", title: ((H = l.error) == null ? void 0 : H.message) ?? "Disconnected", action: { label: r.retry, onClick: () => void e.retry().catch(M) } }),
+      l.status === "failed" && /* @__PURE__ */ t(L, { variant: "error", size: "sm", title: ((V = l.error) == null ? void 0 : V.message) ?? "Run failed", action: { label: r.retry, onClick: () => void j(T) } }),
+      l.status === "max_steps_reached" && /* @__PURE__ */ t(L, { variant: "error", size: "sm", title: "Maximum steps reached", action: { label: r.retry, onClick: () => void j(T) } }),
+      /* @__PURE__ */ t(me, { items: b, registry: s, label: r.execution })
+    ] }),
+    (s == null ? void 0 : s.render("composer", { draft: d, running: _, submit: () => void j(d), stop: () => void e.cancel(), setDraft: p })) ?? /* @__PURE__ */ t(ke, { value: d, onChange: p, onSubmit: () => void j(d), running: _, onStop: () => void e.cancel(), labels: r })
+  ] });
+}
+function Re({ model: e, title: a = G.assistant, subtitle: s, profileRevisionId: o, sessions: n, activeSessionId: c, onSelectSession: r, onNewSession: l, onDeleteSession: d, registry: p, labels: T }) {
+  const [N, _] = q(""), b = D(T), E = se(() => /* @__PURE__ */ i(K, { children: [
+    /* @__PURE__ */ i("div", { className: "af-agent-title", children: [
+      /* @__PURE__ */ t(Y, { initials: "AF", size: 36 }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ t("strong", { children: a }),
+        s && /* @__PURE__ */ t("span", { children: s })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(be, { profileRevisionId: o, explicitSkillSlug: N, onExplicitSkillChange: _, registry: p, labels: b })
+  ] }), [a, s, o, N, p, b]);
+  return /* @__PURE__ */ i("div", { className: "af-agent-chat", "data-testid": "agent-chat", children: [
+    n && r && l && /* @__PURE__ */ t(ve, { sessions: n, activeSessionId: c, onSelect: r, onNew: l, onDelete: d, labels: b }),
+    /* @__PURE__ */ t(we, { model: e, explicitSkillSlug: N, registry: p, header: E, labels: b })
+  ] });
+}
+function De({ revision: e, onChange: a, onSave: s, saving: o = !1, registry: n }) {
+  I(n);
+  const c = n == null ? void 0 : n.render("profile-editor", { revision: e, onChange: a });
+  return c || /* @__PURE__ */ i("form", { className: "af-agent-persona", onSubmit: (r) => {
+    r.preventDefault(), s();
+  }, children: [
+    /* @__PURE__ */ i("div", { className: "af-agent-persona__intro", children: [
+      /* @__PURE__ */ t(Y, { initials: e.name || "AF", src: e.avatar || void 0, size: 48 }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ i(Z, { children: [
+          /* @__PURE__ */ t(ee, { size: 14, "aria-hidden": !0 }),
+          " Agent Profile"
+        ] }),
+        /* @__PURE__ */ t(y, { children: e.name || "Untitled Agent" })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("label", { children: [
+      /* @__PURE__ */ t("span", { children: "Name" }),
+      /* @__PURE__ */ t(P, { required: !0, value: e.name, onChange: (r) => a({ ...e, name: r.target.value }) })
+    ] }),
+    /* @__PURE__ */ i("label", { children: [
+      /* @__PURE__ */ t("span", { children: "Avatar URL" }),
+      /* @__PURE__ */ t(P, { type: "url", value: e.avatar, onChange: (r) => a({ ...e, avatar: r.target.value }) })
+    ] }),
+    /* @__PURE__ */ i("label", { children: [
+      /* @__PURE__ */ t("span", { children: "Persona" }),
+      /* @__PURE__ */ t(F, { required: !0, rows: 5, value: e.persona, onChange: (r) => a({ ...e, persona: r.target.value }) })
+    ] }),
+    /* @__PURE__ */ i("label", { children: [
+      /* @__PURE__ */ t("span", { children: "Purpose" }),
+      /* @__PURE__ */ t(F, { required: !0, rows: 3, value: e.purpose, onChange: (r) => a({ ...e, purpose: r.target.value }) })
+    ] }),
+    /* @__PURE__ */ t(w, { type: "submit", disabled: o, children: o ? "Saving…" : "Save revision" })
+  ] });
+}
+function Ie({ editor: e, preview: a }) {
+  return /* @__PURE__ */ i("div", { className: "af-agent-studio", children: [
+    /* @__PURE__ */ t("section", { "aria-label": "Agent configuration", children: e }),
+    /* @__PURE__ */ t("section", { "aria-label": "Agent preview", children: a })
+  ] });
+}
+export {
+  Se as AgentActionCard,
+  Re as AgentChat,
+  ke as AgentComposer,
+  we as AgentConversation,
+  me as AgentExecutionTrace,
+  De as AgentProfileEditor,
+  be as AgentResourceBar,
+  ve as AgentSessionList,
+  je as AgentSessionModel,
+  qe as AgentSlotRegistry,
+  Ie as AgentStudio,
+  G as DEFAULT_AGENT_UI_LABELS,
+  B as dataFallback,
+  fe as useAgentSession
+};

package/dist/registry.d.ts

@@ -0,0 +1,57 @@
+import type { AgentDataProjection, AgentDataSlots, AgentProjectionItem, agentV1 } from "@agent-factory-platform/client";
+import type { ComponentType, ReactNode } from "react";
+export type AgentDataDecoder<Value> = (value: unknown) => Value;
+export type DecodedAgentDataProjection<DataSlots extends AgentDataSlots, Name extends keyof DataSlots & string> = Omit<Extract<AgentDataProjection<DataSlots>, {
+    name: Name;
+}>, "value"> & {
+    value: DataSlots[Name];
+};
+export interface AgentSlotValues<DataSlots extends AgentDataSlots = AgentDataSlots> {
+    "message-content": Extract<AgentProjectionItem, {
+        slot: "message-content";
+    }>;
+    "tool-card": Extract<AgentProjectionItem, {
+        slot: "tool-card";
+    }>;
+    action: Extract<AgentProjectionItem, {
+        slot: "action";
+    }>;
+    citation: Extract<AgentProjectionItem, {
+        slot: "citation";
+    }>;
+    data: AgentDataProjection<DataSlots>;
+    "trace-item": Extract<AgentProjectionItem, {
+        slot: "trace-item";
+    }>;
+    composer: {
+        draft: string;
+        running: boolean;
+        submit: () => void;
+        stop: () => void;
+        setDraft: (value: string) => void;
+    };
+    "resource-bar": {
+        profileRevisionId: string;
+        explicitSkillSlug: string;
+        setExplicitSkillSlug: (value: string) => void;
+    };
+    "profile-editor": {
+        revision: agentV1.AgentProfileRevision;
+        onChange: (revision: agentV1.AgentProfileRevision) => void;
+    };
+}
+export type AgentSlot = keyof AgentSlotValues;
+export type AgentSlotProps<K extends AgentSlot = AgentSlot, DataSlots extends AgentDataSlots = AgentDataSlots> = {
+    value: AgentSlotValues<DataSlots>[K];
+};
+export declare class AgentSlotRegistry<DataSlots extends AgentDataSlots = AgentDataSlots> {
+    #private;
+    getSnapshot: () => number;
+    subscribe: (listener: () => void) => () => boolean;
+    register<K extends Exclude<AgentSlot, "data">>(slot: K, renderer: ComponentType<AgentSlotProps<K, DataSlots>>): () => boolean;
+    registerData<Name extends keyof DataSlots & string>(name: Name, decode: AgentDataDecoder<DataSlots[Name]>, renderer: ComponentType<{
+        value: DecodedAgentDataProjection<DataSlots, Name>;
+    }>): () => boolean;
+    render<K extends AgentSlot>(slot: K, value: AgentSlotValues<DataSlots>[K]): ReactNode;
+}
+export declare function dataFallback(name: string, reason: "unknown" | "malformed"): ReactNode;

package/dist/ui.d.ts

@@ -0,0 +1,88 @@
+import type { AgentDataSlots, AgentProjectionItem, AgentSessionModel, agentV1 } from "@agent-factory-platform/client";
+import { type ReactNode } from "react";
+import { type AgentSlotRegistry } from "./registry";
+export interface AgentUiLabels {
+    assistant: string;
+    newSession: string;
+    sessions: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    composer: string;
+    send: string;
+    stop: string;
+    retry: string;
+    execution: string;
+    explicitSkill: string;
+}
+export declare const DEFAULT_AGENT_UI_LABELS: AgentUiLabels;
+export declare function AgentSessionList({ sessions, activeSessionId, onSelect, onNew, onDelete, labels: overrides }: {
+    sessions: readonly agentV1.Session[];
+    activeSessionId?: string;
+    onSelect: (id: string) => void;
+    onNew: () => void;
+    onDelete?: (id: string) => void;
+    labels?: Partial<AgentUiLabels>;
+}): import("react").JSX.Element;
+export declare function AgentResourceBar<Slots extends AgentDataSlots = AgentDataSlots>({ profileRevisionId, explicitSkillSlug, onExplicitSkillChange, labels: overrides, registry }: {
+    profileRevisionId: string;
+    explicitSkillSlug: string;
+    onExplicitSkillChange: (value: string) => void;
+    labels?: Partial<AgentUiLabels>;
+    registry?: AgentSlotRegistry<Slots>;
+}): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element;
+export declare function AgentExecutionTrace<Slots extends AgentDataSlots = AgentDataSlots>({ items, label, registry }: {
+    items: readonly Extract<AgentProjectionItem, {
+        slot: "trace-item";
+    }>[];
+    label?: string;
+    registry?: AgentSlotRegistry<Slots>;
+}): import("react").JSX.Element | null;
+export declare function AgentActionCard({ interaction, onResolve }: {
+    interaction: Pick<agentV1.Interaction, "id" | "kind" | "status">;
+    onResolve: (resolution: "confirmed" | "rejected") => void | Promise<void>;
+}): import("react").JSX.Element;
+export declare function AgentComposer({ value, onChange, onSubmit, running, onStop, labels: overrides }: {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    running: boolean;
+    onStop: () => void;
+    labels?: Partial<AgentUiLabels>;
+}): import("react").JSX.Element;
+export declare function AgentProjectionNodes<Slots extends AgentDataSlots = AgentDataSlots>({ items, registry, onResolveInteraction }: {
+    items: readonly AgentProjectionItem<Slots>[];
+    registry?: AgentSlotRegistry<Slots>;
+    onResolveInteraction?: (interactionId: string, resolution: "confirmed" | "rejected") => void | Promise<void>;
+}): import("react").JSX.Element;
+export declare function AgentConversation<Slots extends AgentDataSlots = AgentDataSlots>({ model, explicitSkillSlug, registry, header, labels: overrides, onError }: {
+    model: AgentSessionModel<Slots>;
+    explicitSkillSlug?: string;
+    registry?: AgentSlotRegistry<Slots>;
+    header?: ReactNode;
+    labels?: Partial<AgentUiLabels>;
+    onError?: (error: Error) => void;
+}): import("react").JSX.Element;
+export declare function AgentChat<Slots extends AgentDataSlots = AgentDataSlots>({ model, title, subtitle, profileRevisionId, sessions, activeSessionId, onSelectSession, onNewSession, onDeleteSession, registry, labels: overrides }: {
+    model: AgentSessionModel<Slots>;
+    title?: string;
+    subtitle?: string;
+    profileRevisionId: string;
+    sessions?: readonly agentV1.Session[];
+    activeSessionId?: string;
+    onSelectSession?: (id: string) => void;
+    onNewSession?: () => void;
+    onDeleteSession?: (id: string) => void;
+    registry?: AgentSlotRegistry<Slots>;
+    labels?: Partial<AgentUiLabels>;
+}): import("react").JSX.Element;
+export declare function AgentProfileEditor<Slots extends AgentDataSlots = AgentDataSlots>({ revision, onChange, onSave, saving, registry }: {
+    revision: agentV1.AgentProfileRevision;
+    onChange: (revision: agentV1.AgentProfileRevision) => void;
+    onSave: () => void;
+    saving?: boolean;
+    registry?: AgentSlotRegistry<Slots>;
+}): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element;
+export declare function AgentStudio({ editor, preview }: {
+    editor: ReactNode;
+    preview: ReactNode;
+}): import("react").JSX.Element;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@agent-factory-platform/agent-react",
+  "version": "0.2.0",
+  "description": "Agent runtime bindings and themeable React conversation surfaces.",
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JingYeoh/agent-factory.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/agent-react.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/agent-react.css"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "dependencies": {
+    "@agent-factory-platform/client": "0.2.0",
+    "@agent-factory-platform/ui-kit": "0.2.0",
+    "@bufbuild/protobuf": "^2.2.3",
+    "lucide-react": "^1.23.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "lint": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "build": "node ../../scripts/clean-package-dist.mjs . && vite build && tsc -p tsconfig.build.json"
+  }
+}