@keboola/design 10.1.0 → 11.0.0

package/dist/chunk-KQW7QNTU.js

@@ -0,0 +1,1549 @@
+import { Table } from './chunk-BHGIDSRJ.js';
+import { Avatar } from './chunk-FFJTEQCC.js';
+import { Progress } from './chunk-SJYMHZKA.js';
+import { HoverCard } from './chunk-5IG2S7ZY.js';
+import { Command } from './chunk-ODJF7YIP.js';
+import { FullScreenModal, FullScreenModalHeader, FullScreenModalBody } from './chunk-KN4ASMH5.js';
+import { Truncated } from './chunk-SVPLTL35.js';
+import { DiagramSkeleton } from './chunk-SFFF2WQP.js';
+import { Checkbox } from './chunk-Y4W3JORC.js';
+import { Badge } from './chunk-SBGAUGXY.js';
+import { Textarea } from './chunk-EEK5NGZF.js';
+import { TextInput } from './chunk-HPMYYGP7.js';
+import { ClipboardButton } from './chunk-FUFMVW7O.js';
+import { Button } from './chunk-IXAYNBOY.js';
+import { ChevronDown, Maximize2, X, Minimize2, Loader2, ChevronLeft, ChevronRight, FileText, AlertCircle, XCircle, CircleCheck, Send, CircleX, CirclePause, Play } from './chunk-RQVK4IYC.js';
+import { Tooltip, TooltipProvider } from './chunk-SWQFYNYG.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { lazy, useState, useId, useRef, useEffect, Suspense, isValidElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cva } from 'class-variance-authority';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Slot } from '@radix-ui/react-slot';
+
+var variantClasses = {
+  success: "tw:text-secondary-500 tw:focus-visible:outline-ring tw:not-disabled:hover:text-secondary-600",
+  error: "tw:text-error-500 tw:focus-visible:outline-error-500 tw:not-disabled:hover:text-error-600",
+  processing: "tw:text-secondary-500 tw:focus-visible:outline-ring tw:not-disabled:hover:text-secondary-600",
+  dismissed: "tw:text-neutral-700 tw:focus-visible:outline-neutral-500 tw:not-disabled:hover:text-neutral-800"
+};
+var iconClasses = "tw:size-4 tw:shrink-0 tw:basis-4";
+var renderVariantIcon = (variant) => {
+  if (variant === "processing") {
+    return /* @__PURE__ */ jsx(Loader2, { className: cn(iconClasses, "tw:animate-spin") });
+  }
+  if (variant === "error") {
+    return /* @__PURE__ */ jsx(XCircle, { className: iconClasses });
+  }
+  if (variant === "dismissed") {
+    return /* @__PURE__ */ jsx(XCircle, { className: cn(iconClasses, "tw:text-neutral-500") });
+  }
+  return /* @__PURE__ */ jsx(CircleCheck, { className: iconClasses });
+};
+var CollapsibleStepHeader = ({
+  isExpanded,
+  onToggle,
+  label,
+  variant = "success"
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-expanded": isExpanded,
+      onClick: onToggle,
+      className: cn(
+        "tw:flex tw:w-fit tw:items-start tw:gap-2 tw:text-left tw:text-sm tw:font-medium tw:italic tw:transition-colors tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:disabled:opacity-40",
+        variantClasses[variant]
+      ),
+      children: [
+        renderVariantIcon(variant),
+        /* @__PURE__ */ jsxs("span", { className: "tw:min-w-0", children: [
+          label,
+          /* @__PURE__ */ jsxs("span", { className: "tw:whitespace-nowrap", children: [
+            "\u2060",
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "tw:ml-2 tw:inline-block tw:size-4 tw:align-middle tw:transition-transform",
+                  isExpanded && "tw:rotate-180"
+                )
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var InlineStepDetail = ({ children }) => /* @__PURE__ */ jsx("div", { className: "tw:ml-2.5 tw:whitespace-pre-wrap tw:border-l tw:border-neutral-200 tw:pl-3 tw:text-xs tw:text-neutral-400", children });
+var renderVariantIcon2 = (variant) => {
+  if (variant === "processing") {
+    return /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-neutral-200" });
+  }
+  if (variant === "error") {
+    return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-4 tw:text-error-500" });
+  }
+  if (variant === "dismissed") {
+    return /* @__PURE__ */ jsx(XCircle, { className: "tw:size-4 tw:text-neutral-200" });
+  }
+  return /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-4 tw:text-neutral-200" });
+};
+var InlineStepLabel = ({ variant, children }) => /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:min-w-0 tw:items-center tw:gap-1", children: [
+  /* @__PURE__ */ jsx("div", { className: "tw:flex tw:size-5 tw:shrink-0 tw:items-center tw:justify-center", children: renderVariantIcon2(variant) }),
+  /* @__PURE__ */ jsx("div", { className: "tw:flex tw:min-w-0 tw:flex-wrap tw:items-center tw:gap-x-1.5 tw:gap-y-1 tw:text-sm tw:font-medium tw:italic tw:text-neutral-800", children })
+] });
+var SECTION_LABELS = {
+  success: "Answered questions",
+  dismissed: "Dismissed questions"
+};
+var AnswerSummary = ({
+  items,
+  variant = "success",
+  noAnswerLabel = "No answer"
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const toggle = () => setIsExpanded((prev) => !prev);
+  const count = items.length;
+  const [firstItem] = items;
+  const label = count === 1 && firstItem ? firstItem.question : `${count} questions`;
+  return /* @__PURE__ */ jsxs("section", { className: "tw:mt-4 tw:flex tw:flex-col tw:gap-4", "aria-label": SECTION_LABELS[variant], children: [
+    /* @__PURE__ */ jsx(
+      CollapsibleStepHeader,
+      {
+        isExpanded,
+        onToggle: toggle,
+        variant,
+        label
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { className: "tw:flex tw:flex-col tw:gap-4 tw:pl-5", children: items.map(({ question, answer }, index) => /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
+      /* @__PURE__ */ jsx(InlineStepLabel, { variant, children: question }),
+      /* @__PURE__ */ jsx(InlineStepDetail, { children: answer && answer.length > 0 ? answer : noAnswerLabel })
+    ] }, `${index}-${question}`)) })
+  ] });
+};
+var MermaidDiagram = lazy(
+  () => import('@keboola/design/mermaid').then(
+    (module) => ({ default: module.MermaidDiagram }),
+    (error) => {
+      console.error("[AIKit] failed to load the MermaidDiagram chunk", error);
+      return {
+        default: ({ code }) => /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) })
+      };
+    }
+  )
+);
+var proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-neutral-50 tw:[&_pre]:text-neutral-800 tw:[&_:not(pre)>code]:bg-neutral-50 tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none";
+var getText = (node) => {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getText).join("");
+  if (isValidElement(node) && typeof node.props === "object" && node.props !== null && "children" in node.props) {
+    return getText(node.props.children);
+  }
+  return "";
+};
+var getLanguage = (element) => {
+  if (!isValidElement(element)) return void 0;
+  const { props } = element;
+  if (typeof props !== "object" || props === null || !("className" in props)) return void 0;
+  if (typeof props.className !== "string") return void 0;
+  return props.className.match(/language-(\S+)/)?.[1];
+};
+var components = {
+  // Handle mermaid at the `pre` level: react-markdown renders fenced blocks as
+  // `<pre><code class="language-…">`, so a diagram (a block `<div>`) must replace
+  // the whole `<pre>` — returning it from the `code` override would nest a block
+  // element inside `<pre><code>` (invalid HTML).
+  pre({ children, ...props }) {
+    const child = Array.isArray(children) ? children[0] : children;
+    if (getLanguage(child) === "mermaid") {
+      const code2 = getText(child).replace(/\n$/, "");
+      if (!code2.trim()) return null;
+      return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(DiagramSkeleton, {}), children: /* @__PURE__ */ jsx(MermaidDiagram, { code: code2 }) });
+    }
+    const { node: _node, ...rest } = props;
+    const code = getText(child).replace(/\n$/, "");
+    return /* @__PURE__ */ jsxs("div", { className: "tw:group tw:relative", children: [
+      /* @__PURE__ */ jsx("span", { className: "tw:absolute tw:right-2 tw:top-2 tw:opacity-0 tw:transition-opacity tw:group-focus-within:opacity-100 tw:group-hover:opacity-100", children: /* @__PURE__ */ jsx(ClipboardButton, { text: code, tooltip: "Copy", size: "icon-xs", variant: "outline" }) }),
+      /* @__PURE__ */ jsx("pre", { ...rest, children })
+    ] });
+  },
+  // Open absolute http(s) links in a new tab with a safe `rel`; leave relative
+  // and anchor links to default in-page navigation.
+  a({ children, href, ...props }) {
+    const { node: _node, ...rest } = props;
+    const isExternal = !!href && /^https?:\/\//.test(href);
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        ...isExternal ? { target: "_blank", rel: "noopener noreferrer" } : null,
+        ...rest,
+        children
+      }
+    );
+  },
+  // Route GFM tables through the design `Table` so they match the rest of the
+  // system; `tw:not-prose` opts the table out of prose typography overrides.
+  table({ className, ...props }) {
+    const { node: _node, ...rest } = props;
+    return /* @__PURE__ */ jsx("div", { className: "tw:not-prose tw:my-4", children: /* @__PURE__ */ jsx(Table, { bordered: true, className: cn("tw:!mb-0", className), ...rest }) });
+  },
+  thead(props) {
+    const { node: _node, ...rest } = props;
+    return /* @__PURE__ */ jsx(Table.Header, { ...rest });
+  },
+  tbody(props) {
+    const { node: _node, ...rest } = props;
+    return /* @__PURE__ */ jsx(Table.Body, { ...rest });
+  },
+  tr(props) {
+    const { node: _node, ...rest } = props;
+    return /* @__PURE__ */ jsx(Table.Row, { ...rest });
+  },
+  th(props) {
+    const { node: _node, ...rest } = props;
+    return /* @__PURE__ */ jsx(Table.Head, { ...rest });
+  },
+  td(props) {
+    const { node: _node, ...rest } = props;
+    return /* @__PURE__ */ jsx(Table.Cell, { ...rest });
+  }
+};
+var Markdown = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { "data-prose": true, className: cn(proseClass, className), children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children }) });
+};
+var containerClasses = cva(["tw:flex", "tw:max-w-full", "tw:gap-4"], {
+  variants: {
+    variant: {
+      user: ["tw:justify-self-end", "tw:flex-row-reverse"],
+      assistant: ["tw:justify-self-start", "tw:w-full", "tw:gap-3"]
+    }
+  },
+  defaultVariants: {
+    variant: "assistant"
+  }
+});
+var contentClasses = cva(
+  [
+    "tw:flex",
+    "tw:flex-col",
+    "tw:gap-4",
+    "tw:break-words",
+    "tw:leading-relaxed",
+    "tw:text-foreground",
+    // Hooks on `data-prose`, not the `tw:prose` class — Tailwind scans raw file
+    // bytes, so a `\:` escape in a TS string reaches the generator doubled.
+    "tw:[&_[data-prose]]:text-foreground"
+  ],
+  {
+    variants: {
+      variant: {
+        assistant: ["tw:flex-1", "tw:w-full", "tw:min-w-0", "tw:[&>*]:min-w-0"],
+        user: [
+          "tw:max-w-screen-sm",
+          "tw:w-fit",
+          "tw:bg-muted",
+          "tw:p-3",
+          "tw:rounded-2xl",
+          "tw:ml-6",
+          "tw:overflow-hidden",
+          "tw:break-anywhere"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "assistant"
+    }
+  }
+);
+var MessageBubble = ({ variant, children, user, actions, createdAt }) => {
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses({ variant }), "data-testid": `chat-message-${variant}`, children: [
+    variant === "user" && /* @__PURE__ */ jsx(Avatar, { user, size: 30, title: createdAt }),
+    /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: contentClasses({ variant }), children }),
+      actions
+    ] })
+  ] });
+};
+var defaultStepCountLabel = (count) => `${count} step${count === 1 ? "" : "s"}`;
+var StatusPill = ({
+  status,
+  pendingLabel,
+  approvedLabel,
+  dismissedLabel,
+  changesRequestedLabel
+}) => {
+  if (status === "approved") {
+    return /* @__PURE__ */ jsx(Badge, { color: "green", variant: "pill", className: "tw:normal-case tw:tracking-normal", children: approvedLabel });
+  }
+  if (status === "dismissed") {
+    return /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "pill", className: "tw:normal-case tw:tracking-normal", children: dismissedLabel });
+  }
+  if (status === "changes-requested") {
+    return /* @__PURE__ */ jsx(Badge, { color: "blue", variant: "pill", className: "tw:normal-case tw:tracking-normal", children: changesRequestedLabel });
+  }
+  return /* @__PURE__ */ jsx(Badge, { color: "green", variant: "pill", className: "tw:normal-case tw:tracking-normal", children: pendingLabel });
+};
+var ExpandToggle = ({
+  isExpanded,
+  onToggle,
+  showMoreLabel,
+  showLessLabel
+}) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    type: "button",
+    onClick: onToggle,
+    "aria-expanded": isExpanded,
+    className: "tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:text-secondary-500 tw:hover:text-secondary-600 tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:focus-visible:outline-ring tailwindcss-preflight",
+    children: [
+      /* @__PURE__ */ jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          className: cn("tw:size-5 tw:transition-transform", isExpanded && "tw:rotate-180")
+        }
+      )
+    ]
+  }
+);
+var ChangeRequestForm = ({
+  value,
+  onValueChange,
+  onSubmit,
+  onKeyDown,
+  placeholder,
+  submitLabel,
+  formLabel,
+  canSubmit,
+  isSubmitting
+}) => /* @__PURE__ */ jsx(
+  "form",
+  {
+    onSubmit,
+    className: "tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:px-4 tw:py-3",
+    "aria-label": formLabel,
+    children: /* @__PURE__ */ jsxs("div", { className: "tw:relative", children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value,
+          onValueChange,
+          placeholder,
+          maxRows: 4,
+          autoFocus: true,
+          onKeyDown,
+          containerClassName: "tw:pr-12",
+          disabled: isSubmitting,
+          "aria-label": placeholder,
+          "data-testid": "plan-change-request-input"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          variant: "invisible",
+          size: "icon-sm",
+          "aria-label": submitLabel,
+          disabled: !canSubmit,
+          className: "tw:absolute tw:right-2 tw:top-1/2 tw:-translate-y-1/2 tw:[&_svg]:text-secondary-500 tw:not-disabled:hover:[&_svg]:text-secondary-600",
+          "data-testid": "plan-change-request-submit",
+          children: /* @__PURE__ */ jsx(Send, { className: "tw:size-4" })
+        }
+      )
+    ] })
+  }
+);
+var PlanActions = ({
+  isRequestingChanges,
+  isSubmitting,
+  onApprove,
+  onRequestChanges,
+  onOpenRequestChanges,
+  onCancelChangeRequest,
+  approveLabel,
+  requestChangesLabel,
+  cancelLabel,
+  approveTooltip
+}) => /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:shrink-0 tw:items-center tw:gap-2", children: [
+  isRequestingChanges ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "small",
+      onClick: onCancelChangeRequest,
+      disabled: isSubmitting,
+      "data-testid": "plan-cancel-button",
+      className: "tw:shrink-0 tw:whitespace-nowrap",
+      children: cancelLabel
+    }
+  ) : onRequestChanges && /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "small",
+      onClick: onOpenRequestChanges,
+      disabled: isSubmitting,
+      "data-testid": "plan-request-changes-button",
+      className: "tw:shrink-0 tw:whitespace-nowrap",
+      children: requestChangesLabel
+    }
+  ),
+  onApprove && (approveTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: approveTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "primary",
+      size: "small",
+      onClick: onApprove,
+      disabled: isSubmitting || isRequestingChanges,
+      "data-testid": "plan-approve-button",
+      className: "tw:shrink-0 tw:whitespace-nowrap",
+      children: approveLabel
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "primary",
+      size: "small",
+      onClick: onApprove,
+      disabled: isSubmitting || isRequestingChanges,
+      "data-testid": "plan-approve-button",
+      className: "tw:shrink-0 tw:whitespace-nowrap",
+      children: approveLabel
+    }
+  ))
+] });
+var PlanApproval = ({
+  status,
+  title,
+  summary,
+  stepCount,
+  planBody,
+  defaultExpanded = false,
+  isExpanded: isExpandedProp,
+  onExpandToggle,
+  onApprove,
+  onRequestChanges,
+  onClose,
+  isSubmitting = false,
+  approveTooltip,
+  pendingPillLabel = "Ready for approval",
+  approvedPillLabel = "Approved",
+  dismissedPillLabel = "Dismissed",
+  changesRequestedPillLabel = "Changes Requested",
+  approveLabel = "Approve",
+  requestChangesLabel = "Request Changes",
+  cancelLabel = "Cancel",
+  showMoreLabel = "Show more",
+  showLessLabel = "Show less",
+  closeLabel = "Dismiss plan",
+  fullScreenLabel = "View full screen",
+  exitFullScreenLabel = "Exit full screen",
+  changeRequestPlaceholder = "What would you like to change in the plan?",
+  changeRequestSubmitLabel = "Send change request",
+  stepCountLabel = defaultStepCountLabel,
+  className
+}) => {
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const isExpanded = isExpandedProp ?? uncontrolledExpanded;
+  const [isRequestingChanges, setIsRequestingChanges] = useState(false);
+  const [changeRequest, setChangeRequest] = useState("");
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const isPending = status === "pending";
+  const showActions = isPending && (onApprove || onRequestChanges);
+  const showClose = isPending && Boolean(onClose);
+  const canShowPlanBody = planBody != null;
+  const trimmedChangeRequest = changeRequest.trim();
+  const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;
+  const toggleExpanded = () => {
+    const next = !isExpanded;
+    if (isExpandedProp === void 0) {
+      setUncontrolledExpanded(next);
+    }
+    onExpandToggle?.(next);
+  };
+  const handleOpenRequestChanges = () => {
+    setIsRequestingChanges(true);
+    if (!isExpanded) {
+      toggleExpanded();
+    }
+  };
+  const handleCancelChangeRequest = () => {
+    setIsRequestingChanges(false);
+    setChangeRequest("");
+  };
+  const handleSubmitChangeRequest = (event) => {
+    event?.preventDefault();
+    if (!canSubmitChangeRequest) return;
+    onRequestChanges?.(trimmedChangeRequest);
+  };
+  const handleTextareaKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmitChangeRequest();
+    }
+  };
+  const showChangeRequestForm = isRequestingChanges && isPending;
+  const changeRequestForm = /* @__PURE__ */ jsx(
+    ChangeRequestForm,
+    {
+      value: changeRequest,
+      onValueChange: setChangeRequest,
+      onSubmit: handleSubmitChangeRequest,
+      onKeyDown: handleTextareaKeyDown,
+      placeholder: changeRequestPlaceholder,
+      submitLabel: changeRequestSubmitLabel,
+      formLabel: requestChangesLabel,
+      canSubmit: canSubmitChangeRequest,
+      isSubmitting
+    }
+  );
+  const planActions = /* @__PURE__ */ jsx(
+    PlanActions,
+    {
+      isRequestingChanges,
+      isSubmitting,
+      onApprove,
+      onRequestChanges,
+      onOpenRequestChanges: handleOpenRequestChanges,
+      onCancelChangeRequest: handleCancelChangeRequest,
+      approveLabel,
+      requestChangesLabel,
+      cancelLabel,
+      approveTooltip
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": title,
+        className: cn(
+          "tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-neutral-50",
+          className
+        ),
+        "data-testid": "plan-approval-root",
+        "data-plan-status": status,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-start tw:gap-2 tw:pl-4 tw:pr-2 tw:pt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pb-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  StatusPill,
+                  {
+                    status,
+                    pendingLabel: pendingPillLabel,
+                    approvedLabel: approvedPillLabel,
+                    dismissedLabel: dismissedPillLabel,
+                    changesRequestedLabel: changesRequestedPillLabel
+                  }
+                ),
+                stepCount != null && stepCount > 0 && /* @__PURE__ */ jsx("span", { className: "tw:text-xs tw:leading-4 tw:text-neutral-500", children: stepCountLabel(stepCount) })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6 tw:text-neutral-800", children: title })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+              canShowPlanBody && !isFullScreen && /* @__PURE__ */ jsx(Tooltip, { tooltip: fullScreenLabel, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon-sm",
+                  "aria-label": fullScreenLabel,
+                  onClick: () => setIsFullScreen(true),
+                  "data-testid": "plan-fullscreen-button",
+                  children: /* @__PURE__ */ jsx(Maximize2, { className: "tw:size-4" })
+                }
+              ) }),
+              showClose && !isFullScreen && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon-sm",
+                  "aria-label": closeLabel,
+                  onClick: onClose,
+                  disabled: isSubmitting,
+                  "data-testid": "plan-close-button",
+                  children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+                }
+              )
+            ] })
+          ] }),
+          summary != null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "tw:whitespace-pre-wrap tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:px-4 tw:pt-4 tw:text-sm tw:text-neutral-700",
+                isExpanded && canShowPlanBody ? "tw:pb-4" : "tw:pb-2"
+              ),
+              children: summary
+            }
+          ),
+          isExpanded && canShowPlanBody && /* @__PURE__ */ jsx("div", { className: "tw:max-h-[400px] tw:overflow-y-auto tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:p-4 tw:text-sm tw:text-neutral-700", children: planBody }),
+          !isFullScreen && /* @__PURE__ */ jsxs(Fragment, { children: [
+            showChangeRequestForm && changeRequestForm,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "tw:flex tw:items-center tw:gap-2 tw:overflow-x-auto tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white tw:px-4 tw:py-3",
+                  canShowPlanBody ? "tw:justify-between" : "tw:justify-end"
+                ),
+                children: [
+                  canShowPlanBody && /* @__PURE__ */ jsx("div", { className: "tw:shrink-0", children: /* @__PURE__ */ jsx(
+                    ExpandToggle,
+                    {
+                      isExpanded,
+                      onToggle: toggleExpanded,
+                      showMoreLabel,
+                      showLessLabel
+                    }
+                  ) }),
+                  showActions && planActions
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    canShowPlanBody && isFullScreen && /* @__PURE__ */ jsxs(FullScreenModal, { onEscapeKeyDown: () => setIsFullScreen(false), children: [
+      /* @__PURE__ */ jsx(
+        FullScreenModalHeader,
+        {
+          title: /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:min-w-0 tw:items-center tw:gap-3", children: [
+            /* @__PURE__ */ jsx(
+              StatusPill,
+              {
+                status,
+                pendingLabel: pendingPillLabel,
+                approvedLabel: approvedPillLabel,
+                dismissedLabel: dismissedPillLabel,
+                changesRequestedLabel: changesRequestedPillLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "tw:truncate", children: title })
+          ] }),
+          onClose: () => setIsFullScreen(false),
+          showPreviousTitle: false,
+          children: /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+            showClose && /* @__PURE__ */ jsx(Tooltip, { tooltip: closeLabel, placement: "bottom", triggerAsChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                "aria-label": closeLabel,
+                onClick: onClose,
+                disabled: isSubmitting,
+                "data-testid": "plan-close-button",
+                children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tooltip, { tooltip: exitFullScreenLabel, placement: "bottom", triggerAsChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                "aria-label": exitFullScreenLabel,
+                onClick: () => setIsFullScreen(false),
+                "data-testid": "plan-exit-fullscreen-button",
+                children: /* @__PURE__ */ jsx(Minimize2, { className: "tw:size-4" })
+              }
+            ) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(FullScreenModalBody, { className: "tw:bg-white tw:px-6 tw:py-4", children: /* @__PURE__ */ jsx("div", { className: "tw:mx-auto tw:w-full tw:max-w-[800px] tw:text-sm tw:text-neutral-700", children: planBody }) }),
+      (showChangeRequestForm || showActions) && /* @__PURE__ */ jsx("div", { className: "tw:shrink-0 tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100 tw:bg-white", children: /* @__PURE__ */ jsxs("div", { className: "tw:mx-auto tw:w-full tw:max-w-[800px]", children: [
+        showChangeRequestForm && changeRequestForm,
+        showActions && /* @__PURE__ */ jsx("div", { className: "tw:flex tw:justify-end tw:px-4 tw:py-3", children: planActions })
+      ] }) })
+    ] })
+  ] });
+};
+var PlanRewritingIndicator = ({
+  label = "Rewriting the plan..."
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: "tw:flex tw:items-center tw:gap-2",
+    role: "status",
+    "data-testid": "plan-rewriting-indicator",
+    children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-secondary-500" }),
+      /* @__PURE__ */ jsx("span", { className: "tw:text-sm tw:italic tw:text-secondary-500", children: label })
+    ]
+  }
+);
+var PromptInputAction = ({ ref, onMouseDown, ...rest }) => {
+  const handleOnMouseDown = (event) => {
+    event.stopPropagation();
+    onMouseDown?.(event);
+  };
+  return /* @__PURE__ */ jsx(Slot, { ...rest, ref, onMouseDown: handleOnMouseDown });
+};
+var PromptInputCommands = ({ items, open, onSelect, filterValue, children }) => {
+  const filtered = filterValue ? items.filter(
+    (item) => item.label.toLowerCase().includes(filterValue.toLowerCase()) || item.value.toLowerCase().includes(filterValue.toLowerCase())
+  ) : items;
+  const groups = filtered.reduce((acc, item) => {
+    const group = acc[item.group] ?? [];
+    group.push(item);
+    acc[item.group] = group;
+    return acc;
+  }, {});
+  return /* @__PURE__ */ jsxs(Command, { loop: true, className: "tw:relative", shouldFilter: false, children: [
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "tw:absolute tw:bottom-full tw:left-0 tw:right-0 tw:z-50 tw:mb-1",
+          "tw:rounded-md tw:border tw:border-border tw:bg-popover tw:text-popover-foreground tw:shadow-lg"
+        ),
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "tw:px-4 tw:py-3 tw:text-center tw:text-sm tw:text-muted-foreground", children: "No commands found" }) : /* @__PURE__ */ jsx(Command.List, { viewPortClassName: "tw:max-h-80", children: Object.entries(groups).map(([groupName, groupItems]) => /* @__PURE__ */ jsx(Command.Group, { heading: groupName, children: groupItems.map((item) => /* @__PURE__ */ jsx(
+          Command.Item,
+          {
+            value: item.value,
+            icon: item.icon,
+            onSelect: () => onSelect(item.value),
+            children: /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col", children: [
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              item.description && /* @__PURE__ */ jsx(
+                Truncated,
+                {
+                  text: item.description,
+                  twoLines: true,
+                  className: "tw:text-xs tw:text-muted-foreground"
+                }
+              )
+            ] })
+          },
+          item.value
+        )) }, groupName)) })
+      }
+    ),
+    children
+  ] });
+};
+var ARIA_LABEL_BY_STATUS = {
+  ready: "Send message",
+  streaming: "Stop",
+  interrupted: "Continue",
+  submitted: "Sending\u2026"
+};
+var PromptInputSubmit = ({ ref, disabled, status = "ready" }) => {
+  const icon = (() => {
+    if (status === "streaming") return /* @__PURE__ */ jsx(CirclePause, { className: "tw:size-4" });
+    if (status === "interrupted") return /* @__PURE__ */ jsx(Play, { className: "tw:size-4" });
+    return /* @__PURE__ */ jsx(Send, { className: "tw:size-4" });
+  })();
+  const getTooltipText = () => {
+    if (status === "streaming") return "Stop";
+    if (status === "interrupted") return "Continue";
+    return void 0;
+  };
+  return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(PromptInputAction, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        type: "submit",
+        disabled,
+        "aria-label": ARIA_LABEL_BY_STATUS[status],
+        size: "icon-sm",
+        variant: "invisible",
+        isLoading: status === "submitted",
+        className: "tw:ml-auto tw:flex tw:items-center tw:rounded-lg tw:[&_svg]:text-secondary-500 tw:not-disabled:hover:[&_svg]:text-secondary-600",
+        children: status !== "submitted" && icon
+      }
+    ) }) }),
+    getTooltipText() && /* @__PURE__ */ jsx(Tooltip.Content, { placement: "top", variant: "action", children: getTooltipText() })
+  ] });
+};
+var CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "Home", "End", "Enter"]);
+var isCmdkNavigation = (event) => event.key !== "Enter" || !(event.metaKey || event.ctrlKey || event.altKey);
+var promptInputVariants = cva(
+  [
+    "tailwindcss-preflight",
+    "tw:relative",
+    "tw:flex",
+    "tw:gap-2",
+    "tw:justify-center",
+    // transparent border
+    "tw:border",
+    "tw:border-2",
+    "tw:border-transparent",
+    "tw:rounded-[14px]",
+    // Gradient background
+    "tw:bg-gradient-to-bl",
+    "tw:from-[#61E4FF]",
+    "tw:via-[#1F8FFF]",
+    "tw:to-[#7C5CFF]",
+    // Inner surface fill, leaving the 2px gradient border showing
+    "tw:bg-origin-border",
+    "tw:shadow-[inset_0_100vw_rgb(var(--card))]",
+    // focus
+    "tw:has-[textarea:focus]:ring-4",
+    "tw:has-[textarea:focus]:ring-ring/30",
+    "tw:cursor-text",
+    "tw:px-2"
+  ],
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: ["tw:flex-col", "tw:pt-3", "tw:pb-2"],
+        inline: ["tw:flex-row", "tw:py-3", "tw:items-center"]
+      }
+    }
+  }
+);
+var wrapperVariants = cva(null, {
+  defaultVariants: {
+    variant: "default"
+  },
+  variants: {
+    variant: {
+      default: "tw:rounded-[14px]",
+      inline: ""
+    }
+  }
+});
+var PromptInput = ({
+  onSend,
+  onAbort,
+  onContinue,
+  prefix,
+  variant,
+  suffix,
+  disabled,
+  disableSubmit,
+  value = "",
+  onValueChange,
+  status = "ready",
+  maxRows = 6,
+  minRows,
+  commands,
+  ...textareaProps
+}) => {
+  const defaultMinRows = variant === "inline" ? 1 : 2;
+  const isDisabled = (disabled || disableSubmit || !value.trim()) && status !== "streaming" && status !== "interrupted";
+  const textareaId = useId();
+  const textareaRef = useRef(null);
+  const [dismissedValue, setDismissedValue] = useState(null);
+  if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);
+  const hasCommands = !!commands && commands.length > 0;
+  const valueLooksLikeSlashCommand = value.startsWith("/") && !/\s/.test(value);
+  const commandsOpen = hasCommands && valueLooksLikeSlashCommand && value !== dismissedValue;
+  const slashFilter = commandsOpen ? value.slice(1) : "";
+  const handleSubmit = () => {
+    if (isDisabled) return;
+    if (status === "streaming") onAbort?.();
+    if (status === "interrupted") onContinue?.();
+    if (status === "ready") onSend?.(value);
+  };
+  const handleOnSubmit = (event) => {
+    event.preventDefault();
+    handleSubmit();
+  };
+  const handleOnChange = (event) => {
+    onValueChange?.(event.target.value);
+  };
+  const handleCommandSelect = (commandValue) => {
+    onValueChange?.(commandValue + " ");
+    textareaRef.current?.focus();
+  };
+  const handleOnKeyDown = (event) => {
+    if (commandsOpen) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setDismissedValue(value);
+        return;
+      }
+      if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter") {
+        return;
+      }
+    } else if (hasCommands && CMDK_HIJACKED_KEYS.has(event.key) && isCmdkNavigation(event)) {
+      event.stopPropagation();
+    }
+    if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault();
+      if (status !== "streaming") handleSubmit();
+    }
+  };
+  const handleOnMouseDown = (event) => {
+    if (event.target === textareaRef.current) return;
+    event.preventDefault();
+    textareaRef.current?.focus();
+  };
+  const formEl = /* @__PURE__ */ jsx("div", { className: wrapperVariants({ variant }), children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "data-testid": "prompt-input",
+      "data-status": status,
+      onMouseDown: handleOnMouseDown,
+      onSubmit: handleOnSubmit,
+      className: cn(
+        promptInputVariants({ variant }),
+        disabled && "tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default"
+      ),
+      children: [
+        prefix && /* @__PURE__ */ jsx("div", { className: "tw:flex tw:items-center", children: prefix }),
+        /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "tw:sr-only", children: "Prompt Input" }),
+        /* @__PURE__ */ jsx(
+          TextareaAutosize,
+          {
+            ...textareaProps,
+            disabled,
+            minRows: minRows ?? defaultMinRows,
+            maxRows,
+            id: textareaId,
+            ref: textareaRef,
+            value,
+            onChange: handleOnChange,
+            onKeyDown: handleOnKeyDown,
+            className: cn(
+              "tw:resize-none",
+              "tw:outline-hidden",
+              "tw:w-full",
+              "tw:px-2",
+              "tw:bg-transparent",
+              // font
+              disabled ? "tw:text-muted-foreground" : "tw:text-foreground",
+              "tw:text-sm",
+              "tw:font-sans",
+              "tw:transition-[width]",
+              "tw:delay-75",
+              "tw:ease-linear",
+              "tw:overflow-auto"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "tw:flex tw:items-center tw:gap-4",
+              variant === "inline" ? "tw:items-end" : "tw:items-center"
+            ),
+            children: [
+              suffix,
+              /* @__PURE__ */ jsx(PromptInputSubmit, { disabled: isDisabled, status })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: hasCommands ? /* @__PURE__ */ jsx(
+    PromptInputCommands,
+    {
+      items: commands ?? [],
+      open: commandsOpen,
+      onSelect: handleCommandSelect,
+      filterValue: slashFilter,
+      children: formEl
+    }
+  ) : formEl });
+};
+PromptInput.Action = PromptInputAction;
+var handleKeyDown = (callback) => (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    callback();
+  }
+};
+var Question = ({
+  question,
+  header,
+  options,
+  multiSelect = true,
+  selectedOptionIds = [],
+  onSelectionChange,
+  customAnswer = "",
+  onCustomAnswerChange,
+  onCustomAnswerConfirm,
+  showCustomAnswer = true,
+  customAnswerPlaceholder = "Type your answer\u2026",
+  showSkip = true,
+  onSkip,
+  onClose,
+  onNext,
+  submitTooltip,
+  onPrevious,
+  currentStep,
+  totalSteps,
+  renderPreview,
+  className
+}) => {
+  const [isCustomExpanded, setIsCustomExpanded] = useState(false);
+  const isCustomSelected = isCustomExpanded || customAnswer.length > 0;
+  const hasSteps = currentStep != null && totalSteps != null;
+  const progressValue = hasSteps ? currentStep / totalSteps * 100 : 0;
+  const isFirstStep = currentStep === 1;
+  const isLastStep = hasSteps && currentStep === totalSteps;
+  const handleOptionToggle = (optionId) => {
+    if (multiSelect) {
+      const isSelected = selectedOptionIds.includes(optionId);
+      const nextIds = isSelected ? selectedOptionIds.filter((id) => id !== optionId) : [...selectedOptionIds, optionId];
+      onSelectionChange?.(nextIds);
+    } else {
+      setIsCustomExpanded(false);
+      onCustomAnswerChange?.("");
+      onSelectionChange?.([optionId]);
+    }
+  };
+  const handleCustomToggle = (checked) => {
+    setIsCustomExpanded(checked);
+    if (checked) {
+      if (!multiSelect) {
+        onSelectionChange?.([]);
+      }
+    } else {
+      onCustomAnswerChange?.("");
+    }
+  };
+  const handleCustomFocus = () => {
+    setIsCustomExpanded(true);
+    if (!multiSelect) {
+      onSelectionChange?.([]);
+    }
+  };
+  const handleCustomRowClick = () => {
+    if (multiSelect) {
+      handleCustomToggle(!isCustomSelected);
+    } else {
+      handleCustomFocus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "tw:flex tw:max-w-[800px] tw:flex-col tw:gap-4 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-neutral-50 tw:shadow-lg",
+        className
+      ),
+      "data-testid": "question-root",
+      "data-question-step": currentStep,
+      "data-question-total-steps": totalSteps,
+      "data-question-multi-select": multiSelect,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-start tw:gap-2 tw:pl-4 tw:pr-2 tw:pt-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-base tw:font-semibold tw:leading-6 tw:text-neutral-800", children: question }),
+            header && /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-xs tw:leading-4 tw:text-neutral-500", children: header })
+          ] }),
+          onClose && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon-sm",
+              "aria-label": "Close",
+              onClick: onClose,
+              "data-testid": "question-close-button",
+              children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "tw:px-4", children: /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-4 tw:border-0 tw:border-l tw:border-solid tw:border-primary tw:px-4 tw:py-2", children: [
+          options.map((option) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-neutral-100",
+              onClick: () => handleOptionToggle(option.id),
+              onKeyDown: handleKeyDown(() => handleOptionToggle(option.id)),
+              role: "button",
+              tabIndex: 0,
+              "data-testid": `question-option-${option.id}`,
+              children: [
+                multiSelect && /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selectedOptionIds.includes(option.id),
+                    onCheckedChange: () => handleOptionToggle(option.id),
+                    onClick: (e) => e.stopPropagation(),
+                    className: "tw:shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-start tw:gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "tw:text-sm tw:font-medium tw:leading-none tw:text-neutral-800", children: option.label }),
+                    option.description && /* @__PURE__ */ jsx("span", { className: "tw:text-sm tw:font-normal tw:leading-5 tw:text-muted-foreground", children: option.description })
+                  ] }),
+                  option.preview && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "tw:ml-auto tw:flex tw:max-h-40 tw:min-w-0 tw:max-w-[50%] tw:flex-col tw:overflow-hidden tw:rounded-md",
+                        !renderPreview && "tw:overflow-auto tw:border tw:border-solid tw:border-neutral-200 tw:bg-white tw:p-2"
+                      ),
+                      children: renderPreview ? renderPreview(option.preview) : /* @__PURE__ */ jsx("pre", { className: "tw:m-0 tw:overflow-visible tw:border-0 tw:bg-transparent tw:p-0 tw:font-mono tw:text-xs tw:leading-5 tw:text-neutral-700", children: option.preview })
+                    }
+                  )
+                ] })
+              ]
+            },
+            option.id
+          )),
+          showCustomAnswer && /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-neutral-100",
+                onClick: handleCustomRowClick,
+                onKeyDown: handleKeyDown(handleCustomRowClick),
+                role: "button",
+                tabIndex: 0,
+                children: [
+                  multiSelect && /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: isCustomSelected,
+                      onCheckedChange: handleCustomToggle,
+                      onClick: (e) => e.stopPropagation(),
+                      className: "tw:shrink-0"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "tw:text-sm tw:font-medium tw:leading-none",
+                        !multiSelect && isCustomSelected ? "tw:text-primary" : "tw:text-neutral-800"
+                      ),
+                      children: "Other"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: customAnswer,
+                onValueChange: (value) => onCustomAnswerChange?.(value),
+                onFocus: handleCustomFocus,
+                onKeyDown: onCustomAnswerConfirm ? (e) => {
+                  if (e.key === "Enter" && !e.shiftKey && !(e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    onCustomAnswerConfirm();
+                  }
+                } : void 0,
+                placeholder: customAnswerPlaceholder,
+                sizing: "small",
+                testId: "question-custom"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col", children: [
+          hasSteps && /* @__PURE__ */ jsx(Progress, { size: "sm", value: progressValue, className: "tw:rounded-none" }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "tw:flex tw:items-center tw:justify-end tw:gap-4 tw:px-4 tw:py-3",
+                !hasSteps && "tw:border-0 tw:border-t tw:border-solid tw:border-neutral-100"
+              ),
+              children: [
+                hasSteps && /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: isFirstStep,
+                      className: "tw:flex tw:cursor-pointer tw:items-center tw:justify-center tw:bg-transparent tw:p-0 tw:disabled:cursor-default tailwindcss-preflight",
+                      onClick: onPrevious,
+                      "aria-label": "Previous step",
+                      children: /* @__PURE__ */ jsx(
+                        ChevronLeft,
+                        {
+                          className: cn(
+                            "tw:size-5",
+                            isFirstStep ? "tw:text-primary/25" : "tw:text-primary"
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "tw:text-xs tw:leading-4 tw:text-neutral-500", children: [
+                    currentStep,
+                    " of ",
+                    totalSteps
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: currentStep === totalSteps,
+                      className: "tw:flex tw:cursor-pointer tw:items-center tw:justify-center tw:bg-transparent tw:p-0 tw:disabled:cursor-default tailwindcss-preflight",
+                      onClick: onNext,
+                      "aria-label": "Next step",
+                      children: /* @__PURE__ */ jsx(
+                        ChevronRight,
+                        {
+                          className: cn(
+                            "tw:size-5",
+                            currentStep === totalSteps ? "tw:text-primary/25" : "tw:text-primary"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                showSkip && onSkip && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "small",
+                    onClick: onSkip,
+                    "data-testid": "question-skip-button",
+                    children: "Skip"
+                  }
+                ),
+                (multiSelect || isCustomSelected) && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: submitTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "small",
+                    onClick: onNext,
+                    "data-testid": "question-next-button",
+                    children: isLastStep ? "Submit" : "Next"
+                  }
+                ) }) : /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "small",
+                    onClick: onNext,
+                    "data-testid": "question-next-button",
+                    children: isLastStep ? "Submit" : "Next"
+                  }
+                ))
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var QuestionBlock = ({
+  steps,
+  showSkip = true,
+  onSubmit,
+  onClose,
+  renderPreview,
+  className
+}) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [selections, setSelections] = useState({});
+  const [customAnswers, setCustomAnswers] = useState({});
+  const stepData = steps[currentStep - 1];
+  const isLastStep = currentStep === steps.length;
+  const advance = (updatedSelections) => {
+    const finalSelections = updatedSelections ?? selections;
+    if (isLastStep) {
+      onSubmit?.({ selections: finalSelections, customAnswers });
+    } else {
+      setCurrentStep((s) => Math.min(s + 1, steps.length));
+    }
+  };
+  const handleSelectionChange = (ids) => {
+    const updated = { ...selections, [currentStep]: ids };
+    setSelections(updated);
+    if (!stepData.multiSelect) {
+      advance(updated);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Question,
+    {
+      ...stepData,
+      selectedOptionIds: selections[currentStep] ?? [],
+      onSelectionChange: handleSelectionChange,
+      customAnswer: customAnswers[currentStep] ?? "",
+      onCustomAnswerChange: (value) => setCustomAnswers((prev) => ({ ...prev, [currentStep]: value })),
+      currentStep,
+      totalSteps: steps.length,
+      showSkip: showSkip && !isLastStep,
+      onNext: () => advance(),
+      onPrevious: () => setCurrentStep((s) => Math.max(s - 1, 1)),
+      onSkip: () => setCurrentStep((s) => Math.min(s + 1, steps.length)),
+      onClose,
+      renderPreview,
+      className
+    },
+    currentStep
+  );
+};
+var SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2 tw:whitespace-nowrap tw:rounded-lg tw:p-2 tw:text-left tw:text-sm tw:font-medium tw:text-foreground tw:transition-colors tw:not-disabled:hover:bg-muted tw:disabled:cursor-not-allowed tw:disabled:opacity-50",
+        className
+      ),
+      onClick,
+      children: [
+        icon ?? // Lucide icons are stroke-based — paint the visible line with the AI
+        // gradient (no fill, so the glyph keeps its outline silhouette instead
+        // of becoming a solid block). The `*` selector catches every shape
+        // element (path, circle, polyline, …) so multi-part icons don't lose
+        // sub-shapes the way `path`-only selectors do.
+        /* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:basis-4 tw:[&_*]:stroke-aigradient-600" }),
+        /* @__PURE__ */ jsx("div", { className: "tw:whitespace-normal tw:text-left", children: label })
+      ]
+    }
+  );
+};
+var ThinkingIndicator = ({ label = "Thinking..." }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:gap-2", "data-testid": "chat-thinking-indicator", children: [
+    /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin tw:text-secondary-500" }),
+    /* @__PURE__ */ jsx("span", { className: "tw:text-sm tw:italic tw:text-secondary-500", children: label })
+  ] });
+};
+var STATUS_BADGE = {
+  pending: { label: "Needs approval", color: "blue" },
+  approved: { label: "Approved", color: "green" },
+  rejected: { label: "Rejected", color: "red" },
+  expired: { label: "Expired", color: "gray" }
+};
+var ToolCallApproval = ({
+  toolName,
+  title,
+  status,
+  onApprove,
+  onReject,
+  children,
+  actions,
+  isSubmitting = false,
+  enableShortcuts = false,
+  approveLabel = "Approve",
+  rejectLabel = "Reject",
+  className
+}) => {
+  const isPending = status === "pending";
+  const hasCustomActions = actions != null;
+  const showDefaultActions = isPending && !hasCustomActions && Boolean(onApprove || onReject);
+  const showActions = isPending && (showDefaultActions || hasCustomActions);
+  const badge = STATUS_BADGE[status];
+  useEffect(() => {
+    if (!enableShortcuts || !isPending || isSubmitting) return;
+    const isEditableTarget = (target) => {
+      if (!(target instanceof HTMLElement)) return false;
+      return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+    };
+    const handleKeyDown2 = (event) => {
+      if (event.repeat || event.defaultPrevented || isEditableTarget(event.target)) return;
+      if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && onApprove) {
+        event.preventDefault();
+        onApprove();
+      } else if (event.key === "Escape" && onReject) {
+        event.preventDefault();
+        onReject();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown2);
+    return () => window.removeEventListener("keydown", handleKeyDown2);
+  }, [enableShortcuts, isPending, isSubmitting, onApprove, onReject]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-testid": "tool-call-approval",
+      "data-status": status,
+      "aria-label": typeof title === "string" ? title : toolName,
+      className: cn(
+        "tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:gap-3 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-muted tw:p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+          /* @__PURE__ */ jsx(Badge, { color: badge.color, variant: "pill", className: "tw:normal-case tw:tracking-normal", children: badge.label }),
+          /* @__PURE__ */ jsx("code", { className: "tw:rounded tw:bg-background tw:px-1.5 tw:py-0.5 tw:font-mono tw:text-xs tw:text-foreground", children: toolName })
+        ] }),
+        title != null && /* @__PURE__ */ jsx("p", { className: "tw:m-0 tw:text-sm tw:font-medium tw:text-foreground", children: title }),
+        children,
+        showActions && /* @__PURE__ */ jsx("div", { className: "tw:flex tw:items-center tw:justify-end tw:gap-2 tw:overflow-x-auto", children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          onReject && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "small",
+              onClick: onReject,
+              disabled: isSubmitting,
+              className: "tw:shrink-0 tw:whitespace-nowrap",
+              children: rejectLabel
+            }
+          ),
+          onApprove && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              size: "small",
+              onClick: onApprove,
+              disabled: isSubmitting,
+              className: "tw:shrink-0 tw:whitespace-nowrap",
+              children: approveLabel
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+var chipClasses = cva(
+  [
+    "tw:inline-flex tw:items-center tw:gap-1.5 tw:rounded-md tw:border tw:border-solid",
+    "tw:border-border tw:bg-muted tw:px-2 tw:py-1 tw:text-xs tw:text-foreground"
+  ],
+  {
+    variants: {
+      interactive: {
+        true: "tw:cursor-pointer tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:not-disabled:hover:bg-accent",
+        false: ""
+      }
+    },
+    defaultVariants: { interactive: false }
+  }
+);
+var StateIcon = ({ state }) => {
+  if (state === "processing") {
+    return /* @__PURE__ */ jsx(Loader2, { className: "tw:size-3.5 tw:shrink-0 tw:animate-spin tw:text-muted-foreground" });
+  }
+  if (state === "error") {
+    return /* @__PURE__ */ jsx(CircleX, { className: "tw:size-3.5 tw:shrink-0 tw:text-error-500" });
+  }
+  return /* @__PURE__ */ jsx(CircleCheck, { className: "tw:size-3.5 tw:shrink-0 tw:text-primary" });
+};
+var ToolCallChip = ({
+  label,
+  state,
+  icon,
+  trailing,
+  onClick,
+  className
+}) => {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ?? /* @__PURE__ */ jsx(StateIcon, { state }),
+    /* @__PURE__ */ jsx("span", { className: "tw:min-w-0 tw:truncate", children: label }),
+    trailing != null && /* @__PURE__ */ jsx("span", { className: "tw:ml-auto tw:inline-flex tw:shrink-0 tw:items-center", children: trailing })
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-testid": "tool-call-chip",
+        "data-state": state,
+        onClick,
+        className: cn("tailwindcss-preflight", chipClasses({ interactive: true }), className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": "tool-call-chip",
+      "data-state": state,
+      className: cn(chipClasses({ interactive: false }), className),
+      children: content
+    }
+  );
+};
+
+// src/blocks/AIKit/usageStatsHelpers.ts
+var clampPercentage = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
+var UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
+  const radius = Math.max(0, (size - strokeWidth) / 2 - 1);
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference * (1 - clampPercentage(value) / 100);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: cn("tw:-rotate-90", className),
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            strokeWidth,
+            className: "tw:stroke-neutral-400 tw:opacity-50"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeDasharray: circumference,
+            strokeDashoffset: offset,
+            className: "tw:stroke-primary tw:transition-all"
+          }
+        )
+      ]
+    }
+  );
+};
+var UsageStats = ({
+  value,
+  alert = false,
+  children,
+  className,
+  ariaLabel,
+  align = "end",
+  side = "top",
+  sideOffset = 8
+}) => {
+  const defaultLabel = `Usage: ${Math.round(clampPercentage(value))}%${alert ? " (usage alert)" : ""}`;
+  return /* @__PURE__ */ jsxs(HoverCard, { children: [
+    /* @__PURE__ */ jsx(HoverCard.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "aria-label": ariaLabel ?? defaultLabel,
+        className: cn(
+          "tw:relative tw:inline-flex tw:size-8 tw:items-center tw:justify-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(UsageStatsRing, { value }),
+          alert && /* @__PURE__ */ jsx(
+            AlertCircle,
+            {
+              "data-testid": "usage-stats-alert",
+              className: "tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3 tw:text-error-500"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(HoverCard.Content, { align, side, sideOffset, children })
+  ] });
+};
+
+export { AnswerSummary, CollapsibleStepHeader, InlineStepDetail, InlineStepLabel, Markdown, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, UsageStats, UsageStatsRing };
+//# sourceMappingURL=chunk-KQW7QNTU.js.map
+//# sourceMappingURL=chunk-KQW7QNTU.js.map