@noodleseed/assistant 1.1.1 → 1.2.0

package/dist/react.cjs

@@ -207,75 +207,1220 @@ function radiusValue(radius) {
   return 14;
 }
 
+// src/browser-context.ts
+function browserClientContext() {
+  let timeZone;
+  try {
+    timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch {
+  }
+  const locale = globalThis.navigator?.language;
+  return {
+    ...locale ? { locale } : {},
+    ...timeZone ? { timeZone } : {}
+  };
+}
+
+// src/events.ts
+function toAssistantClientEvent(event) {
+  const value = event.data;
+  switch (event.event) {
+    case "content":
+      if (typeof value.delta === "string" && hasOptionalTurnId(value)) {
+        return event;
+      }
+      break;
+    case "tool_proposed":
+      if (hasString(value, "id") && hasString(value, "tool") && hasOptionalJson(value.arguments) && hasOptionalString(value.expiresAt) && (value.requiresConfirmation === void 0 || value.requiresConfirmation === true) && hasOptionalTurnId(value)) {
+        return event;
+      }
+      break;
+    case "input_requested":
+      if (hasString(value, "id") && hasString(value, "message") && isRecord(value.requestedSchema) && hasString(value, "expiresAt") && hasOptionalTurnId(value)) {
+        return event;
+      }
+      break;
+    case "interaction_resolved":
+      if (hasString(value, "id") && (value.action === void 0 || isInteractionAction(value.action)) && hasOptionalTurnId(value)) {
+        return event;
+      }
+      break;
+    case "tool_completed":
+      if (hasString(value, "id") && hasString(value, "tool") && isJsonValue(value.result, 0) && (value.replayed === void 0 || value.replayed === true) && hasOptionalTurnId(value)) {
+        return event;
+      }
+      break;
+    case "view_available":
+      if (isViewAvailableDetail(value)) return event;
+      break;
+    case "error":
+      if (hasString(value, "code") && (value.status === void 0 || typeof value.status === "number") && (value.retryable === void 0 || typeof value.retryable === "boolean") && hasOptionalTurnId(value)) {
+        return event;
+      }
+      break;
+    case "done":
+      if (hasOptionalTurnId(value)) return event;
+      break;
+    case "interaction_proposed":
+      if (hasString(value, "id") && (hasString(value, "tool") || hasString(value, "title")) && hasOptionalJson(value.arguments)) {
+        return event;
+      }
+      break;
+  }
+  return { event: "unrecognized", data: { name: event.event, payload: value } };
+}
+function isViewAvailableDetail(value) {
+  return hasString(value, "id") && hasString(value, "tool") && typeof value.resourceUri === "string" && value.resourceUri.startsWith("ui://") && hasOptionalString(value.title) && (value.replayed === void 0 || value.replayed === true) && isJsonValue(value.result, 0) && hasOptionalTurnId(value);
+}
+function hasOptionalTurnId(value) {
+  return hasOptionalString(value.turnId);
+}
+function hasString(value, key) {
+  const entry = value[key];
+  return typeof entry === "string" && entry.length > 0;
+}
+function hasOptionalString(value) {
+  return value === void 0 || typeof value === "string";
+}
+function hasOptionalJson(value) {
+  return value === void 0 || isJsonValue(value, 0);
+}
+function isInteractionAction(value) {
+  return value === "accept" || value === "decline" || value === "cancel";
+}
+function isJsonValue(value, depth) {
+  if (depth > 16) return false;
+  if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (Array.isArray(value)) {
+    return value.length <= 256 && value.every((entry) => isJsonValue(entry, depth + 1));
+  }
+  if (!isRecord(value)) return false;
+  const entries = Object.entries(value);
+  return entries.length <= 256 && entries.every(([, entry]) => isJsonValue(entry, depth + 1));
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/model-context.ts
+var MAX_BYTES = 16 * 1024;
+var MAX_DEPTH = 8;
+var MAX_ENTRIES = 128;
+var SENSITIVE_KEY = /(?:secret|token|api[-_]?key|password|credential|authorization|cookie)/i;
+var CREDENTIAL_SHAPED_TEXT = /(?:-----BEGIN [A-Z ]*PRIVATE KEY-----|\bsk-[A-Za-z0-9_-]{20,}\b|\b(?:bearer|basic)\s+[A-Za-z0-9._~+/=-]{20,}\b|\b[A-Za-z0-9_-]{16,}\.[A-Za-z0-9_-]{16,}\.[A-Za-z0-9_-]{16,}\b)/i;
+function copyAssistantModelContext(update) {
+  const copied = copyJsonValue(update, "$", 0, /* @__PURE__ */ new Set());
+  assertModelContextShape(copied);
+  const encoded = JSON.stringify(copied);
+  if (new TextEncoder().encode(encoded).byteLength > MAX_BYTES) {
+    throw new Error("Model context must not exceed 16 KiB");
+  }
+  return copied;
+}
+function assertModelContextShape(value) {
+  if (!isPlainRecord(value)) throw new Error("Model context must be a JSON object");
+  for (const key of Object.keys(value)) {
+    if (key !== "content" && key !== "structuredContent") {
+      throw new Error(`Model context contains unknown field ${key}`);
+    }
+  }
+  if (value.content !== void 0) {
+    if (!Array.isArray(value.content)) throw new Error("Model context content must be an array");
+    for (const part of value.content) {
+      if (!isPlainRecord(part) || Object.keys(part).some((key) => key !== "type" && key !== "text") || part.type !== "text" || typeof part.text !== "string") {
+        throw new Error("Model context content supports text parts only");
+      }
+    }
+  }
+  if (value.structuredContent !== void 0 && !isPlainRecord(value.structuredContent)) {
+    throw new Error("Model context structuredContent must be an object");
+  }
+}
+function copyJsonValue(value, path, depth, ancestors) {
+  if (depth > MAX_DEPTH) throw new Error(`Model context exceeds maximum depth at ${path}`);
+  if (typeof value === "string") {
+    if (CREDENTIAL_SHAPED_TEXT.test(value)) {
+      throw new Error(`Model context contains credential-shaped text at ${path}`);
+    }
+    return value;
+  }
+  if (value === null || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value !== "object") throw new Error(`Model context contains non-JSON data at ${path}`);
+  if (hasToJsonProperty(value)) {
+    throw new Error(`Model context must not define or inherit toJSON at ${path}`);
+  }
+  const prototype = Object.getPrototypeOf(value);
+  if (Array.isArray(value)) {
+    if (prototype !== Array.prototype) {
+      throw new Error(`Model context contains a non-JSON object at ${path}`);
+    }
+  } else if (prototype !== Object.prototype && prototype !== null) {
+    throw new Error(`Model context contains a non-JSON object at ${path}`);
+  }
+  if (ancestors.has(value)) throw new Error(`Model context contains a cycle at ${path}`);
+  if (Array.isArray(value)) {
+    if (value.length > MAX_ENTRIES) {
+      throw new Error(`Model context has more than 128 entries at ${path}`);
+    }
+    const copy2 = [];
+    ancestors.add(value);
+    for (let index = 0; index < value.length; index += 1) {
+      const entry = Object.hasOwn(value, index) ? value[index] : null;
+      copy2.push(copyJsonValue(entry, `${path}.${index}`, depth + 1, ancestors));
+    }
+    ancestors.delete(value);
+    return copy2;
+  }
+  const entries = Object.entries(value);
+  if (entries.length > MAX_ENTRIES) {
+    throw new Error(`Model context has more than 128 entries at ${path}`);
+  }
+  const copy = /* @__PURE__ */ Object.create(null);
+  ancestors.add(value);
+  for (const [key, entry] of entries) {
+    if (SENSITIVE_KEY.test(key)) {
+      throw new Error(`Model context contains sensitive key ${path}.${key}`);
+    }
+    copy[key] = copyJsonValue(entry, `${path}.${key}`, depth + 1, ancestors);
+  }
+  ancestors.delete(value);
+  return copy;
+}
+function isPlainRecord(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function hasToJsonProperty(value) {
+  let current = value;
+  const visited = /* @__PURE__ */ new Set();
+  while (current !== null && !visited.has(current)) {
+    visited.add(current);
+    if (Object.getOwnPropertyDescriptor(current, "toJSON") !== void 0) return true;
+    current = Object.getPrototypeOf(current);
+  }
+  return false;
+}
+
 // src/transport.ts
 var AssistantTransportError = class extends Error {
   code = "invalid_response";
-  constructor(contentType) {
-    super(`assistant response was not an event stream (content-type: ${contentType || "unknown"})`);
+  constructor(message, options) {
+    super(message, options);
     this.name = "AssistantTransportError";
   }
 };
 async function consumeAssistantEvents(response, onEvent) {
-  let delivered = 0;
-  let sawText = false;
-  const deliver = (event) => {
-    delivered += 1;
-    onEvent(event);
-  };
+  const stream = new AssistantEventStream(onEvent);
   if (!response.body) {
-    const text = await response.text();
-    sawText = text.trim().length > 0;
-    emitFrames(text, deliver, true);
-  } else {
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let pending = "";
-    while (true) {
-      const { done, value } = await reader.read();
-      const chunk = decoder.decode(value, { stream: !done });
-      if (!sawText && chunk.trim().length > 0) sawText = true;
-      pending += chunk;
-      pending = emitFrames(pending, deliver, done);
-      if (done) break;
-    }
-  }
-  if (delivered === 0 && sawText) {
-    throw new AssistantTransportError(response.headers.get("content-type") ?? "");
-  }
-}
-function emitFrames(input, onEvent, flush) {
-  const normalized = input.replaceAll("\r\n", "\n").replaceAll("\r", "\n");
-  const frames = normalized.split("\n\n");
-  const pending = flush ? "" : frames.pop() ?? "";
-  for (const frame of frames) {
-    const event = parseFrame(frame);
-    if (event) onEvent(event);
+    let text;
+    try {
+      text = await response.text();
+    } catch (error) {
+      if (isAbortError(error)) throw error;
+      throw invalidStream("assistant event stream could not be read", error);
+    }
+    stream.push(text);
+    stream.finish(response.headers.get("content-type") ?? "");
+    return;
   }
-  if (flush && frames.length === 0 && normalized.trim()) {
-    const event = parseFrame(normalized);
-    if (event) onEvent(event);
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder("utf-8", { fatal: true });
+  while (true) {
+    let result;
+    try {
+      result = await reader.read();
+    } catch (error) {
+      if (isAbortError(error)) throw error;
+      throw invalidStream("assistant event stream ended unexpectedly", error);
+    }
+    let chunk;
+    try {
+      chunk = decoder.decode(result.value, { stream: !result.done });
+    } catch (error) {
+      throw invalidStream("assistant event stream contained invalid UTF-8", error);
+    }
+    stream.push(chunk);
+    if (result.done) break;
   }
-  return pending;
+  stream.finish(response.headers.get("content-type") ?? "");
 }
+var AssistantEventStream = class {
+  #onEvent;
+  #pending = "";
+  #terminal;
+  constructor(onEvent) {
+    this.#onEvent = onEvent;
+  }
+  push(chunk) {
+    this.#pending += chunk;
+    const protectedCarriageReturn = this.#pending.endsWith("\r");
+    const normalizable = protectedCarriageReturn ? this.#pending.slice(0, -1) : this.#pending;
+    const frames = normalizeLineEndings(normalizable).split("\n\n");
+    this.#pending = `${frames.pop() ?? ""}${protectedCarriageReturn ? "\r" : ""}`;
+    for (const frame of frames) this.#acceptFrame(frame);
+  }
+  finish(contentType) {
+    if (this.#pending.trim().length > 0) {
+      throw invalidStream("assistant event stream ended with an unterminated frame");
+    }
+    if (!this.#terminal) {
+      throw invalidStream(
+        `assistant response did not contain a terminal done event (content-type: ${contentType || "unknown"})`
+      );
+    }
+    this.#onEvent(this.#terminal);
+  }
+  #acceptFrame(frame) {
+    const event = parseFrame(frame);
+    if (!event) return;
+    if (this.#terminal) {
+      throw invalidStream("assistant event stream contained an event after done");
+    }
+    if (event.event === "done") {
+      this.#terminal = event;
+      return;
+    }
+    this.#onEvent(event);
+  }
+};
 function parseFrame(frame) {
-  let event = "message";
+  let event;
   const data = [];
+  let hasFields = false;
   for (const line of frame.split("\n")) {
-    if (line.startsWith(":")) continue;
+    if (!line || line.startsWith(":")) continue;
+    hasFields = true;
     const separator = line.indexOf(":");
     const field = separator < 0 ? line : line.slice(0, separator);
     const value = separator < 0 ? "" : line.slice(separator + 1).replace(/^ /, "");
     if (field === "event") event = value;
     if (field === "data") data.push(value);
   }
-  if (data.length === 0) return void 0;
+  if (!hasFields) return void 0;
+  if (!event || data.length === 0) {
+    throw invalidStream("assistant event stream contained a malformed frame");
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(data.join("\n"));
+  } catch (error) {
+    throw invalidStream("assistant event stream contained malformed JSON", error);
+  }
+  if (event === "done" && !isValidDonePayload(parsed)) {
+    throw invalidStream("assistant event stream contained an invalid done event");
+  }
+  return { event, data: isRecord2(parsed) ? parsed : { value: parsed } };
+}
+function normalizeLineEndings(input) {
+  return input.replaceAll("\r\n", "\n").replaceAll("\r", "\n");
+}
+function isValidDonePayload(value) {
+  return isRecord2(value) && (value.turnId === void 0 || typeof value.turnId === "string" && value.turnId.length > 0);
+}
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function invalidStream(message, cause) {
+  return new AssistantTransportError(message, cause === void 0 ? void 0 : { cause });
+}
+function isAbortError(error) {
+  return error instanceof DOMException && error.name === "AbortError";
+}
+
+// src/client.ts
+var AssistantClientError = class extends Error {
+  detail;
+  constructor(detail, message, options) {
+    super(message, options);
+    this.name = "AssistantClientError";
+    this.detail = detail;
+  }
+};
+var DefaultAssistantClient = class {
+  #sessionEndpoint;
+  #fetch;
+  #listeners = /* @__PURE__ */ new Set();
+  #clientContext;
+  #session;
+  #context;
+  #modelContext;
+  #active;
+  constructor(options) {
+    if (!options.sessionEndpoint) throw new Error("sessionEndpoint is required");
+    this.#sessionEndpoint = options.sessionEndpoint;
+    this.#fetch = options.fetch ?? ((input, init) => globalThis.fetch(input, init));
+    this.#context = options.context ? { ...options.context } : void 0;
+    this.#modelContext = options.modelContext ? copyAssistantModelContext(options.modelContext) : void 0;
+    this.#clientContext = options.clientContext;
+  }
+  subscribe(listener) {
+    this.#listeners.add(listener);
+    return () => this.#listeners.delete(listener);
+  }
+  async sendMessage(text) {
+    const message = text.trim();
+    if (!message) return;
+    await this.#singleFlight(async (signal) => {
+      await this.#sendTurn(message, true, signal, this.#modelContext);
+    });
+  }
+  async respond(id, resolution) {
+    if (!id) {
+      throw clientError("invalid_request", "interaction id is required", false);
+    }
+    await this.#singleFlight(async (signal) => {
+      const session = this.#session;
+      if (!session) {
+        throw clientError("confirmation_expired", "assistant session is not active", false);
+      }
+      const modernEndpoint = session.endpoints.interactions;
+      if (!modernEndpoint && resolution.action !== "accept") {
+        throw clientError(
+          "unsupported_service",
+          "the assistant service does not support declining or cancelling interactions",
+          false
+        );
+      }
+      const endpoint = modernEndpoint ?? session.endpoints.toolConfirmations;
+      const body = modernEndpoint ? {
+        id,
+        action: resolution.action,
+        ...resolution.action === "accept" && resolution.content !== void 0 ? { content: resolution.content } : {}
+      } : { id };
+      this.#emit({ event: "interaction_started", data: { id, action: resolution.action } });
+      const response = await this.#request(
+        endpoint,
+        {
+          method: "POST",
+          headers: authorizedHeaders(session.token, "text/event-stream"),
+          body: JSON.stringify(body),
+          signal
+        },
+        "confirmation_failed"
+      );
+      if (response.status === 401) {
+        this.#session = void 0;
+        this.#emit({ event: "session_expired", data: {} });
+      }
+      if (!response.ok) {
+        const serverCode = await readStableErrorCode(response);
+        const expired = response.status === 401 || response.status === 409;
+        throw clientError(
+          serverCode ?? (expired ? "confirmation_expired" : "confirmation_failed"),
+          `Assistant interaction failed (${response.status})`,
+          false,
+          response.status
+        );
+      }
+      await this.#consume(response);
+      this.#emit({ event: "interaction_completed", data: { id, action: resolution.action } });
+    });
+  }
+  updateContext(context) {
+    this.#context = { ...context };
+    this.#emit({ event: "context_changed", data: { context: this.#context } });
+  }
+  updateModelContext(update) {
+    this.#modelContext = copyAssistantModelContext(update);
+    this.#emit({ event: "model_context_changed", data: { modelContext: this.#modelContext } });
+  }
+  resetSession() {
+    this.#session = void 0;
+    this.#emit({ event: "session_reset", data: {} });
+  }
+  abort() {
+    this.#active?.abort();
+  }
+  async #sendTurn(message, mayRetry, signal, modelContext) {
+    const session = this.#session ?? await this.#createSession(signal);
+    if (mayRetry) this.#emit({ event: "message_started", data: { message } });
+    const clientContext = this.#resolveClientContext();
+    const response = await this.#request(
+      session.endpoints.turns,
+      {
+        method: "POST",
+        headers: authorizedHeaders(session.token, "text/event-stream"),
+        body: JSON.stringify({
+          message,
+          ...clientContext ? { clientContext } : {},
+          ...modelContext ? { modelContext } : {}
+        }),
+        signal
+      },
+      "turn_failed"
+    );
+    if (response.status === 401 && mayRetry) {
+      this.#session = void 0;
+      this.#emit({ event: "session_expired", data: {} });
+      await this.#sendTurn(message, false, signal, modelContext);
+      return;
+    }
+    if (!response.ok) {
+      throw clientError(
+        "turn_failed",
+        `Assistant turn failed (${response.status})`,
+        false,
+        response.status
+      );
+    }
+    await this.#consume(response);
+    this.#emit({ event: "message_completed", data: {} });
+  }
+  #resolveClientContext() {
+    let value;
+    try {
+      value = typeof this.#clientContext === "function" ? this.#clientContext() : this.#clientContext;
+    } catch (error) {
+      throw clientError(
+        "turn_failed",
+        "Assistant client context provider failed",
+        false,
+        void 0,
+        {
+          cause: error
+        }
+      );
+    }
+    if (!value) return void 0;
+    const context = {
+      ...typeof value.locale === "string" && value.locale ? { locale: value.locale } : {},
+      ...typeof value.timeZone === "string" && value.timeZone ? { timeZone: value.timeZone } : {}
+    };
+    return Object.keys(context).length > 0 ? context : void 0;
+  }
+  async #createSession(signal) {
+    const response = await this.#request(
+      this.#sessionEndpoint,
+      {
+        method: "POST",
+        headers: { Accept: "application/json", "Content-Type": "application/json" },
+        body: JSON.stringify(this.#context ? { context: this.#context } : {}),
+        credentials: "same-origin",
+        signal
+      },
+      "session_failed"
+    );
+    if (!response.ok) {
+      throw clientError(
+        "session_failed",
+        `Assistant session failed (${response.status})`,
+        true,
+        response.status
+      );
+    }
+    let value;
+    try {
+      value = await response.json();
+    } catch (error) {
+      throw clientError(
+        "session_failed",
+        "Assistant session returned invalid JSON",
+        true,
+        void 0,
+        {
+          cause: error
+        }
+      );
+    }
+    const session = parseSession(value);
+    this.#session = session;
+    this.#emit({
+      event: "session_started",
+      data: {
+        expiresAt: session.expiresAt,
+        ...session.configuration ? { configuration: session.configuration } : {}
+      }
+    });
+    return session;
+  }
+  async #consume(response) {
+    let streamError;
+    try {
+      await consumeAssistantEvents(response, (event) => {
+        const clientEvent = toAssistantClientEvent(event);
+        this.#emit(clientEvent);
+        if (clientEvent.event !== "error" || typeof clientEvent.data.code !== "string") return;
+        streamError = {
+          code: clientEvent.data.code,
+          ...typeof clientEvent.data.status === "number" ? { status: clientEvent.data.status } : {},
+          retryable: clientEvent.data.retryable === true
+        };
+      });
+    } catch (error) {
+      if (error instanceof AssistantTransportError) {
+        throw clientError(error.code, error.message, false, void 0, { cause: error });
+      }
+      throw error;
+    }
+    if (streamError) {
+      throw clientError(
+        streamError.code,
+        `Assistant stream failed (${streamError.code})`,
+        streamError.retryable,
+        streamError.status
+      );
+    }
+  }
+  async #request(input, init, failureCode) {
+    try {
+      return await this.#fetch(input, init);
+    } catch (error) {
+      if (init.signal?.aborted) throw error;
+      throw clientError(failureCode, "Assistant request failed", true, void 0, { cause: error });
+    }
+  }
+  async #singleFlight(operation) {
+    if (this.#active) {
+      throw clientError("request_in_progress", "an assistant request is already in progress", true);
+    }
+    const controller = new AbortController();
+    this.#active = controller;
+    try {
+      await operation(controller.signal);
+    } catch (error) {
+      if (controller.signal.aborted) {
+        throw clientError("request_aborted", "assistant request was aborted", true, void 0, {
+          cause: error
+        });
+      }
+      throw error;
+    } finally {
+      this.#active = void 0;
+    }
+  }
+  #emit(event) {
+    for (const listener of this.#listeners) {
+      try {
+        listener(event);
+      } catch {
+      }
+    }
+  }
+};
+function createAssistantClient(options) {
+  return new DefaultAssistantClient(options);
+}
+function authorizedHeaders(token, accept) {
+  return {
+    Authorization: `Bearer ${token}`,
+    "Content-Type": "application/json",
+    Accept: accept
+  };
+}
+function parseSession(value) {
+  if (!isRecord3(value) || !isRecord3(value.endpoints)) {
+    throw clientError("session_failed", "Assistant session response is invalid", true);
+  }
+  const interactions = value.endpoints.interactions;
+  if (typeof value.token !== "string" || typeof value.expiresAt !== "string" || typeof value.endpoints.turns !== "string" || typeof value.endpoints.toolConfirmations !== "string" || interactions !== void 0 && typeof interactions !== "string") {
+    throw clientError("session_failed", "Assistant session response is invalid", true);
+  }
+  return {
+    token: value.token,
+    expiresAt: value.expiresAt,
+    endpoints: {
+      turns: value.endpoints.turns,
+      toolConfirmations: value.endpoints.toolConfirmations,
+      ...typeof interactions === "string" ? { interactions } : {}
+    },
+    ...isRecord3(value.configuration) ? { configuration: value.configuration } : {}
+  };
+}
+function isRecord3(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+async function readStableErrorCode(response) {
+  let value;
   try {
-    return { event, data: JSON.parse(data.join("\n")) };
+    value = await response.json();
   } catch {
     return void 0;
   }
+  if (!isRecord3(value) || typeof value.code !== "string") return void 0;
+  return /^[A-Za-z0-9_.-]{1,64}$/.test(value.code) ? value.code : void 0;
+}
+function clientError(code, message, retryable, status, options) {
+  return new AssistantClientError(
+    { code, ...status === void 0 ? {} : { status }, retryable },
+    message,
+    options
+  );
 }
 
+// src/input-request-card.ts
+function createInputRequestCard(options) {
+  const card = document.createElement("section");
+  card.className = "tool-proposal input-request";
+  card.dataset.kind = "input";
+  const form = document.createElement("form");
+  const heading = document.createElement("strong");
+  heading.textContent = options.message;
+  form.append(heading);
+  const properties = record(options.requestedSchema.properties);
+  const required = new Set(
+    Array.isArray(options.requestedSchema.required) ? options.requestedSchema.required.filter(
+      (value) => typeof value === "string"
+    ) : []
+  );
+  const controls = /* @__PURE__ */ new Map();
+  const touched = /* @__PURE__ */ new WeakSet();
+  for (const [name, rawProperty] of Object.entries(properties)) {
+    const property = record(rawProperty);
+    const label = document.createElement("label");
+    const caption = document.createElement("span");
+    caption.textContent = typeof property.title === "string" && property.title ? property.title : humanize(name);
+    const control = createControl(name, property, required.has(name));
+    const markTouched = () => {
+      touched.add(control);
+      updateControlValidity(control, property, required.has(name), touched.has(control));
+    };
+    control.addEventListener("input", markTouched);
+    control.addEventListener("change", markTouched);
+    label.append(caption, control);
+    form.append(label);
+    controls.set(name, control);
+  }
+  const actions = document.createElement("div");
+  actions.className = "proposal-actions";
+  const submit = button(options.labels.submit, "submit");
+  const decline = button(options.labels.decline, "button");
+  const cancel = button(options.labels.cancel, "button");
+  const buttons = [submit, decline, cancel];
+  const resolve = async (response) => {
+    buttons.forEach((item) => {
+      item.disabled = true;
+    });
+    try {
+      await options.respond(response);
+    } catch (error) {
+      buttons.forEach((item) => {
+        item.disabled = false;
+      });
+      throw error;
+    }
+  };
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    for (const [name, control] of controls) {
+      updateControlValidity(
+        control,
+        record(properties[name]),
+        required.has(name),
+        touched.has(control)
+      );
+    }
+    if (!form.reportValidity()) return;
+    void resolve({
+      action: "accept",
+      content: readContent(controls, properties, required, touched)
+    }).catch(() => {
+    });
+  });
+  decline.addEventListener("click", () => {
+    void resolve({ action: "decline" }).catch(() => {
+    });
+  });
+  cancel.addEventListener("click", () => {
+    void resolve({ action: "cancel" }).catch(() => {
+    });
+  });
+  actions.append(submit, decline, cancel);
+  form.append(actions);
+  card.append(form);
+  return card;
+}
+function createControl(name, property, required) {
+  const choices = stringChoices(property);
+  if (choices || property.type === "array") {
+    const select = document.createElement("select");
+    select.name = name;
+    select.multiple = property.type === "array";
+    const availableChoices = choices ?? arrayChoices(property);
+    if (!select.multiple && (!required || !availableChoices.some((choice) => choice.value === property.default))) {
+      select.append(placeholderOption(availableChoices));
+    }
+    for (const choice of availableChoices) {
+      select.append(option(choice.title, choice.value));
+    }
+    applySelectDefault(select, property.default);
+    updateControlValidity(select, property, required, false);
+    return select;
+  }
+  const input = document.createElement("input");
+  input.name = name;
+  input.type = inputType(property);
+  input.required = required && inputNeedsNonEmptyValue(property);
+  if (property.type === "integer") input.step = "1";
+  if (typeof property.minimum === "number") input.min = String(property.minimum);
+  if (typeof property.maximum === "number") input.max = String(property.maximum);
+  if (typeof property.minLength === "number") input.minLength = property.minLength;
+  if (typeof property.maxLength === "number") input.maxLength = property.maxLength;
+  if (property.format === "date-time") input.step = "0.001";
+  applyInputDefault(input, property);
+  return input;
+}
+function readContent(controls, properties, required, touched) {
+  const content = {};
+  for (const [name, control] of controls) {
+    const property = record(properties[name]);
+    if (control instanceof HTMLSelectElement && control.multiple) {
+      const values = [...control.selectedOptions].map((option2) => option2.value);
+      if (shouldIncludeArray(property, required.has(name), touched.has(control), values.length)) {
+        content[name] = values;
+      }
+    } else if (control instanceof HTMLInputElement && control.type === "checkbox") {
+      if (required.has(name) || hasDefault(property) || touched.has(control)) {
+        content[name] = control.checked;
+      }
+    } else if (control instanceof HTMLSelectElement) {
+      if (!isPlaceholderSelected(control)) content[name] = control.value;
+    } else if (control.value !== "" || property.type === "string" && (required.has(name) || hasDefault(property) || touched.has(control))) {
+      if (property.format === "date-time") {
+        const value = dateTimeLocalToRfc3339(control.value);
+        if (value !== void 0) content[name] = value;
+      } else {
+        content[name] = property.type === "number" || property.type === "integer" ? Number(control.value) : control.value;
+      }
+    }
+  }
+  return content;
+}
+function updateControlValidity(control, property, required, touched) {
+  control.setCustomValidity("");
+  if (!(control instanceof HTMLSelectElement)) return;
+  if (!control.multiple) {
+    control.required = required;
+    if (required && isPlaceholderSelected(control)) {
+      control.setCustomValidity("Please select an option.");
+    }
+    return;
+  }
+  const count = control.selectedOptions.length;
+  const included = shouldIncludeArray(property, required, touched, count);
+  const minimum = integerBound(property.minItems);
+  const maximum = integerBound(property.maxItems);
+  control.required = included && minimum !== void 0 && minimum > 0;
+  if (included && minimum !== void 0 && count < minimum) {
+    control.setCustomValidity(`Select at least ${minimum} option${minimum === 1 ? "" : "s"}.`);
+  } else if (included && maximum !== void 0 && count > maximum) {
+    control.setCustomValidity(`Select at most ${maximum} option${maximum === 1 ? "" : "s"}.`);
+  }
+}
+function shouldIncludeArray(property, required, touched, selectedCount) {
+  return required || hasDefault(property) || touched || selectedCount > 0;
+}
+function hasDefault(property) {
+  return Object.hasOwn(property, "default");
+}
+function integerBound(value) {
+  return typeof value === "number" && Number.isInteger(value) && value >= 0 ? value : void 0;
+}
+function inputNeedsNonEmptyValue(property) {
+  if (property.type === "number" || property.type === "integer") return true;
+  if (property.type !== "string") return false;
+  return property.format === "date" || property.format === "date-time" || property.format === "email" || property.format === "uri" || typeof property.minLength === "number" && property.minLength > 0;
+}
+function isPlaceholderSelected(select) {
+  return select.selectedOptions[0]?.dataset.placeholder === "true";
+}
+function stringChoices(property) {
+  if (Array.isArray(property.enum) && property.enum.every((value) => typeof value === "string")) {
+    return property.enum.map((value) => ({ value, title: value }));
+  }
+  return titledChoices(property.oneOf) ?? titledChoices(property.anyOf);
+}
+function arrayChoices(property) {
+  return stringChoices(record(property.items)) ?? [];
+}
+function inputType(property) {
+  if (property.type === "boolean") return "checkbox";
+  if (property.type === "number" || property.type === "integer") return "number";
+  if (property.format === "date") return "date";
+  if (property.format === "date-time") return "datetime-local";
+  if (property.format === "email") return "email";
+  if (property.format === "uri") return "url";
+  return "text";
+}
+function titledChoices(value) {
+  if (!Array.isArray(value)) return void 0;
+  const choices = value.map((item) => record(item));
+  if (!choices.every((item) => typeof item.const === "string")) return void 0;
+  return choices.map((item) => ({
+    value: String(item.const),
+    title: typeof item.title === "string" ? item.title : String(item.const)
+  }));
+}
+function applySelectDefault(select, value) {
+  if (select.multiple) {
+    const selected = new Set(
+      Array.isArray(value) ? value.filter((item) => typeof item === "string") : []
+    );
+    for (const item of select.options) item.selected = selected.has(item.value);
+    return;
+  }
+  if (typeof value === "string") select.value = value;
+}
+function applyInputDefault(input, property) {
+  const value = property.default;
+  if (property.type === "boolean") {
+    if (typeof value === "boolean") input.checked = value;
+    return;
+  }
+  if (property.type === "number" || property.type === "integer") {
+    if (typeof value === "number" && Number.isFinite(value)) input.value = String(value);
+    return;
+  }
+  if (typeof value !== "string") return;
+  if (property.format === "date-time") {
+    input.value = rfc3339ToDateTimeLocal(value) ?? "";
+    return;
+  }
+  input.value = value;
+}
+function rfc3339ToDateTimeLocal(value) {
+  const instant = new Date(value);
+  if (Number.isNaN(instant.valueOf())) return void 0;
+  return [
+    String(instant.getFullYear()).padStart(4, "0"),
+    "-",
+    twoDigits(instant.getMonth() + 1),
+    "-",
+    twoDigits(instant.getDate()),
+    "T",
+    twoDigits(instant.getHours()),
+    ":",
+    twoDigits(instant.getMinutes()),
+    ":",
+    twoDigits(instant.getSeconds()),
+    ".",
+    String(instant.getMilliseconds()).padStart(3, "0")
+  ].join("");
+}
+function dateTimeLocalToRfc3339(value) {
+  const instant = new Date(value);
+  return Number.isNaN(instant.valueOf()) ? void 0 : instant.toISOString();
+}
+function twoDigits(value) {
+  return String(value).padStart(2, "0");
+}
+function button(label, type) {
+  const element = document.createElement("button");
+  element.type = type;
+  element.textContent = label;
+  return element;
+}
+function option(label, value) {
+  const element = document.createElement("option");
+  element.textContent = label;
+  element.value = value;
+  return element;
+}
+function placeholderOption(choices) {
+  let value = "";
+  while (choices.some((choice) => choice.value === value)) value += "\0";
+  const element = option("", value);
+  element.dataset.placeholder = "true";
+  return element;
+}
+function humanize(value) {
+  const words = value.replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll(/[_-]+/g, " ");
+  return words ? `${words[0]?.toUpperCase() ?? ""}${words.slice(1)}` : value;
+}
+function record(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+
+// src/interaction-card.ts
+function createInteractionCard(options) {
+  const card = document.createElement("section");
+  card.className = "tool-proposal";
+  const label = document.createElement("strong");
+  label.textContent = options.tool;
+  card.append(label);
+  if (options.arguments && Object.keys(options.arguments).length > 0) {
+    card.append(createArgumentList(options.arguments));
+  }
+  const actions = document.createElement("div");
+  actions.className = "proposal-actions";
+  const buttons = [];
+  for (const [labelText, action] of [
+    [options.labels.accept, "accept"],
+    [options.labels.decline, "decline"],
+    [options.labels.cancel, "cancel"]
+  ]) {
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.textContent = labelText;
+    buttons.push(button2);
+    button2.addEventListener("click", () => {
+      for (const candidate of buttons) candidate.disabled = true;
+      void options.respond(action).catch(() => {
+        for (const candidate of buttons) candidate.disabled = false;
+      });
+    });
+    actions.append(button2);
+  }
+  card.append(actions);
+  return card;
+}
+function createArgumentList(arguments_) {
+  const details = document.createElement("dl");
+  details.className = "proposal-arguments";
+  for (const [name, value] of Object.entries(arguments_)) {
+    const term = document.createElement("dt");
+    term.textContent = humanizeArgumentName(name);
+    const description = document.createElement("dd");
+    description.textContent = formatArgumentValue(value);
+    details.append(term, description);
+  }
+  return details;
+}
+function humanizeArgumentName(value) {
+  const words = value.replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll(/[_-]+/g, " ");
+  return words ? `${words[0]?.toUpperCase() ?? ""}${words.slice(1)}` : value;
+}
+function formatArgumentValue(value) {
+  if (value === null) return "None";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value) ?? "";
+}
+
+// src/element-event-controller.ts
+var AssistantElementEventController = class {
+  #host;
+  #assistantBody;
+  #completedTool;
+  #proposalCards = /* @__PURE__ */ new Map();
+  constructor(host) {
+    this.#host = host;
+  }
+  handle(event) {
+    if (event.event === "view_available") {
+      this.#host.element.dispatchEvent(
+        new CustomEvent("assistant-view-available", {
+          detail: event.data
+        })
+      );
+      return;
+    }
+    if (event.event === "unrecognized") return;
+    const { event: name, data } = event;
+    if (name === "session_started") {
+      if (isRecord4(data.configuration)) {
+        this.#host.applyConfiguration(data.configuration);
+      }
+      this.#host.element.dispatchEvent(
+        new CustomEvent("assistant-session-started", {
+          detail: { expiresAt: String(data.expiresAt ?? "") }
+        })
+      );
+      return;
+    }
+    if (name === "session_expired") {
+      this.#host.element.dispatchEvent(new CustomEvent("assistant-session-expired"));
+      return;
+    }
+    if (name === "session_reset") {
+      this.resetConversation();
+      return;
+    }
+    if (name === "context_changed") {
+      this.#host.element.dispatchEvent(
+        new CustomEvent("assistant-context-changed", { detail: { context: data.context } })
+      );
+      return;
+    }
+    if (name === "model_context_changed") {
+      this.#host.element.dispatchEvent(
+        new CustomEvent("assistant-model-context-changed", {
+          detail: { modelContext: data.modelContext }
+        })
+      );
+      return;
+    }
+    if (name === "message_started") {
+      this.#assistantBody = void 0;
+      this.#host.appendMessage("user", String(data.message ?? ""));
+      this.#host.element.dispatchEvent(new CustomEvent("assistant-message-started"));
+      return;
+    }
+    if (name === "message_completed") {
+      this.#assistantBody = void 0;
+      this.#host.element.dispatchEvent(new CustomEvent("assistant-message-completed"));
+      return;
+    }
+    if (name === "interaction_started") {
+      this.#assistantBody = void 0;
+      this.#completedTool = void 0;
+      return;
+    }
+    if (name === "interaction_completed") {
+      this.#finishInteraction(String(data.id ?? ""), String(data.action ?? "accept"));
+      return;
+    }
+    if (name === "content") {
+      const body = this.#assistantBody ?? this.#host.appendMessage("assistant", "");
+      this.#assistantBody = body;
+      if (body) body.textContent += String(data.delta ?? "");
+      return;
+    }
+    if (name === "tool_proposed" || name === "interaction_proposed") {
+      this.#appendToolProposal(
+        String(data.id ?? ""),
+        String(data.tool ?? ("title" in data ? data.title : void 0) ?? "Action"),
+        isRecord4(data.arguments) ? data.arguments : void 0
+      );
+      return;
+    }
+    if (name === "input_requested" && isRecord4(data.requestedSchema)) {
+      this.#appendInputRequest(
+        String(data.id ?? ""),
+        String(data.message ?? "More information is required"),
+        data.requestedSchema
+      );
+      return;
+    }
+    if (name === "tool_completed") {
+      this.#completedTool = data;
+      return;
+    }
+    if (name === "error") {
+      this.#host.dispatchError({
+        code: String(data.code ?? "stream_failed"),
+        ...typeof data.status === "number" ? { status: data.status } : {},
+        retryable: data.retryable === true
+      });
+    }
+  }
+  resetConversation() {
+    this.#host.messages()?.replaceChildren();
+    this.#proposalCards.clear();
+    this.#assistantBody = void 0;
+    this.#completedTool = void 0;
+    this.#host.element.dispatchEvent(new CustomEvent("assistant-session-reset"));
+  }
+  #finishInteraction(id, action) {
+    if (this.#completedTool && !this.#assistantBody) {
+      this.#host.appendMessage("assistant", JSON.stringify(this.#completedTool.result ?? {}) ?? "");
+    }
+    this.#proposalCards.get(id)?.remove();
+    this.#proposalCards.delete(id);
+    if (action === "accept") {
+      this.#host.element.dispatchEvent(
+        new CustomEvent("assistant-tool-completed", { detail: { id } })
+      );
+    }
+    this.#host.element.dispatchEvent(
+      new CustomEvent("assistant-interaction-resolved", { detail: { id, action } })
+    );
+    this.#assistantBody = void 0;
+    this.#completedTool = void 0;
+  }
+  #appendToolProposal(id, tool, arguments_) {
+    const messages = this.#host.messages();
+    if (!messages || !id) return;
+    this.#proposalCards.get(id)?.remove();
+    const labels = this.#host.labels();
+    const card = createInteractionCard({
+      tool,
+      ...arguments_ ? { arguments: arguments_ } : {},
+      labels: {
+        accept: labels.confirm,
+        decline: "Decline",
+        cancel: labels.cancel
+      },
+      respond: (action) => this.#host.respond(id, { action })
+    });
+    messages.append(card);
+    this.#proposalCards.set(id, card);
+    this.#host.element.dispatchEvent(
+      new CustomEvent("assistant-tool-proposed", { detail: { id, tool, arguments: arguments_ } })
+    );
+  }
+  #appendInputRequest(id, message, requestedSchema) {
+    const messages = this.#host.messages();
+    if (!messages || !id) return;
+    this.#proposalCards.get(id)?.remove();
+    const labels = this.#host.labels();
+    const card = createInputRequestCard({
+      message,
+      requestedSchema,
+      labels: {
+        submit: labels.confirm,
+        decline: "Decline",
+        cancel: labels.cancel
+      },
+      respond: (response) => this.#host.respond(id, response)
+    });
+    messages.append(card);
+    this.#proposalCards.set(id, card);
+    this.#host.element.dispatchEvent(
+      new CustomEvent("assistant-input-requested", {
+        detail: { id, message, requestedSchema }
+      })
+    );
+  }
+};
+function isRecord4(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/element-styles.ts
+var ASSISTANT_ELEMENT_STYLES = `<style>
+  :host { color-scheme: light dark; font-family: var(--ns-assistant-font-family, var(--ns-assistant-default-font-family)); font-size: var(--ns-assistant-base-font-size, var(--ns-assistant-default-base-font-size)); line-height: var(--ns-assistant-line-height, var(--ns-assistant-default-line-height)); z-index: var(--ns-assistant-z-index, var(--ns-assistant-default-z-index)); }
+  :host([data-mode="floating"]) { position: fixed; bottom: 24px; right: 24px; }
+  :host([data-mode="floating"][data-position="bottom-left"]) { right: auto; left: 24px; }
+  .launcher { width: 54px; height: 54px; border: 0; border-radius: var(--ns-assistant-launcher-radius, var(--ns-assistant-default-launcher-radius)); color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); cursor: pointer; }
+  .launcher img { width: 24px; height: 24px; object-fit: contain; }
+  .panel { display: none; width: min(var(--ns-assistant-panel-width, var(--ns-assistant-default-panel-width)), calc(100vw - 32px)); min-height: var(--ns-assistant-min-height, var(--ns-assistant-default-min-height)); max-height: min(var(--ns-assistant-max-height, var(--ns-assistant-default-max-height)), calc(100vh - 32px)); overflow: hidden; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); }
+  :host([open]) .panel { display: grid; grid-template-rows: auto auto 1fr auto; }
+  :host([open]) .launcher { display: none; }
+  header { display: flex; gap: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); align-items: center; padding: calc(var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)) * 1.2); border-bottom: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); }
+  header strong { flex: 1; }
+  .brand-logo { display: block; max-width: 120px; max-height: 28px; object-fit: contain; }
+  button { font: inherit; }
+  .close, .send { border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); cursor: pointer; }
+  .close { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; font-size: 24px; }
+  .welcome { padding: calc(var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)) * 1.5); }
+  .welcome h2 { margin: 0; font-size: 1.25em; }
+  .welcome p { margin: 6px 0 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
+  .suggested-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); }
+  .suggested-prompts:empty { display: none; }
+  .suggested-prompts button { padding: 7px 10px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: transparent; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 999px; cursor: pointer; }
+  .messages { min-height: 120px; padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); overflow: auto; }
+  .message { width: fit-content; max-width: 84%; margin: 8px 0; padding: 10px 12px; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); white-space: pre-wrap; }
+  .message .avatar { float: left; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; object-fit: cover; }
+  .message time { display: block; margin-top: 4px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .75em; }
+  .message.user { margin-left: auto; color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  .tool-proposal { display: grid; gap: 10px; margin: 10px 0; padding: 12px; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); }
+  .proposal-arguments { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 4px 10px; margin: 0; font-size: .9em; }
+  .proposal-arguments dt { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
+  .proposal-arguments dd { margin: 0; overflow-wrap: anywhere; }
+  .proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
+  .tool-proposal button { padding: 8px 10px; border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); cursor: pointer; }
+  .tool-proposal button:first-of-type { color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  .input-request form { display: grid; gap: 10px; padding: 0; border: 0; }
+  .input-request label { display: grid; gap: 4px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .9em; }
+  .input-request input, .input-request select { width: 100%; box-sizing: border-box; padding: 8px 10px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); font: inherit; }
+  .input-request input[type="checkbox"] { width: auto; justify-self: start; }
+  form { display: flex; gap: 8px; align-items: end; padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); border-top: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); }
+  textarea { flex: 1; resize: none; padding: 10px 12px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); border: 0; border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); font: inherit; }
+  textarea:focus-visible, button:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus)); outline-offset: 2px; }
+  .send { padding: 10px 14px; color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  .legal { display: flex; gap: 12px; justify-content: center; padding: 0 12px 10px; font-size: .8em; }
+  .legal:empty { display: none; }
+  .legal a { color: var(--ns-assistant-link, var(--ns-assistant-default-link)); }
+  :host([data-density="compact"]) .welcome { padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); }
+  @media (max-width: 640px) { :host([mobile-fullscreen][open]) { inset: 0; } :host([mobile-fullscreen][open]) .panel { width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0; } }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
+  @media (max-width: 560px) { :host([data-mode="floating"]) { inset: auto 12px 12px; } :host([open]) .panel { width: calc(100vw - 24px); max-height: calc(100vh - 24px); } }
+</style>`;
+
 // src/element.ts
 var ASSISTANT_TAG_NAME = "noodle-assistant";
 var HTMLElementBase = globalThis.HTMLElement ?? class {
@@ -283,11 +1428,29 @@ var HTMLElementBase = globalThis.HTMLElement ?? class {
 var NoodleAssistantElement = class extends HTMLElementBase {
   static observedAttributes = ["open", "theme"];
   #appearance = resolveAppearance();
-  #session;
+  #client;
+  #clientEndpoint = "";
+  #unsubscribeClient;
   #messages;
   #media;
   #context;
+  #modelContext;
   sessionEndpoint = "";
+  #events = new AssistantElementEventController({
+    element: this,
+    messages: () => this.#messages,
+    appendMessage: (role, text) => this.#appendMessage(role, text),
+    applyConfiguration: (configuration) => {
+      this.#appearance = resolveAppearance(configuration);
+      this.#render();
+    },
+    labels: () => ({
+      confirm: this.#appearance.labels.confirm,
+      cancel: this.#appearance.labels.cancel
+    }),
+    respond: (id, response) => this.respond(id, response),
+    dispatchError: (detail) => this.#dispatchError(detail)
+  });
   connectedCallback() {
     if (!this.shadowRoot) this.attachShadow({ mode: "open" });
     if (!this.sessionEndpoint) this.sessionEndpoint = this.getAttribute("session-endpoint") ?? "";
@@ -300,6 +1463,11 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.dispatchEvent(new CustomEvent("assistant-ready"));
   }
   disconnectedCallback() {
+    this.#client?.abort();
+    this.#unsubscribeClient?.();
+    this.#client = void 0;
+    this.#clientEndpoint = "";
+    this.#unsubscribeClient = void 0;
     this.#media?.removeEventListener("change", this.#handleSystemTheme);
     document.removeEventListener("keydown", this.#handleDocumentKeydown);
     document.removeEventListener("pointerdown", this.#handleDocumentPointerDown);
@@ -322,71 +1490,44 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.shadowRoot?.querySelector("textarea")?.focus();
   }
   resetSession() {
-    this.#session = void 0;
-    this.#messages?.replaceChildren();
-    this.dispatchEvent(new CustomEvent("assistant-session-reset"));
+    if (this.#client) {
+      this.#client.resetSession();
+    } else {
+      this.#events.resetConversation();
+    }
   }
   updateContext(context) {
     this.#context = { ...context };
-    this.dispatchEvent(new CustomEvent("assistant-context-changed", { detail: { context } }));
+    if (this.#client) {
+      this.#client.updateContext(this.#context);
+    } else {
+      this.dispatchEvent(
+        new CustomEvent("assistant-context-changed", { detail: { context: this.#context } })
+      );
+    }
+  }
+  /** Replace the compact renderer summary attached to subsequent message turns. */
+  updateModelContext(update) {
+    this.#modelContext = copyAssistantModelContext(update);
+    if (this.#client) {
+      this.#client.updateModelContext(this.#modelContext);
+    } else {
+      this.dispatchEvent(
+        new CustomEvent("assistant-model-context-changed", {
+          detail: { modelContext: this.#modelContext }
+        })
+      );
+    }
   }
   async sendMessage(text) {
     const message = text.trim();
     if (!message) return;
-    if (!this.#session) this.#session = await this.#createSession();
-    this.#appendMessage("user", message);
-    this.dispatchEvent(new CustomEvent("assistant-message-started"));
-    await this.#sendTurn(message, true);
-  }
-  async #sendTurn(message, mayRetry) {
-    if (!this.#session) this.#session = await this.#createSession();
-    const response = await fetch(this.#session.endpoints.turns, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${this.#session.token}`,
-        "Content-Type": "application/json",
-        Accept: "text/event-stream"
-      },
-      body: JSON.stringify({ message })
-    });
-    if (response.status === 401 && mayRetry) {
-      this.#session = void 0;
-      this.dispatchEvent(new CustomEvent("assistant-session-expired"));
-      await this.#sendTurn(message, false);
-      return;
-    }
-    if (!response.ok) {
-      this.#dispatchError({ code: "turn_failed", status: response.status, retryable: false });
-      throw new Error(`Assistant turn failed (${response.status})`);
-    }
-    let assistantBody;
     try {
-      await consumeAssistantEvents(response, (event) => {
-        if (event.event === "content") {
-          const body = assistantBody ?? this.#appendMessage("assistant", "");
-          assistantBody = body;
-          if (body) body.textContent += String(event.data.delta ?? "");
-        }
-        if (event.event === "tool_proposed") {
-          this.#appendToolProposal(
-            String(event.data.id ?? ""),
-            String(event.data.tool ?? "Action")
-          );
-        }
-        if (event.event === "error") {
-          this.#dispatchError({
-            code: String(event.data.code ?? "stream_failed"),
-            retryable: event.data.retryable === true
-          });
-        }
-      });
+      await this.#ensureClient().sendMessage(message);
     } catch (error) {
-      if (error instanceof AssistantTransportError) {
-        this.#dispatchError({ code: error.code, retryable: false });
-      }
+      this.#dispatchClientError(error, "turn_failed");
       throw error;
     }
-    this.dispatchEvent(new CustomEvent("assistant-message-completed"));
   }
   /**
    * Every listener the element attaches to its own DOM must go through this guard: internal UI
@@ -399,46 +1540,15 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     });
   }
   async confirmTool(id) {
-    if (!this.#session) {
-      this.#dispatchError({ code: "confirmation_expired", retryable: false });
-      throw new Error("assistant session is not active");
-    }
-    const response = await fetch(this.#session.endpoints.toolConfirmations, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${this.#session.token}`,
-        "Content-Type": "application/json",
-        Accept: "text/event-stream"
-      },
-      body: JSON.stringify({ id })
-    });
-    if (!response.ok) {
-      const expired = response.status === 401 || response.status === 409;
-      if (response.status === 401) {
-        this.#session = void 0;
-        this.dispatchEvent(new CustomEvent("assistant-session-expired"));
-      }
-      this.#dispatchError({
-        code: expired ? "confirmation_expired" : "confirmation_failed",
-        status: response.status,
-        retryable: false
-      });
-      throw new Error(`Assistant confirmation failed (${response.status})`);
-    }
-    let completed;
-    let narrationBody;
-    await consumeAssistantEvents(response, (event) => {
-      if (event.event === "tool_completed") completed = event.data;
-      if (event.event === "content") {
-        const body = narrationBody ?? this.#appendMessage("assistant", "");
-        narrationBody = body;
-        if (body) body.textContent += String(event.data.delta ?? "");
-      }
-    });
-    if (completed && !narrationBody) {
-      this.#appendMessage("assistant", JSON.stringify(completed.result ?? {}));
+    await this.respond(id, { action: "accept" });
+  }
+  async respond(id, response) {
+    try {
+      await this.#ensureClient().respond(id, response);
+    } catch (error) {
+      this.#dispatchClientError(error, "confirmation_failed");
+      throw error;
     }
-    this.dispatchEvent(new CustomEvent("assistant-tool-completed", { detail: { id } }));
   }
   #handleSystemTheme = () => this.#applyTheme();
   #handleDocumentKeydown = (event) => {
@@ -451,39 +1561,20 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       this.close();
     }
   };
-  async #createSession() {
-    if (!this.sessionEndpoint) throw new Error("sessionEndpoint is required");
-    let response;
-    try {
-      response = await fetch(this.sessionEndpoint, {
-        method: "POST",
-        headers: { Accept: "application/json", "Content-Type": "application/json" },
-        body: JSON.stringify(this.#context ? { context: this.#context } : {}),
-        credentials: "same-origin"
-      });
-    } catch (error) {
-      this.#dispatchError({ code: "session_failed", retryable: true });
-      throw error;
-    }
-    if (!response.ok) {
-      this.#dispatchError({ code: "session_failed", status: response.status, retryable: true });
-      throw new Error(`Assistant session failed (${response.status})`);
-    }
-    let session;
-    try {
-      session = await response.json();
-    } catch (error) {
-      this.#dispatchError({ code: "session_failed", retryable: true });
-      throw error;
-    }
-    if (session.configuration) {
-      this.#appearance = resolveAppearance(session.configuration);
-      this.#render();
-    }
-    this.dispatchEvent(
-      new CustomEvent("assistant-session-started", { detail: { expiresAt: session.expiresAt } })
-    );
-    return session;
+  #ensureClient() {
+    if (this.#client && this.#clientEndpoint === this.sessionEndpoint) return this.#client;
+    this.#client?.abort();
+    this.#unsubscribeClient?.();
+    const client = createAssistantClient({
+      sessionEndpoint: this.sessionEndpoint,
+      ...this.#context ? { context: this.#context } : {},
+      clientContext: browserClientContext,
+      ...this.#modelContext ? { modelContext: this.#modelContext } : {}
+    });
+    this.#client = client;
+    this.#clientEndpoint = this.sessionEndpoint;
+    this.#unsubscribeClient = client.subscribe((event) => this.#events.handle(event));
+    return client;
   }
   #appendMessage(role, text) {
     if (!this.#messages) return void 0;
@@ -514,31 +1605,10 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #dispatchError(detail) {
     this.dispatchEvent(new CustomEvent("assistant-error", { detail }));
   }
-  #appendToolProposal(id, tool) {
-    if (!this.#messages || !id) return;
-    const card = document.createElement("section");
-    card.className = "tool-proposal";
-    const label = document.createElement("strong");
-    label.textContent = tool;
-    const confirm = document.createElement("button");
-    confirm.type = "button";
-    confirm.textContent = this.#appearance.labels.confirm;
-    confirm.addEventListener("click", () => {
-      confirm.disabled = true;
-      void this.confirmTool(id).catch(() => {
-        confirm.disabled = false;
-        this.dispatchEvent(
-          new CustomEvent("assistant-error", { detail: { code: "confirmation_failed" } })
-        );
-      });
-    });
-    const cancel = document.createElement("button");
-    cancel.type = "button";
-    cancel.textContent = this.#appearance.labels.cancel;
-    cancel.addEventListener("click", () => card.remove());
-    card.append(label, confirm, cancel);
-    this.#messages.append(card);
-    this.dispatchEvent(new CustomEvent("assistant-tool-proposed", { detail: { id, tool } }));
+  #dispatchClientError(error, fallbackCode) {
+    this.#dispatchError(
+      error instanceof AssistantClientError ? error.detail : { code: fallbackCode, retryable: false }
+    );
   }
   #resolvedMode() {
     const configured = this.getAttribute("theme") ?? this.#appearance.theme.defaultMode;
@@ -579,6 +1649,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   }
   #render() {
     if (!this.shadowRoot) return;
+    const conversation = this.#messages ? [...this.#messages.childNodes] : [];
     const appearance = this.#appearance;
     this.setAttribute("role", "complementary");
     this.setAttribute("aria-label", appearance.brand.name);
@@ -588,7 +1659,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.dataset.position = appearance.layout.position;
     this.dataset.density = appearance.layout.density;
     this.toggleAttribute("mobile-fullscreen", appearance.layout.mobileFullscreen);
-    this.shadowRoot.innerHTML = `${styles}
+    this.shadowRoot.innerHTML = `${ASSISTANT_ELEMENT_STYLES}
       <button class="launcher" type="button" aria-label="${escapeAttribute(appearance.labels.open)}"><slot name="launcher-icon">\u2726</slot></button>
       <section class="panel" aria-label="${escapeAttribute(appearance.brand.name)}">
         <header><slot name="header-leading"></slot><img class="brand-logo" alt=""><strong></strong><slot name="header-actions"></slot><button class="close" type="button" aria-label="${escapeAttribute(appearance.labels.close)}">\xD7</button></header>
@@ -627,11 +1698,11 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     queryRequired(this.shadowRoot, ".send").textContent = appearance.labels.send;
     const prompts = queryRequired(this.shadowRoot, ".suggested-prompts");
     for (const prompt of appearance.suggestedPrompts) {
-      const button = document.createElement("button");
-      button.type = "button";
-      button.textContent = prompt;
-      button.addEventListener("click", () => this.#sendGuarded(prompt));
-      prompts.append(button);
+      const button2 = document.createElement("button");
+      button2.type = "button";
+      button2.textContent = prompt;
+      button2.addEventListener("click", () => this.#sendGuarded(prompt));
+      prompts.append(button2);
     }
     if (!appearance.behavior.showLauncher)
       queryRequired(this.shadowRoot, ".launcher").hidden = true;
@@ -651,6 +1722,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       legal.append(link);
     }
     this.#messages = this.shadowRoot.querySelector(".messages") ?? void 0;
+    this.#messages?.append(...conversation);
     this.shadowRoot.querySelector(".launcher")?.addEventListener("click", () => this.open());
     this.shadowRoot.querySelector(".close")?.addEventListener("click", () => this.close());
     this.shadowRoot.querySelector("form")?.addEventListener("submit", (event) => {
@@ -683,47 +1755,6 @@ function queryRequired(root, selector) {
   if (!element) throw new Error(`assistant renderer is missing ${selector}`);
   return element;
 }
-var styles = `<style>
-  :host { color-scheme: light dark; font-family: var(--ns-assistant-font-family, var(--ns-assistant-default-font-family)); font-size: var(--ns-assistant-base-font-size, var(--ns-assistant-default-base-font-size)); line-height: var(--ns-assistant-line-height, var(--ns-assistant-default-line-height)); z-index: var(--ns-assistant-z-index, var(--ns-assistant-default-z-index)); }
-  :host([data-mode="floating"]) { position: fixed; bottom: 24px; right: 24px; }
-  :host([data-mode="floating"][data-position="bottom-left"]) { right: auto; left: 24px; }
-  .launcher { width: 54px; height: 54px; border: 0; border-radius: var(--ns-assistant-launcher-radius, var(--ns-assistant-default-launcher-radius)); color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); cursor: pointer; }
-  .launcher img { width: 24px; height: 24px; object-fit: contain; }
-  .panel { display: none; width: min(var(--ns-assistant-panel-width, var(--ns-assistant-default-panel-width)), calc(100vw - 32px)); min-height: var(--ns-assistant-min-height, var(--ns-assistant-default-min-height)); max-height: min(var(--ns-assistant-max-height, var(--ns-assistant-default-max-height)), calc(100vh - 32px)); overflow: hidden; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); }
-  :host([open]) .panel { display: grid; grid-template-rows: auto auto 1fr auto; }
-  :host([open]) .launcher { display: none; }
-  header { display: flex; gap: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); align-items: center; padding: calc(var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)) * 1.2); border-bottom: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); }
-  header strong { flex: 1; }
-  .brand-logo { display: block; max-width: 120px; max-height: 28px; object-fit: contain; }
-  button { font: inherit; }
-  .close, .send { border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); cursor: pointer; }
-  .close { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; font-size: 24px; }
-  .welcome { padding: calc(var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)) * 1.5); }
-  .welcome h2 { margin: 0; font-size: 1.25em; }
-  .welcome p { margin: 6px 0 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
-  .suggested-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); }
-  .suggested-prompts:empty { display: none; }
-  .suggested-prompts button { padding: 7px 10px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: transparent; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 999px; cursor: pointer; }
-  .messages { min-height: 120px; padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); overflow: auto; }
-  .message { width: fit-content; max-width: 84%; margin: 8px 0; padding: 10px 12px; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); white-space: pre-wrap; }
-  .message .avatar { float: left; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; object-fit: cover; }
-  .message time { display: block; margin-top: 4px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .75em; }
-  .message.user { margin-left: auto; color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
-  .tool-proposal { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin: 10px 0; padding: 12px; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); }
-  .tool-proposal button { padding: 8px 10px; border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); cursor: pointer; }
-  .tool-proposal button:first-of-type { color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
-  form { display: flex; gap: 8px; align-items: end; padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); border-top: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); }
-  textarea { flex: 1; resize: none; padding: 10px 12px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); border: 0; border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); font: inherit; }
-  textarea:focus-visible, button:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus)); outline-offset: 2px; }
-  .send { padding: 10px 14px; color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
-  .legal { display: flex; gap: 12px; justify-content: center; padding: 0 12px 10px; font-size: .8em; }
-  .legal:empty { display: none; }
-  .legal a { color: var(--ns-assistant-link, var(--ns-assistant-default-link)); }
-  :host([data-density="compact"]) .welcome { padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); }
-  @media (max-width: 640px) { :host([mobile-fullscreen][open]) { inset: 0; } :host([mobile-fullscreen][open]) .panel { width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0; } }
-  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
-  @media (max-width: 560px) { :host([data-mode="floating"]) { inset: auto 12px 12px; } :host([open]) .panel { width: calc(100vw - 24px); max-height: calc(100vh - 24px); } }
-</style>`;
 
 // src/react.ts
 var NoodleAssistant = (0, import_react.forwardRef)(