@copilotkit/web-inspector 1.79.2-canary.1792172552 → 1.81.0

package/dist/components/generative-ui-view.cjs

@@ -0,0 +1,939 @@
+const require_json_block = require('../lib/json-block.cjs');
+let lit = require("lit");
+let _copilotkit_shared = require("@copilotkit/shared");
+
+//#region src/components/generative-ui-view.ts
+const TABS = [
+	{
+		key: "surfaces",
+		label: "Surfaces"
+	},
+	{
+		key: "catalog",
+		label: "Catalog"
+	},
+	{
+		key: "prompt",
+		label: "Prompt"
+	}
+];
+const PROMPT_SOURCE_NOTES = {
+	runtime: "The runtime adds this text as a context entry, with the render_ui tool.",
+	context: "The provider sends this text as a context entry.",
+	backend: "sendContext is false. Your backend builds the prompt, usually from this text."
+};
+/** A rough token count: about 4 characters for each token. */
+function estimateTokens(text) {
+	return Math.ceil(text.length / 4);
+}
+function formatTokens(text) {
+	return `~${estimateTokens(text).toLocaleString()} tokens`;
+}
+function json(value) {
+	return JSON.stringify(value, null, 2) ?? "undefined";
+}
+/** The kind of an A2UI operation, for example `updateComponents`. */
+function operationKind(operation) {
+	if (typeof operation !== "object" || operation === null) return "unknown";
+	return Object.keys(operation).find((key) => key !== "version") ?? "unknown";
+}
+/**
+* The component tree of a surface, from its root. Later operations replace
+* components with the same id. Skipped operations (rejected by the browser)
+* are left out. A slot id with no component yet is left out too.
+*/
+function componentTree(operations, skip, catalog) {
+	const byId = /* @__PURE__ */ new Map();
+	operations.forEach((operation, index) => {
+		if (skip.has(index)) return;
+		const components = "createSurface" in operation ? operation.createSurface.components : "updateComponents" in operation ? operation.updateComponents.components : void 0;
+		for (const node of components ?? []) byId.set(node.id, node);
+	});
+	const seen = /* @__PURE__ */ new Set();
+	const build = (id, repeat) => {
+		const node = typeof id === "string" ? byId.get(id) : void 0;
+		if (!node || seen.has(node.id)) return [];
+		seen.add(node.id);
+		const { id: _id, component, ...rest } = node;
+		const manifest = catalog[component];
+		const refs = manifest ? (0, _copilotkit_shared.collectChildRefs)(manifest.props) : [];
+		const childKeys = new Set([...Object.keys(manifest?.slots ?? {}), ...refs.filter((ref) => ref.path.length === 1).map((ref) => ref.path[0])]);
+		const nested = refs.filter((ref) => ref.path.length > 1);
+		const props = {};
+		const children = [];
+		for (const [name, value] of Object.entries(rest)) if (!childKeys.has(name)) props[name] = value;
+		else if (Array.isArray(value)) for (const child of value) children.push(...build(child));
+		else if (typeof value === "object" && value !== null) {
+			const template = value;
+			children.push(...build(template.componentId, template.path));
+		} else children.push(...build(value));
+		for (const child of (0, _copilotkit_shared.childIdsAtRefs)(rest, nested)) children.push(...build(child));
+		return [{
+			id: node.id,
+			component,
+			props,
+			...repeat ? { repeat } : {},
+			children
+		}];
+	};
+	return build(_copilotkit_shared.GENERATIVE_UI_ROOT_ID)[0];
+}
+/** The first element of the page whose `attribute` is `value`. */
+function findOnPage(attribute, value) {
+	return [...document.querySelectorAll(`[${attribute}]`)].find((element) => element.getAttribute(attribute) === value);
+}
+/**
+* The function problem that the inspector shows. A function goes to the
+* model only with exactly one mounted handler.
+*/
+/**
+* Splits components by the catalog that declared them: the catalog of the
+* provider first, then each base in the order of `extends`.
+*/
+function groupByCatalog(components, snapshot) {
+	const groups = new Map([[snapshot.catalogId, []]]);
+	for (const entry of components) {
+		const id = snapshot.componentCatalogs[entry[0]] ?? snapshot.catalogId;
+		groups.set(id, [...groups.get(id) ?? [], entry]);
+	}
+	return [...groups].filter(([, group]) => group.length > 0);
+}
+function functionHandlerProblem(handlers) {
+	if (handlers === 1) return void 0;
+	if (handlers === 0) return "No useGenerativeUIFunction handler is mounted, so the model does not get this function.";
+	return `${handlers} handlers are mounted. Mount exactly one, or the model does not get this function.`;
+}
+/**
+* The Generative UI pane: the catalog, the targets and surfaces on the page,
+* and what a run adds to the prompt of the model.
+*/
+var CpkGenerativeUIView = class extends lit.LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.tab = "surfaces";
+		this.run = "last";
+		this.filter = "";
+		this.expanded = /* @__PURE__ */ new Set();
+		this.copied = null;
+		this.unsubscribe = null;
+		this.outlined = null;
+	}
+	static {
+		this.properties = { source: { attribute: false } };
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.unhighlight();
+		this.unsubscribe?.();
+		this.unsubscribe = null;
+		this.subscribedSource = void 0;
+	}
+	willUpdate() {
+		if (this.source === this.subscribedSource && this.unsubscribe) return;
+		this.unsubscribe?.();
+		this.subscribedSource = this.source;
+		this.unsubscribe = this.source?.subscribe(() => this.requestUpdate()) ?? null;
+	}
+	toggle(key) {
+		if (this.expanded.has(key)) this.expanded.delete(key);
+		else this.expanded.add(key);
+		this.requestUpdate();
+	}
+	async copy(key, text) {
+		try {
+			await navigator.clipboard.writeText(text);
+			this.copied = key;
+		} catch {
+			this.copied = null;
+		}
+		this.requestUpdate();
+		setTimeout(() => {
+			if (this.copied !== key) return;
+			this.copied = null;
+			this.requestUpdate();
+		}, 1500);
+	}
+	/**
+	* Outlines an element of the page and scrolls it into view, until
+	* `unhighlight`. Hover and keyboard focus call these two.
+	*/
+	highlight(element) {
+		this.unhighlight();
+		if (!element) return;
+		const { outline, outlineOffset } = element.style;
+		this.outlined = {
+			element,
+			outline,
+			outlineOffset
+		};
+		element.style.outline = "2px solid #7567ff";
+		element.style.outlineOffset = "4px";
+		element.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest"
+		});
+	}
+	unhighlight() {
+		if (!this.outlined) return;
+		const { element, outline, outlineOffset } = this.outlined;
+		element.style.outline = outline;
+		element.style.outlineOffset = outlineOffset;
+		this.outlined = null;
+	}
+	render() {
+		if (!this.source) return lit.html`
+        <div class="empty">
+          <p class="strong">No generative UI</p>
+          <p>
+            Pass <code>generativeUI</code> to <code>CopilotKitProvider</code>, and this
+            pane shows its catalog, surfaces, and prompt.
+          </p>
+        </div>
+      `;
+		const snapshot = this.source.getSnapshot();
+		return lit.html`
+      <header class="header">
+        <div class="title-row">
+          <h2>Generative UI</h2>
+          <span class="chip">${snapshot.transport} transport</span>
+          <code class="muted">${snapshot.catalogId}</code>
+        </div>
+        <p class="muted small">
+          ${snapshot.agentIds ? `For agents: ${snapshot.agentIds.join(", ")}` : "For every agent"}
+          · ${Object.keys(snapshot.components).length} components ·
+          ${Object.keys(snapshot.functions).length} functions ·
+          ${snapshot.surfaces.length} surfaces
+        </p>
+        <nav class="tabs" role="tablist">
+          ${TABS.map((tab) => lit.html`<button
+                type="button"
+                role="tab"
+                aria-selected=${this.tab === tab.key}
+                class="tab ${this.tab === tab.key ? "active" : ""}"
+                @click=${() => {
+			this.tab = tab.key;
+			this.requestUpdate();
+		}}
+              >
+                ${tab.label}
+              </button>`)}
+        </nav>
+      </header>
+      <div class="body">
+        ${this.tab === "surfaces" ? this.renderSurfaces(snapshot) : this.tab === "catalog" ? this.renderCatalog(snapshot) : this.renderPrompt(snapshot)}
+      </div>
+    `;
+	}
+	renderSurfaces(snapshot) {
+		const stateKeys = Object.keys(snapshot.state);
+		const active = snapshot.surfaces.filter((surface) => surface.threadId === snapshot.activeThreadId);
+		const other = snapshot.surfaces.filter((surface) => surface.threadId !== snapshot.activeThreadId);
+		return lit.html`
+      <section>
+        <h3>Targets</h3>
+        <p class="muted small">
+          Where the model can render. The model sees each description.
+        </p>
+        ${snapshot.targets.map((target) => {
+			const show = () => this.highlight(findOnPage("data-generative-ui-surface", target.id));
+			return lit.html`<div
+            class="row"
+            @mouseenter=${show}
+            @mouseleave=${this.unhighlight}
+          >
+            <div class="row-main">
+              <div class="row-title">
+                <code>${target.id}</code>
+                <span class="chip">${target.kind}</span>
+                ${target.components ? lit.html`<span class="chip"
+                      >${target.components.length} components only</span
+                    >` : lit.nothing}
+              </div>
+              ${target.description ? lit.html`<p class="small">${target.description}</p>` : target.kind === "inline" ? lit.html`
+                        <p class="small warn">
+                          No description. Give the surface a description, so the model knows what to put
+                          in it.
+                        </p>
+                      ` : lit.nothing}
+              ${target.components ? lit.html`<p class="muted small">
+                    ${target.components.join(", ") || "No components"}
+                  </p>` : lit.nothing}
+            </div>
+          </div>`;
+		})}
+      </section>
+      <section>
+        <h3>Surfaces in this thread</h3>
+        ${active.length === 0 ? lit.html`
+                <p class="muted small">No surfaces yet. Ask the chat for something visual.</p>
+              ` : active.map((surface) => this.renderSurface(surface, snapshot.components))}
+        ${other.length > 0 ? lit.html`<h4>Other threads</h4>
+              ${other.map((surface) => this.renderSurface(surface, snapshot.components))}` : lit.nothing}
+      </section>
+      <section>
+        <h3>App state</h3>
+        <p class="muted small">
+          Bound props read these values. The model does not see them.
+        </p>
+        ${stateKeys.length === 0 ? lit.html`
+                <p class="muted small">No state is set.</p>
+              ` : require_json_block.renderHighlightedJsonBlock(snapshot.state)}
+      </section>
+    `;
+	}
+	renderComponent(node, key) {
+		const nodeKey = `${key}:component:${node.id}`;
+		const propCount = Object.keys(node.props).length;
+		return lit.html`<li>
+      <button
+        type="button"
+        class="op-toggle"
+        aria-expanded=${this.expanded.has(nodeKey)}
+        @click=${() => this.toggle(nodeKey)}
+      >
+        <code>${node.component}</code>
+        <span class="muted small">${node.id}</span>
+        ${node.repeat ? lit.html`<span class="chip">each item of ${node.repeat}</span>` : lit.nothing}
+        <span class="muted small">${propCount} props</span>
+      </button>
+      ${this.expanded.has(nodeKey) ? require_json_block.renderHighlightedJsonBlock(node.props) : lit.nothing}
+      ${node.children.length > 0 ? lit.html`<ul class="tree">
+            ${node.children.map((child) => this.renderComponent(child, key))}
+          </ul>` : lit.nothing}
+    </li>`;
+	}
+	renderSurface(surface, catalog) {
+		const key = `surface:${surface.threadId}:${surface.surfaceId}`;
+		const isOpen = this.expanded.has(key);
+		const userPaths = Object.keys(surface.userValues);
+		const browserRejected = new Set(surface.rejected.filter((rejection) => rejection.source === "browser").map((rejection) => rejection.index));
+		const tree = isOpen ? componentTree(surface.operations, browserRejected, catalog) : void 0;
+		const show = () => this.highlight(findOnPage("data-generative-ui-root", surface.surfaceId)?.closest("[data-generative-ui-surface]"));
+		return lit.html`<div
+      class="card"
+      @mouseenter=${show}
+      @mouseleave=${this.unhighlight}
+      @focusin=${show}
+      @focusout=${this.unhighlight}
+    >
+      <div class="card-head">
+        <button
+          type="button"
+          class="card-toggle"
+          aria-expanded=${isOpen}
+          @click=${() => this.toggle(key)}
+        >
+          <span class="row-title">
+            <code>${surface.surfaceId}</code>
+            <span class="chip status-${surface.status}">${surface.status}</span>
+            <span class="muted small">in ${surface.target}</span>
+          </span>
+          <span class="muted small">
+            ${surface.operations.length} operations
+            ${surface.rejected.length > 0 ? lit.html`·
+                  <span class="danger"
+                    >${surface.rejected.length} rejected</span
+                  >` : lit.nothing}
+            ${userPaths.length > 0 ? lit.html`· ${userPaths.length} user values` : lit.nothing}
+          </span>
+        </button>
+      </div>
+      ${isOpen ? lit.html`<div class="card-body">
+            ${surface.rejected.length > 0 ? lit.html`<h4>Rejected operations</h4>
+                  <p class="muted small">
+                    These were dropped. The model gets them on its next run, so
+                    it can fix them.
+                  </p>
+                  <ul class="list">
+                    ${surface.rejected.map((rejection) => lit.html`<li class="danger">
+                          <span class="chip">${rejection.source}</span>
+                          operation ${rejection.index}: ${rejection.reason}
+                        </li>`)}
+                  </ul>` : lit.nothing}
+            ${userPaths.length > 0 ? lit.html`<h4>User values</h4>
+                  <p class="muted small">
+                    The user wrote these paths. Agent writes to them are
+                    ignored.
+                  </p>
+                  ${require_json_block.renderHighlightedJsonBlock(surface.userValues)}` : lit.nothing}
+            <h4>Components</h4>
+            ${tree ? lit.html`<ul class="tree root">
+                  ${this.renderComponent(tree, key)}
+                </ul>` : lit.html`
+                    <p class="muted small">No root component yet.</p>
+                  `}
+            <h4>Data model</h4>
+            ${require_json_block.renderHighlightedJsonBlock(surface.dataModel)}
+            <h4>Operations</h4>
+            <ol class="ops">
+              ${surface.operations.map((operation, index) => {
+			const opKey = `${key}:op:${index}`;
+			const rejected = browserRejected.has(index);
+			return lit.html`<li class=${rejected ? "danger" : ""}>
+                  <button
+                    type="button"
+                    class="op-toggle"
+                    aria-expanded=${this.expanded.has(opKey)}
+                    @click=${() => this.toggle(opKey)}
+                  >
+                    <span class="muted">${index}</span>
+                    <code>${operationKind(operation)}</code>
+                    ${rejected ? lit.html`
+                            <span class="chip">rejected</span>
+                          ` : lit.nothing}
+                  </button>
+                  ${this.expanded.has(opKey) ? require_json_block.renderHighlightedJsonBlock(operation) : lit.nothing}
+                </li>`;
+		})}
+            </ol>
+            <p class="muted small">Thread <code>${surface.threadId}</code></p>
+          </div>` : lit.nothing}
+    </div>`;
+	}
+	renderCatalogComponent(name, component) {
+		const key = `component:${name}`;
+		const isOpen = this.expanded.has(key);
+		const events = Object.keys(component.events ?? {});
+		return lit.html`<div class="card">
+      <button
+        type="button"
+        class="card-toggle"
+        aria-expanded=${isOpen}
+        @click=${() => this.toggle(key)}
+      >
+        <span class="row-title">
+          <code>${name}</code>
+          ${[...Object.entries(component.slots ?? {}), ...(0, _copilotkit_shared.collectChildRefs)(component.props).map((ref) => [ref.path.join("."), ref.kind])].map(([slot, kind]) => lit.html`<span class="chip">${slot}: ${kind}</span>`)}
+          ${events.map((event) => lit.html`<span class="chip event">${event}</span>`)}
+        </span>
+        ${component.description ? lit.html`<span class="small">${component.description}</span>` : lit.html`
+                <span class="small warn">No description</span>
+              `}
+      </button>
+      ${isOpen ? lit.html`<div class="card-body">
+            <h4>Props (JSON Schema)</h4>
+            ${require_json_block.renderHighlightedJsonBlock(component.props)}
+            ${component.events ? lit.html`<h4>Events</h4>
+                  ${require_json_block.renderHighlightedJsonBlock(component.events)}` : lit.nothing}
+          </div>` : lit.nothing}
+    </div>`;
+	}
+	renderCatalog(snapshot) {
+		const query = this.filter.trim().toLowerCase();
+		const matches = ([name, entry]) => !query || name.toLowerCase().includes(query) || entry.description?.toLowerCase().includes(query);
+		const components = Object.entries(snapshot.components).filter(matches);
+		const functions = Object.entries(snapshot.functions).filter(matches);
+		return lit.html`
+      <section>
+        <div class="section-head">
+          <h3>Components</h3>
+          <input
+            class="filter"
+            type="search"
+            placeholder="Search"
+            aria-label="Search components and functions"
+            .value=${this.filter}
+            @input=${(event) => {
+			this.filter = event.target.value;
+			this.requestUpdate();
+		}}
+          />
+        </div>
+        <p class="muted small">
+          ${Object.keys(snapshot.components).length} components ·
+          ${formatTokens(JSON.stringify(snapshot.components))} in the envelope
+        </p>
+        ${groupByCatalog(components, snapshot).map(([catalogId, group]) => {
+			const key = `catalog:${catalogId}`;
+			const isOwn = catalogId === snapshot.catalogId;
+			const toggled = this.expanded.has(key);
+			const isOpen = query !== "" || (isOwn ? !toggled : toggled);
+			return lit.html`<h4>
+              <button
+                type="button"
+                class="op-toggle catalog-toggle"
+                aria-expanded=${isOpen}
+                @click=${() => this.toggle(key)}
+              >
+                <code>${catalogId}</code>
+                ${isOwn ? lit.nothing : lit.html`
+                        <span class="chip">extended</span>
+                      `}
+                <span class="muted small">${group.length} components</span>
+              </button>
+            </h4>
+            ${isOpen ? group.map(([name, component]) => this.renderCatalogComponent(name, component)) : lit.nothing}`;
+		})}
+        ${query && components.length === 0 ? lit.html`
+                <p class="muted small">No component matches.</p>
+              ` : lit.nothing}
+      </section>
+      <section>
+        <h3>Functions</h3>
+        ${functions.length === 0 ? lit.html`<p class="muted small">
+              ${query ? "No function matches." : "No functions are declared."}
+            </p>` : functions.map(([name, fn]) => {
+			const problem = functionHandlerProblem(fn.handlers);
+			return lit.html`<div class="card">
+                <div class="card-body">
+                  <div class="row-title">
+                    <code>${name}</code>
+                    <span
+                      class="chip ${problem ? "status-error" : "status-ready"}"
+                      >${fn.handlers}
+                      handler${fn.handlers === 1 ? "" : "s"}</span
+                    >
+                  </div>
+                  ${fn.description ? lit.html`<p class="small">${fn.description}</p>` : lit.nothing}
+                  ${problem ? lit.html`<p class="small warn">${problem}</p>` : lit.nothing}
+                  ${require_json_block.renderHighlightedJsonBlock(fn.parameters)}
+                </div>
+              </div>`;
+		})}
+      </section>
+    `;
+	}
+	/**
+	* The prompt text and the envelope are large (about 90,000 characters
+	* each in the shop), and the next run changes with each surface change.
+	* So they are drawn only when open.
+	*/
+	renderShowButton(key) {
+		const open = this.expanded.has(key);
+		return lit.html`<button
+      type="button"
+      class="button"
+      aria-expanded=${open}
+      @click=${() => this.toggle(key)}
+    >
+      ${open ? "Hide" : "Show"}
+    </button>`;
+	}
+	renderPrompt(snapshot) {
+		const showing = this.run === "last" && snapshot.lastRun ? "last" : "next";
+		const run = showing === "last" && snapshot.lastRun ? snapshot.lastRun : snapshot.nextRun;
+		const isLast = showing === "last";
+		const envelope = json(run.envelope);
+		return lit.html`
+      <div class="segmented" role="radiogroup">
+        ${["last", "next"].map((option) => lit.html`<button
+              type="button"
+              role="radio"
+              aria-checked=${showing === option}
+              class="tab ${showing === option ? "active" : ""}"
+              ?disabled=${option === "last" && !snapshot.lastRun}
+              @click=${() => {
+			this.run = option;
+			this.requestUpdate();
+		}}
+            >
+              ${option === "last" ? "Last run" : "Next run"}
+            </button>`)}
+      </div>
+      <p class="muted small">
+        ${isLast ? lit.html`What the last run of
+              <code>${run.agentId ?? "the agent"}</code> sent${run.startedAt ? `, at ${new Date(run.startedAt).toLocaleTimeString()}` : ""}.` : lit.html`
+                What the next run will send, from the page as it is now.
+              `}
+        Your own system prompt and tools are not shown.
+      </p>
+      ${run.prompt.map((section, index) => {
+			const key = `prompt:${index}`;
+			return lit.html`<section>
+          <div class="section-head">
+            <h3>${section.title}</h3>
+            <span class="muted small">${formatTokens(section.text)}</span>
+            ${this.renderShowButton(key)}
+            <button
+              type="button"
+              class="button"
+              @click=${() => void this.copy(key, section.text)}
+            >
+              ${this.copied === key ? "Copied" : "Copy"}
+            </button>
+          </div>
+          <p class="muted small">${PROMPT_SOURCE_NOTES[section.source]}</p>
+          ${this.expanded.has(key) ? lit.html`<pre class="prompt">${section.text || "(empty)"}</pre>` : lit.nothing}
+        </section>`;
+		})}
+      <section>
+        <div class="section-head">
+          <h3>Envelope</h3>
+          <span class="muted small">${formatTokens(envelope)}</span>
+          ${this.renderShowButton("envelope")}
+          <button
+            type="button"
+            class="button"
+            @click=${() => void this.copy("envelope", envelope)}
+          >
+            ${this.copied === "envelope" ? "Copied" : "Copy"}
+          </button>
+        </div>
+        <p class="muted small">
+          The run sends this as <code>forwardedProps.copilotkit.ui</code>.
+        </p>
+        ${this.expanded.has("envelope") ? require_json_block.renderHighlightedJsonBlock(run.envelope) : lit.nothing}
+      </section>
+    `;
+	}
+	static {
+		this.styles = lit.css`
+    :host {
+      --gui-ink: #202127;
+      --gui-muted: #64656f;
+      --gui-line: #dcdce4;
+      --gui-soft: #f7f7fa;
+      --gui-canvas: #fff;
+      --gui-accent: #7567ff;
+      --gui-accent-soft: #f0edff;
+      --gui-green: #168b69;
+      --gui-green-soft: #eaf6f1;
+      --gui-amber: #8a5a00;
+      --gui-amber-soft: #fff6e0;
+      --gui-danger: #a12f2f;
+      --gui-danger-soft: #fff4f4;
+      --cpk-json-key: #3d408f;
+      --cpk-json-str: #0b6b4c;
+      --cpk-json-num: #8a5900;
+      --cpk-json-bool: #c0333a;
+      --cpk-json-nil: #57575b;
+      display: block;
+      height: 100%;
+      overflow: auto;
+      color: var(--gui-ink);
+      background: var(--gui-canvas);
+      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+      font-size: 12px;
+    }
+    :host([data-color-scheme="dark"]) {
+      color-scheme: dark;
+      --gui-ink: #f3f4f8;
+      --gui-muted: #b0b3be;
+      --gui-line: #3a3e4b;
+      --gui-soft: #20232d;
+      --gui-canvas: #15171e;
+      --gui-accent: #a296ff;
+      --gui-accent-soft: #2a2940;
+      --gui-green: #4dc69d;
+      --gui-green-soft: #172923;
+      --gui-amber: #f2c46d;
+      --gui-amber-soft: #2f2716;
+      --gui-danger: #ffabab;
+      --gui-danger-soft: #321f25;
+      --cpk-json-key: #bec2ff;
+      --cpk-json-str: #85ecce;
+      --cpk-json-num: #ffac4d;
+      --cpk-json-bool: #fa5f67;
+      --cpk-json-nil: #afafb7;
+    }
+    .header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      padding: 12px 16px 0;
+      background: var(--gui-canvas);
+      border-bottom: 1px solid var(--gui-line);
+    }
+    .title-row,
+    .row-title,
+    .section-head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+    }
+    .title-row,
+    .row-title {
+      align-items: baseline;
+    }
+    .section-head h3 {
+      margin-right: auto;
+    }
+    h2 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 600;
+    }
+    h3 {
+      margin: 0 0 4px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+    h4 {
+      margin: 12px 0 4px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--gui-muted);
+    }
+    p {
+      margin: 2px 0 6px;
+    }
+    code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11px;
+    }
+    .body {
+      padding: 12px 16px 24px;
+    }
+    section {
+      margin-bottom: 20px;
+    }
+    .muted {
+      color: var(--gui-muted);
+    }
+    .small {
+      font-size: 11px;
+    }
+    .strong {
+      font-weight: 600;
+      color: var(--gui-ink);
+    }
+    .warn {
+      color: var(--gui-amber);
+    }
+    .danger {
+      color: var(--gui-danger);
+    }
+    .tabs,
+    .segmented {
+      display: flex;
+      gap: 4px;
+      margin-top: 8px;
+    }
+    .segmented {
+      margin: 0 0 8px;
+    }
+    .tab {
+      border: 0;
+      border-bottom: 2px solid transparent;
+      background: none;
+      color: var(--gui-muted);
+      font: inherit;
+      font-weight: 500;
+      padding: 6px 8px;
+      cursor: pointer;
+    }
+    .segmented .tab {
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+    }
+    .tab.active {
+      color: var(--gui-ink);
+      border-bottom-color: var(--gui-accent);
+    }
+    .segmented .tab.active {
+      border-color: var(--gui-accent);
+      background: var(--gui-accent-soft);
+    }
+    .tab:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    .chip {
+      display: inline-block;
+      border: 1px solid var(--gui-line);
+      border-radius: 999px;
+      padding: 0 6px;
+      font-size: 10px;
+      line-height: 16px;
+      color: var(--gui-muted);
+      background: var(--gui-soft);
+    }
+    .chip.event {
+      color: var(--gui-accent);
+      background: var(--gui-accent-soft);
+    }
+    .status-ready {
+      color: var(--gui-green);
+      background: var(--gui-green-soft);
+    }
+    .status-streaming {
+      color: var(--gui-accent);
+      background: var(--gui-accent-soft);
+    }
+    .status-error {
+      color: var(--gui-danger);
+      background: var(--gui-danger-soft);
+    }
+    .row {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 8px 0;
+      border-bottom: 1px solid var(--gui-line);
+    }
+    .row-main {
+      flex: 1;
+      min-width: 0;
+    }
+    .card {
+      border: 1px solid var(--gui-line);
+      border-radius: 8px;
+      margin-bottom: 6px;
+      overflow: hidden;
+    }
+    .card-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding-right: 8px;
+    }
+    .cpk-json-block {
+      margin: 4px 0 0;
+      max-height: 320px;
+      overflow: auto;
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+      padding: 8px 10px;
+      background: var(--gui-soft);
+      color: var(--gui-ink);
+      font-family: "Spline Sans Mono", ui-monospace, monospace;
+      font-size: 11px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+    .cpk-json-token--key {
+      color: var(--cpk-json-key);
+    }
+    .cpk-json-token--str {
+      color: var(--cpk-json-str);
+    }
+    .cpk-json-token--num {
+      color: var(--cpk-json-num);
+    }
+    .cpk-json-token--bool {
+      color: var(--cpk-json-bool);
+    }
+    .cpk-json-token--nil {
+      color: var(--cpk-json-nil);
+    }
+    .card-toggle {
+      display: flex;
+      flex: 1;
+      box-sizing: border-box;
+      width: 100%;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 2px;
+      min-width: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      text-align: left;
+      padding: 8px 10px;
+      cursor: pointer;
+    }
+    .card-toggle:hover {
+      background: var(--gui-soft);
+    }
+    .card-body {
+      padding: 8px 10px;
+      border-top: 1px solid var(--gui-line);
+    }
+    .card > .card-body:first-child {
+      border-top: 0;
+    }
+    .button {
+      flex-shrink: 0;
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+      background: var(--gui-canvas);
+      color: var(--gui-ink);
+      font: inherit;
+      font-size: 11px;
+      padding: 2px 8px;
+      cursor: pointer;
+    }
+    .button:hover {
+      border-color: var(--gui-accent);
+    }
+    .section-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .filter {
+      width: 160px;
+      box-sizing: border-box;
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+      background: var(--gui-canvas);
+      color: var(--gui-ink);
+      font: inherit;
+      font-size: 11px;
+      padding: 3px 6px;
+    }
+    .catalog-toggle::before {
+      content: "▸";
+      display: inline-block;
+      width: 10px;
+      color: var(--gui-muted);
+      transition: transform 0.1s;
+    }
+    .catalog-toggle[aria-expanded="true"]::before {
+      transform: rotate(90deg);
+    }
+    pre {
+      margin: 4px 0 0;
+      max-height: 320px;
+      overflow: auto;
+      border-radius: 6px;
+      background: var(--gui-soft);
+      padding: 8px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11px;
+      line-height: 1.45;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    pre.prompt {
+      max-height: 480px;
+    }
+    .list,
+    .ops {
+      margin: 0;
+      padding-left: 18px;
+    }
+    .list li {
+      margin-bottom: 4px;
+    }
+    .ops {
+      list-style: none;
+      padding: 0;
+    }
+    .tree {
+      list-style: none;
+      margin: 0;
+      padding-left: 14px;
+      border-left: 1px solid var(--gui-line);
+    }
+    .tree.root {
+      padding-left: 0;
+      border-left: 0;
+    }
+    .op-toggle {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      padding: 2px 0;
+      cursor: pointer;
+    }
+    .empty {
+      padding: 48px 24px;
+      text-align: center;
+      color: var(--gui-muted);
+    }
+  `;
+	}
+};
+if (!customElements.get("cpk-generative-ui-view")) customElements.define("cpk-generative-ui-view", CpkGenerativeUIView);
+
+//#endregion
+//# sourceMappingURL=generative-ui-view.cjs.map