@couplet/agent-ui 1.0.0

package/dist/index.js

@@ -0,0 +1,1659 @@
+import {
+  loadInitialChatSession,
+  replaceSession,
+  runAgentStream,
+  sortSessions,
+  upsertSession
+} from "./chunk-PVUMYYWU.js";
+import {
+  DEFAULT_AGENT_ENDPOINTS,
+  createAgentClient,
+  getContextUsageEndpoint,
+  getSessionDetailEndpoint,
+  resolveAgentEndpoints
+} from "./chunk-LQB4Y7J4.js";
+import {
+  appendMessageChainNode,
+  appendMessageToolCalls,
+  appendSessionMessages,
+  appendUserReplyChainNode,
+  consumeAgentSseStream,
+  createAgentMessage,
+  createAgentSession,
+  createClarifyMessage,
+  extractClarifyFromChain,
+  findLastClarifyCall,
+  getPendingClarify,
+  getSessionTitle,
+  isClarifyCallAnswered,
+  parseSseEnvelope,
+  parseStreamEvent,
+  removeSessionMessage,
+  streamEventToChainNode,
+  updateClarifyMessage,
+  updateMessageContent,
+  updateMessageReasoning,
+  updateMessageType
+} from "./chunk-MJFUPOSB.js";
+
+// src/hooks/use-agent-session.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+function assertCanSwitchSession(status) {
+  if (status === "streaming" || status === "retrying") {
+    throw new Error("Cannot switch Agent session while streaming");
+  }
+}
+function useAgentSession(options) {
+  const { client, labels, autoInit = false, initialSessionMode = "latest", onNavigate } = options;
+  const [sessions, setSessions] = useState(() => [createAgentSession()]);
+  const [currentSessionId, setCurrentSessionId] = useState(() => sessions[0].id);
+  const [status, setStatus] = useState("idle");
+  const [contextUsage, setContextUsage] = useState(null);
+  const initializedRef = useRef(false);
+  const abortControllerRef = useRef(null);
+  const currentSession = useMemo(() => {
+    return sessions.find((session) => session.id === currentSessionId) ?? sessions[0];
+  }, [currentSessionId, sessions]);
+  useEffect(() => {
+    if (!autoInit || initializedRef.current) return;
+    let cancelled = false;
+    initializedRef.current = true;
+    loadInitialChatSession(client, initialSessionMode).then(({ sessionId, messages }) => {
+      if (cancelled) return;
+      const nextSession = {
+        ...createAgentSession(),
+        id: sessionId,
+        messages
+      };
+      setSessions([nextSession]);
+      setCurrentSessionId(sessionId);
+    }).catch((err) => {
+      console.error("[Agent] init chat session failed", err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [autoInit, client, initialSessionMode]);
+  useEffect(() => {
+    if (!currentSession?.id) return;
+    if (currentSession.id.startsWith("session-")) return;
+    void client.fetchContextUsage(currentSession.id).then(setContextUsage).catch((err) => console.error("[Agent] context usage failed", err));
+  }, [client, currentSession.id]);
+  const createSession = async () => {
+    assertCanSwitchSession(status);
+    const nextSession = createAgentSession(await client.createSession());
+    setSessions((prev) => [nextSession, ...prev]);
+    setCurrentSessionId(nextSession.id);
+    setStatus("idle");
+    setContextUsage(null);
+  };
+  const selectSession = async (sessionId) => {
+    assertCanSwitchSession(status);
+    const nextSession = await client.getSessionDetail(sessionId);
+    setSessions((prev) => upsertSession(prev, nextSession));
+    setCurrentSessionId(nextSession.id);
+    setStatus("idle");
+    setContextUsage(null);
+  };
+  const stopStreaming = () => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setStatus("idle");
+  };
+  const sendMessage = async (content) => {
+    if (status === "streaming" || status === "retrying") return;
+    await runAgentStream({
+      client,
+      session: currentSession,
+      content,
+      setSessions,
+      setStatus,
+      setContextUsage,
+      abortControllerRef,
+      onNavigate,
+      getStreamErrorMessage: () => labels.streamError
+    });
+  };
+  const sendClarifyOption = async (option, chainReplyTo) => {
+    if (status === "streaming" || status === "retrying") return;
+    await runAgentStream({
+      client,
+      session: currentSession,
+      content: option,
+      chainReplyTo,
+      setSessions,
+      setStatus,
+      setContextUsage,
+      abortControllerRef,
+      onNavigate,
+      getStreamErrorMessage: () => labels.streamError
+    });
+  };
+  return {
+    currentSession,
+    status,
+    contextUsage,
+    createSession,
+    selectSession,
+    sendMessage,
+    sendClarifyOption,
+    stopStreaming
+  };
+}
+
+// src/components/composer/index.tsx
+import { useState as useState5 } from "react";
+
+// src/components/ui/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({ className, variant = "default", size = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        variant === "default" && "bg-primary text-primary-foreground hover:bg-primary/90",
+        variant === "ghost" && "hover:bg-accent hover:text-accent-foreground",
+        variant === "outline" && "border border-input bg-background hover:bg-accent",
+        size === "default" && "h-9 px-4 py-2",
+        size === "sm" && "h-8 rounded-md px-3 text-xs",
+        size === "icon" && "size-9",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+// src/components/ui/scroll-area.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ScrollArea = forwardRef2(
+  function ScrollArea2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref,
+        className: cn("overflow-auto [scrollbar-gutter:stable]", className),
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/ui/skeleton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Skeleton({ className, style }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      style,
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/components/ui/copy-button.tsx
+import { useState as useState2 } from "react";
+import { Check, Copy } from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function CopyButton({ value, label, copiedLabel, className }) {
+  const [copied, setCopied] = useState2(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      "aria-label": copied ? copiedLabel : label,
+      className: cn("inline-flex items-center justify-center rounded-sm", className),
+      onClick: () => void handleCopy(),
+      children: copied ? /* @__PURE__ */ jsx4(Check, { className: "size-4" }) : /* @__PURE__ */ jsx4(Copy, { className: "size-4" })
+    }
+  );
+}
+
+// src/components/ui/markdown-viewer.tsx
+import ReactMarkdown from "react-markdown";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function MarkdownViewer({ children, className }) {
+  return /* @__PURE__ */ jsx5("div", { className: cn("prose prose-sm max-w-none dark:prose-invert", className), children: /* @__PURE__ */ jsx5(ReactMarkdown, { children }) });
+}
+
+// src/components/ui/ai-conversation.tsx
+import {
+  forwardRef as forwardRef3,
+  useCallback,
+  useImperativeHandle,
+  useRef as useRef2
+} from "react";
+import { ArrowDown } from "lucide-react";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var AIConversation = forwardRef3(
+  function AIConversation2({ className, children, stickToBottom = false, ...props }, ref) {
+    const scrollRef = useRef2(null);
+    const scrollToBottom = useCallback(() => {
+      const node = scrollRef.current;
+      if (!node) return;
+      node.scrollTop = node.scrollHeight;
+    }, []);
+    useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative flex min-h-0 flex-col", className), ...props, children: [
+      /* @__PURE__ */ jsx6(ScrollArea, { ref: scrollRef, className: "min-h-0 flex-1", children }),
+      stickToBottom ? /* @__PURE__ */ jsx6(AIConversationScrollButton, { onClick: scrollToBottom, className: "absolute bottom-4 left-1/2 -translate-x-1/2" }) : null
+    ] });
+  }
+);
+function AIConversationContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: cn("flex flex-col", className), ...props });
+}
+function AIConversationScrollButton({
+  className,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className, onClick, children: [
+    /* @__PURE__ */ jsx6(ArrowDown, { className: "mr-1 size-4" }),
+    "Scroll"
+  ] });
+}
+
+// src/components/ui/ai-prompt-input.tsx
+import { Loader2, Send, Square } from "lucide-react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function AIPromptInput({ className, children, onSubmit }) {
+  return /* @__PURE__ */ jsx7("form", { className: cn("flex flex-col", className), onSubmit, children });
+}
+function AIPromptInputTextarea({
+  value,
+  placeholder,
+  disabled,
+  className,
+  submitOnEnter,
+  onChange,
+  onSubmitShortcut
+}) {
+  return /* @__PURE__ */ jsx7(
+    "textarea",
+    {
+      value,
+      placeholder,
+      disabled,
+      rows: 3,
+      className: cn(
+        "w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      onChange,
+      onKeyDown: (event) => {
+        if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          onSubmitShortcut?.();
+        }
+      }
+    }
+  );
+}
+function AIPromptInputToolbar({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx7("div", { className: cn("flex items-center gap-2", className), children });
+}
+function AIPromptInputSubmit({
+  status,
+  sendLabel,
+  stopLabel,
+  disabled,
+  "aria-label": ariaLabel
+}) {
+  const isStreaming = status === "streaming";
+  return /* @__PURE__ */ jsx7(
+    Button,
+    {
+      type: "submit",
+      size: "icon",
+      "aria-label": ariaLabel ?? (isStreaming ? stopLabel : sendLabel),
+      disabled,
+      children: isStreaming ? /* @__PURE__ */ jsx7(Square, { className: "size-4" }) : status === "error" ? /* @__PURE__ */ jsx7(Loader2, { className: "size-4" }) : /* @__PURE__ */ jsx7(Send, { className: "size-4" })
+    }
+  );
+}
+
+// src/components/ui/command-palette.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+function CommandPalette({
+  open,
+  title,
+  description,
+  placeholder = "Search\u2026",
+  emptyText = "No results",
+  contentClassName,
+  listClassName,
+  groups,
+  onOpenChange,
+  onItemSelect
+}) {
+  const [query, setQuery] = useState3("");
+  useEffect2(() => {
+    if (!open) setQuery("");
+  }, [open]);
+  useEffect2(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onOpenChange(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+  const filteredGroups = useMemo2(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return groups;
+    return groups.map((group) => ({
+      ...group,
+      items: group.items.filter((item) => {
+        const haystack = [
+          typeof item.label === "string" ? item.label : "",
+          ...item.keywords ?? []
+        ].join(" ").toLowerCase();
+        return haystack.includes(normalized);
+      })
+    })).filter((group) => group.items.length > 0);
+  }, [groups, query]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-4 pt-[15vh]", children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title,
+      className: cn(
+        "w-full max-w-xl overflow-hidden rounded-xl border bg-background shadow-xl",
+        contentClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "border-b px-4 py-3", children: [
+          /* @__PURE__ */ jsx8("div", { className: "text-sm font-semibold", children: title }),
+          description ? /* @__PURE__ */ jsx8("div", { className: "text-xs text-muted-foreground", children: description }) : null,
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              autoFocus: true,
+              value: query,
+              placeholder,
+              className: "mt-3 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              onChange: (event) => setQuery(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx8("div", { className: cn("max-h-[420px] overflow-y-auto p-2", listClassName), children: filteredGroups.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyText }) : filteredGroups.map((group) => /* @__PURE__ */ jsxs2("div", { className: "mb-2", children: [
+          group.heading ? /* @__PURE__ */ jsx8("div", { className: "px-2 py-1 text-xs font-medium text-muted-foreground", children: group.heading }) : null,
+          group.items.map((item) => /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              disabled: item.disabled,
+              className: "flex w-full flex-col items-start rounded-md px-2 py-2 text-left text-sm hover:bg-accent disabled:opacity-50",
+              onClick: () => onItemSelect(item),
+              children: [
+                /* @__PURE__ */ jsx8("span", { children: item.label }),
+                item.description ? /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: item.description }) : null
+              ]
+            },
+            item.key
+          ))
+        ] }, group.key)) })
+      ]
+    }
+  ) });
+}
+
+// src/components/context-usage/indicator.tsx
+import { useState as useState4 } from "react";
+
+// src/components/context-usage/colors.ts
+var CATEGORY_COLORS = {
+  system_prompt: "#6366F1",
+  rules: "#8B5CF6",
+  output_format: "#A855F7",
+  skills: "#EC4899",
+  tool_definitions: "#F59E0B",
+  compact_summary: "#14B8A6",
+  conversation: "#3B82F6"
+};
+var FALLBACK_COLORS = ["#6366F1", "#8B5CF6", "#EC4899", "#F59E0B", "#14B8A6", "#3B82F6", "#10B981"];
+function getCategoryColor(id, index) {
+  return CATEGORY_COLORS[id] ?? FALLBACK_COLORS[index % FALLBACK_COLORS.length];
+}
+function getRingColor(percent) {
+  if (percent >= 90) return "#EF4444";
+  if (percent >= 70) return "#F59E0B";
+  return "#22C55E";
+}
+
+// src/components/context-usage/format.ts
+function formatTokenCount(tokens) {
+  if (tokens >= 1e6) {
+    return `${(tokens / 1e6).toFixed(1)}M`;
+  }
+  if (tokens >= 1e4) {
+    return `${Math.round(tokens / 1e3)}K`;
+  }
+  if (tokens >= 1e3) {
+    return `${(tokens / 1e3).toFixed(1)}K`;
+  }
+  return String(tokens);
+}
+function formatUsageSummary(used, budget) {
+  return `${formatTokenCount(used)} / ${formatTokenCount(budget)}`;
+}
+
+// src/components/context-usage/detail.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function ContextUsageDetail({ usage, labels, className }) {
+  const totalCategoryTokens = usage.categories.reduce((sum, item) => sum + item.tokens, 0);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "w-[280px] rounded-xl border border-[#D5DCE8] bg-white p-3 shadow-lg dark:border-white/10 dark:bg-[#111C2E]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx9("span", { className: "text-[12px] font-semibold text-[#111C30] dark:text-foreground", children: labels.title }),
+          /* @__PURE__ */ jsx9("span", { className: "text-[11px] tabular-nums text-[#7A828F] dark:text-[#AAB6CB]", children: formatUsageSummary(usage.used_tokens, usage.budget_tokens) })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "mt-2 flex h-2 overflow-hidden rounded-full bg-[#EEF2F8] dark:bg-white/10", children: usage.categories.map((category, index) => {
+          const width = totalCategoryTokens > 0 ? category.tokens / totalCategoryTokens * 100 : 0;
+          return /* @__PURE__ */ jsx9(
+            "div",
+            {
+              title: category.label,
+              style: {
+                width: `${width}%`,
+                backgroundColor: getCategoryColor(category.id, index)
+              }
+            },
+            category.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx9("ul", { className: "mt-3 max-h-48 space-y-1.5 overflow-y-auto", children: usage.categories.map((category, index) => /* @__PURE__ */ jsxs3("li", { className: "flex items-center justify-between gap-2 text-[11px]", children: [
+          /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-1.5 text-[#4B5565] dark:text-[#C5D0E0]", children: [
+            /* @__PURE__ */ jsx9(
+              "span",
+              {
+                className: "size-2 shrink-0 rounded-full",
+                style: { backgroundColor: getCategoryColor(category.id, index) }
+              }
+            ),
+            /* @__PURE__ */ jsx9("span", { className: "truncate", children: labels.categoryLabels[category.id] ?? category.label })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { className: "shrink-0 tabular-nums text-[#7A828F] dark:text-[#AAB6CB]", children: [
+            formatTokenCount(category.tokens),
+            " ",
+            labels.tokens
+          ] })
+        ] }, category.id)) })
+      ]
+    }
+  );
+}
+
+// src/components/context-usage/ring.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function ContextUsageRing({
+  percent,
+  size = 18,
+  strokeWidth = 2.5
+}) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const clamped = Math.min(100, Math.max(0, percent));
+  const offset = circumference - clamped / 100 * circumference;
+  const color = getRingColor(clamped);
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: "shrink-0 -rotate-90",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx10(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth,
+            className: "text-[#D5DCE8] dark:text-white/15"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeDasharray: circumference,
+            strokeDashoffset: offset,
+            className: "transition-[stroke-dashoffset,stroke] duration-300"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/context-usage/visibility.ts
+var CONTEXT_USAGE_AUTO_THRESHOLD_PERCENT = 50;
+function shouldShowContextUsage({
+  usage,
+  hasMessages,
+  isStreaming,
+  mode = "auto",
+  autoThresholdPercent = CONTEXT_USAGE_AUTO_THRESHOLD_PERCENT
+}) {
+  if (!usage || mode === "never") return false;
+  if (!hasMessages && !isStreaming) return false;
+  if (isStreaming) return true;
+  if (mode === "always") return true;
+  return usage.used_percent >= autoThresholdPercent;
+}
+
+// src/components/context-usage/indicator.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function ContextUsageIndicator({
+  usage,
+  hasMessages,
+  isStreaming,
+  labels,
+  className
+}) {
+  const [open, setOpen] = useState4(false);
+  if (!usage || !shouldShowContextUsage({ usage, hasMessages, isStreaming })) return null;
+  const percentLabel = labels.percent.replace("{percent}", String(usage.used_percent));
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn("relative flex items-center", className),
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: "flex items-center gap-1.5 rounded-md px-1 py-0.5 text-[11px] tabular-nums text-[#7A828F] outline-none dark:text-[#AAB6CB]",
+            tabIndex: 0,
+            role: "status",
+            "aria-label": percentLabel,
+            children: [
+              /* @__PURE__ */ jsx11(ContextUsageRing, { percent: usage.used_percent }),
+              /* @__PURE__ */ jsxs5("span", { className: "hidden sm:inline", children: [
+                usage.used_percent,
+                "%"
+              ] }),
+              /* @__PURE__ */ jsxs5("span", { className: "hidden md:inline", children: [
+                "\xB7 ",
+                formatTokenCount(usage.used_tokens)
+              ] })
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsx11("div", { className: "absolute bottom-full left-0 z-40 mb-2", children: /* @__PURE__ */ jsx11(ContextUsageDetail, { usage, labels }) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/composer/index.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var COMPOSER_FRAME_CLASS_NAME = "mx-auto w-full max-w-[900px] px-6";
+function getPromptStatus(status) {
+  if (status === "streaming" || status === "retrying") return "streaming";
+  if (status === "error") return "error";
+  return "ready";
+}
+function ClarifyChoiceOverlay({
+  clarify,
+  title,
+  onOption
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: "absolute right-6 bottom-full left-6 z-30 mb-3 rounded-[20px] border border-[#D5DCE8] bg-white px-5 py-4 shadow-[0_12px_32px_rgba(17,28,48,0.10)] dark:border-white/10 dark:bg-[#111C2E] dark:shadow-[0_12px_32px_rgba(0,0,0,0.28)]", children: [
+    /* @__PURE__ */ jsx12("div", { className: "text-[13px] leading-5 font-semibold text-[#7A828F] dark:text-[#AAB6CB]", children: title }),
+    /* @__PURE__ */ jsx12("div", { className: "mt-2 text-[15px] leading-6 font-semibold text-[#111C30] dark:text-foreground", children: clarify.question }),
+    /* @__PURE__ */ jsx12("div", { className: "mt-3 flex flex-wrap gap-2", children: clarify.options.map((option) => /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: "button",
+        onClick: () => void onOption(option, clarify.chainReplyTo),
+        className: "rounded-full border border-[#C5CEDD] bg-[#F7F9FC] px-3 py-1.5 text-[13px] font-medium text-[#111C30] transition-colors hover:border-[#AAB6CB] hover:bg-[#EEF3FA] dark:border-white/10 dark:bg-[#17243A] dark:text-foreground dark:hover:border-white/20 dark:hover:bg-[#1D2D49]",
+        children: option
+      },
+      option
+    )) })
+  ] });
+}
+function PromptInputForm({
+  input,
+  inputDisabled,
+  promptStatus,
+  contextUsage,
+  hasMessages,
+  contextUsageLabels,
+  labels,
+  onInputChange,
+  onSubmit
+}) {
+  const isStreaming = promptStatus === "streaming";
+  return /* @__PURE__ */ jsxs6(
+    AIPromptInput,
+    {
+      className: cn(
+        "rounded-2xl border border-[#D5DCE8] bg-white p-3 shadow-none transition-colors dark:border-white/10 dark:bg-[#111C2E]"
+      ),
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit();
+      },
+      children: [
+        /* @__PURE__ */ jsx12(
+          AIPromptInputTextarea,
+          {
+            autoResize: true,
+            submitOnEnter: true,
+            value: input,
+            placeholder: labels.placeholder,
+            disabled: inputDisabled,
+            onChange: (event) => onInputChange(event.target.value),
+            onSubmitShortcut: onSubmit,
+            className: "min-h-14 [scrollbar-gutter:stable] overflow-y-auto border-0 bg-transparent p-0 text-[15px] text-[#111C30] shadow-none placeholder:text-[#7B8798] focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-transparent dark:text-foreground dark:placeholder:text-[#6F7B90]"
+          }
+        ),
+        /* @__PURE__ */ jsxs6(AIPromptInputToolbar, { className: "justify-between pt-2", children: [
+          /* @__PURE__ */ jsx12("div", { className: "flex min-h-6 items-center", children: /* @__PURE__ */ jsx12(
+            ContextUsageIndicator,
+            {
+              usage: contextUsage ?? null,
+              hasMessages,
+              isStreaming,
+              labels: contextUsageLabels
+            }
+          ) }),
+          /* @__PURE__ */ jsx12(
+            AIPromptInputSubmit,
+            {
+              status: promptStatus,
+              sendLabel: labels.send,
+              stopLabel: labels.stop,
+              "aria-label": isStreaming ? labels.stop : labels.send,
+              disabled: inputDisabled || !input.trim() && !isStreaming
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function InitialQuestionSuggestions({ suggestions, onSelect }) {
+  return /* @__PURE__ */ jsx12("div", { className: "mt-3 flex flex-col items-start gap-2", children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect(suggestion),
+      className: "rounded-full border border-transparent bg-[#F3F5F8] px-3.5 py-2 text-[13px] text-[#4E5E79] transition-colors hover:bg-[#EAEFF5] dark:bg-[#1D2D49] dark:text-[#AAB6CB] dark:hover:bg-[#25375A]",
+      children: suggestion
+    },
+    index
+  )) });
+}
+function AgentComposerFrame({
+  className,
+  isNew,
+  showInitialQuestions,
+  initialQuestions,
+  clarify,
+  input,
+  inputDisabled,
+  promptStatus,
+  contextUsage,
+  hasMessages,
+  contextUsageLabels,
+  labels,
+  onInputChange,
+  onSubmit,
+  onInitialQuestion,
+  onClarifyOption
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn("relative z-20", className ?? COMPOSER_FRAME_CLASS_NAME, !isNew && "mt-4 mb-6"),
+      children: [
+        clarify ? /* @__PURE__ */ jsx12(
+          ClarifyChoiceOverlay,
+          {
+            clarify,
+            title: labels.clarifyTitle,
+            onOption: onClarifyOption
+          }
+        ) : null,
+        /* @__PURE__ */ jsx12(
+          PromptInputForm,
+          {
+            input,
+            inputDisabled,
+            promptStatus,
+            contextUsage,
+            hasMessages,
+            contextUsageLabels,
+            labels,
+            onInputChange,
+            onSubmit
+          }
+        ),
+        showInitialQuestions ? /* @__PURE__ */ jsx12(InitialQuestionSuggestions, { suggestions: initialQuestions, onSelect: onInitialQuestion }) : null
+      ]
+    }
+  );
+}
+function AgentComposer({
+  status,
+  contextUsage,
+  pendingClarify,
+  labels,
+  isNew,
+  initialQuestions = [],
+  className,
+  onSubmit,
+  onClarifyOption,
+  onStop
+}) {
+  const [input, setInput] = useState5("");
+  const promptStatus = getPromptStatus(status);
+  const activeClarify = status === "streaming" || status === "retrying" ? void 0 : pendingClarify;
+  const inputDisabled = Boolean(activeClarify);
+  const showInitialQuestions = initialQuestions.length > 0 && isNew && !activeClarify && status !== "streaming";
+  const handleSubmit = async () => {
+    if (status === "streaming" || status === "retrying") {
+      onStop();
+      return;
+    }
+    if (inputDisabled) return;
+    const content = input.trim();
+    if (!content) return;
+    setInput("");
+    await onSubmit(content);
+  };
+  const handleInitialQuestion = async (question) => {
+    if (!showInitialQuestions) return;
+    await onSubmit(question);
+  };
+  return /* @__PURE__ */ jsx12(
+    AgentComposerFrame,
+    {
+      className,
+      isNew,
+      showInitialQuestions,
+      initialQuestions,
+      clarify: activeClarify,
+      input,
+      inputDisabled,
+      promptStatus,
+      contextUsage,
+      hasMessages: !isNew,
+      contextUsageLabels: labels.contextUsage,
+      labels,
+      onInputChange: setInput,
+      onSubmit: () => void handleSubmit(),
+      onInitialQuestion: (question) => void handleInitialQuestion(question),
+      onClarifyOption
+    }
+  );
+}
+
+// src/components/conversation-view/helpers.ts
+function formatMessageTime(timestamp) {
+  return new Intl.DateTimeFormat(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  }).format(timestamp);
+}
+function prepareMessages(messages) {
+  const merged = [];
+  let buffer = [];
+  const flush = () => {
+    if (buffer.length === 0) return;
+    if (buffer.length === 1) {
+      merged.push(buffer[0]);
+    } else {
+      const last2 = buffer[buffer.length - 1];
+      const chain = buffer.flatMap((message) => message.chain ?? []);
+      const lastWithContent = [...buffer].reverse().find((message) => message.content.trim());
+      const content = lastWithContent?.content ?? "";
+      const lastClarifyCall = findLastClarifyCall(chain);
+      const isPendingClarify = lastClarifyCall && !isClarifyCallAnswered(chain, lastClarifyCall);
+      merged.push({
+        ...last2,
+        content,
+        chain,
+        type: isPendingClarify ? "clarify" : last2.type,
+        clarify: isPendingClarify ? last2.clarify : void 0
+      });
+    }
+    buffer = [];
+  };
+  for (const message of messages) {
+    if (message.role === "assistant") {
+      if (buffer.length > 0 && buffer[buffer.length - 1].chain?.some((node) => node.type === "user_reply")) {
+        flush();
+      }
+      buffer.push(message);
+    } else {
+      flush();
+      merged.push(message);
+    }
+  }
+  flush();
+  const last = merged[merged.length - 1];
+  if (last && last.role === "assistant" && !last.content.trim() && !last.chain?.length && !last.reasoning?.trim() && !last.toolCalls?.length) {
+    merged.pop();
+  }
+  return merged;
+}
+
+// src/components/conversation-view/process-block.tsx
+import { useState as useState6 } from "react";
+import { ChevronRight } from "lucide-react";
+
+// src/components/conversation-view/timeline.ts
+function readNodeTimestamp(node, fallback) {
+  if (!node.created_at) return fallback;
+  const timestamp = new Date(node.created_at).getTime();
+  return Number.isNaN(timestamp) ? fallback : timestamp;
+}
+function stringifyPayload(payload) {
+  if (!payload) return "";
+  return JSON.stringify(payload, null, 2);
+}
+function readToolPayloadSummary(payload) {
+  if (!payload) return "";
+  const candidates = [payload.summary, payload.message, payload.content, payload.result];
+  const value = candidates.find((item) => typeof item === "string");
+  return typeof value === "string" ? value : "";
+}
+function createToolStep(node, chain) {
+  const nodeIndex = chain.findIndex((item) => item.id === node.id);
+  const result = chain.slice(nodeIndex + 1).find(
+    (item) => item.type === "tool_result" && item.tool_name === node.tool_name && (!item.parent_id || item.parent_id === node.id)
+  );
+  return {
+    kind: "step",
+    id: node.id,
+    title: node.title || node.tool_name || "Tool call",
+    toolName: node.tool_name,
+    input: node.tool_input,
+    output: result?.tool_output
+  };
+}
+function createToolResultStep(node, chain) {
+  const nodeIndex = chain.findIndex((item) => item.id === node.id);
+  const pairedCall = chain.slice(0, nodeIndex).some(
+    (item) => item.type === "tool_call" && item.tool_name === node.tool_name && (!node.parent_id || node.parent_id === item.id)
+  );
+  if (pairedCall) return null;
+  return {
+    kind: "step",
+    id: node.id,
+    title: node.title || `${node.tool_name || "Tool"} result`,
+    toolName: node.tool_name,
+    output: node.tool_output
+  };
+}
+function createClarifyBlock(node, chain) {
+  const clarify = extractClarifyFromChain([node]);
+  if (!clarify?.question) return null;
+  const reply = chain.find((item) => item.type === "user_reply" && item.parent_id === node.id);
+  return {
+    kind: "clarify",
+    id: node.id,
+    question: clarify.question,
+    answered: Boolean(reply) || isClarifyCallAnswered(chain, node),
+    answer: reply?.content
+  };
+}
+function createToolCallBlock(node, chain) {
+  if (node.tool_name === "clarify") return createClarifyBlock(node, chain);
+  return createToolStep(node, chain);
+}
+function createNodeBlock(node, chain, messageCreatedAt) {
+  if ((node.type === "thinking" || node.type === "task_plan" || node.type === "task_update" || node.type === "goal") && node.content) {
+    return {
+      kind: "text",
+      id: node.id,
+      content: node.content,
+      createdAt: readNodeTimestamp(node, messageCreatedAt),
+      tone: "process"
+    };
+  }
+  if (node.type === "tool_call") return createToolCallBlock(node, chain);
+  if (node.type === "user_reply" && node.content) {
+    const parent = chain.find((item) => item.id === node.parent_id);
+    if (parent?.type === "tool_call" && parent.tool_name === "clarify") return null;
+    return { kind: "userReply", id: node.id, content: node.content };
+  }
+  if (node.type === "final" && node.content) {
+    return {
+      kind: "text",
+      id: node.id,
+      content: node.content,
+      createdAt: readNodeTimestamp(node, messageCreatedAt),
+      tone: "final"
+    };
+  }
+  if (node.type === "tool_result") return createToolResultStep(node, chain);
+  return null;
+}
+function createToolCallDeltas(toolCalls) {
+  return (toolCalls ?? []).map((tool) => ({
+    kind: "step",
+    id: tool.id || `tool-${tool.index}`,
+    title: tool.function.name,
+    toolName: tool.function.name,
+    input: tool.function.arguments ? { arguments: tool.function.arguments } : void 0
+  }));
+}
+function createAssistantBlocks(message) {
+  if (message.error) {
+    return [
+      {
+        kind: "error",
+        id: `${message.id}:error`,
+        content: message.content,
+        createdAt: message.createdAt
+      }
+    ];
+  }
+  const blocks = [];
+  const chain = message.chain ?? [];
+  for (const node of chain) {
+    const block = createNodeBlock(node, chain, message.createdAt);
+    if (block) blocks.push(block);
+  }
+  if (!chain.length && message.reasoning?.trim()) {
+    blocks.push({
+      kind: "text",
+      id: `${message.id}:reasoning`,
+      content: message.reasoning,
+      createdAt: message.createdAt,
+      tone: "process"
+    });
+  }
+  const hasStructuredToolNode = chain.some(
+    (node) => node.type === "tool_call" || node.type === "tool_result"
+  );
+  if (!hasStructuredToolNode) {
+    blocks.push(...createToolCallDeltas(message.toolCalls));
+  }
+  const hasFinalNode = chain.some((node) => node.type === "final" && node.content?.trim());
+  if (message.content.trim() && !hasFinalNode) {
+    blocks.push({
+      kind: "text",
+      id: `${message.id}:content`,
+      content: message.content,
+      createdAt: message.createdAt
+    });
+  }
+  return blocks;
+}
+function mergeProcessBlocks(blocks) {
+  const merged = [];
+  let processIndex = -1;
+  for (const block of blocks) {
+    if (block.kind === "prompt") {
+      processIndex = -1;
+      merged.push(block);
+      continue;
+    }
+    if (block.kind === "step") {
+      if (processIndex < 0) {
+        processIndex = merged.length;
+        merged.push({
+          kind: "text",
+          id: `process:${block.id}`,
+          content: "",
+          createdAt: 0,
+          tone: "process",
+          steps: [block]
+        });
+        continue;
+      }
+      const previous2 = merged[processIndex];
+      if (previous2.kind !== "text") continue;
+      merged[processIndex] = {
+        ...previous2,
+        steps: [...previous2.steps ?? [], block]
+      };
+      continue;
+    }
+    if (block.kind !== "text" || block.tone !== "process") {
+      merged.push(block);
+      continue;
+    }
+    if (processIndex < 0) {
+      processIndex = merged.length;
+      merged.push(block);
+      continue;
+    }
+    const previous = merged[processIndex];
+    if (previous.kind !== "text") continue;
+    merged[processIndex] = {
+      ...previous,
+      content: previous.content ? `${previous.content}
+
+${block.content}` : block.content,
+      createdAt: block.createdAt,
+      steps: previous.steps
+    };
+  }
+  return merged;
+}
+function buildTimelineBlocks(messages) {
+  const blocks = [];
+  for (const message of prepareMessages(messages)) {
+    if (message.role === "user") {
+      blocks.push({
+        kind: "prompt",
+        id: message.id,
+        content: message.content,
+        createdAt: message.createdAt
+      });
+      continue;
+    }
+    blocks.push(...createAssistantBlocks(message));
+  }
+  return mergeProcessBlocks(blocks);
+}
+function formatBlockPayload(payload) {
+  return stringifyPayload(payload);
+}
+function getStepSummary(block) {
+  return readToolPayloadSummary(block.output);
+}
+
+// src/components/conversation-view/process-block.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var DETAIL_CLASS_NAME = "mt-2 rounded-lg border border-[#D5DCE8] bg-white p-3 text-[11px] leading-4 text-[#4E5E79] dark:border-white/10 dark:bg-[#0E1726] dark:text-[#AAB6CB]";
+function useProcessOpen(autoOpen) {
+  const [manualOpen, setManualOpen] = useState6(null);
+  const [prevAutoOpen, setPrevAutoOpen] = useState6(autoOpen);
+  if (autoOpen !== prevAutoOpen) {
+    setPrevAutoOpen(autoOpen);
+    if (!autoOpen) {
+      setManualOpen(null);
+    }
+  }
+  const open = manualOpen ?? autoOpen;
+  const toggle = () => {
+    setManualOpen(!open);
+  };
+  return { open, toggle };
+}
+function DetailDisclosure({
+  label,
+  payload
+}) {
+  const value = formatBlockPayload(payload);
+  if (!value) return null;
+  return /* @__PURE__ */ jsxs7("details", { className: "group", children: [
+    /* @__PURE__ */ jsxs7("summary", { className: "mt-2 flex cursor-pointer list-none items-center gap-1 text-[12px] font-medium text-[#7A828F] dark:text-[#AAB6CB]", children: [
+      /* @__PURE__ */ jsx13("span", { children: label }),
+      /* @__PURE__ */ jsx13(ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-open:rotate-90" })
+    ] }),
+    /* @__PURE__ */ jsx13("pre", { className: DETAIL_CLASS_NAME, children: value })
+  ] });
+}
+function ToolStepBlock({
+  block,
+  labels
+}) {
+  const summary = getStepSummary(block);
+  const hasDetails = Boolean(summary || block.input || block.output);
+  const showToolName = Boolean(block.toolName && block.title !== block.toolName);
+  return /* @__PURE__ */ jsxs7("details", { className: "group", children: [
+    /* @__PURE__ */ jsxs7("summary", { className: "flex cursor-pointer list-none items-center gap-4", children: [
+      /* @__PURE__ */ jsx13("span", { className: "size-2 shrink-0 rounded-full bg-[#7A828F] dark:bg-[#6F7B90]" }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-[15px] leading-6 font-semibold text-[#111C30] dark:text-[#D8D8D8]", children: [
+        /* @__PURE__ */ jsx13("span", { children: block.title }),
+        showToolName ? /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-medium text-[#7A828F] dark:text-[#8B95A7]", children: block.toolName }) : null,
+        /* @__PURE__ */ jsx13(ChevronRight, { className: "size-4 shrink-0 text-[#7A828F] transition-transform group-open:rotate-90 dark:text-[#8B95A7]" })
+      ] })
+    ] }),
+    hasDetails ? /* @__PURE__ */ jsxs7("div", { className: "mt-2 ml-6", children: [
+      summary ? /* @__PURE__ */ jsx13("div", { className: "text-[14px] leading-6 font-medium text-[#4E5E79] dark:text-[#AAB6CB]", children: summary }) : null,
+      /* @__PURE__ */ jsx13(DetailDisclosure, { label: labels.toolInput, payload: block.input }),
+      /* @__PURE__ */ jsx13(DetailDisclosure, { label: labels.toolOutput, payload: block.output })
+    ] }) : null
+  ] });
+}
+function ProcessBlock({ block, autoOpen, labels }) {
+  const { content, steps } = block;
+  const { open, toggle } = useProcessOpen(autoOpen);
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-1.5 text-[14px] leading-6 font-semibold text-[#7A828F] dark:text-[#AAB6CB]",
+        "aria-expanded": open,
+        onClick: toggle,
+        children: [
+          /* @__PURE__ */ jsx13("span", { children: labels.thoughtProcess }),
+          /* @__PURE__ */ jsx13(ChevronRight, { className: cn("size-4 shrink-0 transition-transform", open && "rotate-90") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: cn(
+          "grid",
+          autoOpen ? "transition-none" : "transition-[grid-template-rows,opacity] duration-200 ease-out",
+          open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+        ),
+        children: /* @__PURE__ */ jsx13("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs7("div", { className: "mt-3 space-y-4", children: [
+          content ? /* @__PURE__ */ jsx13("div", { className: "text-[14px] leading-6 font-medium text-[#4E5E79] dark:text-[#AAB6CB]", children: /* @__PURE__ */ jsx13(
+            MarkdownViewer,
+            {
+              className: "text-inherit [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+              copyLabel: labels.copy,
+              copiedLabel: labels.copied,
+              children: content
+            }
+          ) }) : null,
+          steps?.map((step) => /* @__PURE__ */ jsx13(ToolStepBlock, { block: step, labels }, step.id))
+        ] }) })
+      }
+    )
+  ] });
+}
+
+// src/components/conversation-view/sections.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function MessageActionOverlay({
+  align,
+  timestamp,
+  labels,
+  value
+}) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute top-full right-0 left-0 z-10 flex min-h-6 w-full items-center gap-2 pt-1 text-[13px] leading-5 font-medium text-[#9AA1AD] opacity-0 transition-opacity group-hover/message:pointer-events-auto group-hover/message:opacity-100 dark:text-[#8B95A7]",
+        align === "right" ? "justify-end" : "justify-start"
+      ),
+      children: [
+        /* @__PURE__ */ jsx14("span", { children: formatMessageTime(timestamp) }),
+        /* @__PURE__ */ jsx14(
+          CopyButton,
+          {
+            value,
+            label: labels.copy,
+            copiedLabel: labels.copied,
+            className: "size-4 h-auto shrink-0 p-0 text-[#9AA1AD] hover:bg-transparent hover:text-[#111C30] dark:text-[#8B95A7] dark:hover:bg-transparent dark:hover:text-foreground"
+          }
+        )
+      ]
+    }
+  );
+}
+function PromptBlock({
+  block,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "group/message relative", children: [
+    /* @__PURE__ */ jsx14("div", { className: "rounded-[20px] border border-[#D5DCE8] bg-white px-5 py-4 text-[15px] leading-6 font-semibold text-[#111C30] dark:border-white/10 dark:bg-[#171F2E] dark:text-foreground", children: block.content }),
+    /* @__PURE__ */ jsx14(
+      MessageActionOverlay,
+      {
+        align: "right",
+        timestamp: block.createdAt,
+        labels,
+        value: block.content
+      }
+    )
+  ] });
+}
+function TextBlock({
+  block,
+  autoOpenProcess,
+  suppressActions,
+  labels
+}) {
+  const { content, tone } = block;
+  if (tone === "process") {
+    return /* @__PURE__ */ jsx14(ProcessBlock, { block, autoOpen: autoOpenProcess, labels });
+  }
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn(
+        "group/message relative text-[15px] leading-7 font-semibold text-[#111C30] dark:text-[#D8D8D8]",
+        tone === "final" && "pt-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsx14(
+          MarkdownViewer,
+          {
+            className: "text-inherit [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+            copyLabel: labels.copy,
+            copiedLabel: labels.copied,
+            children: content
+          }
+        ),
+        suppressActions ? null : /* @__PURE__ */ jsx14(
+          MessageActionOverlay,
+          {
+            align: "left",
+            timestamp: block.createdAt,
+            labels,
+            value: block.content
+          }
+        )
+      ]
+    }
+  );
+}
+function ClarifyRecordBlock({
+  question,
+  answer,
+  label,
+  answerLabel
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "rounded-[20px] border border-[#D5DCE8] bg-transparent px-5 py-4 dark:border-white/10", children: [
+    /* @__PURE__ */ jsx14("div", { className: "text-[13px] leading-5 font-semibold text-[#7A828F] dark:text-[#AAB6CB]", children: label }),
+    /* @__PURE__ */ jsx14("div", { className: "mt-2 text-[15px] leading-6 font-medium text-[#56657A] dark:text-[#AAB6CB]", children: question }),
+    answer ? /* @__PURE__ */ jsxs8("div", { className: "mt-4 border-l-2 border-[#7A8DA8] pl-3 text-[15px] leading-6 text-[#111C30] dark:border-[#AAB6CB] dark:text-[#D8D8D8]", children: [
+      /* @__PURE__ */ jsx14("span", { className: "font-semibold", children: answerLabel }),
+      /* @__PURE__ */ jsx14("span", { className: "ml-1 font-bold", children: answer })
+    ] }) : null
+  ] });
+}
+function UserReplyBlock({ content, label }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "text-[15px] leading-7 font-semibold text-[#111C30] dark:text-[#D8D8D8]", children: [
+    /* @__PURE__ */ jsx14("span", { children: label }),
+    /* @__PURE__ */ jsx14("span", { className: "ml-1", children: content })
+  ] });
+}
+function ErrorBlock({ content }) {
+  return /* @__PURE__ */ jsx14("div", { className: "rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-[13px] leading-6 font-medium text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200", children: content });
+}
+function TimelineBlockItem({
+  block,
+  autoOpenProcess = false,
+  suppressActions = false,
+  labels
+}) {
+  switch (block.kind) {
+    case "prompt":
+      return /* @__PURE__ */ jsx14(PromptBlock, { block, labels });
+    case "text":
+      return /* @__PURE__ */ jsx14(
+        TextBlock,
+        {
+          block,
+          autoOpenProcess,
+          suppressActions,
+          labels
+        }
+      );
+    case "step":
+      return null;
+    case "clarify":
+      return /* @__PURE__ */ jsx14(
+        ClarifyRecordBlock,
+        {
+          question: block.question,
+          answer: block.answer,
+          label: labels.clarifyQuestion,
+          answerLabel: labels.userSelected
+        }
+      );
+    case "userReply":
+      return /* @__PURE__ */ jsx14(UserReplyBlock, { content: block.content, label: labels.userSelected });
+    case "error":
+      return /* @__PURE__ */ jsx14(ErrorBlock, { content: block.content });
+    default:
+      return null;
+  }
+}
+function StreamingLoadingRow({ label }) {
+  return /* @__PURE__ */ jsx14("div", { className: "flex items-center text-[13px] leading-6 font-medium", children: /* @__PURE__ */ jsx14("span", { className: "agent-loading-shimmer", children: label }) });
+}
+
+// src/components/conversation-view/index.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var SCROLL_BUTTON_CLASS_NAME = "gap-1.5 border border-[#D5DCE8] bg-white px-3 text-[13px] font-medium text-[#111C30] shadow-sm ring-0 transition-colors hover:border-[#C5CEDD] hover:bg-[#F7F9FC] hover:text-[#111C30] dark:border-white/10 dark:bg-[#17243A] dark:text-foreground dark:hover:border-white/15 dark:hover:bg-[#1D2D49]";
+function isProcessBlock(block) {
+  return block.kind === "text" && block.tone === "process";
+}
+function isUserReplyBoundary(block) {
+  return block.kind === "prompt" || block.kind === "userReply";
+}
+function getActiveProcessBlockId(blocks) {
+  let processBlockId;
+  for (const block of blocks) {
+    if (block.kind === "prompt") processBlockId = void 0;
+    if (isProcessBlock(block)) processBlockId = block.id;
+  }
+  return processBlockId;
+}
+function getActiveReplyActionHiddenIds(blocks) {
+  const hiddenIds = /* @__PURE__ */ new Set();
+  let afterUserReplyBoundary = false;
+  for (const block of blocks) {
+    if (isUserReplyBoundary(block)) {
+      hiddenIds.clear();
+      afterUserReplyBoundary = true;
+      continue;
+    }
+    if (afterUserReplyBoundary && block.kind === "text") hiddenIds.add(block.id);
+  }
+  return hiddenIds;
+}
+function ConversationView({
+  session,
+  status,
+  awaitingUserReply = false,
+  labels,
+  conversationRef
+}) {
+  const isStreaming = status === "streaming" || status === "retrying";
+  const isReplyActive = isStreaming || awaitingUserReply;
+  const timelineBlocks = buildTimelineBlocks(session.messages);
+  const isNew = timelineBlocks.length === 0;
+  const activeProcessBlockId = isReplyActive ? getActiveProcessBlockId(timelineBlocks) : void 0;
+  const actionHiddenIds = isReplyActive ? getActiveReplyActionHiddenIds(timelineBlocks) : void 0;
+  return /* @__PURE__ */ jsxs9(
+    AIConversation,
+    {
+      ref: conversationRef,
+      stickToBottom: true,
+      className: cn(
+        "agent-conversation-stable min-h-0 text-[#111C30] select-text dark:text-[#D8D8D8] [&_*]:!select-text",
+        isNew ? "!h-auto flex-none pt-0 pb-3" : "flex-1 p-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9(
+          AIConversationContent,
+          {
+            className: cn("mx-auto flex w-full max-w-[900px] flex-col px-6", isNew ? "gap-2" : "gap-8"),
+            children: [
+              timelineBlocks.length ? timelineBlocks.map((block) => /* @__PURE__ */ jsx15(
+                TimelineBlockItem,
+                {
+                  block,
+                  autoOpenProcess: block.id === activeProcessBlockId,
+                  suppressActions: actionHiddenIds?.has(block.id),
+                  labels
+                },
+                `${block.kind}:${block.id}`
+              )) : null,
+              isStreaming ? /* @__PURE__ */ jsx15(StreamingLoadingRow, { label: labels.thinking }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx15(AIConversationScrollButton, { className: SCROLL_BUTTON_CLASS_NAME })
+      ]
+    }
+  );
+}
+
+// src/components/surface/index.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function AgentConversationSurface({
+  agent,
+  labels,
+  initialQuestions = [],
+  className
+}) {
+  const isNew = agent.currentSession.messages.length === 0;
+  const pendingClarify = getPendingClarify(agent.currentSession.messages);
+  const conversationRef = useRef3(null);
+  useEffect3(() => {
+    if (isNew) return;
+    requestAnimationFrame(() => conversationRef.current?.scrollToBottom());
+  }, [agent.currentSession.id, isNew]);
+  const handleSubmit = async (content) => {
+    requestAnimationFrame(() => conversationRef.current?.scrollToBottom());
+    await agent.sendMessage(content);
+  };
+  const handleClarifyOption = async (option, chainReplyTo) => {
+    requestAnimationFrame(() => conversationRef.current?.scrollToBottom());
+    await agent.sendClarifyOption(option, chainReplyTo);
+  };
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn(
+        "flex min-h-0 flex-1 flex-col overflow-hidden",
+        isNew && "pt-[20vh]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx16(
+          ConversationView,
+          {
+            conversationRef,
+            session: agent.currentSession,
+            status: agent.status,
+            awaitingUserReply: Boolean(pendingClarify),
+            labels: labels.conversation
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          AgentComposer,
+          {
+            status: agent.status,
+            contextUsage: agent.contextUsage,
+            pendingClarify,
+            isNew,
+            initialQuestions,
+            labels: labels.composer,
+            onSubmit: handleSubmit,
+            onClarifyOption: handleClarifyOption,
+            onStop: agent.stopStreaming
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/history/index.tsx
+import { useMemo as useMemo3, useState as useState7 } from "react";
+import useSWR from "swr";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var HISTORY_LIST_HEIGHT_CLASS_NAME = 'max-h-[420px] [&_[cmdk-item][data-selected="true"]:not(:hover)]:!bg-transparent [&_[cmdk-item][data-selected="true"]:not(:hover)]:!text-inherit [&_[cmdk-item]:hover]:!bg-accent [&_[cmdk-item]:hover]:!text-accent-foreground';
+var SKELETON_ITEM_COUNT = 6;
+function formatSessionTime(value) {
+  if (!value) return "-";
+  const timestamp = new Date(value).getTime();
+  if (Number.isNaN(timestamp)) return "-";
+  return new Intl.DateTimeFormat(void 0, {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  }).format(timestamp);
+}
+function createSessionDescription({
+  session,
+  labels
+}) {
+  return `${formatSessionTime(session.updated_at ?? session.created_at)} | ${labels.messageCount(
+    session.message_count ?? 0
+  )}`;
+}
+function getHistoryEmptyText({
+  error,
+  selectError,
+  labels
+}) {
+  if (selectError) return selectError;
+  if (error) return labels.loadError;
+  return labels.empty;
+}
+function getCommandValue(session) {
+  return [session.title, session.id, session.created_at, session.updated_at].filter(Boolean).join(" ");
+}
+function createHistoryGroups({
+  sessions,
+  busy,
+  labels
+}) {
+  return [
+    {
+      key: "recent",
+      heading: labels.recent,
+      items: sessions.map((session) => ({
+        key: session.id,
+        label: session.title?.trim() || labels.untitled,
+        description: createSessionDescription({ session, labels }),
+        keywords: [getCommandValue(session)],
+        disabled: busy
+      }))
+    }
+  ];
+}
+function createSkeletonGroups(heading) {
+  const titleWidths = ["60%", "75%", "50%", "65%", "55%", "70%"];
+  return [
+    {
+      key: "skeleton",
+      heading,
+      items: Array.from({ length: SKELETON_ITEM_COUNT }, (_, i) => ({
+        key: `skeleton-${i}`,
+        label: /* @__PURE__ */ jsx17(Skeleton, { className: "h-4 rounded", style: { width: titleWidths[i] } }),
+        description: /* @__PURE__ */ jsx17(Skeleton, { className: "h-3 w-[40%] rounded" }),
+        disabled: true
+      }))
+    }
+  ];
+}
+function AgentHistoryDialog({
+  client,
+  open,
+  busy,
+  onOpenChange,
+  onSelectSession,
+  labels
+}) {
+  const [selectError, setSelectError] = useState7(null);
+  const swrKey = open ? client.endpoints.sessions : null;
+  const { data, error, isLoading } = useSWR(swrKey, () => client.listSessions());
+  const sessions = useMemo3(() => data ?? [], [data]);
+  const showEmpty = Boolean(error || selectError || !isLoading && sessions.length === 0);
+  const emptyText = getHistoryEmptyText({ error, selectError, labels });
+  const groups = useMemo3(() => {
+    if (isLoading) return createSkeletonGroups(labels.recent);
+    if (showEmpty) return [];
+    return createHistoryGroups({ sessions, busy, labels });
+  }, [busy, isLoading, labels, sessions, showEmpty]);
+  const handleSelect = async (sessionId) => {
+    setSelectError(null);
+    try {
+      await onSelectSession(sessionId);
+      onOpenChange(false);
+    } catch (err) {
+      setSelectError(err instanceof Error ? err.message : labels.selectError);
+    }
+  };
+  return /* @__PURE__ */ jsx17(
+    CommandPalette,
+    {
+      open,
+      onOpenChange,
+      title: labels.title,
+      description: labels.description,
+      contentClassName: "max-w-lg",
+      groups,
+      placeholder: labels.search,
+      emptyText,
+      listClassName: HISTORY_LIST_HEIGHT_CLASS_NAME,
+      onItemSelect: (item) => void handleSelect(String(item.key))
+    }
+  );
+}
+export {
+  AgentComposer,
+  AgentConversationSurface,
+  AgentHistoryDialog,
+  ContextUsageIndicator,
+  ConversationView,
+  DEFAULT_AGENT_ENDPOINTS,
+  appendMessageChainNode,
+  appendMessageToolCalls,
+  appendSessionMessages,
+  appendUserReplyChainNode,
+  consumeAgentSseStream,
+  createAgentClient,
+  createAgentMessage,
+  createAgentSession,
+  createClarifyMessage,
+  extractClarifyFromChain,
+  findLastClarifyCall,
+  getContextUsageEndpoint,
+  getPendingClarify,
+  getSessionDetailEndpoint,
+  getSessionTitle,
+  isClarifyCallAnswered,
+  loadInitialChatSession,
+  parseSseEnvelope,
+  parseStreamEvent,
+  removeSessionMessage,
+  replaceSession,
+  resolveAgentEndpoints,
+  runAgentStream,
+  sortSessions,
+  streamEventToChainNode,
+  updateClarifyMessage,
+  updateMessageContent,
+  updateMessageReasoning,
+  updateMessageType,
+  upsertSession,
+  useAgentSession
+};