eve 0.44.4 → 0.45.1

package/dist/src/setup/scaffold/create/web-template.js

@@ -23,6 +23,7 @@ import {
   Conversation,
   ConversationContent,
   ConversationScrollButton,
+  ConversationTopFade,
 } from "@/components/ai-elements/conversation";
 import { Message, MessageContent } from "@/components/ai-elements/message";
 import {
@@ -31,6 +32,7 @@ import {
   type PromptInputMessage,
   PromptInputSubmit,
   PromptInputTextarea,
+  usePromptInputAttachments,
 } from "@/components/ai-elements/prompt-input";
 import { Shimmer } from "@/components/ai-elements/shimmer";
 import { Button } from "@/components/ui/button";
@@ -47,6 +49,7 @@ export function AgentChat({
   readonly sessionless?: boolean;
 }) {
   const [cancellationError, setCancellationError] = useState<string>();
+  const [hasInputText, setHasInputText] = useState(false);
   const agent = useEveAgent({
     initialSession:
       sessionId === undefined
@@ -70,7 +73,7 @@ export function AgentChat({
   });
 
   const isBusy = agent.status === "submitted" || agent.status === "streaming";
-  const isRestoring = sessionId !== undefined && agent.events.length === 0 && isBusy;
+  const isResuming = agent.status === "resuming";
   const isEmpty = agent.data.messages.length === 0;
   const lastMessage = agent.data.messages.at(-1);
   const isPendingAssistantShell =
@@ -79,10 +82,10 @@ export function AgentChat({
   const showPendingThinking =
     isBusy &&
     (agent.status === "submitted" || lastMessage?.role !== "assistant" || isPendingAssistantShell);
-  const turnFailure = isBusy ? undefined : getLatestTurnFailure(agent.events);
+  const turnFailure = isBusy || isResuming ? undefined : getLatestTurnFailure(agent.events);
   const errorMessage = cancellationError ?? agent.error?.message ?? turnFailure;
   const hasConversationContent = sessionless || !isEmpty || errorMessage !== undefined;
-  const showConversationLayout = isRestoring || hasConversationContent;
+  const showConversationLayout = isResuming || hasConversationContent;
   const activeSessionId = sessionId ?? agent.session?.sessionId;
 
   const requestCancellation = () => {
@@ -94,8 +97,9 @@ export function AgentChat({
 
   const handleSubmit = async (message: PromptInputMessage) => {
     const text = message.text.trim();
-    if ((text.length === 0 && message.files.length === 0) || isRestoring) return;
+    if ((text.length === 0 && message.files.length === 0) || isResuming) return;
 
+    setHasInputText(false);
     setCancellationError(undefined);
     const options = isBusy ? { turnPolicy: "steer" as const } : undefined;
 
@@ -122,18 +126,17 @@ export function AgentChat({
 
   const composer = (
     <PromptInput onSubmit={handleSubmit}>
-      <PromptInputTextarea disabled={isRestoring} placeholder="Send a message…" />
-      {isBusy && !isRestoring ? (
-        <PromptInputButton
-          aria-label="Stop"
-          className="absolute right-12 bottom-2.5 rounded-full"
-          onClick={requestCancellation}
-          variant="default"
-        >
-          <SquareIcon className="size-3 fill-current" />
-        </PromptInputButton>
-      ) : null}
-      <PromptInputSubmit disabled={isRestoring} status={isBusy ? undefined : agent.status} />
+      <PromptInputTextarea
+        disabled={isResuming}
+        onChange={(event) => setHasInputText(event.currentTarget.value.trim().length > 0)}
+        placeholder="Send a message…"
+      />
+      <ComposerAction
+        hasInputText={hasInputText}
+        isBusy={isBusy}
+        isResuming={isResuming}
+        onCancel={requestCancellation}
+      />
     </PromptInput>
   );
 
@@ -154,13 +157,14 @@ export function AgentChat({
               : \`eve:web-chat-scroll:\${activeSessionId}\`
           }
         >
+          <ConversationTopFade className="top-14" />
           <ConversationContent className="mx-auto w-full max-w-3xl gap-6 px-4 pt-20 pb-36 sm:px-6">
             {agent.data.messages.map((message, index) =>
               showPendingThinking &&
               isPendingAssistantShell &&
               message.id === lastMessage.id ? null : (
                 <AgentMessage
-                  canRespond={!isBusy}
+                  canRespond={!isBusy && !isResuming}
                   isStreaming={
                     agent.status === "streaming" && index === agent.data.messages.length - 1
                   }
@@ -199,6 +203,36 @@ export function AgentChat({
   );
 }
 
+function ComposerAction({
+  hasInputText,
+  isBusy,
+  isResuming,
+  onCancel,
+}: {
+  readonly hasInputText: boolean;
+  readonly isBusy: boolean;
+  readonly isResuming: boolean;
+  readonly onCancel: () => void;
+}) {
+  const attachments = usePromptInputAttachments();
+  const canSubmit = hasInputText || attachments.files.length > 0;
+
+  if (!isBusy || canSubmit) {
+    return <PromptInputSubmit disabled={isResuming} />;
+  }
+
+  return (
+    <PromptInputButton
+      aria-label="Stop"
+      className="absolute right-2.5 bottom-2.5"
+      onClick={onCancel}
+      variant="outline"
+    >
+      <SquareIcon className="size-3 fill-current" />
+    </PromptInputButton>
+  );
+}
+
 function ErrorMessage({ message }: { readonly message: string }) {
   return (
     <Message className="max-w-full" from="assistant">
@@ -226,14 +260,14 @@ function ChatHeader({ canStartNewChat }: { readonly canStartNewChat: boolean })
         {canStartNewChat ? (
           <Button
             aria-label="Start a new chat"
-            className="pointer-events-auto fixed top-2 right-6"
+            className="pointer-events-auto fixed top-3 right-6 pr-4"
             onClick={() => window.location.assign("/s")}
             size="sm"
             type="button"
             variant="ghost"
           >
             <PlusIcon className="size-4" />
-            <span className="hidden sm:inline">New chat</span>
+            <span className="hidden font-normal text-sm sm:inline">New chat</span>
           </Button>
         ) : null}
       </div>
@@ -290,8 +324,11 @@ import type {
   EveMessageInputRequest,
   EveMessagePart,
 } from "eve/react";
+import { useState } from "react";
 import {
+  ArrowRightIcon,
   CheckCircleIcon,
+  CheckIcon,
   ExternalLinkIcon,
   FileIcon,
   ImageIcon,
@@ -301,17 +338,17 @@ import {
 import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
 import {
   Question,
-  QuestionActions,
-  QuestionDescription,
   QuestionInput,
   QuestionOption,
   QuestionOptions,
   QuestionPrompt,
   type QuestionResponse,
   QuestionSubmit,
+  type QuestionValue,
 } from "@/components/ai-elements/question";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
 import {
+  BashToolContent,
   Tool,
   ToolContent,
   ToolHeader,
@@ -425,13 +462,19 @@ function AgentMessagePart({
             type="dynamic-tool"
           />
           <ToolContent>
-            <ToolInput input={part.input} />
+            {part.toolName === "bash" ? (
+              <BashToolContent errorText={part.errorText} input={part.input} output={part.output} />
+            ) : (
+              <ToolInput input={part.input} />
+            )}
             <InputRequestActions
               canRespond={canRespond}
               part={part}
               onInputResponses={onInputResponses}
             />
-            <ToolOutput errorText={part.errorText} output={part.output} />
+            {part.toolName === "bash" ? null : (
+              <ToolOutput errorText={part.errorText} output={part.output} />
+            )}
           </ToolContent>
         </Tool>
       );
@@ -450,11 +493,22 @@ function QuestionRequest({
   readonly inputResponse?: AgentInputResponse;
   readonly onInputResponses: (responses: readonly AgentInputResponse[]) => void | Promise<void>;
 }) {
-  const selectedOption = inputRequest.options?.find(
-    (option) => option.id === inputResponse?.optionId,
-  );
   const hasOptions = (inputRequest.options?.length ?? 0) > 0;
   const acceptsFreeform = inputRequest.allowFreeform === true || !hasOptions;
+  const [questionValue, setQuestionValue] = useState<QuestionValue>({
+    selectedValues: inputResponse?.optionId ? [inputResponse.optionId] : [],
+    text: inputResponse?.text ?? "",
+  });
+
+  const submitOption = (optionId: string) => {
+    setQuestionValue((value) => ({ ...value, selectedValues: [optionId] }));
+    return onInputResponses([
+      {
+        optionId,
+        requestId: inputRequest.requestId,
+      },
+    ]);
+  };
 
   const submitResponse = ({ selectedValues, text }: QuestionResponse) =>
     onInputResponses([
@@ -467,40 +521,61 @@ function QuestionRequest({
 
   return (
     <Question
-      defaultValue={{
-        selectedValues: inputResponse?.optionId ? [inputResponse.optionId] : [],
-        text: inputResponse?.text ?? "",
-      }}
       disabled={!canRespond || inputResponse !== undefined}
       onSubmit={submitResponse}
+      onValueChange={setQuestionValue}
+      value={questionValue}
     >
       <QuestionPrompt>{inputRequest.prompt}</QuestionPrompt>
       {hasOptions ? (
         <QuestionOptions className="flex-col items-stretch" aria-label={inputRequest.prompt}>
-          {inputRequest.options?.map((option) => (
-            <QuestionOption className="justify-start text-left" key={option.id} value={option.id}>
-              <span>
-                <span className="block">{option.label}</span>
+          {inputRequest.options?.map((option, index) => (
+            <QuestionOption
+              className="justify-start px-3 py-2 text-left"
+              key={option.id}
+              onClick={() => void submitOption(option.id)}
+              value={option.id}
+            >
+              <span className="min-w-0 flex-1">
+                <span className="block text-foreground text-sm leading-tight">{option.label}</span>
                 {option.description ? (
-                  <span className="block font-normal text-xs opacity-70">{option.description}</span>
+                  <span className="block text-sm text-muted-foreground leading-tight">
+                    {option.description}
+                  </span>
                 ) : null}
               </span>
+              {inputResponse === undefined ? (
+                <span aria-hidden="true" className="relative size-6 shrink-0">
+                  <span className="absolute inset-0 flex items-center justify-center rounded-full bg-foreground/8 text-xs text-muted-foreground transition-opacity group-hover/option:opacity-0 group-focus-visible/option:opacity-0">
+                    {index + 1}
+                  </span>
+                  <ArrowRightIcon className="absolute top-1/2 left-1/2 size-4 -translate-x-1/2 -translate-y-1/2 text-muted-foreground opacity-0 transition-[color,opacity] group-hover/option:text-foreground group-hover/option:opacity-100 group-focus-visible/option:opacity-100" />
+                </span>
+              ) : (
+                <CheckIcon className="size-4 shrink-0 opacity-0 transition-opacity group-data-[state=checked]/option:opacity-100" />
+              )}
             </QuestionOption>
           ))}
         </QuestionOptions>
       ) : null}
       {acceptsFreeform ? (
-        <QuestionInput aria-label="Answer" placeholder="Type your answer…" />
+        <div className="relative">
+          <QuestionInput
+            aria-label="Answer"
+            className={inputResponse === undefined ? "pr-12 pb-12" : undefined}
+            placeholder="Type your answer…"
+          />
+          {inputResponse === undefined && questionValue.text.trim().length > 0 ? (
+            <QuestionSubmit
+              aria-label="Answer"
+              className="absolute right-2 bottom-2"
+              size="icon-sm"
+            >
+              <ArrowRightIcon />
+            </QuestionSubmit>
+          ) : null}
+        </div>
       ) : null}
-      {inputResponse ? (
-        <QuestionDescription>
-          Responded: {selectedOption?.label ?? inputResponse.text ?? inputResponse.optionId}
-        </QuestionDescription>
-      ) : (
-        <QuestionActions>
-          <QuestionSubmit>Answer</QuestionSubmit>
-        </QuestionActions>
-      )}
     </Question>
   );
 }
@@ -705,6 +780,27 @@ function partKey(part: EveMessagePart, index: number): string {
       return \`\${part.type}:\${index}\`;
   }
 }
+`,"app/apple-icon.tsx":`import { ImageResponse } from "next/og";
+
+export const size = {
+  width: 180,
+  height: 180,
+};
+
+export const contentType = "image/png";
+
+export default function AppleIcon() {
+  return new ImageResponse(
+    <svg fill="none" viewBox="0 0 102 102" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0h102v102H0z" fill="#000" />
+      <path
+        d="M49.28 66.94 75.03 34.96h-6.89L47.91 60.11l-5.49 6.83h6.86ZM0 34.96h42.4v5.11H0zm0 13.32h27.66v5.11H0zm0 13.54h27.66v5.11H0zm69.63-26.86H102v5.11H69.63zm4.71 13.32H102v5.11H74.34zm0 13.54H102v5.11H74.34z"
+        fill="#fff"
+      />
+    </svg>,
+    size,
+  );
+}
 `,"app/globals.css":`@import "tailwindcss";
 @source "../node_modules/streamdown/dist/*.js";
 
@@ -789,6 +885,8 @@ function partKey(part: EveMessagePart, index: number): string {
 
 html {
   height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
@@ -803,6 +901,13 @@ input,
 textarea {
   font: inherit;
 }
+`,"app/icon.svg":`<svg width="102" height="102" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#000" d="M0 0h102v102H0z" />
+  <path
+    fill="#fff"
+    d="M49.28 66.94 75.03 34.96h-6.89L47.91 60.11l-5.49 6.83h6.86ZM0 34.96h42.4v5.11H0zm0 13.32h27.66v5.11H0zm0 13.54h27.66v5.11H0zm69.63-26.86H102v5.11H69.63zm4.71 13.32H102v5.11H74.34zm0 13.54H102v5.11H74.34z"
+  />
+</svg>
 `,"app/layout.tsx":`import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import type { ReactNode } from "react";
@@ -1700,6 +1805,49 @@ export const ConversationContent = ({ className, ...props }: ConversationContent
   <StickToBottom.Content className={cn("flex flex-col gap-8 p-4", className)} {...props} />
 );
 
+export type ConversationTopFadeProps = ComponentProps<"div">;
+
+export const ConversationTopFade = ({ className, ...props }: ConversationTopFadeProps) => {
+  const { contentRef, scrollRef } = useStickToBottomContext();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (scrollElement === null) return;
+
+    const updateVisibility = () => {
+      setIsVisible(scrollElement.scrollTop > 0);
+    };
+
+    updateVisibility();
+    scrollElement.addEventListener("scroll", updateVisibility, { passive: true });
+
+    const resizeObserver = new ResizeObserver(updateVisibility);
+    resizeObserver.observe(scrollElement);
+    if (contentRef.current !== null) {
+      resizeObserver.observe(contentRef.current);
+    }
+
+    return () => {
+      scrollElement.removeEventListener("scroll", updateVisibility);
+      resizeObserver.disconnect();
+    };
+  }, [contentRef, scrollRef]);
+
+  return (
+    <div
+      {...props}
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-x-0 top-0 z-10 h-6 bg-linear-to-b from-background via-background/80 to-transparent transition-opacity duration-150",
+        isVisible ? "opacity-100" : "opacity-0",
+        className,
+      )}
+      data-slot="conversation-top-fade"
+    />
+  );
+};
+
 export type ConversationEmptyStateProps = ComponentProps<"div"> & {
   title?: string;
   description?: string;
@@ -2990,8 +3138,8 @@ export const PromptInput = ({
       <form className="w-full" onSubmit={handleSubmit} ref={formRef} {...props}>
         <InputGroup
           className={cn(
-            "overflow-hidden rounded-2xl bg-card shadow-sm",
-            "focus-within:border-foreground has-[[data-slot=input-group-control]:focus-visible]:border-foreground",
+            "overflow-hidden rounded-2xl bg-card/80 shadow-sm backdrop-blur-md",
+            "focus-within:border-foreground! has-[[data-slot=input-group-control]:focus-visible]:border-foreground!",
             className,
           )}
         >
@@ -3121,7 +3269,7 @@ export const PromptInputTextarea = ({
 
   return (
     <InputGroupTextarea
-      className={cn("field-sizing-content max-h-48 min-h-18", className)}
+      className={cn("field-sizing-content max-h-48 min-h-18 text-sm!", className)}
       name="message"
       onCompositionEnd={handleCompositionEnd}
       onCompositionStart={handleCompositionStart}
@@ -3183,7 +3331,11 @@ export const PromptInputButton = ({
 
   const button = (
     <InputGroupButton
-      className={cn(className)}
+      className={cn(
+        "rounded-full",
+        variant === "outline" && "bg-card hover:bg-card dark:hover:bg-input/30",
+        className,
+      )}
       size={newSize}
       type="button"
       variant={variant}
@@ -3446,6 +3598,7 @@ import type {
   ComponentProps,
   FormEvent,
   HTMLAttributes,
+  KeyboardEvent,
   MouseEvent,
   ReactNode,
 } from "react";
@@ -3597,7 +3750,7 @@ export const Question = ({
   return (
     <QuestionContext.Provider value={contextValue}>
       <form
-        className={cn("space-y-4 rounded-lg border bg-background p-4", className)}
+        className={cn("space-y-3 rounded-xl border bg-card p-4", className)}
         onSubmit={handleSubmit}
         {...props}
       >
@@ -3610,7 +3763,7 @@ export const Question = ({
 export type QuestionPromptProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const QuestionPrompt = ({ className, ...props }: QuestionPromptProps) => (
-  <p className={cn("font-medium text-sm", className)} {...props} />
+  <p className={cn("font-medium text-sm leading-snug", className)} {...props} />
 );
 
 export type QuestionDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
@@ -3626,7 +3779,7 @@ export const QuestionOptions = ({ className, ...props }: QuestionOptionsProps) =
 
   return (
     <div
-      className={cn("flex flex-wrap gap-2", className)}
+      className={cn("flex flex-wrap gap-1.5", className)}
       role={selectionMode === "single" ? "radiogroup" : "group"}
       {...props}
     />
@@ -3660,12 +3813,21 @@ export const QuestionOption = ({
   return (
     <Button
       aria-checked={isSelected}
-      className={cn("h-auto whitespace-normal", className)}
+      // Selection only changes colors: the border is always present so the
+      // layout never shifts when an option is picked.
+      className={cn(
+        "group/option h-auto whitespace-normal border border-input font-normal shadow-none transition-colors",
+        isSelected
+          ? "border-foreground/20 bg-accent text-accent-foreground disabled:opacity-100"
+          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+        className,
+      )}
+      data-state={isSelected ? "checked" : "unchecked"}
       disabled={question.disabled || disabled}
       onClick={handleClick}
       role={role}
       type="button"
-      variant={variant ?? (isSelected ? "default" : "outline")}
+      variant={variant ?? "ghost"}
       {...props}
     >
       {children ?? value}
@@ -3675,7 +3837,13 @@ export const QuestionOption = ({
 
 export type QuestionInputProps = Omit<ComponentProps<typeof Textarea>, "defaultValue" | "value">;
 
-export const QuestionInput = ({ className, disabled, onChange, ...props }: QuestionInputProps) => {
+export const QuestionInput = ({
+  className,
+  disabled,
+  onChange,
+  onKeyDown,
+  ...props
+}: QuestionInputProps) => {
   const question = useQuestion();
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -3684,12 +3852,33 @@ export const QuestionInput = ({ className, disabled, onChange, ...props }: Quest
     },
     [onChange, question],
   );
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      onKeyDown?.(event);
+      if (
+        event.defaultPrevented ||
+        event.key !== "Enter" ||
+        event.shiftKey ||
+        event.nativeEvent.isComposing
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      event.currentTarget.form?.requestSubmit();
+    },
+    [onKeyDown],
+  );
 
   return (
     <Textarea
-      className={cn("min-h-20", className)}
+      className={cn(
+        "min-h-16 resize-none rounded-lg text-sm shadow-none focus-visible:border-foreground!",
+        className,
+      )}
       disabled={question.disabled || disabled}
       onChange={handleChange}
+      onKeyDown={handleKeyDown}
       value={question.text}
       {...props}
     />
@@ -3708,14 +3897,22 @@ export type QuestionSubmitProps = ComponentProps<typeof Button> & {
 
 export const QuestionSubmit = ({
   children = "Submit",
+  className,
   disabled,
+  size = "sm",
   ...props
 }: QuestionSubmitProps) => {
   const question = useQuestion();
   const hasResponse = question.selectedValues.length > 0 || question.text.trim().length > 0;
 
   return (
-    <Button disabled={question.disabled || disabled || !hasResponse} type="submit" {...props}>
+    <Button
+      className={cn("text-sm! shadow-none", className)}
+      disabled={question.disabled || disabled || !hasResponse}
+      size={size}
+      type="submit"
+      {...props}
+    >
       {children}
     </Button>
   );
@@ -3770,7 +3967,6 @@ export type ReasoningProps = ComponentProps<typeof Collapsible> & {
   duration?: number;
 };
 
-const AUTO_CLOSE_DELAY = 1000;
 const MS_IN_S = 1000;
 
 export const Reasoning = memo(
@@ -3825,12 +4021,8 @@ export const Reasoning = memo(
     // Auto-close when streaming ends (once only, and only if it ever streamed)
     useEffect(() => {
       if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
-        const timer = setTimeout(() => {
-          setIsOpen(false);
-          setHasAutoClosed(true);
-        }, AUTO_CLOSE_DELAY);
-
-        return () => clearTimeout(timer);
+        setIsOpen(false);
+        setHasAutoClosed(true);
       }
     }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
 
@@ -4002,30 +4194,22 @@ const ShimmerComponent = ({
 export const Shimmer = memo(ShimmerComponent);
 `,"components/ai-elements/tool.tsx":`"use client";
 
-import { Badge } from "@/components/ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { cn } from "@/lib/utils";
 import type { DynamicToolUIPart, ToolUIPart } from "ai";
-import {
-  CheckCircleIcon,
-  ChevronDownIcon,
-  CircleIcon,
-  ClockIcon,
-  WrenchIcon,
-  XCircleIcon,
-} from "lucide-react";
+import { ChevronRightIcon, TerminalIcon, WrenchIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import { isValidElement } from "react";
 
 import { CodeBlock } from "./code-block";
 
+const compactCodeBlockClassName =
+  "rounded-none border-0 bg-transparent [&_pre]:!bg-transparent [&_pre]:px-3 [&_pre]:pt-2 [&_pre]:pb-3 [&_pre]:text-xs [&_code]:text-xs";
+
 export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
-  <Collapsible
-    className={cn("group not-prose mb-4 w-full rounded-md border", className)}
-    {...props}
-  />
+  <Collapsible className={cn("group not-prose w-full", className)} {...props} />
 );
 
 export type ToolPart = ToolUIPart | DynamicToolUIPart;
@@ -4052,22 +4236,12 @@ const statusLabels: Record<ToolPart["state"], string> = {
   "output-error": "Error",
 };
 
-const statusIcons: Record<ToolPart["state"], ReactNode> = {
-  "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
-  "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
-  "input-available": <ClockIcon className="size-4 animate-pulse" />,
-  "input-streaming": <CircleIcon className="size-4" />,
-  "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
-  "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
-  "output-error": <XCircleIcon className="size-4 text-red-600" />,
-};
-
-export const getStatusBadge = (status: ToolPart["state"]) => (
-  <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
-    {statusIcons[status]}
-    {statusLabels[status]}
-  </Badge>
-);
+export const getStatusIndicator = (status: ToolPart["state"]) =>
+  status === "output-available" ? null : (
+    <span className={cn("text-sm", status === "output-error" && "text-destructive")}>
+      {statusLabels[status]}
+    </span>
+  );
 
 export const ToolHeader = ({
   className,
@@ -4078,18 +4252,24 @@ export const ToolHeader = ({
   ...props
 }: ToolHeaderProps) => {
   const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+  const displayName = title ?? derivedName;
 
   return (
     <CollapsibleTrigger
-      className={cn("flex w-full items-center justify-between gap-4 p-3", className)}
+      className={cn(
+        "flex w-full items-center gap-2 py-0.5 text-left text-muted-foreground transition-colors hover:text-foreground",
+        className,
+      )}
       {...props}
     >
-      <div className="flex items-center gap-2">
-        <WrenchIcon className="size-4 text-muted-foreground" />
-        <span className="font-medium text-sm">{title ?? derivedName}</span>
-        {getStatusBadge(state)}
-      </div>
-      <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+      {displayName === "bash" ? (
+        <TerminalIcon className="size-4 shrink-0" />
+      ) : (
+        <WrenchIcon className="size-4 shrink-0" />
+      )}
+      <span className="text-sm">{displayName}</span>
+      {getStatusIndicator(state)}
+      <ChevronRightIcon className="size-3.5 shrink-0 transition-transform group-data-[state=open]:rotate-90" />
     </CollapsibleTrigger>
   );
 };
@@ -4099,24 +4279,82 @@ export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
 export const ToolContent = ({ className, ...props }: ToolContentProps) => (
   <CollapsibleContent
     className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 py-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}
   />
 );
 
+export type BashToolContentProps = ComponentProps<"div"> & {
+  input: ToolPart["input"];
+  output: ToolPart["output"];
+  errorText: ToolPart["errorText"];
+};
+
+export const BashToolContent = ({
+  className,
+  input,
+  output,
+  errorText,
+  ...props
+}: BashToolContentProps) => {
+  const command = getRecordValue(input, "command");
+  const stdout = getRecordValue(output, "stdout") ?? (typeof output === "string" ? output : "");
+  const stderr = getRecordValue(output, "stderr") ?? errorText ?? "";
+  const exitCode = getRecordValue(output, "exitCode");
+  const hasResult = Boolean(stdout || stderr || (typeof exitCode === "number" && exitCode !== 0));
+
+  return (
+    <div className={cn("space-y-2", className)} {...props}>
+      <pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted/50 p-3 font-mono text-xs leading-relaxed">
+        <code>
+          <span className="text-muted-foreground">$ </span>
+          {command ?? "…"}
+        </code>
+      </pre>
+      {hasResult ? (
+        <pre className="overflow-x-auto whitespace-pre-wrap rounded-md bg-muted/50 p-3 font-mono text-xs leading-relaxed">
+          <code>
+            <span className="mb-2 block font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
+              Output
+            </span>
+            {stdout ? <span className="block">{stdout.trimEnd()}</span> : null}
+            {stderr ? <span className="block text-destructive">{stderr.trimEnd()}</span> : null}
+            {typeof exitCode === "number" && exitCode !== 0 ? (
+              <span className="block text-muted-foreground">Exited with code {exitCode}</span>
+            ) : null}
+          </code>
+        </pre>
+      ) : null}
+    </div>
+  );
+};
+
+const getRecordValue = (value: unknown, key: string): string | number | undefined => {
+  if (typeof value !== "object" || value === null || !(key in value)) {
+    return undefined;
+  }
+
+  const property = value[key as keyof typeof value];
+  return typeof property === "string" || typeof property === "number" ? property : undefined;
+};
+
 export type ToolInputProps = ComponentProps<"div"> & {
   input: ToolPart["input"];
 };
 
 export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
-  <div className={cn("space-y-2 overflow-hidden", className)} {...props}>
-    <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+  <div className={cn("overflow-hidden rounded-md bg-muted/50", className)} {...props}>
+    <span className="block px-3 pt-3 font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
       Parameters
-    </h4>
-    <div className="rounded-md bg-muted/50">
-      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+    </span>
+    <div>
+      <CodeBlock
+        className={compactCodeBlockClassName}
+        code={JSON.stringify(input, null, 2)}
+        language="json"
+      />
     </div>
   </div>
 );
@@ -4134,25 +4372,31 @@ export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutpu
   let Output = <div>{output as ReactNode}</div>;
 
   if (typeof output === "object" && !isValidElement(output)) {
-    Output = <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />;
+    Output = (
+      <CodeBlock
+        className={compactCodeBlockClassName}
+        code={JSON.stringify(output, null, 2)}
+        language="json"
+      />
+    );
   } else if (typeof output === "string") {
-    Output = <CodeBlock code={output} language="json" />;
+    Output = <CodeBlock className={compactCodeBlockClassName} code={output} language="json" />;
   }
 
   return (
-    <div className={cn("space-y-2", className)} {...props}>
-      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+    <div
+      className={cn(
+        "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+        errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span className="block px-3 pt-3 font-sans text-[10px] text-muted-foreground uppercase tracking-wide">
         {errorText ? "Error" : "Result"}
-      </h4>
-      <div
-        className={cn(
-          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
-          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground",
-        )}
-      >
-        {errorText && <div>{errorText}</div>}
-        {Output}
-      </div>
+      </span>
+      {errorText && <div className="px-3 pt-2 pb-3">{errorText}</div>}
+      {Output}
     </div>
   );
 };