feat(vscode-webui): improve error message handling in chat UI (#563)

* feat(vscode-webui): improve error message handling in chat UI

- Move ErrorMessageView to ChatToolbar for better positioning
- Add proper spacing for error messages with absolute positioning
- Update component imports and layout adjustments

🤖 Generated with [Pochi](https://getpochi.com)

Co-Authored-By: Pochi <[email protected]>

* update

* update: bg color

* update

---------

Co-authored-by: Pochi <[email protected]>
Co-authored-by: liangfung <[email protected]>

Author: 3 people

packages/vscode-webui/src/components/error-message.tsx

@@ -1,29 +1,127 @@
 import { useIsDevMode } from "@/features/settings";
 import { cn } from "@/lib/utils";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ScrollArea } from "./ui/scroll-area";
 
 interface ErrorMessageProps {
   error: { message: string } | undefined;
   formatter?: (e: { message: string }) => ReactNode;
+  collapsible?: boolean;
+  viewportClassname?: string;
 }
 
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({
   error,
   formatter,
+  collapsible = false,
+  viewportClassname,
 }) => {
   const [isDevMode] = useIsDevMode();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [hasOverflow, setHasOverflow] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const errorMessage = error?.message;
+
+  const checkOverflow = useCallback(() => {
+    if (collapsible && contentRef.current) {
+      const lineHeight = Number.parseFloat(
+        window.getComputedStyle(contentRef.current).lineHeight || "20",
+      );
+      const height = contentRef.current.scrollHeight;
+      setHasOverflow(height > lineHeight * 1.5);
+    }
+  }, [collapsible]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Need to reset state when error changes
+  useEffect(() => {
+    checkOverflow();
+    setIsExpanded(false);
+  }, [errorMessage, checkOverflow]);
+
+  useEffect(() => {
+    if (!collapsible || !contentRef.current) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkOverflow();
+    });
+
+    resizeObserver.observe(contentRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [collapsible, checkOverflow]);
+
+  const handleToggle = () => {
+    if (hasOverflow) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  const isCollapsed = collapsible && hasOverflow && !isExpanded;
+
   return (
     error && (
-      <ScrollArea
-        className={cn("mb-2 break-all text-center text-error", {
-          "cursor-help": isDevMode,
-        })}
-        viewportClassname="max-h-32"
-        onClick={isDevMode ? () => console.error(error) : undefined}
-      >
-        {formatter ? formatter(error) : error.message}
-      </ScrollArea>
+      <div className="relative mb-2">
+        {(() => {
+          const content = (
+            <div ref={contentRef}>
+              {formatter ? formatter(error) : error.message}
+            </div>
+          );
+
+          return isCollapsed ? (
+            <div
+              className={cn(
+                "max-h-6 overflow-hidden break-all pr-8 text-center text-error",
+                {
+                  "cursor-help": isDevMode,
+                },
+              )}
+              onClick={isDevMode ? () => console.error(error) : undefined}
+            >
+              {content}
+            </div>
+          ) : (
+            <ScrollArea
+              className={cn("break-all text-center text-error", {
+                "cursor-help": isDevMode && (!collapsible || !hasOverflow),
+                "pr-8": collapsible && hasOverflow,
+              })}
+              viewportClassname={cn(
+                "max-h-[max(1.5rem,calc(100vh-38rem))]",
+                viewportClassname,
+              )}
+              onClick={
+                isDevMode && (!collapsible || !hasOverflow)
+                  ? () => console.error(error)
+                  : undefined
+              }
+            >
+              {content}
+            </ScrollArea>
+          );
+        })()}
+        {collapsible && hasOverflow && (
+          <button
+            type="button"
+            onClick={handleToggle}
+            className="absolute top-1.5 right-2 transition-opacity hover:opacity-80"
+            aria-label={isExpanded ? "Collapse" : "Expand"}
+          >
+            {isExpanded ? (
+              <ChevronUpIcon className="size-4" />
+            ) : (
+              <ChevronDownIcon className="size-4" />
+            )}
+          </button>
+        )}
+      </div>
     )
   );
 };

packages/vscode-webui/src/features/chat/components/chat-area.tsx

@@ -9,13 +9,15 @@ interface ChatAreaProps {
   isLoading: boolean;
   user?: { name: string; image?: string | null };
   messagesContainerRef: React.RefObject<HTMLDivElement | null>;
+  className?: string;
 }
 
 export function ChatArea({
   messages,
   isLoading,
   user,
   messagesContainerRef,
+  className,
 }: ChatAreaProps) {
   const resourceUri = useResourceURI();
   return (
@@ -31,6 +33,7 @@ export function ChatArea({
         }}
         isLoading={isLoading}
         containerRef={messagesContainerRef}
+        className={className}
       />
     </>
   );

packages/vscode-webui/src/features/chat/components/chat-toolbar.tsx

@@ -32,6 +32,7 @@ import { useInlineCompactTask } from "../hooks/use-inline-compact-task";
 import { useNewCompactTask } from "../hooks/use-new-compact-task";
 import type { SubtaskInfo } from "../hooks/use-subtask-info";
 import { ChatInputForm } from "./chat-input-form";
+import { ErrorMessageView } from "./error-message-view";
 import { CompleteSubtaskButton } from "./subtask";
 
 interface ChatToolbarProps {
@@ -189,14 +190,19 @@ export const ChatToolbar: React.FC<ChatToolbarProps> = ({
 
   return (
     <>
-      <CompleteSubtaskButton subtask={subtask} messages={messages} />
-      <ApprovalButton
-        pendingApproval={pendingApproval}
-        retry={retry}
-        allowAddToolResult={allowAddToolResult}
-        isSubTask={isSubTask}
-        task={task}
-      />
+      <div className="-translate-y-full -top-2 absolute left-0 w-full px-4 pt-1">
+        <div className="bg-background">
+          <ErrorMessageView error={displayError} />
+          <CompleteSubtaskButton subtask={subtask} messages={messages} />
+          <ApprovalButton
+            pendingApproval={pendingApproval}
+            retry={retry}
+            allowAddToolResult={allowAddToolResult}
+            isSubTask={isSubTask}
+            task={task}
+          />
+        </div>
+      </div>
       {todos && todos.length > 0 && (
         <TodoList todos={todos} className="mt-2">
           <TodoList.Header />

packages/vscode-webui/src/features/chat/components/error-message-view.tsx

@@ -18,6 +18,7 @@ export function ErrorMessageView({
   return (
     <ErrorMessage
       error={debouncedError}
+      collapsible
       formatter={(e) => {
         if (e.message === PochiApiErrors.ReachedCreditLimit) {
           return (

packages/vscode-webui/src/features/chat/page.tsx

@@ -24,6 +24,7 @@ import { useTranslation } from "react-i18next";
 
 import { useLatest } from "@/lib/hooks/use-latest";
 import { useMcp } from "@/lib/hooks/use-mcp";
+import { cn } from "@/lib/utils";
 import { useApprovalAndRetry } from "../approval";
 import { getReadyForRetryError } from "../retry/hooks/use-ready-for-retry-error";
 import {
@@ -37,7 +38,6 @@ import {
 } from "../settings/hooks/use-tool-auto-approval";
 import { ChatArea } from "./components/chat-area";
 import { ChatToolbar } from "./components/chat-toolbar";
-import { ErrorMessageView } from "./components/error-message-view";
 import { SubtaskHeader } from "./components/subtask";
 import { useRestoreTaskModel } from "./hooks/use-restore-task-model";
 import { useScrollToBottom } from "./hooks/use-scroll-to-bottom";
@@ -326,9 +326,12 @@ function Chat({ user, uid, prompt, files }: ChatProps) {
         isLoading={isLoading}
         user={user || defaultUser}
         messagesContainerRef={messagesContainerRef}
+        className={cn({
+          // Leave more space for errors as errors / approval button are absolutely positioned
+          "pb-14": !!displayError,
+        })}
       />
-      <div className="flex flex-col px-4">
-        <ErrorMessageView error={displayError} />
+      <div className="relative flex flex-col px-4">
         {!isWorkspaceActive ? (
           <WorkspaceRequiredPlaceholder
             isFetching={isFetchingWorkspace}

packages/vscode-webui/src/features/settings/components/auto-approve-menu.tsx

@@ -169,7 +169,7 @@ export function AutoApproveMenu({ isSubTask }: { isSubTask: boolean }) {
       <PopoverTrigger asChild>
         <div
           className={cn(
-            "relative mt-2 flex cursor-pointer select-none items-center justify-between py-2.5",
+            "relative flex cursor-pointer select-none items-center justify-between py-2.5",
           )}
         >
           <div className="flex w-full overflow-x-hidden">