@nextclaw/ui 0.15.22 → 0.15.23

package/src/features/chat/components/conversation/__tests__/chat-conversation-workspace-section.test.tsx

@@ -1,7 +1,10 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { PersistStorage, StorageValue } from "zustand/middleware";
 import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
+import { ChatSessionListManager } from "@/features/chat/managers/chat-session-list.manager";
+import { ChatThreadManager } from "@/features/chat/managers/chat-thread.manager";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import type { NcpSessionSummaryView } from "@/shared/lib/api";
@@ -90,8 +93,7 @@ describe("ChatConversationWorkspaceSection", () => {
         activeChildSessionKey: null,
         workspaceNavigationHistory: [],
         workspaceNavigationHistoryIndex: 0,
-        sessionProjectRoot: null,
-        sessionWorkingDir: null,
+        draftProjectRoot: null,
         workspacePanelWidth: 620,
       },
     });
@@ -156,4 +158,68 @@ describe("ChatConversationWorkspaceSection", () => {
 
     expect(screen.getByTestId("workspace-panel")).toBeTruthy();
   });
+
+  it("uses the selected draft project before the first message creates a session", () => {
+    useChatThreadStore.getState().setSnapshot({
+      draftProjectRoot: "/Users/peiwang/Projects/draft-project",
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: "project-files",
+      workspaceFileTabs: [],
+      activeWorkspaceFileKey: null,
+    });
+
+    render(
+      <ChatConversationWorkspaceSection
+        layoutMode="desktop"
+        sessionKey={null}
+      />,
+    );
+
+    expect(mocks.panelProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sessionProjectRoot: "/Users/peiwang/Projects/draft-project",
+        sessionWorkingDir: "/Users/peiwang/Projects/draft-project",
+      }),
+    );
+  });
+
+  it("keeps the workspace panel mounted while a root draft materializes", () => {
+    useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
+    useChatThreadStore.getState().setSnapshot({
+      draftProjectRoot: "/Users/peiwang/Projects/nextbot",
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: "project-files",
+      workspaceFileTabs: [],
+      activeWorkspaceFileKey: null,
+    });
+    const uiManager = {
+      goToSession: vi.fn(),
+      isAtChatRoot: vi.fn(() => true),
+    } as unknown as ConstructorParameters<typeof ChatThreadManager>[0];
+    const manager = new ChatThreadManager(
+      uiManager,
+      new ChatSessionListManager(uiManager),
+    );
+    function WorkspaceHarness() {
+      const sessionKey = useChatSessionListStore(
+        (state) => state.snapshot.selectedSessionKey,
+      );
+      return (
+        <ChatConversationWorkspaceSection
+          layoutMode="desktop"
+          sessionKey={sessionKey}
+        />
+      );
+    }
+
+    render(<WorkspaceHarness />);
+    const draftPanel = screen.getByTestId("workspace-panel");
+
+    act(() => manager.materializeRootDraftSession("session-1"));
+
+    expect(screen.getByTestId("workspace-panel")).toBe(draftPanel);
+    expect(uiManager.goToSession).toHaveBeenCalledWith("session-1", {
+      replace: true,
+    });
+  });
 });

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -18,44 +18,54 @@ import { t } from "@/shared/lib/i18n";
 
 type ChatConversationContentProps = {
   bottomSlot?: ReactNode;
-  isAwaitingAssistantOutput: boolean;
+  canContinue?: boolean;
   isHistoryLoading: boolean;
   hasPreviousMessages: boolean;
   historyError: Error | null;
   isLoadingPreviousMessages: boolean;
   isContextCompacting?: boolean;
   isSending: boolean;
+  messageActionsDisabled?: boolean;
   messages: readonly NcpMessage[];
   sessionKey: string | null;
   showWelcome: boolean;
   onLoadPreviousMessages: () => Promise<void>;
+  onContinueRun?: () => Promise<void> | void;
+  onEditMessage?: (payload: {
+    readonly message: NcpMessage;
+    readonly messageId: string;
+  }) => Promise<void> | void;
   welcomeSlot?: ReactNode;
 };
 
 export function ChatConversationContent({
   bottomSlot,
-  isAwaitingAssistantOutput,
+  canContinue = false,
   isHistoryLoading,
   hasPreviousMessages,
   historyError,
   isLoadingPreviousMessages,
   isContextCompacting = false,
   isSending,
+  messageActionsDisabled = false,
   messages,
   sessionKey,
   showWelcome,
   onLoadPreviousMessages,
+  onContinueRun,
+  onEditMessage,
   welcomeSlot,
 }: ChatConversationContentProps) {
   const threadRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const hasConversationContent = messages.length > 0 || isSending;
   const { isAtBottom, onScroll, scrollToBottom } = useStickyBottomScroll({
     contentRef,
     scrollRef: threadRef,
     resetKey: sessionKey,
     isLoading: isHistoryLoading,
-    hasContent: messages.length > 0,
-    contentVersion: messages[messages.length - 1] ?? null,
+    hasContent: hasConversationContent,
+    contentVersion: messages[messages.length - 1] ?? isSending,
   });
   const hasMessages = messages.length > 0;
   const handleScroll = useCallback(
@@ -89,7 +99,7 @@ export function ChatConversationContent({
           (welcomeSlot ?? null)
         ) : (
           <div ref={contentRef} className="pb-7">
-            {hasMessages ? (
+            {hasConversationContent ? (
               <ChatConversationTrack className="relative py-4 sm:py-5">
                 {historyError ? (
                   <div role="alert" className="flex h-8 justify-center">
@@ -109,8 +119,12 @@ export function ChatConversationContent({
                   />
                 ) : null}
                 <ChatMessageListContainer
+                  canContinue={canContinue}
                   messages={messages}
-                  isSending={isSending && isAwaitingAssistantOutput}
+                  isSending={isSending}
+                  messageActionsDisabled={messageActionsDisabled}
+                  onContinueRun={onContinueRun}
+                  onEditMessage={onEditMessage}
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
                 />

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -89,14 +89,10 @@ export function ChatConversationHeaderSection({
   const shouldShowHeaderAgentAvatar =
     normalizedAgentId.length > 0 && normalizedAgentId.toLowerCase() !== "main";
   const isWorkspaceOpen = Boolean(
-    sessionKey &&
-      snapshot.workspacePanelParentKey === sessionKey &&
+    snapshot.workspacePanelParentKey === sessionKey &&
       snapshot.activeWorkspacePanelKind,
   );
   const toggleWorkspace = () => {
-    if (!sessionKey) {
-      return;
-    }
     presenter.chatThreadManager.toggleWorkspacePanel(sessionKey);
   };
 
@@ -154,33 +150,36 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       actions={
-        sessionKey ? (
-          <div className="flex shrink-0 items-center gap-1.5">
-            {layoutMode === "mobile" ? (
-              <IconActionButton
-                icon={<SquarePen className="h-4 w-4" />}
-                label={t("chatSidebarNewTask")}
-                tooltip={false}
-                onClick={() =>
-                  presenter.chatSessionListManager.createSession({
-                    sessionType: newSessionTypePreference.selectedSessionType,
-                  })
-                }
-              />
-            ) : null}
-            <ChatSessionHeaderActions
-              sessionKey={sessionKey}
-              canDeleteSession={canDeleteSession}
-              isDeletePending={snapshot.isDeletePending}
-              currentPath={sessionProjectRoot ?? selectedSession?.workingDir ?? null}
-              defaultWorkspacePath={defaultWorkspacePath}
-              metadata={selectedSession?.metadata ?? null}
-              isWorkspaceOpen={isWorkspaceOpen}
-              onToggleWorkspace={toggleWorkspace}
-              onDeleteSession={presenter.chatThreadManager.deleteSession}
+        <div className="flex shrink-0 items-center gap-1.5">
+          {layoutMode === "mobile" && sessionKey ? (
+            <IconActionButton
+              icon={<SquarePen className="h-4 w-4" />}
+              label={t("chatSidebarNewTask")}
+              tooltip={false}
+              onClick={() =>
+                presenter.chatSessionListManager.createSession({
+                  sessionType: newSessionTypePreference.selectedSessionType,
+                })
+              }
             />
-          </div>
-        ) : null
+          ) : null}
+          <ChatSessionHeaderActions
+            sessionKey={sessionKey}
+            canDeleteSession={canDeleteSession}
+            isDeletePending={snapshot.isDeletePending}
+            currentPath={
+              sessionProjectRoot ??
+              selectedSession?.workingDir ??
+              snapshot.draftProjectRoot ??
+              defaultWorkspacePath
+            }
+            defaultWorkspacePath={defaultWorkspacePath}
+            metadata={selectedSession?.metadata ?? null}
+            isWorkspaceOpen={isWorkspaceOpen}
+            onToggleWorkspace={toggleWorkspace}
+            onDeleteSession={presenter.chatThreadManager.deleteSession}
+          />
+        </div>
       }
     />
   );

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from "react";
 import { ChatConversationHeaderSection } from "@/features/chat/components/conversation/chat-conversation-header-section";
 import { ChatConversationParentBanner } from "@/features/chat/components/conversation/chat-conversation-parent-banner";
 import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
@@ -19,12 +18,6 @@ export function ChatConversationPanel({
   const sessionKey = useChatSessionListStore(
     (state) => state.snapshot.selectedSessionKey,
   );
-  const handleSessionMaterialized = useCallback((materializedSessionKey: string) => {
-    if (!presenter.chatUiManager.isAtChatRoot()) {
-      return;
-    }
-    presenter.chatUiManager.goToSession(materializedSessionKey, { replace: true });
-  }, [presenter]);
 
   return (
     <section className="relative flex-1 min-h-0 flex overflow-hidden bg-background">
@@ -37,7 +30,7 @@ export function ChatConversationPanel({
         <SessionConversationArea
           consumeDraftIntent
           sessionKey={sessionKey}
-          onSessionMaterialized={handleSessionMaterialized}
+          onSessionMaterialized={presenter.chatThreadManager.materializeRootDraftSession}
         />
       </div>
 

package/src/features/chat/components/conversation/chat-conversation-workspace-section.tsx

@@ -2,6 +2,8 @@ import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/co
 import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { useChatConversationWorkspaceState } from "@/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
 type ChatConversationWorkspaceSectionProps = {
   layoutMode: "desktop" | "mobile";
@@ -13,7 +15,15 @@ export function ChatConversationWorkspaceSection({
   sessionKey,
 }: ChatConversationWorkspaceSectionProps) {
   const snapshot = useChatThreadStore((state) => state.snapshot);
+  const defaultWorkspacePath = useChatQueryStore((state) =>
+    normalizeSessionProjectRootValue(
+      state.snapshot.configQuery?.data?.agents.defaults.workspace,
+    ),
+  );
   const selectedSession = useNcpChatSelectedSession(sessionKey);
+  const draftProjectRoot = sessionKey
+    ? null
+    : snapshot.draftProjectRoot ?? defaultWorkspacePath;
   const {
     childSessionTabs,
     activeSideChatDraft,
@@ -29,7 +39,7 @@ export function ChatConversationWorkspaceSection({
   return (
     <ChatSessionWorkspacePanel
       sessionKey={sessionKey}
-      childSessionTabs={childSessionTabs}
+      childSessionTabs={sessionKey ? childSessionTabs : []}
       activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
       activeSideChatDraft={activeSideChatDraft}
       workspaceFileTabs={workspaceFileTabs}
@@ -38,10 +48,12 @@ export function ChatConversationWorkspaceSection({
       workspaceNavigationHistory={snapshot.workspaceNavigationHistory}
       workspaceNavigationHistoryIndex={snapshot.workspaceNavigationHistoryIndex}
       activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
-      sessionCronJobs={sessionCronJobs}
-      sessionProjectRoot={selectedSession?.projectRoot ?? null}
+      sessionCronJobs={sessionKey ? sessionCronJobs : []}
+      sessionProjectRoot={selectedSession?.projectRoot ?? draftProjectRoot}
       sessionWorkingDir={
-        selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null
+        selectedSession?.workingDir ??
+        selectedSession?.projectRoot ??
+        draftProjectRoot
       }
       workspacePanelWidth={snapshot.workspacePanelWidth}
       displayMode={layoutMode === "mobile" ? "overlay" : "docked"}

package/src/features/chat/components/layout/__tests__/chat-page-shell.test.tsx

@@ -39,6 +39,29 @@ vi.mock("@/features/marketplace", () => ({
 }));
 
 describe("ChatPageLayout", () => {
+  it("uses the same canvas width for management pages", () => {
+    const agentsView = render(
+      <ChatPageLayout view="agents" confirmDialog={<div />} />,
+    );
+    const agentsCanvas = screen.getByText("Agents").parentElement;
+
+    expect(agentsCanvas?.className).toContain("max-w-[min(1180px,100%)]");
+    agentsView.unmount();
+
+    const cronView = render(
+      <ChatPageLayout view="cron" confirmDialog={<div />} />,
+    );
+    const cronCanvas = screen.getByText("Cron").parentElement;
+
+    expect(cronCanvas?.className).toContain("max-w-[min(1180px,100%)]");
+    cronView.unmount();
+
+    render(<ChatPageLayout view="skills" confirmDialog={<div />} />);
+    const skillsCanvas = screen.getByText("Marketplace").parentElement;
+
+    expect(skillsCanvas?.className).toContain("max-w-[min(1180px,100%)]");
+  });
+
   it("uses the dedicated mobile chat shell instead of the desktop split layout", () => {
     useViewportLayoutMock.mockReturnValue({
       mode: "mobile",

package/src/features/chat/components/layout/__tests__/chat-sidebar-toolbar.test.tsx

@@ -37,11 +37,17 @@ describe("ChatSidebarToolbar", () => {
     render(<ChatSidebarDesktopToolbar {...toolbarProps} />);
 
     expect(searchIconClassName()).toContain("pointer-events-none");
+    expect(
+      screen.getByPlaceholderText("Search conversations...").className,
+    ).toContain("border-0");
   });
 
   it("keeps mobile search icon transparent to pointer input", () => {
     render(<ChatSidebarMobileToolbar {...toolbarProps} />);
 
     expect(searchIconClassName()).toContain("pointer-events-none");
+    expect(
+      screen.getByPlaceholderText("Search conversations...").className,
+    ).toContain("border-0");
   });
 });

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -11,6 +11,7 @@ export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox";
 export type ChatPageProps = {
   view: MainPanelView;
 };
+const MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS = "max-w-[min(1180px,100%)]";
 type UseChatSessionSyncParams = {
   routeSessionKey: string | null;
   syncRouteSessionSelection: (routeSessionKey: string | null) => void;
@@ -44,24 +45,24 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-background">
           {view === "inbox" ? (
-            <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1180px,100%)] flex-col py-4 sm:px-6 sm:py-5">
+            <div className={`mx-auto flex h-full min-h-0 w-full flex-col py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
               <InboxPage />
             </div>
           ) : view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
-              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
+              <div className={`mx-auto w-full px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
                 <CronConfig />
               </div>
             </div>
           ) : view === "agents" ? (
             <div className="h-full overflow-auto custom-scrollbar">
-              <div className="mx-auto w-full max-w-[min(1180px,100%)] px-4 py-4 sm:px-6 sm:py-5">
+              <div className={`mx-auto w-full px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
                 <AgentsPage />
               </div>
             </div>
           ) : (
             <div className="h-full overflow-hidden">
-              <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1120px,100%)] flex-col px-4 py-4 sm:px-6 sm:py-5">
+              <div className={`mx-auto flex h-full min-h-0 w-full flex-col px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
                 <MarketplacePage forcedType="skills" />
               </div>
             </div>

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -197,7 +197,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-8 rounded-lg border-transparent bg-background/55 pl-8 text-xs shadow-none hover:bg-background/75"
+            className="h-8 rounded-lg border-0 bg-background/55 pl-8 text-xs shadow-none hover:bg-background/75"
           />
         </div>
       </div>
@@ -226,7 +226,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-9 rounded-full border-transparent bg-muted pl-9 pr-3 text-[13px] shadow-none focus:border-border focus:bg-card"
+            className="h-9 rounded-full border-0 bg-muted pl-9 pr-3 text-[13px] shadow-none"
           />
         </div>
 
@@ -240,7 +240,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
                 icon={<Plus className="h-4 w-4" />}
                 label={t("chatSidebarNewTask")}
                 tooltip={false}
-                className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
+                className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
               />
             </PopoverTrigger>
             <ChatPopoverContent
@@ -263,7 +263,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
           <IconActionButton
             icon={<Plus className="h-4 w-4" />}
             label={t("chatSidebarNewTask")}
-            className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-accent hover:text-accent-foreground"
+            className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
             onClick={() => onCreateSession(defaultSessionType)}
           />
         )}

package/src/features/chat/components/providers/chat-presenter.provider.tsx

@@ -5,6 +5,7 @@ import type {
 import type { ChatUiManager } from '@/features/chat/managers/chat-ui.manager';
 import type { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import type { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
+import type { ChatComposerIntentManager } from '@/features/chat/managers/chat-composer-intent.manager';
 
 type PublicManager<T extends object> = Pick<T, keyof T>;
 
@@ -15,6 +16,7 @@ export type ChatPresenterLike = {
   chatQueryManager: ChatQueryManager;
   chatSessionListManager: ChatSessionListManager;
   chatThreadManager: ChatThreadManagerLike;
+  chatComposerIntentManager: ChatComposerIntentManager;
 };
 
 const ChatPresenterContext = createContext<ChatPresenterLike | null>(null);

package/src/features/chat/features/conversation/components/__tests__/session-conversation-area.test.tsx

@@ -39,7 +39,7 @@ const mocks = vi.hoisted(() => {
     selectedSessionType: "default",
     pendingProjectRoot: null,
     composerFocusRequestId: 0,
-    sendError: null,
+    sendError: null as string | null,
   };
   const inputQuery = {
     defaultModel: undefined as string | undefined,
@@ -52,6 +52,7 @@ const mocks = vi.hoisted(() => {
     selectedSession: null as null | {
       activityPreview?: {
         state: "running" | "completed" | "failed" | "cancelled" | "idle";
+        statusKind?: "run-failed" | "run-interrupted";
         statusText?: string;
         replyText?: string;
       };
@@ -86,11 +87,11 @@ const mocks = vi.hoisted(() => {
     isHydrating: false,
     isRunning: true,
     isSending: true,
-    hydrateError: null,
+    hydrateError: null as Error | null,
     snapshot: {
       activeRun: null,
       contextWindow: null,
-      error: null,
+      error: null as { code?: string; message: string } | null,
     },
     send: vi.fn(),
     abort: vi.fn(),
@@ -206,8 +207,11 @@ vi.mock(
 vi.mock(
   "@/features/chat/features/conversation/hooks/use-session-conversation-input-state",
   () => ({
-    useSessionConversationInputState: (initialPrompt?: string | null) => {
-      mocks.initialPromptSpy(initialPrompt);
+    useSessionConversationInputState: (
+      initialPrompt?: string | null,
+      sessionKey?: string | null,
+    ) => {
+      mocks.initialPromptSpy(initialPrompt, sessionKey);
       return {
         inputActions: mocks.inputActions,
         inputSnapshot: mocks.inputSnapshot,
@@ -265,7 +269,11 @@ describe("SessionConversationArea input boundary", () => {
     mocks.agent.isHydrating = false;
     mocks.agent.isRunning = true;
     mocks.agent.isSending = true;
+    mocks.agent.hydrateError = null;
     mocks.agent.snapshot.contextWindow = null;
+    mocks.agent.snapshot.error = null;
+    mocks.controller.isSending = true;
+    mocks.inputSnapshot.sendError = null;
     mocks.inputQuery.defaultModel = undefined;
     mocks.inputQuery.fallbackPreferredModel = undefined;
     mocks.inputQuery.selectedSession = null;
@@ -319,13 +327,27 @@ describe("SessionConversationArea input boundary", () => {
       .toBe("false");
   });
 
-  it("does not replace the welcome composer just because draft send starts", () => {
-    renderArea(null);
+  it("leaves the welcome surface on the first local sending render", () => {
+    mocks.agent.isRunning = false;
+    mocks.agent.isSending = false;
+    mocks.controller.isSending = false;
+    const rendered = renderArea(null);
 
     expect(screen.getByTestId("conversation-content").dataset.showWelcome).toBe(
       "true",
     );
-    expect(screen.getByTestId("welcome")).toBeTruthy();
+
+    mocks.controller.isSending = true;
+    rendered.rerender(
+      <MemoryRouter>
+        <SessionConversationArea sessionKey={null} />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId("conversation-content").dataset.showWelcome).toBe(
+      "false",
+    );
+    expect(screen.queryByTestId("welcome")).toBeNull();
     expect(screen.getByTestId("conversation-input")).toBeTruthy();
   });
 
@@ -349,7 +371,13 @@ describe("SessionConversationArea input boundary", () => {
       </MemoryRouter>,
     );
 
-    expect(mocks.initialPromptSpy).toHaveBeenCalledWith("每天整理项目风险");
+    expect(mocks.initialPromptSpy).toHaveBeenCalledWith(
+      "每天整理项目风险",
+      null,
+    );
+    expect(mocks.inputActions.applyPromptSuggestion).toHaveBeenCalledWith(
+      "每天整理项目风险",
+    );
   });
 
   it("syncs draft preferences with the selected runtime context", () => {
@@ -380,7 +408,7 @@ describe("SessionConversationArea input boundary", () => {
     mocks.inputQuery.selectedSession = {
       activityPreview: {
         state: "failed",
-        statusText: "Run failed: Invalid API Key",
+        statusText: "Invalid API Key",
       },
       status: "idle",
     };
@@ -388,8 +416,31 @@ describe("SessionConversationArea input boundary", () => {
     renderArea("session-1");
 
     expect(screen.getByTestId("conversation-bottom-slot")).toBeTruthy();
-    expect(screen.getByText(/出错了|Something went wrong/)).toBeTruthy();
-    expect(screen.getByText(/Failed · Invalid API Key|失败 · Invalid API Key/)).toBeTruthy();
+    expect(screen.getByText("Invalid API Key")).toBeTruthy();
+  });
+
+  it("renders overlapping runtime failures once with a subdued diagnostic surface", () => {
+    const providerError = `Chat Completions API failed (402): {\n  "error": "${"x".repeat(240)} END_OF_PROVIDER_ERROR"\n}`;
+    mocks.inputSnapshot.sendError = providerError;
+    mocks.agent.snapshot.error = { message: providerError };
+    mocks.inputQuery.selectedSession = {
+      activityPreview: {
+        state: "failed",
+        statusText: providerError,
+      },
+      status: "idle",
+    };
+
+    renderArea("session-1");
+
+    expect(screen.getAllByRole("status")).toHaveLength(1);
+    const failureStatus = screen.getByRole("status");
+    expect(failureStatus.className).toContain("bg-muted/45");
+    expect(failureStatus.className).not.toContain("bg-red");
+    const errorDetail = failureStatus.querySelector("pre");
+    expect(errorDetail?.className).toContain("max-h-32");
+    expect(errorDetail?.className).toContain("overflow-auto");
+    expect(errorDetail?.textContent).toBe(providerError);
   });
 
   it("does not surface user-cancelled previews as conversation errors", () => {
@@ -406,4 +457,25 @@ describe("SessionConversationArea input boundary", () => {
     expect(screen.queryByTestId("conversation-bottom-slot")).toBeNull();
     expect(screen.queryByText(/出错了|Something went wrong/)).toBeNull();
   });
+
+  it("does not expose recovered runtime interruption diagnostics as task errors", () => {
+    const recoveryDetail = "Run interrupted: internal recovery detail.";
+    mocks.agent.snapshot.error = {
+      code: "run-interrupted",
+      message: recoveryDetail,
+    };
+    mocks.inputQuery.selectedSession = {
+      activityPreview: {
+        state: "failed",
+        statusKind: "run-interrupted",
+        statusText: recoveryDetail,
+      },
+      status: "idle",
+    };
+
+    renderArea("session-1");
+
+    expect(screen.queryByTestId("conversation-bottom-slot")).toBeNull();
+    expect(screen.queryByText(recoveryDetail)).toBeNull();
+  });
 });