@springbrand/message-panel 0.1.0 → 0.1.2

package/src/camel/camel-chat-messages.tsx

@@ -1,1420 +0,0 @@
-import type { UIMessage } from "ai";
-import {
-  ArrowDownIcon,
-  BellIcon,
-  CheckIcon,
-  ChevronRightIcon,
-  CopyIcon,
-  GitForkIcon,
-  Loader2Icon,
-  TriangleAlertIcon,
-} from "lucide-react";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ButtonHTMLAttributes,
-  type ReactNode,
-} from "react";
-import {
-  MessageResponse,
-  type MessageUrlResolver,
-} from "../message";
-import {
-  ParallelPart,
-  SubAgentsPart,
-  resolvePartKind,
-  toolNameOfPart,
-  type ParallelTool,
-  type SubAgent,
-} from "../parts";
-import { deriveThinkingActivity, ThinkingIndicator } from "../status";
-import type {
-  ToolApprovalDecision,
-  ToolApprovalView,
-} from "../contracts";
-import { cn } from "../internal/cn";
-import {
-  CamelToolDetails,
-  getCamelToolPresentation,
-} from "./camel-tool-presentation";
-import {
-  camelCompletedAt,
-  camelCreatedAt,
-  camelMessageText,
-  camelMetadata,
-  formatCamelMessageTime,
-  projectCamelMessages,
-  type CamelAssistantTurn,
-  type CamelPartRef,
-  type CamelStandaloneMessage,
-} from "./camel-turn";
-import { TurnSummaryBar } from "./turn-summary-bar";
-
-type ChatStatus = "ready" | "submitted" | "streaming" | "error";
-
-export interface CamelPendingApproval {
-  id: string;
-  action: string;
-  summary: string;
-  executionLevelLabel: string;
-  requiredExecutionLevelLabel: string;
-  disabled?: boolean;
-}
-
-export interface CamelChatMessagesProps {
-  messages: readonly UIMessage[];
-  status: ChatStatus;
-  /** Exact tool names promoted from the collapsible trace to final output. */
-  finalToolNames?: readonly string[];
-  isHydrating?: boolean;
-  isRecovering?: boolean;
-  isServerStreaming?: boolean;
-  hasPendingSteer?: boolean;
-  startedWithPending?: boolean;
-  error?: unknown;
-  onRetry?: () => void;
-  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
-  onSuggestion: (text: string) => void;
-  onAnswer: (payload: unknown) => void;
-  onFork?: (messageId: string) => void | Promise<void>;
-  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
-  resolveUrl?: MessageUrlResolver;
-  /** Set false when durable approval actions are rendered outside the trace. */
-  inlineApprovalActions?: boolean;
-}
-
-const pendingSteerActivity = {
-  state: "working" as const,
-  label: "Waiting for the current step to finish…",
-};
-
-type UnknownRecord = Record<string, unknown>;
-
-type CamelButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  size?: "sm" | "icon" | "icon-sm";
-  variant?: "default" | "outline" | "ghost";
-};
-
-function Button({
-  className,
-  size = "sm",
-  variant = "default",
-  type = "button",
-  ...props
-}: CamelButtonProps) {
-  return (
-    <button
-      type={type}
-      className={cn(
-        "inline-flex shrink-0 items-center justify-center gap-1 rounded-md text-xs font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
-        variant === "default" &&
-          "bg-primary text-primary-foreground hover:bg-primary/80",
-        variant === "outline" &&
-          "border border-border bg-background hover:bg-muted",
-        variant === "ghost" && "hover:bg-muted hover:text-foreground",
-        size === "sm" && "h-7 px-2",
-        size === "icon" && "size-9 rounded-full",
-        size === "icon-sm" && "size-8 p-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function CamelChatError({
-  error,
-  onRetry,
-}: {
-  error: unknown;
-  onRetry?: () => void;
-}) {
-  return (
-    <div
-      className="flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
-      data-camel-chat-error=""
-      role="alert"
-    >
-      <TriangleAlertIcon className="size-4 shrink-0" />
-      <span className="min-w-0 flex-1 break-words">
-        {error instanceof Error
-          ? error.message
-          : typeof error === "string"
-            ? error
-            : "Something went wrong"}
-      </span>
-      {onRetry && (
-        <Button
-          type="button"
-          size="sm"
-          variant="outline"
-          className="shrink-0"
-          onClick={onRetry}
-        >
-          Retry
-        </Button>
-      )}
-    </div>
-  );
-}
-
-export function CamelApprovalPrompts({
-  approvals,
-  error,
-  onApprove,
-}: {
-  approvals: readonly CamelPendingApproval[];
-  error?: string | null;
-  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
-}) {
-  if (approvals.length === 0) return null;
-
-  return (
-    <div className="flex flex-col gap-2" data-camel-approval-prompts="">
-      {approvals.map((approval) => (
-        <section
-          key={approval.id}
-          aria-label="等待审批"
-          className="rounded-xl border border-border bg-background p-3 shadow-sm"
-        >
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <p className="text-xs font-medium text-muted-foreground">
-              需要审批 · {approval.action}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              Agent: {approval.executionLevelLabel} · Tool:{" "}
-              {approval.requiredExecutionLevelLabel}
-            </p>
-          </div>
-          <p className="mt-1 text-sm text-foreground">{approval.summary}</p>
-          <div className="mt-2 flex flex-wrap justify-end gap-2">
-            <Button
-              variant="outline"
-              disabled={approval.disabled}
-              onClick={() => onApprove(approval.id, "deny")}
-            >
-              拒绝
-            </Button>
-            <Button
-              variant="outline"
-              disabled={approval.disabled}
-              onClick={() => onApprove(approval.id, "allow_once")}
-            >
-              仅本次允许
-            </Button>
-            <Button
-              disabled={approval.disabled}
-              onClick={() => onApprove(approval.id, "allow_level")}
-            >
-              允许该档位
-            </Button>
-          </div>
-        </section>
-      ))}
-      {error && (
-        <p className="px-1 text-xs text-destructive" role="alert">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}
-
-function Collapsible({
-  open,
-  onOpenChange,
-  disabled = false,
-  trigger,
-  children,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  disabled?: boolean;
-  trigger: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <>
-      <div onClick={() => {
-        if (!disabled) onOpenChange(!open);
-      }}>
-        {trigger}
-      </div>
-      <div
-        data-camel-collapsible-content=""
-        data-state={open ? "open" : "closed"}
-        aria-hidden={!open}
-        inert={!open ? true : undefined}
-      >
-        {open && (
-          <div data-camel-collapsible-inner="">
-            {children}
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-function recordOf(value: unknown): UnknownRecord {
-  return value != null && typeof value === "object"
-    ? (value as UnknownRecord)
-    : {};
-}
-
-function dataOf(part: unknown): UnknownRecord {
-  const record = recordOf(part);
-  return recordOf(record.data ?? record.input ?? record);
-}
-
-function toolApprovalOf(part: unknown): ToolApprovalView | undefined {
-  const approval = recordOf(recordOf(part).approval);
-  return typeof approval.id === "string"
-    ? {
-        id: approval.id,
-        ...(typeof approval.approved === "boolean"
-          ? { approved: approval.approved }
-          : {}),
-      }
-    : undefined;
-}
-
-function normalizedPartType(part: unknown): string {
-  const record = recordOf(part);
-  const rawType = typeof record.type === "string" ? record.type : "unknown";
-  return (
-    resolvePartKind(part) ??
-    (rawType.startsWith("data-")
-      ? rawType.slice(5).replaceAll("-", "_")
-      : rawType)
-  );
-}
-
-function ClipboardAction({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-  const timerRef = useRef<number | null>(null);
-
-  useEffect(
-    () => () => {
-      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
-    },
-    [],
-  );
-
-  const copy = useCallback(() => {
-    void navigator.clipboard.writeText(text).then(() => {
-      setCopied(true);
-      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
-      timerRef.current = window.setTimeout(() => setCopied(false), 1500);
-    });
-  }, [text]);
-
-  return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="icon-sm"
-      className="size-8 text-muted-foreground"
-      onClick={copy}
-      aria-label={copied ? "Copied!" : "Copy message"}
-      title={copied ? "Copied!" : "Copy message"}
-    >
-      {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-    </Button>
-  );
-}
-
-function CamelThinking({
-  part,
-  isActive,
-}: {
-  part: unknown;
-  isActive: boolean;
-}) {
-  const record = recordOf(part);
-  const data = dataOf(part);
-  const text = String(record.text ?? data.detail ?? data.text ?? "");
-  const streaming = isActive && record.state === "streaming";
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div data-part-type="reasoning">
-      <Collapsible
-        open={open}
-        onOpenChange={setOpen}
-        trigger={
-          <div
-            role="button"
-            tabIndex={0}
-            className={cn(
-              "thinking-block group/thinking -mx-2 flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1 text-left text-sm text-muted-foreground",
-              "transition-colors duration-150 hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
-            )}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                setOpen((current) => !current);
-              }
-            }}
-          >
-            <span
-              className={cn(
-                "size-1.5 shrink-0 rounded-full",
-                streaming
-                  ? "animate-pulse bg-blue-500 motion-reduce:animate-none"
-                  : "bg-green-500",
-              )}
-            />
-            <span className="min-w-0 flex-1 truncate">
-              {streaming ? "Thinking…" : "Thought"}
-            </span>
-            <ChevronRightIcon
-              className={cn(
-                "size-4 text-muted-foreground/50 opacity-0 transition-all duration-150 group-hover/thinking:opacity-100",
-                open && "rotate-90 opacity-100",
-              )}
-            />
-          </div>
-        }
-      >
-        <div className="ml-1 mt-1 border-l border-border/40 pl-4 text-xs text-muted-foreground/80">
-          <MessageResponse>{text}</MessageResponse>
-        </div>
-      </Collapsible>
-    </div>
-  );
-}
-
-function CamelToolRow({
-  part,
-  isActive,
-  children,
-  onApprove,
-  getToolApproval,
-}: {
-  part: unknown;
-  isActive: boolean;
-  children?: ReactNode;
-  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
-  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
-}) {
-  const [open, setOpen] = useState(false);
-  const approval = getToolApproval?.(part) ?? toolApprovalOf(part);
-  const pendingApproval = approval && approval.approved === undefined;
-  const presentation = getCamelToolPresentation(part, isActive);
-  const hasDetails = children != null || presentation.hasDetails;
-  const title = presentation.summary;
-
-  useEffect(() => {
-    if (presentation.isSubAgent && presentation.running) setOpen(true);
-  }, [presentation.isSubAgent, presentation.running]);
-
-  return (
-    <div data-part-type={normalizedPartType(part)}>
-      <Collapsible
-        open={open}
-        onOpenChange={setOpen}
-        disabled={!hasDetails}
-        trigger={
-          <div
-            role="button"
-            tabIndex={0}
-            aria-label={title}
-            aria-expanded={hasDetails ? open : undefined}
-            className={cn(
-              "tool-call group/toolcall -mx-2 flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm text-muted-foreground",
-              hasDetails && "cursor-pointer hover:bg-muted/30",
-              "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
-            )}
-            onKeyDown={(event) => {
-              if (hasDetails && (event.key === "Enter" || event.key === " ")) {
-                event.preventDefault();
-                setOpen((current) => !current);
-              }
-            }}
-          >
-            <span
-              className={cn(
-                "size-1.5 shrink-0 rounded-full",
-                presentation.failed
-                  ? "bg-red-500"
-                  : presentation.running || pendingApproval
-                    ? "animate-pulse bg-blue-500 motion-reduce:animate-none"
-                    : "bg-green-500",
-              )}
-            />
-            <span className="min-w-0 flex-1 truncate">
-              {title}
-            </span>
-            {hasDetails && (
-              <ChevronRightIcon
-                className={cn(
-                  "size-4 text-muted-foreground/50 opacity-0 transition-all duration-150 group-hover/toolcall:opacity-100",
-                  open && "rotate-90 opacity-100",
-                )}
-              />
-            )}
-          </div>
-        }
-      >
-        {hasDetails ? (
-          <div className="group/details ml-1 mt-1 border-l border-border/50 pl-4 text-xs text-muted-foreground/80">
-            {children ?? (
-              <CamelToolDetails presentation={presentation} />
-            )}
-          </div>
-        ) : null}
-      </Collapsible>
-      {pendingApproval && (
-        <div className="ml-1 mt-2 flex flex-wrap items-center gap-2 border-l border-border/50 pl-4">
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            onClick={() => onApprove(approval.id, "deny")}
-          >
-            Deny
-          </Button>
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            onClick={() => onApprove(approval.id, "allow_once")}
-          >
-            Allow once
-          </Button>
-          <Button
-            type="button"
-            size="sm"
-            onClick={() => onApprove(approval.id, "allow_level")}
-          >
-            Allow this level
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function CamelSuggestions({
-  part,
-  onSuggestion,
-}: {
-  part: unknown;
-  onSuggestion: (text: string) => void;
-}) {
-  const data = dataOf(part);
-  const items = Array.isArray(data.items)
-    ? data.items.filter((item): item is string => typeof item === "string")
-    : [];
-  return (
-    <div
-      className="space-y-2 pt-1"
-      data-part-type="suggestions"
-    >
-      <div className="flex items-center gap-2 text-sm text-emerald-600">
-        <CheckIcon className="size-4" />
-        <span>Task complete</span>
-      </div>
-      <div className="flex flex-wrap gap-2">
-        {items.map((item) => (
-          <Button
-            key={item}
-            type="button"
-            variant="outline"
-            size="sm"
-            className="rounded-full"
-            onClick={() => onSuggestion(item)}
-          >
-            {item}
-          </Button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function scheduleDuration(seconds: unknown): string {
-  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) {
-    return "";
-  }
-  for (const [size, unit] of [
-    [86_400, "day"],
-    [3_600, "hour"],
-    [60, "minute"],
-  ] as const) {
-    if (seconds % size === 0) {
-      const value = seconds / size;
-      return `${value} ${unit}${value === 1 ? "" : "s"}`;
-    }
-  }
-  return `${seconds} second${seconds === 1 ? "" : "s"}`;
-}
-
-function scheduleCadence(data: UnknownRecord): string {
-  const trigger = recordOf(data.trigger);
-  const kind = trigger.kind;
-  let cadence = "";
-  if (kind === "once-in") {
-    cadence = `In ${scheduleDuration(trigger.seconds)}`;
-  } else if (kind === "once-at" && typeof trigger.at === "string") {
-    cadence = `Once at ${trigger.at}`;
-  } else if (kind === "interval") {
-    cadence = `Every ${scheduleDuration(trigger.seconds)}`;
-  } else if (kind === "cron" && typeof trigger.cron === "string") {
-    cadence = `Cron ${trigger.cron}`;
-  }
-  if (!cadence) {
-    cadence = String(data.cadence ?? data.schedule ?? "Scheduled");
-  }
-  const timezone =
-    typeof data.timezone === "string"
-      ? data.timezone
-      : typeof data.tz === "string"
-        ? data.tz
-        : "";
-  return timezone ? `${cadence} · ${timezone}` : cadence;
-}
-
-function CamelSchedule({
-  part,
-  isActive,
-}: {
-  part: unknown;
-  isActive: boolean;
-}) {
-  const data = dataOf(part);
-  const presentation = getCamelToolPresentation(part, isActive);
-  const state = presentation.failed
-    ? "failed"
-    : presentation.running
-      ? "running"
-      : "scheduled";
-  return (
-    <section
-      className="rounded-xl border border-border bg-muted/20 p-3"
-      data-part-type="schedule"
-      data-state={state}
-    >
-      <div className="flex items-start gap-3">
-        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-          <BellIcon className="size-4" />
-        </span>
-        <div className="min-w-0 flex-1">
-          <strong className="block truncate text-sm text-foreground">
-            {String(data.label ?? data.title ?? "Scheduled task")}
-          </strong>
-          <p className="mt-1 text-xs text-muted-foreground">
-            {scheduleCadence(data)}
-          </p>
-        </div>
-        <span
-          className={cn(
-            "flex shrink-0 items-center gap-1 text-xs",
-            state === "failed"
-              ? "text-destructive"
-              : state === "running"
-                ? "text-blue-500"
-                : "text-emerald-600",
-          )}
-        >
-          {state === "failed" ? (
-            <TriangleAlertIcon className="size-3.5" />
-          ) : state === "running" ? (
-            <Loader2Icon className="size-3.5 animate-spin motion-reduce:animate-none" />
-          ) : (
-            <CheckIcon className="size-3.5" />
-          )}
-          {state === "failed"
-            ? "Failed"
-            : state === "running"
-              ? "Scheduling…"
-              : "Scheduled"}
-        </span>
-      </div>
-    </section>
-  );
-}
-
-function CamelAskUser({
-  part,
-  submittedAnswer,
-  onAnswer,
-}: {
-  part: unknown;
-  submittedAnswer?: string;
-  onAnswer: (payload: unknown) => void;
-}) {
-  const record = recordOf(part);
-  const data = dataOf(part);
-  const output = record.output;
-  const questions = Array.isArray(data.questions)
-    ? data.questions.map(recordOf)
-    : typeof data.question === "string"
-      ? [{
-          prompt: data.question,
-          kind: data.multiSelect === true ? "multi" : "single",
-          options: Array.isArray(data.options)
-            ? data.options.filter(
-                (option): option is string => typeof option === "string",
-              )
-            : [],
-        }]
-      : [];
-  const [selections, setSelections] = useState<string[][]>(() =>
-    questions.map(() => []),
-  );
-  const [text, setText] = useState("");
-  const [submitted, setSubmitted] = useState(false);
-  const outputRecord = recordOf(output);
-  const externalAnswer =
-    submittedAnswer?.trim() ||
-    (typeof output === "string"
-      ? output.trim()
-      : typeof outputRecord.text === "string"
-        ? outputRecord.text.trim()
-        : "");
-  const externalSelections = new Set(
-    externalAnswer
-      .split("、")
-      .map((value) => value.trim())
-      .filter(Boolean),
-  );
-  const resolvedSubmitted = submitted || Boolean(externalAnswer);
-  const valid = questions.every((question, index) => {
-    const options = Array.isArray(question.options) ? question.options : [];
-    return options.length === 0 || (selections[index]?.length ?? 0) > 0;
-  });
-
-  return (
-    <section
-      className="space-y-3 rounded-xl border border-border bg-muted/20 p-3"
-      data-part-type="ask_user"
-      data-state={resolvedSubmitted ? "submitted" : "idle"}
-    >
-      {questions.map((question, questionIndex) => {
-        const prompt = String(question.prompt ?? "Choose an option");
-        const options = Array.isArray(question.options)
-          ? question.options.filter(
-              (option): option is string => typeof option === "string",
-            )
-          : [];
-        const multi = question.kind === "multi";
-        return (
-          <div className="space-y-2" key={`${prompt}:${questionIndex}`}>
-            <p className="text-sm text-foreground">{prompt}</p>
-            <div className="flex flex-wrap gap-2">
-              {options.map((option) => {
-                const selected = externalAnswer
-                  ? externalSelections.has(option)
-                  : selections[questionIndex]?.includes(option);
-                return (
-                  <Button
-                    key={option}
-                    type="button"
-                    size="sm"
-                    variant={selected ? "default" : "outline"}
-                    disabled={resolvedSubmitted}
-                    onClick={() =>
-                      setSelections((current) =>
-                        current.map((values, index) => {
-                          if (index !== questionIndex) return values;
-                          if (!multi) return [option];
-                          return values.includes(option)
-                            ? values.filter((value) => value !== option)
-                            : [...values, option];
-                        }),
-                      )
-                    }
-                  >
-                    {option}
-                  </Button>
-                );
-              })}
-            </div>
-          </div>
-        );
-      })}
-      {typeof data.freeTextPlaceholder === "string" && (
-        <input
-          value={text}
-          disabled={resolvedSubmitted}
-          onChange={(event) => setText(event.currentTarget.value)}
-          placeholder={data.freeTextPlaceholder}
-          className="h-8 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring focus:ring-2 focus:ring-ring/30"
-        />
-      )}
-      <Button
-        type="button"
-        size="sm"
-        disabled={resolvedSubmitted || !valid}
-        onClick={() => {
-          onAnswer({ selections, text });
-          setSubmitted(true);
-        }}
-      >
-        {resolvedSubmitted ? "Submitted" : "Submit"}
-      </Button>
-      {externalAnswer && (
-        <p className="text-xs text-muted-foreground">
-          已回答：{externalAnswer}
-        </p>
-      )}
-    </section>
-  );
-}
-
-function CamelRichPart({
-  part,
-  isActive,
-  onApprove,
-  onSuggestion,
-  onAnswer,
-  replyText,
-  getToolApproval,
-}: {
-  part: unknown;
-  isActive: boolean;
-  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
-  onSuggestion: (text: string) => void;
-  onAnswer: (payload: unknown) => void;
-  replyText?: string;
-  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
-}) {
-  const kind = normalizedPartType(part);
-  const data = dataOf(part);
-
-  if (kind === "suggestions") {
-    return <CamelSuggestions part={part} onSuggestion={onSuggestion} />;
-  }
-  if (kind === "schedule") {
-    return <CamelSchedule part={part} isActive={isActive} />;
-  }
-  if (kind === "ask_user") {
-    return (
-      <CamelAskUser
-        part={part}
-        submittedAnswer={replyText}
-        onAnswer={onAnswer}
-      />
-    );
-  }
-  if (kind === "parallel") {
-    const tools = Array.isArray(data.tools)
-      ? (data.tools as ParallelTool[])
-      : [];
-    return (
-      <ParallelPart
-        label={
-          typeof data.label === "string" ? data.label : "Parallel tasks"
-        }
-        tools={tools}
-        isActive={isActive}
-      />
-    );
-  }
-  if (kind === "subagents") {
-    const presentation = getCamelToolPresentation(part, isActive);
-    const toolName = toolNameOfPart(part);
-    const fallbackName =
-      toolName === "run_temporary_agent"
-        ? "Temporary Agent"
-        : toolName === "dispatch_background"
-          ? `${String(data.agentType ?? "Background").replace(/^./, (value) => value.toUpperCase())} Agent`
-          : toolName === "fanout"
-            ? "Fanout Agent"
-            : toolName === "extract"
-              ? "Extract Agent"
-              : "Sub-agent";
-    const agents = Array.isArray(data.agents)
-      ? (data.agents as SubAgent[])
-      : [
-          {
-            name: String(
-              data.subagentName ??
-                data.name ??
-                fallbackName,
-            ),
-            summary:
-              presentation.errorText ||
-              presentation.outputText ||
-              String(data.summary ?? ""),
-            status: presentation.failed
-              ? "failed" as const
-              : presentation.running
-                ? "running" as const
-                : "done" as const,
-          },
-        ];
-    return <SubAgentsPart agents={agents} isActive={isActive} />;
-  }
-  if (kind === "image") {
-    const src = String(data.src ?? data.url ?? "");
-    return (
-      <figure className="my-1" data-part-type="image">
-        <img
-          src={src}
-          alt={String(data.alt ?? data.filename ?? "Generated image")}
-          className="max-h-[28rem] max-w-full rounded-lg border border-border object-contain"
-        />
-      </figure>
-    );
-  }
-  if (kind === "error") {
-    return (
-      <div
-        className="flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
-        data-part-type="error"
-        role="alert"
-      >
-        <TriangleAlertIcon className="mt-0.5 size-4 shrink-0" />
-        <div>
-          <div className="font-medium">{String(data.title ?? "Error")}</div>
-          <div className="mt-0.5 text-xs opacity-80">
-            {String(data.body ?? data.message ?? "")}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <CamelToolRow
-      part={part}
-      isActive={isActive}
-      onApprove={onApprove}
-      getToolApproval={getToolApproval}
-    />
-  );
-}
-
-function AssistantPart({
-  part,
-  isActive,
-  onApprove,
-  onSuggestion,
-  onAnswer,
-  replyText,
-  getToolApproval,
-  resolveUrl,
-}: {
-  part: unknown;
-  isActive: boolean;
-  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
-  onSuggestion: (text: string) => void;
-  onAnswer: (payload: unknown) => void;
-  replyText?: string;
-  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
-  resolveUrl?: MessageUrlResolver;
-}) {
-  const record = recordOf(part);
-  if (record.type === "step-start") return null;
-  if (record.type === "text") {
-    const text = String(record.text ?? "").trim();
-    if (!text) return null;
-    return (
-      <div data-part-type="text">
-        <MessageResponse streaming={isActive} resolveUrl={resolveUrl}>
-          {text}
-        </MessageResponse>
-      </div>
-    );
-  }
-  if (record.type === "reasoning") {
-    return <CamelThinking part={part} isActive={isActive} />;
-  }
-  return (
-    <CamelRichPart
-      part={part}
-      isActive={isActive}
-      onApprove={onApprove}
-      onSuggestion={onSuggestion}
-      onAnswer={onAnswer}
-      replyText={replyText}
-      getToolApproval={getToolApproval}
-    />
-  );
-}
-
-function ForkAction({
-  messageId,
-  onFork,
-}: {
-  messageId: string;
-  onFork: (messageId: string) => void | Promise<void>;
-}) {
-  const [forking, setForking] = useState(false);
-
-  return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="icon-sm"
-      className="size-8 text-muted-foreground"
-      disabled={forking}
-      onClick={() => {
-        setForking(true);
-        void Promise.resolve(onFork(messageId)).finally(() => setForking(false));
-      }}
-      aria-label={forking ? "Starting new thread…" : "New thread from here"}
-      title={forking ? "Starting new thread…" : "New thread from here"}
-    >
-      {forking ? (
-        <Loader2Icon className="size-4 animate-spin" />
-      ) : (
-        <GitForkIcon className="size-4" />
-      )}
-    </Button>
-  );
-}
-
-function UserMessage({ message }: { message: UIMessage }) {
-  const text = camelMessageText(message);
-  const files = message.parts.filter((part) => part.type === "file");
-  const metadata = camelMetadata(message);
-  const createdAt = camelCreatedAt(message);
-  const messageTime =
-    createdAt === undefined ? null : formatCamelMessageTime(createdAt);
-  const authorStamp = [metadata.authorDisplayName, messageTime]
-    .filter(Boolean)
-    .join(" ");
-
-  if (!text && files.length === 0) return null;
-
-  return (
-    <div
-      className="group mb-1 mt-6"
-      data-message-id={message.id}
-      data-message-role="user"
-    >
-      <div className="flex flex-col items-end gap-2">
-        {files.length > 0 && (
-          <div className="flex max-w-[85%] flex-wrap justify-end gap-2">
-            {files.map((file, index) =>
-              file.mediaType?.startsWith("image/") ? (
-                <img
-                  key={`${file.url}:${index}`}
-                  src={file.url}
-                  alt={file.filename ?? "Attachment"}
-                  className="max-h-52 max-w-64 rounded-xl border border-border object-cover"
-                />
-              ) : (
-                <span
-                  key={`${file.url}:${index}`}
-                  className="rounded-lg border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground"
-                >
-                  {file.filename ?? "Attachment"}
-                </span>
-              ),
-            )}
-          </div>
-        )}
-        {text && (
-          <div className="camel-user-message max-w-[85%] rounded-3xl border border-border bg-muted/30 px-4 py-3 text-foreground">
-            <MessageResponse>{text}</MessageResponse>
-          </div>
-        )}
-        {text && (
-          <div
-            className="flex items-center justify-end gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 pointer-coarse:opacity-100"
-            role="group"
-            aria-label="Message actions"
-          >
-            {authorStamp && (
-              <span className="mr-1 text-xs text-muted-foreground">
-                {authorStamp}
-              </span>
-            )}
-            <ClipboardAction text={text} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function standaloneText(message: UIMessage): string {
-  const part = message.parts.find((candidate) =>
-    candidate.type.startsWith("data-"),
-  );
-  const data = dataOf(part);
-  return String(data.text ?? data.command ?? data.output ?? "").trim();
-}
-
-function CompactSummary({ message }: { message: UIMessage }) {
-  const text = standaloneText(message);
-  if (!text) return null;
-  return (
-    <details
-      className="my-3 rounded-xl border border-border bg-muted/20 px-3 py-2 text-sm"
-      data-camel-compact-summary=""
-      data-message-id={message.id}
-    >
-      <summary className="cursor-pointer text-xs font-medium text-muted-foreground">
-        Compacted context
-      </summary>
-      <div className="mt-3 border-t border-border/40 pt-3">
-        <MessageResponse>{text}</MessageResponse>
-      </div>
-    </details>
-  );
-}
-
-function StandaloneMessage({ item }: { item: CamelStandaloneMessage }) {
-  const { message, displayKind } = item;
-  if (displayKind === "user") return <UserMessage message={message} />;
-  if (displayKind === "compact-summary") {
-    return <CompactSummary message={message} />;
-  }
-  const text = standaloneText(message);
-  if (!text) return null;
-  if (displayKind === "slash-command") {
-    return (
-      <div
-        className="mt-4 flex justify-end"
-        data-message-id={message.id}
-        data-message-kind="slash-command"
-      >
-        <span className="font-mono text-sm text-foreground">{text}</span>
-      </div>
-    );
-  }
-  if (displayKind === "local-command-output") {
-    return (
-      <div
-        className="mt-4 flex justify-start"
-        data-message-id={message.id}
-        data-message-kind="local-command-output"
-      >
-        <span className="text-sm italic text-muted-foreground">{text}</span>
-      </div>
-    );
-  }
-  return (
-    <div
-      className="my-3 text-sm italic text-muted-foreground"
-      data-message-id={message.id}
-      data-message-kind="notice"
-    >
-      {text}
-    </div>
-  );
-}
-
-function RenderAssistantPart({
-  partRef,
-  isActive,
-  onApprove,
-  onSuggestion,
-  onAnswer,
-  replyText,
-  getToolApproval,
-  resolveUrl,
-}: {
-  partRef: CamelPartRef;
-  isActive: boolean;
-  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
-  onSuggestion: (text: string) => void;
-  onAnswer: (payload: unknown) => void;
-  replyText?: string;
-  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
-  resolveUrl?: MessageUrlResolver;
-}) {
-  return (
-    <AssistantPart
-      key={`${partRef.messageId}:${partRef.partIndex}:${String(
-        recordOf(partRef.part).type ?? "part",
-      )}`}
-      part={partRef.part}
-      isActive={isActive}
-      onApprove={onApprove}
-      onSuggestion={onSuggestion}
-      onAnswer={onAnswer}
-      replyText={replyText}
-      getToolApproval={getToolApproval}
-      resolveUrl={resolveUrl}
-    />
-  );
-}
-
-function AssistantTurn({
-  turn,
-  isActive,
-  hasPendingSteer,
-  hasPendingApproval,
-  onFork,
-  onApprove,
-  onSuggestion,
-  onAnswer,
-  getToolApproval,
-  resolveUrl,
-}: {
-  turn: CamelAssistantTurn;
-  isActive: boolean;
-  hasPendingSteer: boolean;
-  hasPendingApproval: boolean;
-  onFork?: (messageId: string) => void | Promise<void>;
-  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
-  onSuggestion: (text: string) => void;
-  onAnswer: (payload: unknown) => void;
-  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
-  resolveUrl?: MessageUrlResolver;
-}) {
-  const renderPart = (partRef: CamelPartRef, active = false) => (
-    <RenderAssistantPart
-      key={`${partRef.messageId}:${partRef.partIndex}`}
-      partRef={partRef}
-      isActive={active}
-      onApprove={onApprove}
-      onSuggestion={onSuggestion}
-      onAnswer={onAnswer}
-      replyText={turn.replyText}
-      getToolApproval={getToolApproval}
-      resolveUrl={resolveUrl}
-    />
-  );
-  const showWorkInPlace =
-    isActive || hasPendingApproval || turn.terminalState !== undefined;
-  const showSummary = !showWorkInPlace && turn.traceParts.length > 0;
-  const completedAt = turn.completedAt ?? camelCompletedAt(turn.message);
-  const messageTime =
-    completedAt === undefined ? null : formatCamelMessageTime(completedAt);
-  const hasActions =
-    !showWorkInPlace && Boolean(messageTime || turn.copyText || onFork);
-  const thinkingActivity = deriveThinkingActivity(
-    turn.traceParts.at(-1)?.part ?? turn.finalParts.at(-1)?.part,
-  );
-  const activeActivity = hasPendingSteer
-    ? pendingSteerActivity
-    : thinkingActivity;
-
-  return (
-    <div
-      className="group/turn"
-      data-message-id={turn.actionMessageId}
-      data-message-role="assistant"
-      data-turn-step-count={turn.stepCount}
-      translate={showWorkInPlace ? "no" : undefined}
-    >
-      <div className="flex flex-col gap-1">
-        {showSummary && (
-          <TurnSummaryBar
-            durationMs={turn.durationMs}
-            stepCount={turn.stepCount}
-            showSeparator={
-              turn.finalParts.length > 0 || turn.terminalState !== undefined
-            }
-          >
-            {turn.traceParts.map((partRef) => renderPart(partRef))}
-          </TurnSummaryBar>
-        )}
-        {showWorkInPlace && turn.traceParts.length > 0 && (
-          <div className="max-w-none space-y-1" data-camel-turn-trace="">
-            {turn.traceParts.map((partRef) => renderPart(partRef, isActive))}
-          </div>
-        )}
-        {(turn.finalParts.length > 0 ||
-          turn.terminalState?.kind === "error") && (
-          <div className="max-w-none space-y-4" data-camel-final-answer="">
-            {turn.finalParts.map((partRef) => renderPart(partRef, isActive))}
-            {turn.terminalState?.kind === "error" && (
-              <div
-                className="flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
-                data-part-type="error"
-                role="alert"
-              >
-                <TriangleAlertIcon className="mt-0.5 size-4 shrink-0" />
-                <div>
-                  <div className="font-medium">
-                    {turn.terminalState.title}
-                  </div>
-                  {turn.terminalState.body && (
-                    <div className="mt-0.5 text-xs opacity-80">
-                      {turn.terminalState.body}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-        {turn.terminalState?.kind === "interrupted" && (
-          <div
-            className="px-1 py-1 text-xs text-muted-foreground/60"
-            data-camel-turn-status="interrupted"
-            role="status"
-          >
-            {turn.terminalState.title}
-          </div>
-        )}
-        {hasActions && (
-          <div
-            className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover/turn:opacity-100 group-focus-within/turn:opacity-100 pointer-coarse:opacity-100"
-            role="group"
-            aria-label="Message actions"
-          >
-            {messageTime && (
-              <span className="mr-1 text-xs text-muted-foreground">
-                {messageTime}
-              </span>
-            )}
-            {onFork && (
-              <ForkAction messageId={turn.actionMessageId} onFork={onFork} />
-            )}
-            {turn.copyText && <ClipboardAction text={turn.copyText} />}
-          </div>
-        )}
-        {isActive && turn.finalParts.length === 0 && (
-          <ThinkingIndicator {...activeActivity} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function CamelChatMessages({
-  messages,
-  status,
-  finalToolNames,
-  isHydrating = false,
-  isRecovering = false,
-  isServerStreaming = false,
-  hasPendingSteer = false,
-  startedWithPending = false,
-  error,
-  onRetry,
-  onApprove,
-  onSuggestion,
-  onAnswer,
-  onFork,
-  getToolApproval,
-  resolveUrl,
-  inlineApprovalActions = true,
-}: CamelChatMessagesProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const endRef = useRef<HTMLDivElement>(null);
-  const [showScrollButton, setShowScrollButton] = useState(false);
-  const isActive = status === "submitted" || status === "streaming";
-  const items = useMemo(
-    () => projectCamelMessages(messages, finalToolNames),
-    [messages, finalToolNames],
-  );
-  const presentedToolApproval = (part: unknown) => {
-    const approval = getToolApproval?.(part) ?? toolApprovalOf(part);
-    return !inlineApprovalActions && approval?.approved === undefined && approval
-      ? { ...approval, approved: false }
-      : approval;
-  };
-  const lastItem = items.at(-1);
-  const activeAssistantMessageId =
-    isActive && lastItem?.kind === "assistant"
-      ? lastItem.actionMessageId
-      : null;
-
-  const syncScrollButton = useCallback(() => {
-    const element = scrollRef.current;
-    if (!element) return;
-    const distance =
-      element.scrollHeight - element.scrollTop - element.clientHeight;
-    setShowScrollButton(distance > 120);
-  }, []);
-
-  useEffect(() => {
-    const element = scrollRef.current;
-    if (!element || showScrollButton) return;
-    element.scrollTo({ top: element.scrollHeight });
-  }, [messages, status, showScrollButton]);
-
-  return (
-    <div
-      className="relative flex min-h-0 flex-1 flex-col overflow-hidden"
-      data-sb-message-panel=""
-      data-camel-chat-transcript=""
-      data-status={status}
-      aria-busy={isActive || isHydrating}
-    >
-      {(isRecovering || isServerStreaming) && (
-        <div
-          className="absolute inset-x-0 top-0 z-10 flex h-7 items-center justify-center gap-2 bg-background/85 text-xs text-muted-foreground backdrop-blur-sm"
-          role="status"
-        >
-          <span className="size-1.5 animate-pulse rounded-full bg-blue-500" />
-          {isRecovering ? "Recovering…" : "Running…"}
-        </div>
-      )}
-      <div
-        ref={scrollRef}
-        onScroll={syncScrollButton}
-        tabIndex={0}
-        role="region"
-        aria-label="Chat messages"
-        className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden"
-      >
-        <div className="mx-auto flex w-full max-w-3xl flex-col px-4 pb-6 pt-2 md:px-6">
-          {messages.length === 0 && !startedWithPending && !isHydrating ? (
-            <div className="flex min-h-56 items-center justify-center text-center font-[family-name:var(--font-display)] text-4xl text-foreground">
-              How can I help?
-            </div>
-          ) : null}
-          {items.map((item) =>
-            item.kind === "assistant" ? (
-              <AssistantTurn
-                key={item.key}
-                turn={item}
-                isActive={item.actionMessageId === activeAssistantMessageId}
-                hasPendingSteer={hasPendingSteer}
-                hasPendingApproval={item.parts.some((partRef) => {
-                  const approval =
-                    getToolApproval?.(partRef.part) ??
-                    toolApprovalOf(partRef.part);
-                  return approval != null && approval.approved === undefined;
-                })}
-                onFork={onFork}
-                onApprove={onApprove}
-                onSuggestion={onSuggestion}
-                onAnswer={onAnswer}
-                getToolApproval={presentedToolApproval}
-                resolveUrl={resolveUrl}
-              />
-            ) : (
-              <StandaloneMessage key={item.key} item={item} />
-            ),
-          )}
-          {error != null && <CamelChatError error={error} onRetry={onRetry} />}
-          {isActive && activeAssistantMessageId === null && (
-            <ThinkingIndicator
-              {...(hasPendingSteer ? pendingSteerActivity : {})}
-            />
-          )}
-          <div ref={endRef} />
-        </div>
-      </div>
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-background to-transparent" />
-      <Button
-        type="button"
-        variant="outline"
-        size="icon"
-        className={cn(
-          "absolute bottom-3 left-1/2 z-20 -translate-x-1/2 rounded-full border-border/50 bg-background/80 shadow-md backdrop-blur-sm transition-all duration-200",
-          showScrollButton
-            ? "translate-y-0 opacity-100"
-            : "pointer-events-none translate-y-2 opacity-0",
-        )}
-        onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
-        aria-label="Scroll to bottom"
-      >
-        <ArrowDownIcon className="size-4" />
-      </Button>
-      {isHydrating && (
-        <div className="absolute inset-0 z-30 grid place-items-center bg-background/90">
-          <span className="text-sm text-muted-foreground">
-            Loading conversation…
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}