@decentnetwork/beagle 0.1.0 → 0.1.2

package/dist/carrier-node.d.ts

@@ -99,6 +99,10 @@ export declare class CarrierNode extends EventEmitter {
     cancelSend(userid: string, fileId: string): boolean;
     acceptFile(userid: string, fileNumber: number): void;
     sendInlineFile(userid: string, data: Uint8Array, name: string): Promise<void>;
+    /** Send on an application packet id. Used for the components channel (165);
+     *  unavailable on an SDK build without custom packets, which simply means
+     *  this peer can't offer forms — never that chat breaks. */
+    sendCustomPacket(userid: string, id: number, data: Uint8Array): Promise<void>;
     sendCallSignal(userid: string, data: Uint8Array | string): Promise<void>;
     /** Native (iOS/Android/C) friends can't see toxcore file transfer; they only
      *  receive the inline FileModel envelope. decentlan detects this from the DHT

package/dist/carrier-node.js

@@ -102,6 +102,8 @@ export class CarrierNode extends EventEmitter {
             this.emit("message", m.pubkey, m.text, m.via);
         });
         peer.onFriendRequest((r) => this.emit("friend-request", r));
+        // Brief 30 components channel. Forwarded raw; the host validates.
+        peer.onCustomPacket?.((evt) => this.emit("custom-packet", evt));
         peer.onFriendConnection?.((e) => this.emit("friend-connection", e));
         peer.onInlineFile?.((f) => this.emit("inline-file", f));
         peer.onInvite?.((evt) => {
@@ -189,6 +191,15 @@ export class CarrierNode extends EventEmitter {
             throw new Error("This peer SDK build has no inline-file support");
         await peer.sendInlineFile(userid, { name, data });
     }
+    /** Send on an application packet id. Used for the components channel (165);
+     *  unavailable on an SDK build without custom packets, which simply means
+     *  this peer can't offer forms — never that chat breaks. */
+    async sendCustomPacket(userid, id, data) {
+        const peer = this.#require();
+        if (!peer.sendCustomPacket)
+            throw new Error("This peer SDK build has no custom-packet channel");
+        await peer.sendCustomPacket(userid, id, data);
+    }
     async sendCallSignal(userid, data) {
         const peer = this.#require();
         if (!peer.sendInvite)

package/dist/chat-components.d.ts

@@ -0,0 +1,67 @@
+/** Custom packet id for the components channel.
+ *
+ *  160-191 is toxcore's LOSSLESS range — a form must not be silently dropped.
+ *  decentlan owns 161 (session), 162 (dora), 163 (IP), 164 (rate); 165 is the
+ *  first free slot. Clients that don't implement this id never see the packet,
+ *  which is exactly the backward-compatibility story we want. */
+export declare const PACKET_ID_CHAT_COMPONENTS = 165;
+/** Payload version. Receivers ignore payloads they don't know how to read
+ *  rather than best-effort parsing a future shape. */
+export declare const COMPONENTS_WIRE_VERSION = 1;
+export declare const MAX_COMPONENTS = 12;
+export declare const MAX_OPTIONS = 40;
+export declare const MAX_LABEL_LEN = 120;
+export declare const MAX_ID_LEN = 64;
+export declare const MAX_VALUE_LEN = 512;
+export declare const MAX_CUSTOM_ID_LEN = 128;
+/** Hard ceiling on a decoded payload before we even try to parse it. */
+export declare const MAX_PAYLOAD_BYTES: number;
+export type ComponentType = "select" | "submit" | "text" | "button" | "attachment";
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface ChatComponent {
+    type: ComponentType;
+    id: string;
+    label?: string;
+    required?: boolean;
+    default?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+}
+export interface ComponentsMessage {
+    v: number;
+    type: "components";
+    /** Chosen by the agent; echoed back so it can route the reply. */
+    custom_id: string;
+    components: ChatComponent[];
+}
+export interface InteractionMessage {
+    v: number;
+    type: "interaction";
+    custom_id: string;
+    /** id of the submit/button that fired. */
+    component: string;
+    values: Record<string, string | {
+        fileId: string;
+        name: string;
+        size: number;
+    }>;
+}
+/**
+ * Validate a remote components payload. Returns null when nothing renderable
+ * survives — the caller then shows only the text message, which is the correct
+ * degraded state, never an error.
+ */
+export declare function parseComponentsMessage(raw: unknown): ComponentsMessage | null;
+/** Build the interaction reply. Values are the user's own input, but they are
+ *  bounded here too so a pathological local state can't emit an oversized
+ *  packet at the peer. */
+export declare function buildInteraction(customId: string, component: string, values: Record<string, string>): InteractionMessage;
+/** Decode a received packet. Returns null for anything malformed or oversized —
+ *  a peer must not be able to make us throw on the receive path. */
+export declare function decodePacket(data: Uint8Array): ComponentsMessage | InteractionMessage | null;
+/** Validate an inbound interaction (the agent side of the channel). */
+export declare function parseInteractionMessage(raw: unknown): InteractionMessage | null;
+export declare function encodePacket(msg: ComponentsMessage | InteractionMessage): Uint8Array;

package/dist/chat-components.js

@@ -0,0 +1,208 @@
+// Brief 30 — interactive components in chat.
+//
+// An agent declares a form as DATA; this client renders it with its own trusted
+// widgets. No HTML crosses the wire, no URL is fetched, no script runs. The UI's
+// escape-everything policy (dkHtmlEscape) is untouched — components are a
+// separate, whitelisted channel, not an escape hatch from it.
+//
+// Wire shape: a sibling packet, not a field on the chat message. Answering the
+// brief's first open question that way makes "old clients still see the
+// message" a property of the protocol rather than a rule senders must remember:
+// the human-readable text goes out as an ordinary chat message that every
+// existing client already renders, and the component payload rides a custom
+// packet id that any client not built for it never even receives.
+//
+// EVERY value here arrives from a remote peer. The validator is the trust
+// boundary: it whitelists types, caps every count and length, and drops what it
+// does not understand instead of guessing.
+/** Custom packet id for the components channel.
+ *
+ *  160-191 is toxcore's LOSSLESS range — a form must not be silently dropped.
+ *  decentlan owns 161 (session), 162 (dora), 163 (IP), 164 (rate); 165 is the
+ *  first free slot. Clients that don't implement this id never see the packet,
+ *  which is exactly the backward-compatibility story we want. */
+export const PACKET_ID_CHAT_COMPONENTS = 165;
+/** Payload version. Receivers ignore payloads they don't know how to read
+ *  rather than best-effort parsing a future shape. */
+export const COMPONENTS_WIRE_VERSION = 1;
+// --- caps -------------------------------------------------------------------
+// "The client caps sizes/counts itself — a peer must not be able to freeze
+// another peer's UI." (Brief 30, Security). These are deliberately small: a
+// legitimate form is a handful of fields, and anything larger is either a bug
+// or an attempt to hang the renderer.
+export const MAX_COMPONENTS = 12;
+export const MAX_OPTIONS = 40;
+export const MAX_LABEL_LEN = 120;
+export const MAX_ID_LEN = 64;
+export const MAX_VALUE_LEN = 512;
+export const MAX_CUSTOM_ID_LEN = 128;
+/** Hard ceiling on a decoded payload before we even try to parse it. */
+export const MAX_PAYLOAD_BYTES = 64 * 1024;
+/** Types this build actually renders. Anything else is dropped — forward
+ *  compatibility per the brief: an older client must ignore, not break. */
+const RENDERABLE = new Set(["select", "submit", "text"]);
+const str = (v, max) => {
+    if (typeof v !== "string")
+        return undefined;
+    const s = v.trim();
+    if (!s || s.length > max)
+        return undefined;
+    return s;
+};
+/**
+ * Validate a remote components payload. Returns null when nothing renderable
+ * survives — the caller then shows only the text message, which is the correct
+ * degraded state, never an error.
+ */
+export function parseComponentsMessage(raw) {
+    if (!raw || typeof raw !== "object")
+        return null;
+    const o = raw;
+    if (o.type !== "components")
+        return null;
+    if (o.v !== COMPONENTS_WIRE_VERSION)
+        return null;
+    const customId = str(o.custom_id, MAX_CUSTOM_ID_LEN);
+    if (!customId)
+        return null;
+    if (!Array.isArray(o.components))
+        return null;
+    const seen = new Set();
+    const out = [];
+    for (const entry of o.components.slice(0, MAX_COMPONENTS)) {
+        if (!entry || typeof entry !== "object")
+            continue;
+        const c = entry;
+        const type = typeof c.type === "string" ? c.type : "";
+        if (!RENDERABLE.has(type))
+            continue; // unknown/unsupported: drop, don't guess
+        const id = str(c.id, MAX_ID_LEN);
+        if (!id || seen.has(id))
+            continue; // duplicate ids would alias each other's values
+        seen.add(id);
+        const component = { type: type, id };
+        const label = str(c.label, MAX_LABEL_LEN);
+        if (label)
+            component.label = label;
+        if (c.required === true)
+            component.required = true;
+        const placeholder = str(c.placeholder, MAX_LABEL_LEN);
+        if (placeholder)
+            component.placeholder = placeholder;
+        if (type === "select") {
+            if (!Array.isArray(c.options))
+                continue; // a select with no options is unusable
+            const options = [];
+            const seenValues = new Set();
+            for (const raw of c.options.slice(0, MAX_OPTIONS)) {
+                if (!raw || typeof raw !== "object")
+                    continue;
+                const opt = raw;
+                const value = str(opt.value, MAX_VALUE_LEN);
+                if (!value || seenValues.has(value))
+                    continue;
+                seenValues.add(value);
+                options.push({ label: str(opt.label, MAX_LABEL_LEN) ?? value, value });
+            }
+            if (!options.length)
+                continue;
+            component.options = options;
+            // A default that isn't one of the options would submit a value the agent
+            // never offered; ignore it rather than pass it through.
+            const def = str(c.default, MAX_VALUE_LEN);
+            if (def && options.some((o2) => o2.value === def))
+                component.default = def;
+        }
+        if (type === "text") {
+            const def = str(c.default, MAX_VALUE_LEN);
+            if (def)
+                component.default = def;
+        }
+        out.push(component);
+    }
+    // A form with no way to submit can never be completed — treat it as noise.
+    if (!out.some((c) => c.type === "submit"))
+        return null;
+    // ...and a submit button with nothing to fill in is equally pointless.
+    if (!out.some((c) => c.type === "select" || c.type === "text"))
+        return null;
+    return { v: COMPONENTS_WIRE_VERSION, type: "components", custom_id: customId, components: out };
+}
+/** Build the interaction reply. Values are the user's own input, but they are
+ *  bounded here too so a pathological local state can't emit an oversized
+ *  packet at the peer. */
+export function buildInteraction(customId, component, values) {
+    const clean = {};
+    for (const [k, v] of Object.entries(values)) {
+        const key = str(k, MAX_ID_LEN);
+        if (!key)
+            continue;
+        clean[key] = typeof v === "string" ? v.slice(0, MAX_VALUE_LEN) : "";
+    }
+    return {
+        v: COMPONENTS_WIRE_VERSION,
+        type: "interaction",
+        custom_id: customId.slice(0, MAX_CUSTOM_ID_LEN),
+        component: component.slice(0, MAX_ID_LEN),
+        values: clean,
+    };
+}
+/** Decode a received packet. Returns null for anything malformed or oversized —
+ *  a peer must not be able to make us throw on the receive path. */
+export function decodePacket(data) {
+    if (!data?.length || data.length > MAX_PAYLOAD_BYTES)
+        return null;
+    let parsed;
+    try {
+        parsed = JSON.parse(Buffer.from(data).toString("utf-8"));
+    }
+    catch {
+        return null;
+    }
+    const o = parsed;
+    if (!o || typeof o !== "object")
+        return null;
+    if (o.type === "components")
+        return parseComponentsMessage(o);
+    if (o.type === "interaction")
+        return parseInteractionMessage(o);
+    return null;
+}
+/** Validate an inbound interaction (the agent side of the channel). */
+export function parseInteractionMessage(raw) {
+    if (!raw || typeof raw !== "object")
+        return null;
+    const o = raw;
+    if (o.type !== "interaction" || o.v !== COMPONENTS_WIRE_VERSION)
+        return null;
+    const customId = str(o.custom_id, MAX_CUSTOM_ID_LEN);
+    const component = str(o.component, MAX_ID_LEN);
+    if (!customId || !component)
+        return null;
+    const values = {};
+    if (o.values && typeof o.values === "object") {
+        for (const [k, v] of Object.entries(o.values).slice(0, MAX_COMPONENTS)) {
+            const key = str(k, MAX_ID_LEN);
+            if (!key)
+                continue;
+            if (typeof v === "string") {
+                values[key] = v.slice(0, MAX_VALUE_LEN);
+                continue;
+            }
+            // File values are {fileId, name, size} — fileId is the content sha256,
+            // which is what makes the reference exact (Brief 30 §3).
+            if (v && typeof v === "object") {
+                const f = v;
+                const fileId = str(f.fileId, 128);
+                const name = str(f.name, MAX_LABEL_LEN);
+                const size = typeof f.size === "number" && Number.isFinite(f.size) ? f.size : undefined;
+                if (fileId && name && size !== undefined)
+                    values[key] = { fileId, name, size };
+            }
+        }
+    }
+    return { v: COMPONENTS_WIRE_VERSION, type: "interaction", custom_id: customId, component, values };
+}
+export function encodePacket(msg) {
+    return new Uint8Array(Buffer.from(JSON.stringify(msg), "utf-8"));
+}

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.0";
+window.__DK_UI_VERSION="0.1.1";
 const ICON_PATHS = {
   // ---- tab bar (the four must feel like one set) ----
   users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
@@ -354,7 +354,11 @@ function useDaemonData() {
         status: m.dir === "out" ? m.status === "queued" ? "queued" : "read" : void 0,
         // Delivery path: "online" = live session, "offline" = express relay.
         // Incoming messages carry this; the bubble colors them differently.
-        via: m.via
+        via: m.via,
+        // Brief 30: a validated component form, already whitelisted host-side.
+        // Passed through untouched — the renderer treats every string as text,
+        // never markup.
+        components: m.components
       }));
       const withDay = msgs.length ? [{ day: dkDayLabel(arr[0].ts) }].concat(msgs) : [];
       setThreads((t) => Object.assign({}, t, { [peerId]: withDay }));
@@ -1389,8 +1393,184 @@ function dkMarkdownHtml(src) {
 function MarkdownText({ text }) {
   return /* @__PURE__ */ React.createElement("div", { className: "dk-md", dangerouslySetInnerHTML: { __html: dkMarkdownHtml(text) } });
 }
-function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onCall, selMode, selected, onToggleSel, busy }) {
+function DkChatForm({ form, submitted, peer, onSubmit }) {
+  const items = form && form.components || [];
+  const [vals, setVals] = React.useState(() => {
+    const init = {};
+    for (const c of items)
+      if (c.type === "select" || c.type === "text")
+        init[c.id] = c.default || "";
+    return init;
+  });
+  const [files, setFiles] = React.useState({});
+  const [busy, setBusy] = React.useState(false);
+  const [step, setStep] = React.useState("");
+  const [err, setErr] = React.useState("");
+  if (submitted) {
+    return /* @__PURE__ */ React.createElement("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 6,
+      padding: "10px 12px",
+      borderRadius: 12,
+      border: "1px solid var(--line)",
+      background: "var(--bub-them)",
+      opacity: 0.85,
+      minWidth: 240
+    } }, items.filter((c) => window.ChatComponents.INPUT_TYPES.has(c.type)).map((c) => {
+      const raw = submitted.values && submitted.values[c.id] || "";
+      const shown = raw && typeof raw === "object" ? raw.name : ((c.options || []).find((o) => o.value === raw) || {}).label || raw;
+      return /* @__PURE__ */ React.createElement("div", { key: c.id, style: { display: "flex", gap: 8, fontFamily: "var(--mono)", fontSize: 12.5 } }, /* @__PURE__ */ React.createElement("span", { style: { color: "var(--faint)" } }, c.label || c.id), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--text)", fontWeight: 600 } }, shown));
+    }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 2, color: "var(--faint)", fontSize: 11.5, fontFamily: "var(--mono)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, stroke: 3, color: "var(--ok, #46d17f)" }), /* @__PURE__ */ React.createElement("span", null, "submitted")));
+  }
+  const attachments = items.filter((c) => c.type === "attachment");
+  const missing = items.filter((c) => c.required && window.ChatComponents.INPUT_TYPES.has(c.type) && (c.type === "attachment" ? !files[c.id] : !vals[c.id]));
+  const send = async (componentId) => {
+    if (missing.length) {
+      setErr("Fill in: " + missing.map((c) => c.label || c.id).join(", "));
+      return;
+    }
+    setBusy(true);
+    setErr("");
+    try {
+      const CC = window.ChatComponents;
+      const answers = { ...vals };
+      for (const c of attachments) {
+        const f = files[c.id];
+        if (!f)
+          continue;
+        setStep("Sending " + f.name + "\u2026");
+        const up = await DK.sendFile(peer.userId || peer.id, f);
+        if (!up || !up.ok) {
+          setErr(up && up.error || "file send failed");
+          setBusy(false);
+          setStep("");
+          return;
+        }
+        if (!up.fileId) {
+          setErr("This peer received the file inline, which carries no file id \u2014 send it as a normal message instead.");
+          setBusy(false);
+          setStep("");
+          return;
+        }
+        answers[c.id] = { fileId: up.fileId, name: up.name || f.name, size: up.size != null ? up.size : f.size };
+      }
+      setStep("");
+      const text = CC.encodeInteraction(CC.buildInteraction(form.custom_id, componentId, answers));
+      const r = await fetch("/api/chat-send", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ userid: peer.userId || peer.id, text })
+      }).then((x) => x.json());
+      if (!r.ok) {
+        setErr(r.error || "submit failed");
+        setBusy(false);
+        return;
+      }
+      if (onSubmit)
+        onSubmit();
+    } catch (e) {
+      setErr(String(e && e.message || e));
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    padding: "12px 13px",
+    borderRadius: 12,
+    border: "1px solid var(--line)",
+    background: "var(--bub-them)",
+    minWidth: 260
+  } }, items.map((c) => {
+    if (c.type === "select") {
+      return /* @__PURE__ */ React.createElement("label", { key: c.id, style: { display: "flex", flexDirection: "column", gap: 4 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, c.label || c.id, c.required ? " *" : ""), /* @__PURE__ */ React.createElement(
+        "select",
+        {
+          value: vals[c.id] || "",
+          disabled: busy,
+          onChange: (e) => setVals((v) => ({ ...v, [c.id]: e.target.value })),
+          style: {
+            fontFamily: "var(--mono)",
+            fontSize: 13,
+            padding: "7px 8px",
+            borderRadius: 8,
+            border: "1px solid var(--line)",
+            background: "var(--panel)",
+            color: "var(--text)"
+          }
+        },
+        /* @__PURE__ */ React.createElement("option", { value: "" }, c.placeholder || "\u2014"),
+        (c.options || []).map((o) => /* @__PURE__ */ React.createElement("option", { key: o.value, value: o.value }, o.label))
+      ));
+    }
+    if (c.type === "text") {
+      return /* @__PURE__ */ React.createElement("label", { key: c.id, style: { display: "flex", flexDirection: "column", gap: 4 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, c.label || c.id, c.required ? " *" : ""), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "text",
+          value: vals[c.id] || "",
+          disabled: busy,
+          placeholder: c.placeholder || "",
+          onChange: (e) => setVals((v) => ({ ...v, [c.id]: e.target.value })),
+          style: {
+            fontFamily: "var(--mono)",
+            fontSize: 13,
+            padding: "7px 8px",
+            borderRadius: 8,
+            border: "1px solid var(--line)",
+            background: "var(--panel)",
+            color: "var(--text)"
+          }
+        }
+      ));
+    }
+    if (c.type === "attachment") {
+      const picked = files[c.id];
+      const tooBig = picked && c.max_bytes && picked.size > c.max_bytes;
+      return /* @__PURE__ */ React.createElement("label", { key: c.id, style: { display: "flex", flexDirection: "column", gap: 4 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, c.label || c.id, c.required ? " *" : ""), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "file",
+          disabled: busy,
+          accept: (c.accept || []).join(",") || void 0,
+          onChange: (e) => setFiles((f) => ({ ...f, [c.id]: e.target.files && e.target.files[0] })),
+          style: { fontFamily: "var(--mono)", fontSize: 12, color: "var(--text)" }
+        }
+      ), picked && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: tooBig ? "#f59e0b" : "var(--faint)" } }, dkFileSize(picked.size), tooBig ? " \u2014 larger than this form asked for" : ""));
+    }
+    if (c.type === "submit") {
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: c.id,
+          onClick: () => send(c.id),
+          disabled: busy,
+          style: {
+            marginTop: 2,
+            padding: "8px 14px",
+            borderRadius: 10,
+            border: "none",
+            cursor: busy ? "default" : "pointer",
+            background: "var(--accent)",
+            color: "#fff",
+            fontFamily: "var(--mono)",
+            fontSize: 13,
+            fontWeight: 700,
+            opacity: busy ? 0.6 : 1
+          }
+        },
+        busy ? step || "\u2026" : c.label || "Submit"
+      );
+    }
+    return null;
+  }), err && /* @__PURE__ */ React.createElement("div", { style: { color: "var(--danger, #ff6b6b)", fontSize: 11.5, fontFamily: "var(--mono)" } }, err));
+}
+function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onCall, onFormSubmit, answered, selMode, selected, onToggleSel, busy }) {
   const mine = m.from === "me";
+  const read = window.ChatComponents ? window.ChatComponents.readMessage(m.text || "") : { text: m.text, form: null, interaction: null };
+  const submitted = read.form && answered ? answered.get(read.form.custom_id) : null;
   const rtcFile = !mine && !m.file ? dkRtcFileFromText(peer.userId || peer.id, m.text) : null;
   const callRec = !m.file ? dkCallFromText(m.text) : null;
   return /* @__PURE__ */ React.createElement(
@@ -1636,7 +1816,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onC
       lineHeight: 1.4,
       letterSpacing: -0.1,
       wordBreak: "break-word"
-    } }, /* @__PURE__ */ React.createElement(MarkdownText, { text: m.text })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, margin: "3px 3px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, m.time), !mine && m.via && /* @__PURE__ */ React.createElement(
+    } }, /* @__PURE__ */ React.createElement(MarkdownText, { text: read.text })), read.form && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 6 } }, /* @__PURE__ */ React.createElement(DkChatForm, { form: read.form, submitted, peer, onSubmit: onFormSubmit })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, margin: "3px 3px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, m.time), !mine && m.via && /* @__PURE__ */ React.createElement(
       "span",
       {
         title: m.via === "offline" ? "delivered via express relay (offline)" : "delivered over a live session (online)",
@@ -1714,6 +1894,13 @@ function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, o
       return { ...m, file: { ...m.file, ...filePatch[m.id] } };
     });
   }, [baseThread, filePatch]);
+  const answered = React.useMemo(() => {
+    if (!window.ChatComponents)
+      return /* @__PURE__ */ new Map();
+    return window.ChatComponents.answers(
+      thread.filter((m) => m.from === "me").map((m) => m.text || "")
+    );
+  }, [thread]);
   const scrollToBottom = () => {
     const el = scrollRef.current;
     if (el)
@@ -1949,6 +2136,8 @@ ${peer.address}`
         onRetry: doRetry,
         onReveal: doReveal,
         onCall,
+        onFormSubmit: () => onReloadThread && onReloadThread(),
+        answered,
         busy: m.id ? fileBusy[m.id] : void 0,
         selMode,
         selected: sel.has(m.id),

package/dist/desktop/index.html

@@ -49,6 +49,9 @@
 <script src="vendor/qrcode.js"></script>
 <!-- peer-webrtc call engine (bundled IIFE) — exposes window.PeerWebRTC. -->
 <script src="vendor/peer-webrtc.js"></script>
+<!-- chat form schema (bundled IIFE) — exposes window.ChatComponents. The only
+     place the format is interpreted; the backend just carries the message. -->
+<script src="vendor/chat-components.js"></script>
 <!-- The whole desktop app, esbuild-transpiled from src/ui/desktop/*.jsx. -->
 <script src="app.js"></script>
 </body>

package/dist/desktop/vendor/chat-components.js

@@ -0,0 +1,275 @@
+var ChatComponents = (() => {
+  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);
+
+  // node_modules/@decentnetwork/chat-components/dist/index.js
+  var dist_exports = {};
+  __export(dist_exports, {
+    FORM_FENCE: () => FORM_FENCE,
+    INPUT_TYPES: () => INPUT_TYPES,
+    INTERACTION_FENCE: () => INTERACTION_FENCE,
+    MAX_ACCEPT: () => MAX_ACCEPT,
+    MAX_COMPONENTS: () => MAX_COMPONENTS,
+    MAX_CUSTOM_ID_LEN: () => MAX_CUSTOM_ID_LEN,
+    MAX_ID_LEN: () => MAX_ID_LEN,
+    MAX_LABEL_LEN: () => MAX_LABEL_LEN,
+    MAX_OPTIONS: () => MAX_OPTIONS,
+    MAX_PAYLOAD_CHARS: () => MAX_PAYLOAD_CHARS,
+    MAX_VALUE_LEN: () => MAX_VALUE_LEN,
+    WIRE_VERSION: () => WIRE_VERSION,
+    answers: () => answers,
+    buildInteraction: () => buildInteraction,
+    encodeForm: () => encodeForm,
+    encodeInteraction: () => encodeInteraction,
+    parseForm: () => parseForm,
+    parseInteraction: () => parseInteraction,
+    readMessage: () => readMessage
+  });
+  var WIRE_VERSION = 1;
+  var FORM_FENCE = "decent-form";
+  var INTERACTION_FENCE = "decent-interaction";
+  var MAX_COMPONENTS = 12;
+  var MAX_OPTIONS = 40;
+  var MAX_LABEL_LEN = 120;
+  var MAX_ID_LEN = 64;
+  var MAX_VALUE_LEN = 512;
+  var MAX_CUSTOM_ID_LEN = 128;
+  var MAX_PAYLOAD_CHARS = 64 * 1024;
+  var RENDERABLE = /* @__PURE__ */ new Set([
+    "select",
+    "submit",
+    "text",
+    "attachment"
+  ]);
+  var MAX_ACCEPT = 12;
+  var INPUT_TYPES = /* @__PURE__ */ new Set([
+    "select",
+    "text",
+    "attachment"
+  ]);
+  var str = (v, max) => {
+    if (typeof v !== "string")
+      return void 0;
+    const s = v.trim();
+    if (!s || s.length > max)
+      return void 0;
+    return s;
+  };
+  function parseForm(raw) {
+    var _a;
+    if (!raw || typeof raw !== "object")
+      return null;
+    const o = raw;
+    if (o.v !== WIRE_VERSION)
+      return null;
+    const customId = str(o.custom_id, MAX_CUSTOM_ID_LEN);
+    if (!customId)
+      return null;
+    if (!Array.isArray(o.components))
+      return null;
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const entry of o.components.slice(0, MAX_COMPONENTS)) {
+      if (!entry || typeof entry !== "object")
+        continue;
+      const c = entry;
+      const type = typeof c.type === "string" ? c.type : "";
+      if (!RENDERABLE.has(type))
+        continue;
+      const id = str(c.id, MAX_ID_LEN);
+      if (!id || seen.has(id))
+        continue;
+      seen.add(id);
+      const component = { type, id };
+      const label = str(c.label, MAX_LABEL_LEN);
+      if (label)
+        component.label = label;
+      if (c.required === true)
+        component.required = true;
+      const placeholder = str(c.placeholder, MAX_LABEL_LEN);
+      if (placeholder)
+        component.placeholder = placeholder;
+      if (type === "select") {
+        if (!Array.isArray(c.options))
+          continue;
+        const options = [];
+        const seenValues = /* @__PURE__ */ new Set();
+        for (const rawOpt of c.options.slice(0, MAX_OPTIONS)) {
+          if (!rawOpt || typeof rawOpt !== "object")
+            continue;
+          const opt = rawOpt;
+          const value = str(opt.value, MAX_VALUE_LEN);
+          if (!value || seenValues.has(value))
+            continue;
+          seenValues.add(value);
+          options.push({ label: (_a = str(opt.label, MAX_LABEL_LEN)) != null ? _a : value, value });
+        }
+        if (!options.length)
+          continue;
+        component.options = options;
+        const def = str(c.default, MAX_VALUE_LEN);
+        if (def && options.some((o2) => o2.value === def))
+          component.default = def;
+      }
+      if (type === "text") {
+        const def = str(c.default, MAX_VALUE_LEN);
+        if (def)
+          component.default = def;
+      }
+      if (type === "attachment") {
+        if (Array.isArray(c.accept)) {
+          const accept = c.accept.slice(0, MAX_ACCEPT).map((a) => str(a, MAX_LABEL_LEN)).filter((a) => a !== void 0);
+          if (accept.length)
+            component.accept = accept;
+        }
+        if (typeof c.max_bytes === "number" && Number.isFinite(c.max_bytes) && c.max_bytes > 0) {
+          component.max_bytes = Math.floor(c.max_bytes);
+        }
+      }
+      out.push(component);
+    }
+    if (!out.some((c) => c.type === "submit"))
+      return null;
+    if (!out.some((c) => INPUT_TYPES.has(c.type)))
+      return null;
+    return { custom_id: customId, components: out };
+  }
+  function parseInteraction(raw) {
+    if (!raw || typeof raw !== "object")
+      return null;
+    const o = raw;
+    if (o.v !== WIRE_VERSION)
+      return null;
+    const customId = str(o.custom_id, MAX_CUSTOM_ID_LEN);
+    const component = str(o.component, MAX_ID_LEN);
+    if (!customId || !component)
+      return null;
+    const values = {};
+    if (o.values && typeof o.values === "object") {
+      for (const [k, v] of Object.entries(o.values).slice(0, MAX_COMPONENTS)) {
+        const key = str(k, MAX_ID_LEN);
+        if (!key)
+          continue;
+        if (typeof v === "string") {
+          values[key] = v.slice(0, MAX_VALUE_LEN);
+          continue;
+        }
+        if (v && typeof v === "object") {
+          const f = v;
+          const fileId = str(f.fileId, 128);
+          const name = str(f.name, MAX_LABEL_LEN);
+          const size = typeof f.size === "number" && Number.isFinite(f.size) ? f.size : void 0;
+          if (fileId && name && size !== void 0)
+            values[key] = { fileId, name, size };
+        }
+      }
+    }
+    return { custom_id: customId, component, values };
+  }
+  function buildInteraction(customId, component, values) {
+    const clean = {};
+    for (const [k, v] of Object.entries(values)) {
+      const key = str(k, MAX_ID_LEN);
+      if (!key)
+        continue;
+      if (typeof v === "string") {
+        clean[key] = v.slice(0, MAX_VALUE_LEN);
+        continue;
+      }
+      const fileId = str(v == null ? void 0 : v.fileId, 128);
+      const name = str(v == null ? void 0 : v.name, MAX_LABEL_LEN);
+      if (fileId && name && typeof (v == null ? void 0 : v.size) === "number" && Number.isFinite(v.size)) {
+        clean[key] = { fileId, name, size: v.size };
+      }
+    }
+    return { custom_id: customId.slice(0, MAX_CUSTOM_ID_LEN), component: component.slice(0, MAX_ID_LEN), values: clean };
+  }
+  function fence(kind, payload) {
+    return `\`\`\`${kind}
+${JSON.stringify(payload)}
+\`\`\``;
+  }
+  function encodeForm(text, form) {
+    if (!text.trim())
+      throw new Error("a form message needs human-readable text: it is the fallback");
+    return `${text.trim()}
+
+${fence(FORM_FENCE, { v: WIRE_VERSION, ...form })}`;
+  }
+  function encodeInteraction(interaction, summary) {
+    const head = (summary != null ? summary : defaultSummary(interaction)).trim();
+    return `${head}
+
+${fence(INTERACTION_FENCE, { v: WIRE_VERSION, ...interaction })}`;
+  }
+  function defaultSummary(interaction) {
+    const parts = Object.entries(interaction.values).map(([k, v]) => typeof v === "string" ? `${k}: ${v}` : `${k}: ${v.name}`);
+    return parts.length ? parts.join("\uFF0C") : "(\u5DF2\u63D0\u4EA4)";
+  }
+  function extract(text, kind) {
+    const open = `\`\`\`${kind}`;
+    const start = text.indexOf(open);
+    if (start < 0)
+      return null;
+    const bodyStart = text.indexOf("\n", start + open.length);
+    if (bodyStart < 0)
+      return null;
+    const end = text.indexOf("```", bodyStart);
+    if (end < 0)
+      return null;
+    const json = text.slice(bodyStart + 1, end);
+    if (json.length > MAX_PAYLOAD_CHARS)
+      return null;
+    const rest = (text.slice(0, start) + text.slice(end + 3)).trim();
+    return { json, rest };
+  }
+  function parseJson(json) {
+    try {
+      return JSON.parse(json);
+    } catch {
+      return null;
+    }
+  }
+  function readMessage(text) {
+    const raw = typeof text === "string" ? text : "";
+    const formBlock = extract(raw, FORM_FENCE);
+    if (formBlock) {
+      const form = parseForm(parseJson(formBlock.json));
+      return { text: formBlock.rest, form, interaction: null };
+    }
+    const interactionBlock = extract(raw, INTERACTION_FENCE);
+    if (interactionBlock) {
+      return {
+        text: interactionBlock.rest,
+        form: null,
+        interaction: parseInteraction(parseJson(interactionBlock.json))
+      };
+    }
+    return { text: raw, form: null, interaction: null };
+  }
+  function answers(texts) {
+    const out = /* @__PURE__ */ new Map();
+    for (const t of texts) {
+      const it = readMessage(t).interaction;
+      if (it && !out.has(it.custom_id))
+        out.set(it.custom_id, it);
+    }
+    return out;
+  }
+  return __toCommonJS(dist_exports);
+})();

package/dist/embedded-host.js

@@ -209,6 +209,16 @@ export class EmbeddedHost {
             }
         }
     }
+    /** Newest inbound text message from a peer, used to anchor an arriving form. */
+    #latestInbound(peer) {
+        const thread = this.#messages.history(peer)[peer] ?? [];
+        for (let i = thread.length - 1; i >= 0; i--) {
+            const m = thread[i];
+            if (m.dir === "in" && !m.file)
+                return m;
+        }
+        return undefined;
+    }
     subscribe(emit) {
         const fn = (e) => emit(e);
         this.#events.on("event", fn);

package/dist/ipc.d.ts

@@ -19,6 +19,13 @@ export interface IpcRequest {
     origin?: string;
     nonce?: string;
     signal?: unknown;
+    custom_id?: string;
+    component?: string;
+    values?: Record<string, string>;
+    size?: number;
+    dir?: "in" | "out";
+    peer?: string;
+    before?: number;
     [key: string]: unknown;
 }
 export interface IpcResponseOk {

package/dist/server.js

@@ -274,12 +274,16 @@ export function startBeagleServer(opts) {
                 const file = join(DESKTOP_DIR, rel);
                 // Guard against path traversal: resolved file must stay under DESKTOP_DIR.
                 if (existsSync(file) && file.startsWith(DESKTOP_DIR)) {
-                    // app.js AND vendor/peer-webrtc.js change on every rebuild / SDK bump
-                    // → never cache them, or the browser keeps running stale call/UI code
-                    // (this silently defeated every peer-webrtc fix). Only the truly stable
-                    // vendored libs (React UMD) may cache.
+                    // Anything WE build changes on every rebuild / SDK bump → never cache
+                    // it, or the browser keeps running stale code. This silently defeated
+                    // every peer-webrtc fix once, and then caught vendor/chat-components
+                    // the same way, because the rule was an opt-IN list of volatile files.
+                    // Inverted: the allowlist now names the genuinely immutable
+                    // third-party libs, so adding a new bundled module can't quietly opt
+                    // into a year of caching.
+                    const IMMUTABLE = ["react", "qrcode"];
                     const headers = { "content-type": "application/javascript; charset=utf-8" };
-                    const volatile = rel === "app.js" || rel.includes("peer-webrtc");
+                    const volatile = !IMMUTABLE.some((lib) => rel.includes(lib));
                     headers["cache-control"] = volatile ? "no-store" : "public, max-age=31536000";
                     res.writeHead(200, headers);
                     res.end(readFileSync(file));
@@ -792,6 +796,8 @@ export function startBeagleServer(opts) {
                 sendJson(res, 200, r.ok ? (r.data ?? { chats: {} }) : { chats: {} });
                 return;
             }
+            // Brief 30: submit a rendered form. The values are the user's own input;
+            // the host validates and bounds them before they hit the wire.
             if (req.method === "POST" && url === "/api/chat-send") {
                 const { userid, text } = await readBody(req);
                 const r = await opts.call({ op: "chat-send", userid, text });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Beagle — P2P chat, file transfer and calls for regular users, on the Decent Network. No admin privilege required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,6 +25,7 @@
     "start": "node dist/cli.js"
   },
   "dependencies": {
+    "@decentnetwork/chat-components": "^0.1.3",
     "@decentnetwork/lan": "^0.1.256",
     "@decentnetwork/peer": "^0.1.123",
     "@decentnetwork/peer-webrtc": "^0.2.10",