@tangle-network/sandbox-ui 0.2.1 → 0.3.3

package/dist/chunk-4F2GJRGU.js

@@ -0,0 +1,756 @@
+import {
+  useAutoScroll,
+  useRunCollapseState,
+  useRunGroups
+} from "./chunk-CNWVHQFY.js";
+import {
+  InlineThinkingItem,
+  RunGroup
+} from "./chunk-WUR652Y3.js";
+import {
+  ToolCallGroup,
+  ToolCallStep
+} from "./chunk-CJ2RYVZH.js";
+import {
+  getToolDisplayMetadata
+} from "./chunk-BX6AQMUS.js";
+import {
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/chat/user-message.tsx
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UserMessage = memo(({ message, parts }) => {
+  const textContent = parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
+  if (!textContent.trim()) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "max-w-[85%] rounded-[var(--radius-xl)] rounded-br-[var(--radius-sm)] border border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(98,114,243,0.16),rgba(98,114,243,0.06))] px-4 py-3 shadow-[var(--shadow-card)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--brand-cool)]", children: "You" }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(Markdown, { children: textContent }) })
+  ] }) });
+});
+UserMessage.displayName = "UserMessage";
+
+// src/chat/message-list.tsx
+import { memo as memo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MessageList = memo2(
+  ({
+    groups,
+    partMap,
+    isCollapsed,
+    onToggleCollapse,
+    branding,
+    renderToolDetail
+  }) => {
+    return /* @__PURE__ */ jsx2("div", { className: "space-y-3", children: groups.map((group) => {
+      if (group.type === "user") {
+        return /* @__PURE__ */ jsx2(
+          UserMessage,
+          {
+            message: group.message,
+            parts: partMap[group.message.id] ?? []
+          },
+          group.message.id
+        );
+      }
+      return /* @__PURE__ */ jsx2(
+        RunGroup,
+        {
+          run: group.run,
+          partMap,
+          collapsed: isCollapsed(group.run.id),
+          onToggle: () => onToggleCollapse(group.run.id),
+          branding,
+          renderToolDetail
+        },
+        group.run.id
+      );
+    }) });
+  }
+);
+MessageList.displayName = "MessageList";
+
+// src/chat/chat-message.tsx
+import { User, Bot } from "lucide-react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatMessage({
+  role,
+  content,
+  toolCalls,
+  isStreaming,
+  timestamp,
+  className
+}) {
+  const isUser = role === "user";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "flex gap-3 rounded-[var(--radius-xl)] border px-4 py-4 shadow-[var(--shadow-card)]",
+        isUser ? "border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(98,114,243,0.14),rgba(98,114,243,0.05))]" : "border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.02),transparent_32%),var(--bg-card)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: cn(
+              "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
+              isUser ? "border-[var(--border-accent)] bg-[var(--brand-cool)]/15 text-[var(--brand-cool)]" : "border-[var(--border-subtle)] bg-[var(--brand-glow)]/12 text-[var(--brand-glow)]"
+            ),
+            children: isUser ? /* @__PURE__ */ jsx3(User, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(Bot, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-semibold text-[var(--text-secondary)]", children: isUser ? "You" : "Agent" }),
+            timestamp && /* @__PURE__ */ jsx3("span", { className: "text-xs text-[var(--text-muted)]", children: formatTime(timestamp) })
+          ] }),
+          isUser ? /* @__PURE__ */ jsx3("div", { className: "text-sm leading-relaxed text-[var(--text-primary)] whitespace-pre-wrap", children: content }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            content && /* @__PURE__ */ jsx3(Markdown, { className: "tangle-prose", children: content }),
+            isStreaming && /* @__PURE__ */ jsx3("span", { className: "inline-block w-2 h-4 bg-[var(--brand-cool)] animate-pulse rounded-sm ml-0.5 align-text-bottom" })
+          ] }),
+          toolCalls
+        ] })
+      ]
+    }
+  );
+}
+function formatTime(date) {
+  return date.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+
+// src/chat/thinking-indicator.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ThinkingIndicator({ className }) {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    const interval = window.setInterval(() => setElapsed((current) => current + 1), 1e3);
+    return () => window.clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex gap-3 px-4 py-3", className), children: [
+    /* @__PURE__ */ jsx4("div", { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-glow)]/15 text-[var(--brand-glow)]", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-0.5", children: [
+      /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-current", style: { animationDelay: "0ms" } }),
+      /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-current", style: { animationDelay: "150ms" } }),
+      /* @__PURE__ */ jsx4("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-current", style: { animationDelay: "300ms" } })
+    ] }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4("span", { className: "text-sm text-[var(--text-muted)]", children: elapsed < 10 ? "Thinking..." : elapsed < 60 ? "Thinking deeply..." : "Still working..." }),
+      elapsed > 5 && /* @__PURE__ */ jsxs3("span", { className: "text-xs tabular-nums text-[var(--text-muted)]", children: [
+        elapsed,
+        "s"
+      ] })
+    ] })
+  ] });
+}
+
+// src/chat/agent-timeline.tsx
+import {
+  AlertTriangle,
+  CheckCircle2,
+  CircleDot,
+  FileText,
+  Info
+} from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var TONE_STYLES = {
+  default: {
+    dot: "bg-[var(--border-hover)]",
+    card: "border-[var(--border-subtle)] bg-[var(--bg-card)]",
+    text: "text-[var(--text-secondary)]",
+    icon: CircleDot
+  },
+  info: {
+    dot: "bg-sky-400",
+    card: "border-sky-500/20 bg-sky-500/5",
+    text: "text-sky-200",
+    icon: Info
+  },
+  success: {
+    dot: "bg-[var(--code-success)]",
+    card: "border-emerald-500/20 bg-emerald-500/5",
+    text: "text-emerald-200",
+    icon: CheckCircle2
+  },
+  warning: {
+    dot: "bg-amber-400",
+    card: "border-amber-500/20 bg-amber-500/5",
+    text: "text-amber-100",
+    icon: AlertTriangle
+  },
+  error: {
+    dot: "bg-[var(--code-error)]",
+    card: "border-red-500/20 bg-red-500/5",
+    text: "text-red-200",
+    icon: AlertTriangle
+  }
+};
+function AgentTimelineRow({ isLast, accentClassName, children }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-4", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "relative flex justify-center", children: [
+      !isLast && /* @__PURE__ */ jsx5("span", { className: "absolute top-4 bottom-[-1rem] left-1/2 w-px -translate-x-1/2 bg-[var(--border-subtle)]" }),
+      /* @__PURE__ */ jsx5("span", { className: cn("relative mt-2 h-2.5 w-2.5 rounded-full ring-4 ring-[var(--bg-root)]", accentClassName) })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "min-w-0 pb-4", children })
+  ] });
+}
+function StatusCard({ item }) {
+  const tone = TONE_STYLES[item.tone ?? "default"];
+  const Icon = tone.icon;
+  return /* @__PURE__ */ jsx5("div", { className: cn("rounded-[var(--radius-lg)] border px-4 py-3 shadow-[var(--shadow-card)]", tone.card), children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx5(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", tone.text) }),
+    /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx5("div", { className: cn("text-sm font-medium", tone.text), children: item.label }),
+      item.detail && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-sm text-[var(--text-muted)]", children: item.detail })
+    ] })
+  ] }) });
+}
+function ArtifactCard({ item }) {
+  const tone = TONE_STYLES[item.tone ?? "default"];
+  const content = /* @__PURE__ */ jsx5("div", { className: cn("rounded-[var(--radius-lg)] border px-4 py-3 shadow-[var(--shadow-card)]", tone.card), children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx5("div", { className: cn("mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-[var(--bg-elevated)] text-[var(--text-secondary)]"), children: item.icon ?? /* @__PURE__ */ jsx5(FileText, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx5("div", { className: "text-sm font-medium text-[var(--text-primary)]", children: item.title }),
+      item.description && /* @__PURE__ */ jsx5("div", { className: "mt-1 text-sm text-[var(--text-muted)]", children: item.description }),
+      item.meta && /* @__PURE__ */ jsx5("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: item.meta })
+    ] }),
+    item.action && /* @__PURE__ */ jsx5("div", { className: "shrink-0", children: item.action })
+  ] }) });
+  if (!item.onClick) return content;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: item.onClick,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          item.onClick?.();
+        }
+      },
+      className: "block w-full text-left transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+      children: content
+    }
+  );
+}
+function AgentTimeline({
+  items,
+  isThinking,
+  emptyState,
+  className
+}) {
+  if (items.length === 0 && !isThinking) {
+    return emptyState ? /* @__PURE__ */ jsx5("div", { className: cn("flex h-full items-center justify-center p-8", className), children: emptyState }) : null;
+  }
+  const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx5(ThinkingIndicator, {}) }] : items;
+  return /* @__PURE__ */ jsx5("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
+    const isLast = index === renderedItems.length - 1;
+    if (item.kind === "message") {
+      const accentClassName = item.role === "user" ? "bg-[var(--brand-cool)]" : "bg-[var(--brand-glow)]";
+      return /* @__PURE__ */ jsx5(AgentTimelineRow, { isLast, accentClassName, children: /* @__PURE__ */ jsxs4("div", { className: "rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-[var(--shadow-card)]", children: [
+        /* @__PURE__ */ jsx5(
+          ChatMessage,
+          {
+            role: item.role,
+            content: item.content,
+            toolCalls: item.toolCalls,
+            isStreaming: item.isStreaming,
+            timestamp: item.timestamp
+          }
+        ),
+        item.after && /* @__PURE__ */ jsx5("div", { className: "border-t border-[var(--border-subtle)] px-4 py-3", children: item.after })
+      ] }) }, item.id);
+    }
+    if (item.kind === "tool") {
+      return /* @__PURE__ */ jsx5(
+        AgentTimelineRow,
+        {
+          isLast,
+          accentClassName: "bg-[var(--brand-cool)]/80",
+          children: /* @__PURE__ */ jsx5(
+            ToolCallStep,
+            {
+              type: item.call.type,
+              label: item.call.label,
+              status: item.call.status,
+              detail: item.call.detail,
+              output: item.call.output,
+              duration: item.call.duration
+            }
+          )
+        },
+        item.id
+      );
+    }
+    if (item.kind === "tool_group") {
+      return /* @__PURE__ */ jsx5(
+        AgentTimelineRow,
+        {
+          isLast,
+          accentClassName: "bg-[var(--brand-cool)]/80",
+          children: /* @__PURE__ */ jsx5(ToolCallGroup, { title: item.title, children: item.calls.map((call) => /* @__PURE__ */ jsx5(
+            ToolCallStep,
+            {
+              type: call.type,
+              label: call.label,
+              status: call.status,
+              detail: call.detail,
+              output: call.output,
+              duration: call.duration
+            },
+            call.id
+          )) })
+        },
+        item.id
+      );
+    }
+    if (item.kind === "status") {
+      return /* @__PURE__ */ jsx5(
+        AgentTimelineRow,
+        {
+          isLast,
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx5(StatusCard, { item })
+        },
+        item.id
+      );
+    }
+    if (item.kind === "artifact") {
+      return /* @__PURE__ */ jsx5(
+        AgentTimelineRow,
+        {
+          isLast,
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx5(ArtifactCard, { item })
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ jsx5(
+      AgentTimelineRow,
+      {
+        isLast,
+        accentClassName: "bg-[var(--border-hover)]",
+        children: item.content
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/chat/chat-input.tsx
+import { useState as useState2, useRef, useCallback } from "react";
+import { Send, Square, Paperclip, X } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatInput({
+  onSend,
+  onCancel,
+  isStreaming,
+  disabled,
+  placeholder = "Ask the agent to inspect files, run commands, or explain results\u2026",
+  modelLabel,
+  onModelClick,
+  pendingFiles = [],
+  onRemoveFile,
+  onAttach,
+  className
+}) {
+  const [value, setValue] = useState2("");
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || isStreaming || disabled) return;
+    onSend(trimmed);
+    setValue("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, isStreaming, disabled, onSend]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  };
+  const handleAttachClick = () => {
+    fileInputRef.current?.click();
+  };
+  const handleFileChange = (e) => {
+    if (e.target.files?.length) {
+      onAttach?.(e.target.files);
+      e.target.value = "";
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: cn("px-4 py-3", className), children: [
+    pendingFiles.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mb-3 flex flex-wrap gap-2", children: pendingFiles.map((f) => /* @__PURE__ */ jsxs5(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs shadow-[var(--shadow-card)]",
+          "border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)]",
+          f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+          f.status !== "error" && "text-[var(--text-secondary)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "truncate max-w-[150px]", children: f.name }),
+          f.status === "uploading" && /* @__PURE__ */ jsx6("span", { className: "w-3 h-3 border-2 border-[var(--brand-cool)] border-t-transparent rounded-full animate-spin" }),
+          onRemoveFile && /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${f.name}`,
+              onClick: () => onRemoveFile(f.id),
+              className: "rounded p-0.5 transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+              children: /* @__PURE__ */ jsx6(X, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      f.id
+    )) }),
+    /* @__PURE__ */ jsx6("div", { className: "rounded-[calc(var(--radius-xl)+2px)] border border-[var(--border-subtle)] bg-[linear-gradient(135deg,rgba(98,114,243,0.08),rgba(255,255,255,0.02)_40%,transparent)] p-[1px] shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2 rounded-[var(--radius-xl)] border border-white/4 bg-[var(--bg-card)] px-3 py-3 transition-colors focus-within:border-[var(--border-accent)]", children: [
+      onAttach && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: handleAttachClick,
+            disabled: isStreaming,
+            "aria-label": "Attach files",
+            className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] p-2 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+            children: /* @__PURE__ */ jsx6(Paperclip, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            className: "hidden",
+            onChange: handleFileChange,
+            accept: ".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif,.txt,.json,.yaml,.yml"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx6(
+        "textarea",
+        {
+          ref: textareaRef,
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled: isStreaming || disabled,
+          rows: 1,
+          "aria-label": "Message input",
+          className: "min-h-[28px] max-h-[160px] flex-1 resize-none bg-transparent text-sm leading-relaxed text-[var(--text-primary)] placeholder:text-[var(--text-muted)] disabled:opacity-50 focus-visible:outline-none"
+        }
+      ),
+      isStreaming ? /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          "aria-label": "Stop response",
+          className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] bg-[var(--code-error)]/15 p-2 text-[var(--code-error)] transition-colors hover:bg-[var(--code-error)]/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--code-error)]/50",
+          children: /* @__PURE__ */ jsx6(Square, { className: "h-4 w-4" })
+        }
+      ) : /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: handleSend,
+          disabled: !value.trim() || disabled,
+          "aria-label": "Send message",
+          className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] bg-[var(--brand-cool)]/15 p-2 text-[var(--brand-cool)] transition-colors hover:bg-[var(--brand-cool)]/25 disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+          children: /* @__PURE__ */ jsx6(Send, { className: "h-4 w-4" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs5("div", { className: "mt-2 flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-2", children: modelLabel && /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: onModelClick,
+          "aria-label": `Select model, current model ${modelLabel}`,
+          className: "inline-flex items-center gap-1 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[var(--bg-section)]/55 px-2.5 py-1 text-xs text-[var(--text-muted)] transition-colors hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+          children: [
+            /* @__PURE__ */ jsx6("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--code-success)]" }),
+            modelLabel
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs5("span", { className: "text-xs text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx6("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px]", children: "Cmd" }),
+        /* @__PURE__ */ jsx6("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px] ml-0.5", children: "L" }),
+        /* @__PURE__ */ jsx6("span", { className: "ml-1", children: "to focus" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/chat/chat-container.tsx
+import {
+  memo as memo3,
+  useCallback as useCallback2,
+  useMemo,
+  useRef as useRef2
+} from "react";
+import { ArrowDown } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function formatUnknown(value) {
+  if (value == null) return void 0;
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function createdAtFromMessage(message) {
+  return message.time?.created ? new Date(message.time.created) : void 0;
+}
+function mapToolPartToTimelineType(part) {
+  const name = part.tool.toLowerCase().replace(/^tool:/, "");
+  switch (name) {
+    case "bash":
+    case "shell":
+    case "command":
+    case "execute":
+      return "bash";
+    case "write":
+    case "write_file":
+    case "create_file":
+      return "write";
+    case "read":
+    case "read_file":
+    case "cat":
+      return "read";
+    case "edit":
+    case "patch":
+    case "sed":
+      return "edit";
+    case "glob":
+    case "find":
+      return "glob";
+    case "ls":
+      return "list";
+    case "grep":
+    case "search":
+    case "rg":
+      return "grep";
+    case "inspect":
+      return "inspect";
+    default:
+      return "unknown";
+  }
+}
+function buildTimelineItems(messages, partMap, isStreaming) {
+  const items = [];
+  const lastAssistantMessage = [...messages].reverse().find((message) => message.role === "assistant");
+  const toToolCall = (part) => {
+    const meta = getToolDisplayMetadata(part);
+    const start = part.state.time?.start;
+    const end = part.state.time?.end;
+    return {
+      id: part.id,
+      type: mapToolPartToTimelineType(part),
+      label: meta.description ? `${meta.title}: ${meta.description}` : meta.title,
+      status: part.state.status === "completed" ? "success" : part.state.status === "error" ? "error" : "running",
+      detail: formatUnknown(part.state.input),
+      output: formatUnknown(part.state.output),
+      duration: start && end ? end - start : void 0
+    };
+  };
+  for (const message of messages) {
+    const parts = partMap[message.id] ?? [];
+    if (message.role === "user") {
+      const content = parts.filter((part) => part.type === "text").map((part) => part.text).join("\n").trim();
+      if (!content) continue;
+      items.push({
+        id: message.id,
+        kind: "message",
+        role: "user",
+        content,
+        timestamp: createdAtFromMessage(message)
+      });
+      continue;
+    }
+    const toolBuffer = [];
+    const flushToolBuffer = (index) => {
+      if (toolBuffer.length === 0) return;
+      if (toolBuffer.length === 1) {
+        items.push({
+          id: `${message.id}-tool-${toolBuffer[0].id}`,
+          kind: "tool",
+          call: toToolCall(toolBuffer[0])
+        });
+      } else {
+        items.push({
+          id: `${message.id}-tool-group-${index}`,
+          kind: "tool_group",
+          title: "Tool activity",
+          calls: toolBuffer.map((part) => toToolCall(part))
+        });
+      }
+      toolBuffer.length = 0;
+    };
+    parts.forEach((part, index) => {
+      const itemId = `${message.id}-${index}`;
+      if (part.type === "tool") {
+        toolBuffer.push(part);
+        return;
+      }
+      flushToolBuffer(index);
+      if (part.type === "text" && !part.synthetic && part.text.trim()) {
+        items.push({
+          id: itemId,
+          kind: "message",
+          role: "assistant",
+          content: part.text,
+          timestamp: createdAtFromMessage(message),
+          isStreaming: isStreaming && lastAssistantMessage?.id === message.id && index === parts.length - 1
+        });
+        return;
+      }
+      if (part.type === "reasoning") {
+        items.push({
+          id: itemId,
+          kind: "custom",
+          content: /* @__PURE__ */ jsx7(InlineThinkingItem, { part, defaultOpen: isStreaming && lastAssistantMessage?.id === message.id })
+        });
+        return;
+      }
+    });
+    flushToolBuffer(parts.length);
+  }
+  const showThinking = isStreaming && lastAssistantMessage != null && !items.some(
+    (item) => item.kind === "message" && item.role === "assistant" && item.id.startsWith(lastAssistantMessage.id)
+  );
+  return { items, showThinking };
+}
+var ChatContainer = memo3(
+  ({
+    messages,
+    partMap,
+    isStreaming,
+    onSend,
+    onCancel,
+    branding,
+    placeholder = "Type a message...",
+    className,
+    hideInput = false,
+    renderToolDetail,
+    presentation = "runs",
+    modelLabel,
+    onModelClick,
+    pendingFiles,
+    onRemoveFile,
+    onAttach,
+    disabled = false
+  }) => {
+    const scrollRef = useRef2(null);
+    const groups = useRunGroups({ messages, partMap, isStreaming });
+    const runs = groups.filter((g) => g.type === "run").map((g) => g.run);
+    const { isCollapsed, toggleCollapse } = useRunCollapseState(runs);
+    const { isAtBottom, scrollToBottom } = useAutoScroll(scrollRef, [
+      messages,
+      partMap,
+      isStreaming
+    ]);
+    const timeline = useMemo(
+      () => buildTimelineItems(messages, partMap, isStreaming),
+      [messages, partMap, isStreaming]
+    );
+    const handleSend = useCallback2(
+      (text) => {
+        onSend?.(text);
+      },
+      [onSend]
+    );
+    return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col h-full", className), children: [
+      /* @__PURE__ */ jsx7(
+        "div",
+        {
+          ref: scrollRef,
+          className: "flex-1 overflow-y-auto px-4 py-4 [scrollbar-gutter:stable]",
+          children: messages.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs6("div", { className: "max-w-md rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-6 py-8 text-center shadow-[var(--shadow-card)]", children: [
+            /* @__PURE__ */ jsx7("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Start the filing workflow" }),
+            /* @__PURE__ */ jsx7("div", { className: "mt-2 text-sm leading-relaxed text-[var(--text-muted)]", children: "Ask the agent to analyze documents, generate forms, explain a calculation, or review the current filing package." })
+          ] }) }) : presentation === "timeline" ? /* @__PURE__ */ jsx7(AgentTimeline, { items: timeline.items, isThinking: timeline.showThinking }) : /* @__PURE__ */ jsx7("div", { className: "mx-auto flex w-full max-w-5xl flex-col gap-3", children: /* @__PURE__ */ jsx7(
+            MessageList,
+            {
+              groups,
+              partMap,
+              isCollapsed,
+              onToggleCollapse: toggleCollapse,
+              branding,
+              renderToolDetail
+            }
+          ) })
+        }
+      ),
+      !isAtBottom && /* @__PURE__ */ jsx7("div", { className: "flex justify-center -mt-10 relative z-10", children: /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          onClick: scrollToBottom,
+          className: cn(
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
+            "border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-[var(--shadow-card)]",
+            "text-xs text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-hover)]",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60"
+          ),
+          children: [
+            /* @__PURE__ */ jsx7(ArrowDown, { className: "w-3 h-3" }),
+            "Scroll to bottom"
+          ]
+        }
+      ) }),
+      !hideInput && onSend && /* @__PURE__ */ jsx7(
+        ChatInput,
+        {
+          onSend: handleSend,
+          onCancel,
+          isStreaming,
+          placeholder,
+          modelLabel,
+          onModelClick,
+          pendingFiles,
+          onRemoveFile,
+          onAttach,
+          disabled,
+          className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)]"
+        }
+      )
+    ] });
+  }
+);
+ChatContainer.displayName = "ChatContainer";
+
+export {
+  UserMessage,
+  MessageList,
+  ChatMessage,
+  ThinkingIndicator,
+  AgentTimeline,
+  ChatInput,
+  ChatContainer
+};