@flanksource/clicky-ui 0.3.9 → 0.3.11

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

@@ -0,0 +1,751 @@
+import { jsxs, jsx, Fragment } 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 { 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",
+  violet: "bg-violet-100 text-violet-700 [[data-theme=dark]_&]:bg-violet-500/15 [[data-theme=dark]_&]:text-violet-300",
+  emerald: "bg-emerald-100 text-emerald-700 [[data-theme=dark]_&]:bg-emerald-500/15 [[data-theme=dark]_&]:text-emerald-300",
+  teal: "bg-teal-100 text-teal-700 [[data-theme=dark]_&]:bg-teal-500/15 [[data-theme=dark]_&]:text-teal-300",
+  orange: "bg-orange-100 text-orange-700 [[data-theme=dark]_&]:bg-orange-500/15 [[data-theme=dark]_&]:text-orange-300",
+  rose: "bg-rose-100 text-rose-700 [[data-theme=dark]_&]:bg-rose-500/15 [[data-theme=dark]_&]:text-rose-300",
+  indigo: "bg-indigo-100 text-indigo-700 [[data-theme=dark]_&]:bg-indigo-500/15 [[data-theme=dark]_&]:text-indigo-300",
+  fuchsia: "bg-fuchsia-100 text-fuchsia-700 [[data-theme=dark]_&]:bg-fuchsia-500/15 [[data-theme=dark]_&]:text-fuchsia-300",
+  pink: "bg-pink-100 text-pink-700 [[data-theme=dark]_&]:bg-pink-500/15 [[data-theme=dark]_&]:text-pink-300",
+  slate: "bg-muted text-muted-foreground"
+};
+function SessionRow({
+  event,
+  last,
+  defaultExpanded,
+  showRowMetadata = false,
+  showRaw = false,
+  onPendingToolDecision
+}) {
+  if (event.kind === "user")
+    return /* @__PURE__ */ jsx(UserRow, { event, showRowMetadata, showRaw });
+  const visual = eventVisual(event);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-event-kind": event.kind,
+      className: "relative flex gap-density-3 pb-density-4 last:pb-0",
+      children: [
+        !last && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute bottom-0 left-[10px] top-[22px] w-px bg-border"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative z-[1] flex h-[21px] w-[21px] shrink-0 items-center justify-center rounded-full",
+              DISC_TONE[visual.tone]
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { icon: visual.icon, className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-px", children: [
+          /* @__PURE__ */ jsx(
+            EventBody,
+            {
+              event,
+              visual,
+              defaultExpanded,
+              onPendingToolDecision
+            }
+          ),
+          showRowMetadata && /* @__PURE__ */ jsx(EventMetadata, { event }),
+          showRaw && event.raw !== void 0 && /* @__PURE__ */ jsx(RawEventBlock, { raw: event.raw })
+        ] })
+      ]
+    }
+  );
+}
+function WaitGroupRow({
+  group,
+  last,
+  defaultExpanded,
+  showRowMetadata = false,
+  showRaw = false,
+  onPendingToolDecision
+}) {
+  const [open, setOpen] = useState(false);
+  const visual = getSessionAction("Wait");
+  const first = group.representative;
+  const final = group.events[group.events.length - 1] ?? first;
+  const label = `Wait × ${group.count}`;
+  const metadataEvent = { ...first };
+  delete metadataEvent.timestamp;
+  delete metadataEvent.toolState;
+  delete metadataEvent.approval;
+  metadataEvent.pending = false;
+  const timestampLabel = formatEventRange(first.timestamp, final.timestamp);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-event-kind": "tool",
+      "data-event-group": "wait",
+      className: "relative flex gap-density-3 pb-density-4 last:pb-0",
+      children: [
+        !last && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute bottom-0 left-[10px] top-[22px] w-px bg-border"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative z-[1] flex h-[21px] w-[21px] shrink-0 items-center justify-center rounded-full",
+              DISC_TONE[visual.tone]
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { icon: visual.icon, className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-px", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": open,
+              "aria-label": `${open ? "Collapse" : "Expand"} ${label}`,
+              onClick: () => setOpen((value) => !value),
+              className: "flex w-full items-center gap-1.5 text-left hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: UiChevronDown,
+                    className: cn(
+                      "ml-auto size-3 shrink-0 text-muted-foreground transition-transform",
+                      open && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          showRowMetadata && /* @__PURE__ */ jsx(
+            EventMetadata,
+            {
+              event: metadataEvent,
+              ...timestampLabel ? { timestampLabel } : {}
+            }
+          ),
+          open && /* @__PURE__ */ jsx("ol", { className: "relative mt-density-3 border-l border-border pl-density-3", children: group.events.map((event, index) => /* @__PURE__ */ jsx(
+            SessionRow,
+            {
+              event,
+              last: index === group.events.length - 1,
+              defaultExpanded,
+              showRowMetadata,
+              showRaw,
+              onPendingToolDecision
+            },
+            event.id
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+function UserRow({
+  event,
+  showRowMetadata,
+  showRaw
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-event-kind": "user",
+      className: "relative flex justify-end pb-density-4 last:pb-0",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[85%] items-start gap-density-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-0.5 text-right text-xs font-medium text-muted-foreground", children: "You" }),
+          /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words rounded-lg bg-accent px-density-3 py-density-2 text-right text-base font-medium leading-relaxed text-accent-foreground", children: event.text }),
+          showRowMetadata && /* @__PURE__ */ jsx(EventMetadata, { event, align: "right" }),
+          showRaw && event.raw !== void 0 && /* @__PURE__ */ jsx(RawEventBlock, { raw: event.raw, align: "right" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative z-[1] flex h-[21px] w-[21px] shrink-0 items-center justify-center rounded-full",
+              DISC_TONE.slate
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiUserCircle, className: "h-3 w-3" })
+          }
+        )
+      ] })
+    }
+  );
+}
+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": {
+      const action = getSessionAction(event.tool ?? "");
+      return {
+        icon: action.icon,
+        tone: action.tone,
+        label: action.label,
+        summaryOnly: action.summaryOnly ?? false
+      };
+    }
+    case "user":
+      return {
+        icon: UiUserCircle,
+        tone: "slate",
+        label: "User",
+        summaryOnly: false
+      };
+    case "system":
+      return {
+        icon: UiSparkles,
+        tone: "slate",
+        label: "System",
+        summaryOnly: false
+      };
+    case "assistant":
+      return {
+        icon: UiSparkles,
+        tone: "indigo",
+        label: "Assistant",
+        summaryOnly: false
+      };
+    case "thinking":
+      return {
+        icon: UiBrain,
+        tone: "slate",
+        label: "Thinking",
+        summaryOnly: false
+      };
+    case "error":
+      return {
+        icon: UiWarningTriangle,
+        tone: "rose",
+        label: "Error",
+        summaryOnly: false
+      };
+  }
+}
+function EventBody({
+  event,
+  visual,
+  defaultExpanded,
+  onPendingToolDecision
+}) {
+  if (event.kind === "tool")
+    return /* @__PURE__ */ jsx(
+      ToolBody,
+      {
+        event,
+        visual,
+        defaultExpanded,
+        onPendingToolDecision
+      }
+    );
+  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 });
+}
+function ToolBody({
+  event,
+  visual,
+  defaultExpanded,
+  onPendingToolDecision
+}) {
+  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 })
+    ] })
+  ] });
+}
+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);
+  const preview = ((_a = event.text) == null ? void 0 : _a.split("\n", 1)[0]) ?? "System instructions";
+  return /* @__PURE__ */ jsxs("div", { className: "not-prose text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((value) => !value),
+        className: "flex w-full items-start gap-1.5 text-left hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-foreground", children: "System" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: preview }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: UiChevronDown,
+              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 })
+  ] });
+}
+function ThinkingBody({ event }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx("div", { className: "not-prose", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-expanded": open,
+      onClick: () => setOpen((value) => !value),
+      className: "flex w-full items-start gap-1.5 text-left text-xs italic leading-relaxed text-muted-foreground hover:text-foreground",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "min-w-0 flex-1",
+              open ? "whitespace-pre-wrap break-words" : "truncate"
+            ),
+            children: event.text
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: UiChevronDown,
+            className: cn(
+              "mt-0.5 size-3 shrink-0 transition-transform",
+              open && "rotate-180"
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ErrorBody({ event }) {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-rose-200 bg-rose-50 px-density-3 py-1.5 text-xs text-rose-700 [[data-theme=dark]_&]:border-rose-500/30 [[data-theme=dark]_&]:bg-rose-500/10 [[data-theme=dark]_&]:text-rose-300", children: event.text });
+}
+export {
+  SessionRow,
+  WaitGroupRow
+};
+//# sourceMappingURL=SessionViewer.rows.js.map