@horon-ai/react 0.0.0-stage → 0.1.1

package/src/components/task-row.tsx

@@ -0,0 +1,159 @@
+import { Archive, ArrowClockwise, CheckCircle, Folder, Stop, WarningCircle } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Spinner } from "./spinner";
+
+export type TaskStatus = "running" | "review" | "failed" | "done";
+
+export type TaskRowProps = {
+  status: TaskStatus;
+  title: ReactNode;
+  /** Elapsed time, such as "1m 56s". */
+  elapsed?: ReactNode;
+  /** Bot initial and name. */
+  bot: { initial: string; name: ReactNode; tileClassName?: string };
+  project?: ReactNode;
+  /** Status line: the current step, the result or the error. */
+  message: ReactNode;
+  /** Caption after the message, such as "2 drafts · 1 calendar change". */
+  detail?: ReactNode;
+  onCancel?: () => void;
+  onRetry?: () => void;
+  onReview?: () => void;
+  onArchive?: () => void;
+  /** `card` is a standalone subtle row; `list` is transparent with a 1px divider, for stacking inside a list. */
+  variant?: "card" | "list";
+  className?: string;
+};
+
+const botTile: Record<TaskStatus, string> = {
+  running: "bg-interactive-primary text-interactive-on-primary",
+  done: "bg-interactive-primary text-interactive-on-primary",
+  review: "bg-sky-500 text-sky-50",
+  failed: "bg-sky-700 text-sky-50",
+};
+
+const pill =
+  "motion-press flex h-7.5 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-full px-3 text-label-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand";
+
+/** Figma `Task row` (Agent tasks 112:939): a flat subtle row, 16px radius, with Running / Review / Failed / Done. */
+export function TaskRow({
+  status,
+  title,
+  elapsed,
+  bot,
+  project,
+  message,
+  detail,
+  onCancel,
+  onRetry,
+  onReview,
+  onArchive,
+  variant = "card",
+  className,
+}: TaskRowProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 px-4 py-3.5",
+        variant === "list"
+          ? "relative after:absolute after:inset-x-4 after:bottom-0 after:h-px after:bg-overlay-ink-8 last:after:hidden"
+          : "rounded-2xl border border-border-default bg-bg-surface",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <p className="min-w-0 flex-1 truncate text-label-lg text-text-primary">{title}</p>
+        {elapsed && <span className="shrink-0 text-caption text-text-secondary">{elapsed}</span>}
+      </div>
+      <div className="flex items-center gap-1.5 text-caption text-text-secondary">
+        <span
+          className={cn(
+            "flex size-4.5 shrink-0 items-center justify-center rounded-[5px] text-label-sm",
+            bot.tileClassName ? cn("text-text-inverse", bot.tileClassName) : botTile[status],
+          )}
+        >
+          <span className="text-trim">{bot.initial}</span>
+        </span>
+        <span className="whitespace-nowrap">{bot.name}</span>
+        {project && (
+          <>
+            <span aria-hidden>·</span>
+            <Folder aria-hidden className="size-3.5 shrink-0" />
+            <span className="truncate">{project}</span>
+          </>
+        )}
+      </div>
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1.5 pt-0.5">
+        <span className="flex size-4 shrink-0 items-center justify-center">
+          {status === "running" && <Spinner key="running" size={15} className="animate-pop-in" />}
+          {status === "review" && (
+            <CheckCircle key="review" aria-hidden className="size-4 animate-pop-in text-text-primary" />
+          )}
+          {status === "done" && (
+            <CheckCircle key="done" aria-hidden className="size-4 animate-pop-in text-text-secondary" />
+          )}
+          {status === "failed" && (
+            <WarningCircle key="failed" aria-hidden className="size-4 animate-pop-in text-text-danger" />
+          )}
+        </span>
+        <span
+          key={status}
+          className={cn(
+            "min-w-0 animate-fade-in truncate text-label-md motion-colors",
+            status === "failed" ? "text-text-danger" : status === "done" ? "text-text-secondary" : "text-text-primary",
+          )}
+        >
+          {message}
+        </span>
+        {detail && (
+          <>
+            <span aria-hidden>·</span>
+            <span className="min-w-0 truncate text-caption text-text-secondary">{detail}</span>
+          </>
+        )}
+        <span className="min-w-0 flex-1" />
+        {status === "running" && (
+          <button
+            type="button"
+            onClick={onCancel}
+            className={cn(pill, "animate-pop-in bg-overlay-ink-6 text-text-primary")}
+          >
+            <Stop aria-hidden className="size-3.5" />
+            Cancel
+          </button>
+        )}
+        {status === "failed" && (
+          <button
+            type="button"
+            onClick={onRetry}
+            className={cn(pill, "animate-pop-in bg-overlay-ink-6 text-text-primary")}
+          >
+            <ArrowClockwise aria-hidden className="size-3.5" />
+            Retry
+          </button>
+        )}
+        {status === "review" && (
+          <button
+            type="button"
+            onClick={onReview}
+            className={cn(pill, "animate-pop-in bg-interactive-primary text-text-inverse")}
+          >
+            Review
+          </button>
+        )}
+        {(status === "review" || status === "done") && (
+          <button
+            type="button"
+            aria-label="Archive"
+            onClick={onArchive}
+            className="flex size-7.5 shrink-0 motion-press animate-pop-in cursor-pointer items-center justify-center rounded-full text-text-secondary hover:bg-overlay-ink-6 focus-visible:outline-2 focus-visible:outline-text-brand"
+          >
+            <Archive aria-hidden className="size-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/textarea-field.tsx

@@ -0,0 +1,127 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { useState, type ComponentProps, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { fieldBoxClass, fieldTextClass, type InputSurface } from "./input";
+
+export type TextareaFieldSize = ControlSize;
+
+export type TextareaFieldProps = Omit<ComponentProps<"textarea">, "className"> & {
+  label: ReactNode;
+  /** Right side of the label row, such as "Optional". */
+  hint?: ReactNode;
+  description?: ReactNode;
+  /** Error message; replaces the description and turns the border and footer red. */
+  error?: ReactNode;
+  /** Shows a "count / max" counter when set. */
+  maxLength?: number;
+  size?: TextareaFieldSize;
+  /** Solid (default) or glass, as on `Input`. */
+  surface?: InputSurface;
+  className?: string;
+};
+
+const rootClass: Record<TextareaFieldSize, string> = {
+  sm: "gap-1.5",
+  md: "gap-2",
+  lg: "gap-2.5",
+};
+
+const labelClass: Record<TextareaFieldSize, string> = {
+  sm: "text-label-sm",
+  md: "text-label-md",
+  lg: "text-label-lg",
+};
+
+const metaClass: Record<TextareaFieldSize, string> = {
+  sm: "text-caption",
+  md: "text-caption",
+  lg: "text-body-sm",
+};
+
+/** The same box heights and padding as `Textarea` (88/112/136px, 12/14/20px), so one size reads the same in both. */
+const boxClass: Record<TextareaFieldSize, string> = {
+  sm: "h-22 px-3 py-2",
+  md: "h-28 px-3.5 py-3",
+  lg: "h-34 px-5 py-3.5",
+};
+
+/** Figma `Textarea field` (60:466): label row, glass or solid box, footer with help text and counter. */
+export function TextareaField({
+  label,
+  hint,
+  description,
+  error,
+  maxLength,
+  size = "md",
+  surface = "solid",
+  disabled,
+  className,
+  defaultValue,
+  value,
+  onChange,
+  ...props
+}: TextareaFieldProps) {
+  const [count, setCount] = useState(() => String(value ?? defaultValue ?? "").length);
+  // A controlled value can change without an input event (form reset, a parent rewriting it),
+  // so the counter follows the value whenever the caller owns it.
+  const length = value !== undefined ? String(value).length : count;
+  const invalid = !!error;
+  return (
+    <BaseField.Root
+      disabled={disabled}
+      invalid={invalid}
+      className={cn("flex w-full max-w-90 flex-col items-start data-disabled:opacity-60", rootClass[size], className)}
+    >
+      <div className="flex w-full items-center">
+        <BaseField.Label className={cn("min-w-0 flex-1 text-text-primary", labelClass[size])}>{label}</BaseField.Label>
+        {hint && <span className={cn("shrink-0 text-text-secondary", metaClass[size])}>{hint}</span>}
+      </div>
+      <div
+        className={cn(
+          "relative flex w-full overflow-clip rounded-md border motion-colors",
+          boxClass[size],
+          fieldBoxClass[surface],
+        )}
+      >
+        <BaseField.Control
+          render={
+            <textarea
+              defaultValue={defaultValue}
+              value={value}
+              onChange={(event) => {
+                setCount(event.target.value.length);
+                onChange?.(event);
+              }}
+              {...props}
+            />
+          }
+          className={cn("relative h-full resize-none", fieldTextClass[size], fieldBoxClass.text)}
+        />
+      </div>
+      {(description || error || maxLength) && (
+        <div
+          className={cn(
+            "flex w-full items-center gap-2 motion-colors",
+            metaClass[size],
+            invalid ? "text-text-danger" : "text-text-secondary",
+          )}
+        >
+          {invalid ? (
+            <BaseField.Error match className="min-w-0 flex-1 animate-[tab-panel-in_160ms_var(--ease-out-quint)]">
+              {error}
+            </BaseField.Error>
+          ) : (
+            <BaseField.Description className="min-w-0 flex-1">{description}</BaseField.Description>
+          )}
+          {maxLength !== undefined && (
+            <span className="shrink-0 whitespace-nowrap">
+              {length} / {maxLength}
+            </span>
+          )}
+        </div>
+      )}
+    </BaseField.Root>
+  );
+}

package/src/components/textarea.tsx

@@ -0,0 +1,47 @@
+import { Field } from "@base-ui/react/field";
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { fieldBoxClass, fieldTextClass, type InputSurface } from "./input";
+
+export type TextareaSize = ControlSize;
+
+export type TextareaProps = Omit<ComponentProps<"textarea">, "className"> & {
+  size?: TextareaSize;
+  invalid?: boolean;
+  /** Solid (default) or glass, as on `Input`. */
+  surface?: InputSurface;
+  className?: string;
+  textareaClassName?: string;
+};
+
+const sizeClass: Record<TextareaSize, string> = {
+  sm: "min-h-22 px-3 py-2",
+  md: "min-h-28 px-3.5 py-3",
+  lg: "min-h-34 px-5 py-3.5",
+};
+
+/** Figma `Textarea` (58:137): an 88/112/136px glass or solid box with 12/14/20px padding, the same field rungs as `Input`. */
+export function Textarea({
+  size = "md",
+  invalid,
+  surface = "solid",
+  className,
+  textareaClassName,
+  rows = 3,
+  ...props
+}: TextareaProps) {
+  return (
+    <div
+      className={cn(fieldBoxClass.base, "items-stretch", sizeClass[size], fieldBoxClass[surface], className)}
+      data-invalid={invalid ? "" : undefined}
+    >
+      <Field.Control
+        render={<textarea rows={rows} {...props} />}
+        aria-invalid={invalid || undefined}
+        className={cn("relative resize-none", fieldTextClass[size], fieldBoxClass.text, textareaClassName)}
+      />
+    </div>
+  );
+}

package/src/components/toast.tsx

@@ -0,0 +1,128 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { CheckCircle, Info, WarningCircle, X } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type ToastTone = "neutral" | "success" | "danger";
+export type ToastSize = ControlSize;
+
+const toneIcon: Record<ToastTone, ReactNode> = {
+  neutral: <Info className="text-text-secondary" />,
+  success: <CheckCircle className="text-text-brand" />,
+  danger: <WarningCircle className="text-text-danger" />,
+};
+
+const sizeClass: Record<ToastSize, string> = {
+  sm: "w-full max-w-80 gap-2 px-3 py-2.5",
+  md: "w-full max-w-90 gap-3 px-4 py-3.5",
+  lg: "w-full max-w-100 gap-3.5 px-5 py-4",
+};
+
+const iconSizeClass: Record<ToastSize, string> = {
+  sm: "[&_svg]:size-4",
+  md: "[&_svg]:size-5",
+  lg: "[&_svg]:size-6",
+};
+
+const titleSizeClass: Record<ToastSize, string> = {
+  sm: "text-label-md",
+  md: "text-label-lg",
+  lg: "text-label-lg",
+};
+
+const descriptionSizeClass: Record<ToastSize, string> = {
+  sm: "text-body-sm",
+  md: "text-body-sm",
+  lg: "text-body-md",
+};
+
+const contentGapClass: Record<ToastSize, string> = {
+  sm: "gap-0.5",
+  md: "gap-0.5",
+  lg: "gap-1",
+};
+
+const closeSizeClass: Record<ToastSize, string> = {
+  sm: "[&_svg]:size-3.5",
+  md: "[&_svg]:size-4",
+  lg: "[&_svg]:size-5",
+};
+
+function isTone(value: string | undefined): value is ToastTone {
+  return value === "neutral" || value === "success" || value === "danger";
+}
+
+function ToastList({ size, surface }: { size: ToastSize; surface: "solid" | "glass" }) {
+  const { toasts } = BaseToast.useToastManager();
+  return toasts.map((toast) => {
+    const tone = isTone(toast.type) ? toast.type : "neutral";
+    return (
+      <BaseToast.Root
+        key={toast.id}
+        toast={toast}
+        className={cn(
+          "relative mt-3 flex h-[var(--toast-height)] items-start overflow-clip rounded-lg data-ending-style:mt-0 data-ending-style:h-0",
+          surface === "glass" ? "veil-overlay" : "border border-border-default bg-bg-surface shadow-popover",
+          sizeClass[size],
+          "transition-[height,margin-top,opacity,translate,scale] duration-240 ease-out-quint data-ending-style:translate-x-6 data-ending-style:opacity-0 data-ending-style:duration-180 data-ending-style:ease-in data-starting-style:translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0",
+        )}
+      >
+        <span className={cn("relative flex shrink-0", iconSizeClass[size])}>{toneIcon[tone]}</span>
+        <BaseToast.Content className={cn("relative flex min-w-0 flex-1 flex-col", contentGapClass[size])}>
+          <BaseToast.Title className={cn("text-text-primary", titleSizeClass[size])} />
+          <BaseToast.Description className={cn("text-text-secondary", descriptionSizeClass[size])} />
+        </BaseToast.Content>
+        <BaseToast.Close
+          aria-label="Close"
+          className={cn(
+            "relative flex shrink-0 motion-press cursor-pointer text-text-secondary motion-colors hover:text-text-primary",
+            "after:absolute after:-inset-2 after:content-['']",
+            closeSizeClass[size],
+          )}
+        >
+          <X />
+        </BaseToast.Close>
+      </BaseToast.Root>
+    );
+  });
+}
+
+export type ToasterProps = {
+  children?: ReactNode;
+  /** Toast size: `sm` 320px, `md` 360px (default), `lg` 400px; applies to every toast this provider shows. */
+  size?: ToastSize;
+  /**
+   * `solid` (default) is an opaque surface card with a default border; `glass` puts it on the veil (`veil-overlay`).
+   * Applies to every toast this provider shows.
+   */
+  surface?: "solid" | "glass";
+  className?: string;
+};
+
+/**
+ * Figma `Toast` (62:307): a 360px card, solid or the veil. Wrap the app once; call
+ * `useToast().add({ title, description, type: "success" })` to show one.
+ */
+export function Toaster({ children, size = "md", surface = "solid", className }: ToasterProps) {
+  return (
+    <BaseToast.Provider>
+      {children}
+      <BaseToast.Portal>
+        <BaseToast.Viewport
+          className={cn(
+            // `inset-x-6` gives the stack the same 24px gutter on the left as on the
+            // right, so `w-full` toasts stop at the screen edge instead of running off it.
+            "fixed inset-x-6 bottom-6 z-50 flex flex-col items-end gap-0",
+            className,
+          )}
+        >
+          <ToastList size={size} surface={surface} />
+        </BaseToast.Viewport>
+      </BaseToast.Portal>
+    </BaseToast.Provider>
+  );
+}
+
+export const useToast = BaseToast.useToastManager;

package/src/components/tool-call.tsx

@@ -0,0 +1,215 @@
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ArrowClockwise, CaretDown, Check, CheckCircle, Copy, WarningCircle } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { Spinner } from "./spinner";
+
+type Json = string | number | boolean | null | Json[] | { [key: string]: Json };
+
+const punctuation = (text: string) => <span className="text-syntax-punctuation">{text}</span>;
+
+function renderJson(value: Json, indent: number): ReactNode[] {
+  const pad = "  ".repeat(indent);
+  if (value === null || typeof value === "number" || typeof value === "boolean") {
+    return [
+      <span key="v" className="text-syntax-number">
+        {String(value)}
+      </span>,
+    ];
+  }
+  if (typeof value === "string") return [<span key="v">{JSON.stringify(value)}</span>];
+  const entries = Array.isArray(value)
+    ? value.map((item, index) => [String(index), item] as const)
+    : Object.entries(value);
+  const [open, close] = Array.isArray(value) ? ["[", "]"] : ["{", "}"];
+  return [
+    <span key="open">{punctuation(open)}</span>,
+    ...entries.map(([key, item], index) => (
+      <span key={key}>
+        {"\n"}
+        {pad}
+        {"  "}
+        {!Array.isArray(value) && (
+          <>
+            <span className="text-syntax-key">{JSON.stringify(key)}</span>
+            {punctuation(":")}{" "}
+          </>
+        )}
+        {renderJson(item, indent + 1)}
+        {index < entries.length - 1 && punctuation(",")}
+      </span>
+    )),
+    <span key="close">
+      {"\n"}
+      {pad}
+      {punctuation(close)}
+    </span>,
+  ];
+}
+
+/** JSON in Geist Mono code style with the Figma syntax colors (key, string, number, punctuation). */
+export function JsonCode({ value, className }: { value: Json; className?: string }) {
+  return (
+    <pre
+      className={cn("max-w-full overflow-x-auto font-mono text-code whitespace-pre-wrap text-syntax-string", className)}
+    >
+      {renderJson(value, 0)}
+    </pre>
+  );
+}
+
+export type ToolCallStatus = "running" | "done" | "failed";
+
+export type ToolCallProps = {
+  status: ToolCallStatus;
+  /** Plain tool name, such as "Web search", with its 16px icon. */
+  tool: { icon: ReactNode; name: ReactNode };
+  summary: ReactNode;
+  elapsed?: ReactNode;
+  args?: Json;
+  result?: Json;
+  error?: ReactNode;
+  onRetry?: () => void;
+  /** The result is cut off; shows a "Show all" link under it. */
+  truncated?: boolean;
+  onShowAll?: () => void;
+  defaultOpen?: boolean;
+  className?: string;
+};
+
+function Section({
+  label,
+  children,
+  copyText,
+  footer,
+}: {
+  label: string;
+  children: ReactNode;
+  /** Plain text of the section body; adds a real copy button when present. */
+  copyText?: string;
+  footer?: ReactNode;
+}) {
+  const { copied, copy } = useCopyToClipboard(1500);
+  return (
+    <div className="flex min-w-0 flex-col gap-1.5">
+      <div className="flex items-center gap-2 text-label-sm text-text-secondary">
+        <span className="flex-1 uppercase">{label}</span>
+        {copyText !== undefined && (
+          <button
+            type="button"
+            aria-label={copied ? "Copied" : `Copy ${label.toLowerCase()}`}
+            onClick={() => copy(copyText)}
+            className="flex motion-press cursor-pointer items-center justify-center rounded-sm hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+          >
+            {copied ? (
+              <Check key="copied" aria-hidden className="size-3.5 animate-pop-in text-status-live" />
+            ) : (
+              <Copy key="copy" aria-hidden className="size-3.5 animate-pop-in" />
+            )}
+          </button>
+        )}
+      </div>
+      <div className="min-w-0 rounded-[10px] bg-bg-subtle px-3.5 py-3">{children}</div>
+      {footer}
+    </div>
+  );
+}
+
+/** Figma `Tool call` (Tool call card 186:7811): a solid 16px-radius card that expands to arguments and result. */
+export function ToolCall({
+  status,
+  tool,
+  summary,
+  elapsed,
+  args,
+  result,
+  error,
+  onRetry,
+  truncated,
+  onShowAll,
+  defaultOpen,
+  className,
+}: ToolCallProps) {
+  return (
+    <Collapsible.Root
+      defaultOpen={defaultOpen}
+      className={cn(
+        "flex w-full min-w-0 flex-col overflow-clip rounded-2xl border bg-bg-surface",
+        status === "failed" ? "border-border-danger" : "border-border-default",
+        className,
+      )}
+    >
+      <Collapsible.Trigger className="group flex w-full cursor-pointer items-center gap-2.5 px-4 py-3.5 text-left motion-colors hover:bg-overlay-ink-3 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-text-brand">
+        <span className="flex max-w-full min-w-0 shrink items-center gap-1.5 rounded-full bg-overlay-ink-6 py-[3px] pr-2.5 pl-2 text-label-md text-text-primary [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-text-secondary">
+          {tool.icon}
+          <span className="min-w-0 truncate">{tool.name}</span>
+        </span>
+        <span className="min-w-0 flex-1 truncate text-body-sm text-text-secondary">{summary}</span>
+        <span className="flex size-4 shrink-0 items-center justify-center">
+          {status === "running" && <Spinner key="running" size="sm" className="animate-pop-in" />}
+          {status === "done" && (
+            <CheckCircle key="done" aria-hidden className="size-4 animate-pop-in text-status-live" />
+          )}
+          {status === "failed" && (
+            <WarningCircle key="failed" aria-hidden className="size-4 animate-pop-in text-text-danger" />
+          )}
+        </span>
+        {status === "failed" && <span className="shrink-0 text-label-sm text-text-danger">Failed</span>}
+        {elapsed && <span className="shrink-0 text-caption text-text-secondary">{elapsed}</span>}
+        <CaretDown
+          aria-hidden
+          className="size-4 shrink-0 text-text-secondary transition-transform duration-200 ease-out-quint group-data-panel-open:rotate-180"
+        />
+      </Collapsible.Trigger>
+      <Collapsible.Panel className="motion-collapse">
+        <div className="flex min-w-0 flex-col gap-3.5 px-4 pb-4">
+          {status === "failed" && error && (
+            <div className="flex items-center gap-2.5 rounded-[10px] bg-bg-danger px-3.5 py-3">
+              <WarningCircle aria-hidden className="size-4 shrink-0 text-text-danger" />
+              <p className="min-w-0 flex-1 text-body-sm text-text-danger">{error}</p>
+              {onRetry && (
+                <button
+                  type="button"
+                  onClick={onRetry}
+                  className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center gap-1.5 rounded-full border border-border-default bg-bg-surface px-2.5 text-label-sm text-text-primary"
+                >
+                  <ArrowClockwise aria-hidden className="size-3.5" />
+                  Retry
+                </button>
+              )}
+            </div>
+          )}
+          {args !== undefined && (
+            <Section label="Arguments" copyText={JSON.stringify(args, null, 2)}>
+              <JsonCode value={args} />
+            </Section>
+          )}
+          {status !== "failed" && (
+            <Section
+              label="Result"
+              copyText={typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+              footer={
+                truncated && result !== undefined && status !== "running" ? (
+                  <Button variant="link" className="self-start px-0" onClick={onShowAll}>
+                    Show all
+                  </Button>
+                ) : undefined
+              }
+            >
+              {status === "running" || result === undefined ? (
+                <p className="text-body-sm text-text-secondary">Waiting for result…</p>
+              ) : (
+                <JsonCode value={result} />
+              )}
+            </Section>
+          )}
+        </div>
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  );
+}
+
+export type { Json };