@tangle-network/agent-app 0.49.32 → 0.49.34

package/dist/hosted-agent/react/index.d.ts

@@ -0,0 +1,5 @@
+/** Browser-safe line management UI. The host keeps owner credentials server-side. */
+export type { ConnectableLineTransport, LineAnswerTarget, LineBillingProps, LineBillingView, LineBoxMode, LineConnectInput, LineConnectionOption, LineIdentityKind, LineIdentityOption, LineLastTurn, LineMemberRole, LineMembersClient, LineMembersProps, LineSetupClient, LineSetupLine, LineSetupProps, LineSetupSnapshot, } from './contracts';
+export { LineSetup } from './LineSetup';
+export { LineMembers } from './LineMembers';
+export { LineBilling } from './LineBilling';

package/dist/hosted-agent/react/index.js

@@ -0,0 +1,573 @@
+// src/hosted-agent/react/LineSetup.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var useBrowserLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+var TRANSPORT = {
+  imessage: "iMessage",
+  sms: "SMS",
+  whatsapp: "WhatsApp",
+  email: "Email"
+};
+var IDENTITY = {
+  handle: "Inkbox handle",
+  number: "Dedicated number",
+  email: "Email line"
+};
+function message(error) {
+  return error instanceof Error ? error.message : "The line request failed. Try again.";
+}
+function dateTime(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+function choicesFor(snapshot) {
+  return (snapshot.connections ?? []).flatMap((connection) => connection.identities.map((identity, index) => ({
+    key: `${connection.id}:${index}`,
+    connection,
+    identity
+  })));
+}
+function canOfferReconnect(line, choice) {
+  if (line.connectionId !== choice.connection.id || line.transport !== choice.identity.transport || line.targetId !== null) return false;
+  if (line.providerNumberId === null) return line.transport !== "whatsapp" && !choice.identity.phoneNumberId && !choice.identity.requiresPhoneNumberId;
+  return choice.identity.phoneNumberId === line.providerNumberId || !choice.identity.phoneNumberId && choice.identity.requiresPhoneNumberId === true;
+}
+function matchesLineIdentity(line, identity, numberId) {
+  if (line.transport !== identity.transport) return false;
+  if (line.providerNumberId === null) return line.transport !== "whatsapp" && !identity.phoneNumberId && !identity.requiresPhoneNumberId;
+  return numberId === line.providerNumberId;
+}
+function LineSetup({ client, scopeKey, initialTargetId, canManage, onNotice }) {
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const sequence = useRef(0);
+  const incarnation = useRef(0);
+  const confirmButton = useRef(null);
+  const heading = useRef(null);
+  const disconnectTriggers = useRef(/* @__PURE__ */ new Map());
+  const restoreFocusTo = useRef(null);
+  useBrowserLayoutEffect(() => {
+    incarnation.current++;
+    return () => {
+      incarnation.current++;
+    };
+  }, [scopeKey, initialTargetId]);
+  const [loadedSnapshot, setLoadedSnapshot] = useState(null);
+  const snapshot = loadedSnapshot?.scopeKey === scopeKey && loadedSnapshot.initialTargetId === initialTargetId ? loadedSnapshot.value : null;
+  const [loading, setLoading] = useState(true);
+  const [refreshFailed, setRefreshFailed] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [kind, setKind] = useState("handle");
+  const [choiceKey, setChoiceKey] = useState("");
+  const [targetId, setTargetId] = useState(initialTargetId ?? "");
+  const [boxMode, setBoxMode] = useState("per-member");
+  const [phoneNumberId, setPhoneNumberId] = useState("");
+  const [confirmLineId, setConfirmLineId] = useState(null);
+  function stillCurrent(requestIncarnation) {
+    return requestIncarnation === incarnation.current;
+  }
+  async function reload(requestIncarnation) {
+    const request = ++sequence.current;
+    try {
+      const next = await clientRef.current.load();
+      if (request !== sequence.current || !stillCurrent(requestIncarnation)) return null;
+      setLoadedSnapshot({ scopeKey, initialTargetId, value: next });
+      setError(null);
+      setRefreshFailed(false);
+      setTargetId((current) => next.targets.some((target) => target.id === current) ? current : next.targets.find((target) => target.id === initialTargetId)?.id ?? next.targets[0]?.id ?? "");
+      setLoading(false);
+      return next;
+    } catch (cause) {
+      if (request !== sequence.current || !stillCurrent(requestIncarnation)) return null;
+      setError(message(cause));
+      setRefreshFailed(true);
+      setLoading(false);
+      return null;
+    }
+  }
+  function retry() {
+    if (loading) return;
+    setLoading(true);
+    void reload(incarnation.current);
+  }
+  function closeConfirmation(lineId) {
+    restoreFocusTo.current = lineId;
+    setConfirmLineId(null);
+  }
+  useEffect(() => {
+    setLoading(true);
+    setLoadedSnapshot(null);
+    setError(null);
+    setRefreshFailed(false);
+    setBusy(false);
+    setKind("handle");
+    setChoiceKey("");
+    setTargetId(initialTargetId ?? "");
+    setBoxMode("per-member");
+    setPhoneNumberId("");
+    setConfirmLineId(null);
+    restoreFocusTo.current = null;
+    void reload(incarnation.current);
+    return () => {
+      sequence.current++;
+    };
+  }, [scopeKey, initialTargetId]);
+  useEffect(() => {
+    if (confirmLineId) confirmButton.current?.focus();
+  }, [confirmLineId]);
+  useEffect(() => {
+    const lineId = restoreFocusTo.current;
+    if (confirmLineId !== null || lineId === null) return;
+    restoreFocusTo.current = null;
+    const trigger = disconnectTriggers.current.get(lineId);
+    if (trigger && !trigger.disabled) trigger.focus();
+    else heading.current?.focus();
+  }, [confirmLineId, snapshot, refreshFailed]);
+  const allChoices = snapshot ? choicesFor(snapshot) : [];
+  const choices = snapshot ? allChoices.filter((choice) => {
+    const occupied2 = snapshot.lines.filter((line2) => line2.status !== "released" && line2.transport === choice.identity.transport);
+    const [line] = occupied2;
+    return occupied2.length === 0 || occupied2.length === 1 && line !== void 0 && canOfferReconnect(line, choice);
+  }) : [];
+  const availableKinds = ["handle", "number", "email"].filter((value) => choices.some((choice) => choice.identity.kind === value));
+  const selectedKind = availableKinds.includes(kind) ? kind : availableKinds[0];
+  const kindChoices = choices.filter((choice) => choice.identity.kind === selectedKind);
+  const selected = kindChoices.find((choice) => choice.key === choiceKey) ?? kindChoices[0];
+  const selectedTarget = snapshot?.targets.find((target) => target.id === targetId);
+  const selectedMode = selectedTarget?.modes.includes(boxMode) ? boxMode : selectedTarget?.modes[0];
+  const enteredNumber = selected?.identity.phoneNumberId ?? phoneNumberId.trim();
+  const needsNumber = selected?.identity.transport === "whatsapp" || selected?.identity.requiresPhoneNumberId;
+  const occupied = selected && snapshot?.lines.filter((line) => line.status !== "released" && line.transport === selected.identity.transport);
+  const [occupiedLine] = occupied || [];
+  const reconnectChoice = Boolean(selected && occupied?.length === 1 && occupiedLine && canOfferReconnect(occupiedLine, selected));
+  const reconnecting = Boolean(reconnectChoice && selected && occupiedLine && matchesLineIdentity(occupiedLine, selected.identity, enteredNumber));
+  const blockedByExistingLine = Boolean(occupied?.length && !reconnecting);
+  async function connect() {
+    if (!selected || !selectedTarget || !selectedMode || needsNumber && !enteredNumber || blockedByExistingLine || busy || loading || refreshFailed) return;
+    const requestIncarnation = incarnation.current;
+    setBusy(true);
+    setError(null);
+    try {
+      await clientRef.current.connect({
+        connectionId: selected.connection.id,
+        transport: selected.identity.transport,
+        ...enteredNumber ? { phoneNumberId: enteredNumber } : {},
+        targetId: selectedTarget.id,
+        boxMode: selectedMode
+      });
+      if (!stillCurrent(requestIncarnation)) return;
+      const updated = await reload(requestIncarnation);
+      if (!stillCurrent(requestIncarnation)) return;
+      if (!updated) {
+        onNotice?.({ kind: "error", message: "Line connected, but its current status could not be loaded." });
+        return;
+      }
+      const line = updated.lines.find((item) => item.status !== "released" && item.connectionId === selected.connection.id && item.transport === selected.identity.transport && item.providerNumberId === (enteredNumber || null));
+      onNotice?.({ kind: "success", message: line?.answering ? "The line is answering." : "Line connected. Add a member to start answers." });
+    } catch (cause) {
+      if (!stillCurrent(requestIncarnation)) return;
+      const detail = message(cause);
+      setError(detail);
+      onNotice?.({ kind: "error", message: detail });
+    } finally {
+      if (stillCurrent(requestIncarnation)) setBusy(false);
+    }
+  }
+  async function disconnect(lineId) {
+    if (busy || loading || refreshFailed) return;
+    const requestIncarnation = incarnation.current;
+    setBusy(true);
+    setError(null);
+    try {
+      await clientRef.current.disconnect(lineId);
+      if (!stillCurrent(requestIncarnation)) return;
+      const updated = await reload(requestIncarnation);
+      if (!stillCurrent(requestIncarnation)) return;
+      closeConfirmation(lineId);
+      onNotice?.(updated ? { kind: "success", message: "The line stopped answering." } : { kind: "error", message: "Line disconnected, but its current status could not be loaded." });
+    } catch (cause) {
+      if (!stillCurrent(requestIncarnation)) return;
+      const detail = message(cause);
+      setError(detail);
+      onNotice?.({ kind: "error", message: detail });
+    } finally {
+      if (stillCurrent(requestIncarnation)) setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "tangle-lines", "aria-label": "Agent lines", children: [
+    /* @__PURE__ */ jsxs("header", { className: "tangle-lines__heading", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { ref: heading, tabIndex: -1, children: "Lines" }),
+        snapshot && /* @__PURE__ */ jsxs("p", { children: [
+          snapshot.workspaceName,
+          " can use one line per transport."
+        ] })
+      ] }),
+      snapshot && /* @__PURE__ */ jsxs("span", { className: "tangle-lines__count", children: [
+        snapshot.lines.filter((line) => line.answering).length,
+        " answering"
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs("div", { className: "tangle-lines__error", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      (!snapshot || refreshFailed) && /* @__PURE__ */ jsx("button", { type: "button", disabled: loading, onClick: retry, children: "Retry" })
+    ] }),
+    loading && /* @__PURE__ */ jsx("p", { className: "tangle-lines__muted", role: "status", children: "Loading lines\u2026" }),
+    snapshot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "tangle-lines__list", children: [
+        snapshot.lines.filter((line) => line.status !== "released").length === 0 && /* @__PURE__ */ jsx("p", { className: "tangle-lines__empty", children: "No line answers for this workspace yet." }),
+        snapshot.lines.filter((line) => line.status !== "released").map((line) => /* @__PURE__ */ jsxs("div", { className: "tangle-lines__row", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tangle-lines__row-main", children: [
+            /* @__PURE__ */ jsxs("span", { className: "tangle-lines__eyebrow", children: [
+              TRANSPORT[line.transport],
+              " \xB7 ",
+              line.answering ? "Answering" : line.targetId === null ? "Disconnected" : line.status === "active" ? "Awaiting member" : line.status
+            ] }),
+            /* @__PURE__ */ jsx("strong", { children: line.routerAddress ?? line.address }),
+            line.connect && line.targetId !== null && /* @__PURE__ */ jsxs("p", { children: [
+              "To reach this agent, text ",
+              /* @__PURE__ */ jsx("code", { children: line.connect }),
+              "."
+            ] }),
+            /* @__PURE__ */ jsxs("p", { children: [
+              line.targetLabel ?? "No agent or box assigned",
+              line.boxMode && ` \xB7 ${line.boxMode === "per-member" ? "one box per member" : "shared box"}`
+            ] }),
+            line.lastTurn.kind === "latest" ? /* @__PURE__ */ jsxs("p", { children: [
+              "Last turn: ",
+              line.lastTurn.status,
+              " \xB7 ",
+              dateTime(line.lastTurn.at)
+            ] }) : /* @__PURE__ */ jsx("p", { children: line.lastTurn.kind === "none" ? "No turns yet." : "Turn history unavailable." })
+          ] }),
+          canManage && line.canDisconnect && line.targetId !== null && line.status === "active" && /* @__PURE__ */ jsx("div", { className: "tangle-lines__row-actions", children: confirmLineId === line.id ? /* @__PURE__ */ jsxs("div", { className: "tangle-lines__confirm", role: "group", "aria-label": `Disconnect ${line.address}?`, children: [
+            /* @__PURE__ */ jsx("span", { children: "Disconnect this line?" }),
+            /* @__PURE__ */ jsx("button", { ref: confirmButton, type: "button", className: "tangle-lines__danger", disabled: busy || loading || refreshFailed, onClick: () => void disconnect(line.id), children: "Disconnect" }),
+            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: () => closeConfirmation(line.id), children: "Keep line" })
+          ] }) : /* @__PURE__ */ jsx("button", { ref: (node) => {
+            if (node) disconnectTriggers.current.set(line.id, node);
+            else disconnectTriggers.current.delete(line.id);
+          }, type: "button", className: "tangle-lines__quiet", disabled: busy || loading || refreshFailed, onClick: () => setConfirmLineId(line.id), children: "Disconnect line" }) })
+        ] }, line.id))
+      ] }),
+      canManage && (snapshot.connections === null || choices.length > 0 || allChoices.length === 0) && /* @__PURE__ */ jsxs("div", { className: "tangle-lines__setup", children: [
+        /* @__PURE__ */ jsx("h3", { children: "Connect an identity you own" }),
+        /* @__PURE__ */ jsx("p", { children: "Choose an identity already connected in Hub. Billing details appear below." }),
+        snapshot.connections === null ? /* @__PURE__ */ jsxs("div", { className: "tangle-lines__error", role: "status", children: [
+          /* @__PURE__ */ jsx("span", { children: "Hub connections could not be read. Check Hub access and try again." }),
+          /* @__PURE__ */ jsx("button", { type: "button", disabled: loading, onClick: retry, children: "Retry" })
+        ] }) : availableKinds.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "tangle-lines__empty", children: [
+          "Connect an owned handle, number, or mailbox in Hub, then ",
+          /* @__PURE__ */ jsx("button", { type: "button", disabled: loading, onClick: retry, children: "reload" }),
+          "."
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "tangle-lines__kinds", role: "group", "aria-label": "Identity type", children: availableKinds.map((value) => /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": selectedKind === value, onClick: () => {
+            setKind(value);
+            setChoiceKey("");
+            setPhoneNumberId("");
+          }, children: IDENTITY[value] }, value)) }),
+          /* @__PURE__ */ jsxs("div", { className: "tangle-lines__fields", children: [
+            /* @__PURE__ */ jsxs("label", { children: [
+              "Owned connection",
+              /* @__PURE__ */ jsx("select", { value: selected?.key ?? "", onChange: (event) => {
+                setChoiceKey(event.target.value);
+                setPhoneNumberId("");
+              }, children: kindChoices.map((choice) => /* @__PURE__ */ jsxs("option", { value: choice.key, children: [
+                choice.connection.label,
+                " \xB7 ",
+                choice.identity.label
+              ] }, choice.key)) })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { children: [
+              "Agent or box",
+              /* @__PURE__ */ jsx("select", { value: selectedTarget?.id ?? "", onChange: (event) => setTargetId(event.target.value), children: snapshot.targets.map((target) => /* @__PURE__ */ jsxs("option", { value: target.id, children: [
+                target.label,
+                " \xB7 ",
+                target.kind
+              ] }, target.id)) })
+            ] }),
+            selectedTarget && selectedTarget.modes.length > 1 && /* @__PURE__ */ jsxs("fieldset", { children: [
+              /* @__PURE__ */ jsx("legend", { children: "Conversation space" }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                /* @__PURE__ */ jsx("input", { type: "radio", name: `line-box-mode-${scopeKey}`, value: "per-member", checked: selectedMode === "per-member", disabled: !selectedTarget?.modes.includes("per-member"), onChange: () => setBoxMode("per-member") }),
+                " One box per member"
+              ] }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                /* @__PURE__ */ jsx("input", { type: "radio", name: `line-box-mode-${scopeKey}`, value: "shared", checked: selectedMode === "shared", disabled: !selectedTarget?.modes.includes("shared"), onChange: () => setBoxMode("shared") }),
+                " Shared box for a team"
+              ] })
+            ] }),
+            needsNumber && !selected?.identity.phoneNumberId && /* @__PURE__ */ jsxs("label", { children: [
+              "Existing provider number ID",
+              /* @__PURE__ */ jsx("input", { value: phoneNumberId, onChange: (event) => setPhoneNumberId(event.target.value), autoComplete: "off", placeholder: "Number ID from Hub" })
+            ] })
+          ] }),
+          reconnectChoice && blockedByExistingLine && /* @__PURE__ */ jsx("p", { className: "tangle-lines__warning", children: "Enter this line's current provider number ID to reconnect." }),
+          /* @__PURE__ */ jsx("button", { className: "tangle-lines__primary", type: "button", disabled: busy || loading || refreshFailed || !selected || !selectedTarget || !selectedMode || needsNumber && !enteredNumber || blockedByExistingLine, onClick: () => void connect(), children: busy ? reconnectChoice ? "Reconnecting\u2026" : "Connecting\u2026" : `${reconnectChoice ? "Reconnect" : "Connect"} ${selected ? TRANSPORT[selected.identity.transport] : "line"}` })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/hosted-agent/react/LineMembers.tsx
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var useBrowserLayoutEffect2 = typeof document !== "undefined" ? useLayoutEffect2 : useEffect2;
+var STATUS = {
+  invited: { label: "Awaiting consent", detail: "The first message from this address confirms consent." },
+  active: { label: "Consented", detail: "This member has sent a message to the line." },
+  stopped: { label: "Stopped", detail: "The member texted STOP. Only a message from them with START resumes replies." },
+  removed: { label: "Removed", detail: "This address no longer has access to the line." }
+};
+function errorMessage(cause) {
+  return cause instanceof Error ? cause.message : "The member request failed. Try again.";
+}
+function LineMembers({ lineId, scopeKey, client, roles, canManage, canAdd = true, maxMembers, allowRoleChange = true, allowRemoveLastOwner = false, onNotice }) {
+  const clientRef = useRef2(client);
+  clientRef.current = client;
+  const sequence = useRef2(0);
+  const incarnation = useRef2(0);
+  const confirmButton = useRef2(null);
+  const heading = useRef2(null);
+  const removeTriggers = useRef2(/* @__PURE__ */ new Map());
+  const restoreFocusTo = useRef2(null);
+  useBrowserLayoutEffect2(() => {
+    incarnation.current++;
+    return () => {
+      incarnation.current++;
+    };
+  }, [lineId, scopeKey]);
+  const [memberSnapshot, setMemberSnapshot] = useState2(null);
+  const [error, setError] = useState2(null);
+  const [refreshFailed, setRefreshFailed] = useState2(false);
+  const [address, setAddress] = useState2("");
+  const [label, setLabel] = useState2("");
+  const [role, setRole] = useState2("member");
+  const [busy, setBusy] = useState2(null);
+  const [confirmId, setConfirmId] = useState2(null);
+  const members = memberSnapshot?.lineId === lineId && memberSnapshot.scopeKey === scopeKey ? memberSnapshot.members : null;
+  function stillCurrent(requestIncarnation) {
+    return requestIncarnation === incarnation.current;
+  }
+  async function reload(requestIncarnation) {
+    const request = ++sequence.current;
+    try {
+      const next = await clientRef.current.list(lineId);
+      if (request !== sequence.current || !stillCurrent(requestIncarnation)) return false;
+      setMemberSnapshot({ lineId, scopeKey, members: next });
+      setError(null);
+      setRefreshFailed(false);
+      return true;
+    } catch (cause) {
+      if (request !== sequence.current || !stillCurrent(requestIncarnation)) return false;
+      setError(errorMessage(cause));
+      setRefreshFailed(true);
+      return false;
+    }
+  }
+  async function retry() {
+    if (busy) return;
+    const requestIncarnation = incarnation.current;
+    setBusy("refresh");
+    try {
+      await reload(requestIncarnation);
+    } finally {
+      if (stillCurrent(requestIncarnation)) setBusy(null);
+    }
+  }
+  function closeConfirmation(memberId) {
+    restoreFocusTo.current = memberId;
+    setConfirmId(null);
+  }
+  useEffect2(() => {
+    setMemberSnapshot(null);
+    setError(null);
+    setRefreshFailed(false);
+    setAddress("");
+    setLabel("");
+    setRole("member");
+    setConfirmId(null);
+    restoreFocusTo.current = null;
+    setBusy(null);
+    void reload(incarnation.current);
+    return () => {
+      sequence.current++;
+    };
+  }, [lineId, scopeKey]);
+  useEffect2(() => {
+    if (confirmId) confirmButton.current?.focus();
+  }, [confirmId]);
+  useEffect2(() => {
+    const memberId = restoreFocusTo.current;
+    if (confirmId !== null || memberId === null) return;
+    restoreFocusTo.current = null;
+    const trigger = removeTriggers.current.get(memberId);
+    if (trigger && !trigger.disabled) trigger.focus();
+    else heading.current?.focus();
+  }, [confirmId, members, refreshFailed]);
+  const selectedRole = roles.some((item) => item.value === role) ? role : roles.find((item) => item.value === "member")?.value ?? roles[0]?.value ?? "";
+  const activeMembers = members?.filter((member) => member.status !== "removed").length ?? 0;
+  const activeOwners = members?.filter((member) => member.role === "owner" && member.status !== "removed").length ?? 0;
+  async function mutate(key, action, success, onSuccess) {
+    if (busy || refreshFailed) return;
+    const requestIncarnation = incarnation.current;
+    setBusy(key);
+    setError(null);
+    try {
+      await action();
+      if (!stillCurrent(requestIncarnation)) return;
+      const refreshed = await reload(requestIncarnation);
+      if (!stillCurrent(requestIncarnation)) return;
+      onSuccess?.();
+      onNotice?.(refreshed ? { kind: "success", message: success } : { kind: "error", message: "Member updated, but the current member list could not be loaded." });
+    } catch (cause) {
+      if (!stillCurrent(requestIncarnation)) return;
+      const detail = errorMessage(cause);
+      setError(detail);
+      onNotice?.({ kind: "error", message: detail });
+    } finally {
+      if (stillCurrent(requestIncarnation)) setBusy(null);
+    }
+  }
+  function add() {
+    const trimmed = address.trim();
+    if (!trimmed || !selectedRole || members === null || maxMembers !== void 0 && activeMembers >= maxMembers) return;
+    void mutate("add", () => clientRef.current.add(lineId, { address: trimmed, role: selectedRole, ...label.trim() ? { label: label.trim() } : {} }), "Member invited. Their first message confirms consent.", () => {
+      setAddress("");
+      setLabel("");
+    });
+  }
+  return /* @__PURE__ */ jsxs2("section", { className: "tangle-lines", "aria-label": "Line members", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "tangle-lines__heading", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("h2", { ref: heading, tabIndex: -1, children: "Members" }),
+        /* @__PURE__ */ jsx2("p", { children: "Each address controls its own consent and STOP state." })
+      ] }),
+      members && /* @__PURE__ */ jsxs2("span", { className: "tangle-lines__count", children: [
+        activeMembers,
+        " ",
+        activeMembers === 1 ? "member" : "members"
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxs2("div", { className: "tangle-lines__error", role: "alert", children: [
+      /* @__PURE__ */ jsx2("span", { children: error }),
+      (members === null || refreshFailed) && /* @__PURE__ */ jsx2("button", { type: "button", disabled: busy !== null, onClick: () => void retry(), children: "Retry" })
+    ] }),
+    members === null ? !error && /* @__PURE__ */ jsx2("p", { className: "tangle-lines__muted", role: "status", children: "Loading members\u2026" }) : /* @__PURE__ */ jsxs2("div", { className: "tangle-lines__list", children: [
+      members.length === 0 && /* @__PURE__ */ jsx2("p", { className: "tangle-lines__empty", children: canAdd ? "No members yet. Invite an address that you own or have permission to add." : "No members yet." }),
+      members.map((member) => {
+        const lastOwner = member.role === "owner" && activeOwners <= 1;
+        const editable = canManage && member.status !== "removed" && (!lastOwner || allowRemoveLastOwner);
+        return /* @__PURE__ */ jsxs2("div", { className: "tangle-lines__row", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "tangle-lines__row-main", children: [
+            /* @__PURE__ */ jsx2("span", { className: `tangle-lines__state tangle-lines__state--${member.status}`, children: STATUS[member.status].label }),
+            /* @__PURE__ */ jsx2("strong", { children: member.label || member.address }),
+            member.label && /* @__PURE__ */ jsx2("p", { children: member.address }),
+            /* @__PURE__ */ jsx2("p", { children: STATUS[member.status].detail })
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "tangle-lines__row-actions", children: editable ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            allowRoleChange && !lastOwner ? /* @__PURE__ */ jsxs2("label", { className: "tangle-lines__compact-label", children: [
+              "Role",
+              /* @__PURE__ */ jsxs2("select", { value: member.role, disabled: busy !== null || refreshFailed, onChange: (event) => void mutate(member.id, () => clientRef.current.update(lineId, member.id, { role: event.target.value }), "Role updated."), children: [
+                !roles.some((item) => item.value === member.role) && /* @__PURE__ */ jsx2("option", { value: member.role, children: member.role }),
+                roles.map((item) => /* @__PURE__ */ jsxs2("option", { value: item.value, children: [
+                  item.label,
+                  item.tools === "chat" ? " \xB7 chat only" : ""
+                ] }, item.value))
+              ] })
+            ] }) : /* @__PURE__ */ jsx2("span", { className: "tangle-lines__role", children: roles.find((item) => item.value === member.role)?.label ?? member.role }),
+            confirmId === member.id ? /* @__PURE__ */ jsxs2("div", { className: "tangle-lines__confirm", role: "group", "aria-label": `Remove ${member.label || member.address}?`, children: [
+              /* @__PURE__ */ jsxs2("span", { children: [
+                "Remove ",
+                member.label || member.address,
+                "?"
+              ] }),
+              /* @__PURE__ */ jsx2("button", { ref: confirmButton, type: "button", className: "tangle-lines__danger", disabled: busy !== null || refreshFailed, onClick: () => void mutate(member.id, () => clientRef.current.remove(lineId, member.id), "Member removed.", () => closeConfirmation(member.id)), children: "Remove" }),
+              /* @__PURE__ */ jsx2("button", { type: "button", disabled: busy !== null, onClick: () => closeConfirmation(member.id), children: "Keep" })
+            ] }) : /* @__PURE__ */ jsx2("button", { ref: (node) => {
+              if (node) removeTriggers.current.set(member.id, node);
+              else removeTriggers.current.delete(member.id);
+            }, type: "button", className: "tangle-lines__quiet", disabled: busy !== null || refreshFailed, onClick: () => setConfirmId(member.id), children: "Remove" })
+          ] }) : /* @__PURE__ */ jsx2("span", { className: "tangle-lines__role", children: roles.find((item) => item.value === member.role)?.label ?? member.role }) })
+        ] }, member.id);
+      })
+    ] }),
+    canManage && canAdd && members !== null && (maxMembers === void 0 || activeMembers < maxMembers) && /* @__PURE__ */ jsxs2("div", { className: "tangle-lines__setup", children: [
+      /* @__PURE__ */ jsx2("h3", { children: "Invite a member" }),
+      /* @__PURE__ */ jsx2("p", { children: "Hub marks the address as invited. The member confirms by messaging the line." }),
+      /* @__PURE__ */ jsxs2("div", { className: "tangle-lines__fields", children: [
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Phone number or email",
+          /* @__PURE__ */ jsx2("input", { value: address, onChange: (event) => setAddress(event.target.value), autoComplete: "off", placeholder: "+15551234567 or name@example.com" })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Name (optional)",
+          /* @__PURE__ */ jsx2("input", { value: label, onChange: (event) => setLabel(event.target.value), placeholder: "Member name" })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Role",
+          /* @__PURE__ */ jsx2("select", { value: selectedRole, disabled: roles.length === 0, onChange: (event) => setRole(event.target.value), children: roles.map((item) => /* @__PURE__ */ jsxs2("option", { value: item.value, children: [
+            item.label,
+            item.tools === "chat" ? " \xB7 chat only" : ""
+          ] }, item.value)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "tangle-lines__primary", disabled: busy !== null || refreshFailed || !address.trim() || !selectedRole, onClick: add, children: busy === "add" ? "Inviting\u2026" : "Invite member" })
+    ] })
+  ] });
+}
+
+// src/hosted-agent/react/LineBilling.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function resetTime(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+function LineBilling({ view }) {
+  return /* @__PURE__ */ jsxs3("section", { className: "tangle-lines", "aria-label": "Line billing", children: [
+    /* @__PURE__ */ jsx3("header", { className: "tangle-lines__heading", children: /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3("h2", { children: "Billing" }),
+      /* @__PURE__ */ jsx3("p", { children: view.lineAddress })
+    ] }) }),
+    /* @__PURE__ */ jsxs3("dl", { className: "tangle-lines__billing", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: "Line" }),
+        /* @__PURE__ */ jsx3("dd", { children: view.linePayer.kind === "workspace" ? view.linePayer.label : "Payer not verified" }),
+        view.linePayer.kind === "workspace" && /* @__PURE__ */ jsxs3("dd", { className: "tangle-lines__billing-detail", children: [
+          "Charged to ",
+          view.workspaceName,
+          "."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: "Agent turns" }),
+        /* @__PURE__ */ jsx3("dd", { children: view.turnPayer.kind === "unverified" ? "Payer not verified" : view.turnPayer.label }),
+        view.turnPayer.kind === "member" && /* @__PURE__ */ jsx3("dd", { className: "tangle-lines__billing-detail", children: "Each member pays for their own admitted turns." })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: "Allowance" }),
+        view.allowance ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+          /* @__PURE__ */ jsxs3("dd", { children: [
+            view.allowance.turnsPerMemberPerDay,
+            " turns per member each day"
+          ] }),
+          view.allowance.used !== void 0 && view.allowance.limit !== void 0 && /* @__PURE__ */ jsxs3("dd", { className: "tangle-lines__billing-detail", children: [
+            view.allowance.used,
+            " of ",
+            view.allowance.limit,
+            " turns used",
+            view.allowance.resetsAt ? ` \xB7 resets ${resetTime(view.allowance.resetsAt)}` : ""
+          ] })
+        ] }) : /* @__PURE__ */ jsx3("dd", { children: "No allowance reported" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  LineBilling,
+  LineMembers,
+  LineSetup
+};
+//# sourceMappingURL=index.js.map