@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/ai/SessionViewer.rows.js

@@ -1,21 +1,17 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../Icon.js";
-import { CodeBlock } from "../CodeBlock.js";
-import { CodeDiff } from "../CodeDiff.js";
-import { Button } from "../../components/button.js";
-import { APPROVAL_ICONS } from "./agent-action-icons.js";
 import { getSessionAction } from "./SessionViewer.model.js";
-import { summarizeToolInput, shellCommand, toolInputParams, toolDiff, questionsFromToolInput } from "./SessionViewer.input.js";
+import { EventMetadata, RawEventBlock } from "./SessionViewer.row-metadata.js";
+import { formatEventRange } from "./SessionViewer.row-time.js";
+import { ToolBody } from "./SessionViewer.tool-row.js";
+import { Markdown } from "../Markdown.js";
 import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
 import { UiUserCircle } from "../../icons/components/UiUserCircle.js";
 import { UiWarningTriangle } from "../../icons/components/UiWarningTriangle.js";
 import { UiBrain } from "../../icons/components/UiBrain.js";
 import { UiSparkles } from "../../icons/components/UiSparkles.js";
-import { UiCheck } from "../../icons/components/UiCheck.js";
-import { UiCancel } from "../../icons/components/UiCancel.js";
-import { UiComment } from "../../icons/components/UiComment.js";
 const DISC_TONE = {
   sky: "bg-sky-100 text-sky-700 [[data-theme=dark]_&]:bg-sky-500/15 [[data-theme=dark]_&]:text-sky-300",
   amber: "bg-amber-100 text-amber-700 [[data-theme=dark]_&]:bg-amber-500/15 [[data-theme=dark]_&]:text-amber-300",
@@ -35,10 +31,19 @@ function SessionRow({
   defaultExpanded,
   showRowMetadata = false,
   showRaw = false,
+  renderMessageBadge,
   onPendingToolDecision
 }) {
-  if (event.kind === "user")
-    return /* @__PURE__ */ jsx(UserRow, { event, showRowMetadata, showRaw });
+  if (event.kind === "user") {
+    return /* @__PURE__ */ jsx(
+      UserRow,
+      {
+        event,
+        showRowMetadata,
+        showRaw
+      }
+    );
+  }
   const visual = eventVisual(event);
   return /* @__PURE__ */ jsxs(
     "li",
@@ -70,6 +75,7 @@ function SessionRow({
               event,
               visual,
               defaultExpanded,
+              messageBadge: event.kind === "assistant" ? renderMessageBadge == null ? void 0 : renderMessageBadge(event) : void 0,
               onPendingToolDecision
             }
           ),
@@ -86,6 +92,7 @@ function WaitGroupRow({
   defaultExpanded,
   showRowMetadata = false,
   showRaw = false,
+  renderMessageBadge,
   onPendingToolDecision
 }) {
   const [open, setOpen] = useState(false);
@@ -162,6 +169,7 @@ function WaitGroupRow({
               defaultExpanded,
               showRowMetadata,
               showRaw,
+              renderMessageBadge,
               onPendingToolDecision
             },
             event.id
@@ -202,124 +210,6 @@ function UserRow({
     }
   );
 }
-function EventMetadata({
-  event,
-  align = "left",
-  timestampLabel
-}) {
-  const parts = [
-    timestampLabel ?? (event.timestamp ? formatEventTime(event.timestamp) : ""),
-    event.source,
-    event.model,
-    event.reasoningEffort,
-    event.turnId ? `turn ${event.turnId}` : "",
-    event.agentId ? `agent ${event.agentId}` : "",
-    event.toolState,
-    approvalLabel(event)
-  ].filter(Boolean);
-  if (parts.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "mt-1 flex flex-wrap gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground",
-        align === "right" && "justify-end text-right"
-      ),
-      children: parts.map((part, index) => /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: part }, `${part}-${index}`))
-    }
-  );
-}
-function approvalLabel(event) {
-  var _a, _b;
-  if (((_a = event.approval) == null ? void 0 : _a.approved) === true) return "approved";
-  if (((_b = event.approval) == null ? void 0 : _b.approved) === false) {
-    return event.approval.reason ? `denied: ${event.approval.reason}` : "denied";
-  }
-  if (event.pending) return "approval pending";
-  if (event.toolState === "output-denied") return "denied";
-  return "";
-}
-function approvalStatus(event) {
-  var _a, _b, _c;
-  if (((_a = event.approval) == null ? void 0 : _a.approved) === true) {
-    return {
-      label: "Approved",
-      icon: APPROVAL_ICONS.approved.icon,
-      className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 [[data-theme=dark]_&]:text-emerald-300"
-    };
-  }
-  if (((_b = event.approval) == null ? void 0 : _b.approved) === false || event.toolState === "output-denied") {
-    const reason = ((_c = event.approval) == null ? void 0 : _c.reason) ? `: ${event.approval.reason}` : "";
-    return {
-      label: `Denied${reason}`,
-      icon: APPROVAL_ICONS.denied.icon,
-      className: "border-rose-500/30 bg-rose-500/10 text-rose-700 [[data-theme=dark]_&]:text-rose-300"
-    };
-  }
-  if (event.pending) {
-    return {
-      label: "Awaiting approval",
-      icon: APPROVAL_ICONS.pending.icon,
-      className: "border-amber-500/30 bg-amber-500/10 text-amber-700 [[data-theme=dark]_&]:text-amber-300"
-    };
-  }
-  if (event.toolState === "approval-responded") {
-    return {
-      label: "Approval answered",
-      icon: APPROVAL_ICONS.question.icon,
-      className: "border-sky-500/30 bg-sky-500/10 text-sky-700 [[data-theme=dark]_&]:text-sky-300"
-    };
-  }
-  return null;
-}
-function ApprovalBadge({ event }) {
-  const status = approvalStatus(event);
-  if (!status) return null;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn(
-        "inline-flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] font-medium",
-        status.className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { icon: status.icon, className: "size-3" }),
-        status.label
-      ]
-    }
-  );
-}
-function formatEventTime(value) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString();
-}
-function formatEventRange(start, end) {
-  if (!start) return end ? formatEventTime(end) : void 0;
-  if (!end || end === start) return formatEventTime(start);
-  return `${formatEventTime(start)} – ${formatEventTime(end)}`;
-}
-function RawEventBlock({ raw, align = "left" }) {
-  const source = rawToSource(raw);
-  return /* @__PURE__ */ jsxs("details", { className: cn("mt-1.5 text-left", align === "right" && "ml-auto max-w-full"), children: [
-    /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-[11px] text-muted-foreground hover:text-foreground", children: "Raw" }),
-    /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(CodeBlock, { language: "json", source, jsonDefaultOpenDepth: 1 }) })
-  ] });
-}
-function rawToSource(raw) {
-  if (typeof raw === "string") {
-    try {
-      return JSON.stringify(JSON.parse(raw), null, 2);
-    } catch {
-      return raw;
-    }
-  }
-  try {
-    return JSON.stringify(raw, null, 2);
-  } catch {
-    return String(raw);
-  }
-}
 function eventVisual(event) {
   switch (event.kind) {
     case "tool": {
@@ -372,6 +262,7 @@ function EventBody({
   event,
   visual,
   defaultExpanded,
+  messageBadge,
   onPendingToolDecision
 }) {
   if (event.kind === "tool")
@@ -387,298 +278,17 @@ function EventBody({
   if (event.kind === "thinking") return /* @__PURE__ */ jsx(ThinkingBody, { event });
   if (event.kind === "error") return /* @__PURE__ */ jsx(ErrorBody, { event });
   if (event.kind === "system") return /* @__PURE__ */ jsx(SystemBody, { event });
-  return /* @__PURE__ */ jsx(MessageBody, { event });
+  return /* @__PURE__ */ jsx(MessageBody, { event, badge: messageBadge });
 }
-function ToolBody({
+function MessageBody({
   event,
-  visual,
-  defaultExpanded,
-  onPendingToolDecision
+  badge
 }) {
-  const summary = summarizeToolInput(
-    event.tool ?? "",
-    event.toolInput,
-    event.cwd
-  );
-  const command = shellCommand(event.tool ?? "", event.toolInput);
-  const [open, setOpen] = useState(defaultExpanded);
-  if (event.tool === "AskUserQuestion") {
-    return /* @__PURE__ */ jsx(QuestionToolBody, { event, visual, onDecision: onPendingToolDecision });
-  }
-  if (command !== void 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "not-prose", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(CodeBlock, { bare: true, language: "bash", source: command }) }),
-        /* @__PURE__ */ jsx(ApprovalBadge, { event }),
-        event.toolResponse !== void 0 && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-expanded": open,
-            "aria-label": "Toggle response",
-            onClick: () => setOpen((value) => !value),
-            className: "text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                icon: UiChevronDown,
-                className: cn(
-                  "size-3 shrink-0 transition-transform",
-                  open && "rotate-180"
-                )
-              }
-            )
-          }
-        )
-      ] }),
-      open && event.toolResponse !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(ResponseBlock, { response: event.toolResponse }) }),
-      event.pending && onPendingToolDecision && /* @__PURE__ */ jsx(PendingDecisionControls, { event, onDecision: onPendingToolDecision })
-    ] });
-  }
-  const hasDetail = event.toolInput !== void 0 || event.toolResponse !== void 0;
-  const params = toolInputParams(event.tool ?? "", event.toolInput, event.cwd);
-  const diff = toolDiff(event.tool ?? "", event.toolInput);
-  const header = /* @__PURE__ */ jsxs(Fragment, { children: [
-    visual.summaryOnly && summary ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-xs text-foreground ", children: summary }) : /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-foreground", children: visual.label }),
-    diff && /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-mono text-xs", children: [
-      diff.added > 0 && /* @__PURE__ */ jsxs("span", { className: "text-emerald-600 [[data-theme=dark]_&]:text-emerald-400", children: [
-        "+",
-        diff.added
-      ] }),
-      diff.removed > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-rose-600 [[data-theme=dark]_&]:text-rose-400", children: [
-        "-",
-        diff.removed
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(ApprovalBadge, { event }),
-    params.length > 0 && /* @__PURE__ */ jsx(InlineParams, { params })
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: "not-prose", children: [
-    hasDetail ? /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-expanded": open,
-        onClick: () => setOpen((value) => !value),
-        className: "flex w-full items-center gap-1.5 text-left hover:text-foreground",
-        children: [
-          header,
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              icon: UiChevronDown,
-              className: cn(
-                "ml-auto size-3 shrink-0 text-muted-foreground transition-transform",
-                open && "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: header }),
-    open && hasDetail && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 space-y-1.5", children: [
-      diff ? /* @__PURE__ */ jsx(DiffBlock, { diff }) : event.toolInput !== void 0 && /* @__PURE__ */ jsx(
-        DetailBlock,
-        {
-          language: "json",
-          source: JSON.stringify(event.toolInput, null, 2)
-        }
-      ),
-      event.toolResponse !== void 0 && /* @__PURE__ */ jsx(ResponseBlock, { response: event.toolResponse })
-    ] }),
-    event.pending && onPendingToolDecision && /* @__PURE__ */ jsx(PendingDecisionControls, { event, onDecision: onPendingToolDecision })
-  ] });
-}
-function QuestionToolBody({
-  event,
-  visual,
-  onDecision
-}) {
-  const questions = questionsFromToolInput(event.toolInput);
-  const summary = summarizeToolInput(event.tool ?? "", event.toolInput, event.cwd);
-  return /* @__PURE__ */ jsxs("div", { className: "not-prose", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-foreground", children: visual.label }),
-      /* @__PURE__ */ jsx(ApprovalBadge, { event }),
-      summary && questions.length !== 1 && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs text-muted-foreground", children: summary })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 space-y-1.5", children: [
-      questions.length > 0 ? questions.map((question, index) => /* @__PURE__ */ jsx(QuestionCard, { question, index }, `${question.id}-${index}`)) : event.toolInput ? /* @__PURE__ */ jsx(DetailBlock, { language: "json", source: JSON.stringify(event.toolInput, null, 2) }) : null,
-      event.toolResponse !== void 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase text-muted-foreground", children: "Answer" }),
-        /* @__PURE__ */ jsx(ResponseBlock, { response: event.toolResponse })
-      ] }),
-      event.pending && onDecision && /* @__PURE__ */ jsx(QuestionDecisionControls, { event, questions, onDecision })
-    ] })
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+    badge,
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 whitespace-pre-wrap break-words text-sm font-medium leading-relaxed text-foreground", children: event.text && /* @__PURE__ */ jsx(Markdown, { text: event.text }) })
   ] });
 }
-function PendingDecisionControls({
-  event,
-  onDecision
-}) {
-  const [comment, setComment] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-  const decide = async (allow, message) => {
-    setBusy(true);
-    setError("");
-    try {
-      await onDecision({ event, allow, ...message ? { message } : {} });
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause));
-    } finally {
-      setBusy(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2 rounded-md border border-amber-500/30 bg-amber-500/5 p-density-3", children: [
-    /* @__PURE__ */ jsx("textarea", { "aria-label": "Decision comment", value: comment, onChange: (e) => setComment(e.target.value), placeholder: "Optional rejection feedback", className: "min-h-16 w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-      /* @__PURE__ */ jsxs(Button, { size: "sm", loading: busy, onClick: () => decide(true), children: [
-        /* @__PURE__ */ jsx(Icon, { icon: UiCheck }),
-        "Allow"
-      ] }),
-      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", disabled: busy, onClick: () => decide(false), children: [
-        /* @__PURE__ */ jsx(Icon, { icon: UiCancel }),
-        "Reject"
-      ] }),
-      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", disabled: busy || !comment.trim(), onClick: () => decide(false, comment.trim()), children: [
-        /* @__PURE__ */ jsx(Icon, { icon: UiComment }),
-        "Reject with comment"
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsx("div", { role: "alert", className: "text-xs text-rose-600", children: error })
-  ] });
-}
-function QuestionDecisionControls({
-  event,
-  questions,
-  onDecision
-}) {
-  const [answers, setAnswers] = useState({});
-  const [details, setDetails] = useState({});
-  const [comment, setComment] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-  const decide = async (allow, message) => {
-    setBusy(true);
-    setError("");
-    const submittedAnswers = Object.fromEntries(Object.entries(answers).map(([question, answer]) => {
-      var _a;
-      const detail = (_a = details[question]) == null ? void 0 : _a.trim();
-      if (!detail) return [question, answer];
-      return [question, Array.isArray(answer) ? [...answer, `Additional details: ${detail}`] : `${answer}
-Additional details: ${detail}`];
-    }));
-    try {
-      await onDecision({ event, allow, answers: submittedAnswers, ...message ? { message } : {} });
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause));
-    } finally {
-      setBusy(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-md border border-sky-500/25 bg-sky-500/5 p-density-3", children: [
-    questions.map((question) => /* @__PURE__ */ jsxs("fieldset", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-foreground", children: question.text }),
-      question.options.map((option) => question.multiSelect ? /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: Array.isArray(answers[question.text]) && answers[question.text].includes(option.value), onChange: (e) => setAnswers((current) => {
-          const selected = Array.isArray(current[question.text]) ? current[question.text] : [];
-          return { ...current, [question.text]: e.target.checked ? [...selected, option.value] : selected.filter((value) => value !== option.value) };
-        }) }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          option.label,
-          option.description && /* @__PURE__ */ jsx("span", { className: "ml-1 text-muted-foreground", children: option.description })
-        ] })
-      ] }, option.value) : /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx("input", { type: "radio", name: `question-${event.id}-${question.id}`, value: option.value, checked: answers[question.text] === option.value, onChange: () => setAnswers((current) => ({ ...current, [question.text]: option.value })) }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          option.label,
-          option.description && /* @__PURE__ */ jsx("span", { className: "ml-1 text-muted-foreground", children: option.description })
-        ] })
-      ] }, option.value)),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          "aria-label": `${question.text} additional details`,
-          value: question.options.length ? details[question.text] ?? "" : typeof answers[question.text] === "string" ? answers[question.text] : "",
-          onChange: (e) => question.options.length ? setDetails((current) => ({ ...current, [question.text]: e.target.value })) : setAnswers((current) => ({ ...current, [question.text]: e.target.value })),
-          placeholder: question.options.length ? "Additional details" : "Your answer",
-          className: "min-h-16 w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm"
-        }
-      )
-    ] }, question.id)),
-    /* @__PURE__ */ jsx("textarea", { "aria-label": "Rejection comment", value: comment, onChange: (e) => setComment(e.target.value), placeholder: "Optional rejection feedback", className: "min-h-16 w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-      /* @__PURE__ */ jsxs(Button, { size: "sm", loading: busy, onClick: () => decide(true), children: [
-        /* @__PURE__ */ jsx(Icon, { icon: UiCheck }),
-        "Send answer"
-      ] }),
-      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", disabled: busy, onClick: () => decide(false), children: [
-        /* @__PURE__ */ jsx(Icon, { icon: UiCancel }),
-        "Reject"
-      ] }),
-      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", disabled: busy || !comment.trim(), onClick: () => decide(false, comment.trim()), children: [
-        /* @__PURE__ */ jsx(Icon, { icon: UiComment }),
-        "Reject with comment"
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsx("div", { role: "alert", className: "text-xs text-rose-600", children: error })
-  ] });
-}
-function QuestionCard({ question, index }) {
-  const label = question.context || (question.id ? `Question ${question.id}` : `Question ${index + 1}`);
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-sky-500/20 bg-sky-500/5 px-density-3 py-density-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground", children: question.text }),
-    question.options.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex flex-wrap gap-1", children: question.options.map((option) => /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: "rounded border border-border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: option.label }),
-          option.description && /* @__PURE__ */ jsx("span", { className: "ml-1", children: option.description })
-        ]
-      },
-      option.value
-    )) })
-  ] });
-}
-function InlineParams({ params }) {
-  return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: params.map((param) => /* @__PURE__ */ jsxs("span", { className: "[&:not(:first-child)]:ml-2", children: [
-    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70", children: [
-      param.name,
-      ": "
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: param.value })
-  ] }, param.name)) });
-}
-function DiffBlock({ diff }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: diff.segments.map((segment, index) => /* @__PURE__ */ jsx(
-    CodeDiff,
-    {
-      bare: true,
-      showLineNumbers: false,
-      original: segment.original,
-      modified: segment.modified,
-      ...diff.language ? { language: diff.language } : {}
-    },
-    index
-  )) });
-}
-function ResponseBlock({ response }) {
-  const trimmed = response.trim();
-  const isJson = trimmed.startsWith("{") || trimmed.startsWith("[");
-  return /* @__PURE__ */ jsx(DetailBlock, { language: isJson ? "json" : "text", source: response });
-}
-function DetailBlock({
-  language,
-  source
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto text-xs", children: /* @__PURE__ */ jsx(CodeBlock, { bare: true, language, source }) });
-}
-function MessageBody({ event }) {
-  return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words text-base font-medium leading-relaxed text-foreground", children: event.text });
-}
 function SystemBody({ event }) {
   var _a;
   const [open, setOpen] = useState(false);
@@ -698,13 +308,16 @@ function SystemBody({ event }) {
             Icon,
             {
               icon: UiChevronDown,
-              className: cn("mt-0.5 size-3 shrink-0 transition-transform", open && "rotate-180")
+              className: cn(
+                "mt-0.5 size-3 shrink-0 transition-transform",
+                open && "rotate-180"
+              )
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("div", { className: "mt-1.5 whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 px-density-3 py-density-2 leading-relaxed", children: event.text })
+    open && /* @__PURE__ */ jsx("div", { className: "mt-1.5 whitespace-pre-wrap break-words  bg-muted/20 px-density-3 py-density-2 leading-relaxed", children: event.text && /* @__PURE__ */ jsx(Markdown, { text: event.text }) })
   ] });
 }
 function ThinkingBody({ event }) {