@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/widgets/ChatPanel.js

@@ -1,357 +1,657 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { memo, useState, useRef, useEffect, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { safeAccentText } from "../../utils/index.js";
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/ChatPanel.tsx
+/**
+* @zendir/ui - ChatPanel Component
+*
+* Status-aware chat interface for operator dashboards with AI/command assistance.
+* Supports structured message blocks (alerts, telemetry, status cards, data tables)
+* alongside plain text, markdown, and code.
+*
+* Astro UX Compliance:
+* - 6-level status system with dual-coded shapes (color + shape)
+* - Glass-morphism for message bubbles
+* - Monospace for code/command content
+* - Focus management and keyboard shortcuts
+*
+* AI Integration:
+* - Messages can include structured `blocks` that the AI emits
+* - Four integration strategies: Tool/Function Calling, YAML, JSON, and MCP
+* - Tool/Function calling schemas for OpenAI, Anthropic, Gemini, and MCP servers
+* - `parseChatResponse()` — universal parser for JSON, YAML, and plain text
+* - `parseMcpToolResult()` — bridge MCP tool results to ChatPanel blocks
+* - `CHAT_RESPONSE_TOOL_SCHEMA` — drop-in function schema for LLM API calls
+* - `CHAT_RESPONSE_MCP_TOOL` — MCP server tool definition for structured responses
+* - `CHAT_RESPONSE_YAML_PROMPT` — system prompt snippet for YAML mode
+*
+* @example
+* ```tsx
+* <ChatPanel
+*   messages={messages}
+*   onSend={(text) => handleSend(text)}
+*   loading={isStreaming}
+*   placeholder="Ask about telemetry..."
+*   title="AI Assistant"
+* />
+* ```
+*/
+/**
+* Lightweight recursive-descent YAML parser for AI response structures.
+*
+* Handles: mappings, sequences, nested structures, scalars (string, number,
+* boolean, null), quoted strings, inline JSON arrays/objects, comments.
+*
+* Does NOT handle: multi-line strings, anchors/aliases, tags, flow collections
+* across lines, merge keys, or other advanced YAML features.
+*
+* For production with complex YAML, plug in `js-yaml` or `yaml` via
+* `createChatResponseParser({ yamlParser })`.
+*/
 function parseYamlLite(text) {
-  const lines = [];
-  for (const raw of text.split("\n")) {
-    const content = raw.trimEnd();
-    if (content.trim() === "" || content.trim().startsWith("#")) continue;
-    lines.push({ indent: content.search(/\S/), text: content.trim() });
-  }
-  let pos = 0;
-  const peek = () => pos < lines.length ? lines[pos] : null;
-  const advance = () => lines[pos++];
-  function scalar(s) {
-    const v = s.trim();
-    if (v === "" || v === "null" || v === "~") return null;
-    if (v === "true") return true;
-    if (v === "false") return false;
-    if (/^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(v)) return Number(v);
-    if (v.startsWith('"') && v.endsWith('"') || v.startsWith("'") && v.endsWith("'"))
-      return v.slice(1, -1);
-    if (v.startsWith("[") && v.endsWith("]") || v.startsWith("{") && v.endsWith("}")) {
-      try {
-        return JSON.parse(v);
-      } catch {
-      }
-    }
-    return v;
-  }
-  function parseValue(minIndent) {
-    const line = peek();
-    if (!line || line.indent < minIndent) return void 0;
-    const actualIndent = line.indent;
-    if (line.text.startsWith("- ")) return parseSequence(actualIndent);
-    return parseMapping(actualIndent);
-  }
-  function parseSequence(level) {
-    const arr = [];
-    while (peek() && peek().indent === level && peek().text.startsWith("- ")) {
-      const line = advance();
-      const after = line.text.slice(2).trim();
-      if (!after) {
-        const val = parseValue(level + 1);
-        arr.push(val ?? null);
-        continue;
-      }
-      const colonIdx = after.indexOf(":");
-      if (colonIdx > 0 && !/^['"]/.test(after)) {
-        const obj = {};
-        const k = after.slice(0, colonIdx).trim();
-        const v = after.slice(colonIdx + 1).trim();
-        obj[k] = v ? scalar(v) : parseValue(level + 3) ?? null;
-        const siblingIndent = level + 2;
-        while (peek() && peek().indent >= siblingIndent) {
-          if (peek().indent === siblingIndent && !peek().text.startsWith("- ")) {
-            const next = advance();
-            const ci = next.text.indexOf(":");
-            if (ci > 0) {
-              const nk = next.text.slice(0, ci).trim();
-              const nv = next.text.slice(ci + 1).trim();
-              obj[nk] = nv ? scalar(nv) : parseValue(siblingIndent + 1) ?? null;
-            }
-          } else if (peek().indent > siblingIndent) {
-            advance();
-          } else {
-            break;
-          }
-        }
-        arr.push(obj);
-      } else {
-        arr.push(scalar(after));
-      }
-    }
-    return arr;
-  }
-  function parseMapping(level) {
-    const obj = {};
-    while (peek() && peek().indent === level && !peek().text.startsWith("- ")) {
-      const line = advance();
-      const colonIdx = line.text.indexOf(":");
-      if (colonIdx <= 0) continue;
-      const k = line.text.slice(0, colonIdx).trim();
-      const v = line.text.slice(colonIdx + 1).trim();
-      obj[k] = v ? scalar(v) : parseValue(level + 1) ?? null;
-    }
-    return obj;
-  }
-  try {
-    return parseValue(0) ?? {};
-  } catch {
-    return {};
-  }
+	const lines = [];
+	for (const raw of text.split("\n")) {
+		const content = raw.trimEnd();
+		if (content.trim() === "" || content.trim().startsWith("#")) continue;
+		lines.push({
+			indent: content.search(/\S/),
+			text: content.trim()
+		});
+	}
+	let pos = 0;
+	const peek = () => pos < lines.length ? lines[pos] : null;
+	const advance = () => lines[pos++];
+	function scalar(s) {
+		const v = s.trim();
+		if (v === "" || v === "null" || v === "~") return null;
+		if (v === "true") return true;
+		if (v === "false") return false;
+		if (/^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(v)) return Number(v);
+		if (v.startsWith("\"") && v.endsWith("\"") || v.startsWith("'") && v.endsWith("'")) return v.slice(1, -1);
+		if (v.startsWith("[") && v.endsWith("]") || v.startsWith("{") && v.endsWith("}")) try {
+			return JSON.parse(v);
+		} catch {}
+		return v;
+	}
+	function parseValue(minIndent) {
+		const line = peek();
+		if (!line || line.indent < minIndent) return void 0;
+		const actualIndent = line.indent;
+		if (line.text.startsWith("- ")) return parseSequence(actualIndent);
+		return parseMapping(actualIndent);
+	}
+	function parseSequence(level) {
+		const arr = [];
+		while (peek() && peek().indent === level && peek().text.startsWith("- ")) {
+			const after = advance().text.slice(2).trim();
+			if (!after) {
+				const val = parseValue(level + 1);
+				arr.push(val ?? null);
+				continue;
+			}
+			const colonIdx = after.indexOf(":");
+			if (colonIdx > 0 && !/^['"]/.test(after)) {
+				const obj = {};
+				const k = after.slice(0, colonIdx).trim();
+				const v = after.slice(colonIdx + 1).trim();
+				obj[k] = v ? scalar(v) : parseValue(level + 3) ?? null;
+				const siblingIndent = level + 2;
+				while (peek() && peek().indent >= siblingIndent) if (peek().indent === siblingIndent && !peek().text.startsWith("- ")) {
+					const next = advance();
+					const ci = next.text.indexOf(":");
+					if (ci > 0) {
+						const nk = next.text.slice(0, ci).trim();
+						const nv = next.text.slice(ci + 1).trim();
+						obj[nk] = nv ? scalar(nv) : parseValue(siblingIndent + 1) ?? null;
+					}
+				} else if (peek().indent > siblingIndent) advance();
+				else break;
+				arr.push(obj);
+			} else arr.push(scalar(after));
+		}
+		return arr;
+	}
+	function parseMapping(level) {
+		const obj = {};
+		while (peek() && peek().indent === level && !peek().text.startsWith("- ")) {
+			const line = advance();
+			const colonIdx = line.text.indexOf(":");
+			if (colonIdx <= 0) continue;
+			const k = line.text.slice(0, colonIdx).trim();
+			const v = line.text.slice(colonIdx + 1).trim();
+			obj[k] = v ? scalar(v) : parseValue(level + 1) ?? null;
+		}
+		return obj;
+	}
+	try {
+		return parseValue(0) ?? {};
+	} catch {
+		return {};
+	}
 }
+/** Ensure parsed blocks have the correct array shapes so renderers never crash. */
 function sanitizeBlocks(blocks) {
-  if (!Array.isArray(blocks)) return void 0;
-  return blocks.filter((b) => b != null && typeof b === "object" && typeof b.type === "string").map((b) => {
-    const block = { ...b };
-    switch (block.type) {
-      case "telemetry":
-        if (!Array.isArray(block.items)) block.items = [];
-        break;
-      case "table":
-        if (!Array.isArray(block.columns)) block.columns = [];
-        if (!Array.isArray(block.rows)) block.rows = [];
-        break;
-      case "actions":
-        if (!Array.isArray(block.buttons)) block.buttons = [];
-        break;
-      case "choice":
-        if (!Array.isArray(block.options)) block.options = [];
-        if (typeof block.id !== "string") block.id = `choice-${Date.now()}`;
-        break;
-      case "confirm":
-        if (typeof block.id !== "string") block.id = `confirm-${Date.now()}`;
-        if (typeof block.title !== "string") block.title = "";
-        break;
-      case "command":
-        if (typeof block.command !== "string") block.command = "";
-        break;
-      case "kv":
-        if (!Array.isArray(block.pairs)) block.pairs = [];
-        break;
-      case "alert":
-        if (typeof block.title !== "string") block.title = "";
-        if (typeof block.status !== "string") block.status = "normal";
-        break;
-      case "progress":
-        if (typeof block.label !== "string") block.label = "";
-        if (typeof block.value !== "number") block.value = 0;
-        break;
-    }
-    return block;
-  });
+	if (!Array.isArray(blocks)) return void 0;
+	return blocks.filter((b) => b != null && typeof b === "object" && typeof b.type === "string").map((b) => {
+		const block = { ...b };
+		switch (block.type) {
+			case "telemetry":
+				if (!Array.isArray(block.items)) block.items = [];
+				break;
+			case "table":
+				if (!Array.isArray(block.columns)) block.columns = [];
+				if (!Array.isArray(block.rows)) block.rows = [];
+				break;
+			case "actions":
+				if (!Array.isArray(block.buttons)) block.buttons = [];
+				break;
+			case "choice":
+				if (!Array.isArray(block.options)) block.options = [];
+				if (typeof block.id !== "string") block.id = `choice-${Date.now()}`;
+				break;
+			case "confirm":
+				if (typeof block.id !== "string") block.id = `confirm-${Date.now()}`;
+				if (typeof block.title !== "string") block.title = "";
+				break;
+			case "command":
+				if (typeof block.command !== "string") block.command = "";
+				break;
+			case "kv":
+				if (!Array.isArray(block.pairs)) block.pairs = [];
+				break;
+			case "alert":
+				if (typeof block.title !== "string") block.title = "";
+				if (typeof block.status !== "string") block.status = "normal";
+				break;
+			case "progress":
+				if (typeof block.label !== "string") block.label = "";
+				if (typeof block.value !== "number") block.value = 0;
+				break;
+		}
+		return block;
+	});
 }
 function generateId(custom) {
-  if (custom) return custom();
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
-  return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+	if (custom) return custom();
+	if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+	return `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
 function parseRaw(raw, format, yamlParser) {
-  const tryJSON = (s) => {
-    try {
-      const parsed = JSON.parse(s);
-      if (parsed && typeof parsed === "object" && typeof parsed.content === "string") return parsed;
-      return null;
-    } catch {
-      return null;
-    }
-  };
-  const tryYAML = (s) => {
-    try {
-      const parser = yamlParser ?? parseYamlLite;
-      const parsed = parser(s);
-      if (parsed && typeof parsed === "object" && typeof parsed.content === "string")
-        return parsed;
-      return null;
-    } catch {
-      return null;
-    }
-  };
-  if (format === "json") return tryJSON(raw);
-  if (format === "yaml") return tryYAML(raw);
-  return tryJSON(raw) ?? tryYAML(raw);
+	const tryJSON = (s) => {
+		try {
+			const parsed = JSON.parse(s);
+			if (parsed && typeof parsed === "object" && typeof parsed.content === "string") return parsed;
+			return null;
+		} catch {
+			return null;
+		}
+	};
+	const tryYAML = (s) => {
+		try {
+			const parsed = (yamlParser ?? parseYamlLite)(s);
+			if (parsed && typeof parsed === "object" && typeof parsed.content === "string") return parsed;
+			return null;
+		} catch {
+			return null;
+		}
+	};
+	if (format === "json") return tryJSON(raw);
+	if (format === "yaml") return tryYAML(raw);
+	return tryJSON(raw) ?? tryYAML(raw);
 }
+/**
+* Parse an AI response string into a `ChatMessage`.
+*
+* Supports three strategies (controlled by `format`):
+* - **json**: Parse as JSON. Falls back to plain text on failure.
+* - **yaml**: Parse as YAML (built-in lightweight parser). ~30-40% fewer tokens.
+* - **auto** (default): Try JSON → YAML → plain text.
+*
+* All parsed blocks are sanitized to ensure required arrays exist, preventing
+* runtime crashes from malformed AI output.
+*
+* ## Why YAML?
+* For the same structured response, YAML uses ~30-40% fewer tokens:
+* ```
+* JSON (~180 tokens): {"content":"Battery low.","blocks":[{"type":"alert",...}]}
+* YAML (~120 tokens): content: Battery low.\nblocks:\n  - type: alert\n    ...
+* ```
+*
+* ## Tool/Function Calling (recommended for production)
+* Pass `CHAT_RESPONSE_TOOL_SCHEMA` in your API call. The model is constrained
+* at the decoding level — zero prompt tokens for the schema.
+*
+* ## Custom YAML parser
+* Use `createChatResponseParser({ yamlParser })` to plug in `js-yaml` or `yaml`.
+*
+* @example
+* ```ts
+* const msg = parseChatResponse(aiOutput);              // auto-detect
+* const msg = parseChatResponse(aiOutput, 'yaml');       // force YAML
+* const msg = parseChatResponse(toolCallArgs, 'json');   // from function call
+* ```
+*/
 function parseChatResponse(raw, format = "auto", options) {
-  const id = generateId(options == null ? void 0 : options.idGenerator);
-  const base = {
-    id,
-    role: "assistant",
-    timestamp: Date.now()
-  };
-  const payload = parseRaw(raw, format, options == null ? void 0 : options.yamlParser);
-  if (payload) {
-    return {
-      ...base,
-      content: payload.content ?? "",
-      severity: payload.severity,
-      blocks: sanitizeBlocks(payload.blocks)
-    };
-  }
-  return { ...base, content: raw };
+	const base = {
+		id: generateId(options?.idGenerator),
+		role: "assistant",
+		timestamp: Date.now()
+	};
+	const payload = parseRaw(raw, format, options?.yamlParser);
+	if (payload) return {
+		...base,
+		content: payload.content ?? "",
+		severity: payload.severity,
+		blocks: sanitizeBlocks(payload.blocks)
+	};
+	return {
+		...base,
+		content: raw
+	};
 }
+/**
+* Create a pre-configured response parser.
+*
+* Use this to set global defaults (format, YAML parser, ID generator) so you
+* don't have to pass options on every call.
+*
+* @example
+* ```ts
+* import yaml from 'js-yaml';
+* import { createChatResponseParser } from '@zendir/ui';
+*
+* // Create once at app init
+* export const parseAI = createChatResponseParser({
+*   yamlParser: (s) => yaml.load(s),
+*   defaultFormat: 'yaml',
+* });
+*
+* // Use everywhere
+* const msg = parseAI(aiOutput);
+* ```
+*/
 function createChatResponseParser(options = {}) {
-  return (raw, format) => {
-    return parseChatResponse(raw, format ?? options.defaultFormat ?? "auto", options);
-  };
+	return (raw, format) => {
+		return parseChatResponse(raw, format ?? options.defaultFormat ?? "auto", options);
+	};
 }
+/**
+* Convert an MCP tool call result into a `ChatMessage` with structured blocks.
+*
+* Handles three patterns automatically:
+* 1. **Structured JSON/YAML** — Tool returns text matching `ChatResponsePayload` → parsed into typed blocks
+* 2. **Plain text** — Rendered as a simple assistant message with tool metadata
+* 3. **Error** — Rendered as a critical alert block
+*
+* This bridges the MCP protocol with ChatPanel's block rendering system, so any
+* MCP server tool can produce rich operator UIs without custom rendering code.
+*
+* @example
+* ```ts
+* import { parseMcpToolResult } from '@zendir/ui/react';
+*
+* // With use-mcp hook
+* const { callTool } = useMcp({ url: 'https://ops-server.example.com/mcp' });
+* const result = await callTool('get_satellite_health', { id: 'SAT-001' });
+* const msg = parseMcpToolResult('get_satellite_health', result);
+* setMessages(prev => [...prev, msg]);
+*
+* // With @modelcontextprotocol/sdk
+* const result = await mcpClient.callTool({ name: 'get_satellite_health', arguments: { id: 'SAT-001' } });
+* const msg = parseMcpToolResult('get_satellite_health', result);
+* ```
+*/
 function parseMcpToolResult(toolName, result, options) {
-  var _a, _b;
-  const id = generateId(options == null ? void 0 : options.idGenerator);
-  const timestamp = Date.now();
-  if (result.isError) {
-    const errorText = ((_a = result.content) == null ? void 0 : _a.filter((c) => c.type === "text").map((c) => c.text).join("\n")) || `Tool "${toolName}" failed`;
-    return {
-      id,
-      role: "assistant",
-      timestamp,
-      severity: "critical",
-      content: errorText,
-      blocks: [{ type: "alert", status: "critical", title: `MCP Tool Error: ${toolName}`, detail: errorText }]
-    };
-  }
-  const textParts = ((_b = result.content) == null ? void 0 : _b.filter((c) => c.type === "text").map((c) => c.text ?? "")) ?? [];
-  const rawText = textParts.join("\n");
-  if (rawText.trim()) {
-    const payload = parseRaw(rawText, "auto");
-    if (payload && payload.content) {
-      return {
-        id,
-        role: "assistant",
-        timestamp,
-        content: payload.content,
-        severity: payload.severity,
-        blocks: sanitizeBlocks(payload.blocks)
-      };
-    }
-  }
-  return {
-    id,
-    role: "assistant",
-    timestamp,
-    content: rawText || `Tool \`${toolName}\` completed successfully.`,
-    blocks: [{
-      type: "kv",
-      title: "MCP Tool Call",
-      pairs: [
-        { key: "Tool", value: toolName, mono: true },
-        ...result._meta ? [{ key: "Meta", value: JSON.stringify(result._meta), mono: true }] : []
-      ]
-    }]
-  };
+	const id = generateId(options?.idGenerator);
+	const timestamp = Date.now();
+	if (result.isError) {
+		const errorText = result.content?.filter((c) => c.type === "text").map((c) => c.text).join("\n") || `Tool "${toolName}" failed`;
+		return {
+			id,
+			role: "assistant",
+			timestamp,
+			severity: "critical",
+			content: errorText,
+			blocks: [{
+				type: "alert",
+				status: "critical",
+				title: `MCP Tool Error: ${toolName}`,
+				detail: errorText
+			}]
+		};
+	}
+	const rawText = (result.content?.filter((c) => c.type === "text").map((c) => c.text ?? "") ?? []).join("\n");
+	if (rawText.trim()) {
+		const payload = parseRaw(rawText, "auto");
+		if (payload && payload.content) return {
+			id,
+			role: "assistant",
+			timestamp,
+			content: payload.content,
+			severity: payload.severity,
+			blocks: sanitizeBlocks(payload.blocks)
+		};
+	}
+	return {
+		id,
+		role: "assistant",
+		timestamp,
+		content: rawText || `Tool \`${toolName}\` completed successfully.`,
+		blocks: [{
+			type: "kv",
+			title: "MCP Tool Call",
+			pairs: [{
+				key: "Tool",
+				value: toolName,
+				mono: true
+			}, ...result._meta ? [{
+				key: "Meta",
+				value: JSON.stringify(result._meta),
+				mono: true
+			}] : []]
+		}]
+	};
 }
-const CHAT_RESPONSE_MCP_TOOL = {
-  name: "respond_to_operator",
-  description: "Respond to the spacecraft operator with text content and optional structured UI blocks (alerts, telemetry, progress, tables, choices, confirmations, commands, key-value metadata). Use the Astro UX 6-level status system: normal, standby, caution, serious, critical, off.",
-  inputSchema: {
-    type: "object",
-    required: ["content"],
-    properties: {
-      content: { type: "string", description: "Plain-text or markdown response shown to the operator." },
-      severity: { type: "string", enum: ["normal", "standby", "caution", "serious", "critical", "off"] },
-      blocks: {
-        type: "array",
-        description: "Structured UI blocks rendered below the text content.",
-        items: {
-          type: "object",
-          required: ["type"],
-          properties: {
-            type: { type: "string", enum: ["alert", "telemetry", "progress", "table", "choice", "confirm", "command", "kv"] },
-            status: { type: "string", enum: ["normal", "standby", "caution", "serious", "critical", "off"] },
-            title: { type: "string" },
-            detail: { type: "string" },
-            label: { type: "string" },
-            value: { type: "number" },
-            id: { type: "string" },
-            command: { type: "string" },
-            executable: { type: "boolean" },
-            items: { type: "array", items: { type: "object", properties: { label: { type: "string" }, value: {}, unit: { type: "string" }, status: { type: "string" } } } },
-            columns: { type: "array", items: { type: "string" } },
-            rows: { type: "array", items: { type: "array" } },
-            options: { type: "array", items: { type: "object", properties: { id: { type: "string" }, label: { type: "string" }, description: { type: "string" }, status: { type: "string" } } } },
-            pairs: { type: "array", items: { type: "object", properties: { key: { type: "string" }, value: {}, mono: { type: "boolean" } } } }
-          }
-        }
-      }
-    }
-  }
+/**
+* MCP server tool definition for the `respond_to_operator` tool.
+*
+* Register this on your MCP server to enable structured ChatPanel responses.
+* The schema is identical to `CHAT_RESPONSE_TOOL_SCHEMA` but formatted for the
+* MCP `server.tool()` registration API.
+*
+* Compatible with: `@modelcontextprotocol/sdk`, any MCP server implementation.
+*
+* @example
+* ```ts
+* import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+* import { CHAT_RESPONSE_MCP_TOOL } from '@zendir/ui';
+*
+* const server = new McpServer({ name: 'ops-assistant', version: '1.0.0' });
+*
+* server.tool(
+*   CHAT_RESPONSE_MCP_TOOL.name,
+*   CHAT_RESPONSE_MCP_TOOL.description,
+*   CHAT_RESPONSE_MCP_TOOL.inputSchema,
+*   async ({ content, severity, blocks }) => ({
+*     content: [{ type: 'text', text: JSON.stringify({ content, severity, blocks }) }],
+*   })
+* );
+* ```
+*/
+var CHAT_RESPONSE_MCP_TOOL = {
+	name: "respond_to_operator",
+	description: "Respond to the spacecraft operator with text content and optional structured UI blocks (alerts, telemetry, progress, tables, choices, confirmations, commands, key-value metadata). Use the Astro UX 6-level status system: normal, standby, caution, serious, critical, off.",
+	inputSchema: {
+		type: "object",
+		required: ["content"],
+		properties: {
+			content: {
+				type: "string",
+				description: "Plain-text or markdown response shown to the operator."
+			},
+			severity: {
+				type: "string",
+				enum: [
+					"normal",
+					"standby",
+					"caution",
+					"serious",
+					"critical",
+					"off"
+				]
+			},
+			blocks: {
+				type: "array",
+				description: "Structured UI blocks rendered below the text content.",
+				items: {
+					type: "object",
+					required: ["type"],
+					properties: {
+						type: {
+							type: "string",
+							enum: [
+								"alert",
+								"telemetry",
+								"progress",
+								"table",
+								"choice",
+								"confirm",
+								"command",
+								"kv"
+							]
+						},
+						status: {
+							type: "string",
+							enum: [
+								"normal",
+								"standby",
+								"caution",
+								"serious",
+								"critical",
+								"off"
+							]
+						},
+						title: { type: "string" },
+						detail: { type: "string" },
+						label: { type: "string" },
+						value: { type: "number" },
+						id: { type: "string" },
+						command: { type: "string" },
+						executable: { type: "boolean" },
+						items: {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									label: { type: "string" },
+									value: {},
+									unit: { type: "string" },
+									status: { type: "string" }
+								}
+							}
+						},
+						columns: {
+							type: "array",
+							items: { type: "string" }
+						},
+						rows: {
+							type: "array",
+							items: { type: "array" }
+						},
+						options: {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									id: { type: "string" },
+									label: { type: "string" },
+									description: { type: "string" },
+									status: { type: "string" }
+								}
+							}
+						},
+						pairs: {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									key: { type: "string" },
+									value: {},
+									mono: { type: "boolean" }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 };
-const CHAT_RESPONSE_TOOL_SCHEMA = {
-  name: "respond_to_operator",
-  description: "Respond to the spacecraft operator with text content and optional structured UI blocks (alerts, telemetry, progress, tables, choices, confirmations, commands, key-value metadata). Use the Astro UX 6-level status system: normal, standby, caution, serious, critical, off.",
-  parameters: {
-    type: "object",
-    required: ["content"],
-    properties: {
-      content: {
-        type: "string",
-        description: "Plain-text or markdown response shown to the operator."
-      },
-      severity: {
-        type: "string",
-        enum: ["normal", "standby", "caution", "serious", "critical", "off"],
-        description: "Overall message severity. Drives the accent color and icon."
-      },
-      blocks: {
-        type: "array",
-        description: "Structured UI blocks rendered below the text content.",
-        items: {
-          type: "object",
-          required: ["type"],
-          properties: {
-            type: {
-              type: "string",
-              enum: ["alert", "telemetry", "progress", "table", "choice", "confirm", "command", "kv"]
-            },
-            status: { type: "string", enum: ["normal", "standby", "caution", "serious", "critical", "off"] },
-            title: { type: "string" },
-            detail: { type: "string" },
-            items: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  label: { type: "string" },
-                  value: {},
-                  unit: { type: "string" },
-                  status: { type: "string", enum: ["normal", "standby", "caution", "serious", "critical", "off"] }
-                }
-              }
-            },
-            label: { type: "string" },
-            value: { type: "number" },
-            max: { type: "number" },
-            columns: { type: "array", items: { type: "string" } },
-            rows: { type: "array", items: { type: "array" } },
-            id: { type: "string" },
-            multiple: { type: "boolean" },
-            options: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  id: { type: "string" },
-                  label: { type: "string" },
-                  description: { type: "string" },
-                  status: { type: "string", enum: ["normal", "standby", "caution", "serious", "critical", "off"] },
-                  disabled: { type: "boolean" }
-                }
-              }
-            },
-            confirmLabel: { type: "string" },
-            cancelLabel: { type: "string" },
-            language: { type: "string" },
-            command: { type: "string" },
-            executable: { type: "boolean" },
-            pairs: {
-              type: "array",
-              items: {
-                type: "object",
-                properties: {
-                  key: { type: "string" },
-                  value: {},
-                  mono: { type: "boolean" }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+/**
+* OpenAI-compatible function/tool schema for structured chat responses.
+*
+* Pass this as a tool definition in your API call. The model is constrained
+* to emit valid JSON matching this schema — no prompt engineering required.
+*
+* Works with: OpenAI (Structured Outputs / function calling), Anthropic (Tool Use),
+* Google Gemini (Function Calling), Mistral, Cohere, and any OpenAI-compatible API.
+*
+* @example
+* ```ts
+* // OpenAI
+* tools: [{ type: 'function', function: CHAT_RESPONSE_TOOL_SCHEMA }]
+*
+* // Anthropic
+* tools: [{ name: CHAT_RESPONSE_TOOL_SCHEMA.name,
+*           description: CHAT_RESPONSE_TOOL_SCHEMA.description,
+*           input_schema: CHAT_RESPONSE_TOOL_SCHEMA.parameters }]
+*
+* // Google Gemini
+* tools: [{ functionDeclarations: [CHAT_RESPONSE_TOOL_SCHEMA] }]
+* ```
+*/
+var CHAT_RESPONSE_TOOL_SCHEMA = {
+	name: "respond_to_operator",
+	description: "Respond to the spacecraft operator with text content and optional structured UI blocks (alerts, telemetry, progress, tables, choices, confirmations, commands, key-value metadata). Use the Astro UX 6-level status system: normal, standby, caution, serious, critical, off.",
+	parameters: {
+		type: "object",
+		required: ["content"],
+		properties: {
+			content: {
+				type: "string",
+				description: "Plain-text or markdown response shown to the operator."
+			},
+			severity: {
+				type: "string",
+				enum: [
+					"normal",
+					"standby",
+					"caution",
+					"serious",
+					"critical",
+					"off"
+				],
+				description: "Overall message severity. Drives the accent color and icon."
+			},
+			blocks: {
+				type: "array",
+				description: "Structured UI blocks rendered below the text content.",
+				items: {
+					type: "object",
+					required: ["type"],
+					properties: {
+						type: {
+							type: "string",
+							enum: [
+								"alert",
+								"telemetry",
+								"progress",
+								"table",
+								"choice",
+								"confirm",
+								"command",
+								"kv"
+							]
+						},
+						status: {
+							type: "string",
+							enum: [
+								"normal",
+								"standby",
+								"caution",
+								"serious",
+								"critical",
+								"off"
+							]
+						},
+						title: { type: "string" },
+						detail: { type: "string" },
+						items: {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									label: { type: "string" },
+									value: {},
+									unit: { type: "string" },
+									status: {
+										type: "string",
+										enum: [
+											"normal",
+											"standby",
+											"caution",
+											"serious",
+											"critical",
+											"off"
+										]
+									}
+								}
+							}
+						},
+						label: { type: "string" },
+						value: { type: "number" },
+						max: { type: "number" },
+						columns: {
+							type: "array",
+							items: { type: "string" }
+						},
+						rows: {
+							type: "array",
+							items: { type: "array" }
+						},
+						id: { type: "string" },
+						multiple: { type: "boolean" },
+						options: {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									id: { type: "string" },
+									label: { type: "string" },
+									description: { type: "string" },
+									status: {
+										type: "string",
+										enum: [
+											"normal",
+											"standby",
+											"caution",
+											"serious",
+											"critical",
+											"off"
+										]
+									},
+									disabled: { type: "boolean" }
+								}
+							}
+						},
+						confirmLabel: { type: "string" },
+						cancelLabel: { type: "string" },
+						language: { type: "string" },
+						command: { type: "string" },
+						executable: { type: "boolean" },
+						pairs: {
+							type: "array",
+							items: {
+								type: "object",
+								properties: {
+									key: { type: "string" },
+									value: {},
+									mono: { type: "boolean" }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 };
-const CHAT_RESPONSE_JSON_PROMPT = `When reporting telemetry, status, or alerts, respond with a JSON object:
+/**
+* JSON system prompt snippet — instructs the LLM to respond with JSON.
+* Include in your system prompt for the simplest integration path.
+*/
+var CHAT_RESPONSE_JSON_PROMPT = `When reporting telemetry, status, or alerts, respond with a JSON object:
 
 {
   "content": "Plain text explanation (supports **markdown**).",
@@ -370,7 +670,11 @@ const CHAT_RESPONSE_JSON_PROMPT = `When reporting telemetry, status, or alerts,
 
 Status levels (Astro UX): normal (nominal), standby (idle), caution (approaching limit), serious (at limit), critical (exceeding limit), off (no data).
 Always include "content". Only include "blocks" when structured data helps the operator.`;
-const CHAT_RESPONSE_YAML_PROMPT = `Respond in YAML format (not JSON). Use this structure:
+/**
+* YAML system prompt snippet — instructs the LLM to respond in compact YAML
+* instead of JSON. ~30-40% fewer output tokens for the same data.
+*/
+var CHAT_RESPONSE_YAML_PROMPT = `Respond in YAML format (not JSON). Use this structure:
 
 content: Your plain-text or markdown response here.
 severity: normal
@@ -411,7 +715,11 @@ blocks:
 
 Status levels (Astro UX): normal, standby, caution, serious, critical, off.
 Always include "content". Only include "blocks" when structured data helps the operator.`;
-const CHAT_STATUS_RULES_PROMPT = `Assign status levels using these thresholds:
+/**
+* Astro UX status rules snippet — append to any system prompt (JSON or YAML).
+* Gives the LLM concrete thresholds for assigning status levels.
+*/
+var CHAT_STATUS_RULES_PROMPT = `Assign status levels using these thresholds:
 - Battery: normal >50%, standby 30-50%, caution 20-30%, serious 10-20%, critical <10%
 - Temperature: normal <70°C, caution 70-80°C, serious 80-85°C, critical >85°C
 - Signal: normal >-80 dBm, caution -80 to -90, serious -90 to -95, critical <-95 dBm
@@ -425,721 +733,1113 @@ General rules:
 - "critical" → Exceeding hard limit, loss of signal, or failure
 - "off"      → Powered down, no data`;
 function StatusShape({ status, size = 10, color }) {
-  const glow = `${color}50`;
-  switch (status) {
-    case "caution":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) });
-    case "serious":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) });
-    case "critical":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) });
-    case "standby":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
-    case "off":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
-    default:
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) });
-  }
+	const glow = `${color}50`;
+	switch (status) {
+		case "caution": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: { filter: `drop-shadow(0 0 3px ${glow})` },
+			children: /* @__PURE__ */ jsx("rect", {
+				x: "1",
+				y: "1",
+				width: "10",
+				height: "10",
+				fill: color
+			})
+		});
+		case "serious": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: { filter: `drop-shadow(0 0 3px ${glow})` },
+			children: /* @__PURE__ */ jsx("polygon", {
+				points: "6,1 11,6 6,11 1,6",
+				fill: color
+			})
+		});
+		case "critical": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: { filter: `drop-shadow(0 0 3px ${glow})` },
+			children: /* @__PURE__ */ jsx("polygon", {
+				points: "6,11 1,2 11,2",
+				fill: color
+			})
+		});
+		case "standby": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: { filter: `drop-shadow(0 0 3px ${glow})` },
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3.5",
+				fill: "none",
+				stroke: color,
+				strokeWidth: "2"
+			})
+		});
+		case "off": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: { filter: `drop-shadow(0 0 3px ${glow})` },
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3",
+				fill: color
+			})
+		});
+		default: return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: { filter: `drop-shadow(0 0 3px ${glow})` },
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "5",
+				fill: color
+			})
+		});
+	}
 }
 function AlertBlock({ block }) {
-  const { tokens } = useTheme();
-  const color = tokens.colors.status[block.status];
-  return /* @__PURE__ */ jsxs("div", { style: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: 10,
-    padding: "10px 14px",
-    backgroundColor: `${color}12`,
-    border: `1px solid ${color}30`,
-    borderLeft: `3px solid ${color}`,
-    borderRadius: tokens.borderRadius.md,
-    marginTop: 8
-  }, children: [
-    /* @__PURE__ */ jsx("div", { style: { marginTop: 2, flexShrink: 0 }, children: /* @__PURE__ */ jsx(StatusShape, { status: block.status, size: 12, color }) }),
-    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: tokens.typography.fontSize.sm, fontWeight: 600, color: tokens.colors.text.primary }, children: block.title }),
-      block.detail && /* @__PURE__ */ jsx("div", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.secondary, marginTop: 2, lineHeight: 1.5 }, children: block.detail })
-    ] })
-  ] });
+	const { tokens } = useTheme();
+	const color = tokens.colors.status[block.status];
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "flex-start",
+			gap: 10,
+			padding: "10px 14px",
+			backgroundColor: `${color}12`,
+			border: `1px solid ${color}30`,
+			borderLeft: `3px solid ${color}`,
+			borderRadius: tokens.borderRadius.md,
+			marginTop: 8
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				marginTop: 2,
+				flexShrink: 0
+			},
+			children: /* @__PURE__ */ jsx(StatusShape, {
+				status: block.status,
+				size: 12,
+				color
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: 1,
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.sm,
+					fontWeight: 600,
+					color: tokens.colors.text.primary
+				},
+				children: block.title
+			}), block.detail && /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					color: tokens.colors.text.secondary,
+					marginTop: 2,
+					lineHeight: 1.5
+				},
+				children: block.detail
+			})]
+		})]
+	});
 }
 function TelemetryBlock({ block }) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsxs("div", { style: {
-    marginTop: 8,
-    border: `1px solid ${tokens.colors.border.muted}`,
-    borderRadius: tokens.borderRadius.md,
-    overflow: "hidden"
-  }, children: [
-    block.title && /* @__PURE__ */ jsx("div", { style: {
-      padding: "6px 12px",
-      fontSize: tokens.typography.fontSize.xxs,
-      fontWeight: 600,
-      color: tokens.colors.text.secondary,
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      backgroundColor: `${tokens.colors.background.elevated}80`,
-      borderBottom: `1px solid ${tokens.colors.border.muted}`
-    }, children: block.title }),
-    /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px", display: "flex", flexDirection: "column", gap: 6 }, children: (block.items ?? []).map((item, i) => {
-      const itemColor = item.status ? tokens.colors.status[item.status] : tokens.colors.text.secondary;
-      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, fontSize: tokens.typography.fontSize.sm }, children: [
-        /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6, color: tokens.colors.text.secondary }, children: [
-          item.status && /* @__PURE__ */ jsx(StatusShape, { status: item.status, size: 8, color: tokens.colors.status[item.status] }),
-          item.label
-        ] }),
-        /* @__PURE__ */ jsxs("span", { style: {
-          fontFamily: tokens.typography.fontFamily.mono,
-          fontVariantNumeric: "tabular-nums",
-          color: itemColor,
-          fontWeight: 500
-        }, children: [
-          item.value,
-          item.unit ? ` ${item.unit}` : ""
-        ] })
-      ] }, i);
-    }) })
-  ] });
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			marginTop: 8,
+			border: `1px solid ${tokens.colors.border.muted}`,
+			borderRadius: tokens.borderRadius.md,
+			overflow: "hidden"
+		},
+		children: [block.title && /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "6px 12px",
+				fontSize: tokens.typography.fontSize.xxs,
+				fontWeight: 600,
+				color: tokens.colors.text.secondary,
+				textTransform: "uppercase",
+				letterSpacing: "0.05em",
+				backgroundColor: `${tokens.colors.background.elevated}80`,
+				borderBottom: `1px solid ${tokens.colors.border.muted}`
+			},
+			children: block.title
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "8px 12px",
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			},
+			children: (block.items ?? []).map((item, i) => {
+				const itemColor = item.status ? tokens.colors.status[item.status] : tokens.colors.text.secondary;
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						gap: 8,
+						fontSize: tokens.typography.fontSize.sm
+					},
+					children: [/* @__PURE__ */ jsxs("span", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 6,
+							color: tokens.colors.text.secondary
+						},
+						children: [item.status && /* @__PURE__ */ jsx(StatusShape, {
+							status: item.status,
+							size: 8,
+							color: tokens.colors.status[item.status]
+						}), item.label]
+					}), /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontVariantNumeric: "tabular-nums",
+							color: itemColor,
+							fontWeight: 500
+						},
+						children: [item.value, item.unit ? ` ${item.unit}` : ""]
+					})]
+				}, i);
+			})
+		})]
+	});
 }
 function ProgressBlock({ block }) {
-  const { tokens } = useTheme();
-  const max = block.max ?? 100;
-  const pct = Math.min(100, Math.max(0, block.value / max * 100));
-  const effectiveStatus = block.status ?? (pct >= 75 ? "normal" : pct >= 50 ? "standby" : pct >= 25 ? "caution" : pct > 0 ? "serious" : "off");
-  const color = tokens.colors.status[effectiveStatus];
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4, fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.secondary }, children: [
-      /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-        /* @__PURE__ */ jsx(StatusShape, { status: effectiveStatus, size: 8, color }),
-        block.label
-      ] }),
-      /* @__PURE__ */ jsxs("span", { style: { fontFamily: tokens.typography.fontFamily.mono, color: tokens.colors.text.primary }, children: [
-        pct.toFixed(0),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { height: 6, backgroundColor: tokens.colors.border.muted, borderRadius: 3, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { height: "100%", width: `${pct}%`, backgroundColor: color, borderRadius: 3, transition: "width 300ms", boxShadow: `0 0 6px ${color}40` } }) })
-  ] });
+	const { tokens } = useTheme();
+	const max = block.max ?? 100;
+	const pct = Math.min(100, Math.max(0, block.value / max * 100));
+	const effectiveStatus = block.status ?? (pct >= 75 ? "normal" : pct >= 50 ? "standby" : pct >= 25 ? "caution" : pct > 0 ? "serious" : "off");
+	const color = tokens.colors.status[effectiveStatus];
+	return /* @__PURE__ */ jsxs("div", {
+		style: { marginTop: 8 },
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				marginBottom: 4,
+				fontSize: tokens.typography.fontSize.xs,
+				color: tokens.colors.text.secondary
+			},
+			children: [/* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ jsx(StatusShape, {
+					status: effectiveStatus,
+					size: 8,
+					color
+				}), block.label]
+			}), /* @__PURE__ */ jsxs("span", {
+				style: {
+					fontFamily: tokens.typography.fontFamily.mono,
+					color: tokens.colors.text.primary
+				},
+				children: [pct.toFixed(0), "%"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				height: 6,
+				backgroundColor: tokens.colors.border.muted,
+				borderRadius: 3,
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ jsx("div", { style: {
+				height: "100%",
+				width: `${pct}%`,
+				backgroundColor: color,
+				borderRadius: 3,
+				transition: "width 300ms",
+				boxShadow: `0 0 6px ${color}40`
+			} })
+		})]
+	});
 }
 function TableBlock({ block }) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, border: `1px solid ${tokens.colors.border.muted}`, borderRadius: tokens.borderRadius.md, overflow: "hidden" }, children: [
-    block.title && /* @__PURE__ */ jsx("div", { style: {
-      padding: "6px 12px",
-      fontSize: tokens.typography.fontSize.xxs,
-      fontWeight: 600,
-      color: tokens.colors.text.secondary,
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      backgroundColor: `${tokens.colors.background.elevated}80`,
-      borderBottom: `1px solid ${tokens.colors.border.muted}`
-    }, children: block.title }),
-    /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: tokens.typography.fontSize.xs }, children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: (block.columns ?? []).map((col, i) => /* @__PURE__ */ jsx("th", { style: {
-        padding: "6px 12px",
-        textAlign: "left",
-        fontWeight: 600,
-        color: tokens.colors.text.secondary,
-        borderBottom: `1px solid ${tokens.colors.border.muted}`,
-        whiteSpace: "nowrap"
-      }, children: col }, i)) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: (block.rows ?? []).map((row, ri) => /* @__PURE__ */ jsx("tr", { children: (row ?? []).map((cell, ci) => /* @__PURE__ */ jsx("td", { style: {
-        padding: "5px 12px",
-        color: tokens.colors.text.primary,
-        fontFamily: typeof cell === "number" ? tokens.typography.fontFamily.mono : void 0,
-        fontVariantNumeric: typeof cell === "number" ? "tabular-nums" : void 0,
-        borderBottom: ri < (block.rows ?? []).length - 1 ? `1px solid ${tokens.colors.border.muted}30` : "none",
-        whiteSpace: "nowrap"
-      }, children: cell }, ci)) }, ri)) })
-    ] }) })
-  ] });
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			marginTop: 8,
+			border: `1px solid ${tokens.colors.border.muted}`,
+			borderRadius: tokens.borderRadius.md,
+			overflow: "hidden"
+		},
+		children: [block.title && /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "6px 12px",
+				fontSize: tokens.typography.fontSize.xxs,
+				fontWeight: 600,
+				color: tokens.colors.text.secondary,
+				textTransform: "uppercase",
+				letterSpacing: "0.05em",
+				backgroundColor: `${tokens.colors.background.elevated}80`,
+				borderBottom: `1px solid ${tokens.colors.border.muted}`
+			},
+			children: block.title
+		}), /* @__PURE__ */ jsx("div", {
+			style: { overflowX: "auto" },
+			children: /* @__PURE__ */ jsxs("table", {
+				style: {
+					width: "100%",
+					borderCollapse: "collapse",
+					fontSize: tokens.typography.fontSize.xs
+				},
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: (block.columns ?? []).map((col, i) => /* @__PURE__ */ jsx("th", {
+					style: {
+						padding: "6px 12px",
+						textAlign: "left",
+						fontWeight: 600,
+						color: tokens.colors.text.secondary,
+						borderBottom: `1px solid ${tokens.colors.border.muted}`,
+						whiteSpace: "nowrap"
+					},
+					children: col
+				}, i)) }) }), /* @__PURE__ */ jsx("tbody", { children: (block.rows ?? []).map((row, ri) => /* @__PURE__ */ jsx("tr", { children: (row ?? []).map((cell, ci) => /* @__PURE__ */ jsx("td", {
+					style: {
+						padding: "5px 12px",
+						color: tokens.colors.text.primary,
+						fontFamily: typeof cell === "number" ? tokens.typography.fontFamily.mono : void 0,
+						fontVariantNumeric: typeof cell === "number" ? "tabular-nums" : void 0,
+						borderBottom: ri < (block.rows ?? []).length - 1 ? `1px solid ${tokens.colors.border.muted}30` : "none",
+						whiteSpace: "nowrap"
+					},
+					children: cell
+				}, ci)) }, ri)) })]
+			})
+		})]
+	});
 }
 function ActionsBlock({ block }) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, marginTop: 8, flexWrap: "wrap" }, children: (block.buttons ?? []).map((btn, i) => {
-    const isCritical = btn.variant === "critical";
-    const isPrimary = btn.variant === "primary" || !btn.variant && i === 0;
-    const baseColor = isCritical ? tokens.colors.status.critical : tokens.colors.accent.primary;
-    const textColor = isCritical ? tokens.colors.status.critical : safeAccentText(tokens.colors.accent.primary);
-    return /* @__PURE__ */ jsx("button", { onClick: btn.onClick, style: {
-      fontSize: tokens.typography.fontSize.xxs,
-      padding: "4px 14px",
-      borderRadius: tokens.borderRadius.sm,
-      border: `1px solid ${baseColor}${isPrimary ? "" : "40"}`,
-      backgroundColor: isPrimary ? `${baseColor}20` : "transparent",
-      color: textColor,
-      cursor: "pointer",
-      fontFamily: tokens.typography.fontFamily.primary,
-      fontWeight: 500,
-      transition: "all 150ms"
-    }, children: btn.label }, i);
-  }) });
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			gap: 8,
+			marginTop: 8,
+			flexWrap: "wrap"
+		},
+		children: (block.buttons ?? []).map((btn, i) => {
+			const isCritical = btn.variant === "critical";
+			const isPrimary = btn.variant === "primary" || !btn.variant && i === 0;
+			const baseColor = isCritical ? tokens.colors.status.critical : tokens.colors.accent.primary;
+			const textColor = isCritical ? tokens.colors.status.critical : safeAccentText(tokens.colors.accent.primary);
+			return /* @__PURE__ */ jsx("button", {
+				onClick: btn.onClick,
+				style: {
+					fontSize: tokens.typography.fontSize.xxs,
+					padding: "4px 14px",
+					borderRadius: tokens.borderRadius.sm,
+					border: `1px solid ${baseColor}${isPrimary ? "" : "40"}`,
+					backgroundColor: isPrimary ? `${baseColor}20` : "transparent",
+					color: textColor,
+					cursor: "pointer",
+					fontFamily: tokens.typography.fontFamily.primary,
+					fontWeight: 500,
+					transition: "all 150ms"
+				},
+				children: btn.label
+			}, i);
+		})
+	});
 }
 function ChoiceBlock({ block, messageId, onEvent }) {
-  const { tokens } = useTheme();
-  const [localSelected, setLocalSelected] = useState(new Set(block.selected ?? []));
-  const isSubmitted = block.submitted;
-  const toggle = (optId) => {
-    if (isSubmitted) return;
-    setLocalSelected((prev) => {
-      const next = new Set(prev);
-      if (block.multiple) {
-        next.has(optId) ? next.delete(optId) : next.add(optId);
-      } else {
-        next.clear();
-        next.add(optId);
-      }
-      return next;
-    });
-  };
-  const submit = () => {
-    if (localSelected.size === 0 || isSubmitted) return;
-    onEvent == null ? void 0 : onEvent({ blockId: block.id, messageId, action: "select", value: Array.from(localSelected) });
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
-    block.title && /* @__PURE__ */ jsxs("div", { style: { fontSize: tokens.typography.fontSize.xs, fontWeight: 600, color: tokens.colors.text.secondary, marginBottom: 6 }, children: [
-      block.title,
-      block.multiple ? " (select multiple)" : ""
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: (block.options ?? []).map((opt) => {
-      const isSelected = localSelected.has(opt.id);
-      const optColor = opt.status ? tokens.colors.status[opt.status] : tokens.colors.accent.primary;
-      const isDisabled = opt.disabled || isSubmitted;
-      return /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => toggle(opt.id), disabled: isDisabled, style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
-        padding: "8px 12px",
-        borderRadius: tokens.borderRadius.md,
-        cursor: isDisabled ? "default" : "pointer",
-        border: `1px solid ${isSelected ? optColor : tokens.colors.border.muted}`,
-        backgroundColor: isSelected ? `${optColor}15` : "transparent",
-        transition: "all 150ms",
-        textAlign: "left",
-        fontFamily: tokens.typography.fontFamily.primary,
-        opacity: isDisabled && !isSelected ? 0.5 : 1
-      }, children: [
-        /* @__PURE__ */ jsx("div", { style: {
-          width: 16,
-          height: 16,
-          flexShrink: 0,
-          borderRadius: block.multiple ? 3 : "50%",
-          border: `2px solid ${isSelected ? optColor : tokens.colors.border.muted}`,
-          backgroundColor: isSelected ? optColor : "transparent",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          transition: "all 150ms"
-        }, children: isSelected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: 10, height: 10, fill: "none", stroke: tokens.colors.text.inverse, strokeWidth: 2, children: /* @__PURE__ */ jsx("polyline", { points: "2,6 5,9 10,3" }) }) }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-            opt.status && /* @__PURE__ */ jsx(StatusShape, { status: opt.status, size: 8, color: tokens.colors.status[opt.status] }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.primary, fontWeight: 500 }, children: opt.label })
-          ] }),
-          opt.description && /* @__PURE__ */ jsx("div", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.tertiary, marginTop: 1 }, children: opt.description })
-        ] })
-      ] }, opt.id);
-    }) }),
-    !isSubmitted && onEvent && /* @__PURE__ */ jsx("button", { type: "button", onClick: submit, disabled: localSelected.size === 0, style: {
-      marginTop: 8,
-      padding: "5px 18px",
-      fontSize: tokens.typography.fontSize.xs,
-      fontWeight: 600,
-      borderRadius: tokens.borderRadius.sm,
-      border: `1px solid ${tokens.colors.accent.primary}`,
-      backgroundColor: localSelected.size > 0 ? `${tokens.colors.accent.primary}20` : "transparent",
-      color: localSelected.size > 0 ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,
-      cursor: localSelected.size > 0 ? "pointer" : "not-allowed",
-      fontFamily: tokens.typography.fontFamily.primary,
-      transition: "all 150ms"
-    }, children: "Confirm Selection" }),
-    isSubmitted && /* @__PURE__ */ jsx("div", { style: { marginTop: 6, fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.tertiary, fontStyle: "italic" }, children: "Selection submitted" })
-  ] });
+	const { tokens } = useTheme();
+	const [localSelected, setLocalSelected] = useState(new Set(block.selected ?? []));
+	const isSubmitted = block.submitted;
+	const toggle = (optId) => {
+		if (isSubmitted) return;
+		setLocalSelected((prev) => {
+			const next = new Set(prev);
+			if (block.multiple) next.has(optId) ? next.delete(optId) : next.add(optId);
+			else {
+				next.clear();
+				next.add(optId);
+			}
+			return next;
+		});
+	};
+	const submit = () => {
+		if (localSelected.size === 0 || isSubmitted) return;
+		onEvent?.({
+			blockId: block.id,
+			messageId,
+			action: "select",
+			value: Array.from(localSelected)
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: { marginTop: 8 },
+		children: [
+			block.title && /* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: 600,
+					color: tokens.colors.text.secondary,
+					marginBottom: 6
+				},
+				children: [block.title, block.multiple ? " (select multiple)" : ""]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 4
+				},
+				children: (block.options ?? []).map((opt) => {
+					const isSelected = localSelected.has(opt.id);
+					const optColor = opt.status ? tokens.colors.status[opt.status] : tokens.colors.accent.primary;
+					const isDisabled = opt.disabled || isSubmitted;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => toggle(opt.id),
+						disabled: isDisabled,
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 10,
+							padding: "8px 12px",
+							borderRadius: tokens.borderRadius.md,
+							cursor: isDisabled ? "default" : "pointer",
+							border: `1px solid ${isSelected ? optColor : tokens.colors.border.muted}`,
+							backgroundColor: isSelected ? `${optColor}15` : "transparent",
+							transition: "all 150ms",
+							textAlign: "left",
+							fontFamily: tokens.typography.fontFamily.primary,
+							opacity: isDisabled && !isSelected ? .5 : 1
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								width: 16,
+								height: 16,
+								flexShrink: 0,
+								borderRadius: block.multiple ? 3 : "50%",
+								border: `2px solid ${isSelected ? optColor : tokens.colors.border.muted}`,
+								backgroundColor: isSelected ? optColor : "transparent",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								transition: "all 150ms"
+							},
+							children: isSelected && /* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 12 12",
+								width: 10,
+								height: 10,
+								fill: "none",
+								stroke: tokens.colors.text.inverse,
+								strokeWidth: 2,
+								children: /* @__PURE__ */ jsx("polyline", { points: "2,6 5,9 10,3" })
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								flex: 1,
+								minWidth: 0
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 6
+								},
+								children: [opt.status && /* @__PURE__ */ jsx(StatusShape, {
+									status: opt.status,
+									size: 8,
+									color: tokens.colors.status[opt.status]
+								}), /* @__PURE__ */ jsx("span", {
+									style: {
+										fontSize: tokens.typography.fontSize.sm,
+										color: tokens.colors.text.primary,
+										fontWeight: 500
+									},
+									children: opt.label
+								})]
+							}), opt.description && /* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: tokens.typography.fontSize.xs,
+									color: tokens.colors.text.tertiary,
+									marginTop: 1
+								},
+								children: opt.description
+							})]
+						})]
+					}, opt.id);
+				})
+			}),
+			!isSubmitted && onEvent && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: submit,
+				disabled: localSelected.size === 0,
+				style: {
+					marginTop: 8,
+					padding: "5px 18px",
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: 600,
+					borderRadius: tokens.borderRadius.sm,
+					border: `1px solid ${tokens.colors.accent.primary}`,
+					backgroundColor: localSelected.size > 0 ? `${tokens.colors.accent.primary}20` : "transparent",
+					color: localSelected.size > 0 ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,
+					cursor: localSelected.size > 0 ? "pointer" : "not-allowed",
+					fontFamily: tokens.typography.fontFamily.primary,
+					transition: "all 150ms"
+				},
+				children: "Confirm Selection"
+			}),
+			isSubmitted && /* @__PURE__ */ jsx("div", {
+				style: {
+					marginTop: 6,
+					fontSize: tokens.typography.fontSize.xs,
+					color: tokens.colors.text.tertiary,
+					fontStyle: "italic"
+				},
+				children: "Selection submitted"
+			})
+		]
+	});
 }
 function ConfirmBlock({ block, messageId, onEvent }) {
-  const { tokens } = useTheme();
-  const status = block.status ?? "caution";
-  const color = tokens.colors.status[status];
-  const resolved = block.resolved;
-  return /* @__PURE__ */ jsxs("div", { style: {
-    marginTop: 8,
-    padding: "12px 14px",
-    backgroundColor: `${color}10`,
-    border: `1px solid ${color}30`,
-    borderLeft: `3px solid ${color}`,
-    borderRadius: tokens.borderRadius.md
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
-      /* @__PURE__ */ jsx(StatusShape, { status, size: 12, color }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.sm, fontWeight: 600, color: tokens.colors.text.primary }, children: block.title })
-    ] }),
-    block.detail && /* @__PURE__ */ jsx("div", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.secondary, marginBottom: 8, lineHeight: 1.5 }, children: block.detail }),
-    !resolved && onEvent ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onEvent({ blockId: block.id, messageId, action: "confirm" }), style: {
-        padding: "5px 16px",
-        fontSize: tokens.typography.fontSize.xs,
-        fontWeight: 600,
-        borderRadius: tokens.borderRadius.sm,
-        cursor: "pointer",
-        border: `1px solid ${color}`,
-        backgroundColor: `${color}20`,
-        color,
-        fontFamily: tokens.typography.fontFamily.primary,
-        transition: "all 150ms"
-      }, children: block.confirmLabel ?? "Confirm" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onEvent({ blockId: block.id, messageId, action: "cancel" }), style: {
-        padding: "5px 16px",
-        fontSize: tokens.typography.fontSize.xs,
-        fontWeight: 500,
-        borderRadius: tokens.borderRadius.sm,
-        cursor: "pointer",
-        border: `1px solid ${tokens.colors.border.muted}`,
-        backgroundColor: "transparent",
-        color: tokens.colors.text.secondary,
-        fontFamily: tokens.typography.fontFamily.primary,
-        transition: "all 150ms"
-      }, children: block.cancelLabel ?? "Cancel" })
-    ] }) : resolved ? /* @__PURE__ */ jsx("div", { style: {
-      fontSize: tokens.typography.fontSize.xs,
-      fontWeight: 500,
-      color: resolved === "confirmed" ? tokens.colors.status.normal : tokens.colors.text.tertiary,
-      fontStyle: "italic"
-    }, children: resolved === "confirmed" ? "✓ Confirmed" : "✗ Cancelled" }) : null
-  ] });
+	const { tokens } = useTheme();
+	const status = block.status ?? "caution";
+	const color = tokens.colors.status[status];
+	const resolved = block.resolved;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			marginTop: 8,
+			padding: "12px 14px",
+			backgroundColor: `${color}10`,
+			border: `1px solid ${color}30`,
+			borderLeft: `3px solid ${color}`,
+			borderRadius: tokens.borderRadius.md
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					marginBottom: 4
+				},
+				children: [/* @__PURE__ */ jsx(StatusShape, {
+					status,
+					size: 12,
+					color
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: tokens.typography.fontSize.sm,
+						fontWeight: 600,
+						color: tokens.colors.text.primary
+					},
+					children: block.title
+				})]
+			}),
+			block.detail && /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					color: tokens.colors.text.secondary,
+					marginBottom: 8,
+					lineHeight: 1.5
+				},
+				children: block.detail
+			}),
+			!resolved && onEvent ? /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onEvent({
+						blockId: block.id,
+						messageId,
+						action: "confirm"
+					}),
+					style: {
+						padding: "5px 16px",
+						fontSize: tokens.typography.fontSize.xs,
+						fontWeight: 600,
+						borderRadius: tokens.borderRadius.sm,
+						cursor: "pointer",
+						border: `1px solid ${color}`,
+						backgroundColor: `${color}20`,
+						color,
+						fontFamily: tokens.typography.fontFamily.primary,
+						transition: "all 150ms"
+					},
+					children: block.confirmLabel ?? "Confirm"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onEvent({
+						blockId: block.id,
+						messageId,
+						action: "cancel"
+					}),
+					style: {
+						padding: "5px 16px",
+						fontSize: tokens.typography.fontSize.xs,
+						fontWeight: 500,
+						borderRadius: tokens.borderRadius.sm,
+						cursor: "pointer",
+						border: `1px solid ${tokens.colors.border.muted}`,
+						backgroundColor: "transparent",
+						color: tokens.colors.text.secondary,
+						fontFamily: tokens.typography.fontFamily.primary,
+						transition: "all 150ms"
+					},
+					children: block.cancelLabel ?? "Cancel"
+				})]
+			}) : resolved ? /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: 500,
+					color: resolved === "confirmed" ? tokens.colors.status.normal : tokens.colors.text.tertiary,
+					fontStyle: "italic"
+				},
+				children: resolved === "confirmed" ? "✓ Confirmed" : "✗ Cancelled"
+			}) : null
+		]
+	});
 }
 function CommandBlock({ block, messageId, onEvent }) {
-  const { tokens } = useTheme();
-  const [copied, setCopied] = useState(false);
-  const handleCopy = () => {
-    var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(block.command).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    });
-    if (block.id) onEvent == null ? void 0 : onEvent({ blockId: block.id, messageId, action: "copy", value: block.command });
-  };
-  const handleExecute = () => {
-    if (block.id) onEvent == null ? void 0 : onEvent({ blockId: block.id, messageId, action: "execute", value: block.command });
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, borderRadius: tokens.borderRadius.md, overflow: "hidden", border: `1px solid ${tokens.colors.border.muted}` }, children: [
-    block.label && /* @__PURE__ */ jsx("div", { style: {
-      padding: "5px 12px",
-      fontSize: tokens.typography.fontSize.xxs,
-      fontWeight: 600,
-      color: tokens.colors.text.tertiary,
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      backgroundColor: `${tokens.colors.background.elevated}80`,
-      borderBottom: `1px solid ${tokens.colors.border.muted}`,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between"
-    }, children: /* @__PURE__ */ jsxs("span", { children: [
-      block.label,
-      block.language ? ` · ${block.language}` : ""
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx("pre", { style: {
-        margin: 0,
-        padding: "10px 12px",
-        paddingRight: 80,
-        fontSize: tokens.typography.fontSize.xs,
-        fontFamily: tokens.typography.fontFamily.mono,
-        backgroundColor: `${tokens.colors.background.base}80`,
-        color: tokens.colors.text.primary,
-        overflowX: "auto",
-        lineHeight: 1.5
-      }, children: block.command }),
-      /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 6, right: 8, display: "flex", gap: 4 }, children: [
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: handleCopy, style: {
-          padding: "2px 8px",
-          fontSize: tokens.typography.fontSize.micro,
-          borderRadius: tokens.borderRadius.sm,
-          border: `1px solid ${tokens.colors.border.muted}`,
-          backgroundColor: tokens.colors.background.elevated,
-          color: copied ? tokens.colors.status.normal : tokens.colors.text.tertiary,
-          cursor: "pointer",
-          fontFamily: tokens.typography.fontFamily.primary,
-          fontWeight: 500
-        }, children: copied ? "✓ Copied" : "Copy" }),
-        block.executable && onEvent && block.id && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleExecute, style: {
-          padding: "2px 8px",
-          fontSize: tokens.typography.fontSize.micro,
-          borderRadius: tokens.borderRadius.sm,
-          border: `1px solid ${tokens.colors.accent.primary}60`,
-          backgroundColor: `${tokens.colors.accent.primary}15`,
-          color: safeAccentText(tokens.colors.accent.primary),
-          cursor: "pointer",
-          fontFamily: tokens.typography.fontFamily.primary,
-          fontWeight: 600
-        }, children: "Run" })
-      ] })
-    ] })
-  ] });
+	const { tokens } = useTheme();
+	const [copied, setCopied] = useState(false);
+	const handleCopy = () => {
+		navigator.clipboard?.writeText(block.command).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		});
+		if (block.id) onEvent?.({
+			blockId: block.id,
+			messageId,
+			action: "copy",
+			value: block.command
+		});
+	};
+	const handleExecute = () => {
+		if (block.id) onEvent?.({
+			blockId: block.id,
+			messageId,
+			action: "execute",
+			value: block.command
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			marginTop: 8,
+			borderRadius: tokens.borderRadius.md,
+			overflow: "hidden",
+			border: `1px solid ${tokens.colors.border.muted}`
+		},
+		children: [block.label && /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "5px 12px",
+				fontSize: tokens.typography.fontSize.xxs,
+				fontWeight: 600,
+				color: tokens.colors.text.tertiary,
+				textTransform: "uppercase",
+				letterSpacing: "0.05em",
+				backgroundColor: `${tokens.colors.background.elevated}80`,
+				borderBottom: `1px solid ${tokens.colors.border.muted}`,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between"
+			},
+			children: /* @__PURE__ */ jsxs("span", { children: [block.label, block.language ? ` · ${block.language}` : ""] })
+		}), /* @__PURE__ */ jsxs("div", {
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ jsx("pre", {
+				style: {
+					margin: 0,
+					padding: "10px 12px",
+					paddingRight: 80,
+					fontSize: tokens.typography.fontSize.xs,
+					fontFamily: tokens.typography.fontFamily.mono,
+					backgroundColor: `${tokens.colors.background.base}80`,
+					color: tokens.colors.text.primary,
+					overflowX: "auto",
+					lineHeight: 1.5
+				},
+				children: block.command
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					top: 6,
+					right: 8,
+					display: "flex",
+					gap: 4
+				},
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleCopy,
+					style: {
+						padding: "2px 8px",
+						fontSize: tokens.typography.fontSize.micro,
+						borderRadius: tokens.borderRadius.sm,
+						border: `1px solid ${tokens.colors.border.muted}`,
+						backgroundColor: tokens.colors.background.elevated,
+						color: copied ? tokens.colors.status.normal : tokens.colors.text.tertiary,
+						cursor: "pointer",
+						fontFamily: tokens.typography.fontFamily.primary,
+						fontWeight: 500
+					},
+					children: copied ? "✓ Copied" : "Copy"
+				}), block.executable && onEvent && block.id && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleExecute,
+					style: {
+						padding: "2px 8px",
+						fontSize: tokens.typography.fontSize.micro,
+						borderRadius: tokens.borderRadius.sm,
+						border: `1px solid ${tokens.colors.accent.primary}60`,
+						backgroundColor: `${tokens.colors.accent.primary}15`,
+						color: safeAccentText(tokens.colors.accent.primary),
+						cursor: "pointer",
+						fontFamily: tokens.typography.fontFamily.primary,
+						fontWeight: 600
+					},
+					children: "Run"
+				})]
+			})]
+		})]
+	});
 }
 function KVBlock({ block }) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsxs("div", { style: {
-    marginTop: 8,
-    padding: "8px 12px",
-    backgroundColor: `${tokens.colors.background.elevated}40`,
-    borderRadius: tokens.borderRadius.md,
-    border: `1px solid ${tokens.colors.border.muted}`
-  }, children: [
-    block.title && /* @__PURE__ */ jsx("div", { style: {
-      fontSize: tokens.typography.fontSize.xxs,
-      fontWeight: 600,
-      color: tokens.colors.text.tertiary,
-      textTransform: "uppercase",
-      letterSpacing: "0.05em",
-      marginBottom: 6
-    }, children: block.title }),
-    /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "3px 16px", fontSize: tokens.typography.fontSize.xs }, children: (block.pairs ?? []).map((p, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary, whiteSpace: "nowrap" }, children: p.key }),
-      /* @__PURE__ */ jsx("span", { style: {
-        color: tokens.colors.text.primary,
-        fontFamily: p.mono ? tokens.typography.fontFamily.mono : void 0,
-        fontVariantNumeric: p.mono ? "tabular-nums" : void 0
-      }, children: p.value })
-    ] }, i)) })
-  ] });
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			marginTop: 8,
+			padding: "8px 12px",
+			backgroundColor: `${tokens.colors.background.elevated}40`,
+			borderRadius: tokens.borderRadius.md,
+			border: `1px solid ${tokens.colors.border.muted}`
+		},
+		children: [block.title && /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: tokens.typography.fontSize.xxs,
+				fontWeight: 600,
+				color: tokens.colors.text.tertiary,
+				textTransform: "uppercase",
+				letterSpacing: "0.05em",
+				marginBottom: 6
+			},
+			children: block.title
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "auto 1fr",
+				gap: "3px 16px",
+				fontSize: tokens.typography.fontSize.xs
+			},
+			children: (block.pairs ?? []).map((p, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					color: tokens.colors.text.tertiary,
+					whiteSpace: "nowrap"
+				},
+				children: p.key
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					color: tokens.colors.text.primary,
+					fontFamily: p.mono ? tokens.typography.fontFamily.mono : void 0,
+					fontVariantNumeric: p.mono ? "tabular-nums" : void 0
+				},
+				children: p.value
+			})] }, i))
+		})]
+	});
 }
 function renderBlock(block, index, messageId, onEvent) {
-  switch (block.type) {
-    case "alert":
-      return /* @__PURE__ */ jsx(AlertBlock, { block }, index);
-    case "telemetry":
-      return /* @__PURE__ */ jsx(TelemetryBlock, { block }, index);
-    case "progress":
-      return /* @__PURE__ */ jsx(ProgressBlock, { block }, index);
-    case "table":
-      return /* @__PURE__ */ jsx(TableBlock, { block }, index);
-    case "actions":
-      return /* @__PURE__ */ jsx(ActionsBlock, { block }, index);
-    case "choice":
-      return /* @__PURE__ */ jsx(ChoiceBlock, { block, messageId, onEvent }, index);
-    case "confirm":
-      return /* @__PURE__ */ jsx(ConfirmBlock, { block, messageId, onEvent }, index);
-    case "command":
-      return /* @__PURE__ */ jsx(CommandBlock, { block, messageId, onEvent }, index);
-    case "kv":
-      return /* @__PURE__ */ jsx(KVBlock, { block }, index);
-    default:
-      return null;
-  }
+	switch (block.type) {
+		case "alert": return /* @__PURE__ */ jsx(AlertBlock, { block }, index);
+		case "telemetry": return /* @__PURE__ */ jsx(TelemetryBlock, { block }, index);
+		case "progress": return /* @__PURE__ */ jsx(ProgressBlock, { block }, index);
+		case "table": return /* @__PURE__ */ jsx(TableBlock, { block }, index);
+		case "actions": return /* @__PURE__ */ jsx(ActionsBlock, { block }, index);
+		case "choice": return /* @__PURE__ */ jsx(ChoiceBlock, {
+			block,
+			messageId,
+			onEvent
+		}, index);
+		case "confirm": return /* @__PURE__ */ jsx(ConfirmBlock, {
+			block,
+			messageId,
+			onEvent
+		}, index);
+		case "command": return /* @__PURE__ */ jsx(CommandBlock, {
+			block,
+			messageId,
+			onEvent
+		}, index);
+		case "kv": return /* @__PURE__ */ jsx(KVBlock, { block }, index);
+		default: return null;
+	}
 }
-const ChatPanel = memo(function ChatPanel2({
-  messages = [],
-  onSend,
-  loading = false,
-  placeholder = "Type a message...",
-  title,
-  subtitle,
-  disabled = false,
-  showTimestamps = true,
-  height = "100%",
-  onClear,
-  onBlockEvent,
-  style
-}) {
-  const { tokens } = useTheme();
-  const [input, setInput] = useState("");
-  const messagesEndRef = useRef(null);
-  const inputRef = useRef(null);
-  useEffect(() => {
-    var _a;
-    (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-  }, [messages, loading]);
-  const handleSend = useCallback(() => {
-    const text = input.trim();
-    if (!text || disabled) return;
-    onSend(text);
-    setInput("");
-    if (inputRef.current) inputRef.current.style.height = "auto";
-  }, [input, onSend, disabled]);
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }, [handleSend]);
-  const handleInput = useCallback((e) => {
-    setInput(e.target.value);
-    const el = e.target;
-    el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
-  }, []);
-  const formatTime = (ts) => {
-    if (!ts) return "";
-    return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  };
-  const renderContent = (text) => {
-    const parts = [];
-    const lines = text.split("\n");
-    let inCode = false;
-    let codeBlock = [];
-    lines.forEach((line, i) => {
-      if (line.startsWith("```")) {
-        if (inCode) {
-          parts.push(
-            /* @__PURE__ */ jsx("pre", { style: {
-              backgroundColor: `${tokens.colors.background.base}80`,
-              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-              borderRadius: tokens.borderRadius.sm,
-              fontSize: tokens.typography.fontSize.xs,
-              fontFamily: tokens.typography.fontFamily.mono,
-              overflowX: "auto",
-              margin: `${tokens.spacing.xs} 0`,
-              border: `1px solid ${tokens.colors.border.muted}`
-            }, children: codeBlock.join("\n") }, `code-${i}`)
-          );
-          codeBlock = [];
-          inCode = false;
-        } else {
-          inCode = true;
-        }
-        return;
-      }
-      if (inCode) {
-        codeBlock.push(line);
-        return;
-      }
-      let processed = line;
-      if (line.includes("**")) {
-        const segments = line.split(/\*\*(.*?)\*\*/g);
-        processed = segments.map((seg, j) => j % 2 === 1 ? /* @__PURE__ */ jsx("strong", { children: seg }, j) : seg);
-      }
-      if (typeof processed === "string" && processed.includes("`")) {
-        const segments = processed.split(/`(.*?)`/g);
-        processed = segments.map(
-          (seg, j) => j % 2 === 1 ? /* @__PURE__ */ jsx("code", { style: {
-            backgroundColor: `${tokens.colors.background.base}80`,
-            padding: "1px 4px",
-            borderRadius: "3px",
-            fontSize: "0.9em",
-            fontFamily: tokens.typography.fontFamily.mono
-          }, children: seg }, j) : seg
-        );
-      }
-      parts.push(/* @__PURE__ */ jsxs(React.Fragment, { children: [
-        processed,
-        i < lines.length - 1 && /* @__PURE__ */ jsx("br", {})
-      ] }, `line-${i}`));
-    });
-    return parts;
-  };
-  const TypingDots = () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", padding: tokens.spacing.xs }, children: [
-    [0, 1, 2].map((i) => /* @__PURE__ */ jsx("div", { style: {
-      width: 6,
-      height: 6,
-      borderRadius: "50%",
-      backgroundColor: tokens.colors.accent.primary,
-      opacity: 0.6,
-      animation: `zendir-typing 1.2s ease-in-out ${i * 0.2}s infinite`
-    } }, i)),
-    /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-typing { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }` })
-  ] });
-  return /* @__PURE__ */ jsxs("div", { style: {
-    display: "flex",
-    flexDirection: "column",
-    height: typeof height === "number" ? `${height}px` : height,
-    fontFamily: tokens.typography.fontFamily.primary,
-    backgroundColor: tokens.colors.background.base,
-    borderRadius: tokens.borderRadius.lg,
-    border: `1px solid ${tokens.colors.border.muted}`,
-    overflow: "hidden",
-    ...style
-  }, children: [
-    (title || onClear) && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-      borderBottom: `1px solid ${tokens.colors.border.muted}`,
-      backgroundColor: tokens.colors.background.surface
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx("div", { style: { fontSize: tokens.typography.fontSize.sm, fontWeight: 600, color: tokens.colors.text.primary }, children: title }),
-        subtitle && /* @__PURE__ */ jsx("div", { style: { fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.tertiary }, children: subtitle })
-      ] }),
-      onClear && messages.length > 0 && /* @__PURE__ */ jsx("button", { onClick: onClear, style: {
-        fontSize: tokens.typography.fontSize.xxs,
-        color: tokens.colors.text.tertiary,
-        backgroundColor: "transparent",
-        border: "none",
-        cursor: "pointer",
-        padding: "4px 8px",
-        borderRadius: tokens.borderRadius.sm,
-        fontFamily: tokens.typography.fontFamily.primary
-      }, children: "Clear" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "log",
-        "aria-live": "polite",
-        "aria-label": "Chat messages",
-        style: {
-          flex: 1,
-          overflow: "auto",
-          padding: tokens.spacing.md,
-          display: "flex",
-          flexDirection: "column",
-          gap: tokens.spacing.sm
-        },
-        children: [
-          messages.length === 0 && /* @__PURE__ */ jsx("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flex: 1,
-            color: tokens.colors.text.tertiary,
-            fontSize: tokens.typography.fontSize.sm
-          }, children: "No messages yet" }),
-          messages.map((msg) => {
-            const isUser = msg.role === "user";
-            const isSystem = msg.role === "system";
-            const severity = msg.severity;
-            const severityColor = severity ? tokens.colors.status[severity] : void 0;
-            const systemBg = severityColor ? `${severityColor}12` : `${tokens.colors.status.caution}10`;
-            const systemBorder = severityColor ? `${severityColor}30` : `${tokens.colors.status.caution}20`;
-            const systemAccent = severityColor || void 0;
-            return /* @__PURE__ */ jsxs("div", { style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: isUser ? "flex-end" : "flex-start",
-              maxWidth: isSystem ? "100%" : "85%",
-              alignSelf: isUser ? "flex-end" : "flex-start"
-            }, children: [
-              /* @__PURE__ */ jsxs("div", { style: {
-                padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-                borderRadius: tokens.borderRadius.md,
-                backgroundColor: isUser ? `${tokens.colors.accent.primary}20` : isSystem ? systemBg : tokens.colors.background.surface,
-                border: `1px solid ${isUser ? `${tokens.colors.accent.primary}30` : isSystem ? systemBorder : tokens.colors.border.muted}`,
-                borderLeft: isSystem && systemAccent ? `3px solid ${systemAccent}` : void 0,
-                fontSize: tokens.typography.fontSize.sm,
-                color: tokens.colors.text.primary,
-                lineHeight: 1.6,
-                width: isSystem ? "100%" : "auto",
-                opacity: msg.status === "sending" ? 0.7 : 1
-              }, children: [
-                isSystem && severity && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [
-                  /* @__PURE__ */ jsx(StatusShape, { status: severity, size: 10, color: severityColor }),
-                  /* @__PURE__ */ jsx("span", { style: {
-                    fontSize: tokens.typography.fontSize.xxs,
-                    fontWeight: 600,
-                    color: severityColor,
-                    textTransform: "uppercase",
-                    letterSpacing: "0.04em"
-                  }, children: severity })
-                ] }),
-                renderContent(msg.content),
-                Array.isArray(msg.blocks) && msg.blocks.map((block, i) => block ? renderBlock(block, i, msg.id, onBlockEvent) : null),
-                msg.actions && msg.actions.length > 0 && /* @__PURE__ */ jsx("div", { style: {
-                  display: "flex",
-                  gap: tokens.spacing.xs,
-                  marginTop: tokens.spacing.xs,
-                  paddingTop: tokens.spacing.xs,
-                  borderTop: `1px solid ${tokens.colors.border.muted}`
-                }, children: msg.actions.map((action, i) => /* @__PURE__ */ jsx("button", { onClick: action.onClick, style: {
-                  fontSize: tokens.typography.fontSize.xxs,
-                  padding: "2px 10px",
-                  borderRadius: tokens.borderRadius.sm,
-                  border: `1px solid ${tokens.colors.accent.primary}40`,
-                  backgroundColor: `${tokens.colors.accent.primary}10`,
-                  color: safeAccentText(tokens.colors.accent.primary),
-                  cursor: "pointer",
-                  fontFamily: tokens.typography.fontFamily.primary
-                }, children: action.label }, i)) })
-              ] }),
-              showTimestamps && msg.timestamp && /* @__PURE__ */ jsxs("div", { style: {
-                fontSize: tokens.typography.fontSize.micro,
-                color: tokens.colors.text.tertiary,
-                marginTop: "2px",
-                paddingLeft: tokens.spacing.xs,
-                paddingRight: tokens.spacing.xs,
-                display: "flex",
-                alignItems: "center",
-                gap: "4px"
-              }, children: [
-                formatTime(msg.timestamp),
-                msg.status === "error" && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical }, children: "• Failed" })
-              ] })
-            ] }, msg.id);
-          }),
-          loading && /* @__PURE__ */ jsx("div", { style: {
-            alignSelf: "flex-start",
-            padding: `${tokens.spacing.xs} ${tokens.spacing.md}`,
-            borderRadius: tokens.borderRadius.md,
-            backgroundColor: tokens.colors.background.surface,
-            border: `1px solid ${tokens.colors.border.muted}`
-          }, children: /* @__PURE__ */ jsx(TypingDots, {}) }),
-          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "flex-end",
-      gap: tokens.spacing.sm,
-      padding: tokens.spacing.md,
-      borderTop: `1px solid ${tokens.colors.border.muted}`,
-      backgroundColor: tokens.colors.background.surface
-    }, children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: inputRef,
-          value: input,
-          onChange: handleInput,
-          onKeyDown: handleKeyDown,
-          placeholder,
-          disabled,
-          "aria-label": "Message input",
-          rows: 1,
-          style: {
-            flex: 1,
-            resize: "none",
-            border: `1px solid ${tokens.colors.border.muted}`,
-            borderRadius: tokens.borderRadius.md,
-            padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-            fontSize: tokens.typography.fontSize.sm,
-            fontFamily: tokens.typography.fontFamily.primary,
-            color: tokens.colors.text.primary,
-            backgroundColor: tokens.colors.background.base,
-            outline: "none",
-            transition: "border-color 150ms, background-color 150ms",
-            maxHeight: 120,
-            lineHeight: 1.5,
-            overflowY: "auto"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("button", { onClick: handleSend, disabled: disabled || !input.trim(), "aria-label": "Send message", style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 44,
-        height: 44,
-        borderRadius: tokens.borderRadius.md,
-        border: "none",
-        backgroundColor: input.trim() ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}20`,
-        color: input.trim() ? tokens.colors.text.inverse : tokens.colors.text.tertiary,
-        cursor: input.trim() && !disabled ? "pointer" : "not-allowed",
-        transition: tokens.animation.fast,
-        flexShrink: 0
-      }, children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })
-    ] })
-  ] });
+var ChatPanel = memo(function ChatPanel({ messages = [], onSend, loading = false, placeholder = "Type a message...", title, subtitle, disabled = false, showTimestamps = true, height = "100%", onClear, onBlockEvent, style }) {
+	const { tokens } = useTheme();
+	const [input, setInput] = useState("");
+	const messagesEndRef = useRef(null);
+	const inputRef = useRef(null);
+	useEffect(() => {
+		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [messages, loading]);
+	const handleSend = useCallback(() => {
+		const text = input.trim();
+		if (!text || disabled) return;
+		onSend(text);
+		setInput("");
+		if (inputRef.current) inputRef.current.style.height = "auto";
+	}, [
+		input,
+		onSend,
+		disabled
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	}, [handleSend]);
+	const handleInput = useCallback((e) => {
+		setInput(e.target.value);
+		const el = e.target;
+		el.style.height = "auto";
+		el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+	}, []);
+	const formatTime = (ts) => {
+		if (!ts) return "";
+		return new Date(ts).toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	};
+	const renderContent = (text) => {
+		const parts = [];
+		const lines = text.split("\n");
+		let inCode = false;
+		let codeBlock = [];
+		lines.forEach((line, i) => {
+			if (line.startsWith("```")) {
+				if (inCode) {
+					parts.push(/* @__PURE__ */ jsx("pre", {
+						style: {
+							backgroundColor: `${tokens.colors.background.base}80`,
+							padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+							borderRadius: tokens.borderRadius.sm,
+							fontSize: tokens.typography.fontSize.xs,
+							fontFamily: tokens.typography.fontFamily.mono,
+							overflowX: "auto",
+							margin: `${tokens.spacing.xs} 0`,
+							border: `1px solid ${tokens.colors.border.muted}`
+						},
+						children: codeBlock.join("\n")
+					}, `code-${i}`));
+					codeBlock = [];
+					inCode = false;
+				} else inCode = true;
+				return;
+			}
+			if (inCode) {
+				codeBlock.push(line);
+				return;
+			}
+			let processed = line;
+			if (line.includes("**")) processed = line.split(/\*\*(.*?)\*\*/g).map((seg, j) => j % 2 === 1 ? /* @__PURE__ */ jsx("strong", { children: seg }, j) : seg);
+			if (typeof processed === "string" && processed.includes("`")) processed = processed.split(/`(.*?)`/g).map((seg, j) => j % 2 === 1 ? /* @__PURE__ */ jsx("code", {
+				style: {
+					backgroundColor: `${tokens.colors.background.base}80`,
+					padding: "1px 4px",
+					borderRadius: "3px",
+					fontSize: "0.9em",
+					fontFamily: tokens.typography.fontFamily.mono
+				},
+				children: seg
+			}, j) : seg);
+			parts.push(/* @__PURE__ */ jsxs(React.Fragment, { children: [processed, i < lines.length - 1 && /* @__PURE__ */ jsx("br", {})] }, `line-${i}`));
+		});
+		return parts;
+	};
+	const TypingDots = () => /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "4px",
+			padding: tokens.spacing.xs
+		},
+		children: [[
+			0,
+			1,
+			2
+		].map((i) => /* @__PURE__ */ jsx("div", { style: {
+			width: 6,
+			height: 6,
+			borderRadius: "50%",
+			backgroundColor: tokens.colors.accent.primary,
+			opacity: .6,
+			animation: `zendir-typing 1.2s ease-in-out ${i * .2}s infinite`
+		} }, i)), /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-typing { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }` })]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			height: typeof height === "number" ? `${height}px` : height,
+			fontFamily: tokens.typography.fontFamily.primary,
+			backgroundColor: tokens.colors.background.base,
+			borderRadius: tokens.borderRadius.lg,
+			border: `1px solid ${tokens.colors.border.muted}`,
+			overflow: "hidden",
+			...style
+		},
+		children: [
+			(title || onClear) && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					backgroundColor: tokens.colors.background.surface
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: tokens.typography.fontSize.sm,
+						fontWeight: 600,
+						color: tokens.colors.text.primary
+					},
+					children: title
+				}), subtitle && /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: tokens.typography.fontSize.xxs,
+						color: tokens.colors.text.tertiary
+					},
+					children: subtitle
+				})] }), onClear && messages.length > 0 && /* @__PURE__ */ jsx("button", {
+					onClick: onClear,
+					style: {
+						fontSize: tokens.typography.fontSize.xxs,
+						color: tokens.colors.text.tertiary,
+						backgroundColor: "transparent",
+						border: "none",
+						cursor: "pointer",
+						padding: "4px 8px",
+						borderRadius: tokens.borderRadius.sm,
+						fontFamily: tokens.typography.fontFamily.primary
+					},
+					children: "Clear"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "log",
+				"aria-live": "polite",
+				"aria-label": "Chat messages",
+				style: {
+					flex: 1,
+					overflow: "auto",
+					padding: tokens.spacing.md,
+					display: "flex",
+					flexDirection: "column",
+					gap: tokens.spacing.sm
+				},
+				children: [
+					messages.length === 0 && /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							flex: 1,
+							color: tokens.colors.text.tertiary,
+							fontSize: tokens.typography.fontSize.sm
+						},
+						children: "No messages yet"
+					}),
+					messages.map((msg) => {
+						const isUser = msg.role === "user";
+						const isSystem = msg.role === "system";
+						const severity = msg.severity;
+						const severityColor = severity ? tokens.colors.status[severity] : void 0;
+						const systemBg = severityColor ? `${severityColor}12` : `${tokens.colors.status.caution}10`;
+						const systemBorder = severityColor ? `${severityColor}30` : `${tokens.colors.status.caution}20`;
+						const systemAccent = severityColor || void 0;
+						return /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								alignItems: isUser ? "flex-end" : "flex-start",
+								maxWidth: isSystem ? "100%" : "85%",
+								alignSelf: isUser ? "flex-end" : "flex-start"
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+									borderRadius: tokens.borderRadius.md,
+									backgroundColor: isUser ? `${tokens.colors.accent.primary}20` : isSystem ? systemBg : tokens.colors.background.surface,
+									border: `1px solid ${isUser ? `${tokens.colors.accent.primary}30` : isSystem ? systemBorder : tokens.colors.border.muted}`,
+									borderLeft: isSystem && systemAccent ? `3px solid ${systemAccent}` : void 0,
+									fontSize: tokens.typography.fontSize.sm,
+									color: tokens.colors.text.primary,
+									lineHeight: 1.6,
+									width: isSystem ? "100%" : "auto",
+									opacity: msg.status === "sending" ? .7 : 1
+								},
+								children: [
+									isSystem && severity && /* @__PURE__ */ jsxs("div", {
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: 6,
+											marginBottom: 4
+										},
+										children: [/* @__PURE__ */ jsx(StatusShape, {
+											status: severity,
+											size: 10,
+											color: severityColor
+										}), /* @__PURE__ */ jsx("span", {
+											style: {
+												fontSize: tokens.typography.fontSize.xxs,
+												fontWeight: 600,
+												color: severityColor,
+												textTransform: "uppercase",
+												letterSpacing: "0.04em"
+											},
+											children: severity
+										})]
+									}),
+									renderContent(msg.content),
+									Array.isArray(msg.blocks) && msg.blocks.map((block, i) => block ? renderBlock(block, i, msg.id, onBlockEvent) : null),
+									msg.actions && msg.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+										style: {
+											display: "flex",
+											gap: tokens.spacing.xs,
+											marginTop: tokens.spacing.xs,
+											paddingTop: tokens.spacing.xs,
+											borderTop: `1px solid ${tokens.colors.border.muted}`
+										},
+										children: msg.actions.map((action, i) => /* @__PURE__ */ jsx("button", {
+											onClick: action.onClick,
+											style: {
+												fontSize: tokens.typography.fontSize.xxs,
+												padding: "2px 10px",
+												borderRadius: tokens.borderRadius.sm,
+												border: `1px solid ${tokens.colors.accent.primary}40`,
+												backgroundColor: `${tokens.colors.accent.primary}10`,
+												color: safeAccentText(tokens.colors.accent.primary),
+												cursor: "pointer",
+												fontFamily: tokens.typography.fontFamily.primary
+											},
+											children: action.label
+										}, i))
+									})
+								]
+							}), showTimestamps && msg.timestamp && /* @__PURE__ */ jsxs("div", {
+								style: {
+									fontSize: tokens.typography.fontSize.micro,
+									color: tokens.colors.text.tertiary,
+									marginTop: "2px",
+									paddingLeft: tokens.spacing.xs,
+									paddingRight: tokens.spacing.xs,
+									display: "flex",
+									alignItems: "center",
+									gap: "4px"
+								},
+								children: [formatTime(msg.timestamp), msg.status === "error" && /* @__PURE__ */ jsx("span", {
+									style: { color: tokens.colors.status.critical },
+									children: "• Failed"
+								})]
+							})]
+						}, msg.id);
+					}),
+					loading && /* @__PURE__ */ jsx("div", {
+						style: {
+							alignSelf: "flex-start",
+							padding: `${tokens.spacing.xs} ${tokens.spacing.md}`,
+							borderRadius: tokens.borderRadius.md,
+							backgroundColor: tokens.colors.background.surface,
+							border: `1px solid ${tokens.colors.border.muted}`
+						},
+						children: /* @__PURE__ */ jsx(TypingDots, {})
+					}),
+					/* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "flex-end",
+					gap: tokens.spacing.sm,
+					padding: tokens.spacing.md,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					backgroundColor: tokens.colors.background.surface
+				},
+				children: [/* @__PURE__ */ jsx("textarea", {
+					ref: inputRef,
+					value: input,
+					onChange: handleInput,
+					onKeyDown: handleKeyDown,
+					placeholder,
+					disabled,
+					"aria-label": "Message input",
+					rows: 1,
+					style: {
+						flex: 1,
+						resize: "none",
+						border: `1px solid ${tokens.colors.border.muted}`,
+						borderRadius: tokens.borderRadius.md,
+						padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+						fontSize: tokens.typography.fontSize.sm,
+						fontFamily: tokens.typography.fontFamily.primary,
+						color: tokens.colors.text.primary,
+						backgroundColor: tokens.colors.background.base,
+						outline: "none",
+						transition: "border-color 150ms, background-color 150ms",
+						maxHeight: 120,
+						lineHeight: 1.5,
+						overflowY: "auto"
+					}
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: handleSend,
+					disabled: disabled || !input.trim(),
+					"aria-label": "Send message",
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						width: 44,
+						height: 44,
+						borderRadius: tokens.borderRadius.md,
+						border: "none",
+						backgroundColor: input.trim() ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}20`,
+						color: input.trim() ? tokens.colors.text.inverse : tokens.colors.text.tertiary,
+						cursor: input.trim() && !disabled ? "pointer" : "not-allowed",
+						transition: tokens.animation.fast,
+						flexShrink: 0
+					},
+					children: /* @__PURE__ */ jsx("svg", {
+						width: "18",
+						height: "18",
+						viewBox: "0 0 24 24",
+						fill: "currentColor",
+						children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+					})
+				})]
+			})
+		]
+	});
 });
-export {
-  CHAT_RESPONSE_JSON_PROMPT,
-  CHAT_RESPONSE_MCP_TOOL,
-  CHAT_RESPONSE_TOOL_SCHEMA,
-  CHAT_RESPONSE_YAML_PROMPT,
-  CHAT_STATUS_RULES_PROMPT,
-  ChatPanel,
-  createChatResponseParser,
-  parseChatResponse,
-  parseMcpToolResult
-};
-//# sourceMappingURL=ChatPanel.js.map
+//#endregion
+export { CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ChatPanel, ChatPanel as default, createChatResponseParser, parseChatResponse, parseMcpToolResult };
+
+//# sourceMappingURL=ChatPanel.js.map