@echothink-ui/agent 0.1.0

package/dist/index.js

@@ -0,0 +1,2666 @@
+// src/components/ChatAgentRail.tsx
+import clsx5 from "clsx";
+
+// src/components/AgentMessageList.tsx
+import * as React from "react";
+import clsx from "clsx";
+import { StatusDot, Tag, statusLabel } from "@echothink-ui/core";
+
+// src/components/utils.ts
+var EMPTY_MARK = "\u2014";
+function formatDateTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(date);
+}
+function formatTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }).format(date);
+}
+function formatDuration(durationMs) {
+  if (durationMs == null) return EMPTY_MARK;
+  if (durationMs < 1e3) return `${Math.round(durationMs)} ms`;
+  return `${(durationMs / 1e3).toFixed(durationMs < 1e4 ? 1 : 0)} s`;
+}
+function jsonPreview(value, redacted = false, maxLength = 120) {
+  if (redacted) return "[redacted]";
+  if (value == null) return EMPTY_MARK;
+  const text = typeof value === "string" ? value : JSON.stringify(value);
+  if (!text) return EMPTY_MARK;
+  return text.length > maxLength ? `${text.slice(0, maxLength - 1)}\u2026` : text;
+}
+function prettyJson(value, redacted = false) {
+  if (redacted) return "[redacted]";
+  if (value == null) return EMPTY_MARK;
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+function stateLabel(state) {
+  switch (state) {
+    case "idle":
+      return "Idle";
+    case "listening":
+      return "Listening";
+    case "thinking":
+      return "Thinking";
+    case "tool-calling":
+      return "Calling tools";
+    case "waiting-for-user":
+      return "Waiting for user";
+    case "interrupted":
+      return "Interrupted";
+    case "failed":
+      return "Failed";
+    case "completed":
+      return "Completed";
+  }
+}
+function isActiveAgentState(state) {
+  return state === "listening" || state === "thinking" || state === "tool-calling";
+}
+function statusSeverity(status) {
+  if (status === "failed" || status === "blocked" || status === "approval-required") {
+    return "danger";
+  }
+  if (status === "warning" || status === "pending-approval") return "warning";
+  if (status === "completed" || status === "succeeded" || status === "synced") return "success";
+  if (status === "running" || status === "in-progress" || status === "active") return "info";
+  return "neutral";
+}
+function riskSeverity(riskLevel = "low") {
+  if (riskLevel === "critical" || riskLevel === "high") return "danger";
+  if (riskLevel === "medium") return "warning";
+  return "info";
+}
+function safetySeverity(check) {
+  if (check.status === "pass") return "success";
+  if (check.status === "warn") return "warning";
+  return "danger";
+}
+function mergeStyle(base, incoming) {
+  return incoming ? { ...base, ...incoming } : base;
+}
+function diffPlanSteps(before, after) {
+  const beforeById = new Map(before.map((step) => [step.id, step]));
+  const afterById = new Map(after.map((step) => [step.id, step]));
+  const ids = Array.from(
+    /* @__PURE__ */ new Set([...after.map((step) => step.id), ...before.map((step) => step.id)])
+  );
+  return ids.map((id) => {
+    const beforeStep = beforeById.get(id);
+    const afterStep = afterById.get(id);
+    if (!beforeStep && afterStep) {
+      return { id, after: afterStep, status: "added", severity: "success" };
+    }
+    if (beforeStep && !afterStep) {
+      return { id, before: beforeStep, status: "removed", severity: "danger" };
+    }
+    const changed = JSON.stringify(beforeStep) !== JSON.stringify(afterStep);
+    return {
+      id,
+      before: beforeStep,
+      after: afterStep,
+      status: changed ? "modified" : "unchanged",
+      severity: changed ? "warning" : "neutral"
+    };
+  });
+}
+
+// src/components/AgentMessageList.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var roleLabels = {
+  user: "You",
+  agent: "Agent",
+  system: "System",
+  tool: "Tool"
+};
+function AgentMessageList({
+  messages,
+  streaming,
+  autoScroll = true,
+  className,
+  style,
+  ...props
+}) {
+  const listRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!autoScroll) return;
+    const node = listRef.current;
+    if (!node) return;
+    node.scrollTo({ top: node.scrollHeight, behavior: "smooth" });
+  }, [autoScroll, messages.length, streaming]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref: listRef,
+      role: "log",
+      "aria-live": streaming ? "polite" : "off",
+      "aria-relevant": "additions text",
+      className: clsx("eth-message-list", "eth-agent-message-list", className),
+      "data-eth-component": "AgentMessageList",
+      style: mergeStyle(
+        {
+          background: "var(--eth-color-layer-01)",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          maxHeight: "100%",
+          overflowY: "auto",
+          padding: "1rem"
+        },
+        style
+      ),
+      children: messages.map((message, index) => {
+        const isStreaming = Boolean(message.streaming || streaming && index === messages.length - 1);
+        const isUser = message.role === "user";
+        const isSystem = message.role === "system";
+        const isTool = message.role === "tool";
+        const accentBorder = isTool ? "3px solid var(--eth-color-border-strong)" : "3px solid var(--eth-color-interactive-primary)";
+        return /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: clsx(
+              "eth-message-list__item",
+              "eth-agent-message",
+              `eth-agent-message--${message.role}`,
+              isStreaming && "eth-agent-message--streaming"
+            ),
+            "aria-busy": isStreaming || void 0,
+            style: {
+              alignSelf: isSystem ? "stretch" : isUser ? "flex-end" : "flex-start",
+              contentVisibility: "auto",
+              containIntrinsicSize: "1px 96px",
+              display: "grid",
+              gap: "0.375rem",
+              maxWidth: isSystem ? "100%" : "min(100%, 42rem)",
+              minWidth: 0,
+              textAlign: isSystem ? "center" : "start",
+              width: isSystem ? "100%" : "fit-content"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "header",
+                {
+                  className: "eth-agent-message__header",
+                  style: {
+                    alignItems: "center",
+                    color: "var(--eth-color-text-secondary)",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    fontSize: "0.75rem",
+                    gap: "0.5rem",
+                    justifyContent: isUser ? "flex-end" : isSystem ? "center" : "flex-start",
+                    lineHeight: 1.333
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "eth-agent-message__avatar",
+                        "aria-hidden": true,
+                        style: {
+                          alignItems: "center",
+                          background: isSystem ? "transparent" : isUser ? "var(--eth-color-interactive-primary)" : "var(--eth-color-layer-02)",
+                          border: isSystem ? "1px dashed var(--eth-color-border-subtle)" : "1px solid var(--eth-color-border-subtle)",
+                          borderRadius: "var(--eth-radius-none)",
+                          color: isUser ? "#fff" : "var(--eth-color-text-primary)",
+                          display: "inline-flex",
+                          fontSize: "0.72rem",
+                          fontWeight: 700,
+                          height: 24,
+                          justifyContent: "center",
+                          width: 24
+                        },
+                        children: roleLabels[message.role].slice(0, 1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("strong", { children: roleLabels[message.role] }),
+                    /* @__PURE__ */ jsx("time", { dateTime: message.createdAt, children: formatDateTime(message.createdAt) }),
+                    message.status ? /* @__PURE__ */ jsx(StatusDot, { status: message.status, label: statusLabel(message.status) }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "eth-agent-message__bubble",
+                  style: {
+                    background: isSystem ? "var(--eth-color-layer-02)" : isUser ? "var(--eth-color-navy)" : "var(--eth-color-layer-02)",
+                    border: isSystem ? "1px dashed var(--eth-color-border-subtle)" : "1px solid var(--eth-color-border-subtle)",
+                    borderInlineEnd: isStreaming ? accentBorder : void 0,
+                    borderInlineStart: isUser || isSystem ? void 0 : accentBorder,
+                    borderRadius: "var(--eth-radius-panel)",
+                    color: isUser ? "#fff" : "var(--eth-color-text-primary)",
+                    fontFamily: isTool ? "ui-monospace, SFMono-Regular, Menlo, monospace" : void 0,
+                    fontSize: isTool ? "0.875rem" : void 0,
+                    lineHeight: 1.5,
+                    overflowWrap: "anywhere",
+                    padding: isSystem ? "0.5rem 0.75rem" : "0.875rem 1rem",
+                    whiteSpace: isTool ? "pre-wrap" : "normal",
+                    wordBreak: "normal"
+                  },
+                  children: [
+                    message.content,
+                    isStreaming ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "eth-agent-message__cursor",
+                        "aria-hidden": true,
+                        style: {
+                          animation: "eth-pulse 0.8s infinite",
+                          color: "var(--eth-color-interactive-primary)",
+                          display: "inline-block",
+                          fontWeight: 600,
+                          marginInlineStart: 3,
+                          transform: "translateY(1px)"
+                        },
+                        children: "\u258C"
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              message.citations?.length ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "eth-agent-message__citations",
+                  "aria-label": "Citations",
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: "0.375rem",
+                    justifyContent: isUser ? "flex-end" : isSystem ? "center" : "flex-start"
+                  },
+                  children: message.citations.map(
+                    (citation) => citation.href ? /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        className: "eth-agent-message__citation-link eth-tag",
+                        href: citation.href,
+                        children: citation.label
+                      },
+                      citation.id
+                    ) : /* @__PURE__ */ jsx(Tag, { children: citation.label }, citation.id)
+                  )
+                }
+              ) : null
+            ]
+          },
+          message.id
+        );
+      })
+    }
+  );
+}
+
+// src/components/AgentPromptBox.tsx
+import * as React2 from "react";
+import clsx2 from "clsx";
+import { IconButton, Tag as Tag2, Textarea } from "@echothink-ui/core";
+import { ChevronRightIcon, PlusIcon } from "@echothink-ui/icons";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AgentPromptBox({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Message the agent...",
+  disabled,
+  scopeLabel,
+  attachments = [],
+  onAttach,
+  onAttachmentRemove,
+  onSlash,
+  className,
+  style,
+  ...props
+}) {
+  const canSubmit = value.trim().length > 0 && !disabled;
+  const hasContext = Boolean(scopeLabel) || attachments.length > 0;
+  const submit = React2.useCallback(() => {
+    if (!canSubmit) return;
+    onSubmit?.(value);
+  }, [canSubmit, onSubmit, value]);
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      ...props,
+      className: clsx2("eth-agent-prompt-box", className),
+      "data-eth-component": "AgentPromptBox",
+      style,
+      onSubmit: (event) => {
+        event.preventDefault();
+        submit();
+      },
+      children: [
+        hasContext ? /* @__PURE__ */ jsxs2("div", { className: "eth-agent-prompt-box__context", children: [
+          scopeLabel ? /* @__PURE__ */ jsxs2("span", { className: "eth-agent-prompt-box__scope", children: [
+            /* @__PURE__ */ jsx2("span", { children: "Scope" }),
+            /* @__PURE__ */ jsx2("strong", { children: scopeLabel })
+          ] }) : null,
+          attachments.length ? /* @__PURE__ */ jsx2("div", { className: "eth-agent-prompt-box__attachments", "aria-label": "Attached context", children: attachments.map((attachment) => /* @__PURE__ */ jsxs2(
+            Tag2,
+            {
+              removable: Boolean(onAttachmentRemove),
+              onRemove: onAttachmentRemove ? () => onAttachmentRemove(attachment.id) : void 0,
+              children: [
+                /* @__PURE__ */ jsx2("span", { className: "eth-agent-prompt-box__attachment-kind", children: kindLabel(attachment.kind) }),
+                /* @__PURE__ */ jsx2("span", { className: "eth-agent-prompt-box__attachment-label", children: attachment.label }),
+                attachment.status ? /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    className: "eth-agent-prompt-box__attachment-status",
+                    "data-status": attachment.status,
+                    role: "img",
+                    "aria-label": `Status: ${statusLabel2(attachment.status)}`
+                  }
+                ) : null
+              ]
+            },
+            attachment.id
+          )) }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx2(
+          Textarea,
+          {
+            "aria-label": "Agent prompt",
+            className: "eth-agent-prompt-box__input",
+            disabled,
+            placeholder,
+            rows: 3,
+            value,
+            onChange: (event) => onChange(event.currentTarget.value),
+            onKeyDown: (event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                event.preventDefault();
+                submit();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "eth-agent-prompt-box__actions", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "eth-agent-prompt-box__tools", children: [
+            /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                label: "Attach scope or file",
+                intent: "ghost",
+                density: "compact",
+                disabled: disabled || !onAttach,
+                icon: /* @__PURE__ */ jsx2(PlusIcon, { size: 16 }),
+                onClick: onAttach
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                label: "Open slash commands",
+                intent: "ghost",
+                density: "compact",
+                disabled,
+                icon: /* @__PURE__ */ jsx2("span", { className: "eth-agent-prompt-box__command-icon", "aria-hidden": true, children: "/" }),
+                onClick: () => {
+                  if (onSlash) {
+                    onSlash();
+                    return;
+                  }
+                  if (!value) onChange("/");
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("span", { className: "eth-agent-prompt-box__spacer" }),
+          /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              className: "eth-agent-prompt-box__submit",
+              label: "Submit prompt",
+              intent: "primary",
+              density: "compact",
+              disabled: !canSubmit,
+              icon: /* @__PURE__ */ jsx2(ChevronRightIcon, { size: 16 }),
+              type: "submit"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function kindLabel(kind) {
+  switch (kind) {
+    case "app-domain":
+      return "App";
+    case "document":
+      return "Doc";
+    default:
+      return kind.charAt(0).toUpperCase() + kind.slice(1);
+  }
+}
+function statusLabel2(status) {
+  return status.replace(/-/g, " ");
+}
+
+// src/components/AgentStateBadge.tsx
+import clsx3 from "clsx";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function AgentStateBadge({ state = "idle", className, ...props }) {
+  const active = isActiveAgentState(state);
+  const label = stateLabel(state);
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      ...props,
+      className: clsx3(
+        "eth-agent-state-badge",
+        `eth-agent-state-badge--${state}`,
+        active && "eth-agent-state-badge--active",
+        className
+      ),
+      "data-eth-component": "AgentStateBadge",
+      "data-state": state,
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "eth-agent-state-badge__dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx3("span", { className: "eth-agent-state-badge__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/ScopeAttachmentPanel.tsx
+import clsx4 from "clsx";
+import { Badge, Button, StatusDot as StatusDot2, Surface, statusLabel as statusLabel3 } from "@echothink-ui/core";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var attentionStatuses = /* @__PURE__ */ new Set([
+  "approval-required",
+  "blocked",
+  "failed",
+  "pending-approval",
+  "stale",
+  "warning"
+]);
+function ScopeAttachmentPanel({
+  attachments,
+  onRemove,
+  title = "Attached context",
+  subtitle,
+  severity,
+  className,
+  ...props
+}) {
+  if (!attachments.length) return null;
+  const hasAttention = attachments.some(
+    (attachment) => attachment.status ? attentionStatuses.has(attachment.status) : false
+  );
+  const listLabel = typeof title === "string" ? `${title} items` : "Attached context items";
+  const renderedSubtitle = subtitle ?? `${attachments.length} ${attachments.length === 1 ? "scope is" : "scopes are"} available to the agent run`;
+  return /* @__PURE__ */ jsx4(
+    Surface,
+    {
+      ...props,
+      className: clsx4("eth-agent-scope-attachments", className),
+      "data-eth-component": "ScopeAttachmentPanel",
+      severity: severity ?? (hasAttention ? "warning" : void 0),
+      subtitle: renderedSubtitle,
+      title,
+      children: /* @__PURE__ */ jsx4("ul", { className: "eth-agent-scope-attachments__list", "aria-label": listLabel, children: attachments.map((attachment) => /* @__PURE__ */ jsxs4(
+        "li",
+        {
+          className: "eth-agent-scope-attachments__item",
+          "data-kind": attachment.kind,
+          "data-status": attachment.status,
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "eth-agent-scope-attachments__icon", "aria-hidden": "true", children: kindInitial(attachment.kind) }),
+            /* @__PURE__ */ jsxs4("span", { className: "eth-agent-scope-attachments__main", children: [
+              /* @__PURE__ */ jsxs4("span", { className: "eth-agent-scope-attachments__topline", children: [
+                /* @__PURE__ */ jsx4("strong", { className: "eth-agent-scope-attachments__label", children: attachment.label }),
+                /* @__PURE__ */ jsx4(Badge, { severity: "neutral", children: kindLabel2(attachment.kind) })
+              ] }),
+              /* @__PURE__ */ jsx4("span", { className: "eth-agent-scope-attachments__meta", children: kindDescription(attachment.kind) })
+            ] }),
+            /* @__PURE__ */ jsxs4("span", { className: "eth-agent-scope-attachments__aside", children: [
+              attachment.status ? /* @__PURE__ */ jsx4(StatusDot2, { status: attachment.status, label: statusLabel3(attachment.status) }) : /* @__PURE__ */ jsx4("span", { className: "eth-agent-scope-attachments__untracked", children: "No status" }),
+              onRemove ? /* @__PURE__ */ jsx4(
+                Button,
+                {
+                  "aria-label": `Remove ${attachment.label}`,
+                  density: "compact",
+                  intent: "ghost",
+                  onClick: () => onRemove(attachment.id),
+                  children: "Remove"
+                }
+              ) : null
+            ] })
+          ]
+        },
+        attachment.id
+      )) })
+    }
+  );
+}
+function kindLabel2(kind) {
+  switch (kind) {
+    case "app-domain":
+      return "App domain";
+    case "document":
+      return "Document";
+    default:
+      return kind.charAt(0).toUpperCase() + kind.slice(1);
+  }
+}
+function kindDescription(kind) {
+  switch (kind) {
+    case "app-domain":
+      return "Runnable application boundary";
+    case "document":
+      return "Source document";
+    case "project":
+      return "Project scope";
+    case "resource":
+      return "External resource";
+    case "task":
+      return "Task context";
+    case "scope":
+      return "General scope";
+    default:
+      return "Attached context";
+  }
+}
+function kindInitial(kind) {
+  return kindLabel2(kind).charAt(0);
+}
+
+// src/components/ChatAgentRail.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatAgentRail(props) {
+  return /* @__PURE__ */ jsx5(
+    AgentRailBase,
+    {
+      ...props,
+      componentName: "ChatAgentRail",
+      railClassName: "eth-agent-chat-rail",
+      placement: "right"
+    }
+  );
+}
+function LeftAgentRail(props) {
+  return /* @__PURE__ */ jsx5(
+    AgentRailBase,
+    {
+      ...props,
+      componentName: "LeftAgentRail",
+      railClassName: "eth-left-agent-rail eth-agent-left-rail",
+      placement: "left"
+    }
+  );
+}
+function AgentRailBase({
+  agentRef,
+  projectRef,
+  messages,
+  state = "idle",
+  prompt,
+  onPromptChange,
+  onSubmit,
+  attachments = [],
+  onAttachmentRemove,
+  onAttach,
+  onSlash,
+  autoScroll = true,
+  runControls,
+  header,
+  scopeLabel,
+  width = 360,
+  className,
+  style,
+  componentName,
+  railClassName,
+  placement,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const streaming = messages.some((message) => message.streaming) || isActiveAgentState(state);
+  const border = "1px solid var(--eth-color-border-subtle)";
+  return /* @__PURE__ */ jsxs5(
+    "aside",
+    {
+      ...props,
+      "aria-label": ariaLabel ?? "Agent collaboration rail",
+      className: clsx5("eth-chat-rail", railClassName, className),
+      "data-eth-component": componentName,
+      "data-placement": placement,
+      style: mergeStyle(
+        {
+          background: "var(--eth-color-layer-01)",
+          borderInlineEnd: placement === "left" ? border : 0,
+          borderInlineStart: placement === "right" ? border : 0,
+          display: "grid",
+          flex: `0 0 ${typeof width === "number" ? `${width}px` : width}`,
+          gridTemplateRows: "auto minmax(0, 1fr) auto",
+          height: "100%",
+          maxWidth: "100%",
+          minHeight: 0,
+          width
+        },
+        style
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "header",
+          {
+            className: "eth-chat-rail__header",
+            style: {
+              borderBottom: "1px solid var(--eth-color-border-subtle)",
+              display: "grid",
+              gap: "0.75rem",
+              padding: "1rem"
+            },
+            children: [
+              /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  className: "eth-chat-rail__header-main",
+                  style: {
+                    alignItems: "flex-start",
+                    display: "flex",
+                    gap: "0.75rem",
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5("div", { style: { minWidth: 0 }, children: header ?? /* @__PURE__ */ jsxs5(Fragment, { children: [
+                      /* @__PURE__ */ jsx5("h2", { className: "eth-chat-rail__title", style: { fontSize: "1rem", margin: 0 }, children: "Agent" }),
+                      agentRef || projectRef ? /* @__PURE__ */ jsx5(
+                        "p",
+                        {
+                          className: "eth-chat-rail__meta",
+                          style: {
+                            color: "var(--eth-color-text-secondary)",
+                            fontSize: "0.8rem",
+                            margin: "0.25rem 0 0"
+                          },
+                          children: [agentRef, projectRef].filter(Boolean).join(" \xB7 ")
+                        }
+                      ) : null
+                    ] }) }),
+                    /* @__PURE__ */ jsx5(AgentStateBadge, { state })
+                  ]
+                }
+              ),
+              runControls ? /* @__PURE__ */ jsx5("div", { className: "eth-chat-rail__run-controls", children: runControls }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          AgentMessageList,
+          {
+            className: "eth-chat-rail__messages",
+            autoScroll,
+            messages,
+            streaming,
+            style: { minHeight: 0, padding: "1rem" }
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "footer",
+          {
+            className: "eth-chat-rail__footer",
+            style: {
+              borderTop: "1px solid var(--eth-color-border-subtle)",
+              display: "grid",
+              gap: "0.75rem",
+              padding: "1rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx5(
+                ScopeAttachmentPanel,
+                {
+                  attachments: attachments.map((attachment) => ({
+                    ...attachment,
+                    kind: attachment.kind === "file" ? "document" : attachment.kind
+                  })),
+                  onRemove: onAttachmentRemove
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                AgentPromptBox,
+                {
+                  value: prompt,
+                  onChange: onPromptChange,
+                  scopeLabel,
+                  onAttach,
+                  onSlash,
+                  onSubmit: (value) => onSubmit?.(value, attachments)
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/AgentThinkingPanel.tsx
+import clsx6 from "clsx";
+import { Surface as Surface2 } from "@echothink-ui/core";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function AgentThinkingPanel({
+  currentStep,
+  summary,
+  progress,
+  lastUpdatedAt,
+  title = "Agent thinking",
+  subtitle,
+  metadata = [],
+  className,
+  ...props
+}) {
+  const normalizedProgress = typeof progress === "number" && Number.isFinite(progress) ? Math.max(0, Math.min(100, Math.round(progress))) : void 0;
+  const panelMetadata = lastUpdatedAt ? [{ label: "Last updated", value: formatDateTime(lastUpdatedAt) }, ...metadata] : metadata;
+  return /* @__PURE__ */ jsxs6(
+    Surface2,
+    {
+      ...props,
+      className: clsx6("eth-agent-thinking-panel", className),
+      "data-eth-component": "AgentThinkingPanel",
+      title,
+      subtitle: currentStep ?? subtitle,
+      metadata: panelMetadata.length ? panelMetadata : void 0,
+      children: [
+        summary ? /* @__PURE__ */ jsx6("p", { className: "eth-agent-thinking-panel__summary", children: summary }) : null,
+        normalizedProgress != null ? /* @__PURE__ */ jsxs6("div", { className: "eth-agent-thinking-panel__progress", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "eth-agent-thinking-panel__progress-label", children: [
+            /* @__PURE__ */ jsx6("span", { children: "Progress" }),
+            /* @__PURE__ */ jsxs6("strong", { children: [
+              normalizedProgress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("progress", { max: 100, value: normalizedProgress, "aria-label": "Agent progress", children: [
+            normalizedProgress,
+            "%"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/AgentThinkingChain.tsx
+import clsx7 from "clsx";
+import { Badge as Badge2, EmptyState, StatusDot as StatusDot3, Surface as Surface3, statusLabel as statusLabel4 } from "@echothink-ui/core";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function AgentThinkingChain({
+  steps,
+  streaming,
+  redactionPolicy,
+  title = "Thinking chain",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    Surface3,
+    {
+      ...props,
+      className: clsx7("eth-agent-thinking-chain", className),
+      "data-eth-component": "AgentThinkingChain",
+      title,
+      subtitle: redactionPolicy ? `Redaction policy: ${redactionPolicy}` : void 0,
+      children: steps.length ? /* @__PURE__ */ jsx7("ol", { className: "eth-agent-thinking-chain__steps", "aria-live": streaming ? "polite" : "off", children: steps.map((step) => /* @__PURE__ */ jsx7(ThinkingStep, { step, depth: 0 }, step.id)) }) : /* @__PURE__ */ jsx7(
+        EmptyState,
+        {
+          title: "No thinking steps",
+          description: "Steps will appear as the agent records observations, actions, or blockers."
+        }
+      )
+    }
+  );
+}
+function ThinkingStep({ step, depth }) {
+  const hasChildren = Boolean(step.children?.length);
+  const stepClassName = clsx7(
+    "eth-agent-thinking-chain__step",
+    `eth-agent-thinking-chain__step--${step.status}`,
+    hasChildren && "eth-agent-thinking-chain__step--branch"
+  );
+  return /* @__PURE__ */ jsxs7(
+    "li",
+    {
+      className: clsx7(
+        "eth-agent-thinking-chain__item",
+        `eth-agent-thinking-chain__item--${step.status}`
+      ),
+      style: {
+        "--eth-agent-thinking-chain-depth-offset": `${depth * 1.5}rem`
+      },
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: "eth-agent-thinking-chain__marker", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs7("div", { className: "eth-agent-thinking-chain__item-body", children: [
+          /* @__PURE__ */ jsxs7("article", { className: stepClassName, children: [
+            /* @__PURE__ */ jsx7(StepHeader, { step, hasChildren }),
+            /* @__PURE__ */ jsx7(StepDetails, { step })
+          ] }),
+          hasChildren ? /* @__PURE__ */ jsx7("ol", { className: "eth-agent-thinking-chain__children", children: step.children?.map((child) => /* @__PURE__ */ jsx7(ThinkingStep, { step: child, depth: depth + 1 }, child.id)) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function StepHeader({ step, hasChildren }) {
+  return /* @__PURE__ */ jsxs7("header", { className: "eth-agent-thinking-chain__step-header", children: [
+    /* @__PURE__ */ jsxs7("span", { className: "eth-agent-thinking-chain__step-heading", children: [
+      /* @__PURE__ */ jsx7("strong", { className: "eth-agent-thinking-chain__step-title", children: step.title }),
+      hasChildren ? /* @__PURE__ */ jsxs7("span", { className: "eth-agent-thinking-chain__branch-count", children: [
+        step.children?.length,
+        " ",
+        step.children?.length === 1 ? "substep" : "substeps"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs7("span", { className: "eth-agent-thinking-chain__step-meta", children: [
+      step.redacted ? /* @__PURE__ */ jsx7(Badge2, { severity: "warning", children: "Redacted" }) : null,
+      /* @__PURE__ */ jsx7(StatusDot3, { status: step.status, label: statusLabel4(step.status) }),
+      step.durationMs != null ? /* @__PURE__ */ jsx7("span", { className: "eth-agent-thinking-chain__duration", children: formatDuration(step.durationMs) }) : null
+    ] })
+  ] });
+}
+function StepDetails({ step }) {
+  const hasDetails = Boolean(step.observation || step.action || step.blocker);
+  if (step.redacted) {
+    return /* @__PURE__ */ jsx7("p", { className: "eth-agent-thinking-chain__redacted", children: "Details are hidden by policy." });
+  }
+  if (!hasDetails) {
+    return /* @__PURE__ */ jsx7("p", { className: "eth-agent-thinking-chain__empty-detail", children: "No public details recorded." });
+  }
+  return /* @__PURE__ */ jsxs7("dl", { className: "eth-agent-thinking-chain__fields", children: [
+    step.observation ? /* @__PURE__ */ jsx7(StepField, { label: "Observation", value: step.observation }) : null,
+    step.action ? /* @__PURE__ */ jsx7(StepField, { label: "Action", value: step.action, monospaced: true }) : null,
+    step.blocker ? /* @__PURE__ */ jsx7(
+      StepField,
+      {
+        label: "Blocker",
+        value: step.blocker,
+        className: "eth-agent-thinking-chain__field--blocker"
+      }
+    ) : null
+  ] });
+}
+function StepField({
+  label,
+  value,
+  monospaced,
+  className
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: clsx7("eth-agent-thinking-chain__field", className), children: [
+    /* @__PURE__ */ jsx7("dt", { children: label }),
+    /* @__PURE__ */ jsx7("dd", { className: clsx7(monospaced && "eth-agent-thinking-chain__field-value--mono"), children: value })
+  ] });
+}
+
+// src/components/AgentTraceViewer.tsx
+import * as React3 from "react";
+import clsx8 from "clsx";
+import { Badge as Badge3, EmptyState as EmptyState2, StatusDot as StatusDot4, Surface as Surface4, statusLabel as statusLabel5 } from "@echothink-ui/core";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function AgentTraceViewer({
+  spans,
+  title = "Trace viewer",
+  className,
+  ...props
+}) {
+  const [selectedSpanId, setSelectedSpanId] = React3.useState(spans[0]?.id);
+  const timeline = React3.useMemo(() => buildTimeline(spans), [spans]);
+  const selectedSpan = spans.find((span) => span.id === selectedSpanId) ?? spans[0];
+  const selectedTimelineItem = timeline.items.find((item) => item.span.id === selectedSpan?.id);
+  const activeCount = spans.filter(
+    (span) => ["running", "in-progress", "pending-approval", "approval-required"].includes(span.status)
+  ).length;
+  const selectedAttributes = Object.entries(selectedSpan?.attributes ?? {});
+  return /* @__PURE__ */ jsx8(
+    Surface4,
+    {
+      ...props,
+      className: clsx8("eth-trace", "eth-agent-trace-viewer", className),
+      "data-eth-component": "AgentTraceViewer",
+      title,
+      children: !spans.length ? /* @__PURE__ */ jsx8(EmptyState2, { title: "No trace spans" }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        /* @__PURE__ */ jsxs8("dl", { className: "eth-trace__summary", "aria-label": "Trace summary", children: [
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx8("dt", { children: "Spans" }),
+            /* @__PURE__ */ jsx8("dd", { children: spans.length })
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx8("dt", { children: "Window" }),
+            /* @__PURE__ */ jsx8("dd", { children: formatDuration(timeline.total) })
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx8("dt", { children: "Active" }),
+            /* @__PURE__ */ jsx8("dd", { children: activeCount })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "eth-trace__layout", children: [
+          /* @__PURE__ */ jsxs8("section", { className: "eth-trace__timeline-panel", "aria-label": "Trace timeline", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "eth-trace__axis", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx8("span", { children: "0 ms" }),
+              /* @__PURE__ */ jsx8("span", { children: formatDuration(timeline.total / 2) }),
+              /* @__PURE__ */ jsx8("span", { children: formatDuration(timeline.total) })
+            ] }),
+            /* @__PURE__ */ jsx8("div", { className: "eth-trace__timeline", role: "list", children: timeline.items.map(({ span, start, end, depth }) => {
+              const left = (start - timeline.min) / timeline.total * 100;
+              const width = Math.max((end - start) / timeline.total * 100, 1);
+              const selected = selectedSpan?.id === span.id;
+              return /* @__PURE__ */ jsxs8(
+                "div",
+                {
+                  className: clsx8("eth-trace__row", selected && "eth-trace__row--selected"),
+                  role: "listitem",
+                  style: {
+                    "--eth-trace-indent": `${depth}rem`,
+                    "--eth-trace-left": `${left}%`,
+                    "--eth-trace-width": `${width}%`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs8(
+                      "button",
+                      {
+                        type: "button",
+                        className: clsx8(
+                          "eth-trace__span-label",
+                          selected && "eth-trace__span-label--selected"
+                        ),
+                        "aria-pressed": selected,
+                        onClick: () => setSelectedSpanId(span.id),
+                        children: [
+                          /* @__PURE__ */ jsxs8("span", { className: "eth-trace__span-title", children: [
+                            /* @__PURE__ */ jsx8(StatusDot4, { status: span.status, label: statusLabel5(span.status) }),
+                            /* @__PURE__ */ jsx8("span", { className: "eth-trace__span-name", children: span.name })
+                          ] }),
+                          /* @__PURE__ */ jsxs8("span", { className: "eth-trace__span-meta", children: [
+                            formatTime(span.startedAt),
+                            " \xB7 ",
+                            formatDuration(span.durationMs)
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "div",
+                      {
+                        className: "eth-trace__track",
+                        role: "group",
+                        "aria-label": `${span.name}, ${statusLabel5(span.status)}, ${formatDuration(span.durationMs)}`,
+                        children: /* @__PURE__ */ jsx8(
+                          "button",
+                          {
+                            type: "button",
+                            className: clsx8(
+                              "eth-trace__bar",
+                              `eth-trace__bar--${span.status}`,
+                              selected && "eth-trace__bar--selected"
+                            ),
+                            "aria-label": `Select ${span.name}`,
+                            onClick: () => setSelectedSpanId(span.id)
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                span.id
+              );
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx8("aside", { className: "eth-trace__details", "aria-label": "Selected span details", children: selectedSpan ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsxs8("header", { className: "eth-trace__details-header", children: [
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("p", { className: "eth-trace__details-eyebrow", children: "Selected span" }),
+                /* @__PURE__ */ jsx8("h3", { children: selectedSpan.name })
+              ] }),
+              /* @__PURE__ */ jsx8(Badge3, { severity: statusSeverity(selectedSpan.status), children: statusLabel5(selectedSpan.status) })
+            ] }),
+            /* @__PURE__ */ jsxs8("dl", { className: "eth-trace__detail-grid", children: [
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("dt", { children: "Started" }),
+                /* @__PURE__ */ jsx8("dd", { children: formatTime(selectedSpan.startedAt) })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("dt", { children: "Duration" }),
+                /* @__PURE__ */ jsx8("dd", { children: formatDuration(selectedSpan.durationMs) })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("dt", { children: "Depth" }),
+                /* @__PURE__ */ jsx8("dd", { children: selectedTimelineItem?.depth ?? 0 })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("dt", { children: "Span ID" }),
+                /* @__PURE__ */ jsx8("dd", { children: selectedSpan.id })
+              ] }),
+              selectedSpan.parentId ? /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("dt", { children: "Parent" }),
+                /* @__PURE__ */ jsx8("dd", { children: selectedSpan.parentId })
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs8("section", { className: "eth-trace__attributes", children: [
+              /* @__PURE__ */ jsxs8("div", { className: "eth-trace__attributes-header", children: [
+                /* @__PURE__ */ jsx8("h4", { children: "Attributes" }),
+                /* @__PURE__ */ jsx8(Badge3, { severity: "neutral", children: selectedAttributes.length })
+              ] }),
+              selectedAttributes.length ? /* @__PURE__ */ jsx8("pre", { children: prettyJson(selectedSpan.attributes) }) : /* @__PURE__ */ jsx8("p", { children: "No attributes recorded." })
+            ] })
+          ] }) : /* @__PURE__ */ jsx8(EmptyState2, { title: "Select a span" }) })
+        ] })
+      ] })
+    }
+  );
+}
+function buildTimeline(spans) {
+  if (!spans.length) return { items: [], min: 0, total: 1 };
+  const spansById = new Map(spans.map((span) => [span.id, span]));
+  const depthById = /* @__PURE__ */ new Map();
+  const depthFor = (span, seen = /* @__PURE__ */ new Set()) => {
+    if (depthById.has(span.id)) return depthById.get(span.id) ?? 0;
+    if (!span.parentId || seen.has(span.id)) {
+      depthById.set(span.id, 0);
+      return 0;
+    }
+    const parent = spansById.get(span.parentId);
+    const depth = parent ? depthFor(parent, new Set(seen).add(span.id)) + 1 : 0;
+    depthById.set(span.id, depth);
+    return depth;
+  };
+  const items = spans.map((span, index) => {
+    const parsed = new Date(span.startedAt).getTime();
+    const start = Number.isNaN(parsed) ? index * 10 : parsed;
+    const end = start + Math.max(span.durationMs, 1);
+    return { span, start, end, depth: depthFor(span) };
+  }).sort((a, b) => a.start - b.start);
+  const min = Math.min(...items.map((item) => item.start));
+  const max = Math.max(...items.map((item) => item.end));
+  return { items, min, total: Math.max(max - min, 1) };
+}
+
+// src/components/AgentToolCallLog.tsx
+import * as React4 from "react";
+import clsx9 from "clsx";
+import { Button as Button2, Drawer, EmptyState as EmptyState3, StatusDot as StatusDot5, Surface as Surface5, statusLabel as statusLabel6 } from "@echothink-ui/core";
+import { DataTable } from "@echothink-ui/data";
+import { SearchIcon } from "@echothink-ui/icons";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function AgentToolCallLog({
+  calls,
+  onSelect,
+  title = "Tool calls",
+  subtitle,
+  className,
+  ...props
+}) {
+  const [selectedCall, setSelectedCall] = React4.useState();
+  const rows = React4.useMemo(
+    () => calls.map((call) => {
+      const argsPreview = jsonPreview(call.args, call.redacted);
+      const resultPreview = call.error ?? jsonPreview(call.result, call.redacted);
+      return {
+        id: call.id,
+        call,
+        time: formatTime(call.startedAt),
+        toolName: call.toolName,
+        status: call.status,
+        duration: formatDuration(call.durationMs),
+        argsPreview,
+        argsTone: previewTone(argsPreview, call.redacted),
+        resultPreview,
+        resultTone: call.error ? "error" : previewTone(resultPreview, call.redacted)
+      };
+    }),
+    [calls]
+  );
+  const openCall = React4.useCallback(
+    (call) => {
+      setSelectedCall(call);
+      onSelect?.(call);
+    },
+    [onSelect]
+  );
+  const columns = React4.useMemo(
+    () => [
+      {
+        key: "time",
+        header: "Time",
+        width: "7rem",
+        render: (row) => /* @__PURE__ */ jsx9("time", { className: "eth-agent-tool-call-log__time", dateTime: row.call.startedAt, children: row.time })
+      },
+      {
+        key: "toolName",
+        header: "Tool",
+        width: "13rem",
+        render: (row) => /* @__PURE__ */ jsx9("code", { className: "eth-agent-tool-call-log__tool", children: row.toolName })
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "11rem",
+        render: (row) => /* @__PURE__ */ jsx9(StatusDot5, { status: row.status, label: statusLabel6(row.status) })
+      },
+      {
+        key: "duration",
+        header: "Duration",
+        width: "7rem",
+        align: "end",
+        render: (row) => /* @__PURE__ */ jsx9(PreviewText, { value: row.duration, tone: previewTone(row.duration) })
+      },
+      {
+        key: "argsPreview",
+        header: "Args",
+        render: (row) => /* @__PURE__ */ jsx9(PreviewText, { value: row.argsPreview, tone: row.argsTone })
+      },
+      {
+        key: "resultPreview",
+        header: "Result",
+        render: (row) => /* @__PURE__ */ jsx9(PreviewText, { value: row.resultPreview, tone: row.resultTone })
+      },
+      {
+        key: "actions",
+        header: "Actions",
+        width: "7.5rem",
+        align: "end",
+        render: (row) => /* @__PURE__ */ jsx9(
+          Button2,
+          {
+            "aria-label": `Inspect ${row.toolName} tool call`,
+            className: "eth-agent-tool-call-log__inspect",
+            density: "compact",
+            icon: /* @__PURE__ */ jsx9(SearchIcon, { size: 16 }),
+            intent: "ghost",
+            onClick: () => openCall(row.call),
+            children: "Inspect"
+          }
+        )
+      }
+    ],
+    [openCall]
+  );
+  const defaultSubtitle = React4.useMemo(() => summarizeCalls(calls), [calls]);
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(
+      Surface5,
+      {
+        ...props,
+        className: clsx9("eth-agent-tool-call-log", className),
+        "data-eth-component": "AgentToolCallLog",
+        subtitle: subtitle ?? defaultSubtitle,
+        title,
+        children: /* @__PURE__ */ jsx9(
+          DataTable,
+          {
+            rows,
+            columns,
+            rowKey: "id",
+            density: "compact",
+            className: "eth-agent-tool-call-log__table",
+            emptyState: /* @__PURE__ */ jsx9(EmptyState3, { title: "No tool calls" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      Drawer,
+      {
+        open: Boolean(selectedCall),
+        title: selectedCall?.toolName ?? "Tool call",
+        onClose: () => setSelectedCall(void 0),
+        children: selectedCall ? /* @__PURE__ */ jsxs9("div", { className: "eth-agent-tool-call-log__drawer", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "eth-agent-tool-call-log__drawer-status", children: [
+            /* @__PURE__ */ jsx9(StatusDot5, { status: selectedCall.status, label: statusLabel6(selectedCall.status) }),
+            selectedCall.redacted ? /* @__PURE__ */ jsx9("span", { className: "eth-agent-tool-call-log__redaction-note", children: "Redaction applied" }) : null
+          ] }),
+          /* @__PURE__ */ jsxs9("dl", { className: "eth-agent-tool-call-log__meta", children: [
+            /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsx9("dt", { children: "Started" }),
+              /* @__PURE__ */ jsx9("dd", { children: formatTime(selectedCall.startedAt) })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsx9("dt", { children: "Duration" }),
+              /* @__PURE__ */ jsx9("dd", { children: formatDuration(selectedCall.durationMs) })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsx9("dt", { children: "Tool" }),
+              /* @__PURE__ */ jsx9("dd", { children: /* @__PURE__ */ jsx9("code", { children: selectedCall.toolName }) })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsx9("dt", { children: "Redaction" }),
+              /* @__PURE__ */ jsx9("dd", { children: selectedCall.redacted ? "Applied" : "None" })
+            ] })
+          ] }),
+          selectedCall.error ? /* @__PURE__ */ jsxs9("section", { className: "eth-agent-tool-call-log__error", children: [
+            /* @__PURE__ */ jsx9("h3", { children: "Error" }),
+            /* @__PURE__ */ jsx9("pre", { tabIndex: 0, children: selectedCall.error })
+          ] }) : null,
+          /* @__PURE__ */ jsx9(
+            JsonBlock,
+            {
+              title: "Arguments",
+              value: prettyJson(selectedCall.args, selectedCall.redacted)
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            JsonBlock,
+            {
+              title: "Result",
+              value: prettyJson(selectedCall.result, selectedCall.redacted)
+            }
+          )
+        ] }) : null
+      }
+    )
+  ] });
+}
+function summarizeCalls(calls) {
+  if (!calls.length) return void 0;
+  const active = calls.filter(
+    (call) => ["queued", "running", "in-progress", "pending-approval", "approval-required"].includes(
+      call.status
+    )
+  ).length;
+  const redacted = calls.filter((call) => call.redacted).length;
+  return [
+    `${calls.length} call${calls.length === 1 ? "" : "s"}`,
+    active ? `${active} active` : null,
+    redacted ? `${redacted} redacted` : null
+  ].filter(Boolean).join(" | ");
+}
+function previewTone(value, redacted = false) {
+  if (redacted && value === "[redacted]") return "redacted";
+  if (value === EMPTY_MARK) return "empty";
+  return "default";
+}
+function PreviewText({ value, tone = "default" }) {
+  if (tone === "redacted") {
+    return /* @__PURE__ */ jsx9("span", { className: "eth-agent-tool-call-log__preview eth-agent-tool-call-log__preview--redacted", children: "Redacted" });
+  }
+  return /* @__PURE__ */ jsx9(
+    "span",
+    {
+      className: clsx9(
+        "eth-agent-tool-call-log__preview",
+        tone !== "default" && `eth-agent-tool-call-log__preview--${tone}`
+      ),
+      title: value === EMPTY_MARK ? void 0 : value,
+      children: value
+    }
+  );
+}
+function JsonBlock({ title, value }) {
+  const headingId = React4.useId();
+  return /* @__PURE__ */ jsxs9("section", { className: "eth-agent-tool-call-log__json", "aria-labelledby": headingId, children: [
+    /* @__PURE__ */ jsx9("h3", { id: headingId, children: title }),
+    /* @__PURE__ */ jsx9("pre", { tabIndex: 0, children: value })
+  ] });
+}
+
+// src/components/AgentApprovalGate.tsx
+import * as React5 from "react";
+import clsx10 from "clsx";
+import { Button as Button3, InlineNotification, Surface as Surface6, Textarea as Textarea2 } from "@echothink-ui/core";
+import { ExternalLinkIcon } from "@echothink-ui/icons";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function AgentApprovalGate({
+  action,
+  evidence = [],
+  onApprove,
+  onReject,
+  state = "idle",
+  title = "Approval required",
+  className,
+  ...props
+}) {
+  const [reason, setReason] = React5.useState("");
+  const severity = riskSeverity(action.riskLevel);
+  const locked = state === "pending" || state === "approved" || state === "rejected";
+  const stateLabel2 = approvalStateLabel(state);
+  return /* @__PURE__ */ jsx10(
+    Surface6,
+    {
+      ...props,
+      className: clsx10("eth-agent-approval-gate", `eth-agent-approval-gate--${state}`, className),
+      "data-eth-component": "AgentApprovalGate",
+      severity,
+      status: approvalStatus(state),
+      title,
+      subtitle: action.label,
+      children: /* @__PURE__ */ jsxs10("div", { className: "eth-agent-approval-gate__layout", children: [
+        /* @__PURE__ */ jsx10(
+          InlineNotification,
+          {
+            severity,
+            title: `${riskLabel(action.riskLevel)} risk action`,
+            children: action.description
+          }
+        ),
+        /* @__PURE__ */ jsxs10("dl", { className: "eth-agent-approval-gate__summary", "aria-label": "Approval action details", children: [
+          /* @__PURE__ */ jsxs10("div", { children: [
+            /* @__PURE__ */ jsx10("dt", { children: "Action" }),
+            /* @__PURE__ */ jsx10("dd", { children: action.id })
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { children: [
+            /* @__PURE__ */ jsx10("dt", { children: "Risk" }),
+            /* @__PURE__ */ jsx10("dd", { children: riskLabel(action.riskLevel) })
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { children: [
+            /* @__PURE__ */ jsx10("dt", { children: "Status" }),
+            /* @__PURE__ */ jsx10("dd", { children: stateLabel2 })
+          ] })
+        ] }),
+        evidence.length ? /* @__PURE__ */ jsxs10("section", { className: "eth-agent-approval-gate__evidence", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "eth-agent-approval-gate__section-header", children: [
+            /* @__PURE__ */ jsx10("h3", { children: "Evidence" }),
+            /* @__PURE__ */ jsxs10("span", { children: [
+              evidence.length,
+              " reference",
+              evidence.length === 1 ? "" : "s"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx10("div", { className: "eth-agent-approval-gate__evidence-list", children: evidence.map((item) => /* @__PURE__ */ jsx10(EvidenceItem, { item }, item.id)) })
+        ] }) : null,
+        /* @__PURE__ */ jsx10(
+          Textarea2,
+          {
+            className: "eth-agent-approval-gate__reason",
+            "aria-label": "Approval reason",
+            disabled: locked,
+            labelText: "Approval rationale",
+            placeholder: "Optional reason",
+            rows: 2,
+            value: reason,
+            onChange: (event) => setReason(event.currentTarget.value)
+          }
+        ),
+        /* @__PURE__ */ jsxs10("div", { className: "eth-agent-approval-gate__actions", children: [
+          /* @__PURE__ */ jsx10(
+            Button3,
+            {
+              density: "default",
+              intent: "success",
+              loading: state === "pending",
+              disabled: locked,
+              onClick: () => onApprove?.(reason || void 0),
+              children: state === "approved" ? "Approved" : "Approve"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            Button3,
+            {
+              density: "default",
+              intent: "danger",
+              disabled: locked,
+              onClick: () => onReject?.(reason || void 0),
+              children: state === "rejected" ? "Rejected" : "Reject"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function EvidenceItem({ item }) {
+  const content = /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsxs10("span", { className: "eth-agent-approval-gate__evidence-copy", children: [
+      /* @__PURE__ */ jsx10("span", { className: "eth-agent-approval-gate__evidence-label", children: item.label }),
+      item.description ? /* @__PURE__ */ jsx10("span", { className: "eth-agent-approval-gate__evidence-description", children: item.description }) : null
+    ] }),
+    item.meta ? /* @__PURE__ */ jsx10("span", { className: "eth-agent-approval-gate__evidence-meta", children: item.meta }) : null,
+    item.href ? /* @__PURE__ */ jsx10(ExternalLinkIcon, { className: "eth-agent-approval-gate__evidence-icon", size: 16 }) : null
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ jsx10(
+      "a",
+      {
+        className: "eth-agent-approval-gate__evidence-item eth-agent-approval-gate__evidence-item--link",
+        href: item.href,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx10("div", { className: "eth-agent-approval-gate__evidence-item", children: content });
+}
+function riskLabel(riskLevel) {
+  if (!riskLevel) return "Low";
+  return riskLevel.charAt(0).toUpperCase() + riskLevel.slice(1);
+}
+function approvalStateLabel(state) {
+  if (state === "pending") return "Submitting";
+  if (state === "approved") return "Approved";
+  if (state === "rejected") return "Rejected";
+  return "Awaiting decision";
+}
+function approvalStatus(state) {
+  if (state === "pending") return "running";
+  if (state === "approved") return "completed";
+  if (state === "rejected") return "blocked";
+  return "approval-required";
+}
+
+// src/components/AgentPlanPreview.tsx
+import clsx11 from "clsx";
+import { Badge as Badge4, Surface as Surface7 } from "@echothink-ui/core";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function AgentPlanPreview({ plan, title, className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    Surface7,
+    {
+      ...props,
+      className: clsx11("eth-agent-plan-preview", className),
+      "data-eth-component": "AgentPlanPreview",
+      title: title ?? "Proposed plan",
+      subtitle: "Plan before execution",
+      children: /* @__PURE__ */ jsxs11("div", { className: "eth-agent-plan-preview__body", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "eth-agent-plan-preview__summary", "aria-label": "Plan summary", children: [
+          /* @__PURE__ */ jsxs11("div", { children: [
+            /* @__PURE__ */ jsx11("p", { className: "eth-agent-plan-preview__summary-label", children: "Execution plan" }),
+            /* @__PURE__ */ jsx11("p", { className: "eth-agent-plan-preview__summary-title", children: plan.title })
+          ] }),
+          /* @__PURE__ */ jsxs11("span", { className: "eth-agent-plan-preview__summary-count", children: [
+            plan.steps.length,
+            " ",
+            plan.steps.length === 1 ? "step" : "steps"
+          ] })
+        ] }),
+        plan.steps.length ? /* @__PURE__ */ jsx11("ol", { className: "eth-agent-plan-preview__steps", "aria-label": "Proposed execution steps", children: plan.steps.map((step, index) => /* @__PURE__ */ jsx11(
+          "li",
+          {
+            className: clsx11(
+              "eth-agent-plan-preview__step",
+              step.risks?.length && "eth-agent-plan-preview__step--risk"
+            ),
+            children: /* @__PURE__ */ jsxs11("article", { className: "eth-agent-plan-preview__step-card", children: [
+              /* @__PURE__ */ jsx11("span", { className: "eth-agent-plan-preview__step-index", "aria-hidden": "true", children: String(index + 1).padStart(2, "0") }),
+              /* @__PURE__ */ jsxs11("div", { className: "eth-agent-plan-preview__step-main", children: [
+                /* @__PURE__ */ jsx11("p", { className: "eth-agent-plan-preview__step-description", children: step.description }),
+                step.durationEstimate || step.risks?.length ? /* @__PURE__ */ jsxs11("div", { className: "eth-agent-plan-preview__step-meta", "aria-label": "Step metadata", children: [
+                  step.durationEstimate ? /* @__PURE__ */ jsx11(Badge4, { children: step.durationEstimate }) : null,
+                  step.risks?.map((risk) => /* @__PURE__ */ jsx11(Badge4, { severity: "warning", children: risk }, risk))
+                ] }) : null
+              ] })
+            ] })
+          },
+          step.id
+        )) }) : /* @__PURE__ */ jsx11("p", { className: "eth-agent-plan-preview__empty", children: "No execution steps have been proposed." }),
+        plan.assumptions?.length || plan.risks?.length ? /* @__PURE__ */ jsxs11("div", { className: "eth-agent-plan-preview__supporting", children: [
+          plan.assumptions?.length ? /* @__PURE__ */ jsx11(TextList, { title: "Assumptions", items: plan.assumptions }) : null,
+          plan.risks?.length ? /* @__PURE__ */ jsx11(TextList, { title: "Risks", items: plan.risks, tone: "risk" }) : null
+        ] }) : null
+      ] })
+    }
+  );
+}
+function TextList({
+  title,
+  items,
+  tone = "neutral"
+}) {
+  return /* @__PURE__ */ jsxs11(
+    "section",
+    {
+      className: clsx11(
+        "eth-agent-plan-preview__note-section",
+        `eth-agent-plan-preview__note-section--${tone}`
+      ),
+      children: [
+        /* @__PURE__ */ jsx11("h3", { className: "eth-agent-plan-preview__note-title", children: title }),
+        /* @__PURE__ */ jsx11("ul", { className: "eth-agent-plan-preview__note-list", children: items.map((item) => /* @__PURE__ */ jsxs11("li", { children: [
+          /* @__PURE__ */ jsx11("span", { className: "eth-agent-plan-preview__note-marker", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx11("span", { children: item })
+        ] }, item)) })
+      ]
+    }
+  );
+}
+
+// src/components/AgentPlanDiff.tsx
+import * as React6 from "react";
+import clsx12 from "clsx";
+import { Badge as Badge5, Surface as Surface8 } from "@echothink-ui/core";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function AgentPlanDiff({
+  before,
+  after,
+  title = "Plan diff",
+  subtitle = "Compare proposed plan changes before execution",
+  className,
+  ...props
+}) {
+  const diff = React6.useMemo(() => diffPlanSteps(before, after), [before, after]);
+  const summary = React6.useMemo(
+    () => ({
+      added: diff.filter((item) => item.status === "added").length,
+      modified: diff.filter((item) => item.status === "modified").length,
+      removed: diff.filter((item) => item.status === "removed").length,
+      unchanged: diff.filter((item) => item.status === "unchanged").length
+    }),
+    [diff]
+  );
+  return /* @__PURE__ */ jsx12(
+    Surface8,
+    {
+      ...props,
+      className: clsx12("eth-agent-plan-diff", className),
+      "data-eth-component": "AgentPlanDiff",
+      subtitle,
+      title,
+      children: /* @__PURE__ */ jsxs12("div", { className: "eth-agent-plan-diff__body", children: [
+        /* @__PURE__ */ jsxs12("dl", { className: "eth-agent-plan-diff__summary", "aria-label": "Plan diff summary", children: [
+          /* @__PURE__ */ jsx12(SummaryItem, { label: "Added", value: summary.added, tone: "added" }),
+          /* @__PURE__ */ jsx12(SummaryItem, { label: "Modified", value: summary.modified, tone: "modified" }),
+          /* @__PURE__ */ jsx12(SummaryItem, { label: "Removed", value: summary.removed, tone: "removed" }),
+          /* @__PURE__ */ jsx12(SummaryItem, { label: "Unchanged", value: summary.unchanged, tone: "unchanged" })
+        ] }),
+        diff.length ? /* @__PURE__ */ jsx12("ol", { className: "eth-agent-plan-diff__list", "aria-label": "Plan step changes", children: diff.map((item) => {
+          const stepId = item.after?.id ?? item.before?.id ?? item.id;
+          return /* @__PURE__ */ jsx12("li", { className: "eth-agent-plan-diff__entry", children: /* @__PURE__ */ jsxs12(
+            "article",
+            {
+              className: clsx12(
+                "eth-agent-plan-diff__item",
+                `eth-agent-plan-diff__item--${item.status}`
+              ),
+              children: [
+                /* @__PURE__ */ jsx12("header", { className: "eth-agent-plan-diff__item-header", children: /* @__PURE__ */ jsxs12("div", { className: "eth-agent-plan-diff__item-heading", children: [
+                  /* @__PURE__ */ jsxs12("span", { className: "eth-agent-plan-diff__step-id", children: [
+                    "Step ",
+                    stepId
+                  ] }),
+                  /* @__PURE__ */ jsx12(Badge5, { severity: item.severity, children: statusLabelFor(item.status) })
+                ] }) }),
+                item.status === "modified" ? /* @__PURE__ */ jsxs12("div", { className: "eth-agent-plan-diff__comparison", children: [
+                  /* @__PURE__ */ jsx12(StepSnapshot, { label: "Before", step: item.before }),
+                  /* @__PURE__ */ jsx12(StepSnapshot, { label: "After", step: item.after })
+                ] }) : /* @__PURE__ */ jsx12(
+                  StepSnapshot,
+                  {
+                    label: snapshotLabelFor(item.status),
+                    step: item.after ?? item.before
+                  }
+                )
+              ]
+            }
+          ) }, item.id);
+        }) }) : /* @__PURE__ */ jsx12("p", { className: "eth-agent-plan-diff__empty", children: "No plan steps to compare." })
+      ] })
+    }
+  );
+}
+function StepSnapshot({ label, step }) {
+  if (!step) return null;
+  return /* @__PURE__ */ jsxs12("section", { className: "eth-agent-plan-diff__snapshot", children: [
+    /* @__PURE__ */ jsx12("h3", { className: "eth-agent-plan-diff__snapshot-label", children: label }),
+    /* @__PURE__ */ jsx12("p", { className: "eth-agent-plan-diff__snapshot-description", children: step.description }),
+    step.durationEstimate || step.risks?.length ? /* @__PURE__ */ jsxs12("div", { className: "eth-agent-plan-diff__snapshot-meta", "aria-label": `${label} metadata`, children: [
+      step.durationEstimate ? /* @__PURE__ */ jsx12(Badge5, { children: step.durationEstimate }) : null,
+      step.risks?.map((risk) => /* @__PURE__ */ jsx12(Badge5, { severity: "warning", children: risk }, risk))
+    ] }) : null
+  ] });
+}
+function SummaryItem({
+  label,
+  value,
+  tone
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: clsx12(
+        "eth-agent-plan-diff__summary-item",
+        `eth-agent-plan-diff__summary-item--${tone}`
+      ),
+      children: [
+        /* @__PURE__ */ jsx12("dt", { children: label }),
+        /* @__PURE__ */ jsx12("dd", { children: value })
+      ]
+    }
+  );
+}
+function statusLabelFor(status) {
+  switch (status) {
+    case "added":
+      return "Added";
+    case "removed":
+      return "Removed";
+    case "modified":
+      return "Modified";
+    case "unchanged":
+      return "Unchanged";
+  }
+}
+function snapshotLabelFor(status) {
+  if (status === "added") return "Added step";
+  if (status === "removed") return "Removed step";
+  return "Step";
+}
+
+// src/components/AgentMemoryPanel.tsx
+import * as React7 from "react";
+import clsx13 from "clsx";
+import { Badge as Badge6, Button as Button4, EmptyState as EmptyState4, Surface as Surface9 } from "@echothink-ui/core";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var kinds = ["user", "project", "feedback", "reference"];
+function AgentMemoryPanel({
+  entries,
+  onPin,
+  onEdit,
+  onDelete,
+  title = "Agent memory",
+  subtitle = "Stored instructions and retrieved context available to the agent",
+  className,
+  ...props
+}) {
+  const headingPrefix = React7.useId();
+  const groups = React7.useMemo(
+    () => kinds.map((kind) => ({ kind, entries: entries.filter((entry) => entry.kind === kind) })).filter((group) => group.entries.length),
+    [entries]
+  );
+  const pinnedCount = React7.useMemo(
+    () => entries.filter((entry) => entry.pinned).length,
+    [entries]
+  );
+  const latestUpdatedAt = React7.useMemo(() => {
+    const sortedEntries = entries.filter(
+      (entry) => Boolean(entry.lastUpdatedAt && !Number.isNaN(new Date(entry.lastUpdatedAt).getTime()))
+    ).sort((a, b) => new Date(b.lastUpdatedAt).getTime() - new Date(a.lastUpdatedAt).getTime());
+    return sortedEntries[0]?.lastUpdatedAt;
+  }, [entries]);
+  return /* @__PURE__ */ jsx13(
+    Surface9,
+    {
+      ...props,
+      className: clsx13("eth-agent-memory-panel", className),
+      "data-eth-component": "AgentMemoryPanel",
+      subtitle,
+      title,
+      children: !groups.length ? /* @__PURE__ */ jsx13(EmptyState4, { title: "No memory entries" }) : /* @__PURE__ */ jsxs13("div", { className: "eth-agent-memory-panel__body", children: [
+        /* @__PURE__ */ jsxs13("dl", { className: "eth-agent-memory-panel__summary", "aria-label": "Memory summary", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "eth-agent-memory-panel__summary-item", children: [
+            /* @__PURE__ */ jsx13("dt", { children: "Total entries" }),
+            /* @__PURE__ */ jsx13("dd", { children: entries.length })
+          ] }),
+          /* @__PURE__ */ jsxs13("div", { className: "eth-agent-memory-panel__summary-item", children: [
+            /* @__PURE__ */ jsx13("dt", { children: "Pinned" }),
+            /* @__PURE__ */ jsx13("dd", { children: pinnedCount })
+          ] }),
+          /* @__PURE__ */ jsxs13("div", { className: "eth-agent-memory-panel__summary-item", children: [
+            /* @__PURE__ */ jsx13("dt", { children: "Latest update" }),
+            /* @__PURE__ */ jsx13("dd", { children: latestUpdatedAt ? /* @__PURE__ */ jsx13("time", { dateTime: latestUpdatedAt, children: formatDateTime(latestUpdatedAt) }) : "Not recorded" })
+          ] })
+        ] }),
+        groups.map((group) => /* @__PURE__ */ jsxs13(
+          "section",
+          {
+            className: "eth-agent-memory-panel__group",
+            "aria-labelledby": `${headingPrefix}-${group.kind}`,
+            children: [
+              /* @__PURE__ */ jsxs13("header", { className: "eth-agent-memory-panel__group-header", children: [
+                /* @__PURE__ */ jsx13("h3", { id: `${headingPrefix}-${group.kind}`, children: kindTitle(group.kind) }),
+                /* @__PURE__ */ jsxs13(Badge6, { severity: "neutral", children: [
+                  group.entries.length,
+                  " ",
+                  group.entries.length === 1 ? "entry" : "entries"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx13("div", { className: "eth-agent-memory-panel__entries", children: group.entries.map((entry) => /* @__PURE__ */ jsxs13(
+                "article",
+                {
+                  className: clsx13(
+                    "eth-agent-memory-panel__entry",
+                    entry.pinned && "eth-agent-memory-panel__entry--pinned"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs13("header", { className: "eth-agent-memory-panel__entry-header", children: [
+                      /* @__PURE__ */ jsxs13("span", { className: "eth-agent-memory-panel__entry-title", children: [
+                        /* @__PURE__ */ jsx13("strong", { children: entry.key }),
+                        entry.pinned ? /* @__PURE__ */ jsx13(Badge6, { severity: "info", children: "Pinned" }) : null
+                      ] }),
+                      entry.lastUpdatedAt ? /* @__PURE__ */ jsx13(
+                        "time",
+                        {
+                          className: "eth-agent-memory-panel__updated-at",
+                          dateTime: entry.lastUpdatedAt,
+                          children: formatDateTime(entry.lastUpdatedAt)
+                        }
+                      ) : null
+                    ] }),
+                    /* @__PURE__ */ jsx13("div", { className: "eth-agent-memory-panel__value", children: entry.value }),
+                    onPin || onEdit || onDelete ? /* @__PURE__ */ jsxs13(
+                      "div",
+                      {
+                        className: "eth-agent-memory-panel__actions",
+                        "aria-label": `${entry.key} memory actions`,
+                        children: [
+                          onPin ? /* @__PURE__ */ jsx13(
+                            Button4,
+                            {
+                              "aria-label": `${entry.pinned ? "Unpin" : "Pin"} ${entry.key}`,
+                              density: "compact",
+                              intent: "secondary",
+                              onClick: () => onPin(entry.id),
+                              children: entry.pinned ? "Unpin" : "Pin"
+                            }
+                          ) : null,
+                          onEdit ? /* @__PURE__ */ jsx13(
+                            Button4,
+                            {
+                              "aria-label": `Edit ${entry.key}`,
+                              density: "compact",
+                              intent: "secondary",
+                              onClick: () => onEdit(entry.id),
+                              children: "Edit"
+                            }
+                          ) : null,
+                          onDelete ? /* @__PURE__ */ jsx13(
+                            Button4,
+                            {
+                              "aria-label": `Delete ${entry.key}`,
+                              density: "compact",
+                              intent: "danger",
+                              onClick: () => onDelete(entry.id),
+                              children: "Delete"
+                            }
+                          ) : null
+                        ]
+                      }
+                    ) : null
+                  ]
+                },
+                entry.id
+              )) })
+            ]
+          },
+          group.kind
+        ))
+      ] })
+    }
+  );
+}
+function kindTitle(kind) {
+  return kind.charAt(0).toUpperCase() + kind.slice(1);
+}
+
+// src/components/AgentContextViewer.tsx
+import * as React8 from "react";
+import clsx14 from "clsx";
+import { Badge as Badge7, EmptyState as EmptyState5, Surface as Surface10 } from "@echothink-ui/core";
+import {
+  AgentRunningIcon,
+  ChevronRightIcon as ChevronRightIcon2,
+  DocumentIcon,
+  ExternalLinkIcon as ExternalLinkIcon2,
+  MessageIcon,
+  SearchIcon as SearchIcon2
+} from "@echothink-ui/icons";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+function AgentContextViewer({
+  sources,
+  onSelect,
+  title = "Context sources",
+  className,
+  ...props
+}) {
+  const sourceListLabel = typeof title === "string" ? title : "Context sources";
+  const sortedSources = React8.useMemo(
+    () => [...sources].sort((a, b) => (b.relevance ?? -1) - (a.relevance ?? -1)),
+    [sources]
+  );
+  return /* @__PURE__ */ jsx14(
+    Surface10,
+    {
+      ...props,
+      className: clsx14("eth-agent-context-viewer", className),
+      "data-eth-component": "AgentContextViewer",
+      title,
+      children: !sortedSources.length ? /* @__PURE__ */ jsx14(EmptyState5, { title: "No context sources" }) : /* @__PURE__ */ jsx14("ul", { className: "eth-agent-context-viewer__sources", "aria-label": sourceListLabel, children: sortedSources.map((source) => {
+        const SourceIcon = sourceIcon(source.type);
+        const relevance = source.relevance == null ? null : formatRelevance(source.relevance);
+        const relevanceValue = source.relevance == null ? null : normalizedRelevance(source.relevance);
+        const isInteractive = Boolean(source.href || onSelect);
+        const content = /* @__PURE__ */ jsxs14(Fragment5, { children: [
+          /* @__PURE__ */ jsx14("span", { className: "eth-agent-context-viewer__kind-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx14(SourceIcon, { size: 18 }) }),
+          /* @__PURE__ */ jsxs14("span", { className: "eth-agent-context-viewer__main", children: [
+            /* @__PURE__ */ jsxs14("span", { className: "eth-agent-context-viewer__topline", children: [
+              /* @__PURE__ */ jsx14("strong", { className: "eth-agent-context-viewer__label", children: source.label }),
+              /* @__PURE__ */ jsx14(Badge7, { severity: "neutral", children: typeLabel(source.type) })
+            ] }),
+            source.excerpt ? /* @__PURE__ */ jsx14("span", { className: "eth-agent-context-viewer__excerpt", children: source.excerpt }) : null
+          ] }),
+          /* @__PURE__ */ jsxs14("span", { className: "eth-agent-context-viewer__aside", children: [
+            relevance != null && relevanceValue != null ? /* @__PURE__ */ jsxs14(
+              "span",
+              {
+                className: "eth-agent-context-viewer__relevance",
+                "aria-label": `Relevance ${relevance}`,
+                children: [
+                  /* @__PURE__ */ jsxs14("span", { className: "eth-agent-context-viewer__relevance-value", children: [
+                    "Relevance ",
+                    relevance
+                  ] }),
+                  /* @__PURE__ */ jsx14(
+                    "span",
+                    {
+                      className: "eth-agent-context-viewer__relevance-meter",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx14("span", { style: { inlineSize: `${relevanceValue}%` } })
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsx14("span", { className: "eth-agent-context-viewer__unranked", children: "Unranked" }),
+            source.href ? /* @__PURE__ */ jsx14(ExternalLinkIcon2, { className: "eth-agent-context-viewer__indicator", size: 16 }) : isInteractive ? /* @__PURE__ */ jsx14(ChevronRightIcon2, { className: "eth-agent-context-viewer__indicator", size: 16 }) : null
+          ] })
+        ] });
+        return /* @__PURE__ */ jsx14("li", { children: source.href ? /* @__PURE__ */ jsx14(
+          "a",
+          {
+            className: clsx14(
+              "eth-agent-context-viewer__source",
+              "eth-agent-context-viewer__source--interactive"
+            ),
+            href: source.href,
+            onClick: () => onSelect?.(source),
+            children: content
+          }
+        ) : onSelect ? /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: clsx14(
+              "eth-agent-context-viewer__source",
+              "eth-agent-context-viewer__source--interactive"
+            ),
+            onClick: () => onSelect(source),
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx14("article", { className: "eth-agent-context-viewer__source", children: content }) }, source.id);
+      }) })
+    }
+  );
+}
+function sourceIcon(type) {
+  switch (type) {
+    case "document":
+      return DocumentIcon;
+    case "query":
+      return SearchIcon2;
+    case "tool-result":
+      return AgentRunningIcon;
+    case "message":
+    default:
+      return MessageIcon;
+  }
+}
+function typeLabel(type) {
+  return type.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function formatRelevance(relevance) {
+  return `${normalizedRelevance(relevance)}%`;
+}
+function normalizedRelevance(relevance) {
+  const normalized = relevance <= 1 ? relevance * 100 : relevance;
+  return Math.min(100, Math.max(0, Math.round(normalized)));
+}
+
+// src/components/AgentRunControls.tsx
+import * as React9 from "react";
+import clsx15 from "clsx";
+import { Badge as Badge8, Button as Button5, InlineNotification as InlineNotification2, Textarea as Textarea3 } from "@echothink-ui/core";
+import { InterruptIcon, PauseIcon, PlayIcon, RetryIcon, StopIcon } from "@echothink-ui/icons";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var stateMeta = {
+  running: {
+    label: "Running",
+    severity: "info",
+    description: "The agent is actively executing; pause for review, interrupt with steering, or stop the run."
+  },
+  paused: {
+    label: "Paused",
+    severity: "warning",
+    description: "Execution is held. Resume when the run can continue or stop it to cancel remaining work."
+  },
+  stopped: {
+    label: "Stopped",
+    severity: "neutral",
+    description: "The run was stopped before completion. Retry to start a fresh attempt."
+  },
+  failed: {
+    label: "Failed",
+    severity: "danger",
+    description: "The last run failed. Retry after reviewing the failure context."
+  },
+  completed: {
+    label: "Completed",
+    severity: "success",
+    description: "The run completed. Retry only when a new pass is required."
+  }
+};
+function AgentRunControls({
+  state,
+  onPause,
+  onResume,
+  onStop,
+  onRetry,
+  onInterrupt,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const [interrupting, setInterrupting] = React9.useState(false);
+  const [reason, setReason] = React9.useState("");
+  const descriptionId = React9.useId();
+  const meta = stateMeta[state];
+  const canInterrupt = Boolean((state === "running" || state === "paused") && onInterrupt);
+  React9.useEffect(() => {
+    if (!canInterrupt && interrupting) {
+      setInterrupting(false);
+      setReason("");
+    }
+  }, [canInterrupt, interrupting]);
+  const actions = React9.useMemo(() => {
+    const next = [];
+    if (state === "running") {
+      next.push({
+        id: "pause",
+        label: "Pause",
+        intent: "secondary",
+        disabled: !onPause,
+        icon: /* @__PURE__ */ jsx15(PauseIcon, { size: 16 }),
+        onSelect: onPause
+      });
+    }
+    if (state === "paused") {
+      next.push({
+        id: "resume",
+        label: "Resume",
+        intent: "primary",
+        disabled: !onResume,
+        icon: /* @__PURE__ */ jsx15(PlayIcon, { size: 16 }),
+        onSelect: onResume
+      });
+    }
+    if ((state === "running" || state === "paused") && onInterrupt) {
+      next.push({
+        id: "interrupt",
+        label: "Interrupt",
+        intent: "tertiary",
+        disabled: false,
+        icon: /* @__PURE__ */ jsx15(InterruptIcon, { size: 16 }),
+        onSelect: () => setInterrupting(true)
+      });
+    }
+    if (state === "running" || state === "paused") {
+      next.push({
+        id: "stop",
+        label: "Stop",
+        intent: "danger",
+        disabled: !onStop,
+        icon: /* @__PURE__ */ jsx15(StopIcon, { size: 16 }),
+        onSelect: onStop
+      });
+    }
+    if (state === "failed" || state === "stopped" || state === "completed") {
+      next.push({
+        id: "retry",
+        label: "Retry",
+        intent: state === "completed" ? "secondary" : "primary",
+        disabled: !onRetry,
+        icon: /* @__PURE__ */ jsx15(RetryIcon, { size: 16 }),
+        onSelect: onRetry
+      });
+    }
+    return next;
+  }, [onInterrupt, onPause, onResume, onRetry, onStop, state]);
+  const describedBy = ariaDescribedBy ? `${ariaDescribedBy} ${descriptionId}` : descriptionId;
+  const sendInterrupt = () => {
+    const trimmedReason = reason.trim();
+    if (!trimmedReason) return;
+    onInterrupt?.(trimmedReason);
+    setReason("");
+    setInterrupting(false);
+  };
+  return /* @__PURE__ */ jsxs15(
+    "section",
+    {
+      ...props,
+      "aria-label": ariaLabel ?? `${meta.label} agent run controls`,
+      "aria-describedby": describedBy,
+      className: clsx15("eth-agent-run-controls", className),
+      "data-eth-component": "AgentRunControls",
+      "data-state": state,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs15("div", { className: "eth-agent-run-controls__summary", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "eth-agent-run-controls__heading", children: [
+            /* @__PURE__ */ jsx15("span", { className: "eth-agent-run-controls__state-dot", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx15("span", { className: "eth-agent-run-controls__title", children: "Agent run" }),
+            /* @__PURE__ */ jsx15(Badge8, { severity: meta.severity, children: meta.label })
+          ] }),
+          /* @__PURE__ */ jsx15("p", { id: descriptionId, className: "eth-agent-run-controls__description", children: meta.description })
+        ] }),
+        /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: "eth-agent-run-controls__actions",
+            role: "group",
+            "aria-label": `${meta.label} run controls`,
+            children: actions.map((action) => /* @__PURE__ */ jsx15(
+              Button5,
+              {
+                density: "compact",
+                intent: action.intent,
+                disabled: action.disabled,
+                icon: action.icon,
+                onClick: action.onSelect,
+                children: action.label
+              },
+              action.id
+            ))
+          }
+        ),
+        interrupting ? /* @__PURE__ */ jsxs15("div", { className: "eth-agent-run-controls__interrupt", children: [
+          /* @__PURE__ */ jsx15(InlineNotification2, { severity: "warning", title: "Interrupt run", children: "Send steering instructions before the agent continues." }),
+          /* @__PURE__ */ jsx15(
+            Textarea3,
+            {
+              "aria-label": "Interrupt reason",
+              rows: 3,
+              value: reason,
+              onChange: (event) => setReason(event.currentTarget.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs15("div", { className: "eth-agent-run-controls__interrupt-actions", children: [
+            /* @__PURE__ */ jsx15(
+              Button5,
+              {
+                density: "compact",
+                intent: "primary",
+                disabled: !reason.trim(),
+                onClick: sendInterrupt,
+                children: "Send interrupt"
+              }
+            ),
+            /* @__PURE__ */ jsx15(Button5, { density: "compact", intent: "ghost", onClick: () => setInterrupting(false), children: "Cancel" })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/AgentSafetyPanel.tsx
+import clsx16 from "clsx";
+import { Badge as Badge9, EmptyState as EmptyState6, Surface as Surface11 } from "@echothink-ui/core";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function AgentSafetyPanel({
+  checks,
+  title = "Safety checks",
+  subtitle,
+  className,
+  ...props
+}) {
+  const summary = summarizeChecks(checks);
+  return /* @__PURE__ */ jsx16(
+    Surface11,
+    {
+      ...props,
+      className: clsx16("eth-agent-safety-panel", className),
+      "data-eth-component": "AgentSafetyPanel",
+      subtitle: subtitle ?? summaryLabel(summary),
+      title,
+      children: !checks.length ? /* @__PURE__ */ jsx16(EmptyState6, { title: "No safety checks", description: "No policy gates are attached to this run." }) : /* @__PURE__ */ jsxs16("div", { className: "eth-agent-safety-panel__body", children: [
+        /* @__PURE__ */ jsxs16("dl", { className: "eth-agent-safety-panel__summary", "aria-label": "Safety check summary", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "eth-agent-safety-panel__summary-item", children: [
+            /* @__PURE__ */ jsx16("dt", { children: "Total" }),
+            /* @__PURE__ */ jsx16("dd", { children: summary.total })
+          ] }),
+          /* @__PURE__ */ jsxs16("div", { className: "eth-agent-safety-panel__summary-item eth-agent-safety-panel__summary-item--pass", children: [
+            /* @__PURE__ */ jsx16("dt", { children: "Passed" }),
+            /* @__PURE__ */ jsx16("dd", { children: summary.pass })
+          ] }),
+          /* @__PURE__ */ jsxs16("div", { className: "eth-agent-safety-panel__summary-item eth-agent-safety-panel__summary-item--warn", children: [
+            /* @__PURE__ */ jsx16("dt", { children: "Review" }),
+            /* @__PURE__ */ jsx16("dd", { children: summary.warn })
+          ] }),
+          /* @__PURE__ */ jsxs16("div", { className: "eth-agent-safety-panel__summary-item eth-agent-safety-panel__summary-item--fail", children: [
+            /* @__PURE__ */ jsx16("dt", { children: "Blocked" }),
+            /* @__PURE__ */ jsx16("dd", { children: summary.fail })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx16("div", { className: "eth-agent-safety-panel__list", role: "list", children: checks.map((check) => /* @__PURE__ */ jsxs16(
+          "article",
+          {
+            className: clsx16(
+              "eth-agent-safety-panel__check",
+              `eth-agent-safety-panel__check--${check.status}`
+            ),
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsx16("span", { className: "eth-agent-safety-panel__indicator", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs16("div", { className: "eth-agent-safety-panel__check-content", children: [
+                /* @__PURE__ */ jsxs16("div", { className: "eth-agent-safety-panel__check-main", children: [
+                  /* @__PURE__ */ jsx16("h3", { children: check.label }),
+                  /* @__PURE__ */ jsx16(Badge9, { severity: safetySeverity(check), children: statusLabel7(check.status) })
+                ] }),
+                /* @__PURE__ */ jsx16("p", { children: check.details ?? statusDescription(check.status) })
+              ] })
+            ]
+          },
+          check.id
+        )) })
+      ] })
+    }
+  );
+}
+function summarizeChecks(checks) {
+  return checks.reduce(
+    (summary, check) => {
+      summary.total += 1;
+      summary[check.status] += 1;
+      return summary;
+    },
+    { fail: 0, pass: 0, total: 0, warn: 0 }
+  );
+}
+function summaryLabel(summary) {
+  if (summary.total === 0) return "No policy gates are active.";
+  if (summary.fail > 0) return `${summary.fail} blocking ${plural("issue", summary.fail)} found.`;
+  if (summary.warn > 0) {
+    return summary.warn === 1 ? "1 check needs review." : `${summary.warn} checks need review.`;
+  }
+  return "All policy checks passed.";
+}
+function statusLabel7(status) {
+  if (status === "pass") return "Passed";
+  if (status === "warn") return "Review needed";
+  return "Blocked";
+}
+function statusDescription(status) {
+  if (status === "pass") return "No policy issue detected.";
+  if (status === "warn") return "Review recommended before proceeding.";
+  return "Policy gate blocked this action.";
+}
+function plural(label, count) {
+  return count === 1 ? label : `${label}s`;
+}
+
+// src/components/AgentInterruptionPanel.tsx
+import clsx17 from "clsx";
+import { Button as Button6, InlineNotification as InlineNotification3, Surface as Surface12, Textarea as Textarea4 } from "@echothink-ui/core";
+import { InterruptIcon as InterruptIcon2 } from "@echothink-ui/icons";
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var defaultMetadata = [
+  { label: "Mode", value: "Steering interrupt" },
+  { label: "Delivery", value: "Before next agent step" }
+];
+function AgentInterruptionPanel({
+  prompt,
+  onChange,
+  onSubmit,
+  disabled,
+  title = "Interrupt agent",
+  subtitle = "Send operator guidance before the agent continues.",
+  metadata = defaultMetadata,
+  promptLabel = "Steering instruction",
+  helperText = "Delivered before the next agent step.",
+  placeholder = "Tell the agent what to change, stop, or prioritize.",
+  submitLabel = "Send interruption",
+  className,
+  ...props
+}) {
+  const hasPrompt = Boolean(prompt.trim());
+  const submit = () => {
+    if (!disabled && hasPrompt) onSubmit?.(prompt);
+  };
+  return /* @__PURE__ */ jsx17(
+    Surface12,
+    {
+      ...props,
+      className: clsx17("eth-agent-interruption-panel", className),
+      "data-eth-component": "AgentInterruptionPanel",
+      metadata,
+      subtitle,
+      title,
+      children: /* @__PURE__ */ jsxs17("div", { className: "eth-agent-interruption-panel__body", children: [
+        /* @__PURE__ */ jsx17(InlineNotification3, { severity: "warning", title: "Steering interrupt", children: "The agent will receive this instruction before continuing the current run." }),
+        /* @__PURE__ */ jsx17(
+          Textarea4,
+          {
+            className: "eth-agent-interruption-panel__prompt",
+            disabled,
+            helperText,
+            labelText: promptLabel,
+            placeholder,
+            rows: 4,
+            value: prompt,
+            onChange: (event) => onChange(event.currentTarget.value),
+            onKeyDown: (event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                event.preventDefault();
+                submit();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx17("div", { className: "eth-agent-interruption-panel__actions", children: /* @__PURE__ */ jsx17(
+          Button6,
+          {
+            disabled: disabled || !hasPrompt,
+            icon: /* @__PURE__ */ jsx17(InterruptIcon2, { size: 16 }),
+            onClick: submit,
+            children: submitLabel
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/components/AgentHandoffPanel.tsx
+import * as React10 from "react";
+import clsx18 from "clsx";
+import {
+  Badge as Badge10,
+  Button as Button7,
+  EmptyState as EmptyState7,
+  FormField,
+  StatusDot as StatusDot6,
+  Surface as Surface13,
+  Textarea as Textarea5
+} from "@echothink-ui/core";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+function AgentHandoffPanel({
+  itemRef,
+  agentRef,
+  assigneeOptions = [],
+  selectedAssigneeId,
+  reason,
+  reasonSchema,
+  disabled,
+  onAssigneeChange,
+  onReasonChange,
+  onSubmit,
+  title = "Agent handoff",
+  className,
+  ...props
+}) {
+  const [internalAssigneeId, setInternalAssigneeId] = React10.useState(selectedAssigneeId);
+  const [internalReason, setInternalReason] = React10.useState(reason ?? "");
+  const assigneeId = selectedAssigneeId ?? internalAssigneeId;
+  const handoffReason = reason ?? internalReason;
+  const reasonRequired = reasonSchema?.required ?? true;
+  const canSubmit = Boolean(assigneeId) && (!reasonRequired || Boolean(handoffReason.trim()));
+  const selectAssignee = (id) => {
+    setInternalAssigneeId(id);
+    onAssigneeChange?.(id);
+  };
+  const changeReason = (value) => {
+    setInternalReason(value);
+    onReasonChange?.(value);
+  };
+  const reasonId = React10.useId();
+  return /* @__PURE__ */ jsx18(
+    Surface13,
+    {
+      ...props,
+      className: clsx18("eth-agent-handoff-panel", className),
+      "data-eth-component": "AgentHandoffPanel",
+      title,
+      subtitle: [agentRef, itemRef].filter(Boolean).join(" \xB7 ") || void 0,
+      children: /* @__PURE__ */ jsxs18("div", { className: "eth-agent-handoff-panel__body", children: [
+        !assigneeOptions.length ? /* @__PURE__ */ jsx18(EmptyState7, { title: "No handoff targets" }) : /* @__PURE__ */ jsx18(
+          "div",
+          {
+            className: "eth-agent-handoff-panel__target-list",
+            role: "listbox",
+            "aria-label": "Handoff targets",
+            children: assigneeOptions.map((target) => /* @__PURE__ */ jsx18(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": assigneeId === target.id,
+                className: clsx18(
+                  "eth-agent-handoff-panel__target",
+                  assigneeId === target.id && "eth-agent-handoff-panel__target--selected"
+                ),
+                disabled,
+                onClick: () => selectAssignee(target.id),
+                children: /* @__PURE__ */ jsxs18("span", { className: "eth-agent-handoff-panel__target-main", children: [
+                  /* @__PURE__ */ jsxs18("span", { className: "eth-agent-handoff-panel__target-copy", children: [
+                    /* @__PURE__ */ jsx18("strong", { className: "eth-agent-handoff-panel__target-label", children: target.label }),
+                    target.description ? /* @__PURE__ */ jsx18("span", { className: "eth-agent-handoff-panel__target-description", children: target.description }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs18("span", { className: "eth-agent-handoff-panel__target-meta", children: [
+                    /* @__PURE__ */ jsx18(Badge10, { severity: "neutral", children: target.type }),
+                    target.status ? /* @__PURE__ */ jsx18(
+                      StatusDot6,
+                      {
+                        status: target.status,
+                        label: formatHandoffStatus(target.status)
+                      }
+                    ) : null
+                  ] })
+                ] })
+              },
+              target.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          FormField,
+          {
+            id: reasonId,
+            label: reasonSchema?.label ?? "Handoff reason",
+            required: reasonRequired,
+            children: /* @__PURE__ */ jsx18(
+              Textarea5,
+              {
+                className: "eth-agent-handoff-panel__reason",
+                disabled,
+                placeholder: reasonSchema?.placeholder ?? "Explain what the next owner should do.",
+                required: reasonRequired,
+                rows: 3,
+                value: handoffReason,
+                onChange: (event) => changeReason(event.currentTarget.value)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx18("div", { className: "eth-agent-handoff-panel__actions", children: /* @__PURE__ */ jsx18(
+          Button7,
+          {
+            disabled: disabled || !canSubmit,
+            onClick: () => onSubmit?.({ assigneeId, reason: handoffReason }),
+            children: "Handoff"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function formatHandoffStatus(status) {
+  return status ? status.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ") : void 0;
+}
+
+// src/components/AgentGeneratedArtifactPanel.tsx
+import * as React11 from "react";
+import clsx19 from "clsx";
+import { Drawer as Drawer2, EmptyState as EmptyState8, LinkButton, Surface as Surface14 } from "@echothink-ui/core";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+function AgentGeneratedArtifactPanel({
+  artifacts,
+  onSelect,
+  selectedId,
+  density,
+  title = "Generated artifacts",
+  className,
+  ...props
+}) {
+  const [internalSelectedId, setInternalSelectedId] = React11.useState(
+    selectedId ?? artifacts[0]?.id
+  );
+  const [previewOpen, setPreviewOpen] = React11.useState(false);
+  const selectedArtifact = artifacts.find((artifact) => artifact.id === (selectedId ?? internalSelectedId)) ?? artifacts[0];
+  const compact = density === "compact";
+  const selectArtifact = (artifact) => {
+    setInternalSelectedId(artifact.id);
+    setPreviewOpen(true);
+    onSelect?.(artifact);
+  };
+  return /* @__PURE__ */ jsxs19(Fragment6, { children: [
+    /* @__PURE__ */ jsx19(
+      Surface14,
+      {
+        ...props,
+        density,
+        className: clsx19("eth-agent-generated-artifact-panel", className),
+        "data-eth-component": "AgentGeneratedArtifactPanel",
+        title,
+        children: !artifacts.length ? /* @__PURE__ */ jsx19(EmptyState8, { title: "No artifacts generated" }) : /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            className: "eth-agent-generated-artifact-panel__layout",
+            style: {
+              gridTemplateColumns: compact ? "1fr" : "minmax(220px, 320px) minmax(0, 1fr)"
+            },
+            children: [
+              /* @__PURE__ */ jsx19(
+                ArtifactList,
+                {
+                  artifacts,
+                  selectedId: selectedArtifact?.id,
+                  onSelect: selectArtifact
+                }
+              ),
+              !compact ? /* @__PURE__ */ jsx19(ArtifactPreview, { artifact: selectedArtifact }) : null
+            ]
+          }
+        )
+      }
+    ),
+    compact ? /* @__PURE__ */ jsx19(
+      Drawer2,
+      {
+        open: previewOpen && Boolean(selectedArtifact),
+        title: selectedArtifact?.label ?? "Artifact preview",
+        onClose: () => setPreviewOpen(false),
+        children: /* @__PURE__ */ jsx19(ArtifactPreview, { artifact: selectedArtifact })
+      }
+    ) : null
+  ] });
+}
+function ArtifactList({
+  artifacts,
+  selectedId,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: "eth-agent-generated-artifact-panel__list",
+      role: "group",
+      "aria-label": "Generated artifacts",
+      children: artifacts.map((artifact) => {
+        const selected = selectedId === artifact.id;
+        return /* @__PURE__ */ jsxs19(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": selected,
+            className: clsx19(
+              "eth-agent-generated-artifact-panel__item",
+              selected && "eth-agent-generated-artifact-panel__item--selected"
+            ),
+            onClick: () => onSelect(artifact),
+            children: [
+              /* @__PURE__ */ jsxs19("span", { className: "eth-agent-generated-artifact-panel__item-topline", children: [
+                /* @__PURE__ */ jsx19("span", { className: "eth-agent-generated-artifact-panel__item-title", children: artifact.label }),
+                /* @__PURE__ */ jsx19("span", { className: "eth-agent-generated-artifact-panel__kind", children: artifactKindLabel(artifact.kind) })
+              ] }),
+              /* @__PURE__ */ jsx19("span", { className: "eth-agent-generated-artifact-panel__item-meta", children: artifactMeta(artifact).join(" \xB7 ") }),
+              /* @__PURE__ */ jsx19("span", { className: "eth-agent-generated-artifact-panel__item-status", children: artifactPreviewStatus(artifact) })
+            ]
+          },
+          artifact.id
+        );
+      })
+    }
+  );
+}
+function ArtifactPreview({ artifact }) {
+  const headingId = React11.useId();
+  if (!artifact) return /* @__PURE__ */ jsx19(EmptyState8, { title: "Select an artifact" });
+  return /* @__PURE__ */ jsxs19("section", { className: "eth-agent-generated-artifact-panel__preview", "aria-labelledby": headingId, children: [
+    /* @__PURE__ */ jsxs19("header", { className: "eth-agent-generated-artifact-panel__preview-header", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "eth-agent-generated-artifact-panel__preview-heading", children: [
+        /* @__PURE__ */ jsx19("h3", { id: headingId, children: artifact.label }),
+        /* @__PURE__ */ jsxs19("div", { className: "eth-agent-generated-artifact-panel__preview-meta", children: [
+          artifactMeta(artifact).map((item) => /* @__PURE__ */ jsx19("span", { children: item }, item)),
+          artifact.mimeType ? /* @__PURE__ */ jsx19("span", { children: artifact.mimeType }) : null
+        ] })
+      ] }),
+      artifact.href ? /* @__PURE__ */ jsx19(LinkButton, { href: artifact.href, density: "compact", intent: "secondary", children: "Open" }) : null
+    ] }),
+    /* @__PURE__ */ jsx19("div", { className: "eth-agent-generated-artifact-panel__preview-body", children: /* @__PURE__ */ jsx19(ArtifactPreviewBody, { artifact }) })
+  ] });
+}
+function ArtifactPreviewBody({ artifact }) {
+  const content = artifact.content?.trim();
+  if (artifact.kind === "image" && artifact.previewUrl) {
+    return /* @__PURE__ */ jsx19("img", { alt: artifact.label, src: artifact.previewUrl });
+  }
+  if (artifact.kind === "code" && content) {
+    return /* @__PURE__ */ jsx19("pre", { children: /* @__PURE__ */ jsx19("code", { children: content }) });
+  }
+  if (artifact.previewUrl) {
+    return /* @__PURE__ */ jsx19("iframe", { title: artifact.label, src: artifact.previewUrl });
+  }
+  if (content) {
+    return /* @__PURE__ */ jsx19("div", { className: "eth-agent-generated-artifact-panel__text-preview", children: content });
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: "eth-agent-generated-artifact-panel__empty-preview", role: "status", children: [
+    /* @__PURE__ */ jsx19("p", { className: "eth-agent-generated-artifact-panel__empty-title", children: "Preview unavailable" }),
+    /* @__PURE__ */ jsx19("p", { className: "eth-agent-generated-artifact-panel__empty-description", children: artifact.href ? "Open the artifact to inspect the generated output." : "Artifact saved without an inline preview." })
+  ] });
+}
+function artifactMeta(artifact) {
+  return [artifact.size, formatDateTime(artifact.createdAt)].filter(
+    (item) => Boolean(item)
+  );
+}
+function artifactKindLabel(kind) {
+  switch (kind) {
+    case "chart":
+      return "Chart";
+    case "code":
+      return "Code";
+    case "doc":
+      return "Doc";
+    case "file":
+      return "File";
+    case "image":
+      return "Image";
+  }
+}
+function artifactPreviewStatus(artifact) {
+  if (artifact.kind === "image" && artifact.previewUrl) return "Inline image preview";
+  if (artifact.kind === "code" && artifact.content?.trim()) return "Inline code preview";
+  if (artifact.previewUrl) return "Embedded preview";
+  if (artifact.content?.trim()) return "Inline text preview";
+  if (artifact.href) return "Open externally";
+  return "No inline preview";
+}
+
+// src/components/AppDomainAgentPanel.tsx
+import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+function AppDomainAgentPanel({
+  appDomainRef,
+  agentRef,
+  projectRef,
+  messages = [],
+  state,
+  prompt = "",
+  onPromptChange,
+  onSubmit,
+  attachments,
+  onAttachmentRemove,
+  runControls,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(
+    ChatAgentRail,
+    {
+      ...props,
+      agentRef,
+      projectRef,
+      messages,
+      state,
+      prompt,
+      onPromptChange: onPromptChange ?? (() => void 0),
+      onSubmit,
+      attachments,
+      onAttachmentRemove,
+      runControls,
+      scopeLabel: appDomainRef,
+      header: /* @__PURE__ */ jsxs20("div", { className: "eth-agent-app-domain-panel__header", children: [
+        /* @__PURE__ */ jsx20("p", { className: "eth-agent-app-domain-panel__eyebrow", children: "App domain" }),
+        /* @__PURE__ */ jsx20("h2", { className: "eth-agent-app-domain-panel__title", children: appDomainRef }),
+        agentRef || projectRef ? /* @__PURE__ */ jsxs20("div", { className: "eth-agent-app-domain-panel__meta", "aria-label": "Agent panel scope", children: [
+          agentRef ? /* @__PURE__ */ jsxs20("span", { children: [
+            "Agent ",
+            agentRef
+          ] }) : null,
+          projectRef ? /* @__PURE__ */ jsxs20("span", { children: [
+            "Project ",
+            projectRef
+          ] }) : null
+        ] }) : null,
+        children ? /* @__PURE__ */ jsx20("div", { className: "eth-agent-app-domain-panel__slot", children }) : null
+      ] }),
+      "data-eth-component": "AppDomainAgentPanel"
+    }
+  );
+}
+
+// src/index.tsx
+var AgentComponentNames = [
+  "LeftAgentRail",
+  "ChatAgentRail",
+  "AgentMessageList",
+  "AgentPromptBox",
+  "ScopeAttachmentPanel",
+  "AgentStateBadge",
+  "AgentThinkingPanel",
+  "AgentThinkingChain",
+  "AgentTraceViewer",
+  "AgentToolCallLog",
+  "AgentApprovalGate",
+  "AgentPlanPreview",
+  "AgentPlanDiff",
+  "AgentMemoryPanel",
+  "AgentContextViewer",
+  "AgentRunControls",
+  "AgentSafetyPanel",
+  "AgentInterruptionPanel",
+  "AgentHandoffPanel",
+  "AgentGeneratedArtifactPanel",
+  "AppDomainAgentPanel"
+];
+export {
+  AgentApprovalGate,
+  AgentComponentNames,
+  AgentContextViewer,
+  AgentGeneratedArtifactPanel,
+  AgentHandoffPanel,
+  AgentInterruptionPanel,
+  AgentMemoryPanel,
+  AgentMessageList,
+  AgentPlanDiff,
+  AgentPlanPreview,
+  AgentPromptBox,
+  AgentRunControls,
+  AgentSafetyPanel,
+  AgentStateBadge,
+  AgentThinkingChain,
+  AgentThinkingPanel,
+  AgentToolCallLog,
+  AgentTraceViewer,
+  AppDomainAgentPanel,
+  ChatAgentRail,
+  LeftAgentRail,
+  ScopeAttachmentPanel
+};
+//# sourceMappingURL=index.js.map