@tangle-network/sandbox-ui 0.3.7 → 0.3.11

package/dist/active-sessions-store-CeOmXgv5.d.ts

@@ -0,0 +1,85 @@
+import * as nanostores from 'nanostores';
+
+type SessionProjectKey = string | number;
+type ActiveSessionStatus = "idle" | "running" | "attention-needed" | "error";
+type ActiveSessionReconnectState = "idle" | "reconnecting" | "failed";
+type ActiveSessionConnectionState = "disconnected" | "connecting" | "connected" | "reconnecting" | "error";
+type ActiveSessionTransportMode = "websocket" | "sse" | "polling" | "custom";
+interface ActiveSessionRecord {
+    sessionId: string;
+    projectId: SessionProjectKey | null;
+    projectLabel?: string;
+    title?: string;
+    href?: string;
+    registeredAt: number;
+    lastActivityAt: number;
+    lastEventAt: number | null;
+    status: ActiveSessionStatus;
+    isRunning: boolean;
+    isForeground: boolean;
+    needsAttention: boolean;
+    connectionState: ActiveSessionConnectionState;
+    reconnectState: ActiveSessionReconnectState;
+    transportMode: ActiveSessionTransportMode | null;
+    lastError: string | null;
+    metadata?: Record<string, unknown>;
+}
+interface ActiveSessionsState {
+    sessions: Record<string, ActiveSessionRecord>;
+    lastUpdatedAt: number;
+}
+interface RegisterActiveSessionOptions {
+    sessionId: string;
+    projectId?: SessionProjectKey | null;
+    projectLabel?: string;
+    title?: string;
+    href?: string;
+    metadata?: Record<string, unknown>;
+}
+interface ActiveSessionConnectionOptions {
+    connectionState: ActiveSessionConnectionState;
+    reconnectState?: ActiveSessionReconnectState;
+    transportMode?: ActiveSessionTransportMode | null;
+    lastError?: string | null;
+    lastEventAt?: number | null;
+}
+interface ActiveSessionActivityOptions {
+    lastEventAt?: number | null;
+}
+interface ActiveProjectActivity {
+    projectId: SessionProjectKey;
+    projectLabel?: string;
+    activeSessionCount: number;
+    runningSessionIds: string[];
+    lastActivityAt: number;
+}
+declare const activeSessionsAtom: nanostores.PreinitializedWritableAtom<ActiveSessionsState> & object;
+declare function registerActiveSession(options: RegisterActiveSessionOptions): void;
+declare function unregisterActiveSession(sessionId: string): void;
+declare function setForegroundActiveSession(sessionId: string | null): void;
+declare function updateActiveSessionMeta(sessionId: string, meta: Partial<Pick<ActiveSessionRecord, "title" | "href" | "projectId" | "projectLabel" | "metadata">>): void;
+declare function setActiveSessionConnection(sessionId: string, options: ActiveSessionConnectionOptions): void;
+declare function setActiveSessionRunning(sessionId: string, isRunning: boolean, options?: ActiveSessionActivityOptions): void;
+declare function setActiveSessionAttention(sessionId: string, needsAttention: boolean, options?: ActiveSessionActivityOptions): void;
+declare function setActiveSessionError(sessionId: string, error: string | null): void;
+declare function bumpActiveSessionActivity(sessionId: string, options?: ActiveSessionActivityOptions): void;
+declare function resetActiveSessions(): void;
+declare function getAllActiveSessions(state: ActiveSessionsState): ActiveSessionRecord[];
+declare function getActiveSession(state: ActiveSessionsState, sessionId: string): ActiveSessionRecord | null;
+declare function getSessionsForProject(state: ActiveSessionsState, projectId: SessionProjectKey): ActiveSessionRecord[];
+declare function getSessionsForNavbar(state: ActiveSessionsState, projectId?: SessionProjectKey | null): ActiveSessionRecord[];
+declare function getSessionsByActivity(state: ActiveSessionsState): ActiveSessionRecord[];
+declare function getTotalRunningSessionCount(state: ActiveSessionsState): number;
+declare function hasBackgroundRunningSessions(state: ActiveSessionsState): boolean;
+declare function getAllProjectActivity(state: ActiveSessionsState): ActiveProjectActivity[];
+declare function useActiveSessionsState(): ActiveSessionsState;
+declare function useActiveSessions(): ActiveSessionRecord[];
+declare function useActiveSession(sessionId: string | null): ActiveSessionRecord | null;
+declare function useProjectSessions(projectId: SessionProjectKey | null): ActiveSessionRecord[];
+declare function useNavbarSessions(projectId?: SessionProjectKey | null): ActiveSessionRecord[];
+declare function useSessionsByActivity(): ActiveSessionRecord[];
+declare function useProjectActivity(): ActiveProjectActivity[];
+declare function useTotalRunningSessions(): number;
+declare function useHasBackgroundRunningSessions(): boolean;
+
+export { type ActiveProjectActivity as A, updateActiveSessionMeta as B, useActiveSession as C, useActiveSessions as D, useActiveSessionsState as E, useHasBackgroundRunningSessions as F, useNavbarSessions as G, useProjectActivity as H, useProjectSessions as I, useSessionsByActivity as J, useTotalRunningSessions as K, type RegisterActiveSessionOptions as R, type SessionProjectKey as S, type ActiveSessionActivityOptions as a, type ActiveSessionConnectionOptions as b, type ActiveSessionConnectionState as c, type ActiveSessionReconnectState as d, type ActiveSessionRecord as e, type ActiveSessionStatus as f, type ActiveSessionTransportMode as g, type ActiveSessionsState as h, activeSessionsAtom as i, bumpActiveSessionActivity as j, getActiveSession as k, getAllActiveSessions as l, getAllProjectActivity as m, getSessionsByActivity as n, getSessionsForNavbar as o, getSessionsForProject as p, getTotalRunningSessionCount as q, hasBackgroundRunningSessions as r, registerActiveSession as s, resetActiveSessions as t, setActiveSessionAttention as u, setActiveSessionConnection as v, setActiveSessionError as w, setActiveSessionRunning as x, setForegroundActiveSession as y, unregisterActiveSession as z };

package/dist/artifact-pane-Bh45Ssco.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ArtifactPaneProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    meta?: ReactNode;
+    headerActions?: ReactNode;
+    tabs?: ReactNode;
+    toolbar?: ReactNode;
+    footer?: ReactNode;
+    emptyState?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * ArtifactPane — shared frame for files, previews, documents, inspectors, and
+ * other artifact-like surfaces inside sandbox applications.
+ */
+declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
+
+export { type ArtifactPaneProps as A, ArtifactPane as a };

package/dist/{chat-container-B34uj-J1.d.ts → chat-container-Dn1jWtWo.d.ts}

@@ -1,8 +1,10 @@
 import * as React from 'react';
+import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
+import { S as SessionMessage, a as SessionPart, b as ToolPart } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
 import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
+import { R as Run } from './run-CtFZ6s-D.js';
 import { OpenUIAction } from './openui.js';
 
 /**
@@ -62,11 +64,21 @@ interface ChatContainerProps {
     onOpenUIAction?: (action: OpenUIAction) => void;
     /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
     enableOpenUI?: boolean;
+    /** Optional actions rendered beside each grouped assistant run. */
+    renderRunActions?: (run: Run) => ReactNode;
+    /** Optional actions rendered below each user message bubble. */
+    renderUserMessageActions?: (message: SessionMessage, parts: SessionPart[]) => ReactNode;
+    /** Optional actions rendered beside individual tool items. */
+    renderToolActions?: (part: ToolPart, options: {
+        run: Run;
+        messageId: string;
+        partIndex: number;
+    }) => ReactNode;
 }
 /**
  * Full chat container: message list + auto-scroll + input area.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, onOpenUIAction, enableOpenUI, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
 
-export { ChatContainer as C, type PendingFile as P, ChatInput as a, type ChatInputProps as b, type ChatContainerProps as c };
+export { ChatContainer as C, type PendingFile as P, type ChatContainerProps as a, ChatInput as b, type ChatInputProps as c };

package/dist/chat.d.ts

@@ -1,9 +1,9 @@
-export { C as ChatContainer, c as ChatContainerProps, a as ChatInput, b as ChatInputProps, P as PendingFile } from './chat-container-B34uj-J1.js';
+export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-Dn1jWtWo.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { G as GroupedMessage } from './run-CtFZ6s-D.js';
-import { a as SessionPart, S as SessionMessage } from './parts-CyGkM6Fp.js';
+import { a as SessionPart, S as SessionMessage, b as ToolPart } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
 import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
 import { T as ToolCallData } from './tool-call-feed-D5Ume-Pt.js';
@@ -30,22 +30,34 @@ interface MessageListProps {
     onToggleCollapse: (runId: string) => void;
     branding?: AgentBranding;
     renderToolDetail?: CustomToolRenderer;
+    renderRunActions?: (group: Extract<GroupedMessage, {
+        type: "run";
+    }>["run"]) => ReactNode;
+    renderUserMessageActions?: (message: SessionMessage, parts: SessionPart[]) => ReactNode;
+    renderToolActions?: (part: ToolPart, options: {
+        run: Extract<GroupedMessage, {
+            type: "run";
+        }>["run"];
+        messageId: string;
+        partIndex: number;
+    }) => ReactNode;
 }
 /**
  * Maps GroupedMessage[] to UserMessage and RunGroup components.
  * This is the main render list for the chat view.
  */
-declare const MessageList: React.MemoExoticComponent<({ groups, partMap, isCollapsed, onToggleCollapse, branding, renderToolDetail, }: MessageListProps) => react_jsx_runtime.JSX.Element>;
+declare const MessageList: React.MemoExoticComponent<({ groups, partMap, isCollapsed, onToggleCollapse, branding, renderToolDetail, renderRunActions, renderUserMessageActions, renderToolActions, }: MessageListProps) => react_jsx_runtime.JSX.Element>;
 
 interface UserMessageProps {
     message: SessionMessage;
     parts: SessionPart[];
+    actions?: ReactNode;
 }
 /**
  * Simple user message bubble.
  * Renders text parts from the user's message.
  */
-declare const UserMessage: React.MemoExoticComponent<({ message, parts }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
+declare const UserMessage: React.MemoExoticComponent<({ message, parts, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
 
 interface ThinkingIndicatorProps {
     className?: string;

package/dist/chat.js

@@ -6,9 +6,9 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-PXRPYAMM.js";
+} from "./chunk-6H3EFUUC.js";
 import "./chunk-CNWVHQFY.js";
-import "./chunk-WUR652Y3.js";
+import "./chunk-72UEKFZ2.js";
 import "./chunk-HRMUF35V.js";
 import "./chunk-CJ2RYVZH.js";
 import "./chunk-BX6AQMUS.js";

package/dist/{chunk-PXRPYAMM.js → chunk-6H3EFUUC.js}

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-WUR652Y3.js";
+} from "./chunk-72UEKFZ2.js";
 import {
   ToolCallGroup,
   ToolCallStep
@@ -27,12 +27,15 @@ import {
 // src/chat/user-message.tsx
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var UserMessage = memo(({ message, parts }) => {
+var UserMessage = memo(({ message, parts, actions }) => {
   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 }) })
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[82%] flex-col items-end gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[calc(var(--radius-xl)+2px)] rounded-br-[var(--radius-sm)] border border-[var(--border-accent)] bg-[radial-gradient(circle_at_top_right,rgba(96,165,250,0.18),transparent_45%),linear-gradient(135deg,rgba(98,114,243,0.18),rgba(98,114,243,0.06)_55%,rgba(255,255,255,0.02))] px-4 py-3.5 shadow-[var(--shadow-accent)] backdrop-blur-sm", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--brand-cool)]", children: "You" }),
+      /* @__PURE__ */ jsx("div", { className: "text-[15px] leading-7 text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(Markdown, { className: "tangle-prose", children: textContent }) })
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-[var(--text-muted)]", children: actions }) : null
   ] }) });
 });
 UserMessage.displayName = "UserMessage";
@@ -47,15 +50,20 @@ var MessageList = memo2(
     isCollapsed,
     onToggleCollapse,
     branding,
-    renderToolDetail
+    renderToolDetail,
+    renderRunActions,
+    renderUserMessageActions,
+    renderToolActions
   }) => {
     return /* @__PURE__ */ jsx2("div", { className: "space-y-3", children: groups.map((group) => {
       if (group.type === "user") {
+        const messageParts = partMap[group.message.id] ?? [];
         return /* @__PURE__ */ jsx2(
           UserMessage,
           {
             message: group.message,
-            parts: partMap[group.message.id] ?? []
+            parts: messageParts,
+            actions: renderUserMessageActions?.(group.message, messageParts)
           },
           group.message.id
         );
@@ -68,7 +76,9 @@ var MessageList = memo2(
           collapsed: isCollapsed(group.run.id),
           onToggle: () => onToggleCollapse(group.run.id),
           branding,
-          renderToolDetail
+          renderToolDetail,
+          headerActions: renderRunActions?.(group.run),
+          renderToolActions
         },
         group.run.id
       );
@@ -93,8 +103,8 @@ function ChatMessage({
     "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)]",
+        "flex gap-4 rounded-[calc(var(--radius-xl)+2px)] border px-4 py-4 shadow-[var(--shadow-card)] backdrop-blur-sm",
+        isUser ? "border-[var(--border-accent)] bg-[radial-gradient(circle_at_top_right,rgba(96,165,250,0.18),transparent_42%),linear-gradient(135deg,rgba(98,114,243,0.18),rgba(98,114,243,0.06)_55%,rgba(255,255,255,0.02))]" : "border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.03),transparent_32%),var(--bg-card)]",
         className
       ),
       children: [
@@ -102,20 +112,20 @@ function ChatMessage({
           "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)]"
+              "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-[calc(var(--radius-md)+2px)] border shadow-[var(--shadow-accent)]",
+              isUser ? "border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(82,164,255,0.24),rgba(82,164,255,0.08))] text-[var(--brand-cool)]" : "border-[var(--border-subtle)] bg-[linear-gradient(135deg,rgba(77,203,255,0.24),rgba(77,203,255,0.08))] 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: "min-w-0 flex-1 space-y-2", 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) })
+            /* @__PURE__ */ jsx3("span", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-secondary)]", children: isUser ? "You" : "Agent" }),
+            timestamp && /* @__PURE__ */ jsx3("span", { className: "text-[11px] 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" })
+          isUser ? /* @__PURE__ */ jsx3("div", { className: "whitespace-pre-wrap text-[15px] leading-7 text-[var(--text-primary)]", children: content }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            content && /* @__PURE__ */ jsx3(Markdown, { className: "tangle-prose text-[15px] leading-7", children: content }),
+            isStreaming && /* @__PURE__ */ jsx3("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })
           ] }),
           toolCalls
         ] })
@@ -405,8 +415,8 @@ function ChatInput({
       "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)]",
+          "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs shadow-[var(--shadow-card)] backdrop-blur-sm",
+          "border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))]",
           f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
           f.status !== "error" && "text-[var(--text-secondary)]"
         ),
@@ -427,65 +437,71 @@ function ChatInput({
       },
       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("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.16),transparent_42%),linear-gradient(135deg,rgba(98,114,243,0.12),rgba(255,255,255,0.03)_42%,transparent)] p-[1px] shadow-[var(--shadow-accent)]", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-[26px] border border-white/5 bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent_35%),var(--bg-card)] px-3 py-3.5 transition-colors focus-within:border-[var(--border-accent)]", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center justify-between gap-3 px-1", children: [
+        /* @__PURE__ */ jsx6("div", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Agent Command Deck" }),
+        /* @__PURE__ */ jsx6("div", { className: "text-[11px] text-[var(--text-muted)]", children: isStreaming ? "Streaming response" : "Ready for next instruction" })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", 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)] border border-transparent p-2 text-[var(--text-muted)] transition-colors hover:border-[var(--border-subtle)] 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-[36px] max-h-[160px] flex-1 resize-none bg-transparent text-[15px] leading-7 text-[var(--text-primary)] placeholder:text-[var(--text-muted)] disabled:opacity-50 focus-visible:outline-none"
+          }
+        ),
+        isStreaming ? /* @__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" })
+            onClick: onCancel,
+            "aria-label": "Stop response",
+            className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--code-error)]/20 bg-[var(--code-error)]/14 p-2.5 text-[var(--code-error)] transition-colors hover:bg-[var(--code-error)]/24 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(
-          "input",
+        ) : /* @__PURE__ */ jsx6(
+          "button",
           {
-            ref: fileInputRef,
-            type: "file",
-            multiple: true,
-            className: "hidden",
-            onChange: handleFileChange,
-            accept: ".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif,.txt,.json,.yaml,.yml"
+            type: "button",
+            onClick: handleSend,
+            disabled: !value.trim() || disabled,
+            "aria-label": "Send message",
+            className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--border-accent)] bg-[linear-gradient(135deg,rgba(82,164,255,0.24),rgba(82,164,255,0.08))] p-2.5 text-[var(--brand-cool)] transition-colors hover:translate-y-[-1px] hover:bg-[linear-gradient(135deg,rgba(82,164,255,0.28),rgba(82,164,255,0.12))] 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__ */ 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(
@@ -494,7 +510,7 @@ function ChatInput({
           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",
+          className: "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] 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
@@ -762,7 +778,10 @@ var ChatContainer = memo3(
     onAttach,
     disabled = false,
     onOpenUIAction,
-    enableOpenUI = true
+    enableOpenUI = true,
+    renderRunActions,
+    renderUserMessageActions,
+    renderToolActions
   }) => {
     const scrollRef = useRef2(null);
     const groups = useRunGroups({ messages, partMap, isStreaming });
@@ -800,7 +819,10 @@ var ChatContainer = memo3(
               isCollapsed,
               onToggleCollapse: toggleCollapse,
               branding,
-              renderToolDetail
+              renderToolDetail,
+              renderRunActions,
+              renderUserMessageActions,
+              renderToolActions
             }
           ) })
         }