@zendir/ui 0.1.0

package/dist/react/core/ChatPanel.js

@@ -0,0 +1,1144 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { memo, useState, useRef, useEffect, useCallback } from "react";
+import { safeAccentText } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+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 {};
+  }
+}
+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;
+  });
+}
+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)}`;
+}
+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);
+}
+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 };
+}
+function createChatResponseParser(options = {}) {
+  return (raw, format) => {
+    return parseChatResponse(raw, format ?? options.defaultFormat ?? "auto", options);
+  };
+}
+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 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" }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+const CHAT_RESPONSE_JSON_PROMPT = `When reporting telemetry, status, or alerts, respond with a JSON object:
+
+{
+  "content": "Plain text explanation (supports **markdown**).",
+  "severity": "normal" | "standby" | "caution" | "serious" | "critical" | "off",
+  "blocks": [
+    { "type": "alert", "status": "caution", "title": "Alert Title", "detail": "Description" },
+    { "type": "telemetry", "title": "Subsystem", "items": [{ "label": "Temp", "value": 72, "unit": "°C", "status": "normal" }] },
+    { "type": "progress", "label": "Operation", "value": 75, "max": 100, "status": "normal" },
+    { "type": "table", "title": "Data", "columns": ["Col1", "Col2"], "rows": [["val1", "val2"]] },
+    { "type": "choice", "id": "unique-id", "title": "Pick one", "options": [{ "id": "opt1", "label": "Option 1" }] },
+    { "type": "confirm", "id": "unique-id", "status": "caution", "title": "Confirm action" },
+    { "type": "command", "id": "cmd-id", "command": "CMD SAT-001 EXECUTE", "executable": true },
+    { "type": "kv", "title": "Context", "pairs": [{ "key": "Spacecraft", "value": "SAT-001" }] }
+  ]
+}
+
+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:
+
+content: Your plain-text or markdown response here.
+severity: normal
+blocks:
+  - type: alert
+    status: caution
+    title: Alert Title
+    detail: Optional detail
+  - type: telemetry
+    title: Subsystem
+    items:
+      - label: Parameter
+        value: 42.5
+        unit: "°C"
+        status: normal
+  - type: progress
+    label: Operation
+    value: 75
+    max: 100
+    status: normal
+  - type: choice
+    id: unique-id
+    title: Pick one
+    options:
+      - id: opt1
+        label: Option 1
+        status: normal
+  - type: command
+    id: cmd-id
+    language: CCSDS-TC
+    command: CMD SAT-001 EXECUTE
+    executable: true
+  - type: kv
+    title: Context
+    pairs:
+      - key: Spacecraft
+        value: SAT-001
+
+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:
+- 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
+- Memory/Storage: normal <70%, caution 70-85%, serious 85-95%, critical >95%
+
+General rules:
+- "normal"   → Operating within nominal parameters
+- "standby"  → Idle, waiting, or scheduled
+- "caution"  → Approaching a limit
+- "serious"  → At or exceeding a soft limit
+- "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 }) });
+  }
+}
+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 })
+    ] })
+  ] });
+}
+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);
+    }) })
+  ] });
+}
+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` } }) })
+  ] });
+}
+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)) })
+    ] }) })
+  ] });
+}
+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);
+  }) });
+}
+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" })
+  ] });
+}
+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
+  ] });
+}
+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" })
+      ] })
+    ] })
+  ] });
+}
+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)) })
+  ] });
+}
+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;
+  }
+}
+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: tokens.animation.fast,
+            maxHeight: 120,
+            lineHeight: 1.5
+          }
+        }
+      ),
+      /* @__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