@dbx-tools/ui-mastra 0.6.218 → 0.6.220

package/src/react/thread-tabs.tsx

@@ -9,7 +9,7 @@ import {
   cn,
 } from "@dbx-tools/ui-appkit/react";
 import { HistoryIcon, Loader2Icon, PlusIcon, XIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { ThreadSidebar, type ThreadSidebarProps } from "./thread-sidebar.tsx";
 import { threadTitle } from "../support/thread-labels.ts";
 
@@ -36,8 +36,90 @@ export interface ThreadTabsProps extends Omit<ThreadSidebarProps, "onHide" | "si
    * affordance hidden when omitted.
    */
   onCloseTab?: (threadId: string) => void;
+  /** Host actions appended after New and History. */
+  actions?: ReactNode;
+  /** Render New/History/actions in this row. Defaults to true. */
+  showActions?: boolean;
+  /** Replacement for the default plus icon. */
+  newIcon?: ReactNode;
+  /** Replacement for the default history icon. */
+  historyIcon?: ReactNode;
 }
 
+/** New/history controls reused by the tab strip and persistent assistant header. */
+export interface ThreadActionsProps extends Omit<
+  ThreadSidebarProps,
+  "onHide" | "side" | "className"
+> {
+  actions?: ReactNode;
+  newIcon?: ReactNode;
+  historyIcon?: ReactNode;
+}
+
+/** Render New and History controls, plus optional host actions, as one group. */
+export const ThreadActions = ({ actions, newIcon, historyIcon, ...list }: ThreadActionsProps) => {
+  const { onSelect, onNew } = list;
+  const [historyOpen, setHistoryOpen] = useState(false);
+  return (
+    <>
+      {onNew && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={onNew}
+              aria-label="New chat"
+              className="size-7 shrink-0"
+            >
+              {newIcon ?? <PlusIcon className="size-4" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>New chat</TooltipContent>
+        </Tooltip>
+      )}
+      <Popover open={historyOpen} onOpenChange={setHistoryOpen}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label="Conversation history"
+                className="size-7 shrink-0"
+              >
+                {historyIcon ?? <HistoryIcon className="size-4" />}
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent>Conversation history</TooltipContent>
+        </Tooltip>
+        <PopoverContent align="end" aria-label="Conversation history" className="w-72 p-0">
+          <ThreadSidebar
+            {...list}
+            onSelect={(id) => {
+              onSelect(id);
+              setHistoryOpen(false);
+            }}
+            {...(onNew
+              ? {
+                  onNew: () => {
+                    onNew();
+                    setHistoryOpen(false);
+                  },
+                }
+              : {})}
+            className="h-96 w-full border-none"
+          />
+        </PopoverContent>
+      </Popover>
+      {actions}
+    </>
+  );
+};
+
 /**
  * Tab strip for the `top` thread placement. Each open conversation is a tab
  * showing its title, a spinner while it streams in the background, and a close
@@ -47,11 +129,17 @@ export interface ThreadTabsProps extends Omit<ThreadSidebarProps, "onHide" | "si
  * into view when the selection changes, so switching from history never leaves
  * the current conversation off-screen.
  */
-export const ThreadTabs = ({ openThreadIds, onCloseTab, className, ...list }: ThreadTabsProps) => {
-  const { threads, activeThreadId, streamingThreadIds = [], onSelect, onNew } = list;
-  // Controlled so picking a conversation (or starting one) dismisses the menu
-  // instead of leaving it open over the transcript.
-  const [historyOpen, setHistoryOpen] = useState(false);
+export const ThreadTabs = ({
+  openThreadIds,
+  onCloseTab,
+  actions,
+  showActions = true,
+  newIcon,
+  historyIcon,
+  className,
+  ...list
+}: ThreadTabsProps) => {
+  const { threads, activeThreadId, streamingThreadIds = [], onSelect } = list;
   const activeTabRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     activeTabRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
@@ -62,129 +150,65 @@ export const ThreadTabs = ({ openThreadIds, onCloseTab, className, ...list }: Th
     // in the same centered column as the transcript and composer.
     <div className={cn("w-full border-b border-border text-xs", className)}>
       <div className="mx-auto flex w-full max-w-4xl items-center gap-1 px-2 py-1 md:px-4">
-        <div role="tablist" className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
           {openThreadIds.map((id) => {
             const thread = threads.find((t) => t.id === id) ?? { id };
             const isActive = id === activeThreadId;
             const isStreaming = streamingThreadIds.includes(id);
             const title = threadTitle(thread);
             return (
-              <Tooltip key={id}>
-                <TooltipTrigger asChild>
-                  <div
-                    ref={isActive ? activeTabRef : undefined}
-                    role="tab"
-                    aria-selected={isActive}
-                    tabIndex={0}
-                    onClick={() => onSelect(id)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onSelect(id);
-                      }
-                    }}
+              <div
+                key={id}
+                ref={isActive ? activeTabRef : undefined}
+                className={cn(
+                  "group flex max-w-[12rem] shrink-0 items-center rounded-md border border-transparent",
+                  "hover:bg-accent hover:text-accent-foreground",
+                  isActive && "border-border bg-accent text-accent-foreground",
+                )}
+              >
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => onSelect(id)}
+                      className="flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 px-2 py-1 text-left"
+                      aria-current={isActive ? "page" : undefined}
+                    >
+                      {isStreaming && (
+                        <Loader2Icon
+                          aria-label="Streaming"
+                          className="size-3 shrink-0 animate-spin text-primary"
+                        />
+                      )}
+                      <span className="truncate">{title}</span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>{title}</TooltipContent>
+                </Tooltip>
+                {onCloseTab && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => onCloseTab(id)}
+                    aria-label="Close tab"
                     className={cn(
-                      "group flex max-w-[12rem] shrink-0 cursor-pointer items-center gap-1.5",
-                      "rounded-md border border-transparent px-2 py-1",
-                      "hover:bg-accent hover:text-accent-foreground",
-                      isActive && "border-border bg-accent text-accent-foreground",
+                      "mr-1 size-[24px] shrink-0",
+                      // The active tab always shows its close button; the rest
+                      // reveal one on hover / keyboard focus.
+                      !isActive && "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
                     )}
                   >
-                    {isStreaming && (
-                      <Loader2Icon
-                        aria-label="Streaming"
-                        className="size-3 shrink-0 animate-spin text-primary"
-                      />
-                    )}
-                    <span className="truncate">{title}</span>
-                    {onCloseTab && (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onCloseTab(id);
-                        }}
-                        aria-label="Close tab"
-                        className={cn(
-                          "size-4 shrink-0",
-                          // The active tab always shows its close button; the
-                          // rest reveal one on hover / keyboard focus so the
-                          // strip stays quiet.
-                          !isActive &&
-                            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-                        )}
-                      >
-                        <XIcon className="size-3" />
-                      </Button>
-                    )}
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>{title}</TooltipContent>
-              </Tooltip>
+                    <XIcon className="size-3" />
+                  </Button>
+                )}
+              </div>
             );
           })}
         </div>
-        {onNew && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                onClick={onNew}
-                aria-label="New chat"
-                className="size-7 shrink-0"
-              >
-                <PlusIcon className="size-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>New chat</TooltipContent>
-          </Tooltip>
-        )}
-        <Popover open={historyOpen} onOpenChange={setHistoryOpen}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <PopoverTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  aria-label="Conversation history"
-                  className="size-7 shrink-0"
-                >
-                  <HistoryIcon className="size-4" />
-                </Button>
-              </PopoverTrigger>
-            </TooltipTrigger>
-            <TooltipContent>Conversation history</TooltipContent>
-          </Tooltip>
-          <PopoverContent align="end" className="w-72 p-0">
-            {/*
-             * The same list the docked placements render, just framed as a menu:
-             * selecting (or starting) a conversation opens it as a tab and
-             * dismisses the popover, while rename / delete / cancel work in
-             * place.
-             */}
-            <ThreadSidebar
-              {...list}
-              onSelect={(id) => {
-                onSelect(id);
-                setHistoryOpen(false);
-              }}
-              {...(onNew
-                ? {
-                    onNew: () => {
-                      onNew();
-                      setHistoryOpen(false);
-                    },
-                  }
-                : {})}
-              className="h-96 w-full border-none"
-            />
-          </PopoverContent>
-        </Popover>
+        {showActions ? (
+          <ThreadActions {...list} actions={actions} newIcon={newIcon} historyIcon={historyIcon} />
+        ) : null}
       </div>
     </div>
   );

package/src/react/tool-pill.tsx

@@ -452,6 +452,26 @@ const ToolStatusIcon = ({ status }: { status: "running" | "done" | "error" }) =>
   return <CheckIcon className="size-3 text-muted-foreground" />;
 };
 
+/** Pretty-print a complete tool payload without slicing or summarizing it. */
+export function formatRawToolPayload(value: unknown): string {
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2) ?? String(value);
+}
+
+const RawToolPayload = ({ label, value }: { label: "Request" | "Response"; value: unknown }) => (
+  <Collapsible className="rounded border border-border/60 bg-background/40">
+    <CollapsibleTrigger className="group flex w-full items-center gap-1.5 px-2 py-1 text-left text-[11px] uppercase tracking-wide text-muted-foreground hover:text-foreground">
+      <ChevronDownIcon className="size-3 shrink-0 transition-transform group-data-[state=closed]:-rotate-90" />
+      <span>{label}</span>
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words border-t border-border/50 px-2 py-2 font-mono text-[11px] leading-relaxed text-foreground">
+        {formatRawToolPayload(value)}
+      </pre>
+    </CollapsibleContent>
+  </Collapsible>
+);
+
 /**
  * True when a tool event has anything worth expanding for. The
  * question text already rides on the row header (see
@@ -460,6 +480,7 @@ const ToolStatusIcon = ({ status }: { status: "running" | "done" | "error" }) =>
  */
 const hasExpandableDetails = (event: ToolEvent): boolean => {
   if (event.status === "running") return true;
+  if ("input" in event || "output" in event) return true;
   const summary = summarizeProgress(event.progress ?? []);
   return summary.groups.some(
     (g) => g.attachments.some(isAttachmentRenderable) || g.errors.length > 0,
@@ -531,8 +552,10 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
         {header}
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="px-2 pb-2">
+        <div className="flex flex-col gap-2 px-2 pb-2">
           <ToolProgressDetails summary={summary} omitQuestion />
+          {"input" in event ? <RawToolPayload label="Request" value={event.input} /> : null}
+          {"output" in event ? <RawToolPayload label="Response" value={event.output} /> : null}
         </div>
       </CollapsibleContent>
     </Collapsible>

package/src/react/types.ts

@@ -22,6 +22,10 @@ export type ToolEvent = {
   id: string;
   toolName: string;
   status: "running" | "done" | "error";
+  /** Complete tool-call arguments as emitted by Mastra. */
+  input?: unknown;
+  /** Complete tool result/error as emitted by Mastra. */
+  output?: unknown;
   progress?: ToolProgress[];
 };
 
@@ -172,11 +176,16 @@ export type ChatViewProps = {
    */
   defaultModelName?: string;
   /**
-   * Host-owned controls rendered in the composer toolbar immediately after the
+   * Host-owned controls rendered in the composer footer immediately before the
    * model selector. Use this for per-turn options that belong beside model
    * routing without forking the chat surface.
    */
   composerActions?: ReactNode;
+  /**
+   * Host-owned actions rendered on the left side of the composer's fixed
+   * footer, before Export and Clear.
+   */
+  composerLeadingActions?: ReactNode;
   /**
    * Optional infinite-scroll-up handler. Fired when the user scrolls
    * within `TOP_LOAD_MORE_THRESHOLD_PX` of the top of the
@@ -202,23 +211,16 @@ export type ChatViewProps = {
    * stream Response and pipe it through the same chunk handler
    * (this is exactly what `useMastraChat` does).
    *
-   * It requires the `runId` Mastra emitted with the approval
-   * chunk - the field is always populated when the card was rendered
-   * from a live `data-tool-call-approval` part or an out-of-band
-   * `pendingApprovalsByMessage` entry. It will be missing only for
-   * approvals reconstructed from history (where the original runId
-   * is lost), in which case the handler should surface a "this
-   * approval is stale, please re-ask the model" message rather than
-   * trying to resume a workflow that no longer exists.
+   * It requires the `runId` Mastra emitted with the approval chunk.
+   * `useMastraChat` also restores run ids from native suspended-run
+   * storage when history is reloaded.
    */
   onResolveToolApproval?: (args: ApprovalDecision) => void | Promise<void>;
   /**
-   * Out-of-band approval requests keyed by assistant message id, for
-   * transports that don't surface approvals as `UIMessage` parts.
-   * The `/stream` page populates this from Mastra's
-   * `tool-call-approval` chunk so the same `ToolApprovalCard`
-   * UI works without injecting synthetic data parts. Each entry is
-   * merged with any approvals already discovered in `message.parts`.
+   * Approval requests keyed by assistant message id. This restores
+   * persisted suspended runs after a reload and also supports transports
+   * that do not surface approvals as `UIMessage` parts. Entries merge with
+   * approvals discovered in `message.parts`.
    */
   pendingApprovalsByMessage?: Record<string, PendingApproval[]>;
   /**
@@ -246,6 +248,17 @@ export type ChatViewProps = {
    * is too narrow for one. See {@link ThreadPlacement}.
    */
   threadPlacement?: ThreadPlacement;
+  /**
+   * Host-owned controls appended after the top tab strip's New and History
+   * actions. The persistent assistant uses this for its panel Close button.
+   */
+  threadBarActions?: ReactNode;
+  /** Whether the top tab row renders its built-in New/History controls. */
+  showThreadBarActions?: boolean;
+  /** Replacement icon for the top tab row's New action. */
+  threadNewIcon?: ReactNode;
+  /** Replacement icon for the top tab row's History action. */
+  threadHistoryIcon?: ReactNode;
   /** Id of the currently-active thread, highlighted in the sidebar. */
   activeThreadId?: string;
   /**
@@ -339,10 +352,11 @@ export type ApprovalDecision =
       approved: true;
       toolName: string;
       toolCallId: string;
+      /** Assistant UI message that owns the approval card. */
+      messageId?: string;
       /**
-       * Mastra run id from the approval chunk. Required to resume
-       * the suspended workflow; absent only when the card was
-       * reconstructed from history (no live runId available).
+       * Mastra run id required to resume the suspended workflow. Native
+       * suspended-run discovery restores it for persisted approvals.
        */
       runId?: string;
       input: unknown;
@@ -351,6 +365,8 @@ export type ApprovalDecision =
       approved: false;
       toolName: string;
       toolCallId: string;
+      /** Assistant UI message that owns the approval card. */
+      messageId?: string;
       runId?: string;
       input: unknown;
       reason: string;
@@ -359,10 +375,8 @@ export type ApprovalDecision =
 /**
  * One approval-gated tool call paused mid-turn. `runId` is the
  * Mastra workflow id needed to resume; it's always present when the
- * card was constructed from a live source (the stream's
- * `data-tool-call-approval` part or `pendingApprovalsByMessage`),
- * and absent only for approvals reconstructed from a history load
- * where the original runId is lost.
+ * card came from a live approval part or native suspended-run storage.
+ * It remains optional for controlled transports that cannot provide it.
  */
 export type PendingApproval = {
   toolName: string;