@alexkroman1/aai-ui 0.12.3 → 0.13.0

package/dist/types.js

@@ -1,5 +1,36 @@
-//#region types.ts
-/** Microphone buffer duration in seconds before sending to the server. */
-const MIC_BUFFER_SECONDS = .1;
+import { CAPTURE_STOP_ACK_TIMEOUT_MS, CLIENT_AUDIO_LEAD_MS, HEARD_AUDIO_LAG_MS, MIC_BUFFER_SECONDS, MIC_SEND_MAX_BUFFERED_BYTES, MIC_SILENCE_PROBE_MS, PACER_BURST_MS, PIPELINE_PLAYBACK_GRACE_MS, PLAYBACK_BUFFER_SECONDS, PLAYBACK_CONCEAL_FADE_MS, PLAYBACK_CONCEAL_FLOOR, PLAYBACK_DONE_MAX_WAIT_MS, PLAYBACK_DONE_POLL_MS, PLAYBACK_FILL_MS, PLAYBACK_PROGRESS_INTERVAL_MS } from "@alexkroman1/aai/internal";
+//#region src/types.ts
+/**
+* `getUserMedia` audio constraints for every capture path in this package.
+*
+* Defined once because four copies of this object drifted apart trivially, and
+* the flags are not cosmetic — each one rewrites the signal before STT (and
+* before the sync path's energy VAD) ever sees it:
+*
+* - **`autoGainControl: false`** — AGC continuously retargets level, which
+*   means riding the noise floor up through silence. An energy VAD calibrated
+*   against a moving floor is calibrated against nothing.
+* - **`noiseSuppression: false`** / **`voiceIsolation: false`** — both discard
+*   signal to make speech sound cleaner to a human, and both can gate a quiet
+*   room to *exact* zeros, which is also what a dead microphone looks like
+*   (see `MIC_SILENCE_PROBE_MS`).
+* - **`echoCancellation: true`** — this one stays on. The mic is open while
+*   the agent speaks (barge-in needs it), so without AEC the agent hears
+*   itself and interrupts its own reply.
+*
+* Cast because `voiceIsolation` is newer than TypeScript's DOM lib.
+*
+* On `@alexkroman1/aai-ui/internal` rather than the root barrel, for the same
+* reason as the audio budgets above: it is a framework decision with no
+* `mountClient()` field to set, and the root is the authoring surface. A custom
+* chrome that bypasses `mountClient()` and opens its own microphone reaches it there
+* alongside the providers it also needs.
+*/
+const VOICE_CAPTURE_CONSTRAINTS = {
+	echoCancellation: true,
+	noiseSuppression: false,
+	autoGainControl: false,
+	voiceIsolation: false
+};
 //#endregion
-export { MIC_BUFFER_SECONDS };
+export { CAPTURE_STOP_ACK_TIMEOUT_MS, CLIENT_AUDIO_LEAD_MS, HEARD_AUDIO_LAG_MS, MIC_BUFFER_SECONDS, MIC_SEND_MAX_BUFFERED_BYTES, MIC_SILENCE_PROBE_MS, PACER_BURST_MS, PIPELINE_PLAYBACK_GRACE_MS, PLAYBACK_BUFFER_SECONDS, PLAYBACK_CONCEAL_FADE_MS, PLAYBACK_CONCEAL_FLOOR, PLAYBACK_DONE_MAX_WAIT_MS, PLAYBACK_DONE_POLL_MS, PLAYBACK_FILL_MS, PLAYBACK_PROGRESS_INTERVAL_MS, VOICE_CAPTURE_CONSTRAINTS };

package/dist/upload/files.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Turning a form's `File`s into stored upload ids, pauses and all.
+ *
+ * Split out of `use-workflow-form.ts` for the 500-line cap, and the seam is a
+ * real one: that module is the two HOOKS and the state between them, where this
+ * is the walk over a submitted input — which is the only part of it that knows
+ * what a `File` is, holds a loop, and survives being re-entered.
+ *
+ * `_`-internal. `useWorkflowSubmit` is the only caller; `useWorkflowStream` sends
+ * one file rather than walking an input and shares only the gate underneath both
+ * (`upload/session.ts`).
+ */
+import type { UploadParallelOption } from "@alexkroman1/aai/workflow-api";
+import type { UploadStatus } from "../use-workflow-form.ts";
+import type { WorkflowApi } from "../workflow-client.ts";
+import { type UploadGate } from "./session.ts";
+/**
+ * What one submission's uploads know about themselves, across pauses.
+ *
+ * Held by the hook rather than by the walk below, because the walk RE-RUNS: a
+ * pause unwinds nothing, so resuming re-enters `uploadFiles` with the same input
+ * and the same session, and every file whose bytes are already in is skipped by
+ * `stored` rather than sent again.
+ *
+ * Which is also why the ids live here. A resumable upload is one whose id
+ * outlives the attempt that began it — that is the whole mechanism — so an id
+ * minted per attempt would make each round a fresh upload of the whole file.
+ */
+export type UploadSession = {
+    /**
+     * What this form's remembered ids are filed under (`upload/recall.ts`).
+     *
+     * The workflow's name, so two forms on one page do not read each other's
+     * entries. It is not a SAFETY boundary and does not need to be — a recalled id
+     * is checked against the agent before anything is sent to it — it just keeps a
+     * form from spending a round trip on another form's upload.
+     */
+    scope: string;
+    /** The id each file is being stored under, minted once. */
+    ids: Map<File, string>;
+    /** Files whose every byte has landed, by the id they landed under. */
+    stored: Map<File, string>;
+    /**
+     * Files that have had an attempt, so the next one must claim the id as its own.
+     *
+     * `sendThroughGate` tracks this itself WITHIN one file's attempts. What this
+     * carries is the attempt made by a page load that is gone: an id recalled from
+     * storage was claimed by whoever minted it, so the first attempt of this load is
+     * a resume even though this load has sent nothing.
+     */
+    tried: Set<File>;
+    /** The person's pause. */
+    gate: UploadGate;
+};
+/** A fresh session for one submission of `workflow`. */
+export declare function createUploadSession(workflow: string): UploadSession;
+/**
+ * Replace every `File` in a submitted form with the id of a stored upload,
+ * reporting how far each one has got.
+ *
+ * Sequential rather than `Promise.all`: these are large bodies, and a form with
+ * two 200 MB recordings should send them one after another rather than compete
+ * for the same connection. That is also what makes a single bar honest — one
+ * file is in flight at a time, and `index`/`count` say which.
+ *
+ * Anything that is not a `File` (or an array of them) passes through untouched,
+ * so this is invisible to every form that has none — including one whose values
+ * are not an object at all, which `submit` accepts.
+ *
+ * ## `uploadStream`, not `upload`, and the id is the reason
+ *
+ * The difference between the two calls is only who mints the id — and that is
+ * exactly what decides whether an interrupted upload can be picked up again. An
+ * `upload` mints its own at the END and hands it back, so a caller whose upload
+ * died has nothing to name what was stored and no choice but to send the file
+ * again. A `uploadStream` is told the id up front, so the windows already in the
+ * store are addressable, which is what both a pause and a server restart need.
+ *
+ * Nothing else about the submission changes: the run is still started after the
+ * last byte lands, so the incomplete record a streamed upload leaves along the
+ * way is one nobody reads.
+ */
+export declare function uploadFiles(api: WorkflowApi, input: unknown, report: (status: UploadStatus) => void, parallel: UploadParallelOption | undefined, session: UploadSession): Promise<unknown>;

package/dist/upload/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The workflow hooks' upload machinery, as the rest of the package sees it:
+ * claiming an id per file and transferring it (`files.ts`), the pause gate
+ * (`session.ts`, `pause.ts`), the reload recall (`recall.ts`) and the report
+ * coalescing (`report.ts`). Everything not re-exported here is private to
+ * `upload/` — guard-invariants rule 37 fails an import from outside it that
+ * names any module but this one.
+ *
+ * @module
+ */
+export { createUploadSession, type UploadSession, uploadFiles } from "./files.ts";
+export { useUploadPause } from "./pause.ts";
+export { recallUploadId, rememberUploadId } from "./recall.ts";
+export { coalesceUploadReports } from "./report.ts";
+export { createUploadGate, randomUploadId, sendThroughGate, type UploadGate, } from "./session.ts";

package/dist/upload/pause.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The two buttons a page puts over a live upload, bound to whichever gate the
+ * submission is currently holding.
+ *
+ * `useWorkflowSubmit` and `useWorkflowStream` both own an {@link UploadGate} and
+ * both reported the pause the same way: park the gate, then fold `paused` into
+ * the status the bar is already drawing. Folded rather than replaced, because
+ * everything else about that status — which file, how far, of how many — is
+ * still true. Two copies of that rule are two copies that can stop agreeing
+ * about what a paused bar says.
+ */
+import { type Dispatch, type SetStateAction } from "react";
+import type { UploadStatus } from "../use-workflow-form.ts";
+import type { UploadGate } from "./session.ts";
+/** What {@link useUploadPause} returns — see {@link WorkflowSubmission}. */
+export type UploadPause = {
+    /** Stop the bytes in flight and hold the uploader. */
+    pauseUpload: () => void;
+    /** Send whatever the store is still missing. */
+    resumeUpload: () => void;
+};
+/**
+ * Bind pause/resume to the live submission's gate.
+ *
+ * @param getGate - Reads the gate out of the caller's ref, so the callbacks stay
+ *   stable across submissions rather than being re-created per gate.
+ * @param setUpload - The status setter the progress bar renders from.
+ *
+ * @internal
+ */
+export declare function useUploadPause(getGate: () => UploadGate | undefined, setUpload: Dispatch<SetStateAction<UploadStatus | undefined>>): UploadPause;

package/dist/upload/recall.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Where an upload's ID survives a page RELOAD.
+ *
+ * A streamed upload is resumable because its id outlives the attempt that began
+ * it — `upload/files.ts` says so, and `upload/session.ts` turns that into a
+ * pause a person can press. Both of them hold the id in MEMORY: the walk's
+ * `UploadSession` lives in a `useRef`, so a reload was the one interruption the
+ * mechanism could not survive. Everything else was already in place — the windows
+ * were still in the store, the agent could still name them
+ * (`UploadInfo.ranges`), and the id was minted in the browser — and the browser
+ * had thrown away the only name for them. So a person who refreshed at 90% of a
+ * 200 MB recording sent the whole file again, which is the one interruption they
+ * are most likely to cause on purpose.
+ *
+ * This is that name, written down. It is what tus-js-client's `urlStorage` and
+ * Uppy's Golden Retriever sell, in the shape `session/resume-store.ts` already
+ * uses for a session id.
+ *
+ * ## A FINGERPRINT, because a `File` has no name a page can address
+ *
+ * A file from a picker carries no path and no handle, so the key is what
+ * tus-js-client fingerprints on: size, last-modified, type and name. Two
+ * different files agreeing on all four is the case this cannot tell apart — and
+ * the reason NOTHING here decides to resume. `upload/files.ts` asks the agent
+ * what the id actually holds before sending a byte to it, so a wrong hit costs
+ * one `GET` and a fresh id rather than a corrupted upload.
+ *
+ * ## `sessionStorage`, deliberately
+ *
+ * The same call `session/resume-store.ts` makes, for a reason that happens to be
+ * stronger here: a reload and a same-tab navigation are exactly what this is for,
+ * and an id from yesterday names an upload the agent's sweep has very likely
+ * already collected. A tab is also the boundary the walk itself has — two tabs
+ * uploading the same recording are two submissions.
+ *
+ * Every access is guarded. Storage throws outright in Safari private mode and
+ * under a blocking policy, and an upload that cannot be REMEMBERED must degrade
+ * to the upload we would have done anyway rather than failing to start.
+ */
+/**
+ * The id this file was last being stored under in this tab, if any.
+ *
+ * A hit is a CANDIDATE and never a decision — see the module doc.
+ *
+ * @internal
+ */
+export declare function recallUploadId(scope: string, file: File): string | undefined;
+/**
+ * Remember the id this file is being stored under.
+ *
+ * Called before the first byte leaves rather than after the last one lands: the
+ * reload this exists for happens in between, and an id written at the end is an
+ * id written for the one case that did not need it.
+ *
+ * @internal
+ */
+export declare function rememberUploadId(scope: string, file: File, id: string): void;
+/**
+ * Forget it: the agent holds nothing resumable under this id.
+ *
+ * The other half of the agent deciding. Without it a swept upload is re-read on
+ * every submission of the same file for the life of the tab, which is a round
+ * trip spent learning the same 404.
+ *
+ * @internal
+ */
+export declare function forgetUploadId(scope: string, file: File): void;

package/dist/upload/report.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Rate-limiting the upload progress report to what a bar can actually show.
+ *
+ * `onProgress` fires on every `XMLHttpRequest` progress event, and the parts
+ * uploader runs `UPLOAD_PART_CONCURRENCY` of those at once — so the raw rate is
+ * on the order of a hundred reports a second, sustained for the whole upload,
+ * which for the multi-hundred-megabyte files this feature exists for is
+ * minutes. Each one is a `setState`, and each re-renders the enclosing `<Form>`
+ * subtree: every field `<WorkflowFields>` rendered, the bar, and
+ * `<WorkflowProgress>` beside it. Progress events arrive as separate
+ * macrotasks, so React's automatic batching does not merge them.
+ *
+ * The bar has at most ~100 visually distinct states. Dropping a report that
+ * would render identically is therefore free, and it is the whole mechanism —
+ * no timer, so the LAST report of a burst is never left unrendered waiting for
+ * a window to close.
+ */
+import type { UploadStatus } from "../use-workflow-form.ts";
+/**
+ * Wrap an `UploadStatus` setter so redundant reports never reach React.
+ *
+ * Clearing the status (`undefined`) always passes and resets the comparison —
+ * it ends one file's bar, and the next file must not be coalesced against the
+ * previous one's last frame.
+ */
+export declare function coalesceUploadReports(set: (status: UploadStatus | undefined) => void): (status: UploadStatus | undefined) => void;

package/dist/upload/session.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Driving ONE resumable upload from a page: its id, and the gate a person can
+ * close.
+ *
+ * The SDK already survives the server going away — a round that fails for a
+ * reason that looks like an outage re-enters itself with `resume: true` and sends
+ * only the windows that are missing (`aai/sdk/_upload-resume.ts`). This is the
+ * same mechanism turned around and handed to the PERSON: pausing is an outage
+ * they caused, resuming is the round after it, and the store cannot tell the two
+ * apart because there is nothing to tell apart.
+ *
+ * ## Why a gate rather than a boolean
+ *
+ * Pausing has to do two things that a `paused` flag cannot: stop the bytes that
+ * are already on the wire, and hold the loop that would send the next ones. So it
+ * is an `AbortController` and a promise — abort what is in flight, and park the
+ * uploader on `settle()` until somebody opens the gate again.
+ *
+ * The controller is REPLACED on resume rather than reused, because an aborted
+ * signal stays aborted; a caller therefore has to read {@link UploadGate.signal}
+ * fresh for each attempt rather than capturing it once.
+ *
+ * ## The loop this is built for
+ *
+ * ```ts no-check
+ * while (!gate.cancelled) {
+ *   await gate.settle();
+ *   if (gate.cancelled) break;
+ *   try {
+ *     await api.uploadStream(id, file, { signal: gate.signal, resume: tried });
+ *     break;
+ *   } catch (err) {
+ *     // An abort that is not a cancel is a PAUSE: go back and wait.
+ *     if (!isAbort(err) || gate.cancelled) throw err;
+ *   }
+ * }
+ * ```
+ *
+ * **The catch keys off the abort, not off `gate.paused`,** and that is the one
+ * subtle part. Pausing and immediately resuming — a double-click, or a person
+ * changing their mind inside the round trip — resolves the gate before the
+ * rejection this abort caused has even landed, so a `paused` check would read
+ * `false` and rethrow an `AbortError` as though the upload had failed. Every
+ * abort reaching that catch was caused by this gate, so every one of them is a
+ * pause unless the gate was cancelled outright.
+ */
+/** A person's pause, as the uploader sees it. */
+export type UploadGate = {
+    /** Whether the gate is currently closed. For rendering, not for control flow. */
+    readonly paused: boolean;
+    /** Whether the upload was abandoned. A cancelled gate never opens again. */
+    readonly cancelled: boolean;
+    /**
+     * The signal for the NEXT attempt. Re-read it per attempt: resuming installs a
+     * fresh controller, and the previous one stays aborted forever.
+     */
+    readonly signal: AbortSignal;
+    /** Stop the bytes in flight and hold the uploader. A no-op when already closed. */
+    pause: () => void;
+    /** Open the gate and install a fresh signal. A no-op when not paused. */
+    resume: () => void;
+    /**
+     * Abandon the upload for good.
+     *
+     * Distinct from a pause in exactly one way that matters to the loop above: it
+     * releases the gate rather than holding it, so an uploader parked on `settle()`
+     * wakes up and leaves instead of waiting for a resume that is not coming. What
+     * a caller does with a cancelled upload's stored windows is its own business —
+     * they stay in the store, addressable by an id only the caller has.
+     */
+    cancel: () => void;
+    /** Resolves as soon as the gate is open — immediately, when it already is. */
+    settle: () => Promise<void>;
+};
+/** Whether this rejection is an abort, in either of the two shapes runtimes throw. */
+export declare function isAbortError(err: unknown): boolean;
+/** A fresh upload id: a capability, so it is random rather than derived. */
+export declare function randomUploadId(): string;
+/**
+ * Send one file, waiting out however many pauses the person takes.
+ *
+ * The loop from the module doc, written once: both hooks need exactly this and a
+ * second copy of it is a second place for the abort/pause distinction to be got
+ * wrong. `send` is handed whether this attempt must CLAIM the id as its own —
+ * false the first time, since a fresh id has nothing to resume and saying
+ * otherwise waives the refusal that makes a caller-chosen id safe.
+ *
+ * Throws whatever `send` threw, except an abort the gate caused. A cancelled gate
+ * throws too: the caller distinguishes it by reading `gate.cancelled`, which is
+ * how an abandoned submission unwinds without being reported as a failure.
+ */
+export declare function sendThroughGate(gate: UploadGate, send: (resume: boolean) => Promise<void>): Promise<void>;
+/**
+ * A gate, open.
+ *
+ * One per upload rather than one per hook: the id and the windows already stored
+ * belong to a file, so a gate that outlived its file would resume something else.
+ */
+export declare function createUploadGate(): UploadGate;

package/dist/url-chips-oyy_Eiqh.js

@@ -0,0 +1,239 @@
+import { n as pageBaseUrl } from "./_utils-Mi-SCFA1.js";
+import { useSessionSelector, useTheme } from "./context.js";
+import { a as inkTint, i as focusRingStyle, n as FOCUS_RING } from "./_colors-CpZO-88A.js";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/use-flash.ts
+/**
+* A value that shows itself for a moment and then goes away.
+*
+* The "Copied" on a copy button, the "Saved" under an editor, the "Sent" on a
+* submit. There were three hand-rolled copies of this — two in the studio
+* front-end and one inside this package's own URL chips — each with the same
+* 1500ms and the same comment explaining the same two things the naive version
+* gets wrong. It is one primitive now, and it is PUBLIC because a custom chrome
+* is exactly the caller that needs it: the moment a client renders its own copy
+* button or its own save note, it is writing the timer again.
+*/
+/** How long a flashed value stays up. The one duration every caller used. */
+const FLASH_MS = 1500;
+/**
+* A transient value: set it, and it clears itself after `ms`.
+*
+* @remarks
+* The two things this holds that a `useState` plus a `setTimeout` at the call
+* site reliably gets wrong:
+*
+* - **At most ONE live timer.** A second flash while the first is still up
+*   re-arms rather than stacking, so the new value gets its full window
+*   instead of being cleared early by the previous click's timeout.
+* - **Nothing fires after unmount.** The timer is cleared on teardown, so a
+*   chip clicked and then scrolled out of the tree does not `setState` on a
+*   component React has already thrown away.
+*
+* @example
+* ```tsx
+* import { useFlash } from "@alexkroman1/aai-ui";
+*
+* function SaveNote({ onSave }: { onSave: () => Promise<void> }) {
+*   const { value: note, flash } = useFlash<string>();
+*   return (
+*     <button type="button" onClick={() => void onSave().then(() => flash("Saved"))}>
+*       {note ?? "Save"}
+*     </button>
+*   );
+* }
+* ```
+*
+* @typeParam T - What is being flashed.
+* @param ms - How long the value stays up. Defaults to 1500ms, which is what
+*   every caller wanted: long enough to read a word, short enough that the
+*   control is back to its real label before the reader looks again.
+*
+* @public
+*/
+function useFlash(ms = FLASH_MS) {
+	const [value, setValue] = useState(null);
+	const timer = useRef(void 0);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const flash = (next) => {
+		setValue(next);
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setValue(null), ms);
+	};
+	return {
+		value,
+		flash
+	};
+}
+//#endregion
+//#region src/use-copy.ts
+/**
+* Copy-to-clipboard with a per-item flash on the button that triggered it.
+*
+* Anywhere a UI hands the reader a string to paste somewhere else — a session
+* URL, a webhook, a `curl` line — the button wants the same three things, and
+* two of them are easy to get wrong:
+*
+* - The flash is keyed by the copied TEXT, so one row's "Copied" does not light
+*   up every button beside it.
+* - A FAILED write is reported rather than swallowed. There is no clipboard in
+*   an insecure context, and a browser may refuse the permission; a `catch`
+*   that does nothing leaves a button that visibly does nothing when clicked,
+*   which reads as a broken page rather than as a blocked capability.
+* - The single-timer / clear-on-unmount half is {@link useFlash}'s.
+*/
+/**
+* One copier for a group of copy buttons.
+*
+* @remarks
+* Call it ONCE per group and pass the {@link UseCopyResult} down, rather than once per
+* button: the flash is shared, so clicking a second row clears the first row's
+* "Copied" — which is what makes a list of URLs readable, since two rows
+* claiming to be on the clipboard is a lie about one of them.
+*
+* A chip whose idle text is its own name rather than the word "Copy" passes
+* that name to {@link UseCopyResult.label}; the two outcome words are fixed, for the
+* reason that member's own doc gives.
+*
+* @example
+* ```tsx
+* import { useCopy } from "@alexkroman1/aai-ui";
+*
+* function UrlList({ urls }: { urls: readonly string[] }) {
+*   const copier = useCopy();
+*   return (
+*     <ul>
+*       {urls.map((url) => (
+*         <li key={url}>
+*           <code>{url}</code>
+*           <button type="button" onClick={() => copier.copy(url)}>
+*             {copier.label(url)}
+*           </button>
+*         </li>
+*       ))}
+*     </ul>
+*   );
+* }
+* ```
+*
+* @public
+*/
+function useCopy() {
+	const { value: copied, flash } = useFlash();
+	const copy = (text) => {
+		const write = navigator.clipboard?.writeText(text);
+		if (write === void 0) {
+			flash({
+				text,
+				ok: false
+			});
+			return;
+		}
+		write.then(() => flash({
+			text,
+			ok: true
+		}), () => flash({
+			text,
+			ok: false
+		}));
+	};
+	const label = (text, idle = "Copy") => {
+		if (copied?.text !== text) return idle;
+		return copied.ok ? "Copied" : "Failed";
+	};
+	return {
+		copy,
+		label,
+		didCopy: (text) => copied?.text === text && copied.ok
+	};
+}
+//#endregion
+//#region src/components/url-chips.tsx
+/** @jsxImportSource react */
+/**
+* A compact labeled chip showing a URL. Click to copy.
+*
+* The label is what makes a pair of these readable — on its own a bare URL
+* leaves you guessing whether it's the page or the socket. It also carries the
+* copy OUTCOME, which is the whole reason the flash is `useCopy`'s rather than
+* this file's: the hand-rolled version swallowed a rejected write, so on an
+* insecure context or a denied permission the chip changed nothing at all and
+* read as a dead button.
+*
+* @internal
+*/
+function UrlChip({ label, url, hint, testId, className }) {
+	const theme = useTheme();
+	const copier = useCopy();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => copier.copy(url),
+		title: `${hint} (click to copy)\n${url}`,
+		className: clsx("flex items-center gap-1.5 min-w-0 appearance-none m-0 px-2 py-1 rounded-aai border cursor-pointer text-[11px] leading-none font-aai-mono", FOCUS_RING, className),
+		style: {
+			background: inkTint(theme.text, theme.surface, 3),
+			borderColor: theme.border,
+			color: inkTint(theme.text, theme.surface, 65),
+			...focusRingStyle(theme.primary)
+		},
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "uppercase tracking-wide shrink-0",
+			style: { color: inkTint(theme.text, theme.surface, 75) },
+			children: copier.label(url, label)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			"data-testid": `${testId}-url`,
+			children: url
+		})]
+	});
+}
+/**
+* The session's shareable UI URL — the page this UI is served from, what
+* you'd send someone to talk to the agent.
+*
+* @internal
+*/
+function UiUrlChip({ className }) {
+	return /* @__PURE__ */ jsx(UrlChip, {
+		label: "UI",
+		url: pageBaseUrl(),
+		hint: "Shareable UI",
+		testId: "ui-url-chip",
+		className
+	});
+}
+/**
+* The session's programmatic WebSocket endpoint — the URL a script or backend
+* can connect to directly instead of using this UI.
+*
+* @internal
+*/
+function ApiUrlChip({ className }) {
+	const apiUrl = useSessionSelector((s) => s.apiUrl);
+	return /* @__PURE__ */ jsx(UrlChip, {
+		label: "API",
+		url: apiUrl,
+		hint: "API endpoint",
+		testId: "api-url-chip",
+		className
+	});
+}
+/**
+* The UI and API URLs side by side. They answer the same question — "how do I
+* reach this agent?" — so they belong together and each needs its label to be
+* told apart. Rendered by the default shell in every session mode (S2S,
+* pipeline).
+*
+* @internal
+*/
+function SessionUrlChips({ className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center gap-1.5 min-w-0", className),
+		children: [/* @__PURE__ */ jsx(UiUrlChip, { className: "min-w-0 flex-1" }), /* @__PURE__ */ jsx(ApiUrlChip, { className: "min-w-0 flex-1" })]
+	});
+}
+//#endregion
+export { useFlash as a, useCopy as i, SessionUrlChips as n, UiUrlChip as r, ApiUrlChip as t };