@nextclaw/ui 0.27.0 → 0.27.2

package/src/features/agents/components/__tests__/agents-page.test.tsx

@@ -10,6 +10,7 @@ import {
 import { setLanguage } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
+  openResource: vi.fn(),
   createAgent: vi.fn(),
   updateAgent: vi.fn(),
   deleteAgent: vi.fn(),
@@ -99,6 +100,7 @@ const mocks = vi.hoisted(() => ({
     },
   },
 }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { open: mocks.openResource } }) }));
 const persistStorage = new Map<string, unknown>();
 
 function createPersistStorage() {
@@ -290,18 +292,19 @@ describe("AgentsPage", () => {
   it("separates read-only details from editing and keeps advanced config collapsed until requested", async () => {
     const user = userEvent.setup();
 
-    renderAgentsPage();
+    const view = renderAgentsPage();
 
     await user.click(screen.getAllByRole("button", { name: "更多操作" })[1]);
     await user.click(screen.getByRole("button", { name: "查看详情" }));
+    expect(mocks.openResource).toHaveBeenCalled();
+    view.rerender(<MemoryRouter><AgentsPage resourceId="researcher" /></MemoryRouter>);
 
     expect(screen.getByText("身份")).toBeTruthy();
     expect(screen.getByText("上下文窗口大小")).toBeTruthy();
     expect(screen.getByText("128,000")).toBeTruthy();
     expect(screen.queryByRole("button", { name: "保存编辑" })).toBeNull();
-    const detailsDialog = screen.getByText("身份").closest("[role='dialog']");
-    expect(detailsDialog?.className).toContain("sm:max-w-2xl");
-    expect(detailsDialog?.className).toContain("bg-popover");
+    const detailsDialog = screen.getByTestId("agent-detail");
+    expect(screen.queryByRole("dialog")).toBeNull();
     const detailLists = Array.from(detailsDialog?.querySelectorAll("dl") ?? []);
     expect(detailLists.length).toBeGreaterThan(0);
     expect(
@@ -327,7 +330,7 @@ describe("AgentsPage", () => {
         (term) => {
           const item = term.parentElement;
           return Boolean(
-            item?.className.includes("grid-cols-[10rem_minmax(0,1fr)]") &&
+            item?.className.includes("grid-cols-[minmax(0,30%)_minmax(0,1fr)]") &&
               !item.className.includes("space-y"),
           );
         },

package/src/features/agents/components/agent-details-dialog.tsx

@@ -20,6 +20,8 @@ import { Bot, Brain, Gauge, Pencil, Sparkles, type LucideIcon } from "lucide-rea
 type AgentDefaultsView = ConfigView["agents"]["defaults"];
 
 type AgentDetailsDialogProps = {
+  embedded?: boolean;
+  onChat?: (agent: AgentProfileView) => void;
   agent: AgentProfileView | null;
   defaults?: AgentDefaultsView;
   runtimeOptions: { value: string; label: string }[];
@@ -32,6 +34,8 @@ type AgentDetailsDialogProps = {
 const numberFormatter = new Intl.NumberFormat();
 
 export function AgentDetailsDialog({
+  embedded = false,
+  onChat,
   agent,
   defaults,
   runtimeOptions,
@@ -70,11 +74,11 @@ export function AgentDetailsDialog({
   );
   const models = resolveRecordValue(agent.models, defaults?.models);
 
-  return (
-    <Dialog open={agent !== null} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">
+  const content = (
+    <>
         <div className="shrink-0 px-5 pb-3 pt-5">
           <DialogHeader
+            showClose={!embedded}
             className="items-center"
             actions={<PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />}
           >
@@ -113,13 +117,11 @@ export function AgentDetailsDialog({
             <DetailItem
               label={t("agentsDetailsFieldDescription")}
               value={agent.description?.trim() || t("agentsDetailsEmptyValue")}
-              wide
             />
             <DetailItem
               label={t("agentsDetailsFieldWorkspace")}
               value={agent.workspace ?? t("agentsDetailsUnsetValue")}
               mono
-              wide
             />
           </DetailSection>
 
@@ -186,13 +188,14 @@ export function AgentDetailsDialog({
           </DetailSection>
         </div>
         <DialogFooter className="shrink-0 px-5 pb-4 pt-2">
-          <Button
+          {!embedded && <Button
             type="button"
             variant="ghost"
             onClick={() => onOpenChange(false)}
           >
             {t("cancel")}
-          </Button>
+          </Button>}
+          {onChat && <Button onClick={() => onChat(agent)}>{t("agentsCardStartChat")}</Button>}
           <Button
             type="button"
             variant="primary"
@@ -203,9 +206,13 @@ export function AgentDetailsDialog({
             {t("agentsDetailsEditAction")}
           </Button>
         </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    </>
   );
+  return <Dialog open={!embedded && agent !== null} onOpenChange={onOpenChange}>
+    {embedded ? <div className="flex h-full min-h-0 flex-col" data-testid="agent-detail">{content}</div> : (
+      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">{content}</DialogContent>
+    )}
+  </Dialog>;
 }
 
 type DetailSource = "default" | "override";
@@ -322,7 +329,7 @@ function DetailSection(props: {
         <Icon className="h-3.5 w-3.5 text-muted-foreground" />
         {title}
       </h3>
-      <dl className="grid min-w-0 gap-x-6 gap-y-2.5 pl-5 sm:grid-cols-2">
+      <dl className="grid min-w-0 gap-y-2.5 pl-5">
         {children}
       </dl>
     </section>
@@ -335,7 +342,6 @@ function DetailItem(props: {
   source?: DetailSource;
   mono?: boolean;
   prewrap?: boolean;
-  wide?: boolean;
 }) {
   const {
     label,
@@ -343,7 +349,6 @@ function DetailItem(props: {
     source,
     mono = false,
     prewrap = false,
-    wide = false,
   } = props;
 
   const isStructuredValue = prewrap && value.trim().startsWith("{");
@@ -352,12 +357,11 @@ function DetailItem(props: {
   return (
     <div
       className={cn(
-        "grid min-w-0 grid-cols-1 sm:grid-cols-[10rem_minmax(0,1fr)] items-baseline gap-x-2 gap-y-1",
-        (wide || isStructuredValue) && "sm:col-span-2",
+        "grid min-w-0 grid-cols-[minmax(0,30%)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1",
       )}
     >
       <dt className="flex min-w-0 items-baseline leading-5">
-        <span className="whitespace-nowrap text-xs font-medium text-muted-foreground">
+        <span className="text-xs font-medium text-muted-foreground">
           {label}
         </span>
       </dt>

package/src/features/agents/components/agents-page.tsx

@@ -48,6 +48,8 @@ import {
   Trash2,
 } from "lucide-react";
 import { toast } from "sonner";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { useNavigate } from "react-router-dom";
 
 const AGENT_CREATION_PROMPT =
   "请直接创建一个默认示例 Agent，不要问我问题。创建完成后，简单告诉我它能做什么。";
@@ -200,19 +202,19 @@ function AgentListCard(props: {
               <AgentActionMenuItem
                 icon={Eye}
                 label={t("agentsViewDetailsAction")}
-                onClick={onView}
+                onClick={() => { setMenuOpen(false); onView(); }}
               />
               <AgentActionMenuItem
                 icon={Pencil}
                 label={t("agentsEditAction")}
-                onClick={onEdit}
+                onClick={() => { setMenuOpen(false); onEdit(); }}
                 disabled={updatePending}
               />
               {!agent.builtIn ? (
                 <AgentActionMenuItem
                   icon={Trash2}
                   label={t("agentsRemoveAction")}
-                  onClick={onDelete}
+                  onClick={() => { setMenuOpen(false); onDelete(); }}
                   disabled={deletePending}
                   destructive
                 />
@@ -245,7 +247,9 @@ function AgentListCard(props: {
   );
 }
 
-export function AgentsPage() {
+export function AgentsPage({ resourceId }: { resourceId?: string } = {}) {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
   const presenter = usePresenter();
   const agentsQuery = useAgents();
   const configQuery = useConfig();
@@ -254,9 +258,6 @@ export function AgentsPage() {
   const sessionTypesQuery = useNcpChatSessionTypes();
   const updateAgent = useUpdateAgent();
   const deleteAgent = useDeleteAgent();
-  const [viewingAgent, setViewingAgent] = useState<AgentProfileView | null>(
-    null,
-  );
   const [editingAgent, setEditingAgent] = useState<AgentProfileView | null>(
     null,
   );
@@ -300,7 +301,7 @@ export function AgentsPage() {
   const agentDefaults = configQuery.data?.agents.defaults;
 
   const handleStartView = (agent: AgentProfileView) => {
-    setViewingAgent(agent);
+    app.pageResourceManager.open(pageResourceFromSystemObject("agent", agent.id, agent.displayName || agent.id), "default", navigate);
   };
 
   const handleStartEdit = (agent: AgentProfileView) => {
@@ -340,6 +341,23 @@ export function AgentsPage() {
     );
   };
 
+  const editDialog = <AgentEditDialog
+    agent={editingAgent} pending={updateAgent.isPending} providerCatalog={providerCatalog}
+    runtimeOptions={runtimeOptions} defaultRuntime={defaultRuntime}
+    onOpenChange={(open) => { if (!open && !updateAgent.isPending) setEditingAgent(null); }}
+    onSubmit={handleUpdate} />;
+  if (resourceId) {
+    const agent = agents.find((item) => item.id === resourceId) ?? null;
+    if (agentsQuery.isPending) return <p role="status" className="p-4">{t("loading")}</p>;
+    if (agentsQuery.isError) return <div className="p-4"><p role="alert">{t("resourceLoadFailed")}</p><button onClick={() => void agentsQuery.refetch()}>{t("resourceRetry")}</button></div>;
+    if (!agent) return <p role="alert" className="p-4">{t(agentsQuery.isError ? "resourceLoadFailed" : "resourceNotFound")}</p>;
+    return <>
+      <AgentDetailsDialog embedded agent={agent} defaults={agentDefaults} runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime} defaultRuntimeLabel={defaultRuntimeLabel}
+        onOpenChange={() => {}} onEdit={handleStartEdit} onChat={startChatWithAgent} />
+      {editDialog}
+    </>;
+  }
   return (
     <PageLayout className="space-y-6">
       <PageHeader
@@ -408,36 +426,7 @@ export function AgentsPage() {
         )}
       </div>
 
-      <AgentDetailsDialog
-        agent={viewingAgent}
-        defaults={agentDefaults}
-        runtimeOptions={runtimeOptions}
-        defaultRuntime={defaultRuntime}
-        defaultRuntimeLabel={defaultRuntimeLabel}
-        onOpenChange={(open) => {
-          if (!open) {
-            setViewingAgent(null);
-          }
-        }}
-        onEdit={(agent) => {
-          setViewingAgent(null);
-          setEditingAgent(agent);
-        }}
-      />
-
-      <AgentEditDialog
-        agent={editingAgent}
-        pending={updateAgent.isPending}
-        providerCatalog={providerCatalog}
-        runtimeOptions={runtimeOptions}
-        defaultRuntime={defaultRuntime}
-        onOpenChange={(open) => {
-          if (!open && !updateAgent.isPending) {
-            setEditingAgent(null);
-          }
-        }}
-        onSubmit={handleUpdate}
-      />
+      {editDialog}
     </PageLayout>
   );
 }

package/src/features/app-data/components/app-retained-data-section.tsx

@@ -12,7 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/shared/components/ui/dialog';
-import { Skeleton } from '@/shared/components/ui/skeleton';
+import { SkeletonContent } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function AppRetainedDataSection({
@@ -57,7 +57,7 @@ export function AppRetainedDataSection({
           {t('appDataRetainedDescription')}
         </p>
       </div>
-      {isLoading ? <Skeleton className="h-28 w-full rounded-xl" /> : null}
+      {isLoading ? <div role="status" aria-label={t('appPackagesLoading')}><SkeletonContent /></div> : null}
       {error ? (
         <div role="alert" className="rounded-xl border border-destructive/20 bg-destructive/5 px-3 py-2.5 text-xs text-destructive">
           {error instanceof Error ? error.message : t('appDataLoadFailed')}

package/src/features/apps/components/app-marketplace-catalog.tsx

@@ -21,7 +21,7 @@ import { pickLocalizedText } from '@/features/marketplace';
 import { Button } from '@/shared/components/ui/button';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Input } from '@/shared/components/ui/input';
-import { Skeleton } from '@/shared/components/ui/skeleton';
+import { SkeletonContent } from '@/shared/components/ui/skeleton';
 import { getLanguage, t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 
@@ -221,10 +221,10 @@ function MarketplaceCatalogContent({
 }) {
   if (isLoading) {
     return (
-      <div className="mx-auto grid max-w-[872px] gap-4 [@container(min-width:36rem)]:grid-cols-2 [@container(min-width:52rem)]:grid-cols-3" aria-label={t('appPackagesMarketplaceLoading')}>
-        <Skeleton className="aspect-[16/9] w-full rounded-2xl" />
-        <Skeleton className="aspect-[16/9] w-full rounded-2xl" />
-        <Skeleton className="hidden aspect-[16/9] w-full rounded-2xl [@container(min-width:52rem)]:block" />
+      <div className="mx-auto grid max-w-[872px] gap-4 [@container(min-width:36rem)]:grid-cols-2 [@container(min-width:52rem)]:grid-cols-3" role="status" aria-label={t('appPackagesMarketplaceLoading')}>
+        <SkeletonContent />
+        <SkeletonContent />
+        <SkeletonContent className="hidden [@container(min-width:52rem)]:flex" />
       </div>
     );
   }

package/src/features/apps/components/app-marketplace-detail.tsx

@@ -16,7 +16,7 @@ import {
   resolveAppMarketplaceInstallability,
 } from '@/features/apps/utils/app-marketplace-platform.utils';
 import { pickLocalizedText } from '@/features/marketplace';
-import { Skeleton } from '@/shared/components/ui/skeleton';
+import { Skeleton, SkeletonContent } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function MarketplaceDetail({
@@ -45,7 +45,16 @@ export function MarketplaceDetail({
   operation?: AppPackageOperationView;
 }) {
   if (isLoading) {
-    return <div className="space-y-4 p-6"><Skeleton className="h-24 w-full rounded-2xl" /><Skeleton className="h-40 w-full rounded-2xl" /></div>;
+    return (
+      <div className="mx-auto max-w-3xl space-y-6 px-5 py-5" role="status" aria-label={t('appPackagesMarketplaceLoading')}>
+        <SkeletonContent />
+        <div className="space-y-3">
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-5/6" />
+          <Skeleton className="h-3 w-2/3" />
+        </div>
+      </div>
+    );
   }
   if (error || !detail) {
     return <div role="alert" className="m-6 rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-5 text-sm text-destructive">{error?.message ?? t('appPackagesMarketplaceFailed')}</div>;

package/src/features/apps/components/app-packages-panel.tsx

@@ -27,7 +27,7 @@ import {
   DialogTitle,
 } from '@/shared/components/ui/dialog';
 import { Input } from '@/shared/components/ui/input';
-import { Skeleton } from '@/shared/components/ui/skeleton';
+import { SkeletonContent } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function AppPackagesPanel({
@@ -283,9 +283,9 @@ function AppPackageLibrary({
 }) {
   if (isLoading) {
     return (
-      <div className="divide-y divide-border/50" aria-label={t('appPackagesLoading')}>
-        <Skeleton className="h-44 w-full rounded-2xl" />
-        <Skeleton className="h-32 w-full rounded-2xl" />
+      <div className="divide-y divide-border/50" role="status" aria-label={t('appPackagesLoading')}>
+        <SkeletonContent />
+        <SkeletonContent />
       </div>
     );
   }

package/src/features/apps/components/apps-panel.tsx

@@ -18,10 +18,12 @@ export function AppsPanel({
   activeTab,
   onActiveTabChange,
   onOpenPanelApp,
+  serviceResourceId,
 }: {
   activeTab: AppsPanelTab;
   onActiveTabChange: (tab: AppsPanelTab) => void;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
+  serviceResourceId?: string;
 }) {
   const [focusedPackageId, setFocusedPackageId] = useState<string>();
   const navigationRef = useRef<HTMLElement>(null);
@@ -88,7 +90,7 @@ export function AppsPanel({
           <PanelAppsList onOpenPanelApp={onOpenPanelApp} />
         ) : activeTab === 'service-apps' ? (
           <Suspense fallback={null}>
-            <ServiceAppsPanel onManagePackage={managePackage} />
+            <ServiceAppsPanel resourceId={serviceResourceId} onManagePackage={managePackage} />
           </Suspense>
         ) : null}
       </div>

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

@@ -21,7 +21,7 @@ function ChatRuntime({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
   const { confirm, ConfirmDialog } = useConfirmDialog();
   const match = useMatch('/chat/:sessionId');
-  const sessionKey = parseSessionKeyFromRoute(match?.params.sessionId);
+  const sessionKey = parseSessionKeyFromRoute(match ? location.pathname.slice('/chat/'.length) : undefined);
   const workspaceMinimized = useWorkbenchSurfaceStore((state) => state.surfaces[`session-workspace:${sessionKey ?? 'draft'}`]?.minimized ?? false);
   const workspaceSessionKey = useChatThreadStore(({ snapshot }) =>
     snapshot.workspacePanelParentKey === sessionKey && sessionKey && !snapshot.workspacePanelHidden && !workspaceMinimized &&

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

@@ -13,7 +13,6 @@ const mocks = vi.hoisted(() => {
   const inputActions = {
     update: vi.fn(),
     syncComposer: vi.fn(),
-    resetComposer: vi.fn(),
     restoreComposer: vi.fn(),
     applyPromptSuggestion: vi.fn(),
     requestComposerFocusAtEnd: vi.fn(),

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

@@ -245,6 +245,9 @@ const controller: SessionConversationInputController = {
   send: vi.fn(),
   sendSteering: vi.fn(),
   sendPresetMessage: vi.fn(),
+  retryPendingSubmission: vi.fn(),
+  restorePendingSubmission: vi.fn(),
+  discardPendingSubmission: vi.fn(),
   sendDisabled: true,
   stop: vi.fn(),
   stopDisabled: false,
@@ -352,8 +355,12 @@ function StreamingSessionConversationInputHarness({
     consumeComposerFocusRequest: vi.fn(),
     removeAttachment: vi.fn(),
     requestComposerFocusAtEnd: vi.fn(),
-    resetComposer: vi.fn(),
     restoreComposer: vi.fn(),
+    beginSubmission: vi.fn(),
+    acceptSubmission: vi.fn(),
+    failSubmission: vi.fn(),
+    restoreSubmission: vi.fn(),
+    discardSubmission: vi.fn(),
     setAttachments: vi.fn(),
     setPendingProjectRoot: vi.fn(),
     setPendingSessionType: vi.fn(),
@@ -665,8 +672,12 @@ function AttachmentSubmitHarness({
     },
     selectedAgentId: 'main',
     sessionKey: 'session-attachment',
-    resetComposer: inputActions.resetComposer,
     restoreComposer: inputActions.restoreComposer,
+    beginSubmission: inputActions.beginSubmission,
+    acceptSubmission: inputActions.acceptSubmission,
+    failSubmission: inputActions.failSubmission,
+    restoreSubmission: inputActions.restoreSubmission,
+    discardSubmission: inputActions.discardSubmission,
     setSendError: inputActions.setSendError,
   });
 

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

@@ -304,8 +304,12 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     selectedAgentId,
     sessionKey,
     onSessionMaterialized,
-    resetComposer: inputActions.resetComposer,
     restoreComposer: inputActions.restoreComposer,
+    beginSubmission: inputActions.beginSubmission,
+    acceptSubmission: inputActions.acceptSubmission,
+    failSubmission: inputActions.failSubmission,
+    restoreSubmission: inputActions.restoreSubmission,
+    discardSubmission: inputActions.discardSubmission,
     setSendError: inputActions.setSendError,
   });
   const conversationMessages = useMemo(() => {
@@ -336,6 +340,9 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
       sendSteering: () => controllerRef.current.sendSteering(),
       sendPresetMessage: (message: string) =>
         controllerRef.current.sendPresetMessage(message).catch(() => undefined),
+      retryPendingSubmission: () => controllerRef.current.retryPendingSubmission(),
+      restorePendingSubmission: () => controllerRef.current.restorePendingSubmission(),
+      discardPendingSubmission: () => controllerRef.current.discardPendingSubmission(),
       sendDisabled: controller.sendDisabled,
       stop: () => controllerRef.current.stop(),
       stopDisabled: controller.stopDisabled,

package/src/features/chat/features/conversation/components/session-conversation-input-top-slot.tsx

@@ -0,0 +1,44 @@
+import type { ChatComposerSubmission } from '@/features/chat/stores/chat-composer-draft.store';
+import type { SessionConversationInputController } from '@/features/chat/features/conversation/types/session-conversation-input.types';
+import type { SessionConversationInputSnapshot } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
+import { t } from '@/shared/lib/i18n';
+import { SessionQueuedInputRows } from './session-queued-input-rows';
+
+export function SessionConversationInputTopSlot({ inputSnapshot, controller }: {
+  readonly inputSnapshot: SessionConversationInputSnapshot;
+  readonly controller: SessionConversationInputController;
+}) {
+  const submission = inputSnapshot.pendingSubmission;
+  if (!submission && controller.queuedInputs.length === 0) return null;
+  return <>
+    {controller.queuedInputs.length > 0 && <SessionQueuedInputRows controller={controller} />}
+    {submission && <SubmissionStatus submission={submission} controller={controller}
+      hasComposerContent={Boolean(inputSnapshot.text.trim() || inputSnapshot.selectedSkills.length || inputSnapshot.attachments.length)} />}
+  </>;
+}
+
+function SubmissionStatus({ submission, controller, hasComposerContent }: {
+  readonly submission: ChatComposerSubmission;
+  readonly controller: SessionConversationInputController;
+  readonly hasComposerContent: boolean;
+}) {
+  const statusText = submission.status === 'sending'
+    ? t('chatSubmissionSending')
+    : submission.status === 'rejected'
+      ? t('chatSubmissionRejected')
+      : t(submission.envelope.sessionId ? 'chatSendResultUnknown' : 'chatSendResultUnknownChild');
+  return <div className="rounded-lg border border-border bg-muted/50 px-3 py-2 text-sm" role="status">
+    <p>{statusText}</p>
+    <p className="mt-1 max-h-16 overflow-auto whitespace-pre-wrap text-muted-foreground">{submission.composer.text}</p>
+    <div className="mt-2 flex gap-3">
+      {submission.status === 'uncertain' && submission.envelope.sessionId &&
+        <button type="button" className="text-primary underline" onClick={controller.retryPendingSubmission}>{t('chatSubmissionRetry')}</button>}
+      {submission.status === 'rejected' && <>
+        <button type="button" className="text-primary underline" disabled={hasComposerContent} onClick={controller.restorePendingSubmission}>{t('chatSubmissionRestore')}</button>
+        <button type="button" className="text-muted-foreground underline" onClick={() => {
+          if (window.confirm(t('chatSubmissionDiscardConfirm'))) controller.discardPendingSubmission();
+        }}>{t('chatSubmissionDiscard')}</button>
+      </>}
+    </div>
+  </div>;
+}

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -7,7 +7,6 @@ import {
 } from 'react';
 import {
   ChatInputBar,
-  type ChatContextWindowIndicator,
   type ChatInputBarHandle,
 } from '@nextclaw/agent-chat-ui';
 import { isRuntimeDefaultModelValue } from '@nextclaw/shared';
@@ -56,41 +55,19 @@ import { useSystemObjectReferenceSelect } from '@/features/chat/features/convers
 import { ChatConversationTrack } from '@/features/chat/components/conversation/chat-conversation-track';
 import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-layout.store';
 import type { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
-import type {
-  SessionConversationQueuedInput,
-} from '@/features/chat/features/conversation/hooks/use-session-conversation-controller';
-import type {
-  SessionConversationInputActions,
-  SessionConversationInputSnapshot,
-} from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
 import {
   buildSessionConversationSkillPicker,
   buildSessionConversationToolbarSelects,
   resolveThinkingForConversationModel,
 } from '@/features/chat/features/conversation/utils/session-conversation-input-toolbar.utils';
-import { SessionQueuedInputRows } from './session-queued-input-rows';
+import { SessionConversationInputTopSlot } from './session-conversation-input-top-slot';
+import type { SessionConversationInputProps } from '@/features/chat/features/conversation/types/session-conversation-input.types';
+export type { SessionConversationInputController } from '@/features/chat/features/conversation/types/session-conversation-input.types';
 import { toast } from 'sonner';
 
 type SessionConversationInputQuery = ReturnType<typeof useSessionConversationInputQuery>;
 type SkillSource = SessionSkillEntryView['source'];
 
-export type SessionConversationInputController = {
-  readonly canEditQueuedInput: boolean;
-  readonly canStopGeneration: boolean;
-  readonly deleteQueuedInput: (id: string) => void;
-  readonly editQueuedInput: (id: string) => void;
-  readonly isSending: boolean;
-  readonly queuedInputs: readonly SessionConversationQueuedInput[];
-  readonly primaryAction: 'continue' | 'send';
-  readonly sendDisabled: boolean;
-  readonly stopDisabled: boolean;
-  readonly send: () => Promise<void> | void;
-  readonly sendSteering: () => Promise<void> | void;
-  readonly sendPresetMessage: (message: string) => Promise<void> | void;
-  readonly stop: () => Promise<void> | void;
-  readonly steerQueuedInput: (id: string) => void;
-};
-
 function toSkillRecords(
   snapshotRecords: SessionSkillEntryView[],
   scopeLabels: Record<SkillSource, string>,
@@ -181,17 +158,6 @@ function useSessionConversationInputCollections(params: {
   };
 }
 
-type SessionConversationInputProps = {
-  readonly contextWindow: ChatContextWindowIndicator | null;
-  readonly controller: SessionConversationInputController;
-  readonly inputActions: SessionConversationInputActions;
-  readonly inputQuery: SessionConversationInputQuery;
-  readonly inputSnapshot: SessionConversationInputSnapshot;
-  readonly onContextCompactingChange?: (sessionId: string, isCompacting: boolean) => void;
-  readonly placeholder?: string;
-  readonly surface?: 'default' | 'embedded';
-};
-
 export const SessionConversationInput = memo(function SessionConversationInput(props: SessionConversationInputProps) {
   const {
     contextWindow,
@@ -431,7 +397,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     <ChatInputBar
       ref={inputBarRef}
       surface={useReadingTrack ? 'embedded' : surface}
-      topSlot={controller.queuedInputs.length > 0 ? <SessionQueuedInputRows controller={controller} /> : null}
+      topSlot={<SessionConversationInputTopSlot inputSnapshot={inputSnapshot} controller={controller} />}
       floatingSlot={voice.phase !== 'idle' ? <ChatVoiceInputPanel manager={voiceManager} snapshot={voice}
         desktop={!isMobile} onStart={startVoice} /> : null}
       composer={{